/* OB13: everything visual is drawn in the WebGL scene (the card's lens too); CSS only places crisp text. */
:root { --ink: #EAF6FF; --dim: #9FB4CF; }
html, body { margin: 0; height: 100%; background: #000; color: var(--ink); overflow: hidden;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
#map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#map.drag { cursor: grabbing; }
.shadow, #labels .lbl, #bar, #key, #card { text-shadow: 0 0 2px #000, 0 0 6px #000, 0 0 10px rgba(0, 0, 0, 0.9); }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#labels .lbl { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
#labels .lbl.main b { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
#labels .lbl.main small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; opacity: 0.8; }
#labels .lbl.main[style*="translate(-50%"] { text-align: center; }
#labels .lbl.main[style*="translate(-100%"] { text-align: right; }
#labels .lbl.item { font-size: 10.5px; }
#bar { position: fixed; top: 12px; left: 14px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
#bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #5FE1FF; box-shadow: 0 0 8px #5FE1FF; }
#bar .name { font-weight: 600; letter-spacing: 0.06em; }
.badge { font-size: 10px; letter-spacing: 0.14em; color: var(--dim); }
.health { font-size: 11px; color: var(--dim); }
#card { position: fixed; top: 48px; right: 14px; width: min(320px, 40vw); max-height: 70vh; overflow: auto; padding: 16px 18px;
  background: transparent; border: 0; }
#card h2 { margin: 2px 0 6px; font-size: 16px; font-weight: 600; }
#card .kind { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
#card .status { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
#card p { margin: 6px 0; color: #D6E7F8; }
#card .links { font-size: 11px; color: var(--dim); }
#cardClose { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--dim); font-size: 18px; cursor: pointer; }
#key { position: fixed; left: 14px; bottom: 10px; font-size: 11px; color: var(--dim); pointer-events: none; }
#key div { margin-top: 3px; }
#key .hint { opacity: 0.8; }
.ring { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 4px -1px 8px; border: 1.5px solid #9FD8FF; box-sizing: border-box; }
.ring:first-child { margin-left: 0; }
.ring.half { border-color: #9FD8FF #9FD8FF transparent transparent; transform: rotate(-45deg); }
.ring.dot { border-style: dotted; }
.sw::before { content: "●"; margin: 0 4px 0 8px; }
.sw:first-child::before { margin-left: 0; }
.sw { font-style: normal; }
#card a.open { color: #9FD8FF; text-decoration: none; border-bottom: 1px solid rgba(159, 216, 255, 0.4); }
/* OB13 F6: the view switch (tree <-> free graph) */
#viewBtn { pointer-events: auto; margin-left: 6px; padding: 3px 10px; font: inherit; font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink); background: rgba(10, 24, 44, 0.55); border: 1px solid rgba(159, 216, 255, 0.35); border-radius: 12px; cursor: pointer; }
#viewBtn:hover { border-color: rgba(159, 216, 255, 0.7); }
#viewBtn:focus-visible { outline: 2px solid #5FE1FF; outline-offset: 2px; }