/* ===== Qiros House Map (SVG) ===== */
.qh-map-host{
  width: 100%;
  min-height: 360px;
}

.qh-map{
  width: 100%;
  height: min(520px, 60vh);
  display:block;
}

.qh-edge{
  stroke: url(#edgeGrad);
  stroke-width: 0.55;
  opacity: 0.75;
}

.qh-label{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 3px;
  fill: rgba(235,246,255,0.78);
  text-anchor: middle;
  dominant-baseline: central;
  transform: translateY(6px);
  pointer-events:none;
}

.qh-halo{
  fill: none;
  stroke: rgba(160,225,255,0.0);
  stroke-width: 1.2;
  opacity: 0;
}

.qh-ring{
  fill: rgba(0,0,0,0.20);
  stroke: rgba(235,246,255,0.18);
  stroke-width: 0.8;
}

.qh-split{
  fill: none;
  stroke-width: 0.8;
  opacity: 0.95;
  /* dash array creates half-and-half arcs */
  stroke-dasharray: 11.3 11.3;
  transform-origin: center;
  transform: rotate(-90deg);
}

/* Role coloring */
.qh-node.role-amari .qh-core{ fill: rgba(190,170,255,0.82); }
.qh-node.role-amari .qh-split{
  stroke: rgba(190,170,255,0.62);
}
.qh-node.role-shared .qh-split{
  /* Shared nodes: we “fake” dual color by using the ring + core contrast.
     If you want true dual-color halves, I can upgrade to two arc paths per node. */
  stroke: rgba(160,225,255,0.40);
}

/* Active node halo pulse */
.qh-node.is-active .qh-halo{
  stroke: rgba(160,225,255,0.55);
  opacity: 1;
  animation: qhPulse 1.6s ease-in-out infinite;
}

@keyframes qhPulse{
  0%,100%{ stroke-width: 1.1; opacity: 0.65; }
  50%{ stroke-width: 1.9; opacity: 1; }
}

/* Shooting stars */
.qh-star{
  stroke: rgba(160,225,255,0.80);
  stroke-width: 0.85;
  stroke-linecap: round;
  filter: url(#qhGlow);
  opacity: 0.9;
}

.qh-node{
  pointer-events: all;
}

.qh-node .qh-ring,
.qh-node .qh-split,
.qh-node .qh-core,
.qh-node .qh-halo{
  pointer-events: all;
}

.qh-node.role-qiros .qh-core{ fill: rgba(80,170,255,0.85); }
.qh-node.role-shared .qh-core{ fill: rgba(235,246,255,0.55); }

.qh-node.role-qiros .qh-split{
  stroke: rgba(80,170,255,0.60);
}