:root{--fg:#d8dbe6}
html,body{margin:0;height:100%;background:#000;color:var(--fg);font-family:Georgia,serif;overflow:hidden;touch-action:none;user-select:none}
canvas{display:block}
#orb{position:fixed;top:6px;left:10px;z-index:3;pointer-events:none}
#over{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;z-index:7;text-align:center;padding:3vh 20px 4vh;background:radial-gradient(ellipse at 50% 100%,transparent 50%,rgba(0,0,0,.6) 100%),linear-gradient(to bottom,rgba(0,0,0,.92) 0%,rgba(55,0,8,.7) 34%,rgba(20,0,3,0) 55%,rgba(20,0,3,0) 85%,rgba(30,0,4,.35) 100%);animation:fadein 1.6s ease both}
@media(max-height:560px){#orbBig{display:none}}
#over h1{font-size:clamp(22px,4.2vw,40px);color:#b8141f;font-weight:300;text-shadow:0 0 30px rgba(190,20,30,.55)}
#over p{margin:0;opacity:.7;max-width:420px;letter-spacing:.06em}
#over button{margin-top:auto;border-color:#7a1018;color:#e0aab0;background:rgba(10,0,2,.7)}
#over button:hover{background:#2a0a0e}
#obj{position:fixed;top:14px;right:16px;font-size:15px;color:#aab;z-index:3;text-align:right}
#cap{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:rgba(0,0,0,.65);padding:10px 22px;font-size:20px;max-width:80%;text-align:center;display:none;z-index:6;border-radius:2px;line-height:1.35}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 1.5s;z-index:4;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,3vw,30px);text-align:center;padding:20px}
#fade.on{opacity:1}
#end{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:6}
#end{display:none}
#end{text-align:center;padding:0 20px;background:rgba(0,0,0,.94)}
h1{letter-spacing:.3em;font-size:clamp(28px,6vw,54px);margin:0}h2{margin:0 0 14px;font-weight:normal;opacity:.7;letter-spacing:.2em;font-size:16px}
button{background:#111;color:var(--fg);border:1px solid #556;padding:12px 28px;font:inherit;font-size:18px;cursor:pointer;min-width:200px}
button:hover{background:#223}
#tc{display:none;position:fixed;left:0;right:0;bottom:12px;justify-content:space-between;align-items:flex-end;padding:0 14px;pointer-events:none;z-index:5}
#tc .tl,#tc .tr{display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
#tc .tcol{display:flex;flex-direction:column;gap:10px}
.tb{min-width:0;width:72px;height:72px;padding:0;border-radius:50%;font-size:18px;opacity:.7}
#stick{display:none;position:fixed;left:0;top:0;width:110px;height:110px;border-radius:50%;border:2px solid rgba(233,228,230,.35);background:rgba(255,255,255,.05);z-index:5;pointer-events:none}
#knob{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:rgba(233,228,230,.5)}
#thint{display:none;position:fixed;left:50%;bottom:24%;transform:translateX(-50%);z-index:5;pointer-events:none;opacity:0;transition:opacity 1s;text-align:center;font-size:13px;letter-spacing:.1em;line-height:1.8;color:#e9e4e6;text-shadow:0 0 8px #000;background:rgba(0,0,0,.4);padding:10px 16px;border-radius:8px;white-space:nowrap}
@media(pointer:coarse){#thint{display:block}}
@media(pointer:coarse){#tc{display:flex}}

/* ===== HOME SCREEN (foggy / dead forest / lone figure) ===== */
#menu{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:flex-start;background:#14171c;transition:opacity 1.6s;overflow:hidden}
#menu.out{opacity:0;pointer-events:none}
#mbg{position:absolute;inset:0;width:100%;height:100%;filter:saturate(.75) contrast(1.05)}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 62% 50%,transparent 35%,rgba(0,0,0,.82) 100%),linear-gradient(to right,rgba(0,0,0,.5),transparent 55%)}
#menu::after{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.11;animation:grain .7s steps(4) infinite;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
#mcont{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:20px 20px 20px clamp(24px,8vw,130px);animation:fadein 1.2s ease both}
#menu h1{font-weight:300;font-size:clamp(32px,6.5vw,70px);letter-spacing:.38em;margin:0;color:#e9e4e6;text-shadow:0 2px 0 rgba(120,0,10,.55),0 0 28px rgba(190,20,30,.4);animation:breathe 6s 5.5s ease-in-out infinite,hflick 7s 8s infinite}
#menu h2{margin:0 0 34px;font-weight:300;opacity:.6;letter-spacing:.42em;font-size:clamp(10px,1.8vw,14px);color:#b9c0cc;text-transform:uppercase}
#splash,#mbtns{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#mbtns{display:none;animation:fadein 1.6s ease both}
#menu button{background:none;border:none;border-radius:0;backdrop-filter:none;color:#c9cfda;opacity:.62;min-width:0;padding:8px 0;font-size:15px;letter-spacing:.34em;text-transform:uppercase;transition:all .35s}
#menu button:hover{background:none;opacity:1;letter-spacing:.44em;color:#fff;text-shadow:0 0 14px rgba(220,230,255,.7);transform:none;box-shadow:none}
#menu button#nb::before,#menu button#cb::before,#menu button#tap::before{content:"";display:inline-block;width:0;height:1px;background:#e4e8ef;vertical-align:middle;margin-right:0;transition:all .35s}
#menu button:hover::before{width:26px;margin-right:12px}
#tap{animation:flick 3.5s ease-in-out infinite}
#menu p{font-size:11px;opacity:.45;margin:10px 0 0;letter-spacing:.14em}
#menu #mute{position:absolute;right:18px;bottom:16px;z-index:3;width:40px;height:40px;padding:0;border:1px solid rgba(200,210,230,.3);border-radius:50%;font-size:16px;letter-spacing:0;opacity:.5}
#menu #mute:hover{letter-spacing:0}
#menu #mute.off{opacity:.25;text-decoration:line-through}
@media(max-width:700px){#mcont{padding-left:24px}#menu h1{letter-spacing:.24em}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes breathe{50%{text-shadow:0 2px 0 rgba(140,0,12,.7),0 0 44px rgba(215,25,35,.6)}}
@keyframes flick{0%,100%{opacity:.7}50%{opacity:.35}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}

/* ===== TAP TO BEGIN: bold, warm colour, glowing so the user knows to click ===== */
#menu #tap{opacity:1;color:#ffcf8a;font-weight:700;font-size:18px;letter-spacing:.4em;padding:14px 34px;border:1px solid rgba(255,190,110,.75);background:rgba(255,160,60,.1);border-radius:2px;text-shadow:0 0 12px rgba(255,170,70,.65);animation:tapglow 2s ease-in-out infinite;cursor:pointer}
#menu #tap::before{display:none}
#menu #tap:hover{background:rgba(255,160,60,.25);color:#fff1d6;letter-spacing:.46em;border-color:#ffd9a0;text-shadow:0 0 18px rgba(255,190,100,.9)}
#splash .hint{opacity:.7;color:#ffcf8a;letter-spacing:.14em}
@keyframes tapglow{0%,100%{box-shadow:0 0 0 rgba(255,170,70,0);opacity:.85}50%{box-shadow:0 0 28px rgba(255,170,70,.55);opacity:1}}

/* ===== ANIMATED TITLE + BLOOD ===== */
#title{position:relative;display:inline-block}
#blood{position:absolute;left:0;top:0;pointer-events:none;z-index:1}
#ttl span{display:inline-block;opacity:0;will-change:transform,opacity;backface-visibility:hidden;animation:letterIn 2.4s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--i)*.4s + .6s)}
@keyframes letterIn{0%{opacity:0;transform:translate3d(0,-14px,0) scale(1.18)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes hflick{0%,92%,100%{opacity:1}93%{opacity:.25}95%{opacity:1}97%{opacity:.5}}


/* ===== STORY UI (subtitles with speaker, cinematic bars, danger, prompts, ending) ===== */
.spk{display:block;font-size:11px;letter-spacing:.4em;margin-bottom:4px;opacity:.95}
#cap.noah{border-left:3px solid #7cc4ff}#cap.noah .spk{color:#9fd8ff}
#cap.shadow{background:rgba(0,0,0,.88);border:1px solid #4a0f16;color:#e9e4e6;letter-spacing:.06em;text-shadow:0 0 14px #000,0 0 3px #8a1520;animation:shake .13s steps(2) 3}
#cap.shadow .spk{color:#d1222f}
#cap.radio{font-family:"Courier New",monospace;border:1px dashed #6a8;color:#bfe9c7}#cap.radio .spk{color:#7fd69a}
#cap.child{border-left:3px solid #ffcf8a}#cap.child .spk{color:#ffcf8a}
@keyframes shake{0%{transform:translateX(calc(-50% - 2px))}50%{transform:translateX(calc(-50% + 2px))}100%{transform:translateX(-50%)}}
#prompt{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);display:none;z-index:3;font-size:14px;letter-spacing:.25em;padding:6px 16px;border:1px solid rgba(255,207,138,.7);color:#ffcf8a;background:rgba(0,0,0,.55);animation:flick 1.8s ease-in-out infinite}
#dark{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}
#danger{position:fixed;inset:0;opacity:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(140,0,12,.75) 100%)}
#flash{position:fixed;inset:0;opacity:0;pointer-events:none;z-index:5;background:#cfe0ff;transition:opacity .35s}
#bars i{position:fixed;left:0;right:0;height:0;background:#000;z-index:4;transition:height 1s ease;pointer-events:none}
#bars i:first-child{top:0}#bars i:last-child{bottom:0}
body.cine #bars i{height:11vh}
body.cine #obj,body.cine #orb{opacity:0}
#obj,#orb{transition:opacity .8s}
#tease{position:fixed;inset:0;background:#000;z-index:8;display:none;align-items:center;justify-content:center;text-align:center;padding:30px}
#tease p{margin:0;font-size:clamp(18px,3.2vw,34px);letter-spacing:.14em;max-width:900px;opacity:0;transition:opacity 1.6s;font-weight:300}
#tease p.on{opacity:1}#tease p.red{color:#c4222e;text-shadow:0 0 26px rgba(190,20,30,.7)}
#end h3{margin:0;font-weight:300;letter-spacing:.5em;font-size:14px;opacity:.6}
#end h1{color:#c4222e;font-weight:300;text-shadow:0 0 30px rgba(190,20,30,.55)}
#end h2{margin:14px 0 0;letter-spacing:.3em;font-size:clamp(14px,2.4vw,22px);opacity:1;color:#e9e4e6;font-weight:300}
#end p{margin:0;opacity:.75;letter-spacing:.08em;max-width:700px}
#endSub{opacity:.55!important;font-size:14px}
#endSting{opacity:0;transition:opacity 3s;color:#7fd69a;font-family:"Courier New",monospace;font-size:14px}
#endSting.on{opacity:.9!important}

/* ===== language button (orb ke bagal me) ===== */
#lang{position:fixed;top:26px;left:102px;z-index:3;display:flex;align-items:center;gap:7px;min-width:0;padding:6px 11px;font-size:13px;letter-spacing:.14em;color:#aab;background:rgba(0,0,0,.5);border:1px solid rgba(200,210,230,.3);border-radius:3px;cursor:pointer;transition:opacity .8s}
#lang:hover{background:rgba(20,24,40,.7)}
#lang i{font-style:normal;opacity:.35}
#lang span{opacity:.45}
#lang span.on{opacity:1;color:#ffcf8a;text-shadow:0 0 8px rgba(255,190,110,.6)}
body.cine #lang{opacity:0;pointer-events:none}

/* ===== TYPEWRITER: black-screen text letter by letter (main.js ty()) ===== */
/* har akshar ek <i> me: pehle chhupa rehta he (jagah ghera rehti he, isliye line beech me idhar-udhar nahi hoti), phir dheere se ubharta he */
[data-tw]>i{font-style:normal;opacity:0}
[data-tw]>i.s{opacity:1;animation:twIn 1.1s ease-out both}
[data-tw]>i.f{opacity:1}
@keyframes twIn{0%{opacity:0;filter:blur(6px)}35%{opacity:1;filter:blur(2px)}100%{opacity:1;filter:blur(0)}}
/* laal lines laal hi rahein */
#tease p.red>i{color:#c4222e}
#end h1>i{color:#c4222e}

/* ===== FULL SCREEN button + notch / kinaare (safe area) ===== */
#fs{position:fixed;top:26px;left:196px;z-index:3;min-width:0;width:34px;height:31px;padding:0;font-size:16px;line-height:1;color:#aab;background:rgba(0,0,0,.5);border:1px solid rgba(200,210,230,.3);border-radius:3px;cursor:pointer;transition:opacity .8s}
#fs:hover{background:rgba(20,24,40,.7)}
body.cine #fs{opacity:0;pointer-events:none}
/* notch wale phone me landscape: UI notch ke neeche na chhupe */
#orb{left:calc(10px + env(safe-area-inset-left,0px))}
#lang{left:calc(102px + env(safe-area-inset-left,0px))}
#fs{left:calc(196px + env(safe-area-inset-left,0px))}
#obj{right:calc(16px + env(safe-area-inset-right,0px))}
#tc{padding-left:calc(14px + env(safe-area-inset-left,0px));padding-right:calc(14px + env(safe-area-inset-right,0px))}

/* ===== MEMORY LOG (end screen report) ===== */
#report{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9;background:rgba(0,0,0,.97);padding:12px;opacity:0;transition:opacity 2s;overflow:auto}
#report.on{opacity:1}
.rcard{width:min(860px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;border:1px solid #232c4a;background:radial-gradient(ellipse at 50% 0,rgba(40,70,150,.16),rgba(0,0,0,0) 70%);padding:18px 20px;border-radius:4px;box-shadow:0 0 60px rgba(60,110,255,.12)}
#rTitle{margin:0;font-weight:300;letter-spacing:.32em;font-size:clamp(15px,2.6vw,24px);color:#c4222e;text-shadow:0 0 26px rgba(190,20,30,.6)}
.rgrid{display:grid;grid-template-columns:190px 1fr;gap:18px;width:100%;align-items:start}
.rl{display:flex;flex-direction:column;align-items:center;gap:6px}
#rOrbTxt{margin:0;opacity:.85;letter-spacing:.08em;font-size:14px}
#rZones{list-style:none;margin:0;padding:0;width:100%;font-size:13px;opacity:.78}
#rZones li{display:flex;justify-content:space-between;border-bottom:1px solid #1b2236;padding:2px 4px}
#rZones b{color:#e0aab0;font-weight:400}
#rMemT{margin:0 0 6px;font-weight:300;letter-spacing:.18em;font-size:13px;color:#9fb4d8;text-transform:uppercase}
#rMem{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:6px}
.slot{display:flex;gap:8px;align-items:center;text-align:left;border:1px solid #1d2440;padding:5px 8px;font-size:12.5px;color:#6a7392;min-height:36px}
.slot i{font-style:normal;width:22px;height:22px;flex:none;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:13px}
.slot.on{color:#bfe3ff;border-color:#3b6ecb;background:rgba(40,80,170,.14);box-shadow:0 0 14px rgba(90,160,255,.25)}
.slot.old{color:#8aa6c8;border-color:#2b3f66}
#rCode{margin:8px 0 0;font-family:"Courier New",monospace;letter-spacing:.3em;color:#9fd8ff;font-size:15px}
#rSec{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.sec{border:1px dashed #3a2a30;color:#7a6168;padding:6px 10px;font-size:12.5px;text-align:left;display:flex;flex-direction:column;gap:2px}
.sec b{letter-spacing:.2em;font-weight:400;font-size:11px;text-transform:uppercase}
.sec.open{border-style:solid;border-color:#7fd69a;color:#cfeedd}
#rLine{margin:0;font-style:italic;color:#e0aab0;font-size:14px;opacity:.85}
#rBtn{min-width:170px;padding:9px 22px;font-size:15px}
@media(max-width:640px){.rgrid,#rSec{grid-template-columns:1fr}}
@media(max-height:520px){.rcard{padding:10px 14px;gap:6px}}

/* ===== INTRO CINEMATIC (js/intro.js) ===== */
#ic{position:fixed;inset:0;z-index:4;pointer-events:none;display:none}
#icv{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .08s linear}
body.intro #bars i{z-index:5}
#iskip{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:7;display:none;min-width:0;background:rgba(0,0,0,.35);border:1px solid rgba(200,210,230,.25);color:#99a;letter-spacing:.18em;font-size:12px;padding:6px 12px;border-radius:2px;opacity:.7}
body:not(.intro) #iskip{display:none!important}
#cap.girl{background:transparent;color:#cfd8ea;font-style:italic;text-shadow:0 0 14px #000,0 0 3px #000;border:0}
#cap.girl .spk{color:#8aa0c8}

/* ===== game over: Restart + Continue for $1 (PayPal) ===== */
#overBtns{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(320px,86vw);pointer-events:auto}
#over #overBtns button{margin-top:0;width:100%}
#ovPay{border-color:#c9a227;color:#ffe9a8;background:rgba(40,30,0,.65)}
#ovPay:hover{background:#3a2c06}
#payBox{width:100%;display:none;min-height:46px}
#payMsg{margin:0;min-height:18px;font-size:13px;letter-spacing:.04em;opacity:.85;max-width:320px}

/* ===== credit under Tap to Begin: letters rise out of the dark one by one, then a soft light sweeps over the name ===== */
#credit{margin-top:26px;font-size:clamp(11px,1.6vw,14px);letter-spacing:.5em;text-transform:uppercase;font-weight:300;color:#aeb6c4;pointer-events:none;white-space:nowrap}
#credit span{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(8px);animation:credIn 1.1s cubic-bezier(.2,.7,.2,1) forwards,credGlow 4.5s ease-in-out infinite;animation-delay:calc(1.2s + var(--i)*.07s),calc(3.6s + var(--i)*.09s)}
@keyframes credIn{to{opacity:.8;filter:blur(0);transform:none}}
@keyframes credGlow{0%,100%{color:#aeb6c4;text-shadow:none}50%{color:#fff1d6;text-shadow:0 0 12px rgba(255,190,100,.85)}}
@media(max-width:700px){#credit{letter-spacing:.32em}}

/* ===== phone buttons: left = ◀ ▶ ▼, right = E + JUMP ===== */
.tb{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:rgba(17,17,17,.55);border-color:rgba(200,210,230,.45);color:#e9e4e6}
.tb.on{opacity:1;background:rgba(255,190,110,.35);border-color:#ffd9a0}
.tb.run{display:none}
.tb.jump{width:96px;height:96px;font-size:16px;letter-spacing:.08em}
.tb.sm{width:56px;height:56px;font-size:16px}

/* ===== intro ke time phone ke game buttons chhupe rahein (sirf SKIP dikhe) ===== */
body.intro #tc{display:none!important}

/* ===== long press par copy / select / menu bilkul na aaye ===== */
*,*::before,*::after{
  -webkit-user-select:none!important;
  -moz-user-select:none!important;
  -ms-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
*::selection{background:transparent!important;color:inherit!important}
*::-moz-selection{background:transparent!important;color:inherit!important}
img,canvas,svg,button{-webkit-user-drag:none;user-drag:none}

/* ===== home page: right side me chapter boxes ===== */
#chapters{position:absolute;right:calc(8vw + env(safe-area-inset-right,0px));top:9vh;z-index:5;display:flex;flex-direction:column;gap:3vh;width:clamp(150px,15vw,230px)}
.chbox{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;min-height:clamp(60px,13vh,100px);padding:10px 12px;border:1px solid rgba(200,210,230,.55);background:rgba(0,0,0,.55);color:#e9e4e6;cursor:pointer;transition:all .3s;box-sizing:border-box}
.chbox b{font-weight:400;letter-spacing:.28em;font-size:clamp(12px,1.4vw,16px);text-transform:uppercase}
.chbox span{font-size:clamp(9px,1vw,12px);letter-spacing:.14em;opacity:.65}
.chbox:hover,.chbox.sel{background:rgba(255,160,60,.2);border-color:#ffd9a0;color:#fff1d6;box-shadow:0 0 18px rgba(255,170,70,.35)}
.chbox.lock{opacity:.45;cursor:default}
.chbox.lock:hover{background:rgba(0,0,0,.55);border-color:rgba(200,210,230,.55);color:#e9e4e6;box-shadow:none}
@media(max-width:700px){#chapters{right:3vw;top:6vh;width:120px}}