:root{--gold:#D4A23A;--gold2:#F2C766;--teal:#2DB5AE;--navy:#0A1A30;--navy2:#12284a;--cream:#FBF4E4;--ink:#1b2333;--red:#d9534f;
--fs:clamp(16px,2.1vw + 8px,23px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--navy);color:var(--cream);font-family:'Heebo',system-ui,sans-serif;overflow:hidden;font-size:var(--fs)}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0}
#app{position:fixed;inset:0;overflow:hidden}
/* ---------- scene ---------- */
#vp{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:#000}
#vp.drag{cursor:grabbing}
#world{position:absolute;top:0;left:0;height:100%;will-change:transform}
#world img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none;animation:breathe 26s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
#world .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,48,.55) 0,rgba(10,26,48,0) 22%,rgba(10,26,48,0) 60%,rgba(10,26,48,.6) 100%);pointer-events:none}
#fx{position:absolute;inset:0;pointer-events:none}
.mote{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,.95),rgba(255,200,90,0) 70%);animation:floatup linear infinite}
@keyframes floatup{from{transform:translateY(0) translateX(0);opacity:0}15%{opacity:.9}to{transform:translateY(-38vh) translateX(3vw);opacity:0}}
.fade{position:absolute;inset:0;background:var(--navy);opacity:0;pointer-events:none;transition:opacity .7s;z-index:40}
.fade.on{opacity:1;pointer-events:auto}
/* hotspots */
.spot{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:5;background:none;color:var(--cream);padding:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .4s}
.spot .face{width:clamp(70px,11vh,128px);height:clamp(70px,11vh,128px);border-radius:50%;border:4px solid var(--gold);box-shadow:0 0 0 4px rgba(10,26,48,.55),0 0 28px 6px rgba(242,199,102,.55);overflow:hidden;background:var(--navy2);display:grid;place-items:center;font-size:2.2em}
.spot .face img{width:100%;height:100%;object-fit:cover}
.spot .tag{background:rgba(10,26,48,.85);border:1px solid rgba(212,162,58,.6);padding:2px 12px;border-radius:999px;font-weight:700;font-size:.78em;white-space:nowrap}
.spot .bang{position:absolute;top:-6px;right:-6px;background:var(--teal);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:20px;border:3px solid var(--cream);animation:pulse 1.4s infinite}
.spot.done .bang{background:var(--gold);animation:none}
.spot.done{filter:saturate(.55) brightness(.85)}
.spot.near{transform:translate(-50%,-100%) scale(1.25)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.lore{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(10,26,48,.72);border:2px dashed var(--gold2);font-size:26px;display:grid;place-items:center;z-index:4;animation:glow 2.4s infinite;color:#fff}
.lore.seen{animation:none;opacity:.75;border-style:solid}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(242,199,102,.6)}50%{box-shadow:0 0 0 12px rgba(242,199,102,0)}}
/* HUD */
#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:10px 12px;z-index:20;pointer-events:none}
#hud>*{pointer-events:auto}
.pill{background:rgba(10,26,48,.82);border:1px solid rgba(212,162,58,.55);border-radius:999px;padding:6px 14px;font-weight:700;font-size:.8em;backdrop-filter:blur(6px);white-space:nowrap}
#place small{color:var(--gold2);font-weight:500;margin-inline-start:6px}
#hud .sp{flex:1}
.ib{background:rgba(10,26,48,.82);border:1px solid rgba(212,162,58,.55);color:#fff;width:46px;height:46px;border-radius:50%;font-size:20px;display:grid;place-items:center}
.ib.off{opacity:.45;text-decoration:line-through}
#mini{display:flex;align-items:center;gap:6px;padding:2px 12px 2px 10px}
#mini svg{height:34px;width:auto}
#hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:15;background:rgba(10,26,48,.85);padding:8px 18px;border-radius:999px;font-size:.78em;border:1px solid rgba(45,181,174,.6);transition:opacity .6s;white-space:nowrap}
#hint.hide{opacity:0;pointer-events:none}
#pan{position:absolute;bottom:50%;z-index:12;display:flex;justify-content:space-between;left:6px;right:6px;pointer-events:none}
#pan button{pointer-events:auto;width:44px;height:44px;border-radius:50%;background:rgba(10,26,48,.6);color:#fff;font-size:22px;border:1px solid rgba(255,255,255,.25)}
#pan.hide{display:none}
/* narration */
#narr{position:absolute;top:66px;left:50%;transform:translateX(-50%) translateY(-12px);width:min(760px,calc(100% - 20px));z-index:25;background:linear-gradient(180deg,#fbf4e4,#efe0bd);color:var(--ink);border-radius:18px;padding:16px 18px 14px;box-shadow:0 14px 40px rgba(0,0,0,.45);border:2px solid var(--gold);opacity:0;pointer-events:none;transition:.45s}
#narr.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
#narr .who{display:flex;align-items:center;gap:8px;font-weight:800;color:#8a5a00;font-size:.85em}
#narr p{margin:.4em 0 .6em;line-height:1.55}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{background:var(--gold);color:var(--navy);font-weight:800;border-radius:14px;padding:12px 22px;min-height:54px;box-shadow:0 4px 0 #9c7425;transition:transform .1s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #9c7425}
.btn.teal{background:var(--teal);color:#fff;box-shadow:0 4px 0 #1d7f7a}
.btn.ghost{background:transparent;color:inherit;border:2px solid currentColor;box-shadow:none}
.say{background:rgba(45,181,174,.15);color:inherit;border:2px solid var(--teal);border-radius:999px;width:44px;height:44px;font-size:20px;display:grid;place-items:center;flex:none}
.say.playing{background:var(--teal);color:#fff;animation:pulse 1s infinite}
/* dialog */
#dlg{position:absolute;left:50%;bottom:0;transform:translate(-50%,105%);width:min(860px,100%);max-height:86%;z-index:30;background:linear-gradient(180deg,rgba(18,40,74,.97),rgba(10,26,48,.98));border:2px solid var(--gold);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -12px 50px rgba(0,0,0,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
#dlg.on{transform:translate(-50%,0)}
#dlg .hd{display:flex;align-items:center;gap:12px;padding:14px 16px 6px}
#dlg .hd .pf{width:clamp(58px,9vh,92px);height:clamp(58px,9vh,92px);border-radius:50%;border:3px solid var(--gold);overflow:hidden;flex:none;background:var(--navy2);display:grid;place-items:center;font-size:2em}
#dlg .hd .pf img{width:100%;height:100%;object-fit:cover}
#dlg .hd .nm{flex:1}
#dlg .hd .nm b{display:block;color:var(--gold2);font-size:1.05em}
#dlg .hd .nm span{font-size:.72em;background:rgba(45,181,174,.25);border:1px solid var(--teal);border-radius:999px;padding:1px 10px}
#dlg .x{background:none;color:#fff;opacity:.7;font-size:26px;width:44px;height:44px}
#dlg .bd{overflow-y:auto;padding:4px 18px 22px;-webkit-overflow-scrolling:touch}
.bubble{background:var(--cream);color:var(--ink);border-radius:18px;border-top-right-radius:4px;padding:12px 16px;line-height:1.55;margin:4px 0 12px;position:relative}
.bubble.r{background:#e6f6f5;border-top-right-radius:18px;border-top-left-radius:4px}
.opts{display:grid;gap:10px;margin:8px 0}
.opt{background:rgba(251,244,228,.08);color:var(--cream);border:2px solid rgba(212,162,58,.55);border-radius:14px;padding:12px 16px;text-align:right;min-height:56px;line-height:1.35;transition:.2s}
.opt:hover{background:rgba(212,162,58,.18)}
.opt.sel{background:var(--gold);color:var(--navy);font-weight:700;border-color:var(--gold)}
.opt.ok{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}
.opt.bad{border-color:var(--red);background:rgba(217,83,79,.2);animation:shake .4s}
.opt[disabled]{cursor:default}
.opt .hm{display:inline-block;font-size:.72em;background:var(--navy);color:var(--gold2);border-radius:999px;padding:1px 10px;margin-inline-start:8px;font-weight:700}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.src{background:rgba(212,162,58,.12);border:1px solid rgba(212,162,58,.6);border-radius:14px;padding:12px 14px;margin:12px 0;line-height:1.6;font-size:.9em}
.src h4{margin:0 0 6px;color:var(--gold2);font-size:1em}
.src b{color:var(--gold2)}
.card{background:var(--cream);color:var(--ink);border-radius:16px;padding:18px;text-align:center;font-weight:800;font-size:1.1em;min-height:90px;display:grid;place-items:center;margin:8px 0;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.card.in{animation:pop .35s}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bins .btn{min-height:70px;line-height:1.25}
.why{margin:8px 0;padding:10px 14px;border-radius:12px;line-height:1.5}
.why.ok{background:rgba(45,181,174,.2);border:1px solid var(--teal)}
.why.bad{background:rgba(217,83,79,.18);border:1px solid var(--red)}
.prog{font-size:.75em;opacity:.8;text-align:center}
.ordered{list-style:none;padding:0;margin:6px 0;display:grid;gap:6px;counter-reset:o}
.ordered li{background:var(--teal);color:#fff;border-radius:12px;padding:10px 14px;font-weight:700;counter-increment:o;animation:pop .3s}
.ordered li::before{content:counter(o) ". "}
/* candle reward */
.reward{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:12px}
#flycandle{position:absolute;z-index:60;font-size:48px;pointer-events:none;transition:all 1s cubic-bezier(.5,-0.3,.4,1)}
/* screens */
.screen{position:absolute;inset:0;z-index:35;display:none;overflow-y:auto}
.screen.on{display:block}
#start{background:url(img/bg_map.webp) center/cover}
#start .wrap,#fin .wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 18px 70px;background:radial-gradient(ellipse at center,rgba(10,26,48,.55),rgba(10,26,48,.92))}
.title{font-size:clamp(40px,8vw,92px);font-weight:900;margin:0;color:var(--gold2);text-shadow:0 4px 24px rgba(0,0,0,.6);letter-spacing:-1px;line-height:1}
.sub{font-size:1.05em;margin:.5em 0 1em;color:#fff;opacity:.95;text-align:center}
.intro{max-width:680px;background:rgba(10,26,48,.72);border:1px solid rgba(212,162,58,.5);border-radius:18px;padding:14px 18px;line-height:1.6;text-align:center}
.intro b{color:var(--gold2)}
.stack{display:flex;flex-direction:column;gap:12px;margin-top:18px;width:min(420px,100%)}
.stack .btn{font-size:1.1em;min-height:62px}
.how{font-size:.78em;opacity:.85;margin-top:14px;text-align:center;max-width:560px;line-height:1.5}
footer{position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:12px;padding:5px;background:rgba(10,26,48,.85);color:rgba(251,244,228,.85);z-index:50;pointer-events:none;letter-spacing:.3px}
footer b{color:var(--gold2)}
/* map */
#map{background:#0b1a2e}
#map .mwrap{position:relative;width:min(100%,calc((100dvh - 30px)*1.79));aspect-ratio:1088/608;margin:0 auto;top:50%;transform:translateY(-50%)}
#map img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
#map svg{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.node i{width:26px;height:26px;border-radius:50%;background:var(--navy);border:4px solid var(--cream);display:block;box-shadow:0 0 0 4px rgba(10,26,48,.6)}
.node.done i{background:var(--gold);border-color:var(--gold2)}
.node.cur i{background:var(--teal);animation:pulse 1.2s infinite}
.node span{background:rgba(10,26,48,.85);padding:2px 10px;border-radius:999px;font-weight:800;font-size:.8em;white-space:nowrap;border:1px solid rgba(212,162,58,.6)}
.node small{font-weight:400;opacity:.8}
#mapgo{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:3}
#mapnarr{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 20px));z-index:3}
/* finale */
#fin{background:#050d1a}
#fin .wrap{background:radial-gradient(ellipse at 50% 30%,rgba(212,162,58,.25),rgba(5,13,26,.96) 60%),url(img/bg_oil.webp) center/cover;justify-content:flex-start;padding-top:30px}
#bigmen{width:min(680px,94%);height:auto;margin:6px 0 4px}
.fcard{max-width:760px;width:100%;background:rgba(10,26,48,.85);border:1px solid rgba(212,162,58,.55);border-radius:18px;padding:14px 18px;margin-top:12px;line-height:1.6}
.fcard h3{margin:0 0 8px;color:var(--gold2)}
.fcard ul,.fcard ol{margin:0;padding-inline-start:22px}
.fcard li{margin:4px 0}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick 1.6s ease-in-out infinite alternate}
@keyframes flick{0%{transform:scale(1,1) rotate(-2deg)}50%{transform:scale(.93,1.08) rotate(2deg)}100%{transform:scale(1.05,.95) rotate(-1deg)}}
.unlit .flame,.unlit .halo{opacity:0}
.flame,.halo{transition:opacity .6s}
@media (min-width:1100px){#dlg{max-height:80%}.opts.two{grid-template-columns:1fr 1fr}}
@media (max-height:520px){#narr{top:58px}#dlg{max-height:94%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:460px){#hud{gap:5px;padding:8px 6px}.ib{width:40px;height:40px;font-size:17px}#place small{display:none}#mini svg{height:26px}#mini{padding:2px 8px}.pill{padding:5px 10px}}