:root{
  --win1:#3a5cc7; --win2:#0c1d63; --win3:#06103a; --edge:#f4f6ff;
  --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --hud-h: 48px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:#fff;font-family:var(--font);overflow:hidden;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none}
button{font:inherit;color:inherit}

/* ---------- scene ---------- */
#viewport{position:fixed;inset:0;overflow:auto;scrollbar-width:none;touch-action:pan-x pan-y}
#viewport::-webkit-scrollbar{display:none}
#stage{position:relative;transform-origin:0 0;user-select:none;-webkit-user-select:none}
#bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  image-rendering:auto}
#stage.fx-prism #bg{animation:prism 9s linear infinite}
#stage.fx-cave  #bg{animation:cave 5s ease-in-out infinite alternate}
@keyframes prism{from{filter:hue-rotate(0deg) saturate(1.2)}to{filter:hue-rotate(360deg) saturate(1.2)}}
@keyframes cave{from{filter:brightness(.85)}to{filter:brightness(1.15) saturate(1.3)}}

#hotspots{position:absolute;inset:0;width:100%;height:100%}
#hotspots polygon{fill:transparent;stroke:transparent;cursor:pointer;transition:fill .25s,stroke .25s;
  vector-effect:non-scaling-stroke}
#hotspots polygon.hint:hover,#hotspots polygon.hint.hot{fill:rgba(255,246,200,.16);stroke:rgba(255,250,220,.85);stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(255,240,180,.9))}
#hotspots polygon.exit.hint:hover,#hotspots polygon.exit.hint.hot{fill:rgba(170,230,255,.14);stroke:rgba(200,240,255,.9)}
#hotspots polygon.hidden{cursor:default}
body.debug #hotspots polygon{stroke:#ffeb3b;stroke-width:2;fill:rgba(255,235,59,.12);stroke-dasharray:6 3}
body.debug #hotspots polygon.exit{stroke:#40c4ff;fill:rgba(64,196,255,.12)}
body.debug #hotspots polygon.hidden{stroke:#ff40ff;fill:rgba(255,64,255,.18)}
body.debug .lbl{opacity:1 !important}
body.debug .lbl.hidden{display:block;background:#7a007a}

/* labels */
#labels{position:absolute;inset:0;pointer-events:none}
.lbl{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:13px;letter-spacing:.04em;
  padding:3px 9px;border:1.5px solid var(--edge);border-radius:5px;opacity:0;transition:opacity .2s;
  background:linear-gradient(180deg,var(--win1),var(--win2));box-shadow:0 2px 8px rgba(0,0,0,.5);text-shadow:1px 1px 0 #000}
.lbl.exit::before{content:"➜ ";color:#9fe3ff}
.lbl.hidden{display:none}
.lbl.on, body.spots .lbl:not(.hidden){opacity:1}
/* sparkles for touch / "spots" mode */
.spark{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0 20%,rgba(255,240,170,.75) 35%,transparent 70%);
  animation:spark 2.2s ease-in-out infinite;opacity:0}
body.touch .spark, body.spots .spark{opacity:1}
body.spots .spark{display:none}
@keyframes spark{0%,100%{transform:scale(.6);opacity:.35}50%{transform:scale(1.15);opacity:.95}}

/* hero sprite (inline SVG) */
#hero{position:absolute;width:3.6%;aspect-ratio:1/2;transform-origin:50% 100%;pointer-events:none;z-index:3;
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.35))}
#hero svg{width:100%;height:100%;display:block;overflow:visible}
#hero.walking svg{animation:bob .32s ease-in-out infinite alternate}
#hero.left svg{transform:scaleX(-1)}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-6%)}}
#hero.left.walking svg{animation:bobL .32s ease-in-out infinite alternate}
@keyframes bobL{from{transform:scaleX(-1) translateY(0)}to{transform:scaleX(-1) translateY(-6%)}}
#hero .shadow{position:absolute;left:10%;right:10%;bottom:-6%;height:12%;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(2px)}
#marker{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid #fff;border-radius:50%;
  pointer-events:none;opacity:0;z-index:2}
#marker.ping{animation:ping .6s ease-out}
@keyframes ping{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}

/* overlays: monsters etc */
#overlays{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ov{position:absolute}
.ov svg{width:100%;height:auto;display:block;overflow:visible}
.ov.serpent{animation:serp 7s ease-in-out infinite;opacity:.88;mix-blend-mode:multiply}
.ov.serpent.glow{mix-blend-mode:screen;opacity:.9}
@keyframes serp{0%,100%{transform:translate(0,0)}50%{transform:translate(4%,6%)}}
.ov.kraken{animation:kr 6s ease-in-out infinite;transform-origin:50% 100%;mix-blend-mode:multiply;opacity:.82}
@keyframes kr{0%,100%{transform:translateY(8%) rotate(-2deg)}50%{transform:translateY(-4%) rotate(2deg)}}
.ov.shadow{animation:shad 11s ease-in-out infinite;opacity:.55}
@keyframes shad{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(12%);opacity:.65}}
.ov.cavemouth{animation:cm 4s ease-in-out infinite alternate}
@keyframes cm{from{opacity:.25}to{opacity:.6}}
.ov.orb{animation:orb 2.4s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes orb{from{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}

/* ---------- fade ---------- */
#fader{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .45s ease;z-index:40}
#fader.on{opacity:1;pointer-events:auto}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
  z-index:20;pointer-events:none}
#hud > *{pointer-events:auto}
#crumbs,#hud-buttons button{background:linear-gradient(180deg,rgba(58,92,199,.92),rgba(12,29,99,.92));border:2px solid var(--edge);
  border-radius:7px;box-shadow:0 3px 10px rgba(0,0,0,.45);text-shadow:1px 1px 0 #000}
#crumbs{padding:6px 12px;font-size:14px;max-width:62vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#crumbs .site{font-weight:700;letter-spacing:.06em}
#crumbs .sep{opacity:.6;margin:0 .4em}
#crumbs .trail{opacity:.7;cursor:pointer}
#crumbs .trail:hover{opacity:1;text-decoration:underline}
#crumbs .now{color:#ffe98a}
#hud-buttons{display:flex;gap:6px}
#hud-buttons button{padding:6px 10px;font-size:14px;cursor:pointer;min-height:36px}
#hud-buttons button[aria-pressed="true"]{color:#ffe98a}
#hud-buttons button:focus-visible{outline:2px solid #ffe98a}

#tip{position:fixed;z-index:25;pointer-events:none;opacity:0;transform:translate(-50%,-140%);transition:opacity .12s}
#tip.on{opacity:1}
#tip{padding:4px 10px;font-size:14px;border:1.5px solid var(--edge);border-radius:5px;
  background:linear-gradient(180deg,var(--win1),var(--win2));text-shadow:1px 1px 0 #000;white-space:nowrap}
#tip.exit::before{content:"➜ ";color:#9fe3ff}

#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;
  z-index:30;transition:all .35s;padding:8px 16px;border:2px solid var(--edge);border-radius:8px;font-size:15px;
  background:linear-gradient(180deg,#7a3cc7,#2b0c63);text-shadow:1px 1px 0 #000;pointer-events:none;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- RPG window ---------- */
.rpg-window{background:linear-gradient(180deg,var(--win1) 0%,var(--win2) 55%,var(--win3) 100%);
  border:3px solid var(--edge);border-radius:10px;
  box-shadow:0 0 0 2px #1a2a6c,inset 0 0 0 2px rgba(255,255,255,.18),0 12px 40px rgba(0,0,0,.6);
  text-shadow:2px 2px 0 #000;color:#fff}
#panel{position:fixed;z-index:30;left:50%;bottom:6vh;transform:translateX(-50%);width:min(720px,92vw);
  padding:20px 26px 14px;cursor:pointer;animation:pop .22s ease-out}
@keyframes pop{from{transform:translateX(-50%) scale(.92);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
#panel h2{margin:0 0 4px;font-size:24px;letter-spacing:.03em;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
#panel h2 a{font-size:15px;color:#9fe3ff;text-decoration:none;border-bottom:1px dashed #9fe3ff;cursor:pointer}
#panel h2 a:hover{color:#fff;border-color:#fff}
#panel h2 .nolink{font-size:13px;color:#c7cdf2;opacity:.8;font-weight:400}
#panel.secret{background:linear-gradient(180deg,#8a3cc7 0%,#3a0c63 55%,#1a063a 100%)}
#panel-kicker{margin:0 0 10px;color:#ffe98a;font-style:italic;font-size:15px;min-height:1em}
#panel-body{font-size:17px;line-height:1.55;min-height:3.2em}
#panel-body p{margin:0 0 .6em}
#panel-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;opacity:.75;margin-top:4px}
.caret{animation:caret .6s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
#panel-body .cursor{display:inline-block;width:.55em;height:1em;background:#fff;vertical-align:-2px;margin-left:2px;animation:caret .5s steps(2) infinite}

/* ---------- map ---------- */
#map{position:fixed;z-index:35;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,94vw);padding:16px 18px 12px}
#map h2{margin:0 0 8px;font-size:20px}
#map-box{border:2px solid rgba(255,255,255,.4);border-radius:6px;background:radial-gradient(ellipse at 50% 55%,#1d8fa8 0%,#0b4b7a 55%,#06264a 100%);aspect-ratio:1/0.78}
#map-svg{width:100%;height:100%}
#map-svg .land{fill:#d8c48a;stroke:#6b8f3a;stroke-width:1.2}
#map-svg .jungle{fill:#4f8a3c;opacity:.85}
#map-svg .peak{fill:#5d6b5a}
#map-svg .edge{stroke:rgba(255,255,255,.5);stroke-width:.5;stroke-dasharray:1.2 1}
#map-svg .edge.secret{stroke:#ff8cff}
#map-svg .node{cursor:pointer}
#map-svg .node circle{stroke:#fff;stroke-width:.6}
#map-svg .node.seen circle{fill:#ffe98a}
#map-svg .node.unseen circle{fill:#405080}
#map-svg .node.unseen{cursor:not-allowed}
#map-svg .node.secret.seen circle{fill:#ff8cff}
#map-svg .node.here circle{fill:#ff5252;animation:herepulse 1s ease-in-out infinite alternate}
@keyframes herepulse{to{r:3.2}}
#map-svg .node text{font-size:3.1px;fill:#fff;paint-order:stroke;stroke:#000;stroke-width:.7px;text-anchor:middle}
#map-svg .node:hover text{fill:#ffe98a}
.map-legend{font-size:12px;margin:8px 0 4px;opacity:.85}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid #fff;vertical-align:-1px}
.dot.here{background:#ff5252}.dot.seen{background:#ffe98a}.dot.unseen{background:#405080}
.map-foot{display:flex;gap:8px;align-items:center;justify-content:flex-end;font-size:13px}
.map-foot #map-count{margin-right:auto;opacity:.85}
.map-foot button{background:rgba(0,0,0,.25);border:1.5px solid var(--edge);border-radius:5px;padding:5px 10px;cursor:pointer}
#map-reset{opacity:.6}

/* ---------- phones ---------- */
@media (max-width: 700px), (max-height: 500px){
  #hud{padding-top:calc(6px + env(safe-area-inset-top))}
  #hud-buttons button span{display:none}
  #hud-buttons button{min-width:40px;min-height:40px;font-size:17px}
  #crumbs{font-size:13px;max-width:58vw;padding:8px 10px}
  #crumbs .trail,#crumbs .sep.t{display:none}
  .lbl{font-size:12px}
  #panel{left:0;right:0;bottom:0;transform:none;width:auto;border-radius:14px 14px 0 0;border-bottom:0;
    padding:16px 18px calc(14px + env(safe-area-inset-bottom));max-height:62vh;overflow:auto;animation:sheet .25s ease-out}
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
  #panel h2{font-size:21px}
  #panel-body{font-size:16px}
  #map{width:96vw;max-height:92vh;overflow:auto}
  #hero{width:4.2%}
}
@media (max-height: 500px) and (orientation: landscape){
  #panel{max-height:70vh}
  #map-box{aspect-ratio:auto;height:58vh}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01s !important;transition-duration:.01s !important}
}

/* ---------- v2 additions ---------- */
#stage.fx-prism2 #bg{animation:prism2 6s ease-in-out infinite alternate}
@keyframes prism2{from{filter:hue-rotate(-40deg) saturate(1.3) brightness(.9)}to{filter:hue-rotate(80deg) saturate(1.6) brightness(1.1)}}
.ov.kraken.glow{mix-blend-mode:screen;opacity:.85}
.ov.mist{animation:mist 4s ease-in-out infinite alternate}
@keyframes mist{from{opacity:.45;transform:translateX(-3%)}to{opacity:.8;transform:translateX(3%)}}
.ov.smoke{animation:smk 8s ease-in-out infinite;transform-origin:50% 100%}
@keyframes smk{0%,100%{transform:translateY(0) scaleX(1);opacity:.6}50%{transform:translateY(-6%) scaleX(1.2);opacity:.9}}
.ov.beam{animation:beam 5s ease-in-out infinite;mix-blend-mode:screen;transform-origin:100% 30%}
@keyframes beam{0%,100%{opacity:.15;transform:rotate(-6deg)}50%{opacity:.8;transform:rotate(6deg)}}


/* world map: painted image + svg nodes on top */
#map-box{position:relative;aspect-ratio:16/9;background:#06264a;overflow:hidden}
#map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#map-svg{position:absolute;inset:0}
#map-svg .node text{font-size:3.2px}
.dot.secret{background:#ff8cff}

/* tray hidden on desktop */
#tray{display:none}

/* ---------- phone: separate tap layout ----------
   Scene fills the top, a thumb-reach tray lists everything you can tap here. */
body.phone{--tray-h:0px}
body.phone #viewport{bottom:var(--tray-h)}
body.phone #tray{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;max-height:46vh;z-index:22;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--win1) 0%,var(--win2) 50%,var(--win3) 100%);border-top:3px solid var(--edge);
  box-shadow:0 -6px 18px rgba(0,0,0,.5)}
body.phone #tray-title{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#ffe98a;text-shadow:1px 1px 0 #000;margin:0 2px 6px}
body.phone #tray-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;overflow-y:auto;align-content:start}
body.phone .chip{display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 10px;text-align:left;font-size:14px;line-height:1.15;
  border:1.5px solid rgba(244,246,255,.85);border-radius:8px;background:rgba(6,16,58,.55);text-shadow:1px 1px 0 #000;cursor:pointer}
body.phone .chip:active{background:rgba(255,233,138,.25)}
body.phone .chip .ico{font-size:13px;color:#ffe98a;flex:none}
body.phone .chip.exit .ico{color:#9fe3ff}
body.phone .chip.project{border-color:#ffe98a}
body.phone .lbl{display:none}
body.phone #toast{bottom:calc(var(--tray-h) + 12px)}
body.phone body.phone.debug .lbl{display:block}
body.phone #panel{z-index:30}
body.phone #hero{width:4.2%}
@media (max-height:500px) and (orientation:landscape){
  body.phone #tray{left:auto;top:0;width:220px;height:100%;max-height:none;border-top:0;border-left:3px solid var(--edge);padding-top:calc(60px + env(safe-area-inset-top))}
  body.phone #viewport{bottom:0;right:220px}
  body.phone #tray-list{grid-template-columns:1fr}
  body.phone #toast{bottom:16px}
}
body.phone #map-svg .node text{font-size:4.6px}
body.phone #map{padding:12px 10px 10px}

/* multi-page panels */
#panel-body{max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain}
#panel-foot #panel-page{margin-right:auto;font-variant-numeric:tabular-nums}
#panel-back{background:rgba(0,0,0,.25);border:1.5px solid var(--edge);border-radius:5px;padding:3px 9px;font-size:12px;cursor:pointer;margin-right:8px}
#panel-x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:18px;line-height:1;padding:6px;cursor:pointer;opacity:.75}
#panel-x:hover{opacity:1}
#panel h2{padding-right:28px}
#panel.more .caret{color:#ffe98a}
body.phone #panel{max-height:62vh;display:flex;flex-direction:column}
body.phone #panel-body{max-height:none;flex:1 1 auto;min-height:0}
body.phone #panel-back{font-size:14px;padding:8px 12px}
body.phone #panel-foot{font-size:13px}
body.phone #panel-x{font-size:22px;padding:8px}
#panel[hidden]{display:none!important}