.question-top-tools { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.question-top-tools .theme-toggle, .result-sound-controls .theme-toggle { width: 40px; height: 40px; border-radius: 50%; background: transparent; }
.sound-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; padding: 8px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--primary); cursor: pointer; }
.sound-toggle:hover { background: var(--primary-soft); }
.sound-toggle .icon { width: 20px; height: 20px; }
.sound-toggle .sound-off, .sound-toggle.is-muted .sound-on { display: none; }
.sound-toggle.is-muted .sound-off { display: block; }
.practice-goal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 20px 24px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--primary-soft); }
.practice-goal strong { display: block; font-size: 19px; color: var(--primary); }
.practice-goal span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.goal-achieved { background: linear-gradient(110deg, var(--primary-soft), var(--accent-soft)); border-color: var(--primary-border); }
.result-sound-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.game-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.score-circle strong.score-decimal { font-size: 38px; }
.game-correct { animation: game-pop 380ms ease-out; }
.game-incorrect { animation: game-miss 340ms ease-out; }
.game-passed .score-circle { animation: game-pop 600ms ease-out; }
@keyframes game-pop { 0% { transform: scale(.97); } 55% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes game-miss { 0%, 100% { transform: translateX(0); } 25%, 65% { transform: translateX(-3px); } 45%, 85% { transform: translateX(3px); } }
/* Only the question content moves. Header, progress and live ad siblings stay put.
   :has() cancels the effect immediately if an Auto ad enters this region. In
   browsers without :has(), these rules are ignored and navigation stays instant. */
@media (prefers-reduced-motion: no-preference) {
  .question-content.practice-question-leave:not(:has(.ad-space, .adsbygoogle, .google-auto-placed, iframe, [id^="google_ads_"], [id^="aswift_"])) {
    animation: question-leave 150ms ease-in both;
  }
  .question-content.practice-question-enter:not(:has(.ad-space, .adsbygoogle, .google-auto-placed, iframe, [id^="google_ads_"], [id^="aswift_"])) {
    animation: question-enter 240ms cubic-bezier(.22, .7, .3, 1) both;
  }
}
@keyframes question-leave {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-18px); }
}
@keyframes question-enter {
  from { opacity: 0; transform: translate(18px, 4px); }
  to { opacity: 1; transform: translate(0, 0); }
}
@media (max-width: 600px) {
  .question-top-tools { gap: 10px; }
  .sound-toggle, .question-top-tools .theme-toggle, .result-sound-controls .theme-toggle { width: 38px; height: 38px; }
  .practice-goal { padding: 18px; }
  .practice-goal strong { font-size: 17px; }
  .practice-goal span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-correct, .game-incorrect, .game-passed .score-circle { animation: none; }
  .game-confetti { display: none; }
}