/* Qwen motion/audio reference only. Existing palette, layout and Likert colors remain authoritative. */
.bg-animation::before{content:'';position:absolute;inset:0;pointer-events:none;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><circle fill="%23fff" cx="400" cy="400" r="1"/><circle fill="%23fff" cx="100" cy="100" r="0.5"/><circle fill="%23fff" cx="200" cy="600" r="0.8"/><circle fill="%23fff" cx="600" cy="200" r="0.6"/><circle fill="%23fff" cx="700" cy="500" r="1"/><circle fill="%23fff" cx="300" cy="300" r="0.4"/><circle fill="%23fff" cx="500" cy="700" r="0.7"/></svg>');animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:.65}}
.shape{animation:float 20s ease-in-out infinite}.shape-2{animation-delay:-5s}.shape-3{animation-delay:-10s}.shape-4{animation-delay:-15s}
@keyframes float{0%,100%{transform:translate(0,0)}25%{transform:translate(15px,15px)}50%{transform:translate(0,30px)}75%{transform:translate(-15px,15px)}}
.participant #app>.panel,.participant #app>.stage-head,.participant #app>.official-cover{animation:slideIn .35s ease-out}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
.university-badge,.axis-number{animation:pulse-badge 2s ease-in-out 2}
@keyframes pulse-badge{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.badge-pill{animation:glow-tag 2s ease-in-out 2}
@keyframes glow-tag{0%,100%{box-shadow:0 0 0 rgba(236,72,153,0)}50%{box-shadow:0 0 16px rgba(236,72,153,.22)}}
.choice:has(input:checked){animation:select-lift .2s ease-out}
@keyframes select-lift{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
.question.missing{animation:shake .35s ease-out 1}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#app[data-stage="12"] .seal{animation:checkmark .45s ease-out,success-pulse 2s ease-in-out .45s 2}
@keyframes checkmark{0%{transform:scale(.6);opacity:0}65%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes success-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.progress>span{position:relative;overflow:hidden}.progress>span::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.6s ease-out 1}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* Existing spinner is retained; no second loading animation or overlay. */
.sound-control{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:20px;z-index:20}
button.sound-btn{width:60px;height:60px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--gradient-1);color:#fff;box-shadow:0 10px 30px rgba(99,102,241,.4);transition:transform .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:center}
.sound-btn svg{width:26px;height:26px}.sound-btn .sound-muted-mark{display:none}.sound-btn.muted{background:linear-gradient(145deg,#64748b,#475569)}.sound-btn.muted .sound-waves{display:none}.sound-btn.muted .sound-muted-mark{display:block}
@media(hover:hover){button.sound-btn:hover{transform:scale(1.07)}}
body:has(dialog[open]) .sound-control{visibility:hidden;pointer-events:none}
body{padding-bottom:80px}html{scroll-padding-bottom:100px}input,select,button{scroll-margin-bottom:100px}
@media(max-width:600px){.sound-control{left:15px;bottom:max(15px,env(safe-area-inset-bottom))}button.sound-btn{width:50px;height:50px}.sound-btn svg{width:23px;height:23px}}
/* Narrow screens have no safe outer gutter: reserve a real layout slot instead of covering answers. */
@media(max-width:1100px){.sound-control{position:relative;left:auto;bottom:auto;width:max-content;margin:20px auto 0 15px}body{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}