/* =====================================================
   stage-lights.css — 💡 Stage Lights Pattern (Abby)

   Loaded after css/style.css and css/kid-games.css, both of which already own
   what this sheet deliberately does not touch: the paper card, .kg-choices'
   30px gutters, .kg-target's 57px minimum and 18px hit slop, the .kg-hint
   glow, the focus ring, and the global prefers-reduced-motion flattening at
   style.css:559. No @media (prefers-reduced-motion) rule is added here — that
   is handled once, globally, for CSS; the JS-driven half is the
   .kg-stage-lights-still class the game adds from ctx.reducedMotion.

   Every class is prefixed kg-stage-lights- so six per-game sheets on one page
   cannot collide, and nothing here can reach the reader or the arcade.

   The colour of a light is never the only way to tell it apart: the pad also
   carries its own instrument icon, its own printed word and its own pitch.
   These hexes are therefore decoration, not information.
   ===================================================== */

.kg-stage-lights { width: 100%; }

.kg-stage-lights-marquee {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-align: center;
  margin-top: -6px;
}

/* ---------------- The stage strip ----------------
   Six round dots and one lamp per light in the current pattern: how far
   through the show she is, and how long this pattern is, both countable and
   with nothing to read. It duplicates what #sl-msg already says out loud, so
   the whole strip is aria-hidden in the markup. */
.kg-stage-lights-stage {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #2b2550, #443a7e);
  box-shadow: var(--shadow);
}

.kg-stage-lights-rounds { display: flex; gap: 10px; }
.kg-stage-lights-round-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .24);
}
/* Rounds already in the show. Amber on deep violet clears 4.5:1. */
.kg-stage-lights-round-on { background: #ffd166; }
/* Where she is now — a ring, not a pulse: no blinking anywhere on this page. */
.kg-stage-lights-round-now {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .3);
}

.kg-stage-lights-beats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; min-height: 12px;
}
.kg-stage-lights-beat {
  width: 24px; height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .22);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
/* Lights she has played back correctly. */
.kg-stage-lights-beat-on { background: #7ef0dd; }
/* The light the stage is playing right now. */
.kg-stage-lights-beat-cue { background: #fff; transform: scaleY(1.7); }
.kg-stage-lights-still .kg-stage-lights-beat-cue { transform: none; }

.kg-stage-lights-msg { font-weight: 700; }

/* ---------------- The four lights ----------------
   .kg-target sizes and spaces these already; this only sets how wide a pad
   is allowed to get and what lives inside it. The card stays white so the
   printed word keeps var(--ink) contrast — the colour lives in the lamp. */
.kg-stage-lights-pads { margin-top: 2px; }

.kg-stage-lights-pad {
  width: clamp(104px, 21vw, 150px);
  min-height: calc(var(--kg-target) + 56px);
  gap: 10px;
  background: #fff;
}

.kg-stage-lights-lamp {
  width: clamp(64px, 13vw, 86px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kg-stage-lights-hue, #8d8aa8);
  border: 4px solid rgba(255, 255, 255, .9);
  /* Unlit is a real state, not just "less bright": drained of colour and set
     back, so lit vs unlit survives a greyscale or colour-blind reading. */
  filter: saturate(.35) brightness(1.18);
  opacity: .66;
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .16);
  transition: opacity .18s var(--ease), filter .18s var(--ease), box-shadow .18s var(--ease);
}

.kg-stage-lights-icon {
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  line-height: 1;
  transition: transform .18s var(--ease);
}

.kg-stage-lights-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
}

/* Lit — during playback, and only through .kg-stage-lights-lit. The pad also
   takes the shared .kg-hint glow, so "this one" looks identical whether the
   stage is showing the pattern or the scaffold is pointing at an answer. */
.kg-stage-lights-pad.kg-stage-lights-lit .kg-stage-lights-lamp {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .6),
              0 0 26px 8px var(--kg-stage-lights-hue, #8d8aa8);
}
.kg-stage-lights-pad.kg-stage-lights-lit .kg-stage-lights-icon { transform: scale(1.22); }
/* Reduced motion: the icon stops growing, the lit/unlit change stays. The
   signal is never what gets removed. */
.kg-stage-lights-still .kg-stage-lights-pad.kg-stage-lights-lit .kg-stage-lights-icon {
  transform: none;
}

/* Hue tokens. Four hues that also differ in lightness, so they stay four
   distinct greys if colour drops out entirely. */
.kg-stage-lights-rose   { --kg-stage-lights-hue: #d81b60; }
.kg-stage-lights-gold   { --kg-stage-lights-hue: #f6a821; }
.kg-stage-lights-blue   { --kg-stage-lights-hue: #2a8ff0; }
.kg-stage-lights-violet { --kg-stage-lights-hue: #6a2fc9; }

/* While the stage is playing, the pads are aria-disabled and the click
   handler ignores them; this stops the press-down animation so they do not
   look like they took an answer. */
.kg-stage-lights-pads[data-kg-locked="true"] .kg-stage-lights-pad { cursor: default; }
.kg-stage-lights-pads[data-kg-locked="true"] .kg-stage-lights-pad:active { transform: none; }

/* ---------------- Replay ----------------
   Always visible, always enabled, unlimited, and free. */
.kg-stage-lights .kg-replay {
  grid-auto-flow: column;
  gap: 10px;
  align-items: center;
  font-size: 1.05rem;
}
.kg-stage-lights .kg-replay > span:first-child { font-size: 1.35rem; }
/* The idle nudge after HINT_AFTER_MS — a steady ring, never a blink. */
.kg-stage-lights-nudge {
  box-shadow: 0 0 0 4px var(--accent-2), var(--shadow);
}

/* ---------------- Breakpoints (only the ones style.css already uses) ------ */
@media (hover: hover) {
  .kg-stage-lights-pad:hover .kg-stage-lights-lamp { opacity: .85; }
}

@media (max-width: 560px) {
  /* Two by two rather than a stray fourth pad on its own line. The gutter is
     still .kg-choices' own. */
  .kg-stage-lights-pads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kg-stage-lights-pad { width: auto; }
  .kg-stage-lights-stage { padding: 12px 14px; }
}

@media (max-width: 360px) {
  .kg-stage-lights-round-dot { width: 13px; height: 13px; }
  .kg-stage-lights-beat { width: 20px; }
  .kg-stage-lights-marquee { font-size: .92rem; }
}

@media (min-width: 700px) {
  .kg-stage-lights-stage { max-width: 560px; }
}