/* ============================================================================
   Sigil overlay - the runes sit ON the plate, not around it.

   Every position and size is a percentage of .plate, so the whole layer
   scales with the medallion at any viewport width and stays locked to the
   engraved features underneath it.
   ========================================================================= */

.plate { position: relative; }

/* The overlay is inert; only the sigils themselves take pointer events, so
   nothing can ever intercept a click meant for the hidden hotspot. */
.sigil-layer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.sigil-layer .cell {
  position: absolute;
  margin: 0;
  translate: -50% -50%;
  pointer-events: auto;
  display: block;
  /* Sized in plate-relative units so the rune tracks the artwork. */
  width: var(--w);
  aspect-ratio: var(--ar, 1);
}
.sigil-layer .cell .glyph { width: 100%; height: 100%; }

/* The plate is warm bronze, so an unpowered rune needs to sit lighter than
   the demo's slate or it disappears into the stone. */
.sigil-layer .glyph-base [data-layer] > * { stroke: rgba(214, 198, 160, .30); }
.sigil-layer .glyph-base [data-fill="core"] { fill: rgba(214, 198, 160, .30); }

/* Heavier than the demo tier: these strokes compete with dense engraving
   underneath, so they need more presence to read as ignition. */
.sigil-layer .glyph-trace [data-layer] > * {
  stroke-width: calc(1.5px + 2.3px * var(--charge));
}
.sigil-layer .glyph-trace {
  filter:
    drop-shadow(0 0 calc(1px + 3px  * var(--charge)) var(--core))
    drop-shadow(0 0 calc(3px + 16px * var(--charge)) var(--glow))
    drop-shadow(0 0 calc(8px + 40px * var(--charge)) var(--ambient));
}

/* The hotspot must stay above the overlay. */
.plate .watcher { z-index: 3; }

/* ---- binary field, bottom right ---------------------------------------- */
.binary {
  position: absolute;
  right: 3%; bottom: 6%;
  z-index: 2;
  pointer-events: auto;
  display: grid;
  gap: 0 .35em;
  grid-auto-flow: row;
  font-family: 'Courier New', Courier, monospace;
  /* Sized against the PLATE, not the viewport. --plate-w is published by
     mountSigils() via a ResizeObserver; without this the field is sized in vw
     and balloons relative to the artwork whenever the image renders smaller.
     (container-type: inline-size would be the tidy answer, but it collapses
     the plate to zero width inside a shrink-to-fit flex column.) */
  font-size: clamp(5px, calc(var(--plate-w, 1000px) * 0.0085), 13px);
  line-height: 1.5;
  letter-spacing: .18em;
  color: var(--glow);
  user-select: none;
  /* Charge-gated exactly like the runes: a barely-there ghost at rest, so it
     reads as engraving rather than as a lit widget sitting on the plate. */
  opacity: calc(.10 + .90 * var(--charge));
  text-shadow:
    0 0 calc(1px + 4px  * var(--charge)) var(--core),
    0 0 calc(2px + 14px * var(--charge)) var(--glow),
    0 0 calc(4px + 26px * var(--charge)) var(--ambient);
  transition: opacity .18s linear, text-shadow .18s linear;
}
.binary b { font-weight: normal; }
/* A freshly flipped bit flashes to the core colour, then decays. */
.binary .flip {
  color: var(--core);
  animation: bitflip .5s ease-out forwards;
}
@keyframes bitflip { from { opacity: 1; } to { opacity: .45; } }

@media (max-width: 620px) {
  /* At phone width the plate is barely 340px - overlays become noise. */
  .sigil-layer, .binary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .binary .flip { animation: none; }
}