:root{
  --bg0:#05070c;
  --bg1:#070a12;
  --text:#eef4ff;
  --muted:rgba(238,244,255,.6);

  --live:#38ff9b;
  --building:#ffb23a;
  --idea:#cfd6e6;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg1),var(--bg0));
}

.bg{
  position:fixed;inset:0;
  background:
    radial-gradient(900px 700px at 30% 30%, rgba(86,215,255,.12), transparent),
    radial-gradient(900px 700px at 70% 70%, rgba(180,107,255,.10), transparent);
}

.grain{
  position:fixed;inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.05;
  transform:rotate(12deg);
  pointer-events:none;
}

.topbar{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
  z-index:10;
}

.brand{display:flex;align-items:center;gap:12px}
.logoSvg{
  width:42px;height:42px;
  filter:drop-shadow(0 0 18px rgba(86,215,255,.6));
}

.brandName{
  font-size:22px;
  font-weight:800;
  letter-spacing:.6px;
}
.brandTag{
  font-size:12px;
  color:var(--muted);
}

.legend{display:flex;gap:10px}
.pill{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.pill i{width:10px;height:10px;border-radius:50%}
.pill.live i{background:var(--live);box-shadow:0 0 12px var(--live)}
.pill.building i{background:var(--building);box-shadow:0 0 12px var(--building)}
.pill.idea i{background:var(--idea);box-shadow:0 0 12px var(--idea)}

.stage{
  position:absolute;inset:0;
  padding-top:80px;
}

#fx,#tree{
  position:absolute;inset:0;
  width:100%;height:100%;
}

/* Cursor UX for pan */
#tree.grab { cursor: grab; }
#tree.grabbing { cursor: grabbing; }

/* Tooltip */
.tooltip{
  position:fixed;
  background:rgba(5,7,12,.75);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
  border-radius:12px;
  padding:12px;
  max-width:260px;
  pointer-events:none;
  z-index:30;
}
.tt-title{font-weight:800}
.tt-meta{font-size:12px;color:var(--muted);margin-top:4px}
.tt-links{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.tt-links a{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:white;text-decoration:none;
  pointer-events:auto;
}

/* Footer */
.footer{
  position:fixed;bottom:0;left:0;right:0;
  display:flex;justify-content:space-between;
  padding:12px 24px;
  font-size:12px;
  color:var(--muted);
  z-index:10;
}

/* --- GEM ANIMATIONS (Reactive / Alive) --- */
@keyframes pulseLive {
  0% { opacity: .88; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
  100% { opacity: .88; transform: scale(1); }
}
@keyframes pulseBuild {
  0% { opacity: .78; transform: scale(1); }
  50% { opacity: .98; transform: scale(1.045); }
  100% { opacity: .78; transform: scale(1); }
}
@keyframes pulseIdea {
  0% { opacity: .58; transform: scale(1); }
  50% { opacity: .80; transform: scale(1.02); }
  100% { opacity: .58; transform: scale(1); }
}

.gem-live { animation: pulseLive 1.9s ease-in-out infinite; transform-origin: center; }
.gem-building { animation: pulseBuild 2.4s ease-in-out infinite; transform-origin: center; }
.gem-idea { animation: pulseIdea 3.2s ease-in-out infinite; transform-origin: center; }

@media (max-width: 720px){
  .brandName{font-size:18px}
}