/* Brain Spark — kid-friendly animations (paired with fx.js) */
.wrap{position:relative;z-index:1}

/* Floating emoji backdrop */
#fxBg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#fxBg span{position:absolute;bottom:-3rem;font-size:1.8rem;opacity:.28;animation:fxFloat linear infinite}
body.grade-adult #fxBg{display:none}
@keyframes fxFloat{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-55vh) rotate(18deg) translateX(14px)}100%{transform:translateY(-115vh) rotate(-14deg)}}

/* Confetti canvas */
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* Title + start screen */
h1{display:inline-block;animation:fxWiggle 4.5s ease-in-out infinite;transform-origin:50% 80%}
@keyframes fxWiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-4deg) scale(1.05)}92%{transform:rotate(4deg) scale(1.05)}95%{transform:rotate(-2deg)}}
#start:not(.hidden) h2{animation:fxDrop .6s cubic-bezier(.34,1.56,.64,1) both}
#start:not(.hidden) .grade{animation:fxIn .45s cubic-bezier(.34,1.56,.64,1) backwards}
#start:not(.hidden) .grade:nth-child(1){animation-delay:.05s}
#start:not(.hidden) .grade:nth-child(2){animation-delay:.10s}
#start:not(.hidden) .grade:nth-child(3){animation-delay:.15s}
#start:not(.hidden) .grade:nth-child(4){animation-delay:.20s}
#start:not(.hidden) .grade:nth-child(5){animation-delay:.25s}
#start:not(.hidden) .grade:nth-child(6){animation-delay:.30s}
#start:not(.hidden) .grade:nth-child(7){animation-delay:.35s}
.grade:active{transform:scale(.94)}
.grade.selected{animation:fxPop .4s cubic-bezier(.34,1.56,.64,1)}
#play:not(:disabled){animation:fxBreathe 2.2s ease-in-out infinite}
.btn:active,.choice:active{animation:none}
@keyframes fxBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes fxDrop{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fxPop{0%{transform:scale(.88)}60%{transform:scale(1.1)}100%{transform:scale(1)}}

/* Answer choices */
.choices:not(.hidden) .choice{animation:fxIn .5s cubic-bezier(.34,1.56,.64,1) backwards}
.choices:not(.hidden) .choice:nth-child(1){animation-delay:0s}
.choices:not(.hidden) .choice:nth-child(2){animation-delay:.08s}
.choices:not(.hidden) .choice:nth-child(3){animation-delay:.16s}
.choices:not(.hidden) .choice:nth-child(4){animation-delay:.24s}
.choice.picked{animation:fxPop .3s cubic-bezier(.34,1.56,.64,1)!important}
.choice.correct{animation:fxJelly .75s ease-out!important}
.choice.wrong{animation:fxShake .5s ease-in-out!important}
@keyframes fxIn{from{opacity:0;transform:translateY(22px) scale(.9)}to{opacity:1;transform:none}}
@keyframes fxJelly{0%{transform:scale(1)}25%{transform:scale(1.09,.94)}45%{transform:scale(.96,1.05)}65%{transform:scale(1.05,.98)}100%{transform:scale(1.02)}}
@keyframes fxShake{0%,100%{transform:translateX(0) scale(.98)}20%{transform:translateX(-9px) scale(.98)}40%{transform:translateX(8px) scale(.98)}60%{transform:translateX(-5px) scale(.98)}80%{transform:translateX(3px) scale(.98)}}

/* Between questions: old card whisks away left, new one slides in from the right */
.qfade{transition:opacity .38s ease-in,filter .38s ease-in,transform .38s ease-in}
.qfade.is-out{transform:translateX(-64px) scale(.95) rotate(-1.5deg)}
.qfade.fx-enter{animation:fxSlideIn .6s cubic-bezier(.34,1.4,.64,1)}
@keyframes fxSlideIn{0%{opacity:0;transform:translateX(72px) scale(.94) rotate(2deg)}60%{opacity:1}100%{opacity:1;transform:none}}

/* Progress dots */
#fxDots{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:2px 0 12px}
#fxDots i{display:block;width:11px;height:11px;border-radius:50%;background:#d6e4ff;transition:background .3s,transform .3s cubic-bezier(.34,1.56,.64,1)}
#fxDots i.cur{background:#7aa6ff;transform:scale(1.5);animation:fxDot 1.1s ease-in-out infinite}
#fxDots i.ok{background:#3ecf8e;animation:fxPop .45s cubic-bezier(.34,1.56,.64,1)}
#fxDots i.miss{background:#f5a373;animation:fxPop .45s cubic-bezier(.34,1.56,.64,1)}
body.grade-adult #fxDots i{background:#4a5a78}
body.grade-adult #fxDots i.cur{background:#7aa6ff}
body.grade-adult #fxDots i.ok{background:#3ecf8e}
body.grade-adult #fxDots i.miss{background:#f5a373}
@keyframes fxDot{0%,100%{box-shadow:0 0 0 0 rgba(122,166,255,.55)}50%{box-shadow:0 0 0 6px rgba(122,166,255,0)}}

/* Countdown */
#count.hurry{color:#ff6b6b!important;animation:fxHurry .6s ease-out}
@keyframes fxHurry{0%{transform:scale(1.5)}100%{transform:scale(1)}}

/* Answer reveal */
/* Reset instantly: a fading-out previous answer used to ghost over the next question. */
.ans:not(.show){transition:none!important}
.ans.show.ok .ans-mark{animation:fxStamp .7s cubic-bezier(.34,1.56,.64,1)}
.ans.show.miss .ans-mark{animation:fxWobble .8s ease-in-out}
.ans.show.ok .ansb{animation:fxPop .5s .15s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes fxStamp{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes fxWobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}

/* Streak toast */
#fxToast{position:fixed;left:50%;top:14%;transform:translate(-50%,-30px) scale(.6);opacity:0;pointer-events:none;z-index:70;
  background:linear-gradient(180deg,#ffd166,#ff9e5e);color:#5a2a00;font-weight:900;font-size:1.25rem;padding:12px 22px;border-radius:999px;
  box-shadow:0 6px 0 #d97a2a,0 12px 30px rgba(0,0,0,.2);white-space:nowrap}
#fxToast.show{animation:fxToast 1.8s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes fxToast{0%{opacity:0;transform:translate(-50%,-30px) scale(.6)}15%{opacity:1;transform:translate(-50%,0) scale(1.1)}25%{transform:translate(-50%,0) scale(1)}80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-20px) scale(.9)}}

/* End screen */
#end:not(.hidden) #endScore{animation:fxPop .6s .3s cubic-bezier(.34,1.56,.64,1) backwards}
#end:not(.hidden) #endCheer{animation:fxDrop .6s .5s ease-out backwards}
@keyframes fxTrophy{0%{transform:scale(0) rotate(-40deg)}60%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
@keyframes fxBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
#prizeBtn:not(:disabled):not(.btn-prize-locked){animation:fxBreathe 1.6s ease-in-out infinite}

/* Respect "reduce motion" */
@media (prefers-reduced-motion:reduce){
  #fxBg,#fxCanvas{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
}