* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05060a;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: #d7dde8; }
#scene { position: fixed; inset: 0; }
#scene canvas { display: block; }

/* HUD */
#hud { position: fixed; top: 14px; left: 16px; z-index: 10; pointer-events: none; }
#title { font-size: 18px; font-weight: 600; letter-spacing: 0.5px; }
#title .sun { color: #ffb648; font-size: 22px; }
#title .sub { font-size: 11px; color: #7e8aa3; font-weight: 400; margin-top: 2px; letter-spacing: 0.3px; }
#legend { margin-top: 14px; font-size: 11px; line-height: 1.7; color: #9aa4ba; }
#legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
#legend .ring { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: transparent; }
#legend .moon { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; margin-left: 1px; vertical-align: middle; background: #8ab4ff; box-shadow: 0 0 5px #8ab4ff; }
#legend .froz { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: middle; color: #fff4c2; }
.dot.warm { background: #ffb648; box-shadow: 0 0 7px #ffb648; }
.dot.cold { background: #1d2a44; border: 1px solid #2c3a5a; }
.dot.obj-b { background: #38e0b0; box-shadow: 0 0 7px #38e0b0; }
.dot.obj-d { background: #ff4d5e; box-shadow: 0 0 7px #ff4d5e; }
.ring.perc-b { border: 2px solid #38e0b0; }
.ring.perc-d { border: 2px solid #ff4d5e; }
.froz::before { content: "★"; }

/* labels */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.label { position: absolute; transform: translate(-50%, -140%); white-space: nowrap;
  font-size: 11px; color: #cfd6e6; padding: 2px 7px; border-radius: 4px;
  background: rgba(10,14,24,0.55); border: 1px solid rgba(120,140,180,0.25);
  backdrop-filter: blur(2px); }
.label .st { color: #7e8aa3; font-size: 10px; margin-left: 4px; }
.label .killer { color: #ff7a86; font-weight: 600; }

/* detail panel */
#panel { position: fixed; top: 0; right: 0; width: 380px; height: 100%; z-index: 20;
  background: rgba(10,14,22,0.96); border-left: 1px solid rgba(120,140,180,0.25);
  padding: 20px 22px; overflow-y: auto; box-shadow: -10px 0 40px rgba(0,0,0,0.5); }
#panel.hidden { display: none; }
#panel-close { position: absolute; top: 14px; right: 16px; background: none; border: none;
  color: #8b94a8; font-size: 18px; cursor: pointer; }
#panel-close:hover { color: #fff; }
#panel h2 { font-size: 16px; margin-bottom: 2px; }
#panel .org { color: #7e8aa3; font-size: 11px; margin-bottom: 14px; }
#panel h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6f7a92; margin: 16px 0 6px; }
#panel .row { font-size: 12px; padding: 3px 0; border-bottom: 1px solid rgba(120,140,180,0.08); }
#panel .row .when { color: #6f7a92; font-variant-numeric: tabular-nums; margin-right: 8px; }
#panel .row .kind { color: #8ab4ff; margin-right: 6px; }
#panel .flare-cold { color: #4a5878; }
#panel .flare-warm { color: #ffb648; }
#panel .pill { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 10px; margin-left: 6px; }
.pill.b { background: rgba(56,224,176,0.15); color: #38e0b0; }
.pill.d { background: rgba(255,77,94,0.15); color: #ff7a86; }
.pill.s { background: rgba(154,164,186,0.15); color: #9aa4ba; }
#panel .note { color: #8b94a8; font-style: italic; font-size: 11px; margin-left: 8px; }
#panel .dream-realized { color: #9aa4ba; text-decoration: line-through; }
#panel .dream-active { color: #fff4c2; }

#hint { position: fixed; bottom: 12px; left: 0; right: 0; text-align: center; z-index: 10;
  font-size: 11px; color: #5c6680; pointer-events: none; }