/* Premium pronunciation button + juicy audio affordances */
.flj-say {
  border-color: rgba(255, 107, 157, 0.32) !important;
  background:
    radial-gradient(ellipse 80% 80% at 30% 20%, rgba(255, 107, 157, 0.18), transparent 55%),
    linear-gradient(145deg, rgba(255, 107, 157, 0.14), rgba(0, 245, 212, 0.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s !important;
}

.flj-say:hover {
  border-color: rgba(0, 245, 212, 0.5) !important;
  color: var(--mint, #00f5d4) !important;
  box-shadow:
    0 0 22px rgba(0, 245, 212, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: scale(1.08);
}

.flj-say.flj-saying {
  border-color: rgba(255, 107, 157, 0.75) !important;
  color: var(--sakura, #ff6b9d) !important;
  box-shadow:
    0 0 32px rgba(255, 107, 157, 0.4),
    0 0 48px rgba(0, 245, 212, 0.12);
  animation: fljSayPulse 0.85s ease-in-out infinite;
}

.flj-say.flj-saying::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(0, 245, 212, 0.35);
  animation: fljSayRing 1.2s ease-out infinite;
  pointer-events: none;
}

.flj-say .flj-say-wave--1 { opacity: 0.45; }
.flj-say .flj-say-wave--2 { opacity: 0.25; }
.flj-say.flj-saying .flj-say-wave--1 {
  animation: fljWaveBar 0.55s ease-in-out infinite;
}
.flj-say.flj-saying .flj-say-wave--2 {
  animation: fljWaveBar 0.55s ease-in-out infinite 0.12s;
}

@keyframes fljSayPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

@keyframes fljSayRing {
  0%   { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes fljWaveBar {
  0%, 100% { opacity: 0.3; stroke-width: 1.4; }
  50%      { opacity: 1; stroke-width: 2.2; }
}

.kana-quiz-char .flj-say,
.kana-quiz-char + .flj-say {
  margin: 12px auto 0;
}

.flj-say--lg.flj-saying {
  box-shadow:
    0 0 40px rgba(255, 107, 157, 0.45),
    0 0 60px rgba(0, 245, 212, 0.15);
}

/* Hub page speaker buttons (flashcards, phrases, sentences) */
.fc-audio-btn,
.sn-audio-btn,
.ph-audio-btn,
.review-audio-btn {
  font-size: 0 !important;
  color: var(--sakura, #ff6b9d) !important;
  border-color: rgba(255, 107, 157, 0.35) !important;
  background:
    radial-gradient(ellipse 90% 90% at 30% 25%, rgba(255, 107, 157, 0.2), transparent 60%),
    rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.fc-audio-btn::before,
.sn-audio-btn::before,
.ph-audio-btn::before,
.review-audio-btn::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  background: currentColor;
  clip-path: polygon(0 30%, 38% 30%, 62% 10%, 62% 90%, 38% 70%, 0 70%);
  border-radius: 1px;
}

.fc-audio-btn:hover,
.sn-audio-btn:hover,
.ph-audio-btn:hover,
.review-audio-btn:hover {
  color: var(--mint, #00f5d4) !important;
  border-color: rgba(0, 245, 212, 0.45) !important;
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.2);
}

.fc-audio-btn.flj-saying,
.sn-audio-btn.flj-saying,
.ph-audio-btn.flj-saying {
  animation: fljSayPulse 0.85s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .flj-say.flj-saying,
  .flj-say.flj-saying::after,
  .flj-say.flj-saying .flj-say-wave--1,
  .flj-say.flj-saying .flj-say-wave--2 {
    animation: none !important;
  }
}