/* Broadcast motion layer for /play/ — loaded after ballpark.css.
 * Mirrors the Unity client's beats: answer reveal hold, score count-up on return,
 * hit impact, verdict slam, VS opening and a letter-drop result.
 * Everything that moves sits behind prefers-reduced-motion: no-preference. */

/* Result title was invisible: a display-font gradient fill left -webkit-text-fill-color transparent. */
#resultTitle { -webkit-text-fill-color: currentColor; }

/* ---- Answer reveal (held ~1s before the at-bat replay) ---------------------------- */
.answer-btn { position: relative; }
.answer-btn.correct::after,
.answer-btn.wrong::after {
  position: absolute; right: 12px; top: 50%;
  display: grid; place-items: center; width: 24px; height: 24px; margin-top: -12px;
  border-radius: 50%; font: 900 14px/1 system-ui, sans-serif;
}
.answer-btn.correct::after { content: '✓'; background: #173e28; color: #d9ef9e; }
.answer-btn.wrong::after { content: '✕'; background: #4c2420; color: #f4b296; }

@media (prefers-reduced-motion: no-preference) {
  .answer-btn.correct { animation: reveal-correct .55s cubic-bezier(.2, 1.5, .4, 1) both, reveal-ring 1s ease-out .12s 2; }
  .answer-btn.wrong { animation: reveal-wrong .5s cubic-bezier(.36, .07, .19, .97) both; }
  .answer-btn.unselected { transition: opacity .3s, filter .3s; filter: saturate(.4); }
  .answer-btn.correct::after, .answer-btn.wrong::after { animation: mark-pop .38s cubic-bezier(.2, 1.7, .4, 1) .1s both; }
  #answers.revealing ~ #stampOverlay .stamp-text,
  #stampOverlay.show .stamp-text { animation: verdict-slam .42s cubic-bezier(.2, 1.5, .35, 1) both; }
}
@keyframes reveal-correct { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes reveal-ring { from { outline-offset: 2px; outline-color: #dceaacff; } to { outline-offset: 11px; outline-color: #dceaac00; } }
@keyframes reveal-wrong {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px) rotate(-1deg); } 30% { transform: translateX(8px) rotate(1deg); }
  45% { transform: translateX(-6px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); }
}
@keyframes mark-pop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
@keyframes verdict-slam {
  0% { opacity: 0; transform: scale(1.9); letter-spacing: .25em; }
  60% { opacity: 1; transform: scale(.95); letter-spacing: 1px; }
  100% { opacity: 1; transform: scale(1); letter-spacing: 1px; }
}

/* ---- Score count-up when the replay hands back to the quiz ------------------------- */
#homeScore, #awayScore { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .score-pop { animation: score-pop .65s cubic-bezier(.2, 1.6, .4, 1) both; }
  .pips-pop { animation: pips-pop .6s ease-out both; }
}
@keyframes score-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.65); color: #fff; text-shadow: 0 0 18px #e4efb9; }
  100% { transform: scale(1); }
}
@keyframes pips-pop { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.18); filter: brightness(1.8); } 100% { transform: scale(1); filter: brightness(1); } }

/* ---- 3D replay impact ---------------------------------------------------------- */
.flight-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; }
.flight-flash.hit { background: radial-gradient(circle at 50% 58%, #fffbe6 0%, #ffe7a3cc 28%, #ffd16a33 55%, transparent 75%); }
.flight-flash.miss { background: radial-gradient(ellipse at center, transparent 42%, #b3261eaa 100%); }
@media (prefers-reduced-motion: no-preference) {
  .flight-flash.hit.go { animation: flash-hit .5s ease-out both; }
  .flight-flash.miss.go { animation: flash-miss .9s ease-out both; }
  .flight-active[data-judgement="result"] .flight-call { animation: call-slam .55s cubic-bezier(.2, 1.5, .35, 1) both; }
  .flight-active[data-judgement="result"] .flight-call[data-kind="strikeout"] { animation: call-drop .5s cubic-bezier(.3, 1.3, .5, 1) both; }
  .flight-active[data-judgement="result"] .flight-call::before { animation: call-ring .75s ease-out .08s both; }
}
@keyframes flash-hit { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flash-miss { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.flight-call[data-kind="strikeout"] { color: #ffc2a8; }
.flight-call::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px;
  border: 3px solid currentColor; border-radius: 50%; opacity: 0; pointer-events: none;
}
@keyframes call-slam {
  0% { opacity: 0; transform: scale(2.4); letter-spacing: .3em; filter: blur(3px); }
  55% { opacity: 1; transform: scale(.94); letter-spacing: .02em; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes call-drop {
  0% { opacity: 0; transform: translateY(-60px) scale(1.3); }
  60% { opacity: 1; transform: translateY(6px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes call-ring { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(3.2); } }

/* ---- VS opening: cards meet, VS slams, PLAY BALL!, then the field opens ---------- */
/* Above both cards: in DOM order the ring would cover the left card but slip under the right. */
#vsIntro .team-faceoff > b { position: relative; z-index: 2; }
#vsIntro .team-faceoff > b::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px;
  border: 3px solid #f0dc9a; border-radius: 50%; opacity: 0; pointer-events: none;
}
#vsIntro .vs-call {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: -48px; z-index: 3; pointer-events: none;
  display: grid; place-items: center; opacity: 0;
}
#vsIntro .vs-call span {
  padding: 14px 30px; border-radius: 10px; background: #0c2c36f2; border: 1px solid #e4efb9aa;
  box-shadow: 0 16px 50px #001a2caa; color: #f2e6b8; font: 900 clamp(34px, 9vw, 54px)/1 'Bungee', system-ui, sans-serif;
  letter-spacing: 1px; white-space: nowrap;
}
#vsIntro::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 48%, #fff6d6ee, #ffe3a066 40%, transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  #vsIntro.vs-hit .team-faceoff > b { animation: vs-slam .5s cubic-bezier(.2, 1.6, .4, 1) both; }
  #vsIntro.vs-hit .team-faceoff > b::after { animation: call-ring .7s ease-out .1s both; }
  #vsIntro.vs-hit .team-faceoff > div:first-child img { animation: team-nudge-left .35s ease-out both; }
  #vsIntro.vs-hit .team-faceoff > div:last-child img { animation: team-nudge-right .35s ease-out both; }
  #vsIntro.vs-call .vs-call { animation: play-ball-in .5s cubic-bezier(.2, 1.5, .35, 1) both; }
  #vsIntro.vs-call::after { animation: flash-hit .45s ease-out both; }
  #vsIntro.vs-exit .team-faceoff > div:first-child { animation: exit-left .35s cubic-bezier(.5, 0, .9, .5) both; }
  #vsIntro.vs-exit .team-faceoff > div:last-child { animation: exit-right .35s cubic-bezier(.5, 0, .9, .5) both; }
  #vsIntro.vs-exit .vs-call { animation: play-ball-out .3s ease-in both; }
  #vsIntro.vs-exit { animation: fade-away .35s ease-in .05s both; }
}
@keyframes vs-slam { 0% { transform: scale(2.6) rotate(-10deg); opacity: 0; } 60% { transform: scale(.9) rotate(0); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes team-nudge-left { 0% { transform: translateX(0); } 40% { transform: translateX(-8px); } 100% { transform: translateX(0); } }
@keyframes team-nudge-right { 0% { transform: translateX(0); } 40% { transform: translateX(8px); } 100% { transform: translateX(0); } }
@keyframes play-ball-in { 0% { opacity: 0; transform: scale(2) rotate(-6deg); } 60% { opacity: 1; transform: scale(.94) rotate(-2deg); } 100% { opacity: 1; transform: scale(1) rotate(-2deg); } }
@keyframes play-ball-out { to { opacity: 0; transform: scale(.85) rotate(-2deg); } }
@keyframes exit-left { to { transform: translateX(-120%); opacity: 0; } }
@keyframes exit-right { to { transform: translateX(120%); opacity: 0; } }
@keyframes fade-away { to { opacity: 0; } }

/* Game board arrives after the opening. */
@media (prefers-reduced-motion: no-preference) {
  #gameArea.game-enter #hud { animation: hud-drop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
  #gameArea.game-enter #questionCard { animation: card-rise .55s cubic-bezier(.16, 1, .3, 1) .1s both; }
}
@keyframes hud-drop { from { transform: translateY(-40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes card-rise { from { transform: translateY(24px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Result: letter drop, final score count-up, winner/loser, confetti ------------- */
.result-letter { display: inline-block; white-space: pre; }
#resultScore {
  order: 1; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 10px;
  font: 900 44px/1 'Bungee', system-ui, sans-serif; color: #f2ecd7;
}
#resultScore b { min-width: 1.2em; text-align: center; font: inherit; }
#resultScore b:first-child { color: #e4efb9; }
#resultScore b:last-child { color: #f0caa5; }
#resultScore i { font: 700 14px/1 system-ui, sans-serif; letter-spacing: 2px; color: #b8c7a3; font-style: normal; }
#resultScreen[data-outcome='loss'] .result-teams > div:first-child img,
#resultScreen[data-outcome='win'] .result-teams > div:last-child img { filter: grayscale(.7) brightness(.72); transition: filter .6s .5s; }
#resultScreen { position: relative; }
.result-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit; }
.result-confetti span { position: absolute; top: -12px; left: var(--x); width: 7px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; }
#resultScreen > :not(.result-confetti) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  #resultScreen.show { animation: card-rise .45s cubic-bezier(.16, 1, .3, 1) both; }
  #resultScreen.show .result-letter { animation: letter-drop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.2s + var(--i) * .06s); }
  #resultScreen.show[data-outcome='loss'] .result-letter { animation-name: letter-sag; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  #resultScreen.show[data-outcome='win'] .result-teams > div:first-child img { animation: winner-hop .9s ease-in-out .9s infinite alternate; }
  #resultScreen.show[data-outcome='loss'] .result-teams > div:last-child img { animation: winner-hop .9s ease-in-out .9s infinite alternate; }
  #resultScreen.show #resultScore b.bump { animation: score-pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
  .result-confetti span { animation: confetti-fall var(--t) linear var(--d) forwards; }
}
@keyframes letter-drop { 0% { opacity: 0; transform: translateY(-60px) scale(1.6); } 60% { opacity: 1; transform: translateY(4px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes letter-sag { 0% { opacity: 0; transform: translateY(-40px); } 100% { opacity: 1; transform: translateY(3px); } }
@keyframes winner-hop { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 1; transform: translate(var(--drift), 640px) rotate(var(--spin)); }
}