*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#07090d;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#e8eef5;-webkit-user-select:none;user-select:none;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;z-index:1}
#c.drag{cursor:grabbing}
#backdrop{position:fixed;inset:0;z-index:0;overflow:hidden}
.bd{position:absolute;inset:-8%;background-size:cover;background-position:center;filter:blur(28px) brightness(.5) saturate(1.1);transition:none}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
#labels,#edgeArrows{position:fixed;inset:0;z-index:3;pointer-events:none}
.mk{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:opacity .25s}
.mk .tag{background:rgba(10,14,20,.72);border:1px solid rgba(120,220,255,.55);color:#dff6ff;font-size:12px;letter-spacing:.04em;padding:4px 9px;border-radius:999px;white-space:nowrap;backdrop-filter:blur(6px);box-shadow:0 0 12px rgba(80,200,255,.25)}
.mk.sel .tag,.mk:hover .tag{background:rgba(40,170,230,.85);color:#fff;border-color:#bff}
.mk .stem{width:2px;height:22px;background:linear-gradient(rgba(140,230,255,.9),rgba(140,230,255,0))}
.edge{position:absolute;pointer-events:auto;cursor:pointer;transform:translateY(-50%)!important;background:rgba(10,14,20,.7);border:1px solid rgba(120,220,255,.45);color:#dff6ff;font-size:12px;padding:6px 10px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-50%)}
.edge:hover{background:rgba(40,170,230,.85)}
#hud{position:fixed;inset:0;z-index:4;pointer-events:none}
#hud button,#map,#help,#goBar *{pointer-events:auto}
#roomCard{position:absolute;left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));padding:10px 14px 10px 12px;border-left:3px solid #4fd2ff;background:linear-gradient(90deg,rgba(8,12,18,.75),rgba(8,12,18,0));min-width:200px}
#roomName{font-size:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
#viewName{font-size:12px;opacity:.75;letter-spacing:.05em;margin-top:2px}
#topRight{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:flex;gap:8px}
#topRight button,#goBar button,#help button{background:rgba(10,14,20,.7);color:#e8f6ff;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:7px 11px;font-size:13px;cursor:pointer;backdrop-filter:blur(6px)}
#topRight button:hover,#goBar button:hover{border-color:#4fd2ff}
#crosshair{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
#goBar{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:92vw}
#goBar button{font-size:12px}
#goBar button b{color:#4fd2ff;font-weight:600;margin-right:4px}
#map{position:fixed;z-index:5;right:max(14px,env(safe-area-inset-right));top:62px;width:260px;background:rgba(8,12,18,.82);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;backdrop-filter:blur(8px);transition:opacity .25s,transform .25s}
#map:not(.open){opacity:0;transform:translateY(-8px);pointer-events:none}
.mapHead{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.mapHead em{font-style:normal;opacity:.55;font-size:10px;text-transform:none;letter-spacing:.02em}
#mapSvg{width:100%;height:auto;display:block}
#mapSvg .room{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.35);stroke-width:.05}
#mapSvg .room.cur{fill:rgba(79,210,255,.12);stroke:#4fd2ff}
#mapSvg .room.np{stroke-dasharray:.15 .12;fill:none}
#mapSvg text{fill:rgba(232,238,245,.65);font-size:.32px;text-anchor:middle}
#mapSvg .dot{fill:#8fa6b8;cursor:pointer}
#mapSvg .dot:hover{fill:#fff}
#mapSvg .dot.cur{fill:#4fd2ff}
#mapSvg .cone{fill:rgba(79,210,255,.35)}
#mapSvg .lnk{stroke:rgba(255,255,255,.12);stroke-width:.04}
#roomList{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
#roomList button{font-size:11px;padding:4px 7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#dbe7f0;border-radius:6px;cursor:pointer}
#roomList button.cur{border-color:#4fd2ff;color:#fff}
#help{position:fixed;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(8,12,18,.92);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:18px 22px;font-size:14px;line-height:1.7;display:none;max-width:90vw}
#help.open{display:block}
#help h3{letter-spacing:.1em;text-transform:uppercase;font-size:13px;margin-bottom:6px;color:#4fd2ff}
#help button{margin-top:10px}
#intro{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(10,16,26,.85),rgba(3,5,8,.97));transition:opacity .6s}
#intro.gone{opacity:0;pointer-events:none}
.introBox{text-align:center;padding:24px;max-width:440px}
.title{font-size:34px;font-weight:800;letter-spacing:.18em}
.title span{color:#4fd2ff}
.sub{opacity:.7;margin:6px 0 18px;letter-spacing:.06em;font-size:13px}
#loadBar{height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;margin:0 auto 16px;width:220px}
#loadFill{height:100%;width:0;background:#4fd2ff;transition:width .2s}
#startBtn{background:#4fd2ff;color:#04121a;border:0;font-weight:700;letter-spacing:.12em;padding:11px 28px;border-radius:999px;font-size:14px;cursor:pointer}
#startBtn:disabled{opacity:.5;cursor:default}
.fine{font-size:11px;opacity:.5;margin-top:16px;line-height:1.5}
@media (max-width:700px){
  #map{width:min(78vw,300px);top:58px}
  #map:not(.open){display:block}
  #roomName{font-size:16px}
  #roomCard{min-width:0}
  .mk .tag{font-size:11px;padding:3px 8px}
}
@media (max-width: 700px) { #goBar { display: none !important; } }