/* Herald · Simon — the classic Simon Says disc: four 90° wedges
   arranged around a central hub. Idle wedges are dim; the one in play
   blazes to full saturation. Tones are tied to the hue so the disc
   reads even on a glance. Built from light — dark center stays clear
   on the additive display. */

.sm-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.sm-disc {
  width: min(540px, 88vh);
  height: min(540px, 88vh);
  max-width: 92%;
  max-height: 92%;
  filter: drop-shadow(0 0 28px rgba(0,0,0,0.35));
}

/* idle wedge — dim, saturated enough to read the hue */
.sm-wedge {
  cursor: pointer;
  transition: fill 90ms ease-out, filter 90ms ease-out, transform 90ms ease-out;
  transform-origin: 200px 200px;
}
.sm-w0 { fill: #6b1d24; stroke: #08020a; stroke-width: 6; }   /* red — top   (ArrowUp) */
.sm-w1 { fill: #1e2c66; stroke: #08020a; stroke-width: 6; }   /* blue — right (ArrowRight) */
.sm-w2 { fill: #7a5f10; stroke: #08020a; stroke-width: 6; }   /* yellow — bottom (ArrowDown) */
.sm-w3 { fill: #1f5a26; stroke: #08020a; stroke-width: 6; }   /* green — left  (ArrowLeft) */

/* lit — full saturation + glow */
.sm-w0.on {
  fill: #ff3344;
  filter: drop-shadow(0 0 18px rgba(255,80,90,0.85)) drop-shadow(0 0 38px rgba(255,80,90,0.45));
  transform: scale(1.015);
}
.sm-w1.on {
  fill: #4078ff;
  filter: drop-shadow(0 0 18px rgba(80,130,255,0.85)) drop-shadow(0 0 38px rgba(80,130,255,0.45));
  transform: scale(1.015);
}
.sm-w2.on {
  fill: #ffd633;
  filter: drop-shadow(0 0 18px rgba(255,214,80,0.85)) drop-shadow(0 0 38px rgba(255,214,80,0.45));
  transform: scale(1.015);
}
.sm-w3.on {
  fill: #2fcb4a;
  filter: drop-shadow(0 0 18px rgba(80,220,110,0.85)) drop-shadow(0 0 38px rgba(80,220,110,0.45));
  transform: scale(1.015);
}

.sm-disc.lose .sm-wedge {
  filter: drop-shadow(0 0 24px rgba(255,107,129,0.7));
}
.sm-disc.lose .sm-w0 { fill: #ff6b81; }
.sm-disc.lose .sm-w1 { fill: #ff6b81; }
.sm-disc.lose .sm-w2 { fill: #ff6b81; }
.sm-disc.lose .sm-w3 { fill: #ff6b81; }

/* Centre hub label — text overlay on top of the central dark circle.
   Positioned absolutely on the disc viewport (which is square). */
.sm-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32%;
  height: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  text-align: center;
}
.sm-round {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-primary, #fff);
  text-shadow: 0 0 14px rgba(255,255,255,0.18);
}
.sm-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  padding: 0 8px;
}
.sm-best {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, rgba(255,255,255,0.45));
}

.sm-hint {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.5));
}