:root{
  --hazard:#ff6a1f;
  --hazard-glow:#ff9a52;
  --safe:#2de0c7;
  --safe-glow:#7ffff0;
  --ink:#eef4f6;
  --dim:#8ca3ac;
  --panel:rgba(8,14,18,0.78);
  --panel-line:rgba(255,255,255,0.08);
  --font-display:'Chakra Petch','Segoe UI',sans-serif;
  --font-body:'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
html,body{margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#04060a; font-family:var(--font-body); color:var(--ink);}
#app{display:none;}
#canvasHolder{position:fixed; inset:0;}
canvas{display:block; touch-action:none;}

/* ---------- Start overlay ---------- */
#startOverlay{
  position:fixed; inset:0; z-index:60; background:radial-gradient(ellipse at 50% 40%, #10181d 0%, #04060a 75%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px;
  transition:opacity .6s ease;
}
#startOverlay h1{font-family:var(--font-display); letter-spacing:2px; font-size:clamp(22px,5vw,40px); margin:0; text-transform:uppercase;}
#startOverlay h1 span{color:var(--hazard); text-shadow:0 0 18px var(--hazard-glow);}
#startOverlay p{max-width:520px; color:var(--dim); font-size:14px; line-height:1.6; margin:0 18px;}
#enterBtn{
  margin-top:10px; padding:16px 42px; border-radius:2px; border:1px solid var(--hazard);
  background:linear-gradient(180deg, rgba(255,106,31,0.18), rgba(255,106,31,0.05));
  color:var(--ink); font-family:var(--font-display); letter-spacing:3px; font-size:15px; text-transform:uppercase;
  cursor:pointer; box-shadow:0 0 26px rgba(255,106,31,0.25); position:relative; overflow:hidden;
}
#enterBtn:active{transform:scale(0.97);}
#loadingNote{font-size:11px; color:var(--dim); letter-spacing:1px;}

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

#topBar{position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}

#tracker{background:var(--panel); border:1px solid var(--panel-line); backdrop-filter:blur(6px); padding:10px 14px; border-radius:3px; min-width:200px;}
#tracker .label{font-family:var(--font-display); font-size:11px; letter-spacing:2px; color:var(--dim); text-transform:uppercase;}
#tracker .count{font-family:var(--font-display); font-size:20px; margin:2px 0 8px; color:var(--ink);}
#tracker .count b{color:var(--hazard);}
#nodeDots{display:flex; gap:5px;}
.nodeDot{width:11px; height:11px; border-radius:2px; background:rgba(255,106,31,0.25); border:1px solid var(--hazard); transition:all .4s;}
.nodeDot.done{background:var(--safe); border-color:var(--safe); box-shadow:0 0 8px var(--safe-glow);}
#objective{margin-top:8px; font-size:11px; color:var(--dim); letter-spacing:0.5px;}
#objective span{color:var(--hazard); font-weight:600;}

#compassWrap{position:relative; width:260px; height:34px; background:var(--panel); border:1px solid var(--panel-line); border-radius:3px; overflow:hidden; backdrop-filter:blur(6px); flex-shrink:0;}
#compassStrip{position:absolute; top:0; left:0; height:100%; width:2000px; display:flex; align-items:center; font-family:var(--font-display); font-size:11px; color:var(--dim); letter-spacing:1px;}
#compassStrip .tick{width:40px; text-align:center; flex-shrink:0;}
#compassStrip .cardinal{color:var(--ink); font-weight:700;}
#compassStrip .marker{color:var(--hazard); font-size:12px;}
#compassStrip .marker.done{color:var(--safe);}
#compassNeedle{position:absolute; top:2px; left:50%; transform:translateX(-50%); color:var(--hazard); font-size:11px;}

#statsPanel{background:var(--panel); border:1px solid var(--panel-line); padding:8px 12px; border-radius:3px; font-size:11px; color:var(--dim); text-align:right; backdrop-filter:blur(6px); flex-shrink:0;}
#fpsReadout{color:var(--ink); font-family:var(--font-display);}
#coordReadout{margin-top:2px;}

#minimapWrap{position:absolute; top:70px; right:16px; width:150px; height:150px; border-radius:50%; border:1px solid var(--panel-line); background:var(--panel); overflow:hidden; backdrop-filter:blur(6px);}
#minimap{width:100%; height:100%;}

#interactPrompt{
  position:absolute; bottom:26%; left:50%; transform:translateX(-50%) translateY(10px);
  background:var(--panel); border:1px solid var(--hazard); padding:8px 16px; border-radius:3px;
  font-family:var(--font-display); font-size:13px; letter-spacing:1px; opacity:0; transition:all .25s;
}
#interactPrompt.show{opacity:1; transform:translateX(-50%) translateY(0);}
#interactPrompt kbd{display:inline-block; padding:1px 7px; border:1px solid var(--hazard); border-radius:3px; margin-right:6px; color:var(--hazard);}

#controlsLegend{
  position:absolute; bottom:16px; left:16px; background:var(--panel); border:1px solid var(--panel-line);
  padding:10px 14px; border-radius:3px; font-size:11px; color:var(--dim); line-height:1.9; backdrop-filter:blur(6px);
}
#controlsLegend b{color:var(--ink);}
#controlsLegend .close{position:absolute; top:4px; right:8px; cursor:pointer; pointer-events:all; color:var(--dim);}

/* ---------- panel tabs ---------- */
#panelTabs{position:absolute; bottom:16px; right:16px; display:flex; gap:8px; pointer-events:all;}
.panelTabBtn{
  width:42px; height:42px; border-radius:50%; background:var(--panel); border:1px solid var(--panel-line);
  color:var(--ink); font-size:17px; cursor:pointer; backdrop-filter:blur(6px);
}
.panelTabBtn:hover{border-color:var(--safe);}

/* ---------- side panels ---------- */
.sidePanel{
  position:fixed; top:0; right:-360px; width:340px; height:100%; z-index:45;
  background:linear-gradient(160deg, #0c1418, #080d10); border-left:1px solid var(--panel-line);
  transition:right .3s ease; display:flex; flex-direction:column; pointer-events:all;
}
.sidePanel.show{right:0;}
.sidePanelHeader{
  font-family:var(--font-display); letter-spacing:2px; text-transform:uppercase; font-size:14px;
  padding:18px 20px; border-bottom:1px solid var(--panel-line); display:flex; justify-content:space-between; align-items:center;
}
.panelClose{background:none; border:none; color:var(--dim); font-size:16px; cursor:pointer;}
.sidePanelBody{padding:16px 20px; overflow-y:auto; font-size:13px; line-height:1.7; color:#cfe4e2; flex:1;}

.logEntry{padding:10px 0; border-bottom:1px solid var(--panel-line);}
.logEntry b{color:var(--ink);}
.logEntry.done b{color:var(--safe);}
.logEntry .tag{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--hazard);}
.logEntry.done .tag{color:var(--safe);}

.invItem{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--panel-line);}
.invItem .icon{font-size:22px;}
.invItem b{display:block; color:var(--ink);}
.invEmpty{color:var(--dim); font-style:italic;}

.achItem{padding:10px 0; border-bottom:1px solid var(--panel-line); opacity:0.4;}
.achItem.unlocked{opacity:1;}
.achItem b{display:block; color:var(--ink);}
.achItem b::before{content:'🏆 '; }
.achItem.unlocked b{color:var(--safe);}

.settingRow{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:12px; color:var(--dim); gap:10px;}
.settingRow input[type=range]{flex:1; accent-color:var(--safe);}
.dangerBtn{width:100%; padding:10px; background:rgba(255,60,40,0.12); border:1px solid #ff3c28; color:#ff8a76; border-radius:3px; cursor:pointer; font-family:var(--font-display); letter-spacing:1px; margin-top:10px;}

#fullMapCanvas{width:100%; border-radius:4px; background:#0a1014;}

/* ---------- Mobile controls ---------- */
#joystickZone{position:absolute; bottom:0; left:0; width:45%; height:45%; pointer-events:all; display:none;}
#joyBase{
  position:absolute; width:100px; height:100px; border-radius:50%; border:2px solid rgba(255,106,31,0.55);
  background:radial-gradient(circle, rgba(255,106,31,0.14) 0%, rgba(255,106,31,0.04) 70%, transparent 100%);
  box-shadow:0 0 22px rgba(255,106,31,0.25), inset 0 0 14px rgba(255,106,31,0.15);
  display:none; transition:box-shadow .15s;
}
#joyBase.active{ box-shadow:0 0 30px rgba(255,154,82,0.45), inset 0 0 18px rgba(255,154,82,0.25); }
#joyKnob{
  position:absolute; width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,206,168,0.9), rgba(255,106,31,0.6) 70%);
  border:1px solid var(--hazard-glow); top:50%; left:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 16px rgba(255,154,82,0.6);
}
#joyKnob.sprint{ background:radial-gradient(circle at 35% 30%, #fff, rgba(255,60,20,0.8) 70%); box-shadow:0 0 26px rgba(255,120,60,0.9); }
#camZone{position:absolute; bottom:0; right:0; width:55%; height:70%; pointer-events:all; display:none;}
#jumpBtn{
  position:absolute; bottom:18px; right:18px; width:58px; height:58px; border-radius:50%;
  background:var(--panel); border:1px solid var(--hazard); color:var(--hazard); font-family:var(--font-display);
  font-size:11px; display:none; align-items:center; justify-content:center; pointer-events:all; z-index:2;
}
#interactBtnMobile{
  position:absolute; bottom:92px; right:18px; width:58px; height:58px; border-radius:50%;
  background:var(--panel); border:1px solid var(--safe); color:var(--safe); font-family:var(--font-display);
  font-size:13px; display:none; align-items:center; justify-content:center; pointer-events:all; z-index:2; opacity:0; transition:opacity .2s;
}
#interactBtnMobile.show{opacity:1;}

/* ---------- Modal ---------- */
#modalOverlay{
  position:fixed; inset:0; z-index:50; background:rgba(2,4,6,0.72); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; pointer-events:all;
}
#modalOverlay.show{display:flex;}
#modalCard{
  width:min(560px, 88vw); max-height:78vh; overflow-y:auto; background:linear-gradient(160deg, #0c1418, #080d10);
  border:1px solid var(--safe); border-radius:4px; padding:26px 28px; box-shadow:0 0 40px rgba(45,224,199,0.15);
  position:relative;
}
#modalCard .eyebrow{font-family:var(--font-display); font-size:11px; letter-spacing:3px; color:var(--safe); text-transform:uppercase;}
#modalCard h2{font-family:var(--font-display); margin:6px 0 14px; font-size:24px; letter-spacing:1px;}
#modalCard .body{font-size:14px; line-height:1.75; color:#cfe4e2;}
#modalCard .body ul{padding-left:18px; margin:8px 0;}
#modalCard .body li{margin-bottom:6px;}
#modalCard .body a{color:var(--safe);}
#modalClose{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--dim); font-size:20px; cursor:pointer;}

/* ---------- NPC dialog ---------- */
#npcDialog{
  position:fixed; bottom:14%; left:50%; transform:translateX(-50%) translateY(10px); z-index:48;
  width:min(420px, 86vw); background:var(--panel); border:1px solid var(--hazard); border-radius:4px;
  padding:16px 40px 16px 18px; font-size:13px; line-height:1.6; opacity:0; pointer-events:none; transition:all .25s;
}
#npcDialog.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:all;}
#npcDialogClose{position:absolute; top:8px; right:10px; background:none; border:none; color:var(--dim); font-size:15px; cursor:pointer;}

/* ---------- completion + achievement toast ---------- */
#completionBanner{
  position:fixed; top:20%; left:50%; transform:translate(-50%,-20px); z-index:55; text-align:center;
  background:var(--panel); border:1px solid var(--safe); padding:22px 34px; border-radius:4px; opacity:0;
  pointer-events:none; transition:all .6s; box-shadow:0 0 50px rgba(45,224,199,0.2);
}
#completionBanner.show{opacity:1; transform:translate(-50%,0);}
#completionBanner h3{font-family:var(--font-display); color:var(--safe); letter-spacing:2px; margin:0 0 6px;}
#completionBanner p{margin:0; color:var(--dim); font-size:13px;}

#achievementToast{
  position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-20px); z-index:56;
  background:var(--panel); border:1px solid #ffd24a; padding:10px 20px; border-radius:3px; opacity:0;
  pointer-events:none; transition:all .4s; font-size:12px; letter-spacing:0.5px; color:#ffd24a;
}
#achievementToast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Weather ---------- */
#lightningFlash{position:fixed; inset:0; z-index:40; background:#fff; opacity:0; pointer-events:none; transition:opacity .08s;}

@media (pointer:coarse){
  #controlsLegend{display:none;}
  #joystickZone, #joyBase, #camZone, #jumpBtn{display:block;}
  #interactBtnMobile{display:flex;}
  #compassWrap{width:150px;}
  #statsPanel{display:none;}
  .sidePanel{width:88vw; right:-90vw;}
  #panelTabs{bottom:170px;}
}