@font-face{font-family:"Cormorant Garamond";src:url(lib/cormorant.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(lib/cormorant-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito";src:url(lib/nunito.woff2) format("woff2");font-weight:200 900;font-display:swap}
:root{--ink:#fff6e4;--gold:#f5d7a1;--glass:rgba(20,16,40,.38);--line:rgba(255,236,200,.28)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#141230;color:var(--ink);font-family:Nunito,system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .9s ease}
.screen.show{opacity:1;pointer-events:auto}
#title{pointer-events:none}
#title.show .title-btns{pointer-events:auto}
.title-inner{text-align:center;transform:translateY(-6vh)}
.eyebrow{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(16px,2.1vw,24px);letter-spacing:.06em;opacity:.85;text-shadow:0 0 18px rgba(255,200,140,.6)}
h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(64px,11vw,156px);margin:.05em 0 .2em;letter-spacing:.01em;line-height:1;color:#fff8ea;
 text-shadow:0 0 30px rgba(255,200,120,.55),0 0 80px rgba(255,170,90,.35),0 2px 0 rgba(60,30,40,.25)}
h1 span{font-style:italic;color:#ffd9a0}
#title.show h1{animation:rise 2.2s cubic-bezier(.2,.8,.2,1) both}
#title.show .eyebrow{animation:rise 2.2s .3s cubic-bezier(.2,.8,.2,1) both}
#title.show .title-btns{animation:rise 2s .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.title-btns{display:flex;gap:14px;justify-content:center}
.title-foot{position:absolute;bottom:22px;width:100%;text-align:center;font-size:13px;letter-spacing:.12em;text-transform:lowercase;opacity:.55}
.btn{font-family:Nunito,sans-serif;font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;padding:14px 30px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px) scale(1.04);background:rgba(255,220,170,.16)}
.btn.primary{background:linear-gradient(180deg,rgba(255,214,150,.95),rgba(240,160,90,.95));color:#3a1e18;border-color:rgba(255,240,210,.7);box-shadow:0 0 30px rgba(255,180,100,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.primary:hover{box-shadow:0 0 46px rgba(255,190,110,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.icon{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .3s;padding:0}
.icon:hover{transform:scale(1.08);background:rgba(255,220,170,.16)}
.icon svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon .x{display:none}.icon.muted .x{display:inline}.icon.muted .wave{display:none}
#hud{position:fixed;left:0;right:0;top:0;padding:max(14px,env(safe-area-inset-top)) 18px 0;display:flex;align-items:center;justify-content:space-between;opacity:0;pointer-events:none;transition:opacity .6s}
#hud.show{opacity:1}#hud.show .icon{pointer-events:auto}
.hud-r{display:flex;gap:10px}
#hudTitle{font-family:"Cormorant Garamond",serif;font-size:22px;text-align:center;text-shadow:0 0 14px rgba(0,0,0,.5),0 0 20px rgba(255,200,140,.3)}
#hudCh{font-style:italic;opacity:.9}#hudLv{margin-left:12px;font-family:Nunito;font-size:12px;letter-spacing:.25em;opacity:.7;vertical-align:3px}
#hudHint.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 22px rgba(255,210,150,.75)}}
#whisper{position:fixed;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(17px,2vw,24px);text-align:center;max-width:min(760px,90vw);opacity:0;transition:opacity 1.2s;text-shadow:0 0 12px rgba(0,0,0,.8),0 0 24px rgba(0,0,0,.5);pointer-events:none}
#whisper.show{opacity:.95}
.card{position:fixed;left:50%;bottom:7vh;transform:translate(-50%,30px);text-align:center;padding:22px 40px 26px;border-radius:26px;background:rgba(24,18,44,.42);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .8s,transform .9s cubic-bezier(.2,1.3,.4,1);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.card.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.done-star{font-size:26px;color:#ffd9a0;text-shadow:0 0 18px #ffb060;animation:spin 6s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.done-line{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:24px;margin:6px 0 16px}
#chapter{flex-direction:column;background:radial-gradient(ellipse at center,rgba(10,8,24,.55),rgba(10,8,24,.85));text-align:center}
.ch-num{font-family:"Cormorant Garamond",serif;font-size:28px;letter-spacing:.5em;opacity:.7;margin-left:.5em}
.ch-name{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(46px,7vw,92px);margin:8px 0 16px;text-shadow:0 0 40px rgba(255,200,140,.5)}
.ch-haiku{font-family:"Cormorant Garamond",serif;font-size:clamp(17px,2vw,22px);line-height:1.7;opacity:.85;white-space:pre-line}
#chapter.show .ch-num{animation:rise 1.6s both}#chapter.show .ch-name{animation:rise 1.8s .25s both}#chapter.show .ch-haiku{animation:rise 2s .7s both}
#caption{position:fixed;left:0;right:0;top:16vh;text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(28px,4vw,52px);opacity:0;transition:opacity 2s;text-shadow:0 0 30px rgba(255,220,170,.7),0 0 10px rgba(0,0,0,.5);pointer-events:none}
#caption.show{opacity:1}
#fade{position:fixed;inset:0;background:#120f26;opacity:1;pointer-events:none;transition:opacity .9s ease}
#fade.clear{opacity:0}
#rotate{position:fixed;bottom:10px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.1em;opacity:0;pointer-events:none}
@media (orientation:portrait) and (max-width:700px){#rotate.on{opacity:.6}}
/* map */
#map{flex-direction:column;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(20,16,44,.35),rgba(12,10,28,.82));padding:max(18px,env(safe-area-inset-top)) 3vw 3vh;overflow-y:auto;touch-action:pan-y}
.map-head{width:100%;max-width:1200px;display:flex;align-items:center;gap:16px;margin-bottom:2vh}
.map-head h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;font-size:clamp(30px,4vw,48px);margin:0;flex:1;text-shadow:0 0 24px rgba(255,200,140,.4)}
.map-count{font-size:13px;letter-spacing:.2em;opacity:.75}
.map-path{width:100%;max-width:1200px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){.map-path{grid-template-columns:repeat(2,1fr)}.chap img{aspect-ratio:4/3}#map{justify-content:flex-start}}
.chap{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#1a1634;box-shadow:0 18px 50px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.2,1.3,.4,1)}
.chap:not(.locked):hover{transform:translateY(-4px)}
.chap img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;filter:saturate(1.05)}
.chap.locked img{filter:grayscale(.7) brightness(.45) blur(1px)}
.chap .cap{position:absolute;left:0;right:0;top:0;padding:14px 16px 40px;background:linear-gradient(180deg,rgba(10,8,24,.75),transparent)}
.chap .cap b{display:block;font-family:"Cormorant Garamond",serif;font-size:14px;letter-spacing:.4em;opacity:.75;font-weight:500}
.chap .cap i{font-family:"Cormorant Garamond",serif;font-size:clamp(22px,2.3vw,30px)}
.chap .lock{position:absolute;inset:0;display:grid;place-items:center;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:18px;opacity:.85}
.nodes{display:flex;justify-content:center;gap:10px;padding:14px 10px 16px;background:linear-gradient(0deg,rgba(10,8,24,.9),rgba(10,8,24,.55))}
.node{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-family:"Cormorant Garamond",serif;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .3s;padding:0}
.node:hover{transform:scale(1.12)}
.node.done{background:radial-gradient(circle at 40% 35%,#fff6dc,#ffc56a 55%,#e07a3a);color:#3a1e18;border-color:#ffe2b0;box-shadow:0 0 16px rgba(255,180,90,.65)}
.node.next{box-shadow:0 0 0 2px rgba(255,220,170,.6);animation:pulse 1.8s infinite}
.node:disabled{opacity:.3;cursor:default;transform:none}