* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #000; overflow: hidden; font-family: "Courier New", monospace; }

#stage { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        max-width: 100vw; max-height: 100vh; aspect-ratio: 16/9; width: 100%;
        opacity: 0; pointer-events: none; }
video.active { opacity: 1; }
video.mirror { transform: translate(-50%, -50%) scaleX(-1); }

#scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 4px);
  box-shadow: inset 0 0 18vmin rgba(0,0,0,.85); }

/* QTE cue */
#cue { position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%);
  font-size: 14vmin; font-weight: bold; color: #0ff; z-index: 10; opacity: 0;
  text-shadow: 0 0 2vmin #0ff, 0 0 6vmin #08f; pointer-events: none; }
#cue.show { opacity: 1; animation: pulse .3s ease-in-out infinite alternate; }
#cue.good { color: #0f4; text-shadow: 0 0 2vmin #0f4; animation: pop .25s ease-out; }
#cue.hold { color: #fa0; text-shadow: 0 0 2vmin #fa0, 0 0 6vmin #f60; }

/* needle-drop flash (optional power-up prompt) */
#nd { position: absolute; top: 14%; right: 8%; font-size: 8vmin; color: #f0f; z-index: 10;
  opacity: 0; text-shadow: 0 0 2vmin #f0f, 0 0 6vmin #90f; pointer-events: none; }
#nd.show { opacity: 1; animation: pulse .18s ease-in-out infinite alternate; }

/* white-label toast */
#toast { position: absolute; top: 24%; left: 50%; transform: translateX(-50%);
  font-size: 4vmin; color: #fff; z-index: 10; opacity: 0; letter-spacing: .5vmin;
  text-shadow: 0 0 2vmin #fff; pointer-events: none; transition: opacity .3s; }
#toast.show { opacity: 1; }
@keyframes pulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.18); } }
@keyframes pop { from { transform: translateX(-50%) scale(1.4); opacity: 1; } to { transform: translateX(-50%) scale(1); opacity: 0; } }

/* HUD */
#hud { position: absolute; top: 2vmin; left: 0; right: 0; display: flex;
  justify-content: space-between; padding: 0 3vmin; z-index: 10; pointer-events: none; }
#lives { color: #f33; font-size: 4vmin; letter-spacing: .8vmin; text-shadow: 0 0 1.5vmin #f33; }
#score { color: #ff0; font-size: 4vmin; text-shadow: 0 0 1.5vmin #f80; }
#labels { color: #fff; font-size: 3vmin; letter-spacing: .5vmin; text-shadow: 0 0 1vmin #fff; }

/* full screens */
.screen { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3vmin; text-align: center;
  background: radial-gradient(ellipse at center, #180828 0%, #000 75%); }
.screen.hidden { display: none; }
.screen h1 { color: #f0f; font-size: 9vmin; text-shadow: 0 0 2vmin #f0f, 0 0 8vmin #90f; }
.screen h2 { color: #fff; font-size: 7vmin; text-shadow: 0 0 2vmin #0ff; }
.screen .sub { color: #0ff; font-size: 3vmin; }
.screen .blink { color: #fff; font-size: 4vmin; animation: blink 1s steps(2) infinite; }
#hiscore { color: #ff0; font-size: 3vmin; }
@keyframes blink { 50% { opacity: 0; } }

/* debug */
#debug { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(0,0,0,.8); padding: 1vmin 2vmin; font-size: 1.8vmin; color: #0f0; }
#debug.hidden { display: none; }
#dbg-timeline { position: relative; height: 2.4vmin; background: #222; margin-bottom: .8vmin; }
.dbg-win { position: absolute; top: 0; bottom: 0; background: #08f; opacity: .8; }
.dbg-win.passed { background: #0f4; } .dbg-win.failed { background: #f33; }
#dbg-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; z-index: 2; }
#dbg-row { display: flex; gap: 2vmin; align-items: center; }
#dbg-row select { background: #111; color: #0f0; border: 1px solid #0f0; font: inherit; }