/* =======================================================================
   BHAZAR — #guilds WebGL SACRED-GATE OVERRIDES  (css/guild-gate.css)
   -----------------------------------------------------------------------
   js/guild-gate.js renders the SAME sacred gate as the hero (gate-scene.js)
   into a <canvas> it inserts inside #guilds .constellation. This stylesheet
   ONLY hides the old flat-CSS constellation VISUALS that the WebGL now
   replaces, and turns the six guild buttons into light/transparent label
   chips that float OVER the glowing WebGL nodes — while staying clickable /
   hoverable so site.js still opens the product overlay.

   Loaded AFTER css/site.css so these rules win without touching site.css.
   Everything is transform/opacity only (60fps); no filter:blur added.

   GUARD: only applies once js/guild-gate.js succeeds and adds
   .guild-gate-on to the .constellation. On mobile / reduced-motion / no-WebGL
   the JS bails, the class is never added, and the original clean CSS
   constellation stays exactly as-is.
   ======================================================================= */

/* ---- 1. The WebGL canvas: fills the square .constellation box ---------- */
.constellation .guild-gate-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:2;              /* above .const-sacred(0)/.const-web(1), below nodes(4) */
  pointer-events:none;    /* the DOM node buttons own all interaction */
}

/* ---- 2. Hide the old CSS visuals the WebGL now replaces ---------------- */
/* Only when the WebGL gate is live (.guild-gate-on). The connector web/ring,
   the CSS sacred halo, and the central seal + glow are all drawn in WebGL now. */
.constellation.guild-gate-on .const-web,
.constellation.guild-gate-on .const-sacred,
.constellation.guild-gate-on .const-core-glow,
.constellation.guild-gate-on .const-logo,
.constellation.guild-gate-on .const-core-label{
  display:none !important;
}
/* keep .const-core in the tree (harmless) but make it invisible + inert */
.constellation.guild-gate-on .const-core{
  opacity:0 !important;
  pointer-events:none !important;
}

/* ---- 3. Labels: match the TOP hero gate EXACTLY ----------------------- */
/* The hero gate (gate-scene.js) renders plain SCREEN-SPACE labels — white name +
   muted status with an accent text-glow, NO chip, ALWAYS horizontal. The bottom
   must look identical.

   MECHANISM: guild-gate.js now PROJECTS each WebGL guild-node sprite to box
   pixels every frame and writes inline left/top on the matching .const-node
   (exactly like the hero projects to .gate-node). So JS OWNS the positions.
   We therefore KILL the CSS rotor + the per-node counter-rotation entirely:
     - the rotor must never rotate the labels (that tilt was the bug), and
     - each .const-node must be a plain translate(-50%,-50%) with NO rotation,
       so the WRITING stays perfectly HORIZONTAL at every orbit angle.
   These override site.css's .is-alive rotor/counter-rotate rules + the inline
   transform site.js writes on the rotor; the inline left/top JS writes wins over
   the .pos-* class positions on its own (inline beats class specificity). */
.constellation.guild-gate-on .const-rotor{
  transform:none !important;   /* JS drives label positions; rotor must not spin */
}
/* .const-node is a BOX centred on the projected glow (exactly like the hero's
   .gate-node: clamp-sized, translate(-50%,-50%)); JS writes its left/top to the
   glow centre. The text label then sits just BELOW the box — so the title hugs
   its colour blob, identical to the hero (no more floating-away titles). */
.constellation.guild-gate-on .const-node{
  z-index:4;                   /* stay above the canvas so hover/click land */
  width:clamp(54px,6.2vw,86px); height:clamp(54px,6.2vw,86px);
  transform:translate(-50%,-50%) !important;  /* NEVER rotated — horizontal text */
  transition:none !important;  /* JS sets left/top per frame; no lag/easing */
}
/* strip the disc/chip → plain text + glow, sitting just under the node box
   (= just under the glow), exactly like the hero's .gate-node__label. */
.constellation.guild-gate-on .guild-circle{
  position:absolute; left:50%; top:calc(50% + 18px);
  transform:translateX(-50%);
  width:auto;height:auto;min-width:0;
  border:0;border-radius:0;background:none;box-shadow:none;
  padding:0;gap:3px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.constellation.guild-gate-on .guild-circle:hover{
  background:none;border:0;box-shadow:none;transform:translateX(-50%) scale(1.06);
}
.constellation.guild-gate-on .const-node.guild-zoom .guild-circle{
  transform:translateX(-50%) scale(1.1) !important;border:0 !important;box-shadow:none !important;
}
/* name + status styled to mirror .gate-node__label (white Sora, accent glow) */
.constellation.guild-gate-on .gc-name{
  font-family:'Sora',sans-serif;font-weight:600;color:#fff;
  font-size:clamp(14px,1.35vw,18px);letter-spacing:0.02em;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,0.92), 0 0 10px rgba(0,0,0,0.7),
    0 0 16px color-mix(in srgb, var(--accent) 65%, transparent);
}
.constellation.guild-gate-on .gc-status{
  font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,0.82);
  font-size:clamp(8px,0.85vw,10px);letter-spacing:0.03em;
  text-shadow:0 1px 4px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.7);
}
/* the hero gate shows NO BEACHHEAD pill → hide it so the two gates match */
.constellation.guild-gate-on .const-node.beachhead .guild-circle::after{
  display:none !important;
}

/* ---- 4. Motion safety ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  /* JS bails on reduced-motion so .guild-gate-on is never added; this is a
     belt-and-braces no-op guard. */
  .constellation .guild-gate-canvas{display:none !important;}
}