:root{--ink:#090607;--cream:#e7d5b1;--red:#8d2633;--dim:#5b4b43;--line:#2a1a1d;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050405;color:var(--cream);font-family:"Courier New",monospace}button{font:inherit;color:inherit}#app{position:relative;width:100%;height:100%;max-width:560px;margin:auto;background:var(--ink);overflow:hidden}.screen{display:none;position:absolute;inset:0}.screen.active{display:flex}
#menu{flex-direction:column;justify-content:center;padding:clamp(24px,8vw,48px);background:radial-gradient(circle at 72% 33%,#32171a 0,#12090b 28%,#050405 68%);isolation:isolate}.menu-noise,.crt{position:absolute;inset:0;pointer-events:none}.menu-noise{opacity:.2;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#fff1 4px);animation:flicker .14s infinite;z-index:-1}.title-mark{font-weight:900;font-size:clamp(2.5rem,12vw,4.6rem);line-height:.78;letter-spacing:-.09em;text-shadow:4px 0 #40131b,-3px 2px #14201e;transform:skew(-2deg);margin-bottom:12vh}.title-mark span{color:var(--red);font-size:.55em;letter-spacing:.08em}.menu-list{display:grid;gap:7px}.menu-list button{border:0;background:none;text-align:left;padding:8px 0;font-weight:bold;font-size:1.3rem;letter-spacing:.08em}.menu-list button:active{color:#fff;text-shadow:0 0 8px #fff}.menu-list button::before{content:'›';opacity:0;margin-right:10px}.menu-list button:active::before{opacity:1}.menu-list i{font-size:.65rem;font-style:normal;color:#826b61;border:1px solid #4a3834;padding:3px 5px;margin-left:8px}.menu-hint{position:absolute;bottom:calc(16px + var(--safe-bottom));font-size:.65rem;color:#6d5a51;letter-spacing:.2em}
#game{flex-direction:column;background:#060506}.game-hud{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:2px solid #2c171a;font-size:.75rem;letter-spacing:.14em}.game-hud button{border:0;background:none;font-size:1.1rem;padding:12px}.game-hud span::before{content:'●';color:var(--red);margin-right:8px;animation:blink 1.4s steps(1) infinite}#canvasWrap{position:relative;flex:1;min-height:0;background:#000;overflow:hidden}canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.crt{z-index:2;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.22) 4px),linear-gradient(90deg,rgba(255,0,0,.035),transparent 40%,rgba(0,80,255,.03));box-shadow:inset 0 0 40px #000;mix-blend-mode:screen}#controls{height:154px;padding:10px 20px calc(10px + var(--safe-bottom));display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#10090a,#080607);border-top:2px solid #261619}.dpad{width:130px;height:130px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px}.dpad button{border:1px solid #5a383a;background:#1c1113;border-radius:7px;font-size:1.05rem;touch-action:none}.dpad button:active,.dpad button.pressed{background:#67212c}.dpad [data-dir=up]{grid-area:1/2}.dpad [data-dir=left]{grid-area:2/1}.dpad [data-dir=down]{grid-area:2/2}.dpad [data-dir=right]{grid-area:2/3}#interactBtn{width:82px;height:82px;border:2px solid #79404a;border-radius:50%;background:radial-gradient(circle,#7f2632,#3b151c 65%,#160b0e);box-shadow:0 5px 0 #17090c;font-weight:bold}#interactBtn span{font-size:1.6rem;display:block}#interactBtn small{font-size:.65rem;letter-spacing:.12em}
.overlay{display:none;position:absolute;inset:0;z-index:10;background:#0008;align-items:flex-end;padding:16px 14px calc(18px + var(--safe-bottom))}.overlay.active{display:flex}.dialog-box,.panel{width:100%;border:3px solid var(--cream);background:#100b0c;box-shadow:6px 6px 0 #401820;padding:14px;position:relative}.dialog-box{min-height:128px}.dialog-box #speaker{font-size:.7rem;color:#c95b69;letter-spacing:.12em;margin-bottom:8px}.dialog-box p{font-size:1rem;line-height:1.35;margin:0 20px 8px 0;white-space:pre-line}.tap-next{position:absolute;right:12px;bottom:8px;animation:bob .8s steps(2) infinite}#choices{display:grid;gap:5px;margin-top:10px}#choices button,.panel button{border:1px solid #705253;background:#221417;padding:10px;text-align:left}.panel{max-height:82vh;overflow:auto}.panel h2{font-size:1.25rem;color:#d15a69;margin:0 0 18px}.panel label{display:block;margin:12px 0 6px;font-size:.75rem}.panel input{width:100%;padding:12px;background:#080607;border:1px solid #66464a;color:#fff;font:inherit;text-transform:uppercase}.panel .back{margin-top:18px;width:100%;text-align:center}.code-row{display:flex;gap:8px}.code-row button{flex:0 0 auto}.level-status{padding:8px 0;border-bottom:1px solid #332326;color:#8a7570}#toast{position:absolute;z-index:20;top:58px;left:50%;transform:translateX(-50%) translateY(-20px);opacity:0;background:#0d090a;border:1px solid #86505a;padding:9px 13px;font-size:.7rem;white-space:nowrap;transition:.2s}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.corridor-fx{position:absolute;inset:44px 0 154px;z-index:7;pointer-events:none;overflow:hidden;box-shadow:inset 12px 0 #72132644,inset -9px 0 #163f5544;animation:corridorJolt .42s steps(2) infinite}.corridor-fx i{position:absolute;left:-10%;width:120%;height:4px;background:#a72c4d99;animation:cutSlice .34s steps(2) infinite}.corridor-fx i:nth-child(1){top:18%}.corridor-fx i:nth-child(2){top:41%;height:13px;animation-delay:-.2s}.corridor-fx i:nth-child(3){top:64%;animation-delay:-.1s}.corridor-fx i:nth-child(4){top:82%;height:8px;animation-delay:-.27s}
.cutscene-fx{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;background:#05000099;animation:cutFlicker .13s steps(2) infinite}.cutscene-fx i{position:absolute;left:-20%;width:140%;height:8%;background:#7d071dcc;mix-blend-mode:screen;animation:cutSlice .65s steps(3) infinite}.cutscene-fx i:nth-child(1){top:9%;animation-delay:-.1s}.cutscene-fx i:nth-child(2){top:27%;height:3%;animation-delay:-.35s}.cutscene-fx i:nth-child(3){top:44%;height:12%;animation-delay:-.55s}.cutscene-fx i:nth-child(4){top:68%;height:5%;animation-delay:-.2s}.cutscene-fx i:nth-child(5){top:84%;height:9%;animation-delay:-.48s}.cutscene-fx strong{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);font-size:clamp(2rem,13vw,4rem);letter-spacing:.16em;color:#d7c6a4;text-shadow:7px 0 #8d172e,-6px 3px #112226;opacity:.2;animation:cutText 1.3s steps(2) infinite}
@keyframes corridorJolt{0%,82%{transform:translate(0)}84%{transform:translate(7px,-2px)}90%{transform:translate(-5px,1px)}100%{transform:translate(0)}}@keyframes cutSlice{0%{transform:translateX(-12%)}45%{transform:translateX(9%) skewX(18deg)}70%{transform:translateX(-4%)}100%{transform:translateX(14%)}}@keyframes cutFlicker{50%{filter:contrast(1.8) brightness(.6)}}@keyframes cutText{35%{opacity:.08;transform:translate(-47%,-50%)}40%,62%{opacity:.75;transform:translate(-53%,-50%)}65%,100%{opacity:.18}}
@keyframes flicker{50%{opacity:.14}}@keyframes blink{50%{opacity:.2}}@keyframes bob{50%{transform:translateY(3px)}}@media(min-width:700px){#app{height:min(900px,100vh);border-left:1px solid #311b1e;border-right:1px solid #311b1e}}
@media(max-height:650px){#controls{height:118px}.dpad{width:100px;height:100px}#interactBtn{width:70px;height:70px}.title-mark{margin-bottom:6vh}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
.crt{opacity:.7;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.42) 3px,rgba(0,0,0,.42) 4px),linear-gradient(90deg,rgba(255,0,0,.055),transparent 38%,rgba(0,80,255,.05));box-shadow:inset 0 0 58px #000;mix-blend-mode:normal;animation:crtRoll 6s linear infinite}
@keyframes crtRoll{0%{background-position:0 0,0 0}100%{background-position:0 12px,0 0}}
.final-fx{position:absolute;inset:0;z-index:50;overflow:hidden;background:#020102;color:#eee1c7;display:grid;place-items:center;animation:finalCrush .16s steps(2) infinite}.final-fx::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,#8e0d2733 5px,#000 7px);animation:finalRoll .35s linear infinite}.final-fx i{position:absolute;left:-20%;width:140%;height:4px;background:#eee1c7;box-shadow:0 0 12px #d41c3c;animation:finalSlice .23s steps(2) infinite}.final-fx i:nth-child(1){top:16%}.final-fx i:nth-child(2){top:39%;height:18px;animation-delay:-.11s}.final-fx i:nth-child(3){top:67%;animation-delay:-.19s}.final-fx i:nth-child(4){top:86%;height:9px;animation-delay:-.06s}.final-fx b{position:relative;text-align:center;font-size:clamp(3rem,18vw,6.5rem);line-height:.82;letter-spacing:-.08em;text-shadow:9px 0 #8d0b25,-8px 2px #173b4b;animation:finalText .31s steps(2) infinite}.final-fx small{position:absolute;bottom:12%;font-size:1rem;letter-spacing:.7em;color:#8d0b25;animation:blink .21s steps(1) infinite}.final-fx.ending{animation-duration:.06s;filter:contrast(2.5) brightness(.45)}
@keyframes finalCrush{25%{transform:translate(5px,-3px) scale(1.02)}55%{transform:translate(-7px,2px) scale(.99)}80%{transform:translate(2px,5px) scale(1.01)}}@keyframes finalRoll{to{background-position:0 28px}}@keyframes finalSlice{50%{transform:translateX(18%) skewX(-28deg)}}@keyframes finalText{35%{transform:translateX(8px) skewX(4deg)}60%{transform:translateX(-10px) scaleY(1.08)}}
.final-fx.terminal{animation:none;filter:none;background:#000}.final-fx.terminal::before,.final-fx.terminal i,.final-fx.terminal small{display:none}.final-fx.terminal b{animation:none;color:#6e0819;text-shadow:none;opacity:.72}
