*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --ink:#f4efe6; --muted:#b7ad9c; --accent:#c0563b; --gold:#e0a01f;
  --panel:rgba(28,26,24,.82); --panel-brd:rgba(255,255,255,.10);
}
html,body{ height:100%; }
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Noto Sans",sans-serif;
  color:var(--ink); background:#0d0c0b; overflow:hidden;
}
#app{ position:fixed; inset:0; }
#c{ position:absolute; inset:0; display:block; width:100%; height:100%; }

/* ---- title ---- */
#titlebar{
  position:absolute; top:18px; left:22px; max-width:min(520px,60vw);
  pointer-events:none; text-shadow:0 1px 14px rgba(0,0,0,.6);
}
#titlebar .t{ font-size:26px; font-weight:700; letter-spacing:.2px; }
#titlebar .t em{ font-style:normal; font-weight:500; color:var(--gold); font-size:20px; margin-left:8px; }
#titlebar .s{ margin-top:6px; font-size:13px; color:var(--muted); line-height:1.5; }

/* ---- element legend ---- */
#list{
  position:absolute; left:22px; bottom:22px; width:246px;
  background:var(--panel); border:1px solid var(--panel-brd); border-radius:14px;
  padding:10px 8px; backdrop-filter:blur(9px);
  max-height:52vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.4);
}
#list .list-head{
  font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--muted); padding:4px 10px 8px;
}
.li{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; color:var(--ink); text-align:left; cursor:pointer;
  padding:7px 10px; border-radius:9px; font-size:13.5px; line-height:1.25;
  transition:background .15s;
}
.li:hover{ background:rgba(255,255,255,.07); }
.li.sel{ background:rgba(224,160,31,.16); }
.li .ln{
  flex:0 0 22px; height:22px; border-radius:50%; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
}
.li.sel .ln{ background:var(--gold); }

/* ---- info card ---- */
#card{
  position:absolute; top:96px; right:22px; width:340px; max-width:78vw;
  background:var(--panel); border:1px solid var(--panel-brd); border-radius:16px;
  padding:22px 22px 24px; backdrop-filter:blur(9px);
  box-shadow:0 14px 50px rgba(0,0,0,.5); transition:opacity .22s, transform .22s;
}
#card.hidden{ opacity:0; transform:translateY(-8px); pointer-events:none; }
#card .num{
  position:absolute; top:-14px; left:20px; width:32px; height:32px; border-radius:50%;
  background:var(--gold); color:#241c07; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.4);
}
#card h2{ font-size:20px; font-weight:700; margin-top:8px; line-height:1.25; }
#card .cn{ font-size:13px; color:var(--gold); margin-top:3px; letter-spacing:.5px; }
#card .desc{ font-size:14px; line-height:1.62; color:#e7dfd2; margin-top:13px; }
#cardClose{
  position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.08); border:0; color:var(--muted); cursor:pointer; font-size:13px;
}
#cardClose:hover{ background:rgba(255,255,255,.16); color:#fff; }

/* ---- markers ---- */
#markers{ position:absolute; inset:0; pointer-events:none; }
.marker{
  position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%;
  border:2px solid #fff; background:var(--accent); color:#fff;
  font:700 14px/1 "Segoe UI",system-ui; display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:auto; box-shadow:0 2px 9px rgba(0,0,0,.45);
  transition:opacity .18s, background .18s, box-shadow .18s;
}
.marker:hover{ background:#d5673f; }
.marker.sel{ background:var(--gold); box-shadow:0 0 0 6px rgba(224,160,31,.30), 0 2px 9px rgba(0,0,0,.45); }
.marker.occ{ opacity:.34; }
.marker.occ:hover{ opacity:.7; }

/* ---- misc ---- */
#loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--muted); letter-spacing:1px;
}
#hint{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--muted); background:rgba(0,0,0,.32);
  padding:7px 16px; border-radius:20px; pointer-events:none; letter-spacing:.3px;
}

@media (max-width:720px){
  #titlebar{ max-width:none; right:22px; }
  #titlebar .t{ font-size:21px; }
  #list{ width:auto; right:22px; max-height:34vh; bottom:70px; }
  #card{ top:auto; bottom:70px; right:14px; left:14px; width:auto; }
  #hint{ bottom:14px; }
  #modebar{ top:auto; bottom:70px; right:auto; left:50%; transform:translateX(-50%); }
  #modehint{ display:none; }
}

/* ---- mode toggle ---- */
#modebar{
  position:absolute; top:20px; right:22px; display:flex;
  background:var(--panel); border:1px solid var(--panel-brd); border-radius:11px;
  overflow:hidden; backdrop-filter:blur(9px); box-shadow:0 8px 30px rgba(0,0,0,.35);
}
#modebar .seg{
  background:none; border:0; color:var(--muted); padding:10px 20px;
  font-size:14px; font-weight:600; cursor:pointer; transition:background .15s, color .15s;
}
#modebar .seg:hover{ color:var(--ink); }
#modebar .seg.active{ background:var(--gold); color:#241c07; }
#modehint{
  position:absolute; top:70px; right:22px; font-size:12.5px; color:var(--muted);
  background:rgba(0,0,0,.30); padding:6px 13px; border-radius:16px; pointer-events:none;
}
body.mode-anatomy #modehint{ display:none; }
body.mode-building #list,
body.mode-building #markers,
body.mode-building #card{ display:none; }