/* PULSE — a living Earth */
:root{
  --bg:#03050c;
  --ink:#e9edf4;
  --dim:#98a1b3;
  --faint:#5d6678;
  --cyan:#6bd3ff;
  --amber:#ffb45c;
  --red:#ff7a6b;
  --line:rgba(233,237,244,.14);
  --line-soft:rgba(233,237,244,.07);
  --glass:rgba(8,12,22,.52);
  --display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:var(--display);color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.faint{color:var(--faint)}
.hidden{opacity:0;pointer-events:none}

#stage{position:fixed;inset:0}
#stage canvas{display:block;cursor:grab}
#stage canvas:active{cursor:grabbing}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 55%, rgba(2,3,8,.55) 100%)}

/* ---- brand ---- */
#brand{position:fixed;top:22px;left:26px;z-index:5}
#brand .logo{font-size:20px;font-weight:250;letter-spacing:.46em;display:flex;align-items:center;gap:12px}
#brand .logo .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 12px rgba(107,211,255,.9);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
#brand .tag{margin-top:5px;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim)}

/* ---- chips / hud ---- */
#hud-right{position:fixed;top:20px;right:22px;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);color:var(--dim);
  font-family:var(--display);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:9px 14px;border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:color .25s ease,border-color .25s ease,background .25s ease}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--faint);transition:all .25s ease}
.chip:hover{color:var(--ink);border-color:rgba(233,237,244,.3)}
.chip.on{color:var(--ink);border-color:rgba(107,211,255,.45)}
.chip.on i{background:var(--cyan);box-shadow:0 0 10px rgba(107,211,255,.9)}
.chip.warn i{background:var(--amber);box-shadow:0 0 10px rgba(255,180,92,.9)}

/* ---- now bar ---- */
#nowbar{position:fixed;left:26px;bottom:20px;z-index:5;display:flex;align-items:baseline;gap:7px;
  font-size:11px;color:var(--dim);flex-wrap:wrap;max-width:70vw}
#nowbar .sep{color:var(--faint);font-size:9px;letter-spacing:.22em;text-transform:uppercase;margin-right:9px}
#nowbar .mono{font-size:12px;color:var(--ink)}

/* ---- hint ---- */
#hint{position:fixed;right:24px;bottom:20px;z-index:5;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);transition:opacity 1s ease}

/* ---- panel ---- */
#panel{position:fixed;top:88px;right:22px;z-index:8;width:308px;
  background:var(--glass);border:1px solid var(--line);border-radius:16px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:18px 18px 14px;transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
#panel.hidden{transform:translateX(14px)}
#p-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--dim);
  font-size:18px;cursor:pointer;padding:4px 8px}
#p-close:hover{color:var(--ink)}
#p-name{font-size:17px;font-weight:450;letter-spacing:.02em;padding-right:20px}
#p-coords{margin-top:3px;font-size:11px}
#panel .rows{margin-top:14px;border-top:1px solid var(--line-soft)}
#panel .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--line-soft)}
#panel .row span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
#panel .row b{font-size:12px;font-weight:400;color:var(--ink);text-align:right;font-family:var(--mono)}

/* ---- aircraft tooltip ---- */
#tip{position:fixed;z-index:9;pointer-events:none;background:rgba(6,10,18,.78);
  border:1px solid rgba(107,211,255,.35);border-radius:10px;padding:8px 11px;
  font-family:var(--mono);font-size:11px;line-height:1.5;transition:opacity .15s ease;
  backdrop-filter:blur(8px)}
#tip b{color:var(--cyan);font-weight:600}
#tip .faint{font-size:10px}

/* ---- intro ---- */
#intro{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;transition:opacity 1.6s ease;text-align:center;padding:0 5vw}
#intro.gone{opacity:0}
#intro h1{font-size:clamp(3.4rem,11vw,8.5rem);font-weight:200;letter-spacing:.30em;margin-right:-.30em;
  text-shadow:0 0 60px rgba(107,211,255,.25);animation:rise 1.8s cubic-bezier(.2,.7,.2,1) both}
#intro .sub{margin-top:8px;font-size:clamp(.9rem,1.8vw,1.15rem);font-weight:300;letter-spacing:.12em;color:var(--dim);
  animation:rise 1.8s .25s cubic-bezier(.2,.7,.2,1) both}
#intro .mini{margin-top:26px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);
  animation:rise 1.8s .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- mobile ---- */
@media (max-width:760px){
  #brand{top:16px;left:16px}
  #brand .logo{font-size:16px}
  #hud-right{top:12px;right:12px;left:12px;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:6px}
  .chips{gap:6px}
  .chip{padding:8px 10px;font-size:9px;letter-spacing:.14em}
  #panel{top:auto;bottom:0;left:0;right:0;width:100%;border-radius:18px 18px 0 0;
    max-height:52vh;overflow:auto;padding-bottom:24px}
  #panel.hidden{transform:translateY(16px)}
  #nowbar{left:14px;bottom:12px;font-size:10px;max-width:60vw}
  #hint{display:none}
}