// ============================================================ // STEINS;GATE — Extended Widgets // ============================================================ // • BootSequence — full-screen typing overlay on first load // • CharacterPortrait — PNG + halftone + glow // • RightRail — Worldline / PhoneWave / LabRoster / SERN // • CommandPalette — ⌘K with El Psy Kongroo easter egg // • DossierPanel — clicked avatar → bio overlay // • DMailModal — send a D-Mail, world line shifts // ============================================================ const { useState: useS, useEffect: useE, useRef: useR, useCallback: useCB, useMemo: useM } = React; // ─── Character registry (must match EmailApp.jsx keys) ────────────────────── // Each character has a static `img` (PNG) and an animated `gif` that plays // while they are actively typing a reply. const CHARS = { "makise.kurisu@viktor-kondria.org": { name: "Makise Kurisu", alias: "Christina", color: "#e08868", img: "img/kurisu.png", gif: "https://media.tenor.com/xxl4WidGyxYAAAAM/makise-kurisu-kurisu.gif", role: "Neuroscientist • 18", lab: "Lab Mem No.004", quote: "I'm not your assistant.", status: "online", }, "barrel-titor@2ch.net": { name: "Itaru Hashida", alias: "Daru / Supah Hacker", color: "#7a96da", img: "img/daru.png", gif: "https://media.tenor.com/oRCxeeSxDwcAAAAM/daru-itaru-hashida.gif", role: "Hacker • 19", lab: "Lab Mem No.003", quote: "tutturu in binary, okarin", status: "online", }, "mayushii@tutturu.jp": { name: "Mayuri Shiina", alias: "Mayushii", color: "#9ad8d2", img: "img/mayuri.png", gif: "https://media.tenor.com/OZao1uQfzOgAAAAM/mayuri-shiina-steins-gate.gif", role: "Hostage • 16", lab: "Lab Mem No.002", quote: "tutturu~ ☆", status: "online", }, "m.kiryuu@r025.com": { name: "Kiryuu Moeka", alias: "Shining Finger", color: "#b486dc", img: "img/moeka.png", gif: "https://media.tenor.com/RvM79ZgnRoYAAAAM/moeka-kiryu-steins-gate.gif", role: "Reporter • 22", lab: "Lab Mem No.005", quote: "FB.", status: "obscured", }, "nyan@future-gadget-lab.jp": { name: "Akiha Rumiho", alias: "Faris NyanNyan", color: "#dc7aaa", img: "img/faris.png", gif: "https://media.tenor.com/75Hu4jk2UHYAAAAM/steins-gate-faris-nyannyan.gif", role: "Akiba Idol • 17", lab: "Lab Mem No.006", quote: "nyaa~", status: "online", }, "suzuha.amane@ibm5100.net": { name: "Suzuha Amane", alias: "John Titor", color: "#d8c46a", img: "img/suzuha.png", gif: "https://media.tenor.com/s3jpTCvGX2IAAAAM/steins-gate-suzuha-amane.gif", role: "Resistance • 2036", lab: "Lab Mem No.007", quote: "Don't send the D-Mail.", status: "transmitting", }, }; window.STEINS_CHARS = CHARS; // ─── Typing-state subscription ────────────────────────────────────────────── // Allows TypewriterText to broadcast which character is currently typing, // so any avatar of that character can swap in the animated GIF. let _sgTypingFrom = null; const _sgTypingSubs = new Set(); function _sgSetTypingFrom(emailAddr) { _sgTypingFrom = emailAddr || null; _sgTypingSubs.forEach(fn => fn(_sgTypingFrom)); } window.sgSetTypingFrom = _sgSetTypingFrom; window.sgUseTypingFrom = function() { const [id, setId] = useS(_sgTypingFrom); useE(() => { _sgTypingSubs.add(setId); return () => _sgTypingSubs.delete(setId); }, []); return id; }; // ─── Emotion system (all characters) ───────────────────────────────────────── const FARIS_EMOTION_IMGS = { playful: 'img/faris_playful.png', anger: 'img/faris_anger.png', happiness: 'img/faris_happiness.png', confusion: 'img/faris_confusion.png', sadness: 'img/faris_sadness.png', fear: 'img/faris_fear.png', mischief: 'img/faris_mischief.png', surprise: 'img/faris_surprise.png', }; window.FARIS_EMOTION_IMGS = FARIS_EMOTION_IMGS; // CSS filter per emotion — applied to non-Faris portrait images const EMOTION_FILTERS = { playful: '', happiness: 'brightness(1.18) saturate(1.45)', anger: 'sepia(0.25) saturate(2.2) hue-rotate(330deg) brightness(1.05)', sadness: 'saturate(0.35) brightness(0.78)', fear: 'brightness(0.62) contrast(1.15) saturate(0.7)', confusion: 'hue-rotate(18deg) brightness(0.92) saturate(0.85)', mischief: 'brightness(1.08) contrast(1.12) saturate(1.25)', surprise: 'brightness(1.28) contrast(1.18) saturate(1.1)', }; window.EMOTION_FILTERS = EMOTION_FILTERS; // Emotion glows (box-shadow color tint per emotion) const EMOTION_GLOWS = { playful: null, happiness: 'rgba(255,220,80,0.7)', anger: 'rgba(220,60,60,0.7)', sadness: 'rgba(80,120,220,0.65)', fear: 'rgba(80,50,120,0.65)', confusion: 'rgba(180,140,220,0.6)', mischief: 'rgba(220,80,180,0.65)', surprise: 'rgba(255,255,255,0.55)', }; window.EMOTION_GLOWS = EMOTION_GLOWS; // Active emotion: { from: emailAddr, emotion: string } let _sgActiveEmotion = { from: null, emotion: 'playful' }; const _sgActiveEmotionSubs = new Set(); window.sgSetActiveEmotion = function(from, emotion) { _sgActiveEmotion = { from: from || null, emotion: emotion || 'playful' }; _sgActiveEmotionSubs.forEach(fn => fn(_sgActiveEmotion)); }; // Keep backward-compat alias for Faris window.sgSetFarisEmotion = function(emotion) { window.sgSetActiveEmotion('nyan@future-gadget-lab.jp', emotion); }; // ─── Character Portrait (PNG + glow) ───────────────────────────────────────── // Inject typing-glow keyframe + visible scrollbar styling once if (typeof document !== 'undefined' && !document.getElementById('sg-portrait-anim')) { const _s = document.createElement('style'); _s.id = 'sg-portrait-anim'; _s.textContent = ` @keyframes sgPortraitGlow { 0%,100%{opacity:0.55} 50%{opacity:1} } /* Visible-but-subtle scrollbars on every scrollable surface */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(200,195,185,0.22); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(200,195,185,0.45); background-clip: padding-box; border: 2px solid transparent; } * { scrollbar-color: rgba(200,195,185,0.32) transparent; scrollbar-width: thin; } `; document.head.appendChild(_s); } function CharacterPortrait({ email, size = 36, ring = true, glitch = false, typing = false }) { const c = CHARS[email]; const [hover, setHover] = useS(false); const [activeEmotion, setActiveEmotion] = useS(_sgActiveEmotion); const outerRef = useR(null); const [bubblePos, setBubblePos] = useS(null); useE(() => { _sgActiveEmotionSubs.add(setActiveEmotion); return () => _sgActiveEmotionSubs.delete(setActiveEmotion); }, []); useE(() => { if (!typing || !outerRef.current) { setBubblePos(null); return; } const update = () => { const r = outerRef.current?.getBoundingClientRect(); if (r) setBubblePos({ x: r.left + r.width / 2, y: r.top }); }; update(); window.addEventListener('resize', update); window.addEventListener('scroll', update, true); return () => { window.removeEventListener('resize', update); window.removeEventListener('scroll', update, true); }; }, [typing]); const isFaris = email === 'nyan@future-gadget-lab.jp'; const isActive = activeEmotion.from === email; const emotion = isActive ? activeEmotion.emotion : (isFaris ? 'playful' : null); if (!c) { return (
?
); } return (
{/* Typing glow ring */} {typing && (
)} {/* Thought bubble — fixed position to escape stacking contexts */} {bubblePos && ReactDOM.createPortal(
THINKING · · ·
, document.body )}
setHover(true)} onMouseLeave={() => setHover(false)} style={{ width: size, height: size, position: "relative", borderRadius: "50%", background: `radial-gradient(circle at 30% 25%, ${c.color}33, rgba(2,6,18,0.9))`, boxShadow: (() => { const glowColor = isActive && emotion ? EMOTION_GLOWS[emotion] : null; const base = ring ? `0 0 0 1px ${c.color}${typing ? 'cc' : '66'}, 0 0 ${typing ? 18 : hover ? 16 : 8}px ${c.color}${typing ? 'aa' : '55'}, inset 0 0 8px rgba(0,0,0,0.6)` : "none"; return glowColor ? `0 0 0 2px ${glowColor}, 0 0 14px ${glowColor}, ${base}` : base; })(), overflow: "hidden", transition: "box-shadow 0.3s ease, transform 0.25s ease, filter 0.3s ease", transform: hover ? "scale(1.04)" : "scale(1)", filter: '', }}> { e.target.src = c.img; }} alt={c.name} draggable={false} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 18%", animation: glitch ? "glitchFlash 0.6s ease" : "none", }}/> {/* warm tint wash */}
); } window.CharacterPortrait = CharacterPortrait; // ─── Boot Sequence ────────────────────────────────────────────────────────── const BOOT_LINES = [ "[ FUTURE GADGET LAB / TERMINAL v0.0011 ]", "> mounting /dev/microwave ............ OK", "> mounting /dev/phonewave ............ OK", "> linking SERN observation feed ........ BLOCKED", "> attractor field ........................ α", "> divergence reading ..................... 0.571046%", "> auth handshake @amadeus ............... GRANTED", "> loading mailbox: hououin.kyouma ....... 6 unread", "", "EL PSY KONGROO.", ]; // ─── Title-screen save slots ──────────────────────────────────────────────── function GlowBtn({ onClick, disabled, style, hoverStyle, glowColor="rgba(200,146,10,0.7)", children }) { const [hov, setHov] = useS(false); const on = hov && !disabled; return ( ); } // ─── Slot Scanner Preview (hover over filled save) ────────────────────────── function SlotPreview() { const CODES = ["0.571046", "1.130426", "0.000337", "0.409420", "1.048596", "0.337187", "0.823978"]; const SYMBOLS = ["α", "β", "Δ", "γ", "Ω", "σ", "φ"]; const rnd = () => Array.from({length:5}, () => Math.floor(Math.random()*16).toString(16)).join("").toUpperCase(); const pickSym = () => SYMBOLS[Math.floor(Math.random()*SYMBOLS.length)]; const pickCode = () => CODES[Math.floor(Math.random()*CODES.length)]; const [rows, setRows] = useS(() => Array.from({length:3}, () => ({ hex: rnd(), sym: pickSym(), code: pickCode() }))); useE(() => { const t = setInterval(() => { setRows(Array.from({length:3}, () => ({ hex: rnd(), sym: pickSym(), code: pickCode() }))); }, 75); return () => clearInterval(t); }, []); return (
{rows.map((r,i) => (
{r.hex} {r.sym} {r.code}%
))}
); } // ─── Button Scanner (NEW GAME hover effect) ────────────────────────────────────── function ButtonScanner({ hover }) { const CODES = ["0.571046", "1.130426", "0.000337", "0.409420", "1.048596", "0.337187", "0.823978"]; const SYMBOLS = ["\u03b1", "\u03b2", "\u0394", "\u03b3", "\u03a9", "\u03c3", "\u03c6"]; const rnd = () => Array.from({length:4}, () => Math.floor(Math.random()*16).toString(16)).join("").toUpperCase(); const pickSym = () => SYMBOLS[Math.floor(Math.random()*SYMBOLS.length)]; const pickCode = () => CODES[Math.floor(Math.random()*CODES.length)]; const [cols, setCols] = useS(() => Array.from({length:6}, () => ({ hex: rnd(), sym: pickSym(), code: pickCode() }))); useE(() => { const speed = hover ? 45 : 160; const t = setInterval(() => { setCols(Array.from({length:6}, () => ({ hex: rnd(), sym: pickSym(), code: pickCode() }))); }, speed); return () => clearInterval(t); }, [hover]); return (
{cols.slice(0,3).map((c,i) => ( {c.sym}{c.hex} ))}
{cols.slice(3).map((c,i) => ( {c.code}%{c.sym} ))}
); } // ─── Matrix Rain ──────────────────────────────────────────────────────────── // A single falling column of glyphs. The leading char is bright white with glow, // trailing chars fade. Characters scramble periodically. function MatrixColumn({ leftPct, speed, delay, mainColor, charSet, fontSize }) { const N = 22; const rndChar = () => charSet[Math.floor(Math.random() * charSet.length)]; const [chars, setChars] = useS(() => Array.from({length: N}, rndChar)); useE(() => { const id = setInterval(() => { setChars(prev => { const next = [...prev]; for (let k = 0; k < 3; k++) next[Math.floor(Math.random() * N)] = rndChar(); return next; }); }, 70); return () => clearInterval(id); }, []); return (
{chars.map((c, i) => (
{c}
))}
); } // Matrix rain on one screen edge — multiple columns with varied speeds. function MatrixRain({ side, mainColor, intense }) { const NUM_COLS = intense ? 16 : 12; // Hex digits + Greek letters + Katakana — gives the Steins;Gate / Matrix feel const charSet = useM(() => [ "0","1","2","3","4","5","6","7","8","9", "A","B","C","D","E","F", "\u03b1","\u03b2","\u03b3","\u03b4","\u03a9","\u03a6","\u03a8","\u03a3","\u0394","\u0398","\u039b","\u03a0", "\u30a2","\u30a4","\u30a6","\u30a8","\u30aa","\u30ab","\u30ad","\u30af","\u30b1","\u30b3", "\u30b5","\u30b7","\u30b9","\u30bb","\u30bd","\u30bf","\u30c1","\u30c4","\u30c6","\u30c8", "\u30ca","\u30cb","\u30cc","\u30cd","\u30ce","\u30cf","\u30d2","\u30d5","\u30d8","\u30db", ], []); const fontSize = intense ? 14 : 13; const width = intense ? "32%" : "26%"; const mask = side === "left" ? "linear-gradient(to right, black 0%, black 55%, transparent 100%)" : "linear-gradient(to left, black 0%, black 55%, transparent 100%)"; return (
{Array.from({length: NUM_COLS}).map((_, i) => ( ))}
); } // ─── Transition overlays — pure zoom (no matrix rain, no loading screen) ─── // The zoom effect is applied to the title content below; these overlays are // intentionally empty so the transition is just a clean zoom-into-game. function NewGameTransition() { return null; } function LoadTransition() { return null; } function TitleSaveSlots({ onNewGame, onLoadGame }) { const mono = { fontFamily: "Share Tech Mono,monospace" }; const NUM = 3; const readSlots = () => Array.from({ length: NUM }, (_, i) => { try { return JSON.parse(localStorage.getItem(`sg_save_slot_${i}`)); } catch { return null; } }); const [slots, setSlots] = useS(readSlots); const [busy, setBusy] = useS(null); const [flash, setFlash] = useS(null); const [hovSlot, setHovSlot] = useS(null); const [selSlot, setSelSlot] = useS(0); const doFlash = (idx, msg) => { setFlash({ idx, msg }); setTimeout(() => setFlash(null), 1800); }; const handleLoad = async (i) => { if (!slots[i]) return; setBusy({ idx: i, action: "load" }); const fn = window.sg_loadGame; if (fn) await fn(i, () => {}, () => {}); setBusy(null); doFlash(i, "✓ GELADEN"); // Mark this slot as the active slot for auto-save localStorage.setItem("sg_active_slot", String(i)); setTimeout(() => onLoadGame(slots[i]), 450); }; const [hovNewGame, setHovNewGame] = useS(false); const handleDelete = (i) => { if (!slots[i] || !confirm(`Spielstand ${i + 1} löschen?`)) return; localStorage.removeItem(`sg_save_slot_${i}`); setSlots(prev => { const n = [...prev]; n[i] = null; return n; }); }; const totalCh = () => { try { return (window.sg_CHAPTERS || []).length || 5; } catch { return 5; } }; return (
{/* Section label */}
SPIELSTAND
{/* Save slots */}
{slots.map((slot, i) => { const isBusy = busy?.idx === i; const isFlash = flash?.idx === i; const isHov = hovSlot === i; const doneChaps = slot ? Object.keys(slot.completed || {}).length : 0; const chatCount = slot ? Object.keys(slot.chats || {}).length : 0; const mails = slot?.stats?.emailsSent || 0; const tsLabel = slot ? new Date(slot.ts).toLocaleString("de-DE", { day:"2-digit", month:"2-digit", year:"2-digit", hour:"2-digit", minute:"2-digit" }) : null; const isSel = selSlot === i; return (
setSelSlot(i)} onMouseEnter={() => setHovSlot(i)} onMouseLeave={() => setHovSlot(null)} style={{ position: "relative", flex: 1, padding: "14px 16px", display: "flex", flexDirection: "column", gap: 8, cursor: "pointer", background: isSel ? "rgba(20,16,8,0.55)" : (isHov ? "rgba(2,6,18,0.55)" : "rgba(2,6,18,0.42)"), backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)", border: `1px solid rgba(200,146,10,${isSel ? 0.85 : isHov ? 0.55 : slot ? 0.22 : 0.1})`, boxShadow: isSel ? "0 0 28px rgba(200,146,10,0.32), inset 0 0 18px rgba(200,146,10,0.10)" : (isHov ? "0 0 18px rgba(200,146,10,0.18), inset 0 0 12px rgba(200,146,10,0.05)" : "none"), transition: "all 0.18s ease", }}> {/* Slot header */}
SLOT {i + 1}
{/* Orange status dot removed */} {/* Hover popup — directly attached to top of slot, no gap */} {slot && isHov && (
)} {/* Slot data */} {slot ? ( <>
{isFlash ? flash.msg : tsLabel}
CH {doneChaps}/{totalCh()} · {mails} MAILS
{isHov && } ) : (
{isFlash ? flash.msg : "LEER"}
)} {/* Selected indicator bar */} {isSel &&
}
); })}
{/* Action row: NEW GAME — full width with scanner */}
setHovNewGame(true)} onMouseLeave={() => setHovNewGame(false)}> { // Use the selected slot for auto-save during the new game localStorage.setItem("sg_active_slot", String(selSlot)); // Reset progress for a fresh start localStorage.setItem("sg_chapters", "{}"); localStorage.setItem("sg_stats", JSON.stringify({ emailsSent: 0, dmailsSent: 0, aiRepliesReceived: 0, emailsSentTo: {} })); onNewGame(); }} style={{ ...mono, width: "100%", padding: "16px 0", fontSize: 13, letterSpacing: "0.5em", cursor: "pointer", background: "rgba(2,6,18,0.42)", backdropFilter: "blur(8px)", border: "1px solid rgba(200,146,10,0.45)", color: "#ffffff", fontWeight: "700" }} hoverStyle={{ background: "rgba(200,146,10,0.16)", borderColor: "rgba(200,146,10,0.9)", color: "#ffffff", letterSpacing: "0.56em", boxShadow: "0 0 22px rgba(200,146,10,0.32)" }} >▶ NEW GAME
); } function BootSequence({ onDone, onLoadSave }) { const [line, setLine] = useS(0); const [glyphs, setGlyphs] = useS(""); const [booted, setBooted] = useS(false); const [exiting, setExiting] = useS(false); const audioRef = useR(null); // AudioBufferSourceNode const audioCtxRef = useR(null); const audioFilterRef = useR(null); const audioGainRef = useR(null); const [unlocked, setUnlocked] = useS(false); const unlock = () => { if (unlocked) return; setUnlocked(true); const audio = new Audio('audio/grind.mp3'); audio.currentTime = 26; audio.loop = true; audioRef.current = audio; audio.play().catch(() => {}); // Wire up Web Audio API: source → lowpass filter → gain → destination // This enables muffleAndFade's high-quality exponential ramp path. try { const ctx = new (window.AudioContext || window.webkitAudioContext)(); const source = ctx.createMediaElementSource(audio); const filter = ctx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.value = 20000; filter.Q.value = 0.7; const gain = ctx.createGain(); gain.gain.value = 0.16; source.connect(filter); filter.connect(gain); gain.connect(ctx.destination); audioCtxRef.current = ctx; audioFilterRef.current = filter; audioGainRef.current = gain; } catch (e) { // Fallback: plain volume control audio.volume = 0; const fadeStart = Date.now(); const fadeId = setInterval(() => { const p = Math.min(1, (Date.now() - fadeStart) / 800); audio.volume = p * 0.16; if (p >= 1) clearInterval(fadeId); }, 16); } }; // Muffle (lowpass cutoff sweep down) and fade gain to 0 over `durationMs`. const muffleAndFade = (durationMs) => { const ctx = audioCtxRef.current; const filter = audioFilterRef.current; const gain = audioGainRef.current; if (ctx && filter && gain) { const now = ctx.currentTime; const dur = Math.max(0.1, durationMs / 1000); // Filter cutoff: 20k → 200 Hz (heavily muffled, like behind a wall) // Exponential ramp = perceptually linear pitch shift for smooth ear-pleasing fade filter.frequency.cancelScheduledValues(now); filter.frequency.setValueAtTime(filter.frequency.value, now); filter.frequency.exponentialRampToValueAtTime(200, now + dur); // Gentle Q boost mid-sweep for slight resonance, then ease back filter.Q.cancelScheduledValues(now); filter.Q.setValueAtTime(filter.Q.value, now); filter.Q.linearRampToValueAtTime(2.0, now + dur * 0.55); filter.Q.linearRampToValueAtTime(0.7, now + dur); // Exponential gain fade — sounds smoother than linear (matches human loudness perception) gain.gain.cancelScheduledValues(now); gain.gain.setValueAtTime(Math.max(gain.gain.value, 0.0001), now); gain.gain.exponentialRampToValueAtTime(0.0001, now + dur); } else if (audioRef.current) { // Fallback: plain volume fade if Web Audio API unavailable const a = audioRef.current; const startVol = a.volume; const startTime = Date.now(); const id = setInterval(() => { const t = Math.min(1, (Date.now() - startTime) / durationMs); a.volume = startVol * (1 - t); if (t >= 1) clearInterval(id); }, 30); } }; // Hard-stop the grind audio (called at end of transition or on unmount). const stopAudio = () => { if (audioRef.current) { try { audioRef.current.pause(); audioRef.current.src = ''; } catch (e) {} audioRef.current = null; } if (audioCtxRef.current) { try { audioCtxRef.current.close(); } catch (e) {} audioCtxRef.current = null; } }; useE(() => { return () => { stopAudio(); }; }, []); const [transType, setTransType] = useS(null); const doExit = () => { onDone(); }; const enter = () => { stopAudio(); setExiting(true); setTimeout(onDone, 800); }; // Total transition durations — slightly longer for smoother feel const NEW_DUR = 1550; const LOAD_DUR = 2000; // Boot fade kicks in mid-zoom and overlaps the final reveal smoothly const NEW_FADE_AT = 850; const LOAD_FADE_AT = 1250; const startNewGame = () => { // Audio keeps playing — muffle and fade so it ends EXACTLY when the transition ends muffleAndFade(NEW_DUR); setTransType("new"); // Mid-zoom: kick off boot fade-out so the screen blurs AS the menu zooms past camera setTimeout(() => { setExiting(true); }, NEW_FADE_AT); setTimeout(() => { stopAudio(); onDone(); }, NEW_DUR); }; const startLoadGame = (slotData) => { muffleAndFade(LOAD_DUR); setTransType("load"); setTimeout(() => { onLoadSave && onLoadSave(slotData); setExiting(true); }, LOAD_FADE_AT); setTimeout(() => { stopAudio(); onDone(); }, LOAD_DUR); }; useE(() => { if (line >= BOOT_LINES.length) { const t = setTimeout(() => setBooted(true), 400); return () => clearTimeout(t); } const cur = BOOT_LINES[line]; if (cur === "") { setLine(l => l + 1); return; } let i = 0; const id = setInterval(() => { i += 1; setGlyphs(cur.slice(0, i)); if (i >= cur.length) { clearInterval(id); setTimeout(() => { setLine(l => l + 1); setGlyphs(""); }, line >= BOOT_LINES.length - 1 ? 350 : 60); } }, line === BOOT_LINES.length - 1 ? 55 : 12); return () => clearInterval(id); }, [line]); return (
{/* ── Click-to-start overlay ── */} {!unlocked && (
▶ CLICK TO START
)} {/* background video — muted loop, high contrast, start at 59:00 */}