:root{--line:rgba(127,178,255,.4);--ink:#e8eeff;--mut:#9fb0e6;--deep:#070b24;--amber:#ffc968;--blue:#7fb2ff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--deep);color:var(--ink);font:400 16px/1.7 'Zen Kaku Gothic New',system-ui,sans-serif;overflow:hidden}
#scene{position:fixed;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#scene::-webkit-scrollbar{display:none}
#scene svg{display:block;width:max(100vw,141.5vh);height:max(100vh,70.7vw)}
.hit{fill:transparent}
.vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(3,8,22,.6) 100%),linear-gradient(rgba(3,8,22,.55),transparent 20%)}
.hs{cursor:pointer;outline:none}
.ol{fill:transparent;stroke:var(--amber);stroke-width:2.5;stroke-dasharray:8 7;opacity:0;transition:opacity .25s}
.lb{fill:#fff;paint-order:stroke;stroke:#071634;stroke-width:4px;font:700 17px 'Zen Kaku Gothic New',sans-serif;text-anchor:middle;opacity:0;transition:opacity .25s;pointer-events:none}
.hs:hover .ol,.hs:focus-visible .ol,.hs:hover .lb,.hs:focus-visible .lb{opacity:1}
.nav{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:28px 5vw;z-index:5}
.logo{font:700 20px 'Zen Kaku Gothic New',sans-serif;letter-spacing:.45em;color:#fff;text-decoration:none}
.nav nav{display:flex;align-items:center;gap:clamp(14px,3vw,40px)}
.nav a,.box{font:700 12px 'Zen Kaku Gothic New',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);text-decoration:none;transition:color .2s}
.nav a:hover,.nav a:first-child{color:#fff}
.box{background:none;border:1.5px solid #dfe8ff;color:#fff;padding:12px 22px;cursor:pointer}
.box:hover{background:#dfe8ff;color:var(--deep)}
.jp{position:fixed;margin:0;writing-mode:vertical-rl;font-family:'Shippori Mincho',serif;color:#fff;text-shadow:0 0 22px rgba(110,170,255,.85);pointer-events:none;z-index:4}
.jp.l{left:5vw;top:24vh;font-size:clamp(15px,1.7vw,22px);line-height:1.9;letter-spacing:.25em}
.jp.r{right:4vw;top:20vh;font-size:clamp(56px,8.5vw,128px);letter-spacing:.12em;line-height:1.15;opacity:.95}
}
.slot{display:block;padding:14px 16px;margin-bottom:12px;border:1.5px dashed rgba(127,178,255,.5);color:var(--mut);text-decoration:none}
a.slot{border-style:solid;color:#fff}a.slot:hover{border-color:var(--amber)}
.slot small{display:block;color:var(--mut)}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.hs:focus-visible .ol{opacity:1}
@media(max-width:700px){.nav nav a{display:none}.jp.l{top:16vh}.jp.r{top:14vh}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body[data-theme=sakura]{--amber:#ffc2dc;--blue:#ff8fc0;--line:rgba(255,143,192,.4)}
body[data-theme=tsuki]{--amber:#aeeaff;--blue:#6fd0ff;--line:rgba(111,208,255,.4)}
#pt{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.ld{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--deep);transition:opacity .8s}
.ld b{font:500 clamp(64px,14vw,160px)/1 'Shippori Mincho',serif;color:var(--amber)}.ld.off{opacity:0;pointer-events:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;color:#d3dcff}
.row button,.row input[type=range]{accent-color:var(--blue)}
.tg{background:none;border:1.5px solid var(--blue);color:#fff;padding:6px 14px;cursor:pointer}.tg[aria-pressed=true]{background:var(--blue);color:var(--deep)}
#pal{position:fixed;inset:0;z-index:90;background:rgba(3,8,22,.6);display:grid;justify-items:center;align-content:start;padding-top:18vh}#pal[hidden]{display:none}
.pb{width:min(520px,92vw);background:rgba(6,14,34,.97);border:1px solid var(--line)}
#pq{width:100%;padding:16px 18px;background:none;border:0;border-bottom:1px solid var(--line);color:#fff;font:500 17px 'Zen Kaku Gothic New',sans-serif;outline:none}
#pl{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}#pl li{padding:10px 14px;color:#d3dcff;cursor:pointer}#pl li.on,#pl li:hover{background:var(--blue);color:var(--deep)}


/* ===== HUD panel (pengganti pop-up) ===== */
:root{--cut:26px}
#shade{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .5s;background:linear-gradient(90deg,rgba(3,8,22,.85),transparent 62%)}
body[data-side=l] #shade{background:linear-gradient(270deg,rgba(3,8,22,.85),transparent 62%)}
body.open #shade{opacity:1}body.open .jp{opacity:0}.jp{transition:opacity .4s}
.hud{position:fixed;top:92px;width:min(480px,44vw);max-height:calc(100vh - 176px);z-index:10;display:flex;background:var(--blue);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));--dir:44px}
.hud[hidden]{display:none}body[data-side=r] .hud{right:4vw}body[data-side=l] .hud{left:4vw;--dir:-44px}
.hud.go{animation:hin .5s cubic-bezier(.2,.8,.2,1)}@keyframes hin{from{opacity:0;translate:var(--dir) 0}}
.hud .in{position:relative;flex:1;min-width:0;margin:1px;padding:22px 26px 18px;display:flex;flex-direction:column;background:rgba(4,12,30,.94);clip-path:inherit;overflow:hidden}
.hud .in::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(127,178,255,.05) 0 1px,transparent 1px 3px)}
.hud .in::before{content:"";position:absolute;left:0;right:0;top:0;height:60px;pointer-events:none;background:linear-gradient(transparent,rgba(127,178,255,.16),transparent);animation:sw 1.1s ease-out both}
@keyframes sw{from{translate:0 -60px}to{translate:0 100vh}}
.hud header{display:flex;justify-content:space-between;align-items:baseline;font:500 13px 'Zen Kaku Gothic New',sans-serif;color:var(--amber);letter-spacing:.2em}
.hud .jp2{font:500 15px 'Shippori Mincho',serif;letter-spacing:.35em}
.hud h2{margin:6px 0 16px;font:500 clamp(28px,3.2vw,40px)/1.1 'Shippori Mincho',serif;color:#fff;text-shadow:0 0 24px rgba(110,170,255,.6)}
.hud .bd{overflow:auto;padding-right:6px;min-height:0;flex:1}
.hud .bd>*{animation:up .5s both;animation-delay:calc(var(--i,0)*70ms + 180ms)}@keyframes up{from{opacity:0;translate:0 12px}}
.hud p{margin:0 0 14px;color:#d3dcff}.hud .big{font:500 21px/1.5 'Shippori Mincho',serif;color:var(--amber)}
.hud ul{padding-left:1.1em;color:#d3dcff}.hud li{margin-bottom:10px}.hud b{color:#fff}
.hud footer{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.hud footer button{background:none;border:0;color:var(--mut);font:500 13px 'Zen Kaku Gothic New',sans-serif;cursor:pointer;padding:4px 0}.hud footer button:hover{color:var(--amber)}
.hud .x{position:absolute;top:10px;right:calc(var(--cut) + 6px);z-index:2;width:30px;height:30px;background:none;border:1.5px solid var(--blue);color:var(--blue);font-size:16px;cursor:pointer}.hud .x:hover{background:var(--blue);color:var(--deep)}
.hud .slot{border:0;border-left:3px solid var(--amber);background:rgba(127,178,255,.1);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);color:#fff;margin-bottom:10px}
.hud a.slot:hover{background:rgba(255,201,104,.16)}
.hs.act .ol{opacity:1;animation:pu 1.6s ease-in-out infinite}@keyframes pu{50%{stroke-opacity:.35}}
.chap{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:12;display:flex;gap:6px;padding:8px 14px;background:rgba(4,12,30,.6);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.chap button{display:flex;align-items:center;gap:7px;background:none;border:0;color:var(--mut);font:500 12px 'Zen Kaku Gothic New',sans-serif;cursor:pointer;padding:4px 8px}
.chap button::before{content:"";width:8px;height:8px;rotate:45deg;border:1.5px solid currentColor}
.chap button span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s}
.chap button:hover span,.chap button.on span{max-width:90px}.chap button.on{color:var(--amber)}.chap button.on::before{background:var(--amber)}
@media(max-width:700px){.hud{left:10px!important;right:10px!important;top:auto;bottom:66px;width:auto;max-height:58vh}.chap button span{display:none}.hud .x{right:34px}}

.wind{animation:wd 11s ease-in-out infinite alternate}.wind.slow{animation-duration:19s}
@keyframes wd{to{transform:translate(14px,-8px)}}
#gr{transition:fill 2s}.ld3{animation:tw 3s ease-in-out infinite}@keyframes tw{50%{opacity:.15}}
@media(prefers-reduced-motion:reduce){.wind,.ld3{animation:none}}

body.lite .ld3{animation:none}body.lite .hud .in::before{display:none}

.hs:hover .ol{opacity:1}

.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--amber);border-radius:50%;pointer-events:none;z-index:99;opacity:0;transition:width .2s,height .2s,margin .2s,opacity .3s}
.cur.on{opacity:.8}.cur.big{width:60px;height:60px;margin:-30px 0 0 -30px}
.hud .in::before{content:"";position:absolute;left:0;right:0;top:0;height:60px;pointer-events:none;background:linear-gradient(transparent,rgba(127,178,255,.16),transparent);animation:sw 1.1s ease-out both}
@keyframes sw{from{translate:0 -60px}to{translate:0 100vh}}
.sk{margin-bottom:14px;color:#d3dcff}.sk span{display:flex;justify-content:space-between;font-size:14px;margin-bottom:4px}.sk em{font-style:normal;color:var(--amber)}
.sk i{display:block;height:6px;background:rgba(127,178,255,.15);clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}.sk i::after{content:"";display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--blue),var(--amber))}
.hud .slot small b{color:var(--amber)}

/* ===== penanda baru ===== */
.hs{transition:opacity .4s}body.open .hs:not(.act){opacity:.3}
.gl{opacity:0;transition:opacity .35s;pointer-events:none}
.hs:hover .gl,.hs:focus-visible .gl{opacity:1}.hs.act .gl{opacity:.8}
.ring{fill:rgba(4,12,30,.45);stroke:var(--amber);stroke-width:3;transform-box:fill-box;transform-origin:center;transition:transform .25s}
.dot{fill:var(--amber);transition:fill .25s}
.ld{stroke:var(--amber);stroke-width:2.5;stroke-opacity:.85;pointer-events:none}
.tag{fill:rgba(4,12,30,.8);stroke:var(--amber);stroke-width:1.6;transition:fill .25s}
.nm{fill:var(--amber);font:700 22px 'Zen Kaku Gothic New',sans-serif;letter-spacing:.1em;transition:fill .25s}
.tt{fill:#fff;font:700 24px 'Zen Kaku Gothic New',sans-serif;letter-spacing:.14em;transition:fill .25s}
.hs:hover .ring,.hs:focus-visible .ring,.hs.act .ring{transform:scale(1.35)}
.hs:hover .tag,.hs:focus-visible .tag,.hs.act .tag{fill:var(--amber)}
.hs:hover .nm,.hs:hover .tt,.hs:focus-visible .nm,.hs:focus-visible .tt,.hs.act .nm,.hs.act .tt{fill:#071022}
.hs.act .dot{fill:#fff}.hs.act .ol{animation:none}
@media(max-width:700px){.hs:not(.act) .tag,.hs:not(.act) .nm,.hs:not(.act) .tt,.hs:not(.act) .ld{display:none}}

/* ===== versi bersih: tidak ada penanda permanen, petunjuk muncul saat disorot ===== */
.ring,.dot,.ld{display:none}
.tag,.nm,.tt{opacity:0;transition:opacity .3s}
.hs:hover .tag,.hs:hover .nm,.hs:hover .tt,.hs:focus-visible .tag,.hs:focus-visible .nm,.hs:focus-visible .tt,.hs.act .tag,.hs.act .nm,.hs.act .tt{opacity:1}
.hs:hover .tag,.hs:focus-visible .tag,.hs.act .tag{fill:rgba(4,12,30,.85)}
.hs:hover .nm,.hs:focus-visible .nm,.hs.act .nm{fill:var(--amber)}
.hs:hover .tt,.hs:focus-visible .tt,.hs.act .tt{fill:#fff}
.gl{transition:opacity .45s}
body.open .hs:not(.act){opacity:1}
body.peek .hs .tag,body.peek .hs .nm,body.peek .hs .tt{opacity:1;display:block!important}

/* ===== privasi ringan: cegah seleksi, seret, dan menu tahan-lama pada gambar/UI ===== */
html,body,#scene,.nav,.chap,.jp,.hud header,.hud h2,.hud footer,.ld{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hud .bd,#pq{-webkit-user-select:text;user-select:text}
svg,svg image,.hud,.nav{-webkit-user-drag:none}
img{-webkit-user-drag:none;pointer-events:none}

.hud .slot.lock{border-left-style:dashed;color:#d3dcff}
.hud .req{display:inline-block;margin-top:10px;padding:7px 16px;border:1.5px solid var(--amber);color:var(--amber);font:700 12px 'Zen Kaku Gothic New',sans-serif;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.hud .req:hover{background:var(--amber);color:#071022}