:root{--bg: #050607;--ink: #c9c6bf;--voice: #8fb0c0;--player: #6f6a63;--line: #1b1e22;--diode: #b7883f;--panel: #0b0d0f;--dim: #57534c}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg)}body{font-family:Courier New,ui-monospace,monospace;color:var(--ink);display:flex;justify-content:center;min-height:100dvh}#root{width:100%;display:flex;justify-content:center}.app{position:relative;width:100%;max-width:420px;height:100dvh;display:flex;flex-direction:column;border-left:1px solid var(--line);border-right:1px solid var(--line);overflow:hidden}.stage{position:relative;height:clamp(180px,36dvh,280px);flex:none;border-top:1px solid var(--line)}.scene{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 90% at 50% 120%,#0c0f12,#050607 70%);overflow:hidden}.scene svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.scene .scene-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.scene-overlay{pointer-events:none}.scene-img-night{filter:brightness(.62) saturate(.85)}.scene.lit .scene-img-night{opacity:0;animation:night-lift .9s steps(3,end) 1}@keyframes night-lift{0%{opacity:1}35%{opacity:.25}55%{opacity:.75}to{opacity:0}}.scene.lit{background:radial-gradient(120% 90% at 50% 120%,#2a3138,#14181c 70%)}.scene.lit svg.scene-placeholder{filter:brightness(2.2)}.diode{fill:var(--diode);animation:breathe 2.6s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.9}50%{opacity:.25}}.reflet{opacity:0;transition:opacity .12s ease-out}.reflet.visible{opacity:1}.hud{font-size:11px;letter-spacing:2px;color:var(--dim);opacity:.75;padding:8px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;flex:none}.journal{flex:1;overflow-y:auto;padding:18px 16px;line-height:1.65;display:flex;flex-direction:column;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 42px);mask-image:linear-gradient(to bottom,transparent 0,#000 42px)}.journal:before{content:"";display:block;flex:1 0 auto}.entry{margin:0 0 14px;white-space:pre-wrap;transition:opacity 1.2s ease}.entry.narration{color:var(--ink)}.entry.voice{color:var(--voice)}.entry.player{color:var(--player);font-style:italic}.entry.system{color:var(--dim)}.entry.faded{opacity:.35}.speaker{color:var(--dim);font-size:11px;letter-spacing:1px;font-style:normal}.cursor{display:inline-block;width:8px;margin-left:1px;border-bottom:2px solid var(--ink);animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.entry.waiting{letter-spacing:6px}.static-dot{opacity:0;animation:static-pulse 1.3s ease-in-out infinite}.static-dot:nth-child(2){animation-delay:.4s}.static-dot:nth-child(3){animation-delay:.8s}@keyframes static-pulse{0%,to{opacity:.1}40%{opacity:.8}}.actions{position:absolute;left:0;right:0;bottom:0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;z-index:5}.choice{text-align:left;background:#050607c7;color:var(--ink);border:1px solid #262b31;padding:11px 14px;font:inherit;font-size:14px;cursor:pointer;opacity:0;transform:translateY(4px);transition:opacity .6s ease,transform .6s ease,border-color .16s}.choice.show{opacity:1;transform:none}.choice:hover{border-color:#33383e}.choice:focus-visible{outline:1px solid #4a5560;outline-offset:2px}.choice:disabled{color:#4a4640;cursor:default}.choice .cost{float:right;color:var(--dim);font-size:12px}.say-row{display:flex;gap:8px;opacity:0;transition:opacity .6s ease}.say-row.show{opacity:1}.say-row input{flex:1;min-width:0;background:#050607d1;color:var(--ink);border:1px solid #262b31;padding:11px 14px;font:inherit;font-size:14px}.say-row input:focus-visible{outline:1px solid #4a5560;outline-offset:1px}.say-row button{background:#050607d1;color:var(--ink);border:1px solid #262b31;padding:11px 14px;font:inherit;font-size:14px;cursor:pointer}.say-row button:disabled{color:#4a4640;cursor:default}.say-row button:focus-visible{outline:1px solid #4a5560;outline-offset:2px}.end-veil{position:absolute;top:0;right:0;bottom:0;left:0;background:#000;opacity:0;transition:opacity 6s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;pointer-events:none;z-index:10}.end-veil.closing{opacity:1;pointer-events:auto}.end-veil .restart{background:transparent;color:var(--dim);border:1px solid var(--line);padding:9px 16px;font:inherit;font-size:12px;letter-spacing:2px;cursor:pointer;opacity:0;transition:opacity 2s ease 5s}.end-veil.closing .restart{opacity:.7}.menu{position:relative;width:100%;max-width:420px;height:100dvh;display:flex;flex-direction:column;border-left:1px solid var(--line);border-right:1px solid var(--line);overflow:hidden}.menu-scene{position:relative;height:52dvh;flex:none;overflow:hidden;image-rendering:pixelated}.menu-scene:after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}.menu-scene svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.menu-scene img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}.menu-overlay{pointer-events:none}.menu-window{opacity:.55;animation:window-flicker 5.2s ease-in-out infinite}@keyframes window-flicker{0%,to{opacity:.55}47%{opacity:.35}53%{opacity:.6}}.beacon-on{animation:beacon-blink-on 2.6s linear infinite}.beacon-cover{animation:beacon-blink-off 2.6s linear infinite}@keyframes beacon-blink-on{0%,52%{opacity:1}56%,96%{opacity:0}to{opacity:1}}@keyframes beacon-blink-off{0%,52%{opacity:0}56%,96%{opacity:.75}to{opacity:0}}.window-glow{animation:window-live 6.4s ease-in-out infinite}@keyframes window-live{0%,to{opacity:.55}13%{opacity:.4}21%{opacity:.62}38%{opacity:.48}47%{opacity:.68}62%{opacity:.42}80%{opacity:.58}}.window-shadow{opacity:0;animation:window-pass 23s linear infinite}@keyframes window-pass{0%,86%{opacity:0}88%,91%{opacity:.5}94%,to{opacity:0}}.sky-flash{opacity:0;transition:opacity .7s ease-out}.storm-far .sky-flash{opacity:.22;transition:opacity 30ms}.storm-strike .sky-flash{opacity:.45;transition:opacity 30ms}.bolt{opacity:0}.storm-far .bolt-far,.storm-strike .bolt-strike{opacity:1}.rain{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.rain-layer{position:absolute;top:-120px;right:-35%;bottom:-500px;left:-35%;will-change:transform}.rain-far{animation:rain-fall-far 2.4s linear infinite}@keyframes rain-fall-far{0%{transform:rotate(9deg) translateY(-360px)}to{transform:rotate(9deg) translateY(0)}}.rain-near{animation:rain-fall-near 1.2s linear infinite}@keyframes rain-fall-near{0%{transform:rotate(13deg) translateY(-360px)}to{transform:rotate(13deg) translateY(0)}}.menu-lower{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 16px calc(28px + env(safe-area-inset-bottom))}.menu-title{margin:0;font-size:28px;font-weight:400;letter-spacing:14px;text-indent:14px;color:var(--ink);opacity:0;transition:opacity 1.6s ease}.menu-title.show{opacity:.9}.menu-tag{margin:0 0 18px;font-size:12px;letter-spacing:3px;color:var(--dim);opacity:0;transition:opacity 1.6s ease .6s}.menu-tag.show{opacity:.8}.menu-actions{display:flex;flex-direction:column;gap:10px;width:min(240px,80%);opacity:0;transform:translateY(4px);transition:opacity .9s ease 1.3s,transform .9s ease 1.3s}.menu-actions.show{opacity:1;transform:none}.menu-btn{background:transparent;color:var(--ink);border:1px solid var(--line);padding:13px 16px;font:inherit;font-size:14px;letter-spacing:4px;cursor:pointer;transition:border-color .16s}.menu-btn:hover{border-color:#33383e}.menu-btn:focus-visible{outline:1px solid #4a5560;outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){.scene.lit .scene-img-night{animation:none;transition:opacity .8s ease}.storm-far .sky-flash{opacity:.1}.storm-strike .sky-flash{opacity:.18}.beacon-on{animation:beacon-blink-on 4s ease-in-out infinite}.beacon-cover{animation:beacon-blink-off 4s ease-in-out infinite}.window-glow{animation:none;opacity:.55}.window-shadow{animation:none;opacity:0}.rain{display:none}.menu-title,.menu-tag,.menu-actions{transition:opacity .3s;transform:none}.choice{transition:opacity .2s;transform:none}.say-row{transition:opacity .2s}.diode{animation:none;opacity:.7}.end-veil{transition:opacity .8s ease}.end-veil .restart{transition:opacity .4s ease .8s}}
