:root{
  --gold:#e8d5a8; --gold-bright:#ffe9b8; --ink:#3b3226; --paper:#f3ead6;
  --anemo:#74c8a8; --pyro:#ff7a55; --hydro:#4fc3f7; --electro:#c88bfa; --cryo:#93e0ef; --geo:#f0b93c; --dendro:#9adb4a;
  --ui-font:"HYWenHei","汉仪文黑","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#05070c;color:#fff;font-family:var(--ui-font);-webkit-font-smoothing:antialiased}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#ui-root{position:fixed;inset:0;pointer-events:none;z-index:10;overflow:hidden}
#ui-root>*{pointer-events:none}
.clickable{pointer-events:auto}

/* ---------- boot / loading ---------- */
#boot{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 38%,#16233d 0%,#080b14 60%,#04060a 100%);transition:opacity .9s ease}
#boot.hide{opacity:0;pointer-events:none}
.boot-logo{font-size:64px;letter-spacing:.32em;color:var(--gold-bright);text-shadow:0 0 26px rgba(255,220,150,.55),0 0 60px rgba(120,180,255,.25);font-weight:600}
.boot-sub{font-size:12px;letter-spacing:.42em;color:#8fa4c4;text-transform:uppercase}
.boot-bar{width:min(420px,60vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
.boot-bar>i{display:block;height:100%;width:12%;background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
  animation:bootslide 1.25s cubic-bezier(.4,0,.2,1) infinite}
@keyframes bootslide{0%{transform:translateX(-120%)}100%{transform:translateX(900%)}}
.boot-tip{font-size:13px;color:#96a8c6;letter-spacing:.14em}

/* ---------- debug ---------- */
#debug{position:absolute;left:10px;top:10px;font:11px/1.55 ui-monospace,Consolas,monospace;color:#b9f;
  background:rgba(4,8,16,.62);padding:8px 10px;border-radius:6px;white-space:pre;display:none;border:1px solid rgba(120,160,255,.18)}
#debug.on{display:block}
/* =====================================================================
   UI module E — genshin-like HUD / intro / menus / dialogue
   appended below (preserves #boot and :root above)
   ===================================================================== */

/* ---------- shared panel chrome (paper + gold + ink) ---------- */
.ui-panel{
  position:absolute; background:linear-gradient(180deg, rgba(246,238,220,.97), rgba(236,222,192,.96));
  color:var(--ink); border:1px solid rgba(196,168,110,.85); border-radius:12px;
  box-shadow:0 0 0 1px rgba(120,88,40,.28), 0 18px 46px rgba(0,0,0,.42), inset 0 0 26px rgba(255,255,255,.30);
  font-family:var(--ui-font); pointer-events:auto;
}
.ui-panel::before{content:""; position:absolute; inset:7px; border:1px solid rgba(232,213,168,.55); border-radius:8px; pointer-events:none}
.ui-corner{position:absolute; width:20px; height:20px; pointer-events:none; opacity:.9}
.ui-corner::before,.ui-corner::after{content:""; position:absolute; background:linear-gradient(135deg,#fff3cf,var(--gold))}
.ui-corner.tl{top:4px; left:4px}.ui-corner.tr{top:4px; right:4px}.ui-corner.bl{bottom:4px; left:4px}.ui-corner.br{bottom:4px; right:4px}
.ui-corner.tl::before{top:0;left:0;width:20px;height:2px}
.ui-corner.tl::after{top:0;left:0;width:2px;height:20px}
.ui-corner.tr::before{top:0;right:0;width:20px;height:2px}
.ui-corner.tr::after{top:0;right:0;width:2px;height:20px}
.ui-corner.bl::before{bottom:0;left:0;width:20px;height:2px}
.ui-corner.bl::after{bottom:0;left:0;width:2px;height:20px}
.ui-corner.br::before{bottom:0;right:0;width:20px;height:2px}
.ui-corner.br::after{bottom:0;right:0;width:2px;height:20px}
.ui-title{font-size:14px; letter-spacing:.28em; color:#6b5a34; font-weight:600; text-shadow:0 1px 0 rgba(255,255,255,.5)}

/* =====================================================================
   INTRO — opening cinematic
   ===================================================================== */
#intro{position:absolute; inset:0; z-index:80; overflow:hidden; pointer-events:auto; background:#000; cursor:pointer}
#intro.b3d{background:transparent}
#intro .intro-bg,#intro .intro-particles,#intro .intro-lines{position:absolute; inset:0; width:100%; height:100%}
#intro .intro-bg{transform-origin:50% 58%}
#intro .intro-vignette{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 52%, rgba(0,0,0,.42) 100%); pointer-events:none}
#intro.b3d .intro-vignette{background:radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(4,8,16,.55) 100%)}
#intro .intro-act{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .55s ease, transform .55s ease; pointer-events:none}

/* act 1 — logo / studio credit */
#intro .logo-line1{font-size:13px; letter-spacing:.6em; color:#b9a8cf; opacity:0; transform:translateY(8px)}
#intro .logo-line2{font-size:clamp(30px,6vw,54px); letter-spacing:.34em; margin-top:16px; font-weight:600; color:transparent;
  background:linear-gradient(180deg,#fff3d0,#e9c98a 55%,#c39a4e); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 18px rgba(255,220,150,.5)); opacity:0; transform:translateY(8px)}
#intro.logo #intro-act-logo{opacity:1}
#intro.logo .logo-line1{animation:logoLine .55s ease forwards}
#intro.logo .logo-line2{animation:logoLine .55s .18s ease forwards}
@keyframes logoLine{to{opacity:1; transform:translateY(0)}}

/* act 2 — title */
#intro .title-chars{position:relative; display:flex; gap:.04em; filter:drop-shadow(0 3px 5px rgba(24,16,44,.55)) drop-shadow(0 0 26px rgba(255,214,130,.4))}
#intro .title-chars .char{font-size:clamp(72px,20vw,176px); font-weight:800; line-height:1; letter-spacing:.06em; color:transparent;
  background:linear-gradient(178deg,#ffe58a 0%,#f8cf62 40%,#ecb244 70%,#cd8a24 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1.5px rgba(122,72,12,.55); opacity:0;}
#intro .title-sweep{position:absolute; top:-8%; left:-12%; width:124%; height:116%; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,0) 34%, rgba(255,248,214,.95) 50%, rgba(255,255,255,0) 66%, transparent 80%)}
#intro .title-sub{margin-top:22px; font-size:clamp(11px,1.9vw,15px); font-weight:600; letter-spacing:.06em; color:#faf5e0; text-transform:uppercase;
  opacity:0; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7), 0 0 16px rgba(255,230,170,.5)}
#intro.title #intro-act-title{opacity:1}
#intro.enter #intro-act-enter{opacity:1}
#intro.title .title-chars .c1{animation:charIn .95s cubic-bezier(.22,.68,.2,1) .10s forwards}
#intro.title .title-chars .c2{animation:charIn .95s cubic-bezier(.22,.68,.2,1) .26s forwards}
#intro.title .title-sweep{animation:sweep .75s ease-out .58s forwards}
#intro.title .title-sub{animation:subIn 1.4s cubic-bezier(.2,.7,.2,1) .55s forwards}
#intro.title .title-chars{animation:titleBreathe 3.8s ease-in-out 1.6s infinite}
@keyframes titleBreathe{0%,100%{filter:drop-shadow(0 3px 5px rgba(24,16,44,.55)) drop-shadow(0 0 18px rgba(255,214,130,.24))}50%{filter:drop-shadow(0 3px 5px rgba(24,16,44,.55)) drop-shadow(0 0 36px rgba(255,226,156,.46))}}
@keyframes charIn{
  0%{opacity:0; filter:blur(18px) brightness(2.6); transform:scale(1.55) translateY(14px); clip-path:inset(0 50% 0 50%)}
  55%{opacity:1; filter:blur(3px) brightness(1.5); transform:scale(.95) translateY(0); clip-path:inset(0 0 0 0)}
  100%{opacity:1; filter:blur(0) brightness(1); transform:scale(1) translateY(0); clip-path:inset(0 0 0 0)}
}
@keyframes sweep{0%{opacity:0; transform:translateX(-40%) skewX(-16deg)} 16%{opacity:.9} 100%{opacity:0; transform:translateX(70%) skewX(-16deg)}}
@keyframes subIn{to{opacity:1; letter-spacing:.42em}}

/* click-to-enter prompt */
#intro .intro-click{position:absolute; left:50%; bottom:12%; transform:translateX(-50%); text-align:center; opacity:0; pointer-events:none}
#intro.title .intro-click{opacity:1; transition:opacity .7s ease 1.15s}
#intro .click-ring{position:relative; width:50px; height:50px; margin:0 auto 12px; opacity:.85}
#intro .click-ring::before,#intro .click-ring::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(232,213,168,.75)}
#intro .click-ring::before{animation:ringPulse 2.4s ease-out infinite}
#intro .click-ring::after{animation:ringPulse 2.4s ease-out 1.2s infinite}
@keyframes ringPulse{0%{transform:scale(.6); opacity:.9}100%{transform:scale(1.4); opacity:0}}
#intro .click-label{font-size:18px; letter-spacing:.5em; padding-left:.5em; color:var(--gold-bright); text-shadow:0 1px 3px rgba(0,0,0,.7), 0 0 16px rgba(255,220,150,.7); animation:breathe 2.2s ease-in-out infinite}
#intro .intro-ver{margin-top:10px; font-size:10px; letter-spacing:.24em; color:#d3dcec; text-shadow:0 1px 2px rgba(0,0,0,.7)}
@keyframes breathe{0%,100%{opacity:.68; text-shadow:0 1px 3px rgba(0,0,0,.7), 0 0 10px rgba(255,220,150,.35)}50%{opacity:1; text-shadow:0 1px 3px rgba(0,0,0,.7), 0 0 24px rgba(255,220,150,.85)}}

/* act 3 — enter flash (2D only; the 3D white flash is the integrator's) */
#intro .enter-burst{position:absolute; left:50%; top:50%; width:140px; height:140px; margin:-70px 0 0 -70px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #fff6dc 38%, rgba(255,250,235,0) 70%); opacity:0; pointer-events:none}
#intro.enter .enter-burst{animation:burst .55s cubic-bezier(.2,.7,.3,1) forwards}
#intro.enter #intro-act-title{opacity:0; transform:translateY(-26px)}
#intro.enter .intro-click{opacity:0; transform:translateX(-50%) translateY(12px); transition:opacity .4s ease, transform .4s ease}
@keyframes burst{0%{opacity:0; transform:scale(.12)}30%{opacity:1}100%{opacity:0; transform:scale(7)}}

/* bottom-right loading spinner (anemo symbol) */
#intro .intro-spinner{position:absolute; right:22px; bottom:20px; width:56px; height:56px; opacity:0; transition:opacity .5s ease; pointer-events:none}
#intro .intro-spinner canvas{width:100%; height:100%; animation:spin 1.15s linear infinite; filter:drop-shadow(0 0 10px rgba(116,200,168,.6))}
#intro.logo .intro-spinner, #intro.title .intro-spinner{opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
#intro.done{opacity:0; pointer-events:none; transition:opacity .6s ease}

/* =====================================================================
   HUD
   ===================================================================== */
#hud{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .4s ease}
#hud.on{opacity:1}

/* party — top left vertical cards */
#party{position:absolute; left:18px; top:16px; display:flex; flex-direction:column; gap:8px}
.party-card{position:relative; width:64px; height:64px; border-radius:50%; border:2px solid rgba(232,213,168,.7);
  background:rgba(16,22,38,.55); overflow:visible; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; box-shadow:0 2px 8px rgba(0,0,0,.4)}
.party-card canvas{position:absolute; inset:0; width:100%; height:100%; border-radius:50%}
.party-card .pc-hp{position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:52px; height:4px; border-radius:2px; background:rgba(0,0,0,.55); overflow:hidden; border:1px solid rgba(255,255,255,.25)}
.party-card .pc-hp i{display:block; height:100%; width:100%; background:linear-gradient(180deg,#8ff0b8,#3ecf7a)}
.party-card .pc-key{position:absolute; right:-7px; top:-5px; width:18px; height:18px; border-radius:4px; background:linear-gradient(180deg,#2a3550,#151b2c);
  border:1px solid rgba(232,213,168,.6); color:var(--gold-bright); font-size:10px; line-height:18px; text-align:center; font-weight:700}
.party-card.active{transform:scale(1.22); border-color:var(--gold-bright); box-shadow:0 0 0 2px rgba(232,213,168,.25), 0 0 20px rgba(255,220,150,.45); z-index:2}

/* HP bar under party */
#hpbar{position:absolute; left:18px; top:296px; width:248px; pointer-events:none}
#hpbar .hp-name{font-size:13px; letter-spacing:.12em; color:#eef3fb; text-shadow:0 1px 3px rgba(0,0,0,.6); margin-bottom:5px; display:flex; justify-content:space-between}
#hpbar .hp-name .hp-lv{color:var(--gold-bright)}
#hpbar .hp-track{position:relative; height:14px; border-radius:7px; background:rgba(10,14,24,.6); border:1px solid rgba(255,255,255,.18); overflow:hidden}
#hpbar .hp-fill{position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:7px; background:linear-gradient(180deg,#fff7ec,#ffe2ad 45%,#f7a96c);
  transition:filter .3s ease; box-shadow:inset 0 -2px 3px rgba(0,0,0,.22), 0 0 10px rgba(255,210,150,.35)}
#hpbar .hp-ghost{position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:7px; background:linear-gradient(180deg,#ff8f7a,#e2473a); transition:width .5s ease}
#hpbar.hurt .hp-fill{filter:saturate(.5) brightness(1.6)}
#hpbar .hp-num{font-size:11px; color:#dbe4f2; text-align:right; margin-top:2px; text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* skills — bottom right */
#skills{position:absolute; right:26px; bottom:38px; display:flex; align-items:flex-end; gap:14px; pointer-events:none}
.skill{position:relative; border-radius:50%; border:2px solid rgba(232,213,168,.75); background:rgba(14,18,30,.6); box-shadow:0 4px 14px rgba(0,0,0,.45)}
.skill canvas{position:absolute; inset:0; width:100%; height:100%; border-radius:50%}
.skill-e{width:54px; height:54px}
.skill-q{width:64px; height:64px}
.skill .sk-cd{position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none}
.skill .sk-cd i{position:absolute; inset:0; background:rgba(6,10,20,.72); transform-origin:50% 50%}
.skill .sk-key{position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:18px; height:18px; border-radius:5px; background:linear-gradient(180deg,#2a3550,#151b2c);
  border:1px solid rgba(232,213,168,.6); color:var(--gold-bright); font-size:10px; line-height:18px; text-align:center; font-weight:700}
.skill.ready{animation:skillReady 1.6s ease-in-out infinite}
.skill.ready::after{content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(255,240,190,.85); animation:skillRing 1.6s ease-out infinite}
@keyframes skillRing{0%{transform:scale(.92); opacity:.9}100%{transform:scale(1.16); opacity:0}}
@keyframes skillReady{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.45)}50%{box-shadow:0 0 26px rgba(255,224,140,.7)}}
.skill .sk-energy{position:absolute; inset:-3px; border-radius:50%; pointer-events:none}

/* stamina ring */
#stamina{position:absolute; right:176px; bottom:34px; width:60px; height:60px; pointer-events:none}
#stamina canvas{position:absolute; inset:0; width:100%; height:100%}
#stamina.exhausted{animation:stamShake .3s linear infinite}
@keyframes stamShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* crosshair + lockon */
#crosshair{position:absolute; left:50%; top:50%; width:22px; height:22px; transform:translate(-50%,-50%); opacity:.8; pointer-events:none}
#crosshair::before,#crosshair::after{content:""; position:absolute; background:rgba(255,255,255,.85); box-shadow:0 0 4px rgba(0,0,0,.5)}
#crosshair::before{left:50%; top:0; width:2px; height:100%; margin-left:-1px}
#crosshair::after{top:50%; left:0; height:2px; width:100%; margin-top:-1px}
#crosshair .ch-dot{position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px; border-radius:50%; background:#fff}
#lockon{position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%) rotate(45deg); pointer-events:none; opacity:0}
#lockon i{position:absolute; background:var(--pyro); box-shadow:0 0 8px rgba(255,120,80,.8)}
#lockon i:nth-child(1){left:0; top:0; width:0; height:0; border:9px solid transparent; border-top-color:var(--pyro); border-left-color:var(--pyro); border-top-left-radius:4px; background:none; box-shadow:none}
#lockon.on{opacity:1; animation:lockSpin 2s linear infinite}
@keyframes lockSpin{to{transform:translate(-50%,-50%) rotate(405deg)}}

/* minimap */
#minimap{position:absolute; right:18px; top:16px; width:138px; height:138px; border-radius:50%; pointer-events:none;
  border:2px solid rgba(232,213,168,.7); box-shadow:0 0 0 1px rgba(0,0,0,.5), inset 0 0 20px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4)}
#minimap canvas{position:absolute; inset:0; width:100%; height:100%; border-radius:50%}
#minimap .mm-name{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); font-size:11px; letter-spacing:.1em; color:#f4f7fc;
  text-shadow:0 1px 3px rgba(0,0,0,.85); white-space:nowrap}
#minimap .mm-compass{position:absolute; left:50%; top:3px; transform:translateX(-50%); font-size:10px; color:var(--gold-bright); letter-spacing:.1em; text-shadow:0 1px 2px rgba(0,0,0,.7)}
#minimap .mm-weather{position:absolute; left:50%; top:16px; transform:translateX(-50%); font-size:9px; color:#dff1ff; letter-spacing:.06em; text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* boss bar */
#bossbar{position:absolute; left:50%; top:20px; transform:translateX(-50%); width:min(460px,56vw); pointer-events:none; opacity:0; transition:opacity .3s ease}
#bossbar.on{opacity:1}
#bossbar .boss-name{text-align:center; font-size:13px; letter-spacing:.3em; color:#f6d9c0; text-shadow:0 0 8px rgba(255,120,70,.6); margin-bottom:5px}
#bossbar .boss-track{position:relative; height:10px; border-radius:5px; background:rgba(10,12,20,.62); border:1px solid rgba(255,255,255,.18); overflow:hidden}
#bossbar .boss-fill{position:absolute; left:0; top:0; bottom:0; width:100%; background:linear-gradient(90deg,#ff8a5c,#ffc46a); border-radius:5px; transition:width .25s ease}
#bossbar .boss-ticks{position:absolute; inset:0; display:flex}
#bossbar .boss-ticks i{flex:1; border-right:1px solid rgba(0,0,0,.28)}
#bossbar .boss-ticks i:last-child{border-right:none}

/* quest tracker — right side */
#questpanel{position:absolute; right:16px; top:156px; width:214px; pointer-events:none; opacity:0; transition:opacity .35s ease}
#questpanel.on{opacity:1}
#questpanel .qp-inner{background:rgba(12,16,28,.5); border:1px solid rgba(232,213,168,.35); border-radius:10px; padding:9px 12px; backdrop-filter:blur(3px)}
#questpanel .qp-head{font-size:11px; letter-spacing:.2em; color:var(--gold-bright); border-bottom:1px solid rgba(232,213,168,.3); padding-bottom:6px; margin-bottom:7px}
#questpanel .qp-title{font-size:13px; color:#f2efe6; margin-bottom:6px; line-height:1.5}
#questpanel .qp-step{font-size:11px; color:#c7d0e0; padding:2px 0; display:flex; gap:7px; align-items:flex-start; line-height:1.5}
#questpanel .qp-step .chk{width:14px; height:14px; border-radius:3px; border:1px solid rgba(232,213,168,.7); flex:none; margin-top:2px; position:relative}
#questpanel .qp-step.done{color:#8d98ad; text-decoration:line-through}
#questpanel .qp-step.done .chk{background:linear-gradient(180deg,#ffe9a8,#e0b45a); border-color:transparent}
#questpanel .qp-step.done .chk::after{content:""; position:absolute; left:3px; top:1px; width:5px; height:8px; border:solid #5b4316; border-width:0 2px 2px 0; transform:rotate(45deg)}

/* region banner */
#regionbanner{position:absolute; left:50%; top:24%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; opacity:0}
#regionbanner.show{animation:regionIn 3.2s ease forwards}
#regionbanner .rb-name{font-size:clamp(24px,3.4vw,40px); letter-spacing:.34em; padding-left:.34em; color:transparent;
  background:linear-gradient(180deg,#fff8e2,#e9c98a 60%,#c39a4e); -webkit-background-clip:text; background-clip:text; font-weight:600;
  filter:drop-shadow(0 0 18px rgba(255,220,150,.45))}
#regionbanner .rb-line{width:240px; height:1px; margin:10px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
@keyframes regionIn{0%{opacity:0; transform:translate(-50%,-50%) scale(.86)}14%{opacity:1; transform:translate(-50%,-50%) scale(1)}76%{opacity:1}100%{opacity:0; transform:translate(-50%,-58%) scale(1.04)}}

/* =====================================================================
   DIALOGUE
   ===================================================================== */
#dialogue{position:absolute; inset:0; z-index:30; pointer-events:none; opacity:0; transition:opacity .3s ease}
#dialogue.on{opacity:1}
#dialogue .dlg-box{position:absolute; left:50%; bottom:54px; transform:translateX(-50%); width:min(560px,84vw);
  background:linear-gradient(180deg, rgba(20,26,42,.86), rgba(10,14,24,.9)); border:1px solid rgba(232,213,168,.5); border-radius:12px;
  padding:18px 24px 20px; pointer-events:auto; box-shadow:0 14px 40px rgba(0,0,0,.5), inset 0 0 30px rgba(120,150,220,.08); color:#f1eee4}
#dialogue .dlg-speaker{display:inline-flex; align-items:center; gap:10px; font-size:16px; letter-spacing:.14em; color:var(--gold-bright); margin-bottom:10px; font-weight:600}
#dialogue .dlg-portrait{width:40px; height:40px; border-radius:50%; border:2px solid rgba(232,213,168,.7)}
#dialogue .dlg-text{font-size:15px; line-height:1.85; min-height:52px; letter-spacing:.04em}
#dialogue .dlg-cue{position:absolute; right:20px; bottom:14px; width:16px; height:10px; opacity:.6; animation:cueBob .9s ease-in-out infinite}
#dialogue .dlg-cue::before{content:""; position:absolute; left:3px; top:0; width:9px; height:9px; border:solid var(--gold-bright); border-width:0 2px 2px 0; transform:rotate(45deg)}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
#dialogue .dlg-choices{display:flex; flex-direction:column; gap:8px; margin-top:14px}
#dialogue .dlg-choice{pointer-events:auto; text-align:left; padding:10px 16px; border-radius:8px; cursor:pointer; font-size:14px; letter-spacing:.06em;
  color:#f2efe4; background:linear-gradient(180deg, rgba(60,72,100,.55), rgba(32,40,60,.55)); border:1px solid rgba(232,213,168,.4); transition:all .18s ease}
#dialogue .dlg-choice:hover{background:linear-gradient(180deg, rgba(232,213,168,.32), rgba(180,150,90,.22)); border-color:var(--gold-bright); color:#fff; transform:translateX(4px)}

/* cinematic letterbox */
#cinematic-bars{position:absolute; inset:0; z-index:35; pointer-events:none}
#cinematic-bars .cb{position:absolute; left:0; right:0; height:0; background:#000; transition:height .5s ease}
#cinematic-bars .cb.top{top:0}#cinematic-bars .cb.bottom{bottom:0}
#cinematic-bars.on .cb{height:9vh}

/* =====================================================================
   MENUS
   ===================================================================== */
#menus{position:absolute; inset:0; z-index:20; pointer-events:none}
.menu-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.92); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1.2); padding:26px 30px}
.menu-panel.open{transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto}
#panel-map{width:min(720px,88vw); height:min(520px,76vh); display:flex; flex-direction:column}
#map-canvas{flex:1; border-radius:10px; border:1px solid rgba(196,168,110,.7); background:#0c1424; cursor:grab; overflow:hidden}
#map-canvas canvas{width:100%; height:100%; display:block}
#map-canvas.dragging{cursor:grabbing}
.map-hint{position:absolute; right:12px; bottom:10px; font-size:11px; color:#8a7448; letter-spacing:.08em; pointer-events:none}
.map-wp{position:absolute; pointer-events:auto; cursor:pointer; transform:translate(-50%,-100%); text-align:center; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.map-wp .wp-icon{width:22px; height:22px; margin:0 auto; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:linear-gradient(180deg,#fff3cf,#e8c168); border:2px solid #8a6a2a}
.map-wp.unlocked .wp-icon{background:linear-gradient(180deg,#ffe9a8,#e0b45a)}
.map-wp.locked .wp-icon{background:linear-gradient(180deg,#5a6276,#39405a); border-color:#6a7288}
.map-wp .wp-name{font-size:11px; color:#fff; text-shadow:0 1px 2px #000; white-space:nowrap; margin-top:3px}
.map-wp:hover .wp-icon{box-shadow:0 0 14px rgba(255,230,160,.8)}
#panel-quests{width:min(520px,84vw); max-height:min(560px,74vh)}
#panel-inventory{width:min(560px,86vw)}
#panel-pause{width:min(520px,84vw)}
.menu-list{overflow-y:auto; max-height:min(360px,50vh); margin-top:14px}
.quest-item{background:rgba(120,96,52,.12); border:1px solid rgba(196,168,110,.35); border-radius:9px; padding:11px 14px; margin-bottom:9px}
.quest-item.active{border-color:var(--gold); background:rgba(232,213,168,.16)}
.quest-item .q-title{font-size:14px; font-weight:600; color:#4a3b20}
.quest-item .q-step{font-size:12px; color:#6b5a34; margin-top:3px; display:flex; gap:6px; align-items:center}
.quest-item .q-step .chk{width:12px; height:12px; border-radius:3px; border:1px solid #a08a54; flex:none}
.quest-item .q-step.done{text-decoration:line-through; color:#9b8a63}
.quest-item .q-step.done .chk{background:#e0b45a; border-color:transparent}
.inv-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:14px}
.inv-slot{aspect-ratio:1; border-radius:7px; border:1px solid rgba(120,96,52,.4); background:rgba(255,255,255,.28); position:relative; box-shadow:inset 0 0 6px rgba(0,0,0,.12)}
.inv-slot canvas{position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); border-radius:5px}
.inv-slot.r1{border-color:#9aa2b0}.inv-slot.r2{border-color:#5fc06f}.inv-slot.r3{border-color:#5aa8e8}.inv-slot.r4{border-color:#c06fe0}.inv-slot.r5{border-color:#e8b24a}
.inv-slot .inv-num{position:absolute; right:2px; bottom:1px; font-size:10px; color:#3b3226; text-shadow:0 1px 0 rgba(255,255,255,.5); font-weight:700}
.inv-slot.empty{opacity:.45; border-style:dashed}
.settings-row{display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px solid rgba(196,168,110,.28)}
.settings-row:last-child{border-bottom:none}
.settings-row .s-label{font-size:14px; color:#4a3b20}
.settings-row .s-sub{font-size:11px; color:#9b8a63; margin-top:2px}
.settings-row .s-val{display:flex; gap:6px}
.settings-row .s-opt{padding:6px 13px; border-radius:7px; border:1px solid rgba(160,138,84,.5); background:rgba(255,255,255,.3); cursor:pointer; font-size:12px; color:#5b4520; transition:all .15s}
.settings-row .s-opt.sel{background:linear-gradient(180deg,#ffe9a8,#e0b45a); border-color:#a8873a; color:#4a3410; font-weight:700}
.settings-row input[type=range]{width:160px; accent-color:#c9a050}
.ctrl-grid{display:grid; grid-template-columns:auto 1fr; gap:7px 18px; margin-top:14px; font-size:13px; color:#4a3b20}
.ctrl-grid .k{text-align:right; color:#8a6a2a; font-weight:700; letter-spacing:.06em}

/* =====================================================================
   toasts / subtitle / prompt / fade / credits
   ===================================================================== */
#toasts{position:absolute; right:20px; top:16px; z-index:40; display:flex; flex-direction:column; gap:9px; align-items:flex-end; pointer-events:none}
.toast{display:flex; align-items:center; gap:9px; padding:10px 15px; border-radius:9px; color:#f5f0e2; font-size:13px; letter-spacing:.05em;
  background:linear-gradient(180deg, rgba(30,38,58,.88), rgba(16,20,32,.9)); border:1px solid rgba(232,213,168,.5);
  box-shadow:0 8px 22px rgba(0,0,0,.45); animation:toastIn .32s cubic-bezier(.2,.7,.3,1.2) forwards}
.toast.out{animation:toastOut .3s ease forwards}
.toast .t-ico{width:20px; height:20px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:#3a2c10; font-weight:700}
@keyframes toastIn{from{opacity:0; transform:translateX(30px)}to{opacity:1; transform:translateX(0)}}
@keyframes toastOut{to{opacity:0; transform:translateX(30px)}}
#subtitle{position:absolute; left:50%; bottom:12%; transform:translateX(-50%); z-index:38; pointer-events:none; font-size:17px; letter-spacing:.1em; color:#f5f2ea;
  text-shadow:0 2px 6px rgba(0,0,0,.7); background:rgba(10,14,24,.45); padding:8px 20px; border-radius:8px; opacity:0; transition:opacity .3s ease; white-space:nowrap}
#subtitle.on{opacity:1}
#prompt{position:absolute; left:50%; bottom:28%; transform:translateX(-50%); z-index:36; pointer-events:none; display:flex; align-items:center; gap:9px;
  font-size:14px; color:#f3efe2; text-shadow:0 1px 4px rgba(0,0,0,.6); opacity:0; transition:opacity .2s ease}
#prompt.on{opacity:1}
#prompt .p-key{min-width:22px; height:22px; padding:0 6px; border-radius:5px; background:linear-gradient(180deg,#2a3550,#151b2c);
  border:1px solid rgba(232,213,168,.7); color:var(--gold-bright); font-size:12px; line-height:22px; text-align:center; font-weight:700}
#fade{position:absolute; inset:0; z-index:85; pointer-events:none; background:#000; opacity:0}
#credits{position:absolute; inset:0; z-index:86; pointer-events:none; background:rgba(3,5,10,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .6s ease}
#credits.on{opacity:1}
#credits .cr-line{font-size:14px; letter-spacing:.22em; color:#c8d4ea; margin:7px 0; opacity:0}
#credits .cr-line.big{font-size:26px; color:var(--gold-bright); letter-spacing:.4em; margin-bottom:26px}

/* ---------- sheer cold (Dragonspine) + frost ---------- */
#coldbar{position:absolute; left:18px; top:356px; width:248px; height:7px; border-radius:4px; background:rgba(10,14,24,.6); border:1px solid rgba(255,255,255,.18); overflow:hidden; opacity:0; transition:opacity .3s ease}
#coldbar.on{opacity:1}
#coldbar .cold-fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(180deg,#d7f6ff,#5fb8e8); border-radius:4px}
#coldbar .cold-fill.danger{background:linear-gradient(180deg,#ffe0d0,#ff7a55)}
#frost{position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(ellipse at center, rgba(255,255,255,0) 40%, rgba(150,205,255,.22) 78%, rgba(120,190,255,.4) 100%)}