/* Hello Sky — стиль Hello Hallo: navy, голубой, зелёный, жёлтый; Montserrat и рукописный Caveat.
   Анимации интерфейса — только transform и opacity (видеокарта), небо и полёт рисует canvas. */
:root{
  --navy:#1B3F8F; --blue:#3B82F6; --sky:#8EC5FF; --green:#2FA36B; --yellow:#F5B400; --coral:#FF6B6B; --purple:#7C4DFF; --pink:#FF6F91;
  --ink:#1E2A44; --muted:#5B6B85; --line:#DCE7F3; --paper:#FFFFFF; --soft:#F4F9FD;
  --font:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif; --hand:Caveat,"Comic Sans MS",cursive;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --r:22px; --shadow:0 2px 6px rgba(27,63,143,.08),0 14px 34px rgba(27,63,143,.16);
  --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#DDEEFF;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}
body{position:fixed;inset:0;touch-action:none}
input{-webkit-user-select:text;user-select:text;font-family:var(--font)}
button{font-family:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg .f{fill:currentColor;stroke:none}
#sky{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
[hidden]{display:none!important}

/* ---------- экраны ---------- */
.scr,.sheet{position:fixed;inset:0;z-index:10;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .32s var(--out),transform .42s var(--out),visibility 0s .42s}
.scr{transform:translateY(16px)}
/* направление перехода (ui.js, show): «вглубь» — уходящий экран чуть влево, «назад» — уезжает вправо */
body[data-nav=push] .scr:not(.on){transform:translateX(-10%)}
body[data-nav=pop] .scr:not(.on){transform:translateX(26%)}
/* разделы нижней панели: уходящий экран сдвигается в сторону, противоположную нажатой кнопке */
body[data-nav=tabR] .scr:not(.on){transform:translateX(-16%)}
body[data-nav=tabL] .scr:not(.on){transform:translateX(16%)}
.scr.on{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:opacity .32s var(--out),transform .5s var(--out),visibility 0s}
.scr.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;background:linear-gradient(180deg,rgba(234,244,255,.94),rgba(244,249,253,.97));padding:calc(var(--sat) + 12px) calc(var(--sar) + 16px) calc(var(--sab) + 28px) calc(var(--sal) + 16px)}
.scr.scroll::-webkit-scrollbar{display:none}
.wrap{max-width:560px;margin:0 auto}
.sheet{z-index:30;display:flex;align-items:flex-end;justify-content:center;background:rgba(15,32,72,.42);padding:0 calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px)}
.sheet.on{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .28s var(--out),visibility 0s}
.sheet .panel{width:100%;max-width:480px;background:var(--paper);border-radius:28px;padding:22px 20px 18px;box-shadow:0 -10px 40px rgba(15,32,72,.25);transform:translateY(110%);transition:transform .5s var(--out);max-height:calc(100% - var(--sat) - 24px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.sheet.on .panel{transform:none}
@media (min-width:700px){.sheet{align-items:center}.sheet .panel{transform:translateY(40px) scale(.96);opacity:0;transition:transform .45s var(--out),opacity .3s}.sheet.on .panel{transform:none;opacity:1}}

/* ---------- кнопки ---------- */
.ib{width:46px;height:46px;border-radius:16px;display:inline-grid;place-items:center;font-size:22px;color:var(--navy);transition:transform .25s var(--spring)}
.ib:active{transform:scale(.9)}
.glass{background:rgba(255,255,255,.82);box-shadow:0 2px 10px rgba(27,63,143,.14)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 22px;border-radius:18px;font-weight:800;font-size:16.5px;letter-spacing:-.01em;transition:transform .22s var(--spring),box-shadow .2s;position:relative;overflow:hidden}
.btn svg{font-size:20px}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(180deg,#2457C5,var(--navy));color:#fff;box-shadow:0 2px 0 #12306F,0 10px 24px rgba(27,63,143,.32)}
.btn.green{background:linear-gradient(180deg,#38B97A,var(--green));color:#fff;box-shadow:0 2px 0 #1E7A4E,0 10px 24px rgba(47,163,107,.3)}
.btn.gold{background:linear-gradient(180deg,#FFCC33,var(--yellow));color:#4A3200;box-shadow:0 2px 0 #C98F00,0 10px 24px rgba(245,180,0,.3)}
.btn.ghost{background:#EEF4FF;color:var(--navy)}
.btn.line{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--line)}
.btn.danger{background:#FFF0F0;color:#C62828}
.btn.wide{width:100%}
.btn .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.6s 1.2s infinite}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.row{display:flex;gap:10px}
.row>*{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:13px;background:rgba(255,255,255,.86);box-shadow:0 2px 10px rgba(27,63,143,.12);font-weight:800;font-size:15px;color:var(--navy)}
.chip svg{font-size:18px}
.chip.wallet svg{color:var(--yellow);filter:drop-shadow(0 1px 0 #C98F00)}
.chip.streak svg{color:#FF7A3D}
.chip.pop{animation:pop .5s var(--spring)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- загрузка — как у сайта Hello Hallo ----------
   Небо с облаками и холмами, по краям рисуются Лондон и Берлин (те же рисунки, что на сайте), флаги вылетают,
   «Welcome!» — «Willkommen!». В центре — бумажный самолётик влетает по пунктиру и здоровается, под ним Hello / Sky.
   Полоска загрузки, когда всё готово, утолщается в кнопку «Играть». --k — множитель задержек: тем, кто уже играл, быстрее */
#loader{z-index:50;display:grid;place-items:center;overflow:hidden;--k:1;cursor:default}
#loader.quick{--k:.55}
#loader.ready{cursor:pointer}
#loader.exit{pointer-events:none}
#loader.fade{opacity:0;transition:opacity .45s ease}
.ld-bg{position:absolute;inset:0;background:linear-gradient(180deg,#E3F3FE 0%,#EEF8FE 38%,#F5FBFE 66%,#E4F6EC 100%)}
.pd{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pd>*{position:absolute}
.pd .cl{left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.96),rgba(255,255,255,.62) 52%,rgba(255,255,255,0));animation:ldDrift 9s ease-in-out infinite alternate}
.pd .cl:nth-child(2){animation-duration:12s;animation-direction:alternate-reverse}.pd .cl:nth-child(3){animation-duration:14s}
.pd .hl{left:var(--x);bottom:var(--b,-18%);width:var(--w);height:var(--h,34%);border-radius:50%;background:radial-gradient(closest-side,var(--c) 64%,transparent)}
.pd .lt{left:var(--x);top:var(--y);font-weight:800;font-size:var(--s,64px);line-height:1;color:var(--c);opacity:0;rotate:var(--r,0deg);animation:ldLt .9s calc(var(--k) * .3s) forwards}
.pd .lt:nth-child(odd){animation-delay:calc(var(--k) * .55s)}
@media (max-width:1179px){.pd .lt{display:none}}
@keyframes ldLt{to{opacity:.15}}
@keyframes ldDrift{from{translate:-22px 0}to{translate:22px 0}}
/* рисунки линией (как на сайте) */
.lm{overflow:visible;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.lm .qt{stroke-width:1.1}.lm .qns{stroke:none}
.lm .qw{fill:#fff}.lm .qs{fill:#F4E4BC}.lm .qr{fill:#E5484D}.lm .qrd{fill:#C23B3F}.lm .qk{fill:#2B2F3A}.lm .qsl{fill:#7C93C3}.lm .qau{fill:#F5B400}.lm .qgl{fill:#EAF3FF}.lm .qpt{fill:#5FB38A}.lm .qbr{fill:#8A5A2B}.lm .qbs{fill:#CFE3FF}.lm .qgy{fill:#DCE3EE}
.lm .qbm{stroke:#8A5A2B;stroke-width:2}.lm .qsp{stroke-width:.8;opacity:.55}.lm .qbls{stroke:#3B82F6;stroke-width:2.2}
.lm .qlamp{fill:#161A22}.lm .qamr{fill:#FF4D4F}.lm .qamg{fill:#2EE07A;opacity:.2}
.lm .qpzo{stroke:var(--navy);stroke-width:5.2}.lm .qpz{stroke:#C47A35;stroke-width:3.2}
.lm .qring{opacity:0}
/* по краям — Лондон и Берлин: вырастают от края к центру, рисуются линией, потом заливаются */
.ld-city{position:absolute;bottom:4.5%;display:flex;align-items:flex-end;gap:clamp(8px,1.3vw,18px);--bb:clamp(92px,min(25vh,34vw),228px);--tv:clamp(100px,min(27vh,38vw),246px)}
.ld-city.en{left:clamp(12px,3.2vw,56px);--hh:var(--bb)}.ld-city.de{right:clamp(12px,3.2vw,56px);--hh:var(--tv)}
.ld-city .lc{position:relative;display:block}
.ld-city .lc .lm{display:block;height:100%;width:auto}
.ld-city .lc::after{content:"";position:absolute;left:50%;bottom:-5px;width:92%;height:10px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(27,63,143,.16),rgba(27,63,143,0))}
.lc-bigben{height:var(--bb)}.lc-tv{height:var(--tv)}
.lc-eye{height:clamp(70px,min(17vh,24vw),160px)}.lc-phonebox{height:clamp(46px,min(11vh,19vw),104px)}.lc-bus{height:clamp(30px,min(7.4vh,11vw),70px)}
.lc-gate{height:clamp(40px,min(12vh,13vw),116px)}.lc-fachwerk{height:clamp(40px,min(10vh,14vw),98px)}.lc-ampel{height:clamp(50px,min(13vh,19vw),120px)}
@media (max-width:899px){.ld-city .lc.dt{display:none}}
@media (max-height:700px){
  .ld-city{--bb:clamp(56px,14vh,110px);--tv:clamp(60px,15vh,118px)}
  .lc-eye{height:clamp(50px,11.5vh,110px)}.lc-phonebox{height:clamp(32px,8vh,70px)}.lc-bus{height:clamp(22px,5.2vh,46px)}
  .lc-gate{height:clamp(28px,7vh,60px)}.lc-fachwerk{height:clamp(30px,7vh,64px)}.lc-ampel{height:clamp(36px,9vh,80px)}
  .ld-hi{font-size:11px;padding:4px 9px 5px;border-radius:12px}
  .ld-fl{width:24px}.ld-bit{width:20px}
}
@media (max-height:520px){.ld-city{display:none}}
.ld-fl{position:absolute;top:-4%;width:clamp(26px,2.8vw,40px);z-index:2;--ox:0;--oy:.5}
.ld-fl img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 5px rgba(27,63,143,.16));transform-origin:0 100%;rotate:-6deg}
.en .ld-fl{left:calc(var(--bb) * .15)}
.de .ld-fl{right:calc(var(--tv) * .14 + 1px);top:-2%}
.de .ld-fl img{scale:-1 1;rotate:6deg;transform-origin:50% 100%}
.ld-hi{position:absolute;z-index:3;padding:6px 12px 7px;border-radius:15px;font-weight:800;font-size:clamp(12px,1.05vw,15px);line-height:1;letter-spacing:-.005em;color:#fff;white-space:nowrap;box-shadow:0 6px 14px rgba(27,63,143,.2)}
.en .ld-hi{left:calc(var(--bb) * .32 + 12px);top:14%;background:var(--blue);border-bottom-left-radius:4px;rotate:-4deg;transform-origin:0 100%}
.de .ld-hi{right:calc(var(--tv) * .28 + 12px);top:24%;background:var(--green);border-bottom-right-radius:4px;rotate:4deg;transform-origin:100% 100%}
.ld-bit{position:absolute;bottom:-2px;width:clamp(22px,2.3vw,32px);--oy:.5}
.en .ld-bit{left:calc(100% + 8px)}.de .ld-bit{right:calc(100% + 8px)}
.ld-bit .lm{display:block;width:100%;height:auto}
.ld-city.en .lc:nth-child(1){--d:calc(var(--k) * .2s)}.ld-city.en .lc:nth-child(2){--d:calc(var(--k) * .34s)}.ld-city.en .lc:nth-child(3){--d:calc(var(--k) * .48s)}.ld-city.en .lc:nth-child(4){--d:calc(var(--k) * .62s)}
.ld-city.de .lc:nth-child(4){--d:calc(var(--k) * .3s)}.ld-city.de .lc:nth-child(3){--d:calc(var(--k) * .44s)}.ld-city.de .lc:nth-child(2){--d:calc(var(--k) * .58s)}.ld-city.de .lc:nth-child(1){--d:calc(var(--k) * .72s)}
.ld-city .lc{animation:snRise .95s var(--d) cubic-bezier(.3,1.35,.5,1) backwards}
.ld-city .lc .lm :is(path,circle,rect,ellipse){animation:snFill .6s calc(var(--d) + .5s) ease-out backwards}
.ld-city .lc .lm [pathLength]{animation:snDraw 1.1s var(--d) cubic-bezier(.45,0,.2,1) backwards,snFill .6s calc(var(--d) + .5s) ease-out backwards}
.ld-fl{animation:snFlyX .9s calc(var(--k) * 1.35s) cubic-bezier(.2,.75,.3,1) backwards}
.ld-fl img{animation:snFlyY .9s calc(var(--k) * 1.35s) cubic-bezier(.3,1.5,.55,1) backwards,sway 6s 2.3s ease-in-out infinite}
.de .ld-fl{animation-delay:calc(var(--k) * 1.5s)}.de .ld-fl img{animation-delay:calc(var(--k) * 1.5s),2.45s}
.ld-hi{animation:snPop .6s calc(var(--k) * 1.75s) cubic-bezier(.3,1.6,.5,1) backwards,snBob 3.8s 2.4s ease-in-out infinite}
.de .ld-hi{animation-delay:calc(var(--k) * 2.1s),2.75s}
.ld-bit{transform-origin:50% 90%;animation:snFlyX 1s calc(var(--k) * 1.9s) cubic-bezier(.2,.75,.3,1) backwards,snBob2 4.6s 2.9s ease-in-out infinite}
.ld-bit .lm{animation:snBurst 1s calc(var(--k) * 1.9s) cubic-bezier(.3,1.45,.5,1) backwards}
.de .ld-bit{animation-delay:calc(var(--k) * 2.05s),3.05s}.de .ld-bit .lm{animation-delay:calc(var(--k) * 2.05s)}
.ld-city .qhand{transform-origin:24px 49px;animation:snSpin 12s linear infinite}
.ld-city .qblink{animation:snBlink 1.8s steps(1) infinite}
.ld-city .qwheel{transform-origin:64px 58px;animation:snSpin 50s linear infinite}
.ld-city .qamr{animation:snRed 6s 1.4s infinite}.ld-city .qamg{animation:snGreen 6s 1.4s infinite}
.ld-city .qring{animation:snRing 5.4s 1.8s infinite}
.ld-city .lm[data-lm="phonebox"]{transform-origin:50% 100%;animation:snShake 5.4s 1.8s infinite}
.ld-city .lm[data-lm="bus"]{animation:snBus 4.2s 1.5s infinite}
@keyframes snRise{from{opacity:0;transform:translateY(26px) scaleY(.8)}}
@keyframes snDraw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes snFill{from{fill-opacity:0}}
@keyframes snFlyX{from{translate:calc(var(--ox,0) * var(--hh)) 0}}
@keyframes snFlyY{0%{translate:0 calc(var(--oy,.4) * var(--hh));scale:.2;rotate:-160deg;opacity:0}40%{opacity:1}}
@keyframes snBurst{0%{transform:translateY(calc(var(--oy,.3) * var(--hh) * .6)) rotate(240deg) scale(.1);opacity:0}35%{opacity:1}}
@keyframes snPop{from{opacity:0;transform:scale(.25) translateY(10px)}}
@keyframes snBob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes snBob2{0%,100%{transform:none}50%{transform:translateY(-3px) rotate(-7deg)}}
@keyframes snSpin{to{transform:rotate(360deg)}}
@keyframes snBlink{0%{opacity:1}50%{opacity:.2}}
@keyframes snRing{0%,68%,100%{opacity:0}72%,90%{opacity:1}}
@keyframes snShake{0%,68%,92%,100%{transform:none}72%{transform:rotate(-3deg)}76%{transform:rotate(3deg)}80%{transform:rotate(-2.4deg)}84%{transform:rotate(2.4deg)}88%{transform:rotate(-1deg)}}
@keyframes snBus{0%,78%,100%{transform:none}82%{transform:translateY(-2px)}86%{transform:none}90%{transform:translateY(-1px)}94%{transform:none}}
@keyframes snRed{0%,44%,100%{opacity:1}50%,94%{opacity:.18}}
@keyframes snGreen{0%,44%,100%{opacity:.2}50%,94%{opacity:1}}
@keyframes sway{0%,100%{transform:none}50%{transform:rotate(-3deg) translateY(-5px)}}
/* знак: самолётик влетает по пунктиру, качается и здоровается — Hello! · Привет! · Let's fly! */
.ld-card{position:relative;z-index:1;text-align:center;padding:0 24px;max-width:560px;display:flex;flex-direction:column;align-items:center;margin-top:-7vh}
.ld-mark{position:relative;width:clamp(104px,28vw,132px);aspect-ratio:1;margin:0 auto 10px}
.ld-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ld-trail .tr{fill:none;stroke:var(--navy);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:.1 7.2;opacity:.55}
.ld-trail .trm{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ldTrail calc(var(--k) * .85s) calc(var(--k) * .12s) cubic-bezier(.45,0,.2,1) forwards}
@keyframes ldTrail{to{stroke-dashoffset:0}}
.ld-plane .sh{fill:var(--navy);opacity:.14}
.ld-plane .kl{fill:var(--blue);stroke:var(--navy);stroke-width:3.4;stroke-linejoin:round}
.ld-plane .wg{fill:url(#ldWg);stroke:var(--navy);stroke-width:3.2;stroke-linejoin:round}
.ld-plane .cr{stroke:#BCD3F5;stroke-width:2.7;stroke-linecap:round}
.ld-plane .ax{stroke:var(--navy);stroke-width:3.4;stroke-linecap:round}
.ld-plane{animation:ldPlaneIn calc(var(--k) * .95s) calc(var(--k) * .3s) cubic-bezier(.3,1.25,.5,1) both,ldFloat 3.4s calc(var(--k) * 1.5s) ease-in-out infinite}
#loader.exit .ld-plane{animation-play-state:paused}
/* на уходе заставки мелкие анимации внутри рисунков (часы, автобус, светофор) замирают: города улетают целиком, без перерисовки */
#loader.exit .ld-city *,#loader.exit .ld-bg .pd *{animation-play-state:paused}
@keyframes ldPlaneIn{from{opacity:0;transform:translate(-52px,46px) rotate(-24deg) scale(.42)}}
/* вход с сайта: самолётик уже здесь — прилетел со страницы сайта и стоит там, где остановился; встаёт на место */
#loader.hs-hand .ld-plane{animation:ldHand calc(var(--k) * 1.1s) cubic-bezier(.3,1.18,.45,1) both,ldFloat 3.4s calc(var(--k) * 1.5s) ease-in-out infinite}
#loader.hs-hand .ld-trail{display:none}
@keyframes ldHand{from{transform:translate(var(--hx),var(--hy)) scale(var(--hs))}}
@keyframes ldFloat{0%,100%{transform:none}50%{transform:translateY(-5px) rotate(-2deg)}}
.ld-say{position:absolute;left:calc(100% - 4px);bottom:74%;display:grid;padding:6px 14px 8px;border-radius:17px 17px 17px 5px;background:#fff;box-shadow:0 2px 6px rgba(27,63,143,.08),0 12px 26px rgba(27,63,143,.14);white-space:nowrap;transform-origin:0 100%;opacity:0;animation:ldSayIn .55s calc(var(--k) * 1.25s) cubic-bezier(.2,.8,.2,1) both}
.ld-say b{grid-area:1/1;font-family:var(--hand);font-weight:700;font-size:23px;line-height:1.05;text-align:left;opacity:0}
.ld-say .s1{color:var(--blue);animation:ldWord .85s calc(var(--k) * 1.3s) both}
.ld-say .s2{color:var(--green);animation:ldWord .85s calc(var(--k) * 2.1s) both}
.ld-say .s3{color:var(--navy);animation:ldWordIn .45s calc(var(--k) * 2.9s) both}
@keyframes ldSayIn{from{opacity:0;transform:scale(.35) rotate(-10deg)}to{opacity:1;transform:rotate(-4deg)}}
@keyframes ldWord{0%{opacity:0;transform:translateY(7px)}18%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-7px)}}
@keyframes ldWordIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (max-width:420px){.ld-say{left:calc(100% - 18px);bottom:84%}.ld-say b{font-size:21px}}
/* надпись: Hello — как на сайте, с Биг‑Беном вместо «l»; Sky — второй строкой */
.ld-word{width:clamp(172px,48vw,236px);margin:0 auto}
.ld-word svg{width:100%;height:auto;display:block;overflow:hidden;stroke:none}
.ld-word .w1,.ld-word .w2{animation:ldRise .8s cubic-bezier(.2,.8,.2,1) both}.ld-word .w1{animation-delay:calc(var(--k) * .5s)}.ld-word .w2{animation-delay:calc(var(--k) * .62s)}
@keyframes ldRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.ld-word :is(.tw,.tw-hand){transform-box:fill-box;transform-origin:50% 100%}
.ld-word :is(.tw-face,.tw-knob){transform-box:fill-box;transform-origin:50% 50%}
.ld-word .tw-ben{animation:lgRise .75s calc(var(--k) * 1.05s) cubic-bezier(.3,1.2,.5,1) both}
.ld-word :is(.tw-face,.tw-knob){animation:lgPop .45s calc(var(--k) * 1.55s) cubic-bezier(.3,1.6,.5,1) both}
.ld-word .tw-hand{animation:lgSpin 1.4s calc(var(--k) * 1.6s) cubic-bezier(.3,0,.2,1) both}
@keyframes lgRise{0%{transform:scaleY(0)}60%{transform:scaleY(1.08)}80%{transform:scaleY(.97)}100%{transform:none}}
@keyframes lgPop{from{opacity:0;transform:scale(0)}}
@keyframes lgSpin{from{transform:rotate(-720deg)}}
.ld-sub{margin:12px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;opacity:0;animation:ldUp .7s calc(var(--k) * .95s) cubic-bezier(.2,.8,.2,1) forwards}
.ld-sub i{width:6px;height:6px;border-radius:50%;background:var(--green)}
@keyframes ldUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* полоска загрузки → кнопка «Играть»: тонкая полоска утолщается в таблетку того же градиента */
.ld-cta{position:relative;width:min(244px,64vw);height:58px;margin:18px auto 0;display:grid;place-items:center}
.ld-bar{width:100%;height:6px;border-radius:999px;background:rgba(27,63,143,.10);overflow:hidden;opacity:0;animation:ldUp .6s calc(var(--k) * .6s) forwards;transition:opacity .2s .25s}
.ld-bar span{display:block;height:100%;width:6%;border-radius:inherit;background:linear-gradient(90deg,var(--navy),var(--blue) 50%,var(--green));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.ld-go{position:absolute;inset:0;border-radius:999px;color:#fff;font-weight:800;font-size:18.5px;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(90deg,var(--navy),var(--blue) 50%,var(--green));box-shadow:0 2px 0 rgba(18,48,111,.35),0 14px 30px rgba(27,63,143,.28);clip-path:inset(calc(50% - 3px) 0 round 999px);opacity:0;pointer-events:none;transition:clip-path .6s cubic-bezier(.2,.8,.2,1),opacity .15s,transform .25s var(--spring)}
#loader.ready .ld-bar{opacity:0}
#loader.ready .ld-go{clip-path:inset(0 round 999px);opacity:1;pointer-events:auto;animation:ldPulse 2.4s 1.3s ease-in-out infinite}
.ld-go svg{font-size:19px;opacity:0;transform:scale(.5);transition:opacity .3s .32s,transform .45s .32s var(--spring)}
.ld-go .ld-ready{opacity:0;transform:translateY(6px);transition:opacity .3s .36s,transform .45s .36s var(--out)}
#loader.ready .ld-go svg,#loader.ready .ld-go .ld-ready{opacity:1;transform:none}
.ld-go:active{transform:scale(.95)}
@keyframes ldPulse{0%,100%{scale:1}55%{scale:1.035}}
.ld-wait{margin:8px 0 0;min-height:18px;font-size:12.5px;font-weight:700;color:var(--muted);opacity:0;animation:ldUp .6s calc(var(--k) * 1.1s) forwards;transition:opacity .3s}
#loader.ready .ld-wait{opacity:0!important;animation:none}
#loader.err .ld-wait{color:#C62828;opacity:1;animation:none}
.ld-by{margin:6px 0 0;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);opacity:0;animation:ldUp .7s calc(var(--k) * 1.2s) forwards}
.ld-noscript{position:absolute;bottom:40%;font-weight:700}
@media (max-height:640px){.ld-card{margin-top:-10vh}.ld-mark{width:92px;margin-bottom:4px}.ld-word{width:170px}.ld-cta{margin-top:12px}}
/* искры, когда самолётик садится в меню */
.spark{position:fixed;z-index:60;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;pointer-events:none;box-shadow:0 0 10px currentColor}
.spark.ring{width:48px;height:48px;margin:-24px 0 0 -24px;border:2px solid rgba(59,130,246,.7);background:none;box-shadow:0 0 18px rgba(59,130,246,.35)}
@media (prefers-reduced-motion:reduce){#loader *,#loader *::before,#loader *::after{animation-duration:.01s!important;animation-delay:0s!important}}

/* ---------- меню-лобби ----------
   Шапка: пилот (звание и кольцо опыта), звёзды, настройки. «Окно» неба — там кружит самолётик (холст за меню).
   Переключатель «Детям | Профи» — капля цвета переезжает пружиной, карточки разделов сдвигаются вбок.
   Панель разделов внизу — общая для меню, ангара, наград, рекордов и слов */
#menu{display:flex;flex-direction:column;align-items:center;gap:10px;padding:calc(var(--sat) + 8px) calc(var(--sar) + 14px) calc(var(--sab) + 112px) calc(var(--sal) + 14px);pointer-events:none}
#menu.on>*{pointer-events:auto}
#menu>*{width:100%;max-width:480px;flex:none}
/* backwards, не both: после «наведения резкости» меню снова слушается перехода экранов (иначе не растворялось при уходе) */
#menu.focus{animation:lbFocus 1.3s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes lbFocus{from{transform:scale(1.07);opacity:.3}to{transform:none;opacity:1}}
.lb-top{display:flex;align-items:center;gap:8px}
.lb-sp{flex:1}
.lb-me{display:flex;align-items:center;gap:9px;height:46px;padding:0 14px 0 4px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 2px 10px rgba(27,63,143,.14);color:var(--navy);min-width:0;max-width:58%;transition:transform .25s var(--spring)}
.lb-me:active{transform:scale(.95)}
.lb-av{position:relative;width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#E7EEFF,#CFDCFF);color:#2457C5}
.lb-ring{position:absolute;left:-3px;top:-3px;width:44px;height:44px;transform:rotate(-90deg)}
.lb-ring circle{fill:none;stroke:rgba(27,63,143,.12);stroke-width:3}
.lb-ring .v{stroke:#F5B400;stroke-linecap:round;transition:stroke-dasharray 1.1s var(--out)}
.lb-wi{font-size:21px}
.lb-who{display:flex;flex-direction:column;min-width:0;text-align:left;line-height:1.12}
.lb-who b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-who small{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.lb-hero{position:relative;flex:1 1 auto!important;min-height:92px;max-height:280px;display:flex;flex-direction:column;align-items:center;padding-top:min(2.6vh,22px);pointer-events:none!important}
.lb-wm{width:min(76vw,300px);height:auto;stroke:none;filter:drop-shadow(0 6px 16px rgba(27,63,143,.16))}
.lb-wm .tw-hand{transform-box:fill-box;transform-origin:50% 100%}
#menu.on .lb-wm .w1,#menu.on .lb-wm .w2{animation:wmIn .7s var(--out) both}#menu.on .lb-wm .w2{animation-delay:.08s}
@keyframes wmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#menu.dark .lb-wm [fill="#1B3F8F"]{fill:#FFFFFF}
#menu.dark .lb-wm [fill="#3B82F6"]{fill:#8FC0FF}
#menu.dark .lb-wm{filter:drop-shadow(0 6px 22px rgba(0,0,0,.45))}
.lb-de{pointer-events:auto;margin-top:8px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 5px;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 4px 12px rgba(27,63,143,.1);font-size:12.5px;font-weight:800;color:#4A5875;transition:transform .22s var(--spring)}
.lb-de:active{transform:scale(.94)}
.lb-de .flag{font-size:21px}
.lb-de em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:linear-gradient(90deg,#FFCE00,#FF9F1C);color:#4A3200}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;height:50px;padding:4px;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:0 6px 20px rgba(27,63,143,.14)}
.seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-size:15.5px;font-weight:800;color:var(--navy);transition:color .35s}
.seg button svg{font-size:19px;transition:transform .45s var(--spring)}
.seg button.on{color:#fff}
.seg button.on svg{transform:scale(1.12) rotate(-6deg)}
.seg-ink{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(135deg,#3CC283,#24945E);box-shadow:0 6px 16px rgba(47,163,107,.35);transition:transform .55s cubic-bezier(.3,1.3,.5,1),background .45s,box-shadow .45s}
.seg.pro .seg-ink{transform:translateX(100%);background:linear-gradient(135deg,#2F6BE0,#1B3F8F);box-shadow:0 6px 16px rgba(27,63,143,.35)}
.lb-panes{position:relative}
.lb-pane{display:grid;gap:10px;transition:transform .5s var(--out),opacity .3s var(--out)}
.lb-pane:not(.on){position:absolute;left:0;right:0;top:0;opacity:0;pointer-events:none;transform:translateX(44px)}
.lb-pane[data-pane="kids"]:not(.on){transform:translateX(-44px)}
/* большая карточка режима: картинка мира, подпись, кнопка */
.hc{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-height:156px;padding:14px 14px 14px 16px;border-radius:26px;overflow:hidden;text-align:left;color:#fff;isolation:isolate;background:#2457C5;box-shadow:0 3px 0 rgba(12,30,80,.3),0 16px 34px rgba(27,63,143,.28);transition:transform .25s var(--spring)}
.hc:active{transform:scale(.97)}
.hc-art{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hc-art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,18,56,0) 22%,rgba(8,18,56,.6))}
.hc.kids::after{background:linear-gradient(180deg,rgba(10,60,40,0) 26%,rgba(10,52,36,.58))}
.hc-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hc-k{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.95}
.hc-t{font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.1;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.hc-s{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;font-weight:700;opacity:.95}
.hc-s svg{font-size:14px}
.hc-s .hh{display:inline-flex;gap:1px;color:#FF6B81}.hc-s .hh .lost{color:rgba(255,255,255,.35)}
.hc-go{flex:none;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 17px;border-radius:999px;background:#fff;color:var(--navy);font-weight:800;font-size:15px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.hc-go svg{font-size:15px}
.hc.kids .hc-go{color:#1F7A4D}
.hc-route{position:absolute;right:10px;top:10px;width:46%;height:56%;z-index:-1;overflow:visible;pointer-events:none}
.hc-route path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.1 7;opacity:.85}
.hc-route .nd{fill:#fff;stroke:none}
.hc-route .nd.b{fill:#FFD23F}
.hc-guard{position:absolute;right:12px;top:8px;width:74px;height:auto;z-index:-1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.hc-stamp{position:absolute;right:12px;top:10px;width:84px;height:84px;z-index:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));transform:rotate(-8deg)}
.hc-stars{display:inline-flex;gap:1px;color:rgba(255,255,255,.4)}.hc-stars .on{color:#FFD23F}
.hc .shine{position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);animation:shine 4.2s 1.5s infinite}
/* маленькие карточки */
.lb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mc{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:11px 12px;border-radius:22px;background:rgba(255,255,255,.92);box-shadow:0 2px 0 rgba(201,217,239,.9),0 10px 22px rgba(27,63,143,.13);text-align:left;color:var(--navy);min-width:0;transition:transform .25s var(--spring)}
.mc:active{transform:scale(.95)}
.mc-i{grid-row:span 2;position:relative;width:42px;height:42px;border-radius:15px;display:grid;place-items:center;font-size:22px;color:#fff}
.mc b{font-size:15px;font-weight:800;line-height:1.12;align-self:end;overflow-wrap:anywhere}
.mc small{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.2;align-self:start}
.mc.turbo .mc-i{background:linear-gradient(145deg,#FFB65C,#FF7A2F)}
.mc.wld .mc-i{background:linear-gradient(145deg,#B79BFF,#7C4DFF)}
.mc.catch .mc-i{background:linear-gradient(145deg,#FF9AC2,#FF5F9E)}
.mc.pass .mc-i{background:linear-gradient(145deg,#6FD6B0,#2FA36B)}
.mc .dot{top:-3px;right:-3px}
/* задания дня — строкой под карточками */
.lb-miss{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:20px;background:rgba(255,255,255,.88);box-shadow:0 8px 20px rgba(27,63,143,.12);color:var(--navy);text-align:left;transition:transform .25s var(--spring)}
.lb-miss:active{transform:scale(.97)}
.lb-miss .mm-i{position:relative;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-size:21px;flex:none;background:linear-gradient(145deg,#FFF1D6,#FFE0A3);color:#C47A00}
.lb-miss .mm-t{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.15}
.lb-miss .mm-t b{font-size:14.5px;font-weight:800}
.lb-miss .mm-t small{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-miss .mm-pips{display:grid;grid-template-columns:repeat(3,16px);gap:4px}
.mm-pips i{height:6px;border-radius:3px;background:#E3EAF6;transition:background .4s}
.mm-pips i.d{background:#FFC93C;animation:pulse 1.8s infinite}
.mm-pips i.c{background:#2FA36B}
/* появление карточек в меню — после заставки, полёта, окон «Назад»; из разделов панели меню просто въезжает вбок */
#menu.on.rise .lb-top{animation:riseIn .55s var(--out) both}
#menu.on.rise .seg{animation:riseIn .6s .06s var(--out) both}
#menu.on.rise .lb-pane.on>*,.lb-pane.on.swap>*{animation:riseIn .6s var(--out) both}
#menu.on.rise .lb-pane.on>:nth-child(2),.lb-pane.on.swap>:nth-child(2){animation-delay:.07s}
#menu.on.rise .lb-miss{animation:riseIn .6s .12s var(--out) both}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (max-height:700px){#menu{gap:8px}.hc{min-height:132px}.lb-hero{min-height:74px}.lb-wm{width:min(62vw,240px)}.mc{padding:9px 10px}.mc-i{width:38px;height:38px;font-size:20px}}
@media (max-height:620px){.lb-miss{display:none}.lb-de{display:none}}
/* панель разделов: капля подсветки переезжает под выбранный раздел */
/* ---------- нижняя панель — игровой «док» ----------
   Тёмно-синяя панель с глянцевыми иконками, как в мобильных играх. Выбранный раздел — на светлой плитке:
   иконка приподнимается и подписывается, плитка переезжает пружиной. «Играть» — большая жёлтая кнопка
   в центре, выступает над панелью. Остальные подписи прячутся — панель чистая. Только transform и opacity */
.tabbar{position:fixed;left:50%;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;
  width:min(100%,520px);height:calc(var(--sab) + 72px);padding:0 8px var(--sab);
  background:linear-gradient(180deg,#3263D1 0%,#2349A9 45%,#1A3A8C 100%);border-radius:26px 26px 0 0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(0,0,0,.18),0 -2px 0 rgba(14,32,84,.25),0 -10px 28px rgba(14,32,84,.3);
  transform:translate(-50%,120%);transition:transform .55s var(--out)}
.tabbar.on{transform:translate(-50%,0)}
.tabbar::before{content:"";position:absolute;left:14px;right:14px;top:4px;height:18px;border-radius:14px 14px 10px 10px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));pointer-events:none}
.tabbar button{position:relative;z-index:1;display:block;height:72px;color:#fff;touch-action:manipulation}
.tabbar .ti{position:absolute;left:50%;top:13px;width:44px;height:44px;margin-left:-22px;display:grid;place-items:center;transform:scale(.88);transition:transform .5s var(--spring)}
.tabbar .ti svg{width:40px;height:40px;fill:none;stroke:none;filter:drop-shadow(0 3px 0 rgba(6,18,58,.38))}
.tabbar button:not(.on):not(.play) .ti{opacity:.86}
.tabbar button b{position:absolute;left:0;right:0;bottom:6px;font-size:11px;font-weight:900;letter-spacing:.02em;text-align:center;white-space:nowrap;color:#fff;text-shadow:0 1px 0 rgba(6,18,58,.6),0 0 6px rgba(6,18,58,.35);opacity:0;transform:translateY(8px) scale(.7);transition:opacity .2s,transform .45s var(--spring)}
.tabbar button.on b{opacity:1;transform:none}
.tabbar button.on .ti{transform:translateY(-9px) scale(1.12)}
.tabbar button:active .ti{transform:scale(.8);transition-duration:.12s}
.tabbar button.on:active .ti{transform:translateY(-9px) scale(1)}
/* плитка под выбранным разделом */
.tb-ink{position:absolute;left:8px;bottom:calc(var(--sab) + 5px);width:calc((100% - 16px) / 5);height:62px;padding:0 5px;pointer-events:none;transition:transform .55s cubic-bezier(.3,1.3,.5,1),opacity .25s}
.tb-ink::before{content:"";position:absolute;inset:0 5px;border-radius:18px;background:linear-gradient(180deg,#6E9BF7 0%,#4777E0 60%,#3A67CF 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.12),0 4px 0 #142F72,0 8px 14px rgba(6,18,58,.3)}
.tabbar.mid .tb-ink{opacity:0}
/* «Играть»: большая круглая кнопка над панелью */
.tabbar button.play .ti{top:-24px;width:72px;height:72px;margin-left:-36px;border-radius:26px;transform:none;
  background:radial-gradient(circle at 50% 28%,#FFF0A8 0%,#FFCB2E 48%,#F59E0B 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.65),inset 0 -4px 0 rgba(176,92,0,.35),0 5px 0 #B86A00,0 0 0 4px #2349A9,0 10px 22px rgba(6,18,58,.45)}
.tabbar button.play .ti svg{width:46px;height:46px;filter:drop-shadow(0 2px 0 rgba(120,60,0,.35));transform:rotate(-8deg)}
.tabbar button.play b{opacity:1;transform:none;bottom:7px}
.tabbar button.play.on .ti{transform:translateY(-3px)}
.tabbar button.play:active .ti{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.65),inset 0 -4px 0 rgba(176,92,0,.35),0 1px 0 #B86A00,0 0 0 4px #2349A9,0 4px 10px rgba(6,18,58,.4);transition-duration:.1s}
/* значок «есть новое» на иконке раздела */
.tabbar .dot{top:-2px;right:-3px;width:15px;height:15px;background:radial-gradient(circle at 40% 35%,#FF8A9C,#FF3B5C 60%,#E0123D);box-shadow:0 0 0 2.5px #2349A9}
.tabbar .play .dot{box-shadow:0 0 0 2.5px #F59E0B}
.tabbar .dot::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;font:900 10.5px/1 var(--font);color:#fff;text-shadow:0 1px 0 rgba(120,0,30,.4)}
@media (max-width:360px){.tabbar{padding:0 4px var(--sab)}.tabbar button b{font-size:10.5px}.tabbar button.play .ti{width:66px;height:66px;margin-left:-33px}}
.scr.scroll.tabbed{padding-bottom:calc(var(--sab) + 124px)}
.scr.tabbed .s-head [data-back]{visibility:hidden}
.dot{position:absolute;top:0;right:4px;width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px #fff;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.m-install{position:relative;margin-top:10px;width:100%;max-width:440px;align-self:center}
.m-install button:first-child{display:flex;align-items:center;gap:12px;width:100%;padding:11px 46px 11px 14px;border-radius:18px;background:linear-gradient(90deg,#FFF6D6,#FFFFFF);box-shadow:0 6px 18px rgba(245,180,0,.18);text-align:left;color:var(--navy)}
.m-install svg{font-size:24px;color:#C98F00}
.m-install span{display:flex;flex-direction:column}
.m-install b{font-size:15px}.m-install small{font-size:12.5px;color:var(--muted);font-weight:600}
.m-install .x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;color:var(--muted);font-size:16px}

/* ---------- полёт: панель сверху ----------
   Как в мобильных играх: тёмные «стеклянные» плашки с белыми цифрами читаются и на светлом небе, и в ночных мирах.
   Сердца глянцевые и при ударе разлетаются осколками; звёзды — плашка со значком, куда влетают пойманные звёзды;
   очки — крупные белые с обводкой; множитель — круглый значок у очков; маршрут уровня — дорожка с самолётиком */
.hud{position:fixed;inset:0;z-index:5;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s;
  --glass:linear-gradient(180deg,rgba(24,50,118,.68),rgba(12,28,76,.68));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.2),0 4px 12px rgba(10,24,60,.22)}
.hud.on{visibility:visible;opacity:1;transition:opacity .35s,visibility 0s}
.hud .ib{pointer-events:auto}
.h-top{position:absolute;left:0;right:0;top:0;margin:0 auto;max-width:560px;padding:calc(var(--sat) + 10px) calc(var(--sar) + 12px) 0 calc(var(--sal) + 12px);display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.hud.on .h-top{animation:hudIn .6s var(--out) both}
@keyframes hudIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.h-left{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
/* сердца: глянцевые; удар — вспышка, поворот и осколки; новое сердце выпрыгивает */
.hearts{position:relative;display:flex;gap:1px;height:30px}
.hearts svg{width:30px;height:30px;transition:transform .35s var(--spring),opacity .35s}
.hearts svg.lost{opacity:.3;filter:grayscale(1) brightness(1.6);transform:scale(.8)}
.hearts svg.hurt{animation:hHurt .6s ease-out}
.hearts svg.gain{animation:hGain .6s var(--spring)}
@keyframes hHurt{0%{transform:scale(1);opacity:1;filter:none}22%{transform:scale(1.5) rotate(-16deg);opacity:1;filter:brightness(2.4)}50%{transform:scale(1.1) rotate(12deg);opacity:.85;filter:none}100%{transform:scale(.8);opacity:.3;filter:grayscale(1) brightness(1.6)}}
@keyframes hGain{0%{transform:scale(.3)}55%{transform:scale(1.4) rotate(-8deg)}100%{transform:scale(1)}}
.hearts .shard{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:2px;background:#FF4D6A;box-shadow:inset 0 -2px 0 #B5163F;pointer-events:none;animation:shard .65s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes shard{from{transform:rotate(var(--a)) translateY(0) rotate(0) scale(1.1);opacity:1}to{transform:rotate(var(--a)) translateY(-32px) rotate(200deg) scale(.35);opacity:0}}
/* звёзды забега: значок слева, пойманная звезда влетает в него */
.h-stars{position:relative;display:flex;align-items:center;height:28px;margin-left:14px;padding:0 12px 0 23px;border-radius:999px;background:var(--glass);box-shadow:var(--glass-edge);color:#fff;font-weight:900;font-size:15.5px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.h-stars b{display:inline-block}
.h-stars .hs-i{position:absolute;left:-14px;top:50%;width:34px;height:34px;margin-top:-17px;filter:drop-shadow(0 2px 2px rgba(140,70,0,.35))}
.h-stars.pop .hs-i{animation:hsPop .45s var(--spring)}
.h-stars.pop b{animation:hsNum .4s var(--out)}
@keyframes hsPop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.34) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
@keyframes hsNum{0%{transform:none}35%{transform:translateY(-3px) scale(1.12);color:#FFE27A}100%{transform:none}}
/* очки: белые с тёмной обводкой и объёмом; крупный прирост — толчок */
.h-mid{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:150px}
.h-sc{position:relative;display:flex;align-items:center;justify-content:center;padding:0 4px}
.h-score{font-weight:900;font-size:36px;letter-spacing:-.02em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 0 #1B3F8F,2px 0 0 #1B3F8F,-2px 0 0 #1B3F8F,0 -2px 0 #1B3F8F,1.6px 1.6px 0 #1B3F8F,-1.6px 1.6px 0 #1B3F8F,1.6px -1.6px 0 #1B3F8F,-1.6px -1.6px 0 #1B3F8F,0 4px 0 #0E2A66,0 7px 14px rgba(8,22,60,.32)}
.h-score.bump{animation:scBump .34s var(--out)}
@keyframes scBump{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}
/* множитель: круглый значок у очков; с ×2 вокруг крутится пунктир, на ×5 — горит */
.h-mult{position:absolute;left:100%;top:-7px;margin-left:3px;transform-origin:25% 75%;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;letter-spacing:-.04em;color:#fff;
  background:linear-gradient(180deg,#9AA9CC,#62739E);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.2),0 0 0 2.5px #fff,0 4px 10px rgba(10,24,60,.3);transform:rotate(-8deg) scale(.86);transition:transform .35s var(--spring)}
.h-mult::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:2.5px dashed transparent;pointer-events:none}
.h-mult.m2,.h-mult.m3,.h-mult.m4,.h-mult.m5{transform:rotate(-8deg)}
.h-mult.m2{background:linear-gradient(180deg,#78BCFF,#2F74E0)}
.h-mult.m3{background:linear-gradient(180deg,#62E6A4,#169A5E)}
.h-mult.m4{background:linear-gradient(180deg,#BEA4FF,#6A40E0)}
.h-mult.m5{background:linear-gradient(180deg,#FFE680,#FF8A00);color:#5A2E00;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.15),0 0 0 2.5px #fff,0 0 18px rgba(255,170,0,.85)}
.h-mult.m2::before{border-color:rgba(120,188,255,.9)}
.h-mult.m3::before{border-color:rgba(98,230,164,.9)}
.h-mult.m4::before{border-color:rgba(190,164,255,.95)}
.h-mult.m5::before{border-color:#FFD23F;border-style:dotted;border-width:3px}
/* кольцо делает оборот, только когда множитель вырос: бесконечное вращение весь полёт нагружало слабые телефоны */
.h-mult.up::before{animation:spin .9s var(--out)}
.h-mult.up{animation:multUp .6s var(--spring)}
.h-mult.down{animation:multDown .5s}
@keyframes multUp{0%{transform:rotate(-8deg) scale(1)}35%{transform:rotate(10deg) scale(1.45)}100%{transform:rotate(-8deg) scale(1)}}
@keyframes multDown{0%{transform:rotate(-8deg)}25%{transform:rotate(-26deg) scale(.78)}55%{transform:rotate(6deg) scale(.92)}100%{transform:rotate(-8deg) scale(.86)}}
@keyframes spin{to{transform:rotate(360deg)}}
/* маршрут уровня: дорожка, ворота — точки (страж — красная точка с рожками), самолётик едет вперёд */
.h-route{position:relative;width:min(150px,38vw);height:18px}
.hud.noroute .h-route{display:none}
.hr-track{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:rgba(14,32,84,.42);box-shadow:inset 0 1px 2px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.4);overflow:hidden}
.hr-track i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#FFE680,#FFB020);transition:transform .7s var(--out)}
.h-dots{position:absolute;inset:0}
.h-dots i{position:absolute;top:50%;left:calc(var(--x) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(14,32,84,.6);transition:background .3s,transform .45s var(--spring),box-shadow .3s}
.h-dots i.on{background:#FFC93C;box-shadow:0 0 0 2px #A85A00,0 0 10px rgba(255,200,60,.85);transform:scale(1.25)}
.h-dots i.bad{background:#B9C3D8;box-shadow:0 0 0 2px #6B7A99}
.h-dots i.boss{width:14px;height:14px;margin:-7px 0 0 -7px;background:#FF6B8B;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(160,20,60,.45)}
.h-dots i.boss::before,.h-dots i.boss::after{content:"";position:absolute;top:-5px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:6px solid #fff}
.h-dots i.boss::before{left:0}.h-dots i.boss::after{right:0}
.h-dots i.boss.on{background:#FFC93C}
.h-dots i.boss.bad{background:#B9C3D8}
.hr-move{position:absolute;inset:0;transform:translateX(calc(var(--p,0) * 100%));transition:transform .7s var(--out);pointer-events:none}
.hr-plane{position:absolute;left:0;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;fill:#fff;stroke:#1B3F8F;stroke-width:2.2;transform:rotate(42deg);filter:drop-shadow(0 2px 2px rgba(10,24,60,.35))}
.hr-plane.hop{animation:hrHop .7s var(--out)}
@keyframes hrHop{0%{transform:rotate(42deg)}30%{transform:translateY(-5px) rotate(30deg) scale(1.2)}100%{transform:rotate(42deg)}}
.h-city{font:700 18px/1 var(--hand);color:#fff;white-space:nowrap;text-shadow:0 1px 0 #1B3F8F,1px 0 0 #1B3F8F,-1px 0 0 #1B3F8F,0 -1px 0 #1B3F8F,0 2px 8px rgba(14,32,84,.45)}
.h-pause{justify-self:end;width:44px;height:44px;border-radius:50%;background:var(--glass);box-shadow:var(--glass-edge);color:#fff;font-size:20px}
.h-pause svg{stroke-width:3.2}
.hud.kidsmode .hearts{display:none}
.hud.kidsmode .h-mult,.hud.kidsmode .h-score{display:none}
.hud.kidsmode .h-city{font-size:24px}

/* ---------- карточка задания ----------
   Белая карточка с объёмным нижним краем; сверху — цветная лента с заданием (цвет по виду задания);
   таймер — полоса, которая к концу краснеет. Верно — зелёное свечение и печать-галочка, неверно — красное и крестик */
.qcard{position:absolute;left:50%;top:calc(var(--sat) + 98px);width:min(88vw,380px);min-height:80px;transform:translate(-50%,-34px) scale(.86);opacity:0;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 62%,#F2F7FF 100%);border-radius:24px;
  box-shadow:0 0 0 3px rgba(255,255,255,.75),0 5px 0 #C6D4EC,0 16px 32px rgba(14,32,84,.24);
  padding:18px 16px 15px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .5s var(--spring),opacity .25s,box-shadow .3s;pointer-events:none;
  --rib:linear-gradient(180deg,#5DA8FF,#2F6FDB);--rib-edge:#1D4FA8}
.qcard.on{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto}
/* виды заданий — цвет ленты */
.qcard.t-audio2word,.qcard.t-audio2pic,.qcard.t-phrase{--rib:linear-gradient(180deg,#B79BFF,#7048E8);--rib-edge:#4F2DB8}
.qcard.t-spell,.qcard.t-letter,.qcard.t-cloze{--rib:linear-gradient(180deg,#5BE39E,#1E9E63);--rib-edge:#13784A}
.qcard.t-yesno,.qcard.t-odd,.qcard.t-word2ru{--rib:linear-gradient(180deg,#FFB65C,#F07A1A);--rib-edge:#B5530A}
.qcard.gold{--rib:linear-gradient(180deg,#FFE680,#F5A800);--rib-edge:#A86A00}
.qcard.boss{--rib:linear-gradient(180deg,#FF8FA8,#D6336C);--rib-edge:#9E1F4E}
.q-label{position:absolute;left:50%;top:-12px;transform:translateX(-50%);max-width:calc(100% - 64px);padding:5px 13px 5px;border-radius:999px;background:var(--rib);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),0 3px 0 var(--rib-edge),0 6px 12px rgba(14,32,84,.2);
  font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcard.on .q-label{animation:ribIn .5s .08s var(--spring) both}
@keyframes ribIn{from{transform:translateX(-50%) scale(.4);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.qcard.gold .q-label{color:#5A3B00;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.q-new{padding:0 10px 2px;margin:-1px 0 1px;border-radius:10px;background:linear-gradient(180deg,#FFE680,#FFC21A);color:#5A3B00;font:700 17px/1.2 var(--hand);transform:rotate(-2deg);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),0 2px 0 #C98F00}
.qcard.on :is(.q-new,.q-gold,.q-boss){animation:stickIn .55s .2s var(--spring) both}
@keyframes stickIn{from{transform:rotate(-10deg) scale(.3);opacity:0}to{transform:rotate(-2deg) scale(1);opacity:1}}
.q-body{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px}
.q-pic{width:56px;height:56px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FFFFFF,#E6EFFF);box-shadow:inset 0 0 0 2px #E1EAF8}
.q-pic canvas{width:100%;height:100%}
.q-ru{font-weight:900;font-size:25px;color:var(--navy);letter-spacing:-.01em;text-align:center;line-height:1.15}
.q-en{font-weight:900;font-size:27px;color:var(--navy)}
.q-phrase{font-weight:800;font-size:19px;color:var(--navy);text-align:center;line-height:1.3}
.q-phrase u{text-decoration:none;display:inline-block;min-width:54px;border-bottom:3px solid var(--blue);color:var(--blue)}
.q-audio{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:29px;color:#fff;background:radial-gradient(circle at 50% 30%,#C9B6FF,#8B5CF6 60%,#6D3FE0);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 4px 0 #4F2DB8,0 8px 16px rgba(109,63,224,.35);transition:transform .2s var(--spring)}
.q-audio:active{transform:translateY(3px)}
.q-audio.play{animation:ring 1s ease-out}
@keyframes ring{0%{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 4px 0 #4F2DB8,0 0 0 0 rgba(139,92,246,.55)}100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 4px 0 #4F2DB8,0 0 0 22px rgba(139,92,246,0)}}
.q-letters{display:flex;gap:6px}
.q-letters i{font-style:normal;width:31px;height:39px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-size:22px;color:var(--navy);background:#EEF4FF;box-shadow:inset 0 -3px 0 #C9D9EF;transition:transform .35s var(--spring),background .2s}
.q-letters i.cur{background:#FFF6D6;box-shadow:inset 0 0 0 2px var(--yellow),inset 0 -3px 0 #F0C24A;animation:pulse 1.2s infinite}
.q-letters i.ok{background:#E3F6EC;color:#16A05E;box-shadow:inset 0 -3px 0 #9ED9B9;transform:scale(1.08)}
.q-letters i.miss{background:#FFECEC;color:var(--coral);box-shadow:inset 0 -3px 0 #F5B5B5}
.q-answer{font-weight:700;font-size:15px;color:var(--muted);min-height:0;max-height:0;overflow:hidden;transition:max-height .3s;text-align:center;line-height:1.35}
.qcard.ok .q-answer,.qcard.bad .q-answer{max-height:44px}
.q-answer b{color:var(--navy)}
/* фраза на слух: слова по местам */
.q-words{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:250px}
.q-words i{font-style:normal;height:34px;padding:0 8px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:17px;color:var(--navy);background:#EEF4FF;box-shadow:inset 0 -3px 0 #C9D9EF;transition:transform .35s var(--spring),background .2s}
.q-words i.cur{background:#FFF6D6;box-shadow:inset 0 0 0 2px var(--yellow);animation:pulse 1.2s infinite}
.q-words i.ok{background:#E3F6EC;color:#16A05E;transform:scale(1.06)}
.q-words i.miss{background:#FFECEC;color:var(--coral)}
/* золотое слово, страж и новое слово: наклейка под лентой, в общем потоке — ни на что не налезает */
.qcard.gold{background:linear-gradient(180deg,#FFFDF0,#FFF1C4);box-shadow:0 0 0 3px #FFD45C,0 5px 0 #D9A400,0 16px 32px rgba(176,120,0,.3)}
.qcard.boss{box-shadow:0 0 0 3px #FF9EB4,0 5px 0 #D4527A,0 16px 32px rgba(214,51,108,.26)}
.q-gold,.q-boss{display:flex;align-items:center;gap:4px;margin:-1px 0 2px;padding:3px 10px 3px 8px;border-radius:10px;font:900 10.5px var(--font);letter-spacing:.05em;text-transform:uppercase;transform:rotate(-2deg);white-space:nowrap}
.q-gold{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFE680,#F5B400);color:#5A3B00;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),0 2px 0 #B88600,0 5px 10px rgba(245,180,0,.35)}
.q-gold::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-18deg);animation:gloss 2.2s 1s ease-in-out infinite}
@keyframes gloss{0%{left:-40%}45%,100%{left:120%}}
.q-boss{background:linear-gradient(180deg,#FF7D98,#D6336C);color:#fff;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),0 2px 0 #9E1F4E,0 5px 10px rgba(214,51,108,.3)}
.q-boss svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* команда малышам: большая стрелка */
.q-cmd{width:64px;height:44px;flex:none}
.q-cmd svg{width:100%;height:100%;fill:var(--c);stroke:#fff;stroke-width:2.5;stroke-linejoin:round;filter:drop-shadow(0 3px 6px rgba(27,63,143,.25))}
/* таймер: к концу желтеет и краснеет */
.q-timer{position:absolute;left:20px;right:20px;bottom:7px;height:5px;border-radius:3px;background:rgba(27,63,143,.08);overflow:hidden}
.q-timer i{position:relative;display:block;height:100%;width:100%;border-radius:3px;background:#36C98A;transform-origin:left;transform:scaleX(0)}
/* цвет меняется не перекраской, а проявлением жёлтого и красного слоёв поверх — это делает видеокарта */
.q-timer i::before,.q-timer i::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0}
.q-timer i::before{background:#FFC21A}
.q-timer i::after{background:#FF5F6D}
.qcard.on .q-timer i{animation:qtime var(--qt,2.6s) linear both}
.qcard.on .q-timer i::before{animation:qtimeY var(--qt,2.6s) linear both}
.qcard.on .q-timer i::after{animation:qtimeR var(--qt,2.6s) linear both}
.qcard.ok .q-timer,.qcard.bad .q-timer{opacity:0}
@keyframes qtime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes qtimeY{0%,45%{opacity:0}70%,100%{opacity:1}}
@keyframes qtimeR{0%,70%{opacity:0}100%{opacity:1}}
/* ответ: свечение, печать-галочка или крестик и колечко */
.qcard.ok{box-shadow:0 0 0 3px #36D18C,0 5px 0 #1E9E63,0 0 26px rgba(54,209,140,.55),0 16px 32px rgba(14,32,84,.2)}
.qcard.bad{box-shadow:0 0 0 3px #FF6B6B,0 5px 0 #D23B3B,0 0 24px rgba(255,107,107,.45),0 16px 32px rgba(14,32,84,.2);animation:shake .42s}
.qcard::after{content:"";position:absolute;right:-12px;top:-14px;width:40px;height:40px;border-radius:50%;opacity:0;transform:scale(.2) rotate(-30deg);pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:24px}
.qcard.ok::after{background-color:#2FBF71;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 #168A50,0 0 0 3px #fff;animation:stamp .5s var(--spring) forwards}
.qcard.bad::after{background-color:#F0484D;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 #B52A2F,0 0 0 3px #fff;animation:stamp .5s .05s var(--spring) forwards}
@keyframes stamp{0%{opacity:0;transform:scale(2.2) rotate(-30deg)}55%{opacity:1;transform:scale(.88) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* красная кромка при ударе и промахе: овал по форме экрана, середина чистая. Только прозрачность */
.vig{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 72% 60% at 50% 52%,rgba(255,45,75,0) 58%,rgba(255,45,75,.5) 82%,rgba(255,45,75,.85) 100%)}
.vig.hit{animation:vigHit 1.3s ease-out}
.vig.soft{animation:vigSoft .8s ease-out}
@keyframes vigHit{0%{opacity:0}7%{opacity:1}100%{opacity:0}}
@keyframes vigSoft{0%{opacity:0}12%{opacity:.38}100%{opacity:0}}
/* ---------- серия верных ответов: надпись с лучами посреди неба ----------
   Появляется с пружиной и лёгким наклоном, лучи раскрываются и вращаются, плашка «N верных подряд» —
   следом; всё уходит вверх и тает. Только transform и opacity */
.callout{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none;--fill:#fff}
.callout:not(.on){display:none}
.callout.c2{--fill:#FFE14D}
.callout.c3{--fill:#FFAE3B}
.callout.c4{--fill:#FF7AD0}
.co-rays{position:absolute;left:-140px;top:-140px;width:280px;height:280px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='100' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.16' stop-color='%23fff' stop-opacity='.9'/%3E%3Cstop offset='.72' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 0L99.8 -7.0L99.8 7.0ZM0 0L94.8 31.7L89.5 44.6ZM0 0L75.5 65.6L65.6 75.5ZM0 0L44.6 89.5L31.7 94.8ZM0 0L7.0 99.8L-7.0 99.8ZM0 0L-31.7 94.8L-44.6 89.5ZM0 0L-65.6 75.5L-75.5 65.6ZM0 0L-89.5 44.6L-94.8 31.7ZM0 0L-99.8 7.0L-99.8 -7.0ZM0 0L-94.8 -31.7L-89.5 -44.6ZM0 0L-75.5 -65.6L-65.6 -75.5ZM0 0L-44.6 -89.5L-31.7 -94.8ZM0 0L-7.0 -99.8L7.0 -99.8ZM0 0L31.7 -94.8L44.6 -89.5ZM0 0L65.6 -75.5L75.5 -65.6ZM0 0L89.5 -44.6L94.8 -31.7Z' fill='url%28%23g%29'/%3E%3C/svg%3E") center/100% no-repeat;
  animation:coRays 1.6s .12s ease-out both}
.co-t{position:absolute;left:0;top:0;font:800 46px/1 var(--font);letter-spacing:-.01em;color:var(--fill);white-space:nowrap;
  text-shadow:0 3px 0 #1B3F8F,0 -3px 0 #1B3F8F,3px 0 0 #1B3F8F,-3px 0 0 #1B3F8F,2px 2px 0 #1B3F8F,-2px 2px 0 #1B3F8F,2px -2px 0 #1B3F8F,-2px -2px 0 #1B3F8F,0 7px 0 #0E2A66,0 12px 22px rgba(14,32,84,.4);
  animation:coIn 1.6s .12s both}
.co-n{position:absolute;left:0;top:36px;padding:5px 13px 6px;border-radius:999px;background:var(--glass);box-shadow:var(--glass-edge);color:#fff;font:800 13px/1 var(--font);white-space:nowrap;animation:coSub 1.6s .26s both}
@keyframes coIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-12deg)}
  13%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(4deg)}
  23%{transform:translate(-50%,-50%) scale(.94) rotate(-3deg)}
  32%{transform:translate(-50%,-50%) scale(1.03) rotate(-1.5deg)}
  40%,76%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
  100%{opacity:0;transform:translate(-50%,-95%) scale(.88) rotate(-2deg)}}
@keyframes coRays{0%{opacity:0;transform:scale(.25) rotate(0)}18%{opacity:1;transform:scale(1) rotate(18deg)}72%{opacity:.85}100%{opacity:0;transform:scale(1.2) rotate(75deg)}}
@keyframes coSub{0%{opacity:0;transform:translate(-50%,12px) scale(.6)}18%{opacity:1;transform:translate(-50%,0) scale(1.06)}26%,76%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-26px)}}
@media (prefers-reduced-motion:reduce){.co-rays{display:none}}

/* ---------- бонусы, подсказки ---------- */
.powers{position:absolute;left:max(calc(var(--sal) + 12px),calc(50% - 248px));bottom:calc(var(--sab) + 14px);display:flex;flex-direction:column;gap:8px;transition:transform .35s var(--spring)}
/* подсказка внизу слева — бонусы на это время поднимаются над ней */
.hud.tipon .powers{transform:translateY(calc(-1 * var(--tiph, 44px) - 10px))}
.pw{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 4px;border-radius:999px;background:var(--glass);box-shadow:var(--glass-edge);font-weight:900;font-size:13px;color:#fff;animation:pwIn .45s var(--spring) both}
.pw svg{width:27px;height:27px;padding:5px;border-radius:50%;color:#fff;stroke-width:2.4;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 -1.5px 0 rgba(0,0,0,.2)}
.pw.shield svg{background:linear-gradient(180deg,#7CC8FF,#2F74E0)}.pw.magnet svg{background:linear-gradient(180deg,#FF8E8E,#D7263D)}.pw.wind svg{background:linear-gradient(180deg,#FFE066,#F08C00)}
.pw .bar{width:46px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.pw .bar i{display:block;height:100%;background:#fff;transform-origin:left;animation:qtime var(--d,5s) linear both}
.pw.out{animation:fadeOut .3s both}
@keyframes pwIn{from{opacity:0;transform:translateX(-26px) scale(.8)}to{opacity:1;transform:none}}
@keyframes fadeOut{to{opacity:0;transform:translateX(-20px)}}
/* подсказка — внизу, между краем и кнопкой форсажа: не закрывает самолётик и облака */
.tip{position:absolute;left:max(calc(var(--sal) + 12px),calc(50% - 248px));right:max(calc(var(--sar) + 96px),calc(50% - 164px));bottom:calc(var(--sab) + 24px);transform:translateY(14px) scale(.96);opacity:0;padding:11px 15px;border-radius:18px;background:linear-gradient(180deg,rgba(24,50,118,.9),rgba(12,28,76,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px rgba(10,24,60,.3);color:#fff;font-weight:800;font-size:14px;line-height:1.3;text-align:left;pointer-events:none;transition:opacity .3s,transform .45s var(--spring)}
.tip.on{opacity:1;transform:none}
.hud.kidsmode .tip{right:max(calc(var(--sar) + 12px),calc(50% - 248px));text-align:center}
.hud.night .tip{background:rgba(255,255,255,.94);color:#1B3F8F;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.hint{position:absolute;left:50%;bottom:calc(var(--sab) + 36vh);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:var(--navy);opacity:0;transition:opacity .4s;width:max-content;max-width:calc(100vw - 56px);padding:36px 22px 16px;border-radius:24px;background:linear-gradient(180deg,#FFFFFF,#F2F7FF);box-shadow:0 0 0 3px rgba(255,255,255,.75),0 5px 0 #C6D4EC,0 16px 32px rgba(14,32,84,.24);pointer-events:none}
.hint.on{opacity:1}
.hint b{font-size:18px;font-weight:900}
.hint small{font-size:13.5px;font-weight:700;color:var(--muted);max-width:290px}
.hint small:empty{display:none}
.hand{position:absolute;top:-30px;left:50%;margin-left:-29px;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 50% 28%,#9AD6FF,#3B8FF0 58%,#1E5BC4);display:grid;place-items:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 #16429A,0 10px 18px rgba(10,30,80,.3);animation:swipe 2.2s ease-in-out infinite}
.hand svg{font-size:30px;color:#fff;stroke-width:2.2}
@keyframes swipe{0%,100%{transform:translateX(-46px)}50%{transform:translateX(46px)}}

/* ---------- новый уровень ---------- */
.banner{position:fixed;left:50%;top:38%;z-index:20;width:min(86vw,360px);transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;text-align:center;visibility:hidden}
.banner.on{visibility:visible;animation:bannerIn 2.9s var(--out) both}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-6deg)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(1deg)}22%{transform:translate(-50%,-50%) scale(1) rotate(0)}82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(.9)}}
.b-card{background:#fff;border-radius:28px;padding:18px 18px 16px;box-shadow:0 20px 50px rgba(27,63,143,.32),0 0 0 4px rgba(255,255,255,.6);overflow:hidden;position:relative}
.b-card::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 1.2s .35s var(--out)}
@keyframes sweep{to{transform:translateX(120%)}}
.b-kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.b-level{font-weight:800;font-size:46px;letter-spacing:-.04em;line-height:1;color:var(--navy);margin-top:2px}
.b-city{font:700 30px var(--hand);color:#3B6FD8;margin-top:2px}
.b-city small{font:600 14px var(--font);color:var(--muted);display:block;margin-top:-2px}
.b-card .b-city{color:var(--acc,#3B6FD8)}
.b-card.dark{background:linear-gradient(180deg,#1C2356,#0E1230);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 4px rgba(255,255,255,.16)}
.b-card.dark::before{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%)}
.b-card.dark .b-level{color:#fff}
.b-card.dark .b-kicker,.b-card.dark .b-city small{color:rgba(230,236,255,.72)}
.b-sky{display:block;width:100%;height:auto;margin:8px 0 2px;border-radius:14px}
.b-bonus{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.b-bonus span{padding:5px 11px;border-radius:11px;font-weight:800;font-size:13.5px;background:#FFF6D6;color:#8A5B00}
.b-bonus span.clean{background:#E3F6EC;color:#1E7A4E}
.b-new{margin-top:8px;font-size:13.5px;font-weight:700;color:var(--coral)}

/* ---------- всплывающие награды ---------- */
.toasts{position:fixed;left:0;right:0;top:calc(var(--sat) + 8px);z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;width:min(92vw,380px);padding:10px 14px 10px 10px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px #E6EEF9,0 5px 0 #D3DFF0,0 16px 34px rgba(27,63,143,.26);animation:toastIn 3.4s var(--out) both}
/* на экране итогов награды всплывают снизу, над кнопками: наверху — лента с заголовком и счёт */
.toasts.low{top:auto;bottom:calc(var(--sab) + 150px);flex-direction:column-reverse}
.toasts.low .toast{animation-name:toastUp}
.toasts.low .toast.out{animation-name:toastOut}
@keyframes toastUp{0%{opacity:0;transform:translateY(35%) scale(.9)}12%{opacity:1;transform:translateY(0) scale(1.02)}18%{transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(40%) scale(.96)}}
.toast.out{animation:toastOut .3s ease both}
@keyframes toastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-40%) scale(.94)}}
@keyframes toastIn{0%{opacity:0;transform:translateY(-35%) scale(.9)}12%{opacity:1;transform:translateY(0) scale(1.02)}18%{transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-60%) scale(.96)}}
.toast .tb{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:26px;flex:none;animation:flip .9s .2s var(--spring) both}
@keyframes flip{0%{transform:perspective(200px) rotateY(180deg) scale(.6)}100%{transform:none}}
.toast b{display:block;font-size:15px}
.toast small{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.toast .tr{margin-left:auto;font-weight:800;font-size:14px;color:#9A6400;white-space:nowrap}
.tier1 .tb{background:linear-gradient(145deg,#F6D2B1,#C98A54);color:#6B3B12}
.tier2 .tb{background:linear-gradient(145deg,#F2F5FA,#AEB9C9);color:#3E4A5E}
.tier3 .tb{background:linear-gradient(145deg,#FFE680,#F5B400);color:#6B4A00;box-shadow:0 0 18px rgba(245,180,0,.5)}

/* ---------- конфетти ---------- */
.confetti{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall var(--d,2.4s) var(--dl,0s) cubic-bezier(.25,.6,.5,1) both}
@keyframes fall{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(var(--x,0px),110vh,0) rotate(var(--r,540deg))}}

/* ---------- панели и заголовки экранов ---------- */
.s-head{display:flex;align-items:center;gap:10px;margin:0 auto 14px;max-width:560px}
.s-head h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--navy);flex:1}
.s-head .ib{background:#fff;box-shadow:0 2px 10px rgba(27,63,143,.1)}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.muted{color:var(--muted)}
.sub{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 12px}
.panel h3{margin:0 0 6px;font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.panel p{margin:0 0 14px;font-size:15px;line-height:1.45;color:var(--muted);font-weight:500}
.panel .grab{width:44px;height:5px;border-radius:3px;background:#DCE7F3;margin:-8px auto 14px}
.panel .btns{display:grid;gap:10px;margin-top:6px}

/* пауза */
.p-big{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:14px}
.p-big .ps{display:flex;align-items:center;gap:6px;font-size:34px;font-weight:800;color:var(--navy);letter-spacing:-.03em}
.p-big .ps .pst{font-size:28px;color:var(--yellow);filter:drop-shadow(0 1px 0 #C98F00)}
.toggles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 14px}
.tg{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0 8px;border-radius:16px;background:#F1F5FB;font-size:11.5px;font-weight:700;color:var(--muted);transition:transform .2s var(--spring),background .2s,color .2s}
.tg svg{font-size:22px}
.tg.on{background:#E6F0FF;color:var(--navy)}
.tg:not(.on) svg{opacity:.45}
.tg:active{transform:scale(.93)}

/* ---------- итоги ----------
   Праздник по шагам: лента с заголовком падает сверху, за ней раскрываются лучи, счёт набегает и подпрыгивает;
   плитки выпрыгивают по очереди, опыт заливается с бликом, кнопки выезжают снизу. Только transform и opacity */
#results{overflow-x:hidden;background:radial-gradient(130% 46% at 50% 0%,#A8D1FF 0%,rgba(168,209,255,.55) 45%,rgba(168,209,255,0) 100%),linear-gradient(180deg,#E3F0FF,#F3F8FD 60%)}
.res{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.r-head{position:relative;text-align:center;padding:6px 0 4px;isolation:isolate}
.r-head::before{content:"";position:absolute;left:50%;top:62%;width:600px;height:600px;margin:-300px 0 0 -300px;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='100' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.16' stop-color='%23fff' stop-opacity='.85'/%3E%3Cstop offset='.72' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 0L99.8 -6.1L99.8 6.1ZM0 0L95.9 28.4L91.7 39.9ZM0 0L80.4 59.5L72.5 68.8ZM0 0L55.2 83.4L44.6 89.5ZM0 0L23.3 97.2L11.3 99.4ZM0 0L-11.3 99.4L-23.3 97.2ZM0 0L-44.6 89.5L-55.2 83.4ZM0 0L-72.5 68.8L-80.4 59.5ZM0 0L-91.7 39.9L-95.9 28.4ZM0 0L-99.8 6.1L-99.8 -6.1ZM0 0L-95.9 -28.4L-91.7 -39.9ZM0 0L-80.4 -59.5L-72.5 -68.8ZM0 0L-55.2 -83.4L-44.6 -89.5ZM0 0L-23.3 -97.2L-11.3 -99.4ZM0 0L11.3 -99.4L23.3 -97.2ZM0 0L44.6 -89.5L55.2 -83.4ZM0 0L72.5 -68.8L80.4 -59.5ZM0 0L91.7 -39.9L95.9 -28.4Z' fill='url%28%23g%29'/%3E%3C/svg%3E") center/100% no-repeat;
  animation:fadeIn 1.1s .25s var(--out) both,spin 48s linear infinite}
.r-head::after{content:"";position:absolute;left:50%;top:62%;width:300px;height:180px;margin:-90px 0 0 -150px;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));animation:fadeIn .8s .2s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.r-mode{display:flex;width:max-content;margin:0 auto 8px;animation:fadeUp .4s var(--out) both}
.r-title{position:relative;display:inline-block;margin:2px auto 0;padding:9px 24px 11px;border-radius:14px;font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1.15;color:#fff;
  background:linear-gradient(180deg,#66B1FF,#2F6FDB);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 5px 0 #1D4FA8,0 12px 24px rgba(27,63,143,.28);text-shadow:0 2px 0 rgba(14,42,102,.45);
  animation:ribDrop .7s .05s var(--spring) both}
/* концы ленты — сзади и чуть ниже, с вырезом */
.r-title::before,.r-title::after{content:"";position:absolute;top:9px;width:22px;height:calc(100% - 4px);background:#1F57BF;box-shadow:0 5px 0 #163F8C}
.r-title::before{left:-19px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,8px 50%);border-radius:4px 0 0 4px}
.r-title::after{right:-19px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%);border-radius:0 4px 4px 0}
.r-title.rec{background:linear-gradient(180deg,#FFE375,#F5A800);text-shadow:0 2px 0 rgba(140,80,0,.5);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 5px 0 #B87800,0 12px 24px rgba(184,120,0,.32)}
.r-title.rec::before,.r-title.rec::after{background:#D99200;box-shadow:0 5px 0 #A06A00}
@keyframes ribDrop{0%{opacity:0;transform:translateY(-46px) scale(.6) rotate(-4deg)}55%{opacity:1;transform:translateY(5px) scale(1.06) rotate(1deg)}100%{opacity:1;transform:none}}
.r-score{position:relative;margin-top:14px;font-size:62px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 3px 0 #1B3F8F,0 -3px 0 #1B3F8F,3px 0 0 #1B3F8F,-3px 0 0 #1B3F8F,2px 2px 0 #1B3F8F,-2px 2px 0 #1B3F8F,2px -2px 0 #1B3F8F,-2px -2px 0 #1B3F8F,0 7px 0 #0E2A66,0 14px 26px rgba(14,32,84,.3);
  animation:scIn .55s .2s var(--spring) both}
.r-score.done{animation:scDone .55s var(--spring)}
@keyframes scIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes scDone{0%{transform:scale(1)}30%{transform:scale(1.16) rotate(-2deg)}100%{transform:none}}
.r-best{display:inline-block;max-width:100%;margin-top:14px;padding:6px 14px;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 2px 0 #CFDCEF,0 6px 14px rgba(27,63,143,.08);font-size:13px;font-weight:800;line-height:1.3;color:#4A5B78;animation:fadeUp .45s .55s var(--out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* карточки: белые, с объёмным нижним краем, как кнопки */
.r-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.r-stat,.r-xp,.r-rank,.r-ach,.gift{box-shadow:inset 0 0 0 1.5px #E6EEF9,0 4px 0 #D3DFF0,0 12px 22px rgba(27,63,143,.08)}
.r-stat{position:relative;background:#fff;border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:10px;animation:tileIn .55s .45s var(--spring) both}
.r-stat.wide{grid-column:1/-1}
.r-stat:nth-child(2){animation-delay:.53s}.r-stat:nth-child(3){animation-delay:.61s}.r-stat:nth-child(4){animation-delay:.69s}.r-stat:nth-child(5){animation-delay:.77s}.r-stat:nth-child(6){animation-delay:.85s}
@keyframes tileIn{from{opacity:0;transform:translateY(18px) scale(.86)}to{opacity:1;transform:none}}
.r-stat .si{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:21px;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.07),inset 0 2px 0 rgba(255,255,255,.9)}
.r-stat b{display:block;font-size:20px;font-weight:800;color:var(--navy);line-height:1.1;white-space:nowrap}
@media (max-width:374px){.r-stat{padding:11px 11px;gap:8px}.r-stat .si{width:36px;height:36px;font-size:19px}.r-stat b{font-size:18px}}
.r-stat small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.r-rank{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:linear-gradient(90deg,#EEF4FF,#fff);font-weight:700;font-size:14.5px;color:var(--navy);animation:tileIn .55s .95s var(--spring) both}
.r-rank .rk{font-size:26px;font-weight:800;min-width:56px;text-align:center}
.r-rank .up{color:var(--green);font-weight:800}
.r-rank.wait{opacity:.7}
.r-rank button{margin-left:auto;flex:none}
.r-rank>span:not(.rk){flex:1;min-width:0}
.r-sec{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 2px -2px}
.r-ach{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:#fff;animation:achIn .7s var(--spring) both}
@keyframes achIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
.r-ach .tb{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:24px;flex:none}
.r-ach b{display:block;font-size:15px;color:var(--navy)}
.r-ach small{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
.r-ach .tr{margin-left:auto;font-weight:800;color:#9A6400;font-size:14px;white-space:nowrap}
.r-words{display:flex;flex-wrap:wrap;gap:8px}
.wchip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px #E6EEF9,0 3px 0 #D3DFF0;font-weight:700;font-size:14px;color:var(--navy);transition:transform .12s var(--out),box-shadow .12s var(--out)}
.wchip:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px #E6EEF9,0 1px 0 #D3DFF0}
.wchip canvas{width:24px;height:24px}
.wchip.ok i{color:var(--green)}.wchip.bad{background:#FFF4F4;box-shadow:inset 0 0 0 1.5px #FFE0E0,0 3px 0 #F5C7C7}.wchip.bad i{color:var(--coral)}
.wchip i{font-style:normal;font-weight:800}
.gift{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:20px;background:linear-gradient(90deg,#FFF6D6,#FFE7EE);font-weight:800;color:var(--navy);text-align:left;width:100%;animation:tileIn .55s 1s var(--spring) both}
.gift .gb{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:30px;background:#fff;color:var(--coral);flex:none;box-shadow:0 3px 0 #F3D9A8;animation:wiggle 1.4s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg) scale(1.05)}40%{transform:rotate(9deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.gift.open .gb{animation:giftOpen .7s var(--spring) both;color:var(--yellow)}
@keyframes giftOpen{0%{transform:scale(1)}40%{transform:scale(1.4) rotate(-12deg)}100%{transform:scale(1)}}
.gift small{display:block;font-weight:600;font-size:12.5px;color:var(--muted)}
.r-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px -16px 0;position:sticky;bottom:calc(-1 * (var(--sab) + 28px));padding:22px 16px calc(var(--sab) + 16px);background:linear-gradient(180deg,rgba(243,248,253,0),#F3F8FD 22px)}
.r-btns .btn.primary{grid-column:1/-1}
.r-btns .btn{animation:btnUp .5s .35s var(--spring) both}
.r-btns .btn:nth-child(2){animation-delay:.42s}.r-btns .btn:nth-child(3){animation-delay:.49s}
@keyframes btnUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.stamp{position:relative;width:200px;height:200px;margin:4px auto 0}
.stamp canvas{width:100%;height:100%}
.stamp.hit{animation:stampIn .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stampIn{0%{opacity:0;transform:scale(2.4) rotate(-28deg)}60%{opacity:1;transform:scale(.94) rotate(-8deg)}100%{transform:scale(1) rotate(-8deg)}}
/* звёзды оценки: глянцевые, пустые — серые; загораются по одной с пружиной и вспышкой */
.stars3{display:flex;justify-content:center;align-items:flex-start;gap:6px;margin-top:-2px}
.stars3 svg{position:relative;width:52px;height:52px;filter:grayscale(1) brightness(1.55) opacity(.55);transition:filter .2s}
.stars3 svg:nth-child(2){width:64px;height:64px;margin-top:-10px}
.stars3 svg.on{filter:drop-shadow(0 4px 0 rgba(168,90,0,.35)) drop-shadow(0 0 14px rgba(255,200,40,.6));animation:starIn .65s var(--spring) both}
@keyframes starIn{0%{transform:scale(0) rotate(-120deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.r-head::before{animation:fadeIn .3s both}}

/* ---------- ещё шанс ---------- */
.ch-q{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border-radius:20px;background:#F4F8FF;margin-bottom:12px;min-height:84px}
.ch-q canvas{width:56px;height:56px}
.ch-q b{font-size:24px;font-weight:800;color:var(--navy)}
.ch-opts{display:grid;gap:9px}
.ch-opts button{min-height:54px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);font-weight:800;font-size:19px;color:var(--navy);transition:transform .2s var(--spring),background .2s,box-shadow .2s}
.ch-opts button:active{transform:scale(.96)}
.ch-opts button.ok{background:#E3F6EC;box-shadow:inset 0 0 0 2px var(--green);color:var(--green)}
.ch-opts button.bad{background:#FFECEC;box-shadow:inset 0 0 0 2px var(--coral);color:var(--coral);animation:shake .4s}
.ch-dots{display:flex;justify-content:center;gap:8px;margin:2px 0 12px}
.ch-dots i{width:12px;height:12px;border-radius:50%;background:#E3EBF7}
.ch-dots i.ok{background:var(--green)}.ch-dots i.bad{background:var(--coral)}.ch-dots i.cur{background:var(--blue);animation:pulse 1.2s infinite}

/* ---------- ник ---------- */
.n-field{position:relative;margin:4px 0 6px}
.n-field input{width:100%;height:58px;border-radius:18px;border:2px solid var(--line);padding:0 60px 0 18px;font-size:20px;font-weight:800;color:var(--navy);outline:none;background:#F8FBFF;transition:border-color .2s}
.n-field input:focus{border-color:var(--blue);background:#fff}
.n-field .ib{position:absolute;right:6px;top:6px;width:46px;height:46px;background:#EEF4FF}
.n-field .ib.roll svg{animation:roll .5s var(--out)}
@keyframes roll{to{transform:rotate(360deg)}}
.n-err{min-height:20px;font-size:13.5px;font-weight:700;color:var(--coral);margin:0 4px 6px}
.n-note{font-size:12.5px!important;line-height:1.4!important;margin:8px 0 0!important}
.n-note a{color:var(--navy)}

/* ---------- паспорт: темы детского полёта ---------- */
.kids-opts{display:grid;gap:8px;margin:0 auto 14px;max-width:560px}
.sw{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:0 4px 16px rgba(27,63,143,.08);text-align:left;width:100%}
.sw .swt{flex:1}
.sw b{display:block;font-size:15px;color:var(--navy)}
.sw small{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
.sw .knob{width:50px;height:30px;border-radius:15px;background:#DCE4EF;position:relative;transition:background .25s;flex:none}
.sw .knob::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .3s var(--spring)}
.sw.on .knob{background:var(--green)}
.sw.on .knob::after{transform:translateX(20px)}
.sw .swi{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:#EEF4FF;color:var(--navy);flex:none}
.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:560px;margin:0 auto}
.topic{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 12px;border-radius:22px;background:#fff;box-shadow:0 6px 20px rgba(27,63,143,.1);transition:transform .22s var(--spring)}
.topic:active{transform:scale(.95)}
.topic canvas{width:104px;height:104px}
.topic b{font-size:15.5px;color:var(--navy);font-weight:800}
.topic small{font-size:12px;font-weight:600;color:var(--muted)}
.topic .tst{display:flex;gap:2px}
.topic .tst svg{font-size:15px;color:#DCE4EF}
.topic .tst svg.on{color:var(--yellow)}
.topic .new{position:absolute;top:8px;right:10px;font:700 17px var(--hand);color:var(--coral);transform:rotate(8deg)}

/* ---------- награды ---------- */
.a-sum{display:flex;align-items:center;gap:14px;max-width:560px;margin:0 auto 14px}
.a-sum .card{flex:1;display:flex;align-items:center;gap:12px;padding:12px 14px}
.a-sum b{font-size:22px;color:var(--navy)}
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-width:560px;margin:0 auto}
.ach{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 10px 12px;border-radius:20px;background:#fff;box-shadow:0 4px 16px rgba(27,63,143,.08);position:relative}
.ach .ab{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;font-size:29px;background:#EEF2F8;color:#A9B6C9}
.ach.tier1 .ab{background:linear-gradient(145deg,#F6D2B1,#C98A54);color:#6B3B12}
.ach.tier2 .ab{background:linear-gradient(145deg,#F2F5FA,#AEB9C9);color:#3E4A5E}
.ach.tier3 .ab{background:linear-gradient(145deg,#FFE680,#F5B400);color:#6B4A00;box-shadow:0 0 18px rgba(245,180,0,.45)}
.ach.max .ab::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);animation:shine 3.2s infinite}
.ach .ab{position:relative;overflow:hidden}
.ach b{font-size:14px;color:var(--navy);line-height:1.2}
.ach small{font-size:12px;font-weight:600;color:var(--muted);line-height:1.3}
.ach .pips{display:flex;gap:4px}
.ach .pips i{width:18px;height:5px;border-radius:3px;background:#E3EBF7}
.ach .pips i.t1{background:#C98A54}.ach .pips i.t2{background:#AEB9C9}.ach .pips i.t3{background:#F5B400}
.ach .prog{width:100%;height:6px;border-radius:3px;background:#EEF2F8;overflow:hidden}
.ach .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:3px}
.ach .val{font-size:11.5px;font-weight:700;color:var(--muted)}
.ach .as{font-size:11px;font-weight:800;color:var(--purple)}

/* ---------- рекорды ---------- */
.tabs{display:flex;gap:6px;padding:5px;border-radius:16px;background:#E8F0FC;max-width:560px;margin:0 auto 12px}
.tabs button{flex:1;height:40px;border-radius:12px;font-weight:800;font-size:14.5px;color:var(--muted);transition:background .2s,color .2s}
.tabs button.on{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(27,63,143,.12)}
.me{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto 12px;padding:14px;border-radius:20px;background:linear-gradient(110deg,#2457C5,var(--navy));color:#fff;box-shadow:0 10px 26px rgba(27,63,143,.3)}
.me .av{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:24px;flex:none}
.me b{display:block;font-size:17px}
.me small{display:block;font-size:12.5px;opacity:.82;font-weight:600}
.me .rk{margin-left:auto;text-align:right}
.me .rk b{font-size:24px}
.me .btn{min-height:40px;padding:0 14px;font-size:13.5px;background:rgba(255,255,255,.16);color:#fff;border-radius:13px}
.lb{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.lr{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(27,63,143,.06)}
.lb.rise .lr{animation:riseIn .4s var(--out) both}
.lr .n{position:relative;z-index:0;width:30px;font-weight:800;font-size:16px;color:var(--muted);text-align:center}
.lr.g1 .n,.lr.g2 .n,.lr.g3 .n{font-size:22px}
/* медаль: монета с лентой */
.md{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;margin-top:6px;border-radius:50%;font-style:normal;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.55),0 2px 6px rgba(27,63,143,.2)}
.md b{position:relative;z-index:1;font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.md::before,.md::after{content:"";position:absolute;top:-9px;width:9px;height:13px;z-index:-1}
.md::before{left:5px;transform:skewX(18deg);background:#3B82F6}
.md::after{right:5px;transform:skewX(-18deg);background:#E8364F}
.md.m1{background:radial-gradient(circle at 35% 30%,#FFF1A8,#F5B400 60%,#C98F00)}
.md.m2{background:radial-gradient(circle at 35% 30%,#FFFFFF,#C3CEDD 60%,#8D9BB5)}
.md.m3{background:radial-gradient(circle at 35% 30%,#FFD9B0,#D98B4E 60%,#A35B2A)}
.lr .nk{flex:1;font-weight:800;font-size:15.5px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr .lv{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.lr .sc{font-weight:800;font-size:16px;color:var(--navy);font-variant-numeric:tabular-nums;min-width:70px;text-align:right}
.lr.mine{background:#FFF6D6;box-shadow:0 0 0 2px var(--yellow)}
.lb-empty{text-align:center;padding:30px 16px;color:var(--muted);font-weight:600}
.lb-note{max-width:560px;margin:14px auto 0;font-size:12.5px;color:var(--muted);font-weight:600;text-align:center;line-height:1.45}
.skel{height:52px;border-radius:16px;background:linear-gradient(90deg,#EEF3FA,#F8FBFF,#EEF3FA);background-size:200% 100%;animation:skel 1.2s infinite}
@keyframes skel{to{background-position:-200% 0}}

/* ---------- ангар ---------- */
.hg-stage{position:relative;max-width:560px;margin:0 auto 12px;height:220px;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#8EC5FF,#DDEEFF 70%,#F4F9FF);box-shadow:var(--shadow)}
.hg-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.hg-name{position:absolute;left:16px;bottom:12px;color:var(--navy)}
.hg-name b{display:block;font-size:22px;font-weight:800}
.hg-name small{font-size:13px;font-weight:600;color:var(--muted)}
.hg-wallet{position:absolute;right:12px;top:12px}
.skins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:560px;margin:0 auto}
.skin{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 10px;border-radius:20px;background:#fff;box-shadow:0 4px 16px rgba(27,63,143,.08);transition:transform .22s var(--spring),box-shadow .2s}
.skin:active{transform:scale(.94)}
.skin canvas{width:70px;height:70px}
.skin b{font-size:13px;color:var(--navy)}
.skin small{font-size:11.5px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:3px}
.skin small svg{font-size:13px;color:var(--yellow)}
.skin.cur{box-shadow:0 0 0 3px var(--blue),0 8px 20px rgba(59,130,246,.25)}
.skin.locked canvas{filter:grayscale(1);opacity:.45}
.skin .lk{position:absolute;top:8px;right:8px;font-size:15px;color:var(--muted)}
.skin.afford small{color:var(--green)}
/* кнопка ангара всегда на виду: выбрали самолётик — «Купить» / «Лететь на нём» прямо внизу экрана */
.hg-act{position:sticky;z-index:2;bottom:calc(-1 * (var(--sab) + 28px));max-width:592px;margin:8px auto 0;padding:16px 16px calc(var(--sab) + 18px);margin-left:-16px;margin-right:-16px;background:linear-gradient(180deg,rgba(243,248,253,0),#F3F8FD 18px)}
@media (min-width:600px){.hg-act{margin-left:auto;margin-right:auto}}

/* ---------- слова ---------- */
.al-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:560px;margin:0 auto 14px}
.al-sum div{background:#fff;border-radius:16px;padding:10px 6px;text-align:center;box-shadow:0 2px 10px rgba(27,63,143,.06)}
.al-sum b{display:block;font-size:22px;color:var(--navy);line-height:1.15}
.al-sum small{display:block;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.al-sum .st{display:block;margin-top:2px;font-size:11px;letter-spacing:1px;color:#DCE4EF}
.al-sum .st i{font-style:normal}
.al-sum .st i.on{color:var(--yellow)}
.al-unit{max-width:560px;margin:0 auto 14px}
.al-unit h4{display:flex;align-items:center;gap:8px;margin:0 2px 8px;color:var(--navy)}
.al-unit .al-t{display:flex;flex-direction:column;min-width:0}
.al-unit .al-t b{font-size:16px;font-weight:800;line-height:1.2}
.al-unit .al-t small{font-size:12px;font-weight:600;color:var(--muted)}
.al-unit h4 .btn{margin-left:auto;min-height:34px;padding:0 12px;font-size:13px;border-radius:11px}
.al-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.aw{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(27,63,143,.06);text-align:left;transition:transform .2s var(--spring)}
.aw:active{transform:scale(.95)}
.aw canvas{width:34px;height:34px;flex:none}
.aw b{display:block;font-size:14.5px;color:var(--navy);line-height:1.15}
.aw small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.aw .st{margin-left:auto;font-size:11px;color:#DCE4EF;white-space:nowrap}
.aw .st i{font-style:normal}
.aw .st i.on{color:var(--yellow)}
.aw.new{opacity:.6}
.aw.long b{font-size:13px}

/* ---------- настройки ---------- */
.set-list{display:grid;gap:8px;max-width:560px;margin:0 auto 14px}
.set-sec{max-width:560px;margin:16px auto 8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* бренд Hello Hallo внизу настроек: логотип, кому и где, ссылка на сайт */
.brand{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:560px;margin:22px auto 0;padding:22px 18px 18px;border-radius:24px;background:#fff;box-shadow:0 2px 0 rgba(201,217,239,.9),0 12px 28px rgba(27,63,143,.1);text-align:center;color:var(--navy);text-decoration:none;transition:transform .25s var(--spring)}
.brand:active{transform:scale(.98)}
.brand-logo{width:min(240px,72%);height:auto;display:block;pointer-events:none}
.brand-t{font-size:14px;line-height:1.4;font-weight:700;color:var(--muted)}
.brand-go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:11px 18px;border-radius:999px;background:linear-gradient(90deg,var(--navy),var(--blue));color:#fff;font-weight:800;font-size:15px;box-shadow:0 2px 0 rgba(18,48,111,.3),0 10px 22px rgba(27,63,143,.22)}
.brand-go svg{width:18px;height:18px}
.brand-f{display:flex;justify-content:center;gap:8px;margin:12px auto 0;font-size:12.5px;font-weight:600;color:var(--muted);opacity:.85}
.brand-f a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ---------- установка ---------- */
.ios-steps{display:grid;gap:10px;margin:6px 0 14px;padding:0;list-style:none;counter-reset:s}
.ios-steps li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px;color:var(--navy)}
.ios-steps li::before{counter-increment:s;content:counter(s);width:30px;height:30px;border-radius:50%;background:#EEF4FF;display:grid;place-items:center;font-weight:800;flex:none}
.ios-steps svg{font-size:22px;color:var(--blue);vertical-align:-5px}
.ios-arrow{position:fixed;left:50%;bottom:calc(var(--sab) + 2px);transform:translateX(-50%);font-size:40px;color:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));animation:bob 1.2s ease-in-out infinite;z-index:31}
.ios-arrow.top{bottom:auto;top:calc(var(--sat) + 4px);left:auto;right:22px;transform:rotate(180deg)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 10px}}
.w-logo{text-align:center;margin:-2px 0 6px}
.w-logo b{font-size:40px;font-weight:800;letter-spacing:-.04em;color:var(--navy)}
.w-logo b span{color:var(--blue)}
.w-logo small{display:block;font:700 22px var(--hand);color:#3B6FD8;margin-top:-2px}

@media (max-height:640px){
  .qcard{top:calc(var(--sat) + 80px);min-height:70px}
}
/* телефон лёг набок — просим повернуть: игра вертикальная */
.rotate{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#8EC5FF,#DDEEFF);color:var(--navy);text-align:center}
.rotate b{font-size:22px;font-weight:800}
.rotate small{font-size:14px;font-weight:600;color:var(--muted)}
.rt-phone{width:44px;height:74px;border-radius:10px;border:3px solid var(--navy);margin-bottom:10px;animation:rt 2.4s ease-in-out infinite}
@keyframes rt{0%,20%{transform:rotate(90deg)}50%,100%{transform:rotate(0)}}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){.rotate{display:flex}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- язык: английский сейчас, немецкий скоро ---------- */
@keyframes soon{0%,100%{transform:none}50%{transform:scale(1.08) rotate(-3deg)}}
/* ---------- звание и задания дня в меню ---------- */
@media (max-width:374px){}
/* ---------- опыт за полёт ---------- */
.r-xp{background:#fff;border-radius:20px;padding:12px 14px;animation:tileIn .55s .85s var(--spring) both}
.rx-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rx-rank{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;min-width:0}
.rx-rank svg{grid-row:span 2;font-size:24px;color:#2457C5}
.rx-rank b{font-size:16px;font-weight:800;color:var(--navy);line-height:1.15}
.rx-rank small{font-size:12px;font-weight:700;color:var(--muted);line-height:1.2}
.rx-gain{font-weight:800;font-size:14px;color:#6B3FE0;background:#F0EDFF;padding:4px 10px;border-radius:10px;white-space:nowrap}
.rx-bar{height:14px;border-radius:8px;background:#E3EAF6;box-shadow:inset 0 2px 3px rgba(27,63,143,.16);margin-top:10px;overflow:hidden}
.rx-bar i{position:relative;display:block;height:100%;width:0;border-radius:8px;overflow:hidden;background:linear-gradient(90deg,#3B82F6,#7C4DFF,#FF5FB4);box-shadow:inset 0 3px 0 rgba(255,255,255,.35);transition:width 1.1s var(--out)}
.rx-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-100%);animation:barShine 2.6s 2.2s ease-in-out infinite}
@keyframes barShine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.rx-next{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.r-xp.up{animation:xpUp .8s var(--spring);box-shadow:0 0 0 3px #B9A3FF,0 4px 0 #D3DFF0,0 12px 22px rgba(27,63,143,.08)}
@keyframes xpUp{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
/* ---------- звания ---------- */
.ranks{display:grid;gap:6px;margin:4px 0 12px}
.rk-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:14px;background:#F4F7FC;color:#8A97AD}
@media (max-height:720px){.ranks{gap:4px;margin-bottom:8px}.rk-row{padding:5px 12px}#ranks .panel>p{margin-bottom:6px}}
.rk-row.got{background:#EEF4FF;color:var(--navy)}
.rk-row.cur{background:linear-gradient(90deg,#E7EEFF,#F3ECFF);color:var(--navy);box-shadow:inset 0 0 0 2px #8FA8FF}
.rk-i{font-size:20px;display:grid;place-items:center;width:28px;flex:none}
.rk-row.cur .rk-i,.rk-row.got .rk-i{color:#2457C5}
.rk-t{display:flex;flex-direction:column;flex:1;line-height:1.15;min-width:0}
.rk-t b{font-size:15px;font-weight:800}
.rk-t small{font-size:12px;font-weight:700;opacity:.8}
.rk-xp{font-size:12.5px;font-weight:800;white-space:nowrap}
/* ---------- задания дня ---------- */
.miss{display:grid;gap:10px;margin:4px 0 0}
.ms{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:#F4F7FC;transition:background .3s,box-shadow .3s}
.ms.done{background:linear-gradient(90deg,#FFF6D6,#FFFFFF);box-shadow:inset 0 0 0 2px #FFD23F}
.ms.claimed{background:#EEF8F2}
.ms-i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:#fff;color:#2457C5;flex:none;box-shadow:0 2px 8px rgba(27,63,143,.1)}
.ms.done .ms-i{color:#C47A00}
.ms.claimed .ms-i{color:#2FA36B}
.ms-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ms-t b{font-size:14px;font-weight:800;color:var(--navy);line-height:1.2}
.ms-t small{font-size:12px;font-weight:700;color:var(--muted)}
.ms-bar{height:7px;border-radius:4px;background:#E3EAF6;overflow:hidden}
.ms-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#38B97A,#2FA36B)}
.ms-b{min-height:40px;padding:0 12px;font-size:14px;border-radius:13px;flex:none;gap:5px}
.ms-b svg{font-size:16px}
.ms-b[disabled]{opacity:.5}
.ms.done .ms-b{animation:breathe 1.8s ease-in-out infinite}
.ms-ok{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#2FA36B;color:#fff;font-size:20px;flex:none}
.ms-ok.pop{animation:pop .5s var(--spring)}
/* ---------- немецкий — скоро ---------- */
.de-hero{position:relative;margin:2px 0 14px;padding:22px 16px 26px;border-radius:22px;text-align:center;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#3A3F5C,#151827)}
.de-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(180deg,#1A1A1A 0 33.3%,#DD0000 33.3% 66.6%,#FFCE00 66.6%)}
.de-hero b{position:relative;display:block;font-size:40px;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1}
.de-hero b span{color:#FFCE00}
.de-hero small{position:relative;display:block;margin-top:4px;font:700 27px var(--hand);color:#FFE27A}
.de-plane{position:absolute;right:16px;top:12px;font-size:30px;color:#fff;animation:dePlane 3.2s ease-in-out infinite}
@keyframes dePlane{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(-8px,5px) rotate(6deg)}}
.de-say{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:18px;background:#FFF8DB;color:var(--navy);text-align:left;margin:2px 0 12px;box-shadow:inset 0 0 0 2px #FFE27A;transition:transform .22s var(--spring)}
.de-say:active{transform:scale(.97)}
.de-say svg{font-size:26px;color:#DD0000;flex:none}
.de-say b{display:block;font-size:14.5px;font-weight:800}
.de-say small{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
/* ---------- миры ---------- */
.worlds{display:grid;gap:14px;max-width:560px;margin:0 auto}
@media (min-width:700px){.worlds{grid-template-columns:1fr 1fr;max-width:820px}#worlds .s-head,#worlds .sub{max-width:820px}}
.wc{background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);animation:riseIn .6s var(--out) both;position:relative;transition:box-shadow .3s}
.wc.sel{box-shadow:0 0 0 3px var(--acc,#3B82F6),var(--shadow)}
.wc-pic{position:relative;line-height:0}
.wc-pic canvas{width:100%;height:auto;display:block}
.wc-lv{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:10px;background:rgba(255,255,255,.9);color:var(--navy);font-size:12px;font-weight:800;line-height:1.2}
.wc.locked .wc-pic canvas{filter:grayscale(.85) blur(3px) brightness(.85)}
.wc-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:30px;line-height:1.2;background:rgba(20,28,52,.32)}
.wc-lock small{font-size:13px;font-weight:800}
.wc-body{padding:12px 14px 14px}
.wc-name{display:block;font:700 28px var(--hand);color:var(--acc,#3B6FD8);line-height:1.05}
.wc.locked .wc-name{color:#8A97AD}
.wc-body>small{display:block;font-size:13px;font-weight:700;color:var(--muted)}
.wc-haz{margin:8px 0 0;font-size:12.5px;font-weight:600;color:#5B6B85;line-height:1.35}
.wc-pic .wc-guard{position:absolute;right:8px;bottom:6px;width:84px;height:auto;filter:drop-shadow(0 4px 8px rgba(20,28,52,.3));animation:guardBob 3s ease-in-out infinite}
.wc-pic .wc-guard.dim{opacity:.55;filter:none;animation:none}
@keyframes guardBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.wc-boss{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:12.5px;font-weight:600;color:#5B6B85;line-height:1.35}
.wc-boss svg{flex:none;width:16px;height:16px;margin-top:1px;stroke:#D6336C;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wc-boss b{color:var(--navy)}
.wc-boss em{font-style:normal;font-weight:800;color:#2FA36B}
.wc-btns{display:flex;gap:8px;margin-top:10px}
.wc-btns .btn{flex:1;min-height:40px;padding:0 12px;font-size:13.5px;border-radius:13px}
.wc-btns .btn svg{font-size:17px}
.wc-btns .btn.on{background:var(--acc,#3B82F6);color:#fff}

/* ---------- «Турбо» в меню ---------- */
/* рядом с «Турбо» кнопка уже — значок поменьше, чтобы «Полёт на рекорд» помещался в строку */
/* ---------- кнопка форсажа ---------- */
.boostbtn{position:absolute;right:max(calc(var(--sar) + 14px),calc(50% - 246px));bottom:calc(var(--sab) + 26px);width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:34px;
  background:radial-gradient(circle at 50% 28%,#9AD6FF 0%,#3B8FF0 55%,#1E5BC4 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.18),0 5px 0 #16429A,0 12px 22px rgba(10,30,80,.32);
  pointer-events:auto;filter:saturate(.2) brightness(1.12);opacity:.78;transition:filter .35s,opacity .35s,transform .18s var(--spring),box-shadow .18s}
.boostbtn svg{fill:#FFE066;stroke:#A85A00;stroke-width:1.6;filter:drop-shadow(0 2px 0 rgba(10,40,110,.35))}
.boostbtn[hidden]{display:none}
.boostbtn.ready{filter:none;opacity:1}
.boostbtn.ready::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(124,200,255,.95);pointer-events:none;opacity:0;animation:boostReady 1.7s ease-out 3}
@keyframes boostReady{0%{transform:scale(.92);opacity:.95}100%{transform:scale(1.28);opacity:0}}
.boostbtn:active{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.18),0 1px 0 #16429A,0 4px 10px rgba(10,30,80,.3)}
.boostbtn .bp{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.boostbtn .bp i{width:12px;height:12px;border-radius:50%;background:rgba(14,32,84,.55);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 2px #fff;transition:background .3s,transform .4s var(--spring)}
.boostbtn .bp i.on{background:radial-gradient(circle at 40% 35%,#FFF6B0,#FFC21A 60%,#F08C00);transform:scale(1.18)}
.boostbtn.go{animation:boostGo .3s ease-in-out infinite alternate}
.boostbtn.go::before{display:none}
/* сияние форсажа — отдельный слой, мигает прозрачностью (без перерисовки тени) */
.boostbtn.go::after{content:"";position:absolute;inset:-12px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(124,200,255,0) 70%,rgba(124,200,255,.8) 80%,rgba(124,200,255,0) 100%);animation:boostGlow .3s ease-in-out infinite alternate}
@keyframes boostGo{to{transform:scale(1.09)}}
@keyframes boostGlow{from{opacity:.35}to{opacity:1}}
.boostbtn.shake{animation:shakeX .45s}
@keyframes shakeX{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
/* «Турбо» в полёте: табло с огненным оттенком */
.hud.turbo .h-mult{background:linear-gradient(180deg,#FFB65C,#FF5F3D)}
.r-mode{display:flex;align-items:center;gap:4px;padding:4px 12px 4px 9px;border-radius:999px;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(90deg,#FF9F1C,#E8364F)}
.r-mode svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.b-kicker .kb{width:14px;height:14px;margin:0 3px -2px 0;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* вкладки режима в рекордах */
.tabs.modes button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tabs.modes button svg{font-size:17px}


@media (max-width:374px){.tabs.modes .tl{display:none}}

/* =====================================================================
   Hello Sky 4.0 — приключение: карта главы, усиления, лавка, привал, сундук; «Ловец слов»; «Кто играет?»
   ===================================================================== */
/* ---------- карта главы ---------- */
#adv{pointer-events:none}
#adv.on>*{pointer-events:auto}
.am{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:calc(var(--sat) + 8px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px);max-width:520px;margin:0 auto}
.am-top{display:flex;align-items:center;gap:8px}
.am-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1;padding:7px 14px;border-radius:18px;background:rgba(255,255,255,.88);box-shadow:0 2px 10px rgba(27,63,143,.14)}
.am-t small{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.am-t b{font-size:17px;font-weight:800;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-h .hh,.shop-st .hh,.hc .hh{display:inline-flex;gap:1px;color:#FF5A6E;font-size:16px}
.hh .lost{color:#D5DDEA}
.hc .hh .lost{color:rgba(255,255,255,.35)}
.am-perks{display:flex;align-items:center;gap:6px;min-height:38px;overflow-x:auto;scrollbar-width:none;padding:2px}
.am-perks::-webkit-scrollbar{display:none}
.pkc{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--rc) 70%,#fff),var(--rc));box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 10px rgba(27,63,143,.18);transition:transform .22s var(--spring)}
.pkc:active{transform:scale(.9)}
.am-noperk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--navy);background:rgba(255,255,255,.75);padding:6px 11px;border-radius:12px}
.am-noperk svg{font-size:15px;color:#E09A00}
.am-score{margin-left:auto;flex:none;font-size:15px;font-weight:800;color:var(--navy);background:rgba(255,255,255,.82);padding:6px 11px;border-radius:12px;font-variant-numeric:tabular-nums}
.am-map{position:relative;flex:1;min-height:300px}
.am-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.am-lines path{fill:none;stroke-linecap:round}
.am-lines .past{stroke:#1B3F8F;stroke-width:3;stroke-dasharray:.1 9;opacity:.55}
.am-lines .gt{stroke:rgba(27,63,143,.16);stroke-width:7}
.am-lines .go{stroke:#fff;stroke-width:3.4;stroke-dasharray:.1 9;animation:amDash 1.2s linear infinite}
.am-lines .fut{stroke:#fff;stroke-width:2;stroke-dasharray:.1 8;opacity:.45}
@keyframes amDash{to{stroke-dashoffset:-18}}
.nd{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--navy);transition:transform .3s var(--spring),opacity .3s;animation:ndIn .55s var(--d,0s) var(--out) backwards}
@keyframes ndIn{from{opacity:0;transform:translate(-50%,-30%) scale(.6)}}
.nd-c{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:27px;color:#fff;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 70%);box-shadow:0 0 0 3px #fff,0 8px 18px rgba(27,63,143,.28)}
.nd-l{font-size:12px;font-weight:800;padding:2px 8px;border-radius:9px;background:rgba(255,255,255,.9);white-space:nowrap;box-shadow:0 2px 6px rgba(27,63,143,.12)}
.nd.cur .nd-c::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c);opacity:0;z-index:-1;animation:ndRing 1.8s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
@keyframes ndRing{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(1.42);opacity:0}}
.nd.cur:active{transform:translate(-50%,-50%) scale(.92)}
.nd.sel{transform:translate(-50%,-50%) scale(1.14);z-index:2}
.nd.sel .nd-c{box-shadow:0 0 0 4px #FFD23F,0 10px 24px rgba(27,63,143,.35);animation:none}
.nd.sel .nd-c::after,.nd.off .nd-c::after{animation:none;opacity:0}
.nd.off{opacity:.35;transform:translate(-50%,-50%) scale(.9)}
.nd.land .nd-c{animation:ndLand .5s var(--spring)}
@keyframes ndLand{40%{transform:scale(1.18)}}
.nd.fut{opacity:.62;pointer-events:none}
.nd.fut .nd-c{filter:saturate(.55)}
.nd.skip{opacity:.28;pointer-events:none}
.nd.skip .nd-c{filter:grayscale(1)}
.nd.done{pointer-events:none}
.nd.done .nd-c::after{content:"";position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:#2FA36B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 0 0 2px #fff}
.nd.start{pointer-events:none}
.nd.start .nd-c{width:40px;height:40px;font-size:18px;background:radial-gradient(circle at 34% 30%,#9CC4FF,#3B82F6 70%)}
.nd.start{transform:translate(-50%,-10%)}
.nd.boss .nd-c{width:78px;height:78px;background:radial-gradient(circle at 34% 30%,#FF9AB6,#C2255C 72%);overflow:hidden}
.nd.boss .nd-c canvas{width:70px;height:auto;margin-top:6px}
.nd.boss.fut{opacity:.8}
.am-plane{position:absolute;left:var(--x);top:var(--y);width:46px;height:46px;transform:translate(-50%,-50%);z-index:3;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(27,63,143,.25))}
.am-plane svg{width:100%;height:100%;overflow:visible}
.am.fresh .am-plane{animation:amIn .9s .2s cubic-bezier(.3,1.3,.5,1) backwards}
@keyframes amIn{from{opacity:0;transform:translate(-50%,40%) scale(.4) rotate(-30deg)}}
.am-info{display:flex;align-items:center;gap:12px;min-height:78px;padding:12px 12px 12px 14px;border-radius:24px;background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(27,63,143,.2)}
.am-info.pop{animation:aiPop .45s var(--spring)}
@keyframes aiPop{from{transform:translateY(10px) scale(.97);opacity:.6}}
.ai-hint{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--navy);line-height:1.35}
.ai-hint svg{font-size:26px;color:var(--blue);flex:none}
.ai-i{width:50px;height:50px;border-radius:16px;flex:none;display:grid;place-items:center;font-size:26px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c))}
.ai-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.2}
.ai-t b{font-size:16px;font-weight:800;color:var(--navy)}
.ai-t b small{font-size:12px;font-weight:700;color:var(--muted)}
.ai-t>small{font-size:12.5px;font-weight:600;color:var(--muted)}
.ai-t em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:12px;font-weight:800;color:#B86E00}
.ai-t em svg{font-size:14px;flex:none}
.ai-go{min-height:50px;padding:0 18px;flex:none}
@media (max-width:370px){.ai-go{padding:0 12px;font-size:15px}.ai-i{width:42px;height:42px;font-size:22px}}
@media (max-height:640px){.nd-c{width:50px;height:50px;font-size:23px}.nd.boss .nd-c{width:64px;height:64px}.am-info{min-height:66px;padding:8px 10px}}
/* ---------- усиления на выбор ---------- */
.perks{display:grid;gap:10px;margin-top:6px}
.pk{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:#fff;text-align:left;box-shadow:inset 0 0 0 2.5px color-mix(in srgb,var(--rc) 55%,#fff),0 6px 16px rgba(27,63,143,.1);animation:riseIn .5s var(--out) both;transition:transform .25s var(--spring),opacity .3s}
.pk:active{transform:scale(.97)}
.pk-i{width:50px;height:50px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:26px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--rc) 60%,#fff),var(--rc))}
.pk-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pk-t b{font-size:17px;font-weight:800;color:var(--navy)}
.pk-t small{font-size:13px;font-weight:600;color:var(--muted);line-height:1.3}
.pk em{align-self:flex-start;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--rc);white-space:nowrap}
.pk.r3{background:linear-gradient(135deg,#FFFBEA,#fff 60%)}
.pk.picked{transform:scale(1.04);box-shadow:inset 0 0 0 3px var(--rc),0 10px 26px color-mix(in srgb,var(--rc) 35%,transparent)}
.pk.dim{opacity:.35}
/* ---------- лавка ---------- */
.shop-top{display:flex;align-items:center;gap:10px;margin:-4px 0 8px}
.sk-art{width:104px;height:auto;flex:none;animation:skBob 2.6s ease-in-out infinite}
@keyframes skBob{0%,100%{transform:none}50%{transform:translateY(-3px) rotate(-2deg)}}
.shop-say{position:relative;flex:1;padding:10px 14px;border-radius:18px 18px 18px 6px;background:#F1F6FF;line-height:1.3}
.shop-say b{display:block;font-size:16px;font-weight:800;color:var(--navy)}
.shop-say small{font-size:12.5px;font-weight:600;color:var(--muted)}
.shop-st{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}
.shop-list{display:grid;gap:8px}
.sli{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:#fff;text-align:left;box-shadow:inset 0 0 0 2px var(--line);transition:transform .22s var(--spring),opacity .3s}
.sli:active{transform:scale(.97)}
.sli.no{opacity:.55}
.sli:disabled{opacity:.4}
.sli-i{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:22px;color:#fff}
.sli.heart .sli-i{background:linear-gradient(145deg,#FF9AAE,#FF4D6D)}.sli.shield .sli-i{background:linear-gradient(145deg,#8EC5FF,#3B82F6)}.sli.boost .sli-i{background:linear-gradient(145deg,#7CD8FF,#1C7ED6)}.sli.perk .sli-i{background:linear-gradient(145deg,#C3A6FF,#7C4DFF)}
.sli-t{flex:1;display:flex;flex-direction:column;min-width:0}
.sli-t b{font-size:15.5px;font-weight:800;color:var(--navy)}
.sli-t small{font-size:12.5px;font-weight:600;color:var(--muted)}
.sli-p{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:12px;background:#FFF6D6;font-weight:800;color:#8A5A00}
.sli-p svg{color:var(--yellow);font-size:16px}
/* ---------- привал и сундук ---------- */
.camp-art,.chest-art{display:block;width:150px;height:auto;margin:0 auto 4px}
.camp-art .fl1{transform-origin:70px 72px;animation:fl 1.1s ease-in-out infinite alternate}
.camp-art .fl2{transform-origin:70px 72px;animation:fl .8s ease-in-out infinite alternate-reverse}
.camp-art .sp1{animation:spk 1.6s ease-in infinite}.camp-art .sp2{animation:spk 1.9s .5s ease-in infinite}
@keyframes fl{to{transform:scale(1.06,.92) skewX(-3deg)}}
@keyframes spk{from{transform:translateY(10px);opacity:1}to{transform:translateY(-14px);opacity:0}}
.camp-opts{display:grid;gap:8px;margin-top:6px}
.co{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:#fff;text-align:left;box-shadow:inset 0 0 0 2px var(--line);transition:transform .22s var(--spring)}
.co:active{transform:scale(.97)}
.co:disabled{opacity:.45}
.co b{display:block;font-size:16px;font-weight:800;color:var(--navy)}
.co small{font-size:13px;font-weight:600;color:var(--muted)}
.co-i{width:46px;height:46px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:24px;color:#fff}
.co-i.heart{background:linear-gradient(145deg,#FF9AAE,#FF4D6D)}.co-i.book{background:linear-gradient(145deg,#7DDBA8,#2FA36B)}
.chest-art .lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .6s var(--spring)}
.chest-art .glow{opacity:0;transition:opacity .5s}
.chest-art.open .lid{transform:translateY(-10px) rotate(-14deg)}
.chest-art.open .glow{opacity:1}
.chest-art{animation:chBob 2.4s ease-in-out infinite}
@keyframes chBob{0%,100%{transform:none}50%{transform:translateY(-3px)}}
.ch-q.gold{background:linear-gradient(135deg,#FFF6D6,#FFFFFF);box-shadow:inset 0 0 0 2px #F5C542}
.quiz-end{text-align:center;font-weight:800;color:var(--navy);font-size:16px;margin:10px 0 4px}
/* ---------- «Кто играет?» и выбор темы для «Поймай слова» ---------- */
.who{display:grid;gap:10px;margin-top:4px}
.who button{display:flex;align-items:center;gap:14px;padding:14px;border-radius:22px;background:#fff;text-align:left;box-shadow:inset 0 0 0 2px var(--line);transition:transform .22s var(--spring),box-shadow .2s}
.who button:active{transform:scale(.97);box-shadow:inset 0 0 0 2.5px var(--blue)}
.who b{display:block;font-size:17px;font-weight:800;color:var(--navy)}
.who small{font-size:13px;font-weight:600;color:var(--muted);line-height:1.3}
.wi{width:56px;height:56px;flex:none;border-radius:18px;display:grid;place-items:center;font-size:28px;color:#fff}
.wi.kids{background:linear-gradient(145deg,#6FE0A6,#24945E)}.wi.pro{background:linear-gradient(145deg,#6E9CF5,#1B3F8F)}
.catch-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.cp{display:flex;align-items:center;gap:10px;padding:10px;border-radius:18px;background:#fff;text-align:left;box-shadow:inset 0 0 0 2px var(--line);animation:riseIn .45s var(--out) both;transition:transform .22s var(--spring)}
.cp:active{transform:scale(.95)}
.cp canvas{width:40px;height:40px;flex:none}
.cp b{display:block;font-size:14.5px;font-weight:800;color:var(--navy);line-height:1.15}
.cp small{font-size:11.5px;font-weight:700;color:var(--muted)}
/* ---------- карточка «Ловца слов» в полёте ---------- */
.q-catch{display:flex;align-items:center;gap:10px;width:100%}
.qc-pics{display:flex;flex:none}
.qc-pics canvas{width:30px;height:30px;margin-right:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(27,63,143,.15)}
.qc-t{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left;line-height:1.15;margin-left:8px}
.qc-t b{font-size:18px;font-weight:800;color:var(--navy)}
.qc-t small{font-size:12.5px;font-weight:700;color:var(--muted)}
.qc-n{flex:none;font-size:26px;font-weight:800;color:#E64980;font-variant-numeric:tabular-nums}
.qc-n small{font-size:15px;color:var(--muted)}
.qc-n.bump{animation:pop .4s var(--spring)}
.qcard.shake{animation:shake .4s}
@keyframes shake{10%,90%{translate:-1px 0}20%,80%{translate:2px 0}30%,50%,70%{translate:-4px 0}40%,60%{translate:4px 0}}
/* ---------- итоги: приключение и «Поймай слова» ---------- */
.r-mode.adv{background:#EEF4FF;color:#1B3F8F}
.r-mode.catch{background:#FFE3EF;color:#C2255C}
.r-perks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rpk{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 45%,#fff)}
.rpk svg{width:24px;height:24px;padding:4px;border-radius:8px;color:#fff;background:var(--rc)}
.rpk b{font-size:13px;font-weight:800;color:var(--navy)}
/* ---------- настройки: чувствительность в три положения ---------- */
.sw.seg3{flex-wrap:wrap}
.s3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;margin-top:8px;padding:3px;border-radius:13px;background:#EEF4FF}
.s3 button{min-height:36px;border-radius:10px;font-size:13.5px;font-weight:800;color:var(--navy);transition:background .25s,color .25s,transform .2s var(--spring)}
.s3 button.on{background:#fff;box-shadow:0 2px 8px rgba(27,63,143,.15);color:#1D5FD0}
.s3 button:active{transform:scale(.95)}
/* ---------- полёт: кнопка форсажа слева, приключение на панели ---------- */
.hud.lefty .boostbtn{right:auto;left:max(calc(var(--sal) + 14px),calc(50% - 246px))}
.btn small.minus{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:800;color:#E5484D;margin-left:2px}
.btn small.minus svg{font-size:13px}
/* ---------- объёмный «конфетный» стиль: кнопки, карточки, плашки ----------
   У всего, что нажимается, — нижний край (тень без размытия): при нажатии кнопка «проседает» на него.
   Иконки — глянцевые: блик сверху, тень снизу. Только box-shadow и transform — без перерисовки соседей */
:root{--lip:#D3DFF0;--rim:#E6EEF9}
/* кнопки */
.btn{transition:transform .14s var(--out),box-shadow .14s var(--out)}
.btn:active{transform:translateY(3px)}
.btn.primary{background:linear-gradient(180deg,#4F8DF5 0%,#2B60D2 55%,#2250BA 100%);text-shadow:0 1px 0 rgba(10,30,80,.35);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 5px 0 #133A8A,0 12px 22px rgba(27,63,143,.3)}
.btn.primary:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 2px 0 #133A8A,0 5px 10px rgba(27,63,143,.25)}
.btn.green{background:linear-gradient(180deg,#52D899,#28A469);text-shadow:0 1px 0 rgba(0,70,40,.3);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 5px 0 #17774A,0 12px 22px rgba(47,163,107,.28)}
.btn.green:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 2px 0 #17774A,0 5px 10px rgba(47,163,107,.22)}
.btn.gold{background:linear-gradient(180deg,#FFDF5C,#F7B500);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 #C08600,0 12px 22px rgba(245,180,0,.28)}
.btn.gold:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 2px 0 #C08600,0 5px 10px rgba(245,180,0,.22)}
.btn.ghost,.btn.line{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--rim),0 4px 0 var(--lip),0 8px 16px rgba(27,63,143,.08)}
.btn.ghost:active,.btn.line:active{box-shadow:inset 0 0 0 1.5px var(--rim),0 1px 0 var(--lip)}
.btn.danger{box-shadow:inset 0 0 0 1.5px #FFDADA,0 4px 0 #F1C3C3}
.btn.danger:active{box-shadow:inset 0 0 0 1.5px #FFDADA,0 1px 0 #F1C3C3}
/* шапка меню: пилот, звёзды, настройки */
.lb-me,.chip,.ib.glass,.lb-de{background:rgba(255,255,255,.95);box-shadow:inset 0 0 0 1.5px #fff,0 3px 0 rgba(188,206,234,.95),0 8px 18px rgba(27,63,143,.12)}
.lb-me:active,.ib.glass:active,.lb-de:active{transform:translateY(2px)}
.chip.wallet svg{width:22px;height:22px;filter:none}
/* переключатель «Детям | Профи» */
.seg{background:#fff;box-shadow:inset 0 0 0 1.5px var(--rim),0 4px 0 var(--lip),0 10px 22px rgba(27,63,143,.12)}
.seg-ink{box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 #17774A}
.seg.pro .seg-ink{box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 #12306F}
/* большая карточка режима: яркая картинка, светлая кромка, жёлтая кнопка с пульсом */
.hc{box-shadow:0 5px 0 #173E94,0 16px 32px rgba(27,63,143,.3);transition:transform .14s var(--out),box-shadow .14s var(--out)}
.hc.kids{box-shadow:0 5px 0 #17774A,0 16px 32px rgba(23,119,74,.26)}
.hc:active{transform:translateY(3px);box-shadow:0 2px 0 #173E94,0 8px 16px rgba(27,63,143,.25)}
.hc.kids:active{box-shadow:0 2px 0 #17774A,0 8px 16px rgba(23,119,74,.22)}
.hc::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.38),inset 0 3px 0 rgba(255,255,255,.3)}
.hc-art canvas{filter:saturate(1.4) contrast(1.06)}
.hc::after{background:linear-gradient(180deg,rgba(10,24,72,0) 16%,rgba(10,24,72,.32) 52%,rgba(10,24,72,.8))}
.hc.kids::after{background:linear-gradient(180deg,rgba(8,60,40,0) 20%,rgba(8,56,38,.32) 54%,rgba(8,52,36,.78))}
.hc-t{font-size:23px;text-shadow:0 2px 0 rgba(0,0,0,.22),0 4px 14px rgba(0,0,0,.3)}
.hc-go{position:relative;height:46px;padding:0 19px;background:linear-gradient(180deg,#FFE680,#FFC21A);color:#5A3B00;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 #C98F00,0 10px 18px rgba(0,0,0,.22);transition:transform .14s var(--out),box-shadow .14s var(--out)}
.hc.kids .hc-go{color:#5A3B00}
.hc-go::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:2.5px solid rgba(255,214,64,.9);animation:goRing 1.9s ease-out infinite;pointer-events:none}
@keyframes goRing{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.22);opacity:0}}
.hc:active .hc-go{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 1px 0 #C98F00,0 4px 8px rgba(0,0,0,.2)}
/* маленькие карточки и задания дня */
.mc,.lb-miss{background:#fff;box-shadow:inset 0 0 0 1.5px var(--rim),0 4px 0 var(--lip),0 10px 20px rgba(27,63,143,.1);transition:transform .14s var(--out),box-shadow .14s var(--out)}
.mc:active,.lb-miss:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--rim),0 1px 0 var(--lip),0 4px 10px rgba(27,63,143,.08)}
.mc-i,.lb-miss .mm-i,.ai-i,.pk-i{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.12),0 3px 8px rgba(27,63,143,.16);transition:transform .35s var(--spring)}
.mc:active .mc-i{transform:scale(.88) rotate(-8deg)}
/* разделы: заголовки, карточки, строки таблицы, самолётики, слова */
.s-head h2{font-size:26px}
.s-head .ib{box-shadow:inset 0 0 0 1.5px var(--rim),0 3px 0 var(--lip)}
.card,.ach,.skin,.al-sum div,.aw,.lr,.am-info,.am-t,.pk{box-shadow:inset 0 0 0 1.5px var(--rim),0 4px 0 var(--lip),0 10px 20px rgba(27,63,143,.07)}
.pk{box-shadow:inset 0 0 0 2.5px color-mix(in srgb,var(--rc) 55%,#fff),0 4px 0 color-mix(in srgb,var(--rc) 35%,#D3DFF0),0 10px 20px rgba(27,63,143,.08)}
.aw,.skin,.pk{transition:transform .14s var(--out),box-shadow .14s var(--out),opacity .3s}
.aw:active,.skin:active{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px var(--rim),0 1px 0 var(--lip)}
.pk:active{transform:translateY(3px)}
.skin.cur{box-shadow:inset 0 0 0 3px var(--blue),0 4px 0 #2B60D2,0 10px 20px rgba(59,130,246,.25)}
.skin.sel{box-shadow:inset 0 0 0 3px #F5B400,0 4px 0 #D39A00,0 10px 20px rgba(245,180,0,.28)}
.lr.mine{background:#FFF6D6;box-shadow:inset 0 0 0 2px var(--yellow),0 4px 0 #E3B100}
.tabs{background:#E3ECFA;box-shadow:inset 0 2px 4px rgba(27,63,143,.08)}
.tabs button.on{box-shadow:0 3px 0 var(--lip),0 6px 12px rgba(27,63,143,.1)}
.me{box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 5px 0 #12306F,0 14px 28px rgba(27,63,143,.3)}
.hg-stage{box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.6),0 5px 0 var(--lip),0 14px 30px rgba(27,63,143,.14)}
.ach .ab{box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.08)}
.ach.tier3 .ab{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.1),0 0 18px rgba(245,180,0,.45)}
/* пауза: переключатели звука и музыки */
.tg{box-shadow:0 3px 0 #DCE5F2}
.tg.on{box-shadow:inset 0 0 0 2px #BFD5FF,0 3px 0 #BFD5FF}
.tg:active{transform:translateY(2px)}
/* карта главы: узлы как игровые фишки — белое кольцо, объёмный низ, блик */
.nd-c{box-shadow:0 0 0 3px #fff,0 5px 0 3px rgba(20,40,100,.22),0 12px 20px rgba(27,63,143,.25)}
.nd-c::before{content:"";position:absolute;left:20%;top:7%;width:46%;height:30%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));pointer-events:none}
.nd.sel .nd-c{box-shadow:0 0 0 4px #FFD23F,0 6px 0 4px #C98F00,0 14px 26px rgba(27,63,143,.35)}
.nd-l{box-shadow:0 2px 0 var(--lip),0 4px 8px rgba(27,63,143,.1)}
@media (prefers-reduced-motion:reduce){.hc-go::after{animation:none;opacity:0}}
/* у приключения небо у горизонта почти белое — сверху добавляем насыщенной синевы, чтобы карточка не выглядела блёклой */
.hc.adv .hc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(38,98,214,.62) 0%,rgba(38,98,214,.28) 42%,rgba(38,98,214,0) 72%)}
/* скрытые экраны не тратят кадры: их бесконечные анимации (лучи итогов, кольца на карте, блики, пульс кнопок)
   стоят на паузе, пока экран не откроют. Перечислены поимённо: правило «всё внутри скрытого экрана» заставляло
   браузер пересчитывать стили каждого элемента экрана при каждом переключении */
.scr:not(.on) :is(.shine,.dot,.mm-pips i,.gift .gb,.skel,.wc-guard,.am-lines .go,.r-head),
.scr:not(.on) :is(.hc-go,.ach .ab,.rx-bar i,.nd-c,.r-head)::after,.scr:not(.on) .r-head::before,
.tabbar:not(.on) .dot{animation-play-state:paused!important}