:root{--ink:#d9d2c0;--dim:#8d8a7d;--red:#a31d1d;--bg:#05070b;--amber:#e0b469}
*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}
html,body{height:100%;background:#000;overflow:hidden;font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic",Arial,sans-serif;color:var(--ink)}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hide{display:none!important}
button{font:inherit;color:var(--ink);background:rgba(10,12,16,.7);border:1px solid rgba(217,210,192,.35);padding:.7em 2.4em;font-size:1.15rem;letter-spacing:.04em;cursor:pointer;transition:.25s;backdrop-filter:blur(4px)}
button:hover:not(:disabled){background:rgba(163,29,29,.35);border-color:#d86060;letter-spacing:.1em}
button:disabled{opacity:.5;cursor:wait}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#cross{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:rgba(230,225,205,.55);box-shadow:0 0 6px rgba(0,0,0,.8)}
#prompt{position:absolute;left:50%;top:57%;transform:translateX(-50%);padding:.35em 1em;font-size:1.05rem;background:rgba(0,0,0,.45);border:1px solid rgba(217,210,192,.25);opacity:0;transition:opacity .2s;white-space:nowrap}
#prompt.on{opacity:1}
#prompt b{display:inline-block;border:1px solid var(--ink);padding:0 .45em;margin-inline-start:.5em;font-size:.9em}
#obj{position:absolute;top:22px;right:26px;max-width:340px;font-size:.98rem;text-shadow:0 1px 4px #000;opacity:.88}
#obj b{display:block;color:var(--amber);font-size:.75rem;letter-spacing:.3em;margin-bottom:.15em}
#stats{position:absolute;left:26px;bottom:24px;display:grid;gap:7px;width:210px}
.st{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:8px;font-size:.78rem;color:var(--dim)}
.st.tp{grid-template-columns:60px auto}
.st span{color:var(--ink);font-size:1rem}
.bar{height:5px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.bar u{position:absolute;inset:0 auto 0 0;display:block;width:50%;background:var(--ink);transition:width .1s,background .2s}
.bar.noise u{background:#6bb783}
.bar.big{height:8px;width:320px}
#sub{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);width:min(900px,86vw);text-align:center;font-size:1.35rem;line-height:1.7;text-shadow:0 2px 6px #000,0 0 14px #000;opacity:0;transition:opacity .4s}
#sub.on{opacity:1}
#sub small{display:block;color:var(--amber);font-size:.8rem;letter-spacing:.15em;margin-bottom:.2em}
#mono{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);width:min(760px,80vw);text-align:center;color:#a9b7c9;font-style:italic;font-size:1.1rem;text-shadow:0 2px 6px #000;opacity:0;transition:opacity .6s}
#mono.on{opacity:.95}
#toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);font-size:1.3rem;letter-spacing:.06em;padding:.4em 1.4em;background:rgba(0,0,0,.5);border-top:1px solid var(--amber);border-bottom:1px solid var(--amber);opacity:0;transition:opacity .5s}
#toast.on{opacity:1}
#hold{position:absolute;left:50%;top:66%;transform:translateX(-50%);text-align:center;opacity:0;transition:opacity .3s}
#hold.on{opacity:1}
#holdT{font-size:1.7rem;margin-bottom:10px;min-height:2.2rem;text-shadow:0 0 14px rgba(255,255,255,.35);letter-spacing:.06em}
#holdB{background:#d9d2c0}

#hideov{position:fixed;inset:0;z-index:4;pointer-events:none}
#hideov .slit{position:absolute;inset:0;background:
 linear-gradient(#000 0 38%,transparent 38% 62%,#000 62%),#000;mask:none;
 -webkit-mask:linear-gradient(#000 0 40%,transparent 40% 60%,#000 60%);mask:linear-gradient(#000 0 40%,transparent 40% 60%,#000 60%);background:#000;opacity:.93}
#hideT{position:absolute;bottom:10%;width:100%;text-align:center;font-size:1.1rem;color:var(--dim);letter-spacing:.1em}
#breathB{position:absolute;bottom:7%;left:50%;width:220px;margin-left:-110px;height:4px;background:rgba(255,255,255,.1)}
#breathB u{display:block;height:100%;width:100%;background:#9fc7e8}
#flash{position:fixed;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none}
#fade{position:fixed;inset:0;z-index:30;background:#000;opacity:0;pointer-events:none;transition:opacity 1.2s}
#rec{position:fixed;left:26px;top:22px;z-index:6;font:700 .9rem/1 monospace;color:#d8ddd0;text-shadow:0 0 6px #000;letter-spacing:.15em}
#rec i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#d22;margin-inline-end:8px;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

#reader{position:fixed;inset:0;z-index:12;display:grid;place-items:center;background:rgba(0,0,0,.6)}
.paper{width:min(560px,90vw);padding:2.4rem 2.6rem;background:#bfb18f url() ;background-image:radial-gradient(ellipse at center,#c9bb98 0,#a99a76 70%,#6d5f45 100%);color:#2a2113;box-shadow:0 20px 80px #000,inset 0 0 70px rgba(80,50,10,.45);transform:rotate(-1deg)}
.paper h2{font-size:1.3rem;margin-bottom:1rem;border-bottom:1px solid rgba(40,25,5,.4);padding-bottom:.5rem}
.paper p{font-size:1.18rem;line-height:2;white-space:pre-line}
.paper small{display:block;margin-top:1.2rem;opacity:.6}

#intro{position:fixed;inset:0;z-index:25;background:#000;display:grid;place-items:center;text-align:center;cursor:pointer}
#intro p{font-size:clamp(1.3rem,2.7vw,2.1rem);line-height:2.1;white-space:pre-line;max-width:80vw;opacity:0;transition:opacity 1.2s;letter-spacing:.04em}
#intro p.on{opacity:1}
#intro small{position:absolute;bottom:4%;color:var(--dim)}
#dead{position:fixed;inset:0;z-index:28;background:radial-gradient(ellipse at center,rgba(60,0,0,.9),#000 75%);display:grid;place-content:center;text-align:center;gap:1rem;animation:in 1.5s}
#dead h1{font-size:clamp(2rem,5vw,4rem);color:#c43838;text-shadow:0 0 30px #600;letter-spacing:.05em}
#dead p{color:var(--dim)}
@keyframes in{from{opacity:0}}
#end{position:fixed;inset:0;z-index:26;background:#000;display:grid;place-items:center;text-align:center;animation:in 3s}
#end .box{max-width:min(760px,88vw)}
#end h1{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:1.4rem;letter-spacing:.06em;color:#e8ddc0}
#end p{font-size:1.25rem;line-height:2.2;white-space:pre-line;color:#bdb8a6;margin-bottom:2rem}
#pause{position:fixed;inset:0;z-index:27;background:rgba(0,0,0,.78);display:grid;place-items:center}
.box{width:min(520px,92vw);padding:1.6rem 1.8rem;background:rgba(10,12,16,.92);border:1px solid rgba(217,210,192,.2)}
.box h2{margin-bottom:1rem;font-weight:400;letter-spacing:.2em}
.row{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;align-items:center;margin:.55rem 0;font-size:.95rem}
.row select,.row input{width:100%;background:#0b0e13;color:var(--ink);border:1px solid rgba(217,210,192,.25);padding:.35em}
.acts{margin-top:1.2rem;text-align:center}

#gate{position:fixed;inset:0;z-index:40;background:#020305;display:grid;place-items:center;text-align:center;transition:opacity 1.4s}
#gate.out{opacity:0;pointer-events:none}
.gbox{max-width:min(560px,88vw);color:var(--dim)}
.gbox svg{color:var(--ink);opacity:.8;margin-bottom:1rem}
.gbox h3{font-weight:400;font-size:1.5rem;letter-spacing:.2em;color:var(--ink);margin-bottom:.6rem}
.gbox p{line-height:2;margin-bottom:2rem}
#gprog{height:2px;background:rgba(255,255,255,.08);margin:1.5rem auto 0;width:240px}
#gprog u{display:block;height:100%;width:0;background:var(--amber);transition:width .4s}
#menu{position:fixed;inset:0;z-index:29;display:grid;place-items:center;text-align:center;overflow:hidden;padding-top:env(safe-area-inset-top)}
.mvig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(2,3,6,.2) 0,rgba(2,3,6,.82) 75%),linear-gradient(rgba(2,3,6,.65),transparent 35%,rgba(2,3,6,.8));animation:in 3s}
.mvig::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.bars::before,.bars::after{content:"";position:absolute;left:0;right:0;height:9vh;background:#000;z-index:2}
.bars::before{top:0}.bars::after{bottom:0}
.mbox{position:relative;max-width:min(780px,92vw);z-index:3}
.pre{letter-spacing:.35em;color:var(--amber);display:block;margin-bottom:.8rem;opacity:0;animation:rise 2s .5s forwards}
#title{position:relative;font-size:clamp(3.2rem,10vw,8rem);font-weight:900;line-height:1.15;letter-spacing:.03em}
#title span{position:relative;display:block;text-shadow:0 0 50px rgba(180,40,40,.55);opacity:0;animation:tin 2.6s .9s forwards,glitch 7s 4s infinite}
#title::before,#title::after{content:attr(data-t);position:absolute;inset:0;color:#c43c3c;opacity:0;animation:echo 3.4s 2.2s infinite}
#title::after{animation-delay:2.8s;color:#6f90c4}
@keyframes tin{0%{opacity:0;filter:blur(18px);letter-spacing:.25em}60%{opacity:1}100%{opacity:1;filter:blur(0);letter-spacing:.03em}}
@keyframes echo{0%,100%{opacity:0;transform:none}20%{opacity:.35;transform:translateY(-.1em) scale(1.02)}55%{opacity:.14;transform:translateY(-.22em) scale(1.05)}80%{opacity:0;transform:translateY(-.3em) scale(1.08)}}
@keyframes glitch{0%,92%,100%{transform:none;filter:none}93%{transform:translateX(-5px) skewX(4deg);filter:hue-rotate(70deg)}95%{transform:translateX(7px)}96%{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tag{margin:1rem 0 2.2rem;color:#b3ad9a;font-size:1.25rem;font-style:italic;opacity:0;animation:rise 2s 2.2s forwards}
.mnu{display:grid;gap:.7rem;justify-items:center;opacity:0;animation:rise 1.6s 3.2s forwards}
.mnu button{width:min(320px,80vw);font-size:1.25rem;padding:.75em 1em;position:relative;overflow:hidden}
.mnu button:first-child{border-color:rgba(224,180,105,.7);color:#f1e3c0;background:linear-gradient(90deg,rgba(163,29,29,.25),rgba(10,12,16,.7))}
.mnu button::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s}
.mnu button:hover::after{transform:translateX(120%)}
.how{display:grid;grid-template-columns:repeat(3,auto);gap:.6rem 1.8rem;justify-content:center;margin:2rem 0 1.2rem;font-size:.9rem;color:var(--dim);opacity:0;animation:rise 1.5s 4s forwards}
.how.tch{display:none}
body.touch .how.kbd{display:none}
body.touch .how.tch{display:grid;grid-template-columns:1fr}
.how b{color:var(--ink);border:1px solid rgba(217,210,192,.3);padding:.05em .5em;margin-inline-end:.4em;font-weight:400}
.warn{display:block;color:#6e6c63;max-width:620px;margin:0 auto;opacity:0;animation:rise 1.5s 4.5s forwards}
#touch{position:fixed;inset:0;z-index:7;touch-action:none;pointer-events:none}
#touch>*{pointer-events:auto}
#joy{position:absolute;left:max(26px,env(safe-area-inset-left));bottom:max(26px,env(safe-area-inset-bottom));width:150px;height:150px;border-radius:50%;border:2px solid rgba(217,210,192,.3);background:rgba(10,12,16,.35)}
#joy i{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;border-radius:50%;background:rgba(217,210,192,.35);border:1px solid rgba(217,210,192,.6)}
.tb{position:absolute;padding:0;border-radius:50%;width:66px;height:66px;font-size:.82rem;letter-spacing:0;background:rgba(10,12,16,.55);border:1.5px solid rgba(217,210,192,.4);backdrop-filter:blur(3px)}
.tb.on{background:rgba(224,180,105,.4);border-color:var(--amber)}
.tb.big{width:96px;height:96px;font-size:1.1rem;right:max(30px,env(safe-area-inset-right));bottom:max(46px,env(safe-area-inset-bottom));border-color:rgba(224,180,105,.8)}
#tRun{right:150px;bottom:max(34px,env(safe-area-inset-bottom))}
#tCr{right:max(34px,env(safe-area-inset-right));bottom:160px}
#tFl{right:120px;bottom:130px}
#tBr{right:200px;bottom:110px}
.tb.sm{width:44px;height:44px;left:50%;margin-left:-22px;top:14px;font-size:1rem}
body.touch #stats{bottom:200px}
body.touch #sub{bottom:22%}
body.touch #prompt{top:46%}
body.touch #obj{top:64px}
@media(max-width:700px){.how{grid-template-columns:1fr 1fr}#stats{width:150px}}

#chap{position:fixed;left:0;right:0;top:34%;z-index:9;text-align:center;pointer-events:none;opacity:0}
#chap.on{animation:chap 5.2s forwards}
#chap small{display:block;letter-spacing:.5em;color:var(--amber);font-size:1rem;margin-bottom:.6rem}
#chap h2{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:900;letter-spacing:.08em;text-shadow:0 0 40px rgba(0,0,0,.9),0 0 20px rgba(160,40,40,.4)}
@keyframes chap{0%{opacity:0;letter-spacing:.3em}15%{opacity:1}75%{opacity:1}100%{opacity:0}}
#pad{position:fixed;inset:0;z-index:14;display:grid;place-items:center;background:rgba(0,0,0,.72)}
.padbox{width:min(340px,92vw);padding:1.4rem;background:linear-gradient(#1a1d22,#0d0f12);border:2px solid #3b4048;box-shadow:0 20px 70px #000;text-align:center}
.padbox h3{font-weight:400;letter-spacing:.2em;margin-bottom:.8rem;color:var(--dim)}
#padD{font:700 2.4rem monospace;letter-spacing:.2em;background:#031108;color:#58f08a;border:1px solid #1d3a28;padding:.2em;margin-bottom:.9rem;text-shadow:0 0 10px #2f9;direction:ltr}
#padD.bad{color:#f55;border-color:#733;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pgrid{direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:.8rem}
.pgrid button{padding:.7em 0;font-size:1.4rem;border-radius:4px;background:#252a31}
.padx{margin-top:.6rem;padding:.4em 1.4em;font-size:.9rem}