17a0bb07ed
Verified end-to-end in browser: attract, QTE pass/fail, death/retry, lives, win screen. QTE clock driven by rAF + timeupdate + interval so background-tab throttling can't starve the too-late check. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
51 lines
3.1 KiB
CSS
51 lines
3.1 KiB
CSS
* { 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; }
|
|
|
|
#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; }
|
|
@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; }
|
|
|
|
/* 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; }
|