/* ── Spell Accumulator ── */
/* A subtle row of the letters being spelled, low-centre on the viewport.
   Normal users see only the letters they've entered — un-pressed letters
   collapse away so the target word never leaks. When the dev console is active
   (.spell-acc--dev) the full candidate word(s) show with un-pressed letters
   dimmed in, karaoke-style. The opacity fade is a plain CSS transition, so the
   global reduced-motion clamp snaps it off for free. */
.spell-acc {
  position: fixed;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  z-index: var(--z-spell-hud);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.spell-acc--visible {
  opacity: 1;
}

.spell-acc__word {
  display: flex;
  gap: 0.14em;
  font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.spell-acc__letter {
  color: rgba(214, 228, 255, 0.92);
  text-shadow: 0 0 10px rgba(150, 185, 255, 0.45);
}
.spell-acc__letter--charge {
  color: rgba(255, 224, 150, 0.95);
  text-shadow: 0 0 10px rgba(255, 200, 110, 0.5);
}
/* Live count that stands in for the surplus letters once the row would overflow. */
.spell-acc__count {
  align-self: center;
  font-size: 0.8em;
  color: rgba(255, 224, 150, 0.95);
  text-shadow: 0 0 10px rgba(255, 200, 110, 0.5);
}

/* At the charge cap the surplus letters / count glow hotter and pulse, so it's
   clear further mashing does nothing — and it marks the overkill moment. */
.spell-acc__word--maxed .spell-acc__letter--charge,
.spell-acc__word--maxed .spell-acc__count {
  color: rgba(255, 200, 130, 1);
  animation: spell-acc-maxed 700ms ease-in-out infinite;
}
@keyframes spell-acc-maxed {
  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 170, 80, 0.5);
  }
  50% {
    text-shadow: 0 0 18px rgba(255, 150, 60, 0.95);
  }
}

/* Un-pressed letters: hidden from normal users, dimmed in for the dev view. */
.spell-acc__letter--empty {
  display: none;
}
.spell-acc--dev .spell-acc__letter--empty {
  display: inline;
  color: rgba(200, 214, 245, 0.3);
  text-shadow: none;
}

/* Dev view lists every candidate; the leading (deepest) one stands out. */
.spell-acc--dev .spell-acc__word {
  opacity: 0.65;
}
.spell-acc--dev .spell-acc__word--lead {
  opacity: 1;
}

/* A finished word brightens and pops briefly before it fades out. */
.spell-acc--complete .spell-acc__letter {
  color: rgba(236, 244, 255, 1);
  text-shadow: 0 0 14px rgba(170, 200, 255, 0.7);
}
.spell-acc--complete .spell-acc__word {
  animation: spell-acc-complete 260ms ease-out;
}
@keyframes spell-acc-complete {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}