:root{--ink:#f4e6c8;--dim:#bfa98a;--panel:#2a1c17;--panel2:#3b2820;--edge:#140c0a;--gold:#ffd25a;--red:#c42a3a;--green:#7fd06a;--font:'Pixelify Sans',system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0807;color:var(--ink);font-family:var(--font);user-select:none;-webkit-user-select:none;touch-action:none}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
button{font-family:var(--font);cursor:pointer}
.hidden{display:none!important}
.box{background:linear-gradient(#3b2820,#2a1c17);border:3px solid var(--edge);box-shadow:inset 0 0 0 2px #6b4a35,0 4px 0 rgba(0,0,0,.35);border-radius:6px}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
#clock{position:absolute;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));padding:8px 12px;min-width:150px;font-size:15px}
#clock .r1{display:flex;justify-content:space-between;color:var(--dim)}
#clock .r2{font-size:26px;font-weight:700;letter-spacing:1px;text-align:center;margin:2px 0}
#clock .r3{display:flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--gold);font-size:19px;font-weight:700;border-top:2px solid #1a100d;padding-top:4px}
#clock .r3 img{width:20px;height:20px;image-rendering:pixelated}
.mini{margin-top:5px;font-size:11px;color:#ff9aa6}.mini label{display:block}.mini b{display:block;height:7px;background:#160b0b;border:1px solid #000;border-radius:3px;overflow:hidden}.mini i{display:block;height:100%;background:linear-gradient(90deg,#7a0a18,#ff3048)}
.mini.sus{color:#ffd28a}.mini.sus i{background:linear-gradient(90deg,#8a6a10,#ffcc40)}
#obj{position:absolute;top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));max-width:min(360px,44vw);padding:8px 12px;font-size:14px;line-height:1.35}
#obj:empty{display:none}
#obj div{padding-left:14px;position:relative}#obj div:before{content:'◆';position:absolute;left:0;color:var(--gold);font-size:10px;top:3px}
#obj div+div{margin-top:4px;color:var(--dim)}
#energy{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:22px;height:120px;padding:3px;display:flex;align-items:flex-end}
#eFill{width:100%;background:linear-gradient(#a8ff70,#3fa030);border-radius:2px;transition:height .3s}#eFill.low{background:linear-gradient(#ff8a70,#b02020)}
#energy span{position:absolute;top:-20px;left:4px;font-weight:700;color:var(--green);text-shadow:0 2px 0 #000}
#hotbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:3px;padding:5px;pointer-events:auto;background:linear-gradient(#3b2820,#2a1c17);border:3px solid var(--edge);border-radius:6px;box-shadow:inset 0 0 0 2px #6b4a35}
.slot{position:relative;width:46px;height:46px;background:#1d130f;border:2px solid #4a3326;border-radius:4px;display:flex;align-items:center;justify-content:center}
.slot img{width:36px;height:36px;image-rendering:pixelated;pointer-events:none}
.slot.sel{border-color:var(--gold);box-shadow:0 0 0 2px #000,0 0 10px rgba(255,210,90,.5);background:#2d1e15}
.slot.rot{background:#2a0b10}
.slot em{position:absolute;right:2px;bottom:0;font-style:normal;font-size:13px;font-weight:700;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.slot em.water{left:4px;right:4px;bottom:3px;height:4px;background:#000;border-radius:2px}.slot em.water i{display:block;height:100%;background:#55b8ff;border-radius:2px}
.slot .k{position:absolute;left:3px;top:0;font-size:10px;color:#a08670}
#heldName{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));font-size:14px;text-shadow:0 2px 0 #000;color:var(--ink)}

/* touch */
#touch{display:none}
body.touch #touch{display:block}
#joy{position:absolute;left:calc(26px + env(safe-area-inset-left));bottom:calc(26px + env(safe-area-inset-bottom));width:128px;height:128px;border-radius:50%;background:rgba(20,12,10,.45);border:3px solid rgba(255,230,200,.25);pointer-events:auto}
#knob{position:absolute;left:39px;top:39px;width:50px;height:50px;border-radius:50%;background:rgba(244,230,200,.55);border:3px solid rgba(0,0,0,.4)}
#bA,#bB,#bM{position:absolute;pointer-events:auto;border:3px solid var(--edge);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 2px #6b4a35,0 4px 0 rgba(0,0,0,.4)}
#bA{right:calc(56px + env(safe-area-inset-right));bottom:calc(40px + env(safe-area-inset-bottom));width:74px;height:74px;border-radius:50%;background:#7a3b22;font-size:26px}
#bB{right:calc(140px + env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:#3b2820;font-size:14px}
#bM{right:calc(176px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));width:44px;height:44px;border-radius:8px;background:#3b2820;font-size:20px}
#bA.down,#bB.down{transform:translateY(3px);box-shadow:inset 0 0 0 2px #6b4a35}
body.touch #energy{bottom:auto;top:calc(160px + env(safe-area-inset-top));height:90px}
body.touch #hotbar{bottom:calc(6px + env(safe-area-inset-bottom))}
body.touch .slot{width:40px;height:40px}.slot img{width:32px;height:32px}

/* dialogue */
#dlg{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));width:min(760px,94vw);display:flex;gap:12px;padding:12px;background:linear-gradient(#3b2820,#24170f);border:4px solid var(--edge);border-radius:8px;box-shadow:inset 0 0 0 3px #7a5638,0 8px 0 rgba(0,0,0,.4);z-index:20}
#dlg .face{flex:0 0 auto;width:112px;height:112px;border:3px solid var(--edge);border-radius:4px;background:#1a0f0b;overflow:hidden;box-shadow:inset 0 0 0 2px #7a5638}
#dlg .face img{width:100%;height:100%;image-rendering:pixelated}
#dlg.noface .face{display:none}
#dlg.root{background:linear-gradient(#2a0a0e,#120406);box-shadow:inset 0 0 0 3px #6a1020,0 0 40px rgba(200,20,40,.35)}
#dlg.root #dText{color:#ff8a94;letter-spacing:1px}
#dlg .body{flex:1;min-width:0;position:relative}
#dName{display:block;color:var(--gold);font-size:18px;margin-bottom:4px}
#dText{margin:0;font-size:18px;line-height:1.4;min-height:50px;white-space:pre-line}
#dNext{position:absolute;right:4px;bottom:-4px;animation:bob 1s infinite;color:var(--gold)}
@keyframes bob{50%{transform:translateY(3px)}}
#choices{display:flex;flex-direction:column;gap:5px;margin-top:8px}
#choices button{text-align:left;background:#1d130f;color:var(--ink);border:2px solid #5a3e2c;border-radius:4px;padding:7px 10px;font-size:16px}
#choices button span{display:inline-block;width:20px;color:var(--dim)}
#choices button.hl,#choices button:hover{border-color:var(--gold);background:#3a2516}

/* narration */
#narr{position:fixed;inset:0;background:rgba(6,3,3,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;padding:30px}
#narrText{max-width:720px;text-align:center}
#narrText p{font-size:22px;line-height:1.5;margin:0 0 16px;opacity:0;transform:translateY(6px);transition:opacity .7s,transform .7s;color:#ecdcc0}
#narrText p.in{opacity:1;transform:none}
#narrText p:last-child{color:#fff}
#narr.slow p{font-size:24px}
#narr .tap{position:absolute;bottom:20px;color:#6d5a48;font-size:13px}

/* panels */
#panelWrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:25;pointer-events:auto}
#panel{position:relative;width:min(760px,95vw);max-height:90vh;overflow:auto;padding:16px 18px;background:linear-gradient(#3b2820,#24170f);border:4px solid var(--edge);border-radius:8px;box-shadow:inset 0 0 0 3px #7a5638}
#panel.menu{width:min(380px,92vw)}
#panelClose{position:absolute;right:10px;top:10px;width:34px;height:34px;background:#1d130f;color:var(--ink);border:2px solid #5a3e2c;border-radius:4px;font-size:16px}
#panel h2{margin:0 0 12px;font-size:24px;color:var(--gold);display:flex;align-items:center;gap:12px}
#panel h2 .gold{font-size:16px;color:var(--ink);margin-left:auto;margin-right:44px}
#panel h3{margin:12px 0 6px;font-size:15px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.invgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.invgrid .slot{width:auto;aspect-ratio:1;height:auto}
.invgrid .slot:nth-child(-n+10){background:#2d1e15}
.desc{margin-top:10px;min-height:44px;font-size:15px;color:var(--dim)}.desc b{color:var(--ink)}
.g{color:var(--gold);font-weight:700}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button,.row button,.menu button{background:#1d130f;color:var(--ink);border:2px solid #5a3e2c;border-radius:4px;padding:7px 12px;font-size:15px}
.tabs button.on{border-color:var(--gold);color:var(--gold)}
.row button:hover,.menu button:hover{border-color:var(--gold)}
.rows{display:flex;flex-direction:column;gap:5px}
.row{display:flex;align-items:center;gap:10px;background:#1d130f;border:2px solid #3e2a20;border-radius:4px;padding:5px 8px}
.row.c{justify-content:center;background:none;border:0}
.row img{width:36px;height:36px;image-rendering:pixelated}
.row>div{flex:1;min-width:0}.row b{display:block;font-size:15px}.row small{color:var(--dim);font-size:12px}
.rotrow{background:#2a0b10}
.empty,.hint{color:var(--dim);font-size:14px}
.debt{font-size:17px;line-height:1.5}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.total{text-align:right;font-size:16px}
.menu{display:flex;flex-direction:column;gap:7px}
.menu button{padding:10px;font-size:17px}
.help{line-height:1.8;font-size:15px}
.obj{margin:0;padding-left:18px;line-height:1.5}
.meter{height:10px;background:#160b0b;border:1px solid #000;border-radius:4px;overflow:hidden;margin-bottom:3px}.meter i{display:block;height:100%;background:linear-gradient(90deg,#8a6a10,#ffcc40)}.meter.red i{background:linear-gradient(90deg,#7a0a18,#ff3048)}
.vil{display:flex;gap:10px;align-items:center;margin-bottom:6px;background:#1d130f;border-radius:4px;padding:4px}
.vil img{width:48px;height:48px;image-rendering:pixelated;border-radius:3px}
.vil b{display:block}.vil small{display:block;color:var(--dim);font-size:12px}
.vil.gone img{filter:grayscale(1) brightness(.5)}.vil.gone small{color:#ff6a7a;font-weight:700}
.hearts{color:#ff5a7a;letter-spacing:1px}.hearts .off{color:#4a3028}
.chapter h2.ch{font-family:'Jacquard 24',serif;font-size:52px;justify-content:center;color:#e8d0a0;font-weight:400}
.chsub{text-align:center;color:var(--dim);margin-top:-6px}

/* misc */
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .5s;z-index:28}#fade.on{opacity:1}
#toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translate(-50%,-90px);background:#1d130f;border:3px solid var(--edge);box-shadow:inset 0 0 0 2px #6b4a35;padding:8px 16px;border-radius:6px;font-size:16px;transition:transform .3s;z-index:40;max-width:90vw;text-align:center;pointer-events:none}
#toast.on{transform:translate(-50%,0)}
#morning{position:fixed;left:50%;top:30%;transform:translate(-50%,-20px);opacity:0;transition:.5s;background:rgba(20,12,10,.85);border:3px solid var(--edge);padding:12px 22px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:16px;pointer-events:none;z-index:15}
#morning b{font-size:24px;color:var(--gold)}#morning.on{opacity:1;transform:translate(-50%,0)}

/* title */
#title{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
#title .tbg{position:absolute;inset:0;background:#120c0b url(assets/title.jpg) center/cover;image-rendering:pixelated;filter:brightness(.85)}
#title .tbg:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.1),rgba(0,0,0,.75))}
#title .tin{position:relative;text-align:center;padding:20px}
#title h1{font-family:'Jacquard 24',serif;font-weight:400;font-size:clamp(64px,12vw,140px);margin:0;color:#f0dcae;text-shadow:0 4px 0 #3a0a10,0 0 30px rgba(200,30,40,.6),0 8px 30px #000;letter-spacing:2px}
#title .tag{font-size:20px;margin:0 0 26px;color:#e8c8a0;text-shadow:0 2px 6px #000}
.tbtns{display:flex;flex-direction:column;gap:10px;align-items:center}
.tbtns button{width:240px;padding:13px;font-size:21px;background:linear-gradient(#5a2a1c,#3a170f);color:#f4e6c8;border:3px solid #120604;border-radius:6px;box-shadow:inset 0 0 0 2px #a0604a,0 5px 0 #000}
.tbtns button:hover{filter:brightness(1.2)}
#title .small,#loadMsg{color:#c8b090;font-size:13px;text-shadow:0 2px 4px #000;margin-top:16px}
#rotate{display:none;position:fixed;inset:0;background:#120c0b;color:var(--ink);z-index:100;align-items:center;justify-content:center;font-size:22px}
@media (orientation:portrait) and (max-width:600px){body.touch #rotate{display:flex}}
@media (max-height:500px){#obj{font-size:12px;max-width:40vw;padding:5px 8px}#clock{min-width:120px;padding:5px 8px;font-size:12px}#clock .r2{font-size:18px}#clock .r3{font-size:14px}#dlg{bottom:60px;padding:8px}#dlg .face{width:78px;height:78px}#dText{font-size:15px;min-height:40px}#dName{font-size:15px}#choices button{padding:5px 8px;font-size:14px}#narrText p{font-size:17px;margin-bottom:10px}#panel{padding:10px 12px}.slot{width:38px;height:38px}#heldName{bottom:56px}}

#health{position:absolute;right:calc(44px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:22px;height:120px;padding:3px;display:flex;align-items:flex-end}
#hFill{width:100%;background:linear-gradient(#ff7080,#a01428);border-radius:2px;transition:height .2s}
#health span{position:absolute;top:-20px;left:5px;font-weight:700;color:#ff6070;text-shadow:0 2px 0 #000}
body.touch #health{bottom:auto;top:calc(160px + env(safe-area-inset-top));right:calc(44px + env(safe-area-inset-right));height:90px}
#floorTag{position:absolute;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);font-size:16px;color:#d8c8ff;text-shadow:0 2px 0 #000;background:rgba(10,6,14,.7);padding:4px 12px;border-radius:5px;border:2px solid #000}

#cine{position:fixed;inset:0;width:100%;height:100%;z-index:45;image-rendering:pixelated;background:#000}
#cineSkip{position:fixed;right:calc(14px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));z-index:46;background:rgba(0,0,0,.5);color:#bba;border:1px solid #554;border-radius:4px;padding:6px 12px;font-size:14px}

#tcv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#title h1{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{text-shadow:0 4px 0 #3a0a10,0 0 26px rgba(200,30,40,.5),0 8px 30px #000}50%{text-shadow:0 4px 0 #3a0a10,0 0 48px rgba(230,30,50,.85),0 8px 30px #000}}
#title .tin{animation:rise 1.6s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tbtns button{position:relative;overflow:hidden;transition:transform .12s, filter .12s}
.tbtns button:hover{transform:translateY(-2px)}
.tbtns button:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,220,180,.25) 50%,transparent 60%);transform:translateX(-120%);transition:transform .6s}
.tbtns button:hover:before{transform:translateX(120%)}
.tbtns button.ghost{background:rgba(20,10,8,.55);box-shadow:inset 0 0 0 2px #6b4a35;font-size:17px;width:200px;padding:9px}
#title .tin{background:radial-gradient(ellipse at center,rgba(0,0,0,.45),rgba(0,0,0,0) 70%);padding:30px 60px}

body.touch #toast{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));transform:translate(-50%,160px)}body.touch #toast.on{transform:translate(-50%,0)}

#creator{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(30,12,10,.86),rgba(4,2,2,.97))}
.crbox{width:min(900px,96vw);max-height:96vh;overflow:auto;padding:18px 22px;background:linear-gradient(#3b2820,#24170f);border:4px solid var(--edge);border-radius:8px;box-shadow:inset 0 0 0 3px #7a5638,0 10px 40px #000}
.crbox h2{margin:0 0 10px;font-family:'Jacquard 24',serif;font-weight:400;font-size:44px;color:#f0dcae;text-align:center}
.crgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center}
#crPrev{width:100%;height:300px;background:radial-gradient(ellipse at center bottom,#4a6a30,#24341a 70%);border:3px solid var(--edge);border-radius:6px;image-rendering:pixelated}
.crrow{display:flex;align-items:center;gap:10px;margin:8px 0}.crrow label{width:76px;color:var(--dim);font-size:15px}
.crrow input{flex:1;font-family:var(--font);font-size:18px;padding:7px 10px;background:#1d130f;color:var(--ink);border:2px solid #5a3e2c;border-radius:4px;outline:none}.crrow input:focus{border-color:var(--gold)}
.sw{display:flex;flex-wrap:wrap;gap:5px}.sw button{width:26px;height:26px;border-radius:5px;border:2px solid #1a100c;padding:0}.sw button.on{outline:2px solid var(--gold);outline-offset:1px}
.seg{display:flex;gap:6px}.seg button{background:#1d130f;color:var(--ink);border:2px solid #5a3e2c;border-radius:4px;padding:6px 16px;font-size:15px}.seg button.on{border-color:var(--gold);color:var(--gold)}
.crbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}.crbtns button{padding:10px 18px;font-size:18px;background:linear-gradient(#5a2a1c,#3a170f);color:#f4e6c8;border:3px solid #120604;border-radius:6px;box-shadow:inset 0 0 0 2px #a0604a}.crbtns button.ghost{background:#1d130f;box-shadow:inset 0 0 0 2px #6b4a35;font-size:15px}
@media (max-width:700px),(max-height:500px){.crgrid{grid-template-columns:1fr 1fr;gap:10px}#crPrev{height:200px}.crbox h2{font-size:30px;margin-bottom:4px}.crrow{margin:4px 0}.sw button{width:22px;height:22px}}

.qrow img{width:40px;height:40px;border-radius:3px}.qrow.fade{opacity:.5}.qdone,.qact,.qnew{font-size:13px;padding:3px 8px;border-radius:4px;font-weight:700}.qdone{background:#2a4a2a;color:#9be08a}.qact{background:#4a3a1a;color:var(--gold)}.qnew{background:#5a1a1a;color:#ffb0a0}