/* Празднование ответов, растущий огонёк и насыщенное движение локальных макетов. */
#app .page { animation: page-arrival 480ms cubic-bezier(.18,.8,.26,1) both; }
.task-page > .task-kicker { animation: small-arrival 450ms 40ms both; }
.task-page > .task-title { animation: small-arrival 500ms 80ms both; }
.task-page > .equation-card { animation: card-arrival 620ms 100ms cubic-bezier(.2,.9,.25,1.2) both; }
.task-page > .scratch-section { animation: card-arrival 620ms 160ms cubic-bezier(.2,.9,.25,1.1) both; }
.task-page > .answer-section { animation: small-arrival 520ms 230ms both; }
.level-hero, .today-stat, .topic-item { animation: card-arrival 650ms cubic-bezier(.18,.8,.25,1.15) both; }
.today-stat:nth-child(2), .topic-item:nth-child(2) { animation-delay: 70ms; }
.today-stat:nth-child(3), .topic-item:nth-child(3) { animation-delay: 140ms; }
.topic-item:nth-child(4) { animation-delay: 210ms; }
.topic-item:nth-child(5) { animation-delay: 280ms; }
.topic-item:nth-child(6) { animation-delay: 350ms; }
.ring-wrap { animation: hero-pop 700ms cubic-bezier(.2,.9,.3,1.15) both; }
.ring-wrap svg > circle:last-child { animation: ring-draw 1.4s cubic-bezier(.25,.7,.2,1) both; }
.day-fire { display: inline-block; animation: day-flame 1.4s ease-in-out infinite; transform-origin: 50% 80%; }
.btn--primary, .primary { position: relative; overflow: hidden; transition: transform 180ms, box-shadow 220ms, background 180ms; }
.btn--primary::after, .primary::after { content: ""; position: absolute; top: -60%; bottom: -60%; width: 40%; left: -50%; background: linear-gradient(100deg, transparent, #ffffff36, transparent); transform: skewX(-22deg); animation: button-sheen 3.6s 900ms ease-in-out infinite; pointer-events: none; }
button:active { transform: scale(.94); }
.answer-field { transition: border-color 220ms, box-shadow 220ms, transform 220ms; }
.answer-field:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb,var(--tint) 10%,transparent); }
.round-progress i { position: relative; overflow: hidden; transition: width 600ms cubic-bezier(.2,.8,.2,1); }
.round-progress i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent,#ffffff90,transparent); animation: progress-light 2.8s ease-in-out infinite; }
.combo { gap: 5px; min-height: 33px; padding: 2px 6px 2px 2px; position: relative; isolation: isolate; }
.combo > b { position: relative; z-index: 2; font-size: 13px; font-weight: 700; }
.fire-visual { position: relative; display: grid; place-items: center; width: 25px; height: 29px; transform-origin: 50% 85%; }
.fire-visual > svg { width: 24px; height: 29px; overflow: visible; filter: drop-shadow(0 2px 3px #ff791040); }
.fire-inner { animation: flame-inner 700ms alternate ease-in-out infinite; transform-origin: 50% 90%; }
.fire-visual::before { content: ""; position: absolute; z-index: -1; width: 29px; height: 29px; background: radial-gradient(circle,#ffbc5070,transparent 68%); border-radius: 50%; filter: blur(3px); opacity: .3; }
.combo[data-heat="0"] { color: var(--label-2); }
.combo[data-heat="0"] .fire-visual { opacity: .32; filter: grayscale(1); }
.combo[data-heat="0"] .fire-inner { animation: none; }
.combo[data-heat="0"] .fire-visual::before { opacity: 0; }
.combo[data-heat="1"] { color: #e68509; }
.combo[data-heat="1"] .fire-visual { animation: flame-dance 1.25s ease-in-out infinite; }
.combo[data-heat="2"] { color: #f17c09; }
.combo[data-heat="2"] .fire-visual { animation: flame-dance 850ms ease-in-out infinite; }
.combo[data-heat="2"] .fire-visual::before { opacity: .7; width: 39px; height: 39px; animation: fire-halo 1.2s ease-in-out infinite; }
.combo[data-heat="3"] { color: #f55918; }
.combo[data-heat="3"] .fire-visual { animation: flame-strong 680ms ease-in-out infinite; }
.combo[data-heat="3"] .fire-visual > svg { width: 30px; height: 36px; filter: drop-shadow(0 0 6px #ff771390); }
.combo[data-heat="3"] .fire-visual::before { opacity: 1; width: 48px; height: 48px; animation: fire-halo 850ms ease-in-out infinite; }
.combo[data-heat="4"] { color: #ed3910; }
.combo[data-heat="4"]::before { content: ""; position: absolute; z-index: -2; inset: -4px -6px; border-radius: 18px; background: linear-gradient(105deg,#ffab192c,#ff551b17,#ffbf3b33); box-shadow: 0 0 20px #ff6e2429; animation: combo-aura 1s ease-in-out infinite; }
.combo[data-heat="4"] .fire-visual { animation: flame-inferno 550ms ease-in-out infinite; }
.combo[data-heat="4"] .fire-visual > svg { width: 33px; height: 39px; filter: drop-shadow(0 0 5px #ffad11) drop-shadow(0 0 10px #ff641780); }
.combo[data-heat="4"] .fire-visual::before { opacity: 1; width: 59px; height: 59px; background: radial-gradient(circle,#ff8a3190,#ffbf4320,transparent 70%); animation: fire-halo 650ms ease-in-out infinite; }
.fire-ember { position: absolute; bottom: 15px; left: 50%; width: 3px; height: 5px; border-radius: 50%; background: #ffab1f; box-shadow: 0 0 5px #ff891f; animation: ember-rise var(--ember-time,1.2s) var(--ember-delay,0ms) ease-out infinite; pointer-events: none; }
.combo-bump { animation: combo-jump 720ms cubic-bezier(.18,.9,.3,1.2) !important; }
.fx-layer { position: absolute; z-index: 90; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
.fx-wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%,#3feba074 0%,#28adff24 42%,transparent 77%); animation: victory-wash 1.8s ease-out both; }
.fx-layer[data-kind="fire"] .fx-wash, .fx-layer[data-kind="final"] .fx-wash { background: radial-gradient(ellipse at 50% 35%,#ffd258ab 0%,#ff814435 43%,transparent 79%); }
.fx-sunburst { position: absolute; width: 660px; height: 660px; left: calc(50% - 330px); top: calc(37% - 330px); background: repeating-conic-gradient(from 4deg, #42dba922 0deg 10deg,transparent 10deg 30deg); border-radius: 50%; -webkit-mask-image: radial-gradient(circle,#000000a0,transparent 70%); mask-image: radial-gradient(circle,#000000a0,transparent 70%); animation: sunburst-turn 2s ease-out both; }
.fx-layer[data-kind="fire"] .fx-sunburst, .fx-layer[data-kind="final"] .fx-sunburst { background: repeating-conic-gradient(from 4deg,#ffb72244 0deg 10deg,transparent 10deg 30deg); }
.fx-ring { position: absolute; width: 92px; height: 92px; border: 3px solid var(--ring-color,#38d690); border-radius: 50%; top: 35%; left: calc(50% - 46px); box-shadow: 0 0 22px color-mix(in srgb,var(--ring-color,#38d690) 35%,transparent); animation: wave-expand 1.4s var(--ring-delay,0ms) cubic-bezier(.1,.6,.2,1) both; }
.fx-card { position: absolute; top: 25%; left: 24px; right: 24px; padding: 25px 20px 20px; border-radius: 29px; background: #fffffff2; color: #172320; border: 1px solid #ffffff; text-align: center; box-shadow: 0 15px 70px #12ac702b,0 0 0 7px #ffffff36; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); animation: victory-card 1.85s cubic-bezier(.2,.8,.2,1) both; }
.fx-layer[data-kind="fire"] .fx-card, .fx-layer[data-kind="final"] .fx-card { box-shadow: 0 15px 70px #ffa61955,0 0 0 7px #ffffff45; }
.fx-kicker { margin: 0 0 7px; color: #5b8671; font-size: 10px; font-weight: 750; letter-spacing: 2px; }
.fx-title { font-size: 36px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 0; animation: success-text 700ms 180ms cubic-bezier(.15,.9,.25,1.3) both; }
.fx-subtitle { margin: 10px 0 0; font-size: 13px; color: #608172; }
.fx-medallion { width: 88px; height: 88px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 29px; background: linear-gradient(145deg,#63efa0,#1cc47b); color: white; box-shadow: 0 10px 25px #31d58d66,0 0 0 10px #8eefb322; transform: rotate(-8deg); animation: medal-land 900ms cubic-bezier(.1,.9,.25,1.25) both; }
.fx-medallion > svg { width: 45px; height: 45px; transform: rotate(8deg); }
.fx-medallion .fx-check-path { stroke-dasharray: 32; stroke-dashoffset: 32; animation: check-draw 400ms 150ms forwards; }
.fx-medallion.fire-medallion { background: linear-gradient(145deg,#fff2bc,#ffc85e); color: #f7690d; box-shadow: 0 10px 25px #ffa43266,0 0 0 10px #ffcb4822; }
.fx-medallion .fire-visual { width: 64px; height: 72px; transform: rotate(8deg); animation: big-flame 650ms ease-in-out infinite; }
.fx-medallion .fire-visual > svg { width: 60px; height: 70px; filter: drop-shadow(0 0 6px #ff9e16); }
.fx-rewards { display: flex; justify-content: center; gap: 8px; margin: 17px 0 0; }
.fx-reward { display: flex; align-items: center; gap: 4px; border-radius: 11px; padding: 8px 12px; font-size: 14px; font-weight: 750; color: #008052; background: #dff9eb; animation: reward-rise 650ms 200ms cubic-bezier(.15,.9,.25,1.2) both; }
.fx-reward.streak { color: #c66c00; background: #fff0cf; animation-delay: 290ms; }
.fx-confetti { position: absolute; left: 50%; top: 35%; width: var(--size,7px); height: calc(var(--size,7px) * 1.45); background: var(--color,#007aff); border-radius: var(--round,2px); box-shadow: 0 0 8px color-mix(in srgb,var(--color,#007aff) 35%,transparent); animation: confetti-flight var(--life,1.7s) var(--delay,0ms) cubic-bezier(.1,.65,.25,1) both; }
.fx-confetti.star { clip-path: polygon(50% 0,63% 34%,100% 38%,72% 62%,82% 100%,50% 77%,18% 100%,28% 62%,0 38%,37% 34%); width: 14px; height: 14px; border-radius: 0; }
.fx-spark { position: absolute; left: 50%; top: 35%; color: var(--color,#ffc038); font-size: var(--size,24px); line-height: 1; text-shadow: 0 0 12px currentColor; animation: sparkle-flight 1.45s var(--delay,0ms) cubic-bezier(.12,.6,.2,1) both; }
.fx-xp-flight { position: absolute; top: 36%; left: 43%; padding: 7px 10px; border-radius: 20px; background: #007aff; color: white; font-size: 13px; font-weight: 750; box-shadow: 0 0 15px #007aff66; animation: xp-to-hud 950ms 700ms cubic-bezier(.2,.8,.4,1) both; }
.fx-on .answer-field { border-color: #27d67a; box-shadow: 0 0 0 4px #24d98c22,0 0 32px #29d3812c; animation: field-success 800ms cubic-bezier(.15,.9,.3,1.2); }
.fx-on .primary { background: #24c879; box-shadow: 0 0 0 5px #48eb951a,0 7px 25px #24c87945; animation: verify-pop 650ms cubic-bezier(.1,.9,.3,1.2); }
.fx-on .equation-card { animation: equation-success 850ms cubic-bezier(.2,.8,.3,1); }
.fx-on .session-nav .round-progress { box-shadow: 0 0 15px #30d15866; }
.tap-ripple { position: absolute; border-radius: 50%; background: #ffffff5c; width: 10px; height: 10px; pointer-events: none; animation: tap-ripple 650ms ease-out forwards; }
.success-symbol { position: relative; animation: final-medal 1.1s cubic-bezier(.1,.9,.3,1.2) both,final-halo 1.8s 1.1s ease-in-out infinite; }
.success-symbol::after { content: ""; position: absolute; inset: -12px; border: 1px solid color-mix(in srgb,var(--green) 25%,transparent); border-radius: 50%; animation: final-orbit 2.4s linear infinite; }
.success-page .result-stat { animation: card-arrival 700ms 200ms cubic-bezier(.2,.9,.3,1.1) both; }
.success-page .result-stat:nth-child(2) { animation-delay: 300ms; }
.success-page .result-stat:nth-child(3) { animation-delay: 400ms; }
/* Ошибка ощутимо ударяет цветом; черновик и клавиатура остаются доступными. */
.fx-error .answer-field { border-color: var(--red); box-shadow: 0 0 0 4px #ff3b3030,0 0 28px #ff3b303b; animation: error-field-glow 1100ms ease-out; }
.fx-error-on .session-nav .round-progress { box-shadow: 0 0 15px #ff3b3040; }
.fx-error-on .session-footer .primary { box-shadow: 0 0 0 3px #ff3b3026,0 5px 24px #ff3b3030; }
.fx-error-layer { position: absolute; z-index: 89; inset: 0; overflow: hidden; isolation: isolate; pointer-events: none; }
.fx-error-layer * { pointer-events: none; }
.fx-error-wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%,#ff3b3009 20%,#ff3b3022 70%,#ff3b3038 100%),linear-gradient(180deg,#ff453a20,transparent 40%,#ff3b3018); animation: error-red-wash 1250ms ease-out both; }
.fx-error-frame { position: absolute; inset: 2px; border: 2px solid #ff3b3080; border-radius: 18px; box-shadow: inset 0 0 48px #ff3b304c,0 0 30px #ff3b3042; animation: error-edge-hit 1200ms ease-out both; }
.fx-error-impact { position: absolute; left: -25%; right: -25%; height: 130%; top: -15%; border-radius: 50%; border: 18px solid #ff3b3040; background: radial-gradient(ellipse,transparent 61%,#ff453a12 75%); animation: error-impact-wave 850ms cubic-bezier(.12,.6,.3,1) both; }
.fx-error-caption { position: absolute; top: calc(64px + var(--safe-top,0px)); right: 16px; max-width: calc(100% - 32px); padding: 10px 13px; border-radius: 13px; background: color-mix(in srgb,var(--bg-elevated) 95%,transparent); border: 1px solid #ff3b3030; box-shadow: 0 8px 26px #a321211c; color: var(--label); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: error-caption 1250ms ease-out both; }
.fx-error-caption strong { display: block; font-size: 14px; font-weight: 650; }
.fx-error-caption span { display: block; color: var(--label-2); font-size: 11px; margin-top: 3px; }
/* Огонь вспыхивает в последний раз, сжимается и превращается в дым и пепел. */
.combo.fx-extinguishing { animation: extinguisher-hit 450ms ease-out !important; }
.combo.fx-extinguishing::before { animation: none !important; opacity: 0; }
.combo.fx-extinguishing .fire-visual { opacity: 1; animation: fire-extinguish 920ms ease-out both !important; }
.combo.fx-extinguishing .fire-visual::before { animation: extinguish-halo 550ms ease-out both !important; }
.combo.fx-extinguishing .fire-inner { animation: none; }
.combo.fx-extinguishing .fire-ember { display: none; }
.combo.fx-extinguishing > b { animation: streak-number-drop 540ms ease-out both; }
.fx-error-smoke,.fx-error-ember,.fx-error-ash { position: absolute; left: var(--fire-x); top: var(--fire-y); }
.fx-error-smoke { width: var(--smoke-size); height: var(--smoke-size); margin: calc(var(--smoke-size) * -.5); border-radius: 50%; background: radial-gradient(circle,#5b667677,#8d94a143 48%,transparent 72%); filter: blur(1.5px); animation: extinguisher-smoke 850ms var(--delay,0ms) ease-out both; }
.fx-error-ember { width: var(--size); height: calc(var(--size) * 1.4); margin: -2px; border-radius: 50%; background: #ffb219; box-shadow: 0 0 6px #ff7c2ccc; animation: last-ember 900ms var(--delay,0ms) ease-out both; }
.fx-error-ash { width: var(--size); height: calc(var(--size) * 1.1); margin: -2px; border-radius: 1px; background: #69717b; animation: falling-ash 1000ms var(--delay,0ms) ease-out both; }
/* Переход подсвечивает новый этап; страница, лист и каретка стоят на месте. */
.fx-step-layer { position: absolute; z-index: 85; inset: 0; overflow: hidden; isolation: isolate; pointer-events: none; --step-color: #007aff; --step-glow: #5ac8fa; }
.fx-step-layer * { pointer-events: none; }
.fx-step-layer[data-kind="task"] { --step-color: #8b5cf6; --step-glow: #b18aff; }
.fx-step-wash { position: absolute; inset: 0; background: radial-gradient(ellipse 290px 200px at var(--card-cx) var(--card-cy),#5ac8fa35 0%,#007aff16 46%,transparent 78%); animation: step-wash 1050ms ease-out both; }
.fx-step-layer[data-kind="task"] .fx-step-wash { background: radial-gradient(ellipse 290px 200px at var(--card-cx) var(--card-cy),#b18aff38 0%,#007aff17 46%,transparent 78%); }
.fx-step-wave { position: absolute; left: calc(var(--card-cx) - 45px); top: calc(var(--card-cy) - 45px); width: 90px; height: 90px; border: 2px solid var(--step-color); border-radius: 50%; box-shadow: 0 0 19px color-mix(in srgb,var(--step-color) 38%,transparent); animation: step-wave 850ms cubic-bezier(.12,.65,.2,1) both; }
.fx-step-wave.second { border-color: var(--step-glow); animation-delay: 140ms; }
.fx-step-frame { position: absolute; left: calc(var(--card-x) - 2px); top: calc(var(--card-y) - 2px); width: calc(var(--card-w) + 4px); height: calc(var(--card-h) + 4px); border: 2px solid var(--step-color); border-radius: 18px; box-shadow: 0 0 0 4px #007aff11,inset 0 0 18px #5ac8fa22,0 0 26px #007aff3d; animation: step-frame 900ms cubic-bezier(.12,.6,.25,1) both; }
.fx-step-scan { position: absolute; left: var(--card-x); top: var(--card-y); width: var(--card-w); height: var(--card-h); border-radius: 16px; overflow: hidden; }
.fx-step-scan > i { position: absolute; inset: -35% auto -35% -55%; width: 44%; transform: skewX(-19deg); background: linear-gradient(90deg,transparent,#5ac8fa26,#ffffffcc,#b18aff22,transparent); filter: drop-shadow(0 0 8px #5ac8fa70); animation: step-scan 740ms 80ms ease-out both; }
.fx-step-chip { position: absolute; left: var(--chip-x); top: var(--chip-y); width: var(--chip-w); min-height: 28px; display: grid; place-items: center; padding: 5px 8px; border-radius: 20px; background: linear-gradient(120deg,var(--step-color),#429cff); color: white; font-size: 11px; line-height: 16px; font-weight: 700; white-space: nowrap; text-align: center; box-shadow: 0 4px 16px #007aff47,0 0 0 3px #ffffff65; animation: step-chip 1030ms cubic-bezier(.18,.85,.25,1) both; }
.fx-step-particle { position: absolute; left: var(--origin-x); top: var(--origin-y); width: var(--size); height: var(--size); margin: calc(var(--size) * -.5); border-radius: 50%; background: var(--color); box-shadow: 0 0 7px color-mix(in srgb,var(--color) 60%,transparent); animation: step-particle var(--life,850ms) var(--delay,0ms) cubic-bezier(.1,.65,.25,1) both; }
.fx-step-particle.star { border-radius: 0; clip-path: polygon(50% 0,60% 36%,100% 50%,60% 62%,50% 100%,38% 62%,0 50%,38% 36%); }
@keyframes page-arrival { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes small-arrival { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-arrival { from { opacity: 0; transform: translateY(15px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-pop { from { opacity: 0; transform: scale(.75) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes ring-draw { from { stroke-dashoffset: 245; } }
@keyframes day-flame { 0%,100% { transform: scale(1) rotate(-5deg); filter: drop-shadow(0 0 2px #ff9c1240); } 50% { transform: scale(1.15) rotate(6deg); filter: drop-shadow(0 0 6px #ff9c1280); } }
@keyframes button-sheen { 0%,60% { left: -50%; } 95%,100% { left: 140%; } }
@keyframes progress-light { 0%,20% { transform: translateX(-100%); } 85%,100% { transform: translateX(150%); } }
@keyframes flame-inner { from { transform: scaleX(.94) scaleY(.93); opacity: .88; } to { transform: scaleX(1.06) scaleY(1.04); opacity: 1; } }
@keyframes flame-dance { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(4deg) scale(1.08); } }
@keyframes flame-strong { 0%,100% { transform: rotate(-5deg) scale(1.02); } 50% { transform: rotate(4deg) scale(1.18); } }
@keyframes flame-inferno { 0%,100% { transform: rotate(-6deg) scale(1.04) translateY(0); } 50% { transform: rotate(5deg) scale(1.2) translateY(-2px); } }
@keyframes fire-halo { 0%,100% { transform: scale(.86); } 50% { transform: scale(1.15); } }
@keyframes combo-aura { 0%,100% { box-shadow: 0 0 12px #ff6e2420; } 50% { box-shadow: 0 0 25px #ff6e2444; } }
@keyframes ember-rise { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--ember-x,7px),-39px) scale(.15); } }
@keyframes combo-jump { 0% { transform: scale(.9); } 25% { transform: scale(1.38) rotate(-8deg) translateY(-4px); } 55% { transform: scale(.97) rotate(4deg); } 100% { transform: scale(1); } }
@keyframes victory-wash { 0% { opacity: 0; transform: scale(.8); } 17%,55% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes sunburst-turn { 0% { opacity: 0; transform: scale(.3) rotate(-25deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) rotate(50deg); } }
@keyframes wave-expand { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(6); } }
@keyframes victory-card { 0% { opacity: 0; transform: translateY(38px) scale(.65) rotate(-7deg); } 17% { opacity: 1; transform: translateY(-7px) scale(1.04) rotate(1deg); } 25%,77% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } 100% { opacity: 0; transform: translateY(-24px) scale(.94); } }
@keyframes success-text { from { opacity: 0; transform: translateY(15px) scale(.78); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes medal-land { 0% { opacity: 0; transform: scale(.25) rotate(-90deg); } 55% { opacity: 1; transform: scale(1.12) rotate(0deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
@keyframes big-flame { 0%,100% { transform: rotate(6deg) scale(.98); } 50% { transform: rotate(11deg) scale(1.12); } }
@keyframes reward-rise { from { opacity: 0; transform: translateY(17px) scale(.65); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes confetti-flight { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.4); } 12% { opacity: 1; } 44% { transform: translate(var(--tx),var(--ty)) rotate(var(--spin,180deg)) scale(1); opacity: 1; } 100% { transform: translate(var(--end-x),var(--end-y)) rotate(var(--end-spin,560deg)) scale(.7); opacity: 0; } }
@keyframes sparkle-flight { 0% { opacity: 0; transform: translate(0,0) scale(.1); } 20% { opacity: 1; } 65% { opacity: 1; transform: translate(var(--tx),var(--ty)) scale(1.15) rotate(90deg); } 100% { opacity: 0; transform: translate(var(--end-x),var(--end-y)) scale(.1) rotate(180deg); } }
@keyframes xp-to-hud { 0% { opacity: 0; transform: translate(0,0) scale(.7); } 20% { opacity: 1; transform: translate(-12px,-10px) scale(1.1); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--xp-x,150px),var(--xp-y,-200px)) scale(.4); } }
@keyframes field-success { 0% { transform: scale(.98); } 35% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes verify-pop { 0% { transform: scale(.95); } 35% { transform: scale(1.065); } 65% { transform: scale(.99); } 100% { transform: scale(1); } }
@keyframes equation-success { 0% { transform: translateY(0); } 30% { transform: translateY(-8px) rotate(-.6deg); } 70% { transform: translateY(2px); } 100% { transform: translateY(0); } }
@keyframes tap-ripple { to { transform: scale(50); opacity: 0; } }
@keyframes final-medal { from { opacity: 0; transform: scale(.35) rotate(-90deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes final-halo { 0%,100% { box-shadow: 0 0 0 0 #30d1581a,0 0 25px #30d1580d; } 50% { box-shadow: 0 0 0 14px #30d15807,0 0 35px #30d15833; } }
@keyframes final-orbit { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes answer-nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 65% { transform: translateX(5px); } }
@keyframes error-red-wash { 0% { opacity: 0; } 12% { opacity: 1; } 43% { opacity: .8; } 75% { opacity: .35; } 100% { opacity: 0; } }
@keyframes error-edge-hit { 0% { opacity: 0; transform: scale(1.025); } 12% { opacity: 1; transform: scale(.99); box-shadow: inset 0 0 68px #ff3b305c,0 0 40px #ff3b3055; } 36% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes error-impact-wave { 0% { opacity: 0; transform: scale(.62); } 15% { opacity: .85; } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes error-field-glow { 0% { box-shadow: 0 0 0 0 #ff3b3060,0 0 0 #ff3b3050; } 22% { box-shadow: 0 0 0 7px #ff3b3036,0 0 36px #ff3b304f; } 100% { box-shadow: 0 0 0 4px #ff3b3030,0 0 28px #ff3b303b; } }
@keyframes error-caption { 0% { opacity: 0; transform: translateY(-8px) scale(.96); } 20%,73% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes extinguisher-hit { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-6deg); } 60% { transform: translateX(3px) rotate(4deg); } }
@keyframes fire-extinguish { 0% { transform: scale(1) rotate(0); filter: saturate(1); opacity: 1; } 14% { transform: scale(1.32) rotate(-8deg); filter: brightness(1.3) drop-shadow(0 0 8px #ffb72a); opacity: 1; } 38% { transform: translateY(4px) scale(.9,.52) rotate(6deg); filter: saturate(.4); opacity: .75; } 65% { transform: translateY(9px) scale(.55,.12); filter: grayscale(1); opacity: .28; } 100% { transform: translateY(11px) scale(.2,.035); filter: grayscale(1); opacity: 0; } }
@keyframes extinguish-halo { 0% { opacity: .8; transform: scale(1); } 20% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes streak-number-drop { 0% { transform: scale(1); } 23% { color: #ff453a; transform: translateY(-2px) scale(1.25); } 56% { opacity: .25; transform: translateY(7px) scale(.75); } 100% { color: var(--label-2); opacity: 1; transform: translateY(0) scale(1); } }
@keyframes extinguisher-smoke { 0% { opacity: 0; transform: translate(-50%,-10%) scale(.4); } 30% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--smoke-x),var(--smoke-y)) scale(2.2); } }
@keyframes last-ember { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 15% { opacity: 1; } 50% { opacity: .8; transform: translate(var(--tx),var(--ty)) rotate(var(--spin)) scale(1); } 100% { opacity: 0; transform: translate(var(--tx),var(--end-y)) rotate(var(--spin)) scale(.12); filter: grayscale(1); } }
@keyframes falling-ash { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: .75; } 100% { opacity: 0; transform: translate(var(--tx),var(--end-y)) rotate(var(--spin)) scale(.4); } }
@keyframes step-wash { 0% { opacity: 0; } 18%,45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes step-wave { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: .7; } 100% { opacity: 0; transform: scale(4.2,2.15); } }
@keyframes step-frame { 0% { opacity: 0; transform: scale(.985); } 22% { opacity: .95; transform: scale(1.025); } 58% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.015); } }
@keyframes step-scan { 0% { opacity: 0; left: -55%; } 15% { opacity: .9; } 78% { opacity: .65; } 100% { opacity: 0; left: 125%; } }
@keyframes step-chip { 0% { opacity: 0; transform: translateX(-50%) scale(.65) rotate(-7deg); } 22% { opacity: 1; transform: translateX(-50%) scale(1.06) rotate(1deg); } 35%,72% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translateX(-50%) scale(.94); } }
@keyframes step-particle { 0% { opacity: 0; transform: translate(0,0) scale(.3); } 17% { opacity: 1; } 55% { opacity: .9; transform: translate(var(--tx),var(--ty)) rotate(var(--spin)) scale(1); } 100% { opacity: 0; transform: translate(var(--end-x),var(--end-y)) rotate(var(--spin)) scale(.15); } }
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .fx-confetti, .fx-spark, .fx-ring, .fx-sunburst, .fx-xp-flight, .fire-ember { display: none; }
  .fx-card { animation: none !important; opacity: 1; }
  .fx-error-layer .fx-error-wash { animation: none !important; opacity: .4; }
  .fx-error-layer .fx-error-frame { animation: none !important; opacity: .45; transform: none; box-shadow: inset 0 0 25px #ff3b3020; }
  .fx-error-impact,.fx-error-smoke,.fx-error-ember,.fx-error-ash { display: none; }
  .fx-error-caption { animation: none !important; opacity: 1; transform: none; }
  .fx-error .answer-field { animation: none !important; box-shadow: 0 0 0 3px #ff3b301f; }
  .fx-step-wave,.fx-step-scan,.fx-step-particle,.fx-step-chip { display: none; }
  .fx-step-layer .fx-step-wash { animation: none !important; opacity: .3; }
  .fx-step-layer .fx-step-frame { animation: none !important; opacity: .3; transform: none; box-shadow: 0 0 0 2px #007aff0d; }
}