:root{
  --bg:#121215; --bg2:#18181c; --line:#2e2e34; --text:#e4e0d6; --dim:#8d8a84; --faint:#6c6a66;
  --accent:#c4524f; --gold:#d6c08a; --good:#8fb89a; --bad:#d9827f; --magic:#aeb4d6;
  --violet:#8d8a84; --mana:#8aa4c8; --susp:#c4524f;
  --serif:'IM Fell English',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Sarabun',sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Title ---------- */
#title-screen{position:fixed;inset:0;display:flex;align-items:flex-end;z-index:50;background:#121215;
  padding:clamp(24px,6vw,88px)}
.home{width:min(640px,100%)}
.home h1{font-family:'IM Fell English',serif;font-weight:400;color:#e4e0d6;
  font-size:clamp(2.6rem,9vw,6rem);line-height:1.02;letter-spacing:-.01em}
.tagline{margin:22px 0 40px;color:#8d8a84;font-size:1.05rem;max-width:44ch;line-height:1.7}
.title-buttons{display:flex;gap:10px 26px;align-items:baseline;flex-wrap:wrap}
.start,.resume{background:none;border:0;padding:4px 0;font-size:1.1rem;color:#e4e0d6;
  border-bottom:1px solid #e4e0d6;transition:color .2s,border-color .2s}
.start:hover,.start:focus-visible{color:#c4524f;border-color:#c4524f}
.resume{color:#8d8a84;border-color:transparent}
.resume:hover:not(:disabled),.resume:focus-visible{color:#e4e0d6;border-color:#8d8a84}
.resume:disabled{opacity:.35;cursor:not-allowed}
.start:focus-visible,.resume:focus-visible{outline:2px solid #c4524f;outline-offset:6px}
.lifeline{list-style:none;display:flex;justify-content:space-between;margin-top:72px;padding-top:12px;
  border-top:1px solid #34343a;color:#6c6a66;font-size:.85rem;position:relative}
.lifeline::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:#c4524f}
.hint{margin-top:18px;color:#6c6a66;font-size:.85rem}

/* ---------- Buttons ---------- */
.btn{border:1px solid var(--line);background:none;color:var(--text);padding:7px 12px;border-radius:2px;font-size:.9rem;
  transition:border-color .15s,color .15s}
.btn:hover:not(:disabled){border-color:var(--dim)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.tool{padding:5px 10px;font-size:.84rem;color:var(--dim)}
.btn.tool:hover:not(:disabled){color:var(--text)}

/* ---------- Game ---------- */
#game{min-height:100vh;display:flex;flex-direction:column}
#topbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:14px clamp(16px,3vw,40px);
  background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-family:var(--serif);color:var(--text);font-size:1.2rem;margin-right:auto;white-space:nowrap}
.stat{font-size:.88rem;color:var(--dim)}
.bar-stat{display:flex;align-items:center;gap:8px}
.bar-stat b{color:var(--text);font-weight:400;min-width:48px;font-variant-numeric:tabular-nums}
.bar{width:48px;height:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--dim);transition:width .5s}
.bar.mana i{background:var(--mana)}
.bar.health i{background:var(--good)}
.bar.happy i{background:var(--gold)}
.bar.susp i{background:var(--accent)}

main{flex:1;display:grid;grid-template-columns:minmax(320px,540px) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  padding:28px clamp(16px,3vw,40px);max-width:1280px;width:100%;margin:0 auto}
@media(max-width:860px){main{grid-template-columns:1fr}}
.left{display:flex;flex-direction:column;gap:16px}
.scene-wrap{position:relative;overflow:hidden;border:1px solid var(--line)}
#scene{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}
#loc-label{position:absolute;left:0;bottom:0;padding:5px 12px;background:var(--bg);color:var(--text);font-size:.85rem}
#status-icons{position:absolute;right:8px;top:8px;display:flex;gap:4px}
#status-icons span{background:var(--bg);padding:2px 8px;font-size:.78rem;color:var(--dim)}
.ctrl{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.ctrl .on{color:var(--text);border-color:var(--text)}
#bg-label{margin-left:auto;color:var(--faint);font-size:.82rem}
.tools{display:flex;flex-wrap:wrap;gap:4px;padding-top:14px;border-top:1px solid var(--line)}
#inventory{display:flex;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--dim)}
#inventory b{color:var(--text);font-weight:400}

.right{display:flex;flex-direction:column;gap:20px;min-height:0}
#log{height:min(46vh,380px);overflow-y:auto;font-size:1rem;line-height:1.8;scroll-behavior:smooth;padding-right:12px}
#log p{white-space:pre-wrap;margin-bottom:12px;color:var(--faint);max-width:64ch}
#log p:last-child{color:var(--text)}
#log p.good{color:var(--good)} #log p.bad{color:var(--bad)} #log p.magic{color:var(--magic)}
#log p.event{color:var(--gold);border-left:1px solid var(--gold);padding-left:12px}
#log p.sys{color:var(--faint);font-size:.88rem}
#choices{display:flex;flex-direction:column;border-top:1px solid var(--line)}
#choices .head{padding:14px 0 4px;color:var(--faint);font-size:.85rem}
#choices .btn{text-align:left;padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:1rem}
#choices .btn:hover:not(:disabled){color:var(--accent);border-bottom-color:var(--line)}
#choices .btn small{display:block;color:var(--dim);font-size:.82rem;margin-top:2px}
#choices .btn.special{color:var(--gold)}
#choices .btn.danger{color:var(--bad)}
#choices .btn.disabled-hint{opacity:.45}

/* ---------- Modal ---------- */
#modal{position:fixed;inset:0;background:rgba(10,10,12,.88);display:grid;place-items:center;z-index:60;padding:16px}
.modal-card{position:relative;background:var(--bg);border:1px solid var(--line);width:min(720px,100%);max-height:90vh;
  overflow-y:auto;padding:32px}
.x{position:absolute;right:14px;top:10px;background:none;border:none;color:var(--dim);font-size:1.1rem}
.x:hover{color:var(--text)}
.tabs{display:flex;gap:4px;margin-bottom:22px;flex-wrap:wrap}
.tabs .btn{color:var(--dim);border-color:transparent}
.tabs .btn.on{color:var(--text);border-color:var(--text)}
.modal-card h2{font-family:var(--serif);font-weight:400;font-size:1.6rem;color:var(--text);margin-bottom:14px}
.card{border-top:1px solid var(--line);padding:14px 0}
.card h4{color:var(--text);font-weight:600;margin-bottom:3px;display:flex;justify-content:space-between;gap:8px}
.card p{color:var(--dim);font-size:.9rem;line-height:1.6}
.card.locked{opacity:.4}
.meter{height:2px;background:var(--line);margin-top:9px}
.card:last-child{padding-bottom:0}
.meter i{display:block;height:100%;background:var(--text)}
.ms{font-size:.85rem;margin-top:5px;color:var(--faint)} .ms.done{color:var(--good)}

/* Lab */
.lab h2{text-align:left}
.lab-title{color:var(--dim);margin-bottom:14px}
.lab h3{color:var(--dim);font-size:.9rem;font-weight:400;margin:18px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:none;color:var(--text);padding:8px 14px;border-radius:2px;transition:border-color .15s}
.chip:hover{border-color:var(--dim)}
.chip.on{border-color:var(--text);color:var(--text);background:var(--bg2)}
.chip.off{opacity:.35}
.lab-result{margin-top:18px;padding:14px;border-left:1px solid var(--gold);color:var(--text);min-height:56px;background:var(--bg2)}
.lab-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;flex-wrap:wrap;gap:10px}

#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);background:var(--text);color:var(--bg);padding:9px 18px;
  opacity:0;transition:opacity .3s,transform .3s;z-index:100;pointer-events:none;font-size:.92rem}
#toast.show{opacity:1;transform:translate(-50%,0)}
::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-thumb{background:var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Identity & transfer ---------- */
.user-identity-box{margin-top:44px;max-width:520px;font-size:.82rem;color:var(--faint)}
.uuid-current{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.uuid-val{font-family:ui-monospace,Menlo,monospace;color:var(--dim);font-size:.8rem;word-break:break-all}
.btn-micro{background:none;border:0;border-bottom:1px solid var(--line);color:var(--dim);padding:2px 0;font-size:.8rem;
  transition:color .15s,border-color .15s}
.btn-micro:hover:not(:disabled){color:var(--text);border-color:var(--dim)}
.uuid-transfer{display:flex;gap:16px;align-items:baseline}
.uuid-transfer input{flex:1;min-width:0;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);
  padding:4px 0;font-size:.82rem;font-family:ui-monospace,Menlo,monospace;border-radius:0}
.uuid-transfer input::placeholder{color:var(--faint);font-family:'Sarabun',sans-serif}
.uuid-transfer input:focus{outline:none;border-bottom-color:var(--dim)}

/* ---------- Past lives ---------- */
.history-item{border-top:1px solid var(--line);padding:16px 0 16px 14px;position:relative}
.history-item::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;background:var(--dim)}
.history-item.cause-hunt::before{background:var(--accent)}
.history-item.cause-old::before{background:var(--good)}
.history-item h4{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;color:var(--text);font-size:1rem;margin-bottom:4px}
.history-meta{color:var(--gold);font-size:.88rem;margin-bottom:6px}
.history-details{color:var(--dim);font-size:.84rem;line-height:1.6}
.history-empty{color:var(--dim);padding:24px 0}

/* ---------- Story loading ---------- */
#story-loading{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(18,18,21,.96)}
#story-loading[hidden]{display:none}
.story-loading-card{text-align:left;width:min(320px,80vw);color:var(--text)}
.story-loading-card p{font-family:var(--serif);font-size:1.4rem;margin-bottom:6px}
.story-loading-card small{color:var(--faint)}
.story-loading-orb{height:1px;margin-bottom:22px;background:var(--accent);transform-origin:left;animation:storyLine 2.2s ease-in-out infinite}
@keyframes storyLine{0%{transform:scaleX(.05)}60%,100%{transform:scaleX(1)}}
@media (max-width:520px){.uuid-transfer{flex-wrap:wrap}}