
:root{font-family:Manrope,system-ui,sans-serif;color:#eaf0e7;background:#101d20;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 50%,#20393a55,transparent 60%)}main{max-width:1440px;margin:auto;padding:28px 48px}button,input{font:inherit}button{cursor:pointer;transition:transform .15s,background .15s}button:hover{filter:brightness(1.12)}button:active{transform:translateY(2px)}button:focus-visible,a:focus-visible{outline:3px solid #e7bf72;outline-offset:5px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14;padding-bottom:25px}.brand{display:flex;gap:13px;color:#edf3e8;text-decoration:none;font-weight:800;letter-spacing:1.5px;font-size:17px;align-items:center}.brand small{display:block;font-size:10px;letter-spacing:2px;color:#8fa3a3;margin-top:5px}.crest{background:#d6b87b;color:#18292b;padding:7px 12px;border-radius:12px;font-size:25px}.quiet{border:1px solid #445153;border-radius:9px;color:#bbc9c6;background:transparent;padding:10px 15px;font-size:14px}.topline{display:flex;justify-content:space-between;align-items:center;margin:32px 0 27px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;color:#adbcad}h1{font-size:32px;letter-spacing:-1px;margin:8px 0 0;font-weight:700}.score{display:grid;grid-template-columns:28px auto;align-items:center;gap:0 8px}.score>span{color:#e7bf72;font-size:30px;grid-row:span 2}.score b{font-size:23px}.score small{font-size:12px;color:#9aadaa}nav{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:25px;gap:8px}.map-item{display:flex;align-items:center;gap:10px;color:#819593;padding:13px 12px;border-bottom:2px solid #324749;font-size:13px}.map-item strong{display:block;font-weight:600}.map-item small{font-size:11px;display:block;margin-top:4px;opacity:.7}.map-num{border:1px solid #435958;border-radius:50%;min-width:28px;height:28px;display:grid;place-items:center;font-size:12px}.map-item.current{border-color:#dec08a;color:#f1d39b}.map-item.current .map-num{background:#e4c387;color:#18292b;border-color:#e4c387}.map-item.done{color:#94c7a7;border-color:#628b6f}.game{display:grid;grid-template-columns:1.5fr 1fr;min-height:530px;border:1px solid #45524a;border-radius:17px;overflow:hidden;box-shadow:0 24px 70px #0003}.scene{position:relative;min-height:530px;isolation:isolate;background:#213c3d;overflow:hidden}.art{position:absolute;inset:0;z-index:-2;background:linear-gradient(140deg,#36564c,#142a30);background-size:cover;background-position:center;transition:filter .6s,transform .6s}.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0d232222 40%,#0c2022ed 100%);z-index:-1}.scene-top{padding:22px;display:flex;justify-content:space-between;gap:8px}.pill{border:1px solid #ffffff25;border-radius:6px;background:#142729aa;backdrop-filter:blur(8px);padding:9px 11px;font-size:10px;letter-spacing:1px;color:#d8e2d6}.scene-bottom{position:absolute;bottom:0;padding:30px;width:100%}.scene-bottom .eyebrow{color:#e5c487}.scene-bottom h2{font-size:28px;margin:8px 0}.scene-bottom p{font-size:14px;color:#cad6cd;max-width:400px;line-height:1.6}.progress{height:4px;background:#ffffff26;border-radius:4px;margin-top:25px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:#e5c487;transition:width .5s}.progress-label{display:flex;justify-content:space-between;font-size:10px;color:#c3cfc5;margin-top:9px}aside{background:#f4f1e7;color:#203734;padding:30px;display:flex;align-items:center}#battle,#victory{width:100%}.enemy-row{display:flex;align-items:center;gap:12px}.enemy-icon{font-size:27px;display:grid;place-items:center;width:51px;height:51px;background:#e1e6d5;border:1px solid #d4dcc7;border-radius:13px}.enemy-row .eyebrow{color:#7a8876;font-size:9px;letter-spacing:1.4px}.enemy-row h2{font-size:21px;margin:3px 0}.badge{margin-left:auto;white-space:nowrap;color:#6e7c6b;background:#e7e9df;padding:6px 8px;border-radius:5px;font-size:11px}.instruction{font-size:13px;color:#798577;margin:22px 0}.challenge{text-align:center;padding:23px 5px;background:#e9eadd;border:1px solid #dce0cf;border-radius:11px;margin-bottom:23px}.challenge .eyebrow{color:#78826b;font-size:10px}#expression{font-size:47px;font-weight:800;letter-spacing:-1.5px;margin-top:10px}label{font-size:12px;font-weight:700;display:block;margin-bottom:9px}.answer-row{display:flex;gap:8px}input{width:0;min-width:0;flex:1;padding:14px 12px;border:1px solid #cdd3c5;background:#fffef8;border-radius:8px;color:#243c31;font-size:14px;outline-color:#58806b}button[type=submit],.next{border:0;background:#254f41;color:white;border-radius:8px;padding:14px 18px;font-weight:600;font-size:13px}button[type=submit] span{padding-left:10px}#feedback{font-size:12px;color:#778573;line-height:1.6;min-height:38px;margin:12px 0 6px}#feedback.success{color:#2d7650;font-weight:700}#feedback.error{color:#a24b34}.hint{padding:7px 0;border:0;background:transparent;color:#536d54;font-size:12px;border-bottom:1px dashed #b7c2aa}#hint-text{font-size:13px;line-height:1.7;color:#526649;background:#e6e9d9;padding:10px;border-radius:8px}.next{display:block;width:100%;margin-top:12px}.rule{border-top:1px solid #dcded1;margin-top:24px;padding-top:15px;display:flex;gap:12px;align-items:center;color:#83917c}.rule span{font-size:23px}.rule p{font-size:11px;line-height:1.7;margin:0}footer{display:flex;justify-content:space-between;gap:20px;color:#78908a;font-size:11px;margin-top:23px}.treasure{font-size:75px;margin-bottom:25px}#victory{text-align:center}#victory p{line-height:1.8;color:#75806a}#victory strong{display:block;font-size:27px;color:#87682e;margin:24px 0}[hidden]{display:none!important}.scene.won .art{filter:brightness(1.25);transform:scale(1.03)}@media(min-width:1400px){main{padding-top:40px}.game,.scene{min-height:580px}}@media(max-width:1000px){main{padding:24px}.game{grid-template-columns:1.15fr 1fr}aside{padding:22px}.enemy-row{gap:8px}.enemy-row h2{font-size:17px}.map-item{padding:10px 3px;gap:6px}.map-item strong{font-size:11px}.map-item small{font-size:10px}.badge{font-size:10px}h1{font-size:28px}}@media(max-width:720px){main{padding:18px 14px}.brand{font-size:13px;letter-spacing:1px}.brand small{font-size:8px;letter-spacing:1px}.quiet{font-size:11px;padding:8px}.crest{font-size:20px;padding:7px}.topline{margin:25px 0}h1{font-size:23px;max-width:220px}.eyebrow{font-size:10px}.score small{font-size:10px}nav{gap:5px;margin-bottom:16px}.map-item{flex-direction:column;gap:7px;text-align:center}.map-item strong{font-size:9px}.map-item small{display:none}.game{grid-template-columns:1fr}.scene{min-height:370px}.scene-top{padding:15px}.pill{font-size:9px}.scene-bottom{padding:22px}.scene-bottom h2{font-size:24px}.scene-bottom p{font-size:12px;max-width:300px}.scene-bottom .progress{margin-top:17px}aside{padding:26px}.enemy-row h2{font-size:22px}.instruction{font-size:14px}.challenge{padding:18px}#expression{font-size:45px}input{font-size:16px}footer{font-size:10px;line-height:1.8}footer span:last-child{display:none}}
.art{background-image:url('castle.png')}
.art{background-size:100% auto;background-position:center 55px;background-repeat:no-repeat;background-color:#183033}.scene:after{background:linear-gradient(180deg,transparent 45%,#0c2022ed 80%)}@media(max-width:720px){.scene{min-height:415px}.scene:after{background:linear-gradient(180deg,transparent 40%,#0c2022ed 64%)}}label,.hint,#feedback,.instruction,.rule p{font-size:14px}.map-item strong{font-size:12px}
.obstacle{position:absolute;top:22%;left:40%;right:5%;padding:18px 12px;text-align:center;border:2px solid #e9d298;border-radius:16px;background:#213f3cf2;box-shadow:0 0 35px #eec76a44,inset 0 0 28px #eec76a15;transition:opacity .7s,transform .7s}.obstacle .eyebrow{color:#eddaac;font-size:12px}.obstacle #expression{font-size:clamp(26px,3.2vw,44px);color:#fff4ce;letter-spacing:0;line-height:1.3;margin:10px 0}.obstacle-caption{font-size:12px;color:#c7d8c3}.obstacle.broken{opacity:0;transform:scale(1.15) translateY(-20px)}.voice-orb{width:88px;height:88px;display:grid;place-items:center;margin:25px auto 18px;border-radius:50%;font-size:36px;color:#ece9c2;background:radial-gradient(circle at 35% 30%,#659b7e,#285543 70%);box-shadow:0 0 0 10px #28554310,0 0 0 20px #28554306}.voice-orb.listening{animation:breathe 1.3s infinite}.voice-orb.speaking{animation:breathe 2.1s infinite;color:#f5cf7a}.voice-state{text-align:center;font-size:16px;font-weight:700;line-height:1.5;min-height:48px}#voice{font-size:16px;padding:16px}#repeat{display:block;margin:13px auto}.heard{font-size:14px;line-height:1.6;min-height:23px;color:#405f4c}.mic-note{font-size:12px;line-height:1.6;color:#697962;margin-top:20px}.game,.scene{min-height:620px}.scene-bottom{z-index:1}.scene-top{position:relative;z-index:2}.obstacle{z-index:2}.rule{margin-top:14px}.instruction{line-height:1.7}@keyframes breathe{50%{box-shadow:0 0 0 15px #28554318,0 0 0 29px #28554308;transform:scale(1.04)}}@media(max-width:720px){.scene{min-height:440px}.obstacle{top:85px;left:34%;right:4%;padding:12px 8px}.obstacle #expression{font-size:25px}.obstacle .eyebrow,.obstacle-caption{font-size:10px}.scene-bottom{padding:20px}.scene-bottom p{margin:8px 0}.game{min-height:0}.voice-orb{margin-top:18px}.map-item strong{font-size:10px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
header{gap:12px}.brand{margin-right:auto}#music{white-space:nowrap}.game{grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr)}.scene{min-height:680px}.art{background-image:url('castle-hall.png');background-size:auto 100%;background-position:50% center;filter:hue-rotate(var(--stage-hue,0deg));transition:filter 1s,background-position 1.7s ease-in-out}.scene:after{background:linear-gradient(180deg,#09242715 35%,#0c202211 60%,#0c2022ed 86%)}.actors{position:absolute;inset:0;pointer-events:none;z-index:1}.hero-track{position:absolute;left:5%;top:37%;width:29%;height:35%;transition:left .3s}.hero-track img{height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 9px 5px #0007);animation:hero-idle 2.8s ease-in-out infinite;transform-origin:50% 90%}.monster-track{position:absolute;right:6%;top:44%;width:29%;height:26%;animation:monster-patrol 4.2s ease-in-out infinite}.monster-track #monster-sprite{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:hue-rotate(var(--monster-hue,0deg)) drop-shadow(0 10px 7px #0006);animation:monster-bounce 1.8s ease-in-out infinite;transform-origin:50% 95%}.obstacle{top:17%;left:41%;right:5%;animation:spell-hover 3s ease-in-out infinite}.obstacle-topic{display:block;font-size:10px;letter-spacing:1px;color:#b8ceb9;margin-top:7px}.obstacle .eyebrow{font-size:16px;letter-spacing:.6px;text-transform:none}.spell-flash{position:absolute;top:43%;right:14%;font-size:100px;color:#fff2b0;text-shadow:0 0 30px #ffc754;opacity:0}.scene.won .monster-track{animation:monster-defeat 1.1s ease-in forwards}.scene.won .spell-flash{animation:spell-burst 1.2s ease-out forwards}.scene.won .hero-track img{animation:hero-celebrate .6s ease-in-out 3}.scene.won .art{transform:none;filter:hue-rotate(var(--stage-hue,0deg)) brightness(1.1)}.scene.travelling .hero-track{animation:hero-walk-across 1.7s linear forwards}.scene.travelling .hero-track img{animation:walking .22s ease-in-out infinite}.scene.travelling .art{background-position:80% center}.scene.arriving:not(.won) .monster-track{animation:monster-enter .75s ease-out,monster-patrol 4.2s .75s ease-in-out infinite}.scene.hit .monster-track #monster-sprite{animation:monster-tease .5s ease-in-out 2,monster-bounce 1.8s 1s ease-in-out infinite}.scene.completed .monster-track{display:none}.scene.completed .hero-track{left:40%;transform:scale(1.12)}.scene.completed .hero-track img{animation:hero-celebrate .9s ease-in-out infinite}.scene.paused *{animation-play-state:paused!important}.scene-bottom{pointer-events:none}.scene-bottom p{font-size:14px}.scene.completed .spell-flash{opacity:.8;right:40%;top:20%;animation:spell-hover 3s infinite}.scene.arriving .obstacle{animation:spell-appear .65s ease-out,spell-hover 3s .65s infinite}
@keyframes hero-idle{50%{transform:translateY(-4px) rotate(1deg)}}@keyframes monster-patrol{50%{transform:translateX(-22px)}}@keyframes monster-bounce{50%{transform:translateY(-15px) scale(.97,1.04)}}@keyframes spell-hover{50%{transform:translateY(-5px)}}@keyframes monster-enter{from{opacity:0;transform:translateX(120px) scale(.6)}to{opacity:1;transform:none}}@keyframes spell-appear{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}@keyframes monster-defeat{30%{transform:translateY(-30px) rotate(-12deg);opacity:1}100%{transform:translateY(-90px) rotate(35deg) scale(.1);opacity:0}}@keyframes spell-burst{15%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(2.5) rotate(90deg)}}@keyframes hero-celebrate{50%{transform:translateY(-18px) rotate(-5deg)}}@keyframes hero-walk-across{0%{left:5%}85%{left:76%;opacity:1}100%{left:95%;opacity:0}}@keyframes walking{50%{transform:translateY(-9px) rotate(4deg)}0%,100%{transform:translateY(0) rotate(-3deg)}}@keyframes monster-tease{50%{transform:translateX(-17px) scale(1.08,.9)}}
@media(max-width:1000px){.game{grid-template-columns:minmax(0,1.15fr) minmax(280px,1fr)}.obstacle{left:31%;right:5%}.brand small{max-width:180px}.quiet{font-size:12px}}@media(max-width:720px){header{flex-wrap:wrap}.brand{width:100%}header .quiet{font-size:12px}.game{grid-template-columns:1fr}.scene{min-height:500px}.hero-track{top:37%;height:29%;width:33%;left:2%}.monster-track{top:43%;height:23%;width:32%}.obstacle{top:16%;left:29%;right:4%}.obstacle .eyebrow{font-size:14px}.scene-bottom h2{font-size:22px}.scene-bottom p{font-size:12px}.scene-bottom .progress{margin-top:12px}.scene-top .pill{font-size:8px}.spell-flash{font-size:65px}.scene.completed .hero-track{left:34%}}
@media(prefers-reduced-motion:reduce){.scene *{animation:none!important}.scene.won .monster-track{opacity:0}.scene.travelling .hero-track{left:65%}}
/* Unframed, extruded equation floats directly over the opponent. */
#energy{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}.obstacle,.scene.arriving .obstacle{top:29%;left:auto;right:1%;width:49%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;animation:equation-hover 3s ease-in-out infinite;z-index:4;pointer-events:none;perspective:700px}.obstacle #expression{font-size:clamp(34px,4.4vw,65px);font-weight:800;line-height:1.45;letter-spacing:1px;margin:0;white-space:nowrap;color:#edffff;transform:rotateY(-12deg) rotateX(8deg);text-shadow:1px 1px 0 #74daee,2px 2px 0 #55bed8,3px 3px 0 #3193b9,4px 4px 0 #236e94,5px 5px 0 #185074,6px 6px 0 #113c5d,7px 7px 0 #0c2a46,9px 12px 9px #000b,0 0 20px #4ad9ff99}.obstacle #expression.long-expression{font-size:clamp(23px,2.8vw,42px);letter-spacing:0}.obstacle.broken{animation:none!important;opacity:0;transform:translateY(-25px) scale(1.14);transition:opacity .45s .35s,transform .6s .35s}.scene.won .monster-track{animation:beam-defeat 1.3s ease-out forwards}.scene.won .hero-track img{animation:beam-recoil .5s ease-out,hero-celebrate .6s .5s ease-in-out 2}.scene.hit .hero-track img{animation:shield-recoil .8s ease-out}.scene.hit .monster-track #monster-sprite{animation:monster-fire .6s ease-out,monster-bounce 1.8s .6s infinite}.scene.won .art{filter:hue-rotate(var(--stage-hue,0deg))}.scene.completed .hero-track img{animation:hero-celebrate .9s infinite}@keyframes equation-hover{50%{transform:translateY(-7px)}}@keyframes beam-defeat{0%,30%{opacity:1;transform:none}42%{filter:brightness(2);transform:translateX(14px) scale(1.06)}100%{opacity:0;transform:translateX(80px) translateY(-25px) scale(.1)}}@keyframes beam-recoil{25%{transform:translateX(-10px) rotate(-5deg)}100%{transform:none}}@keyframes shield-recoil{40%{transform:none}60%{transform:translateX(-8px) rotate(-4deg)}100%{transform:none}}@keyframes monster-fire{35%{transform:translateX(-12px) scale(1.06,.92)}100%{transform:none}}@media(max-width:1000px){.obstacle,.scene.arriving .obstacle{width:57%;right:0}.obstacle #expression{font-size:42px}.obstacle #expression.long-expression{font-size:26px}}@media(max-width:720px){.obstacle,.scene.arriving .obstacle{top:29%;width:56%;right:0}.obstacle #expression{font-size:39px}.obstacle #expression.long-expression{font-size:24px}}@media(prefers-reduced-motion:reduce){.obstacle,.scene.arriving .obstacle{animation:none!important}.obstacle.broken{transition:none!important}}
.mic-retry{background:transparent;border:1px solid #547a66;color:#285543;font-size:15px;padding:12px}.mic-retry:hover{background:#e2e9dc}
html,body{height:100%;overflow:hidden}main.immersive{max-width:none;width:100%;height:100dvh;padding:0;margin:0}.immersive .game{display:block;height:100%;min-height:0;border:0;border-radius:0;box-shadow:none}.immersive .scene{height:100%;min-height:0}.immersive .scene-top{padding:20px 28px;justify-content:space-between}.immersive .art{background-size:cover}.immersive .scene:after{background:linear-gradient(180deg,#081b271a 50%,#081b2733 76%,#081b27c9)}.immersive .hero-track{top:31%;height:43%;width:25%;left:7%}.immersive .monster-track{top:44%;height:29%;width:25%;right:9%}.immersive .obstacle,.immersive .scene.arriving .obstacle{top:28%;right:2%;width:40%}.immersive .obstacle #expression{font-size:clamp(38px,5vw,85px)}.immersive .obstacle #expression.long-expression{font-size:clamp(25px,3.4vw,58px)}.voice-hud{position:absolute;bottom:20px;left:5%;right:5%;z-index:5;text-align:center;pointer-events:none}.voice-hud p{margin:6px 0;color:#e1f2e9;font-size:14px;text-shadow:0 2px 8px #000}.voice-hud #voice-state{font-size:16px}.voice-hud #heard{color:#94e8f2}.voice-hud #feedback{color:#e9d39c}.voice-hud p:empty{display:none}.voice-hud .progress{max-width:420px;margin:16px auto 0;height:3px}.scene[data-voice=listening] #voice-state{color:#8af0d2}.immersive #victory{position:absolute;top:15%;left:20%;right:20%;width:auto;z-index:5;color:#fff5cc;text-shadow:0 3px 15px #000}.immersive #victory p{color:#e4edda}.immersive .scene.completed .hero-track{left:38%}@media(max-width:720px){.immersive .scene-top{padding:16px}.immersive .hero-track{top:32%;height:39%;width:38%;left:1%}.immersive .monster-track{top:45%;height:26%;width:35%;right:3%}.immersive .obstacle,.immersive .scene.arriving .obstacle{top:31%;right:1%;width:57%}.immersive .obstacle #expression{font-size:42px}.immersive .obstacle #expression.long-expression{font-size:26px}.voice-hud{bottom:24px}.immersive #victory{left:8%;right:8%}}

/* Each arithmetic operation has its own environment and creature. */
.immersive .scene .art{filter:none;background-image:url('castle-hall.png');background-size:cover;background-position:center}.immersive .scene[data-operation=subtraction] .art,.immersive .scene[data-operation=multiplication] .art,.immersive .scene[data-operation=division] .art{background-image:url('operation-rooms.png');background-size:300% 100%;background-position:var(--atlas-position) center}.immersive .scene.travelling .art{transform:scale(1.04);transition:transform 1.7s ease-in-out}.immersive .scene .monster-track #monster-sprite{background:url('monster.png') center bottom/contain no-repeat;filter:drop-shadow(0 10px 7px #0006);width:100%;height:100%}.immersive .scene[data-operation=subtraction] #monster-sprite,.immersive .scene[data-operation=multiplication] #monster-sprite,.immersive .scene[data-operation=division] #monster-sprite{background-image:url('operation-monsters.png');background-size:300% 100%;background-position:var(--atlas-position) center}.immersive .scene[data-operation=subtraction] .monster-track #monster-sprite{animation:ghost-float 3s ease-in-out infinite}.immersive .scene[data-operation=multiplication] .monster-track #monster-sprite{animation:golem-stomp 2s ease-in-out infinite}.immersive .scene[data-operation=division] .monster-track #monster-sprite{animation:dragon-hover 1.5s ease-in-out infinite}.immersive .scene.room-enter .art{animation:room-reveal 1s ease-out}.immersive .scene[data-operation] .monster-track{height:32%;width:27%}.immersive .scene.hit #monster-sprite{animation:monster-fire .6s ease-out!important}@keyframes ghost-float{50%{transform:translateY(-23px) rotate(3deg)}}@keyframes golem-stomp{45%{transform:translateY(-5px)}55%{transform:translateY(3px) scale(1.03,.97)}}@keyframes dragon-hover{50%{transform:translateY(-17px) rotate(-3deg)}}@keyframes room-reveal{from{opacity:.1;transform:scale(1.07)}to{opacity:1;transform:scale(1)}}@media(max-width:720px){.immersive .scene[data-operation] .monster-track{width:37%;height:26%}}@media(prefers-reduced-motion:reduce){.immersive .scene.room-enter .art,.immersive .scene[data-operation] #monster-sprite{animation:none!important}}

.voice-hud{bottom:max(20px,env(safe-area-inset-bottom))}.immersive .scene-top{padding-top:max(20px,env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}

/* Больше "сочности" в анимациях: тряска сцены при ударе, пружинистые (overshoot) импакты,
   бодрее патруль монстра между вопросами. Файл собирался слоями патчей (более поздние правила
   каскадно перебивают старые), поэтому здесь намеренно повторяем ТЕ ЖЕ селекторы, что и у
   действующих (в т.ч. !important) правил выше, и ставим наши последними — это гарантирует победу
   независимо от порядка/специфичности прежних слоёв, не трогая остальные их свойства. */
@keyframes impact-shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-5px,0,0)}40%,60%{transform:translate3d(5px,0,0)}}
.scene.hit{animation:impact-shake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes shield-recoil{0%{transform:none}22%{transform:translateX(-16px) rotate(-8deg) scale(.96)}55%{transform:translateX(4px) rotate(2deg)}100%{transform:none}}
@keyframes monster-fire{0%{transform:none}28%{transform:translateX(-20px) scale(1.1,.87)}60%{transform:translateX(5px) scale(.97,1.02)}100%{transform:none}}
@keyframes beam-recoil{0%{transform:none}22%{transform:translateX(-16px) rotate(-8deg)}55%{transform:translateX(4px) rotate(2deg)}100%{transform:none}}
.scene.hit .hero-track img{animation:shield-recoil .48s cubic-bezier(.34,1.56,.64,1)!important}
.scene.hit .monster-track #monster-sprite{animation:monster-fire .42s cubic-bezier(.34,1.56,.64,1)!important}
.immersive .scene.hit #monster-sprite{animation:monster-fire .42s cubic-bezier(.34,1.56,.64,1)!important}
.scene.won .hero-track img{animation:beam-recoil .4s cubic-bezier(.34,1.56,.64,1),hero-celebrate .55s .4s ease-in-out 2!important}
/* ВАЖНО: :not(.won) обязателен — иначе этот !important перебивает
   .scene.won .monster-track{animation:beam-defeat...} (у него нет !important), и монстр
   никогда не "разрушается" при правильном ответе, просто продолжает патрулировать. */
.scene:not(.won) .monster-track{animation:monster-patrol 3.4s ease-in-out infinite!important}
.scene.arriving:not(.won) .monster-track{animation:monster-enter .7s ease-out,monster-patrol 3.4s .7s ease-in-out infinite!important}

/* Стартовый экран выбора языка — показывается первым, поверх всего, пока язык не выбран. */
.lang-select{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#1c3a3d,#0a1618 75%);animation:lang-fade-in .3s ease-out}
.lang-select[hidden]{display:none!important}
.lang-select-card{text-align:center;padding:32px 28px;max-width:340px}
.lang-select-emoji{font-size:56px;margin-bottom:10px}
.lang-select-card h1{font-size:26px;color:#f1d39b;margin:0 0 6px;font-weight:800;letter-spacing:.5px}
.lang-select-card p{font-size:14px;color:#b8ceb9;margin:0 0 26px}
.lang-select-buttons{display:flex;flex-direction:column;gap:14px}
.lang-btn{font:inherit;font-size:18px;font-weight:700;padding:16px 20px;border-radius:14px;border:2px solid #445153;background:#152628;color:#eaf0e7;cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.lang-btn:active{transform:scale(.97)}
.lang-btn.selected{border-color:#e5c487;background:#213f3c;color:#fff4ce;box-shadow:0 0 20px #eec76a44}
@keyframes lang-fade-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.lang-select{animation:none}}
.playback-controls{position:absolute;top:72px;left:16px;right:16px;z-index:10;display:flex;justify-content:center;gap:12px}
.playback-controls button{min-height:44px;min-width:100px;padding:10px 18px;border:1px solid #e5c487;border-radius:10px;background:#142729ed;color:#fff4ce;font:inherit;font-weight:700;touch-action:manipulation}

/* ===== Детские спецэффекты (fx.js) ===== */
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:7;overflow:hidden}
.fx-light{position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen;background:radial-gradient(ellipse 50% 38% at 10% 20%,var(--fx-light,#ffb85c55),transparent 70%),radial-gradient(ellipse 50% 38% at 90% 18%,var(--fx-light,#ffb85c55),transparent 70%),radial-gradient(ellipse 70% 30% at 50% 100%,var(--fx-light,#ffb85c33),transparent 70%);animation:fx-torch 2.6s ease-in-out infinite}
.scene[data-operation=addition]{--fx-light:#9dff7a3d}.scene[data-operation=subtraction]{--fx-light:#7fa8ff4d}.scene[data-operation=multiplication]{--fx-light:#ff8a3d66}.scene[data-operation=division]{--fx-light:#c58bff4d}
@keyframes fx-torch{0%,100%{opacity:.5}30%{opacity:.72}55%{opacity:.55}75%{opacity:.8}}
.fx-flash{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 72% 52%,#ffffffcc,#fff6c400 62%)}
.fx-flash.go{animation:fx-flash .45s ease-out}
@keyframes fx-flash{15%{opacity:1}100%{opacity:0}}
.fx-vignette{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 90px 30px #ff3b5c99}
.fx-vignette.go{animation:fx-vig .8s ease-out}
@keyframes fx-vig{20%{opacity:1}100%{opacity:0}}
.fx-pop-text{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot,0deg));font-weight:900;font-size:clamp(36px,9vw,68px);line-height:1;color:#ffe45c;-webkit-text-stroke:3px #3a1a00;paint-order:stroke fill;text-shadow:0 5px 0 #3a1a00,0 0 26px #ffb000aa;white-space:nowrap;animation:fx-pop 1.25s cubic-bezier(.2,1.6,.4,1) forwards}
.fx-pop-text.big{font-size:clamp(40px,10vw,86px);color:#fff;-webkit-text-stroke-color:#6d168f;text-shadow:0 6px 0 #4b0f66,0 0 34px #ff6fae}
.fx-pop-text.taunt{font-size:clamp(20px,5vw,30px);color:#3a1630;-webkit-text-stroke:0;text-shadow:none;background:#fffdf3;border-radius:20px;padding:9px 16px;box-shadow:0 6px 18px #0007;animation-duration:1.4s}
.fx-pop-text.taunt:after{content:'';position:absolute;left:28%;bottom:-11px;border:11px solid transparent;border-top-color:#fffdf3;border-bottom:0}
@keyframes fx-pop{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) scale(.2)}18%{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot)) scale(1.18)}30%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1)}75%{opacity:1;transform:translate(-50%,-80%) rotate(var(--rot)) scale(1)}100%{opacity:0;transform:translate(-50%,-115%) rotate(var(--rot)) scale(.9)}}
.fx-coin{position:absolute;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:900;color:#8a5a00;background:radial-gradient(circle at 35% 30%,#fff6b0,#ffd23f 45%,#e09a00);box-shadow:0 0 12px #ffd23faa,inset 0 -2px 0 #b97800;transform:translate(-50%,-50%)}
#coins{transition:color .2s}#coins.fx-pop,.fx-rank.fx-pop{animation:fx-pill .4s cubic-bezier(.3,1.8,.5,1)}
@keyframes fx-pill{40%{transform:scale(1.35);box-shadow:0 0 24px #ffd23f;color:#fff3b0}}
.fx-rank{white-space:nowrap;color:#ffe9a8;border-color:#ffd76e55}
.fx-banner{position:absolute;left:50%;top:calc(max(20px,env(safe-area-inset-top)) + 118px);transform:translateX(-50%);text-align:center;padding:12px 26px 15px;border-radius:22px;background:linear-gradient(180deg,#2b1d4fe6,#141029f0);border:2px solid #ffd76e;box-shadow:0 0 0 4px #ffd76e33,0 18px 40px #000a,0 0 40px #ffd76e55;color:#fff4cc;white-space:nowrap;animation:fx-banner 2.6s cubic-bezier(.2,1.4,.4,1) forwards}
.fx-banner .icon{font-size:40px;display:block;line-height:1.15;animation:fx-wobble 1s ease-in-out infinite}
.fx-banner b{display:block;font-size:clamp(20px,5.4vw,32px);font-weight:900;color:#ffe08a;text-shadow:0 3px 0 #5b3a00}
.fx-banner small{display:block;margin-top:4px;font-size:14px;color:#d9d2ff}
@keyframes fx-banner{0%{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.5)}14%{opacity:1;transform:translateX(-50%) scale(1.06)}22%{transform:translateX(-50%) scale(1)}82%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.85)}}
@keyframes fx-wobble{50%{transform:rotate(-10deg) scale(1.12)}}
.fx-combo{position:absolute;left:max(16px,env(safe-area-inset-left));top:calc(max(20px,env(safe-area-inset-top)) + 112px);padding:8px 15px;border-radius:999px;font-weight:900;font-size:21px;color:#fff;background:linear-gradient(135deg,#ff7a18,#ff2d6f);box-shadow:0 0 0 3px #ffd76e88,0 0 22px #ff5a3caa;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.3,1.8,.5,1)}
.fx-combo.on{opacity:1;transform:scale(1)}.fx-combo.on.bump{animation:fx-bump .45s cubic-bezier(.3,1.8,.5,1)}
.fx-combo small{font-size:11px;font-weight:800;margin-left:6px;letter-spacing:.6px;text-transform:uppercase;opacity:.9}
@keyframes fx-bump{40%{transform:scale(1.4) rotate(-7deg)}}
.fx-toast{position:absolute;left:50%;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 120px);transform:translateX(-50%);text-align:center;background:linear-gradient(135deg,#ffe27a,#ffb238);color:#4a2600;padding:11px 24px 13px;border-radius:18px;font-weight:900;font-size:21px;box-shadow:0 10px 30px #0008,0 0 30px #ffd23f88;white-space:nowrap;animation:fx-toast 3.2s ease forwards}
.fx-toast small{display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:.7;margin-bottom:2px}
@keyframes fx-toast{0%{opacity:0;transform:translateX(-50%) translateY(40px) scale(.7)}12%{opacity:1;transform:translateX(-50%) scale(1.06)}20%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
/* Серия из 3+ ответов: герой светится золотом. */
.scene.fx-on-fire .hero-track img{filter:drop-shadow(0 0 8px #ffcf4a) drop-shadow(0 0 20px #ff7a18) drop-shadow(0 9px 5px #0007)}
.scene.fx-on-fire .hero-track:before{content:'';position:absolute;left:5%;right:5%;bottom:-5%;height:20%;border-radius:50%;background:radial-gradient(ellipse,#ffcf4a99,transparent 70%);animation:fx-aura 1s ease-in-out infinite}
@keyframes fx-aura{50%{transform:scale(1.3);opacity:.55}}
.scene.won #monster-sprite{filter:brightness(2.3) drop-shadow(0 0 18px #fff)!important}
/* Индикатор микрофона. */
.fx-wave{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:22px;margin:0 auto 4px;opacity:.3;transition:opacity .3s}
.fx-wave i{display:block;width:5px;height:5px;border-radius:3px;background:#8af0d2;box-shadow:0 0 8px #8af0d2}
.scene[data-voice=listening] .fx-wave{opacity:1}
.scene[data-voice=listening] .fx-wave i{animation:fx-eq .9s ease-in-out infinite}
.scene[data-voice=listening] .fx-wave i:nth-child(2){animation-delay:-.25s}.scene[data-voice=listening] .fx-wave i:nth-child(3){animation-delay:-.5s}.scene[data-voice=listening] .fx-wave i:nth-child(4){animation-delay:-.15s}.scene[data-voice=listening] .fx-wave i:nth-child(5){animation-delay:-.4s}
@keyframes fx-eq{0%,100%{height:5px}50%{height:22px}}
/* Радужная полоса прогресса. */
.voice-hud .progress{height:8px;max-width:440px;background:#ffffff22;box-shadow:inset 0 1px 3px #0008}
.voice-hud .progress i{background:linear-gradient(90deg,#ffd23f,#ff7ab6,#5be7ff,#8dff6a,#ffd23f);background-size:300% 100%;border-radius:4px;box-shadow:0 0 12px #ffd23f99;animation:fx-shimmer 3s linear infinite}
@keyframes fx-shimmer{to{background-position:300% 0}}
/* Сокровище с вращающимися лучами. */
.immersive #victory .treasure{position:relative;display:inline-block;animation:fx-treasure 1.4s ease-in-out infinite}
.immersive #victory .treasure:before{content:'';position:absolute;left:50%;top:50%;width:280px;height:280px;margin:-140px 0 0 -140px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(#ffd76e66 0 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%);animation:fx-rays 9s linear infinite}
.immersive #victory h1{font-size:clamp(32px,7.5vw,56px);font-weight:900;color:#ffe08a;-webkit-text-stroke:2px #5b3a00;paint-order:stroke fill;animation:fx-grow .8s cubic-bezier(.2,1.6,.4,1)}
@keyframes fx-treasure{50%{transform:translateY(-10px) scale(1.08)}}
@keyframes fx-rays{to{transform:rotate(360deg)}}
@keyframes fx-grow{from{transform:scale(.3);opacity:0}}
@media(max-width:720px){.fx-banner{top:calc(max(20px,env(safe-area-inset-top)) + 112px);padding:10px 18px 12px}.fx-banner small{font-size:12px}.fx-combo{font-size:18px;top:calc(max(20px,env(safe-area-inset-top)) + 110px)}.fx-toast{font-size:18px}}
@media(prefers-reduced-motion:reduce){.fx-light{animation:none;opacity:.6}}
/* Экран победы: заголовок по центру, тёмная подложка под текстом, герой ниже текста. */
.immersive #victory{background:radial-gradient(ellipse at 50% 45%,#0b0a1fcc,#0b0a1f88 55%,transparent 75%);padding:10px 6px 18px;border-radius:32px}
.immersive #victory h1{max-width:none;margin:6px auto 0}
.immersive #victory strong{color:#ffd23f;-webkit-text-stroke:1px #5b3a00;paint-order:stroke fill;text-shadow:0 0 18px #ffb000aa,0 3px 10px #000;margin:16px 0}
.immersive .scene.completed .hero-track{top:58%;height:27%}
@media(max-width:720px){.immersive #victory{top:13%}.immersive #victory p{font-size:15px;line-height:1.5}}
