/* ===== Crazy mode: motion, confetti & sound ===== */
:root{--bounce:cubic-bezier(.34,1.56,.64,1)}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
@keyframes qIn{from{opacity:0;transform:translateY(26px) scale(.95) rotate(-1.5deg)}}
@keyframes qOut{to{opacity:0;transform:translateX(-60px) rotate(-3deg) scale(.96)}}
@keyframes popIn{from{opacity:0;transform:scale(.55) translateY(18px)}}
@keyframes jelly{0%{transform:scale(1)}30%{transform:scale(1.14,.88)}50%{transform:scale(.92,1.08)}70%{transform:scale(1.05,.96)}100%{transform:scale(1)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-11px) rotate(-1deg)}40%,60%{transform:translateX(11px) rotate(1deg)}}
@keyframes slam{0%{opacity:0;transform:scale(1.7) rotate(-8deg)}55%{opacity:1;transform:scale(.94) rotate(1.5deg)}75%{transform:scale(1.04) rotate(-.5deg)}100%{transform:none}}
@keyframes grow{from{width:0}}
@keyframes fill{from{width:0}to{width:100%}}
@keyframes pulse{50%{transform:scaleY(1.9)}}
@keyframes bump{40%{transform:scale(1.4) rotate(-10deg)}}
@keyframes cdIn{0%{opacity:0;transform:scale(2.6) rotate(-12deg)}60%{opacity:1;transform:scale(.9)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
.play.anim .qtext{animation:qIn .55s var(--bounce) both}
.play.anim .qhint{animation:qIn .55s var(--bounce) .08s both}
.play.anim .ansbox [data-act],.play.anim .ansbox .or,.play.anim .meter{animation:popIn .5s var(--bounce) both;animation-delay:calc(var(--d,0) * 70ms + .14s)}
.play.out{animation:qOut .3s var(--ease) forwards}
.shake{animation:shake .5s both}
.just{animation:jelly .55s var(--bounce)}
.prog i.cur{animation:pulse .9s ease-in-out infinite}
.toc.lose{opacity:.35;transform:scale(.9) rotate(-4deg);filter:grayscale(.6)}
.face{font-size:4.4rem;line-height:1;display:inline-block;margin-bottom:6px;transition:transform .2s var(--bounce)}
.face.bump{animation:bump .35s var(--bounce)}
.sndbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.05rem;flex:none;display:grid;place-items:center}
#quip{position:fixed;left:50%;top:calc(84px + env(safe-area-inset-top,0px));z-index:65;transform:translate(-50%,-20px) scale(.8);opacity:0;pointer-events:none;background:var(--ink);color:var(--surface);padding:12px 20px;border-radius:999px;font-weight:700;font-size:1.02rem;max-width:calc(100% - 32px);text-align:center;transition:transform .35s var(--bounce),opacity .2s;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
#quip.on{opacity:1;transform:translate(-50%,0) scale(1) rotate(-1.5deg)}
#over{position:fixed;inset:0;z-index:66;display:grid;place-items:center;align-content:center;gap:18px;text-align:center;padding:24px;background:radial-gradient(circle at 50% 40%,var(--accent-2),var(--accent) 72%);color:var(--accent-ink);cursor:pointer}
.cd{font-family:Gloock,Georgia,serif;font-size:clamp(7rem,30vw,13rem);line-height:1;animation:cdIn .6s var(--bounce) both}
.spin{font-size:5rem;line-height:1;animation:spin .9s linear infinite}
.rv-line{font-family:Gloock,Georgia,serif;font-size:clamp(1.6rem,5vw,2.4rem);min-height:1.3em;animation:popIn .3s var(--bounce)}
.rv-bar{width:min(320px,80vw);height:10px;border-radius:99px;background:rgba(255,255,255,.3);overflow:hidden}
.rv-bar span{display:block;height:100%;width:0;background:currentColor;animation:fill linear forwards}
.skip{font-size:.85rem;opacity:.75;font-weight:600}
.res.pre{visibility:hidden}
.slam .rcard{animation:slam .75s var(--bounce) both}
.slam .rc-emoji{animation:popIn .6s var(--bounce) .45s both}
.slam .alist li,.slam .bar{animation:popIn .45s var(--bounce) both;animation-delay:calc(var(--d,0) * 80ms + .55s)}
.slam .tr span{animation:grow 1.1s var(--ease) .6s both}
.rc-big.done{animation:jelly .6s var(--bounce)}