:root{
  --ink:#f3e7d3; --ink-dim:#c9b79c; --panel:rgba(24,16,10,.82); --panel-edge:rgba(214,170,110,.35);
  --accent:#d9a45b; --clover:#7fb069; --quiet:#9aa0a6; --paper:#efe2c6; --paper-ink:#3a2a1a;
  --danger:#b5543c;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d0906;color:var(--ink);font-family:Lora,Georgia,serif;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
#game{position:fixed;inset:0;overflow:hidden;user-select:none}

/* ---------- stage / parallax ---------- */
#stage{position:absolute;inset:0;transition:filter 1.2s ease}
.layer{position:absolute;left:-6%;right:-6%;top:-4%;bottom:-2%;will-change:transform;transition:transform .25s ease-out}
.layer svg{position:absolute;inset:0;width:100%;height:100%}
.layer.sky{left:0;right:0;top:0;bottom:0}
.stage-in{animation:stageIn 1.4s ease both}
@keyframes stageIn{from{opacity:0}to{opacity:1}}
.breathe{animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{from{translate:0 0}to{translate:-1.2% 0}}
.scrolling .layer.far svg{animation:scroll 60s linear infinite}
.scrolling .layer.mid svg{animation:scroll 26s linear infinite}
.scrolling .layer.near svg{animation:scroll 11s linear infinite}
.scrolling .layer.fg svg{animation:scroll 5s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scrolling .layer svg{width:200%}

#fx-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%)}
#fx-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* drift: dissociation look */
#game.drift #stage{filter:saturate(.45) contrast(.9) brightness(.92)}
#game.drift-heavy #stage{filter:saturate(.15) contrast(.85) brightness(.85) blur(.6px)}
#game.drift .layer.mid{transition:transform 1.2s ease-out}
#game.jumpcut #stage{animation:jump .18s steps(1)}
@keyframes jump{0%{opacity:.2}100%{opacity:1}}

/* ---------- actors ---------- */
#actors{position:absolute;inset:0;pointer-events:none}
.actor{position:absolute;bottom:17%;height:44%;transition:opacity .5s ease,transform .5s ease;opacity:0;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.actor.show{opacity:1}
.actor.left{left:14%}
.actor.right{right:14%;transform:scaleX(-1)}
.actor.speaking{filter:drop-shadow(0 0 14px rgba(255,214,150,.35)) drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.actor.ride{left:50%;transform:translateX(-50%);bottom:15%;height:40%;opacity:1}
.actor.ride .horse-legs{animation:trot .5s ease-in-out infinite alternate;transform-origin:50% 0}
.actor.ride .bob{animation:bob .5s ease-in-out infinite alternate}
@keyframes trot{from{transform:skewX(8deg)}to{transform:skewX(-8deg)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-6px)}}

/* ---------- caption ---------- */
#caption{position:absolute;left:3vw;top:3vh;opacity:0;transition:opacity 1s}
#caption.show{opacity:1}
.cap-place{font-family:Rye,serif;font-size:clamp(14px,1.6vw,22px);letter-spacing:.06em;color:var(--accent);text-shadow:0 2px 8px #000}
.cap-date{font-style:italic;color:var(--ink-dim);font-size:clamp(12px,1.1vw,15px);text-shadow:0 2px 6px #000}

/* ---------- hud ---------- */
#hud{position:absolute;right:2vw;top:2.4vh;display:flex;gap:8px;z-index:20}
.hud-btn{background:var(--panel);border:1px solid var(--panel-edge);border-radius:6px;padding:6px 12px;font-size:13px;letter-spacing:.05em;display:flex;align-items:center;gap:6px}
.hud-btn:hover{border-color:var(--accent)}
.hud-btn svg{width:20px;height:20px;color:var(--accent)}
#notch-count{font-weight:600;color:var(--accent)}
.hud-btn.pulse{animation:pulse 1s ease 2}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(217,164,91,.35)}}

/* ---------- dialog ---------- */
#dialog{position:absolute;left:50%;bottom:3.5vh;transform:translateX(-50%);width:min(1000px,92vw);min-height:150px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:10px;padding:22px 30px 26px;backdrop-filter:blur(3px);box-shadow:0 12px 40px rgba(0,0,0,.5);cursor:pointer;transition:opacity .3s}
#dialog.hidden,#choices.hidden,#ride-ui.hidden,.hidden{display:none!important}
#dialog .speaker{font-family:Rye,serif;color:var(--accent);letter-spacing:.08em;font-size:15px;margin-bottom:8px;min-height:18px}
#dialog .text{font-size:clamp(16px,1.45vw,20px);line-height:1.6}
#dialog .advance{position:absolute;right:18px;bottom:10px;color:var(--accent);animation:blink 1.1s infinite;opacity:0}
#dialog.done .advance{opacity:1}
@keyframes blink{50%{opacity:.2}}
#dialog.vo .text{font-style:italic;color:#ead9bf}
#dialog.ledger{background:linear-gradient(#efe2c6,#e4d2ad);color:var(--paper-ink);border-color:#a8865a}
#dialog.ledger .speaker{color:#7a5230}
#dialog.ledger .text{font-family:"IM Fell English",serif;font-size:clamp(17px,1.55vw,22px)}
#dialog.quiet{background:rgba(10,10,12,.78);border-color:rgba(160,160,170,.2)}
#dialog.quiet .speaker{color:var(--quiet);font-family:Lora,serif;font-size:12px;letter-spacing:.3em}
#dialog.quiet .text{color:var(--quiet);font-style:italic;letter-spacing:.04em}
#dialog.narr .speaker{display:none}
#dialog.narr .text{color:var(--ink-dim)}
#dialog.letter{background:linear-gradient(#f4ead6,#e8dbbd);color:#2f2416;border-color:#b69466}
#dialog.letter .speaker{color:#8a5a2b}
#dialog.letter .text{font-family:"IM Fell English",serif}
#dialog.wire{background:#14110d;border-color:#6b5a3d}
#dialog.wire .text{font-family:"Courier New",monospace;letter-spacing:.12em;text-transform:uppercase;color:#e9d6a8}

/* ---------- choices ---------- */
#choices{position:absolute;left:50%;bottom:3.5vh;transform:translateX(-50%);width:min(820px,92vw);display:flex;flex-direction:column;gap:10px;z-index:15}
#choices .prompt{font-style:italic;color:var(--ink-dim);text-align:center;margin-bottom:4px;text-shadow:0 2px 6px #000}
.choice{background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;padding:13px 18px;text-align:left;font-size:clamp(15px,1.3vw,18px);line-height:1.45;transition:transform .15s,border-color .15s,background .15s;opacity:0;animation:rise .35s ease forwards}
.choice:hover,.choice:focus-visible{border-color:var(--accent);background:rgba(48,32,18,.9);transform:translateX(4px);outline:none}
.choice .key{color:var(--accent);font-weight:600;margin-right:10px}
.choice.silent{font-style:italic;color:var(--ink-dim)}
.choice.locked{opacity:.45!important;cursor:not-allowed;text-decoration:line-through}
.choice.cracked{animation:crack .5s ease forwards}
@keyframes crack{0%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}100%{opacity:.35;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.timer{height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;margin-top:2px}
.timer span{display:block;height:100%;background:var(--accent);transform-origin:left;animation:timer linear forwards}
@keyframes timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- ride ---------- */
#ride-ui{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);width:min(520px,80vw);text-align:center}
.ride-hint{font-style:italic;color:var(--ink-dim);margin-bottom:10px;text-shadow:0 2px 8px #000}
.ride-bar{height:6px;background:rgba(0,0,0,.4);border-radius:3px;overflow:hidden;border:1px solid var(--panel-edge)}
.ride-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
#notices{position:absolute;inset:0;pointer-events:none;z-index:12}
.notice{position:absolute;pointer-events:auto;background:rgba(255,248,230,.14);border:1px solid rgba(255,240,210,.6);color:#fff7e6;border-radius:999px;padding:8px 16px;font-style:italic;backdrop-filter:blur(2px);animation:float 4.2s ease-in-out forwards;box-shadow:0 0 22px rgba(255,230,180,.35)}
.notice:hover{background:rgba(255,248,230,.3)}
.notice.got{animation:got .9s ease forwards}
@keyframes float{0%{opacity:0;transform:translateY(10px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
@keyframes got{to{opacity:0;transform:scale(1.4);filter:brightness(2)}}

/* ---------- toast ---------- */
#toast{position:absolute;left:50%;top:9vh;transform:translateX(-50%);background:var(--panel);border:1px solid var(--panel-edge);padding:8px 16px;border-radius:6px;font-size:14px;opacity:0;transition:opacity .4s;pointer-events:none;z-index:30}
#toast.show{opacity:1}

/* ---------- overlay screens ---------- */
#overlay{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:rgba(8,5,3,.86);backdrop-filter:blur(4px)}
#overlay.show{display:flex;animation:stageIn .6s ease}
.screen{width:min(760px,92vw);max-height:90vh;overflow:auto;text-align:center;padding:24px}
.screen h1{font-family:Rye,serif;font-weight:400;font-size:clamp(40px,6.5vw,84px);margin:0;color:var(--accent);letter-spacing:.04em;text-shadow:0 6px 30px rgba(217,164,91,.25)}
.screen h1 .amp{color:var(--clover)}
.screen h2{font-family:Rye,serif;font-weight:400;color:var(--accent);letter-spacing:.05em;font-size:clamp(22px,2.6vw,34px);margin:0 0 6px}
.screen .sub{font-style:italic;color:var(--ink-dim);margin:8px 0 28px}
.screen p{line-height:1.7;color:var(--ink)}
.menu-list{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:18px}
.menu-btn{min-width:260px;background:transparent;border:1px solid var(--panel-edge);border-radius:6px;padding:11px 22px;font-size:16px;letter-spacing:.06em}
.menu-btn:hover{border-color:var(--accent);background:rgba(217,164,91,.08)}
.menu-btn.primary{border-color:var(--accent);color:var(--accent)}
.fine{font-size:13px;color:var(--ink-dim);margin-top:26px;line-height:1.6}
.chapter-card h2{font-size:clamp(28px,4vw,52px)}
.chapter-card .num{letter-spacing:.4em;font-size:13px;color:var(--ink-dim);text-transform:uppercase}
.chapter-card{animation:cardIn 2.8s ease both}
@keyframes cardIn{0%{opacity:0;letter-spacing:.2em}20%{opacity:1;letter-spacing:.05em}80%{opacity:1}100%{opacity:1}}

/* ledger book */
.book{width:min(900px,94vw);max-height:86vh;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(90deg,#e9dbbb 0,#f1e5ca 48%,#d8c7a2 50%,#f1e5ca 52%,#e9dbbb 100%);color:var(--paper-ink);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 60px rgba(120,80,40,.25);border:10px solid #4a2f1b;font-family:"IM Fell English",serif;text-align:left;overflow:hidden}
.page{padding:28px 32px;overflow:auto;max-height:80vh}
.page h3{font-family:Rye,serif;font-weight:400;color:#6b4423;margin:0 0 12px;letter-spacing:.05em}
.page .entry{margin:0 0 14px;line-height:1.55;font-size:17px}
.page .entry small{display:block;color:#8a6a48;font-size:13px}
.page .blank{border-bottom:1px solid #a88a62;color:#a88a62;font-style:italic;padding:6px 0;margin:12px 0 22px}
.page .blank.filled{color:#2b1d10;font-style:normal;font-size:22px}
.shoe-big{display:flex;align-items:center;gap:16px;margin-top:18px}
.shoe-big svg{width:90px;height:90px;color:#5a3a1e}
.ledger-pick .choice{background:rgba(255,255,255,.35);color:var(--paper-ink);border-color:#a8865a;font-family:"IM Fell English",serif;font-size:19px}
.ledger-pick .choice:hover{background:rgba(255,255,255,.6)}
.ledger-pick .choice .key{color:#7a5230}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;font-family:Lora,serif;font-size:13px}
.stat-grid div{background:rgba(0,0,0,.06);padding:6px 8px;border-radius:4px}

.help-list{text-align:left;line-height:1.9}
.ending-title{font-size:clamp(34px,5vw,64px)!important}

#debug{position:absolute;left:8px;bottom:8px;font:12px/1.4 monospace;background:rgba(0,0,0,.7);padding:8px 10px;border-radius:4px;z-index:50;white-space:pre}

@media (max-width:700px){
  .book{grid-template-columns:1fr}
  #dialog{padding:16px 18px 20px;min-height:120px}
  .actor{height:32%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}