/* ÆŠA — The Vault of Heaven star-map (js/skymap.js).
   Container reuses .dgm-layout/.dgm-stage/.dgm-panel from diagrams.css. */

#vault-of-heaven{
  padding:0; overflow:hidden;
  background:radial-gradient(ellipse at 50% 20%, rgba(20,22,38,.55), rgba(6,6,12,.92) 70%);
}
.sky-svg{ display:block; width:100%; height:auto; }

.sky-dust{ fill:#cdd6ec; opacity:.5; }
.sky-dust[style]{ animation:skytwinkle var(--tw,3s) ease-in-out infinite; animation-delay:var(--td,0s); }
@keyframes skytwinkle{ 0%,100%{ opacity:.18; } 50%{ opacity:.8; } }

.sky-quarter{
  fill:rgba(216,175,90,.42); font-family:var(--display); font-size:15px;
  letter-spacing:.34em; text-transform:uppercase;
}
.sky-cord{ stroke:rgba(140,150,190,.14); stroke-width:1; stroke-dasharray:2 7; }
.sky-dipper{ stroke:rgba(205,214,236,.45); stroke-width:1.2; stroke-linejoin:round; }
.sky-dipper-star{ fill:#dfe6f6; opacity:.85; }

.sky-node{ cursor:pointer; }
.sky-hit{ fill:transparent; }
.sky-glow{
  fill:var(--ember-hi); filter:drop-shadow(0 0 7px rgba(243,212,137,.85));
  transition:r .2s;
}
.sky-glow[style]{ animation:skytwinkle var(--tw,3s) ease-in-out infinite; }
.sky-core{ fill:#fff8e6; }
.sky-node:hover .sky-glow, .sky-node.on .sky-glow{
  filter:drop-shadow(0 0 14px rgba(243,212,137,.98)); animation:none; opacity:1;
}
.sky-node.on .sky-glow{ stroke:var(--ember-hi); stroke-width:1.4; }
.sky-label{
  fill:var(--ash); font-family:var(--display); font-size:14px; letter-spacing:.05em;
  paint-order:stroke; stroke:rgba(6,6,12,.9); stroke-width:3px;
  opacity:.7; transition:opacity .2s, fill .2s; pointer-events:none;
}
.sky-node:hover .sky-label, .sky-node:focus-visible .sky-label, .sky-node.on .sky-label{
  opacity:1; fill:var(--ember-hi);
}
.sky-node:focus-visible{ outline:none; }
.sky-node:focus-visible .sky-core{ stroke:var(--ember-hi); stroke-width:2; }

#sky-panel .sky-star{
  font-family:var(--display); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--flame);
}
#sky-panel h3{ margin:.3rem 0 .6rem; color:var(--ember); font-size:1.12rem; }

@media (prefers-reduced-motion:reduce){
  .sky-dust[style], .sky-glow[style]{ animation:none; opacity:.6; }
}
@media (max-width:560px){
  .sky-quarter{ font-size:19px; } .sky-label{ font-size:17px; }
}

/* self-contained layout (mythology does not load diagrams.css) */
.sky-layout{
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
  gap:2.6rem; align-items:center; margin-top:2.4rem;
}
.sky-stage{ min-width:0; }
#sky-panel{
  position:relative; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(18,18,30,.92), rgba(8,8,14,.95));
  padding:1.7rem 1.8rem; min-height:360px; box-shadow:0 30px 60px -40px rgba(0,0,0,.8);
}
.sky-hint{ margin-top:1.2rem; }
@media (max-width:900px){
  .sky-layout{ grid-template-columns:1fr; gap:1.8rem; }
  .sky-stage{ max-width:560px; margin:0 auto; width:100%; }
  #sky-panel{ min-height:0; }
}