/* Swimming Strokes — game-specific accent + water-themed chrome.
   Chrome (topbar/overlays/buttons) comes from ../_shared/theme.css. */
:root {
  --sm-accent: hsl(195 80% 45%);
  --sm-accent-dark: hsl(195 84% 34%);
}

.sm-stage { background: hsl(195 80% 55%); }

.sm-actionbtn {
  background: linear-gradient(135deg, hsl(195 80% 52%), hsl(200 84% 40%));
  box-shadow: 0 8px 0 hsl(200 84% 28%), var(--sm-shadow-soft);
}
.sm-actionbtn:active, .sm-actionbtn.sm-pressed {
  box-shadow: 0 2px 0 hsl(200 84% 28%), var(--sm-shadow-soft);
}
.sm-actionbtn:disabled { background: hsl(200 15% 75%); box-shadow: none; }

/* Phase chips reuse .sm-choice-btn from theme.css; tint the "active next" one.
   The active chip gets a glowing ring + gentle pulse to signal "tap me next". */
.sm-choice-btn.sm-active {
  background: hsl(195 80% 52%);
  color: #fff;
  box-shadow: 0 6px 0 hsl(195 84% 32%), 0 0 0 6px hsl(195 80% 60% / 0.35), var(--sm-shadow-soft);
  transform: translateY(-3px);
  animation: ss-chip-pulse 0.9s ease-in-out infinite;
}
.sm-choice-btn.sm-correct-flash { background: hsl(142 66% 45%); color: #fff; box-shadow: 0 6px 0 hsl(142 66% 32%); }
.sm-choice-btn.sm-wrong-flash { background: hsl(0 70% 65%); color: #fff; box-shadow: 0 6px 0 hsl(0 70% 45%); }
@keyframes ss-chip-pulse {
  0%, 100% { transform: translateY(-3px) scale(1); }
  50% { transform: translateY(-6px) scale(1.07); }
}

/* Hint arrow that points at the correct chip when a child is struggling */
.ss-hint-arrow {
  position: absolute; left: 50%; bottom: 7.5rem; translate: -50% 0;
  font-size: 1.8rem; pointer-events: none; z-index: 7;
  animation: ss-arrow-bob 0.6s ease-in-out infinite;
}
@keyframes ss-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-choice-btn.sm-active { animation: none; }
  .ss-hint-arrow { animation: none; }
}
.sm-root.sm-reduced-motion .sm-choice-btn.sm-active { animation: none; }
.sm-root.sm-reduced-motion .ss-hint-arrow { animation: none; }