4f7d21df2b
- scenes.json: every DESIGN.md scene wired — T1-T7, SH1-6, Misfile, 4 needle-drop alts, 7 white labels, boss volleys, REPLAY queue sentinel, win+stinger gate - player.js: choice windows (branch/death-goto), random variants (sh2 tape), endurance restarts w/ tightening (sh4), hold windows (t4s5/t5s5), needledrop power-up branches, unprompted collects, mirror-on-replay, soft fail (t5s4), needle_skip transitions, stale-death-timeout guard - clips renamed to DESIGN ids (s01->t1s1 etc); placeholder gen covers all new window types and never overwrites real footage (86 clips: 8 real + 78 gen) - sheets: added missing sh4_action + t5s4_action prompts - verified in browser: choice pass/timeout, collect, needledrop, endurance tighten+death, hold pass/release-fail, soft fail, replay queue w/ mirror, win->stinger with 7 labels, live-timing run of t1s1 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
65 lines
3.9 KiB
CSS
65 lines
3.9 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; }
|
|
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; }
|