*{margin:0;padding:0;box-sizing:border-box}
body{background:#04070d;width:100vw;height:100vh;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif;color:#e0e0e0}
canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;cursor:grab;background:#0b1a35}
canvas.dragging{cursor:grabbing}
#backBtn{position:fixed;top:14px;left:16px;z-index:25;color:rgba(255,255,255,.4);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:2px;padding:6px 12px;border-radius:4px;transition:all .2s}
#backBtn:hover{color:#fff;background:rgba(255,255,255,.1)}
#ui{position:fixed;inset:0;pointer-events:none;z-index:1}
#topbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:14px;pointer-events:auto;background:rgba(6,10,20,.85);padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.08);align-items:center;box-shadow:0 6px 24px rgba(0,0,0,.5);max-width:96%;flex-wrap:wrap;justify-content:center}
#title{font-size:14px;font-weight:900;letter-spacing:5px;color:#fde047;text-shadow:0 0 12px rgba(253,224,71,.35);font-family:'Georgia',serif}
#toggles{display:flex;gap:5px;flex-wrap:wrap}
.tog{padding:6px 10px;background:rgba(255,255,255,.06);color:#cbd5e1;border:1px solid rgba(255,255,255,.1);border-radius:6px;font-size:11px;font-weight:700;letter-spacing:1.5px;cursor:pointer;transition:all .12s}
.tog:hover{background:rgba(255,255,255,.14)}
.tog.active{background:linear-gradient(135deg,#f59e0b,#c2410c);color:#fff;border-color:rgba(255,255,255,.2)}

#legend{position:absolute;top:70px;left:16px;background:rgba(6,10,20,.85);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;font-size:11px;letter-spacing:1px;box-shadow:0 6px 24px rgba(0,0,0,.5);max-height:70vh;overflow-y:auto;pointer-events:auto}
.legend-row{display:flex;align-items:center;gap:8px;padding:3px 0;color:#cbd5e1}
.legend-swatch{width:14px;height:10px;border-radius:2px;border:1px solid rgba(255,255,255,.15);flex-shrink:0}
.legend-section{font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.5);margin:6px 0 3px;font-weight:800}

#tooltip{position:absolute;background:rgba(0,0,0,.92);color:#fff;border:1px solid rgba(253,224,71,.3);border-radius:6px;padding:8px 12px;font-size:12px;pointer-events:none;display:none;z-index:5;box-shadow:0 4px 18px rgba(0,0,0,.6);white-space:nowrap;max-width:280px}
#tooltip.visible{display:block}
#tooltip .tt-name{font-weight:800;color:#fde047;font-size:13px;letter-spacing:1px}
#tooltip .tt-meta{font-size:10px;color:rgba(255,255,255,.6);letter-spacing:1px;margin-top:2px}
#tooltip .tt-note{font-size:11px;color:#cbd5e1;margin-top:4px;line-height:1.4;white-space:normal}

#hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:1.5px;color:rgba(255,255,255,.4);text-align:center;background:rgba(0,0,0,.3);padding:4px 12px;border-radius:5px}