:root{font-family:Nunito,Inter,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;color:#261736;background:#160d25;--ink:#261736;--purple:#7c3aed;--pink:#ec4899;--yellow:#fbbf24;--mint:#34d399;--danger:#f43f5e;--panel:rgba(255,255,255,.94)}
*{box-sizing:border-box}
html{overflow-y:scroll}
/* Смена экранов через View Transitions API (см. motion.js?v=50f4a220dd → transition()).
   Без этого блока браузер использует дефолтный мгновенный кроссфейд 0.25s —
   здесь он чуть удлинён и совмещён с лёгким наездом камеры, в духе
   остальных переходов на карте (path-turn, checkpoint). Один блок правит
   анимацию всех вызовов transition() сразу. */
::view-transition-old(root){animation:screenOut .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:screenIn .32s cubic-bezier(0,0,.2,1) both}
@keyframes screenOut{to{opacity:0;transform:scale(.98)}}
@keyframes screenIn{from{opacity:0;transform:scale(1.02)}}

body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 12% 4%,rgba(126,211,246,.42) 0,transparent 34%),radial-gradient(circle at 88% 12%,rgba(110,78,170,.44) 0,transparent 32%),linear-gradient(180deg,#527f9f 0%,#493b78 48%,#21152f 100%);background-size:125% 125%;background-attachment:fixed;animation:ambientGradient 16s ease-in-out infinite alternate}
body[data-lesson-world]{background-color:#21152f;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;animation:none}
body[data-lesson-world="1"]{background-image:linear-gradient(rgba(12,10,39,.2),rgba(12,10,39,.28)),url("assets/world-moon.webp?v=efddf4d290")}
body[data-lesson-world="2"]{background-image:linear-gradient(rgba(20,48,27,.13),rgba(14,44,27,.22)),url("assets/world-forest.webp?v=32ce552a55")}
body[data-lesson-world="3"]{background-image:linear-gradient(rgba(24,56,89,.12),rgba(28,46,70,.2)),url("assets/world-castle.webp?v=ad9eb5706d")}
body[data-lesson-world="4"]{background-image:linear-gradient(rgba(4,39,72,.12),rgba(4,37,67,.22)),url("assets/world-tower.webp?v=01d81decd9")}
body[data-lesson-world="5"]{background-image:linear-gradient(rgba(53,72,35,.08),rgba(68,54,25,.16)),url("assets/world-knight-road.webp?v=02502c7827")}
body[data-lesson-world="6"]{background-image:linear-gradient(rgba(50,68,91,.08),rgba(63,51,38,.16)),url("assets/world-dragon-cliffs.webp?v=4d78a96a0b")}
body[data-lesson-world="7"]{background-image:linear-gradient(rgba(7,29,59,.14),rgba(11,27,54,.24)),url("assets/world-rune-cave.webp?v=a3852798ae")}
body[data-lesson-world="8"]{background-image:linear-gradient(rgba(84,53,22,.08),rgba(75,47,20,.16)),url("assets/world-royal-mail.webp?v=bdf1418c4c")}
body[data-lesson-world="9"]{background-image:linear-gradient(rgba(5,16,52,.12),rgba(9,15,46,.22)),url("assets/world-number-vault.webp?v=5cf84e319f")}
body[data-lesson-world="10"]{background-image:linear-gradient(rgba(35,84,142,.06),rgba(58,68,102,.14)),url("assets/world-olympus.webp?v=661427b1f4")}
button,input{font:inherit}
.app{width:min(1120px,calc(100% - 28px));margin:0 auto;padding:34px 0 60px}
.hidden{display:none!important}
.hero{text-align:center;color:white;position:relative}
.hero-sky{font-size:28px;letter-spacing:16px;opacity:.75;animation:floatSky 4s ease-in-out infinite alternate}
.brand-badge,.eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;background:#261736;color:white;font-weight:900;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(255,255,255,.18)}
h1{font-size:clamp(44px,8vw,84px);line-height:.95;margin:14px 0 12px;letter-spacing:-.06em;text-shadow:0 8px 22px rgba(0,0,0,.25)}
.subtitle{margin:0 auto 22px;max-width:720px;font-size:19px;line-height:1.5;color:#efe6ff}
.adaptive-card{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;text-align:left;background:linear-gradient(135deg,#fff,#f5f3ff);color:var(--ink);border:2px solid #c4b5fd;border-radius:24px;padding:16px 18px;margin:0 auto 22px;box-shadow:0 15px 35px rgba(16,8,30,.18)}
.adaptive-card h2{margin:3px 0;font-size:21px}
.adaptive-card p{margin:0;color:#705d7b}
.world-map{position:relative;z-index:2;display:grid;gap:24px;text-align:left}
.world-card{position:relative;overflow:hidden;background:#fff;color:var(--ink);border-radius:30px;padding:22px;box-shadow:0 20px 60px rgba(11,4,20,.22);border:2px solid #fff}
.world-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,var(--world-glow,#ede9fe),transparent 34%);pointer-events:none}
.world-1{--world-glow:#e9d5ff;--world-accent:#8d62e7;--world-deep:#6940c7;--world-soft:#f1e7ff;--world-heading-ink:#3b176d;--world-heading-muted:#75549b}
.world-2{--world-glow:#bbf7d0;--world-accent:#268c68;--world-deep:#166c4e;--world-soft:#e4f7ec;--world-heading-ink:#174936;--world-heading-muted:#4d715f}
.world-3{--world-glow:#fde68a;--world-accent:#bd821c;--world-deep:#90600e;--world-soft:#fff3d4;--world-heading-ink:#61400e;--world-heading-muted:#80662f}
.world-4{--world-glow:#ddd6fe;--world-accent:#6877d5;--world-deep:#4c59ad;--world-soft:#e9ecff;--world-heading-ink:#2d3775;--world-heading-muted:#616a96}
.world-5{--world-glow:#fecdd3;--world-accent:#bd5360;--world-deep:#923744;--world-soft:#ffe7ea;--world-heading-ink:#682b34;--world-heading-muted:#8c5b62}
.world-6{--world-glow:#fed7aa;--world-accent:#bd6338;--world-deep:#91451f;--world-soft:#ffeddf;--world-heading-ink:#67331d;--world-heading-muted:#8b6451}
.world-7{--world-glow:#cffafe;--world-accent:#258da2;--world-deep:#176b7c;--world-soft:#e3f8fb;--world-heading-ink:#19515b;--world-heading-muted:#52767d}
.world-8{--world-glow:#fef3c7;--world-accent:#ad7328;--world-deep:#815016;--world-soft:#fff2dc;--world-heading-ink:#624119;--world-heading-muted:#826847}
.world-9{--world-glow:#dbeafe;--world-accent:#4d71c4;--world-deep:#31509a;--world-soft:#e8efff;--world-heading-ink:#294277;--world-heading-muted:#5c6e94}
.world-10{--world-glow:#e0e7ff;--world-accent:#6961c2;--world-deep:#4b4399;--world-soft:#eeecff;--world-heading-ink:#39356e;--world-heading-muted:#67628d}
.world-complete{border-color:#fbbf24}
.world-header{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.world-emblem{display:grid;place-items:center;width:66px;height:66px;border-radius:22px;background:#261736;font-size:36px;box-shadow:0 8px 0 #120a19}
.world-emblem img{display:block;width:62px;height:62px;object-fit:contain}
.world-kicker{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#7c3aed}
.world-header h2{margin:2px 0;font-size:clamp(24px,4vw,36px)}
.world-header p{margin:0;color:#75647d}
.world-stars{font-weight:900;background:white;border:1px solid #eaddeb;padding:9px 12px;border-radius:14px}
.world-story{position:relative;z-index:1;display:flex;gap:12px;align-items:center;margin:16px 0;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.7);color:#65516f;font-weight:700}
.world-story span{font-size:25px;white-space:nowrap}
.world-heading-featured{position:relative;z-index:1;overflow:hidden;margin:-4px -4px 0;padding:16px;border:1px solid color-mix(in srgb,var(--world-accent) 22%,transparent);border-radius:26px;background:radial-gradient(circle at 76% 18%,rgba(255,245,196,.38),transparent 27%),linear-gradient(135deg,rgba(255,255,255,.97),color-mix(in srgb,var(--world-soft) 88%,white));box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 26px color-mix(in srgb,var(--world-deep) 11%,transparent)}
.world-heading-featured .world-header{z-index:1;gap:18px}
.world-heading-featured .world-emblem{width:92px;height:92px;border-radius:24px;background:radial-gradient(circle at 38% 28%,color-mix(in srgb,var(--world-accent) 72%,white),var(--world-deep) 68%,color-mix(in srgb,var(--world-deep) 76%,#21132e));box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 10px 22px color-mix(in srgb,var(--world-deep) 30%,transparent)}
.world-heading-featured .world-emblem img{width:86px;height:86px}
.world-heading-featured h2{margin:0;color:var(--world-heading-ink);font-size:clamp(30px,4.4vw,43px);line-height:1.05;letter-spacing:-.025em}
.world-heading-featured .world-header p{margin-top:5px;color:var(--world-heading-muted);font-size:17px;font-weight:800}
.world-heading-featured .world-stars{display:flex;align-items:center;gap:7px;padding:12px 16px;border:0;border-radius:18px;background:linear-gradient(180deg,var(--world-accent),var(--world-deep));color:#fff;font-size:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 7px 16px color-mix(in srgb,var(--world-deep) 25%,transparent)}
.world-heading-featured .world-stars span{filter:drop-shadow(0 2px 2px rgba(91,50,30,.22))}
.world-heading-featured .world-story{z-index:1;margin:14px 0 0;padding:12px 16px;border:1px solid color-mix(in srgb,var(--world-accent) 24%,transparent);border-radius:17px;background:rgba(255,255,255,.76);color:var(--world-heading-muted);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(10px)}
.world-heading-featured .world-story span{font-size:23px}
.path-scroll{position:relative;z-index:1;overflow:visible;padding:8px 0 18px}
.adventure-path{position:relative;min-height:272px;width:100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:84px;align-items:center;padding:10px 22px}
.adventure-path{--path-pad:22px;--path-row-h:84px;--path-edge:calc(var(--path-pad) + (100% - 2 * var(--path-pad)) / 14)}
.path-line{position:absolute;left:var(--path-edge);right:var(--path-edge);height:7px;border-radius:999px;background:repeating-linear-gradient(90deg,#c4b5fd 0 18px,#ede9fe 18px 30px);box-shadow:inset 0 2px 3px rgba(0,0,0,.12);transform:translateY(-50%)}
.path-line-top{top:calc(10px + var(--path-row-h) * .5)}
.path-line-middle{top:calc(10px + var(--path-row-h) * 1.5)}
.path-line-bottom{top:calc(10px + var(--path-row-h) * 2.5)}
.path-turn{position:absolute;width:7px;height:var(--path-row-h);border-radius:999px;background:#c4b5fd;box-shadow:inset 2px 0 3px rgba(0,0,0,.12);transform:translateX(-50%)}
.path-turn-right{left:calc(100% - var(--path-edge));top:calc(10px + var(--path-row-h) * .5)}
.path-turn-left{left:var(--path-edge);top:calc(10px + var(--path-row-h) * 1.5)}
.path-node{position:relative;z-index:2;grid-row:var(--path-row);grid-column:var(--path-column);justify-self:center;width:56px;height:56px;border-radius:50%;border:3px solid white;background:#7c3aed;color:white;display:grid;place-items:center;grid-template-rows:1fr auto auto;padding:4px;box-shadow:0 3px 0 #4c1d95,0 5px 8px rgba(76,29,149,.2);cursor:pointer;transition:.2s ease}
.path-node:hover{transform:translateY(-3px) scale(1.06)}
.warmup-card{border-color:#fcd34d;background:linear-gradient(135deg,#fff,#fffbeb)}.warmup-card.warmup-done{opacity:.78}.warmup-card.warmup-done .primary-button{background:#d1fae5;color:#047857;border-color:#6ee7b7;box-shadow:none;cursor:default}
.arena-card{border-color:#67e8f9;background:linear-gradient(135deg,#fff,#ecfeff)}
.result-note{max-width:520px;margin:6px auto 14px;color:#5b4b6b;font-weight:700}
.path-node.game{background:#ec4899;box-shadow:0 3px 0 #9d174d,0 5px 8px rgba(157,23,77,.22)}
.path-node.blind{background:#2563eb;box-shadow:0 3px 0 #1e3a8a,0 5px 8px rgba(30,58,138,.22)}
.path-node.boss{background:#261736;box-shadow:0 3px 0 #100815,0 5px 8px rgba(0,0,0,.24)}
.path-node.completed{border-color:#fde68a;outline:2px solid #fbbf24;outline-offset:1px}
.node-icon{font-size:20px;line-height:1}
.path-node.sprite-icon{grid-template-rows:28px 9px 9px;padding:2px 4px 3px}
.world-card .path-node.sprite-icon .node-icon{align-self:center;justify-self:center;width:28px;height:28px;background-image:var(--sprite-image);background-repeat:no-repeat;background-size:var(--sprite-size,700% 300%);background-position:var(--sprite-position,var(--sprite-x) var(--sprite-y));font-size:0}
.path-node.sprite-icon .node-label{align-self:end;line-height:9px}
.path-node.sprite-icon .node-stars{align-self:end;line-height:8px}
.world-card .path-node.boss.sprite-icon .node-icon{position:absolute;left:50%;top:50%;z-index:1;width:56px;height:56px;transform:translate(-50%,-50%);margin:0}
.path-node.boss.sprite-icon .node-label,.path-node.boss.sprite-icon .node-stars{position:relative;z-index:2}
.path-node.boss.sprite-icon .node-label{grid-row:2}
.path-node.boss.sprite-icon .node-stars{grid-row:3}
.path-node.boss.sprite-icon .node-label{-webkit-text-stroke:1px #120a19;paint-order:stroke fill;text-shadow:0 1px 1px #120a19}
.node-label{font-size:7px;font-weight:950;letter-spacing:.03em}
.node-stars{min-width:31px;padding:1px 2px;border-radius:999px;background:rgba(20,8,32,.58);font-size:7px;line-height:1.1;white-space:nowrap;color:#fef3c7}
.path-node:not(.completed) .node-stars{opacity:.55;color:#ddd6fe}
.world-1 .path-node:not(.boss){background:#7c3aed;box-shadow:0 3px 0 #4c1d95,0 5px 8px rgba(76,29,149,.2)}
.world-2 .path-node:not(.boss){background:#0f766e;box-shadow:0 3px 0 #115e59,0 5px 8px rgba(17,94,89,.22)}
.world-3 .path-node:not(.boss):not(.game):not(.blind){background:#f0cf36;color:#78350f;box-shadow:0 3px 0 #b45309,0 5px 8px rgba(180,83,9,.22)}
.world-4 .path-node:not(.boss):not(.game):not(.blind){background:#7dd3fc;color:#0c4a6e;box-shadow:0 3px 0 #0369a1,0 5px 8px rgba(3,105,161,.22)}
.world-5 .path-node:not(.boss){background:#be123c;box-shadow:0 3px 0 #881337,0 5px 8px rgba(136,19,55,.22)}
.world-6 .path-node:not(.boss){background:#c2410c;box-shadow:0 3px 0 #7c2d12,0 5px 8px rgba(124,45,18,.22)}
.world-7 .path-node:not(.boss){background:#0e7490;box-shadow:0 3px 0 #164e63,0 5px 8px rgba(22,78,99,.22)}
.world-8 .path-node:not(.boss){background:#a16207;box-shadow:0 3px 0 #713f12,0 5px 8px rgba(113,63,18,.22)}
.world-9 .path-node:not(.boss){background:#1d4ed8;box-shadow:0 3px 0 #1e3a8a,0 5px 8px rgba(30,58,138,.22)}
.world-10 .path-node:not(.boss){background:#4338ca;box-shadow:0 3px 0 #312e81,0 5px 8px rgba(49,46,129,.22)}
.path-node.game,.path-node.boss{width:56px;height:56px}
.world-card .path-node.game{background:#dc2626;box-shadow:0 3px 0 #991b1b,0 5px 8px rgba(153,27,27,.22)}
.path-node.boss{background:linear-gradient(145deg,#4c1d95,#18101f);box-shadow:0 3px 0 #100815,0 5px 8px rgba(0,0,0,.24)}
.path-node.game:hover,.path-node.boss:hover{transform:translateY(-3px) scale(1.06)}
.battle-node-badge{position:absolute;right:-8px;top:-10px;z-index:3;width:23px;height:23px;display:grid;place-items:center;border:2px solid white;border-radius:50%;background:#fbbf24;font-size:13px;line-height:1;color:#4a2500;font-weight:950;box-shadow:0 3px 0 #b45309}
.path-node.game .node-icon,.path-node.boss .node-icon{font-size:20px}
.path-node.game .node-label,.path-node.boss .node-label{font-size:8px;letter-spacing:.05em}
.world-banner{position:relative;z-index:1;text-align:center;background:#fff7d6;border:1px solid #fbbf24;border-radius:15px;padding:9px;font-weight:900;color:#6b4d00}
#gameScreen{color:var(--ink);margin-top:-22px}
.game-header{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px;margin-bottom:8px}
.game-title-wrap{text-align:center}
.game-header-actions{display:flex;align-items:center;gap:8px}
.ghost-button,.primary-button{min-height:46px;border-radius:15px;padding:0 16px;font-weight:950;cursor:pointer}
.ghost-button{border:1px solid #ded3e4;background:white;color:#4b375b}
.primary-button{border:0;background:#261736;color:white;box-shadow:0 7px 0 #120a19}
.primary-button:active{transform:translateY(3px);box-shadow:0 4px 0 #120a19}
.hud{width:min(100%,560px);display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 auto 9px}
.hud>div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;background:white;border:1px solid #eaddeb;border-radius:14px;padding:7px 9px}
.hud span{grid-row:1/span 2;font-size:20px}
.hud b{font-size:17px}
.hud small{color:#836f8e;font-size:10px;font-weight:700}
.race-panel{width:100%;background:#261736;color:white;border-radius:16px;padding:6px 12px 8px;margin:0 0 9px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.race-labels{display:flex;justify-content:space-between;font-size:11px;font-weight:950;letter-spacing:.08em;opacity:.85}
.track{height:44px;margin-top:4px;border-radius:999px;position:relative;background:linear-gradient(90deg,#4c1d95,#831843);overflow:hidden;border:2px solid rgba(255,255,255,.18)}
.track::before{content:"";position:absolute;left:18px;right:18px;top:60%;border-top:2px dashed rgba(255,255,255,.28)}
.track-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(52,211,153,.35),rgba(251,191,36,.28));transition:width .18s ease}
.mascot{position:absolute;left:3%;top:54%;transform:translate(-50%,-50%);width:38px;height:38px;transition:left .23s cubic-bezier(.2,.8,.2,1);z-index:4;filter:drop-shadow(0 5px 6px rgba(0,0,0,.25))}
.mascot.boost{animation:boost .45s ease}
.mascot-svg{width:100%;height:100%;overflow:visible;animation:hoverFly 1.35s ease-in-out infinite alternate}
.hat,.hat-brim{fill:#6d3fc7;stroke:#2b1744;stroke-width:2;stroke-linejoin:round}
.hat-star{fill:#fbbf24;stroke:#b45309;stroke-width:1.5;stroke-linejoin:round}
.face-shape{fill:#ffe9d6;stroke:#2b1744;stroke-width:2}
.eye{fill:#2b1744}
.blush{fill:#f9a8d4;opacity:.8}
.smile,.wand{fill:none;stroke:#2b1744;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.trail{position:absolute;right:52px;top:24px;color:#fbbf24;white-space:nowrap;font-size:15px;animation:twinkle .8s infinite alternate}
.checkpoint{position:absolute;top:1px;transform:translateX(-50%);display:grid;justify-items:center;gap:0;opacity:.52;transition:.2s ease;z-index:2}
.checkpoint span{font-size:12px;line-height:1}
.checkpoint small{font-size:7px;font-weight:900}
.checkpoint.reached{opacity:1;transform:translateX(-50%) scale(1.15);filter:drop-shadow(0 0 7px rgba(251,191,36,.8))}
.c1{left:25%}
.c2{left:50%}
.c3{left:75%}
.c4{left:96%}
.exercise-card{background:#fdf3dd;border:2px solid #ecd9a3;border-radius:20px;padding:11px 16px 13px;margin-bottom:0;box-shadow:0 10px 28px rgba(120,90,20,.16)}
.game[data-kind="boss"] .exercise-card{border:3px solid #f59e0b}
.game[data-kind="game"] .exercise-card{border:3px solid #f9a8d4}
.round-line{display:flex;justify-content:space-between;gap:12px;color:#806e89;font-size:13px;font-weight:900}
.target-line{display:flex;justify-content:center;gap:clamp(4px,1vw,10px);margin:24px 0 12px;padding:8px 3px;font-size:clamp(22px,4vw,40px);line-height:1.35;font-weight:950;white-space:nowrap}
.target-line.medium-text{flex-wrap:wrap;gap:4px 3px;margin:18px 0 10px;font-size:clamp(18px,2.4vw,30px);white-space:normal}
.target-line.medium-text .char{flex:0 0 clamp(26px,3vw,42px);height:clamp(48px,5vw,64px);aspect-ratio:auto;border-radius:10px}
.target-line.long-text{flex-wrap:wrap;gap:3px 2px;margin:15px 0 10px;font-size:clamp(16px,1.7vw,21px);white-space:normal}
.target-line.long-text .char{flex:0 0 clamp(19px,1.8vw,25px);height:clamp(42px,4vw,54px);aspect-ratio:auto;border-radius:8px}
.char{position:relative;display:grid;place-items:center;flex:0 1 64px;min-width:0;aspect-ratio:1;border:1px solid #ddd7c9;background:#fffaf0;color:#3b3226;border-radius:14px;box-shadow:0 2px 5px rgba(120,90,20,.1)}
.char.done::before{content:'✓';position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#10bd78;color:#fff;font-size:10px;line-height:1;box-shadow:0 0 0 2px #fff}
.char.current{box-shadow:0 0 0 3px rgba(231,181,69,.4),0 0 14px rgba(231,181,69,.4);border-color:#e7b545}
.char.error{background:#fecdd3;color:#be123c;animation:shake .22s linear}
.feedback{min-height:24px;text-align:center;font-weight:900;color:#6d5b78}
.balloon-stage{position:relative;height:clamp(260px,40vh,460px);margin:0 0 14px;overflow:hidden;border:3px solid #ffffffcc;border-radius:20px;background:linear-gradient(180deg,#d8c8f5,#ffe1d0);box-shadow:0 6px 16px #3b235022}
.balloon-canvas{position:absolute;inset:0}.balloon-canvas canvas{display:block}
.balloon-instruction{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:3;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.86);color:#49345f;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 2px 8px #3829471a}
.balloon-counter{position:absolute;left:12px;top:10px;z-index:3;padding:5px 12px;border-radius:999px;background:#5b3f9acc;color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
.balloon-fallback{position:absolute;inset:0;z-index:2;display:none;place-content:center;font-size:44px;font-weight:900;color:#3b2350}
.balloon-stage.no-canvas .balloon-fallback{display:grid}
.balloon-stage.victory .victory-banner{opacity:1;transform:scale(1);transition-delay:.4s}
.victory-banner{position:absolute;inset:0;z-index:8;display:grid;place-content:center;justify-items:center;background:rgba(36,32,42,.82);color:white;opacity:0;pointer-events:none;transform:scale(.92);transition:.28s}
.victory-banner span{font-size:45px}.victory-banner b{font-size:clamp(38px,7vw,72px);letter-spacing:.08em}.victory-banner small{font-size:15px;font-weight:900;color:#fde68a}
.keyboard-toggle{width:min(100%,300px);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px;background:white;border:1px solid #eaddeb;border-radius:16px;padding:9px 11px;cursor:pointer}
.keyboard-toggle input{position:absolute;opacity:0;pointer-events:none}
.keyboard-toggle>span:last-child{display:grid;gap:2px}
.keyboard-toggle b{font-size:14px}.keyboard-toggle small{color:#806e89;font-size:11px;font-weight:700;line-height:1.15}
.toggle-track{width:48px;height:28px;padding:3px;border-radius:999px;background:#d8cadf;transition:.18s}
.toggle-track span{display:block;width:22px;height:22px;border-radius:50%;background:white;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:.18s}
.keyboard-toggle input:checked+.toggle-track{background:#7c3aed}
.keyboard-toggle input:checked+.toggle-track span{transform:translateX(20px)}
.header-keyboard-toggle{width:auto;min-height:46px;grid-template-columns:auto auto;padding:6px 10px;border-radius:15px}.header-keyboard-toggle b{font-size:11px}.header-keyboard-toggle .toggle-track{width:40px;height:24px;padding:3px}.header-keyboard-toggle .toggle-track span{width:18px;height:18px}.header-keyboard-toggle input:checked+.toggle-track span{transform:translateX(16px)}
#keyboardWrap{position:relative;padding-top:7px;transition:opacity .18s;overflow:visible}
#keyboardWrap.keyboard-hidden{display:none;opacity:0}
.blind-note{margin:0;padding:14px 18px;border-radius:16px;background:#eef2ff;border:2px dashed #a5b4fc;color:#3730a3;font-size:15px;font-weight:700;line-height:1.4;align-self:center}.blind-note b{font-weight:900}
.keyboard{display:grid;gap:7px;background:#f3f3f3;border:10px solid #f7f7f7;border-radius:24px;padding:10px;box-shadow:0 0 0 1px #e5e5e5,0 9px 0 #e9e9e9}
.key-row{display:grid;gap:6px;grid-template-columns:repeat(30,minmax(0,1fr))}
.key{--finger-color:#cbbfd0;grid-column:span var(--span,2);display:grid;place-items:center;min-width:0;min-height:64px;border-radius:10px;background:white;border:2px solid #d2d2d2;color:#6f6676;font-size:18px;font-weight:950;line-height:1;transition:.12s;position:relative;box-shadow:0 2px 0 #d2d2d2}
.finger-pinky{--finger-color:#0d7df4}.finger-ring{--finger-color:#7dbb18}.finger-middle{--finger-color:#ffbd25}.finger-index{--finger-color:#ff4c4c}.finger-thumb{--finger-color:#8b5cf6}
.key.typing-key,.key.learned:not(.modifier-key){background:var(--finger-color);border-color:var(--finger-color);color:white;font-size:21px;text-shadow:0 1px 1px rgba(0,0,0,.16);box-shadow:0 3px 0 color-mix(in srgb,var(--finger-color) 78%,#333)}
.key.modifier-key{font-size:10px;letter-spacing:.035em;color:#716b73;background:#fafafa}.key.space-key{font-size:13px}
.key.active{z-index:3}.key.active::after{content:"";position:absolute;left:50%;top:50%;width:128px;height:128px;border-radius:50%;background:rgba(255,255,255,.38);transform:translate(-50%,-50%);pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.key.wrong{background:#fecdd3!important;border-color:#fb7185!important;color:#be123c!important}
.key .dot{width:5px;height:5px;border-radius:50%;background:white;position:absolute;bottom:7px;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.key-guide-character{position:absolute;z-index:7;width:55px;height:59px;transform:translateX(-50%);transition:left .15s ease,top .15s ease;pointer-events:none;filter:drop-shadow(0 5px 4px rgba(38,23,54,.26))}
#guideMascot{position:absolute;inset:0;background:center bottom/auto 100% no-repeat;transform-origin:50% 100%;animation:guideBounce .7s ease-in-out infinite alternate}
.hand-guide{display:flex;justify-content:center;align-items:flex-start;gap:8px;margin-top:6px;padding:7px 10px 0;border-radius:18px;background:rgba(255,255,255,.9);border:1px solid rgba(234,221,235,.75);overflow:hidden}
.hand-card{display:grid;justify-items:center;width:min(18%,100px);color:#806e89;font-size:8px;letter-spacing:.1em}.hand-card>b{margin-top:-13px;position:relative;z-index:4}.hand-visual{position:relative;width:100%;aspect-ratio:270/300}
.hand-svg{display:block;width:100%;height:100%;overflow:visible}.right-hand{transform:scaleX(-1)}
.hand-outline{fill:#fff;stroke:#555158;stroke-width:6;stroke-linejoin:round;filter:drop-shadow(0 4px 0 rgba(85,81,88,.08))}
.hand-seams{fill:none;stroke:#555158;stroke-width:4;stroke-linecap:round}
.hand-zone{fill:transparent;stroke:transparent;stroke-width:4;transition:fill .16s,stroke .16s,filter .16s}.finger-dot{fill:var(--finger-color);stroke:#fff;stroke-width:3;transition:r .16s,filter .16s}
.hand-finger-zone.active .hand-zone{fill:var(--finger-color);fill-opacity:.2;stroke:var(--finger-color);filter:drop-shadow(0 0 8px var(--finger-color))}.hand-finger-zone.active .finger-dot{r:14;filter:drop-shadow(0 0 7px var(--finger-color))}
.hand-side-mark{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#f8f7f8;color:#d2ced4;font-size:16px;font-weight:950}
.finger-hint{width:max-content;max-width:100%;min-width:1px;min-height:28px;margin:6px auto 0;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.9);color:#443154;text-align:center;font-size:12px;font-weight:900}.finger-hint:empty{visibility:hidden}
.game.hands-disabled .hand-guide,.game.hands-disabled .finger-hint{display:none}.game.hands-disabled .key.typing-key,.game.hands-disabled .key.learned:not(.modifier-key):not(.space-key){background:#fff;border-color:#d2d2d2;color:#6f6676;text-shadow:none;box-shadow:0 2px 0 #d2d2d2}.game.hands-disabled .key .dot{background:#6f6676}
.game.keyboard-disabled #keyboardWrap{display:none!important}
.result{position:relative;text-align:center;padding:60px 12px;color:white;overflow:hidden}
.result-character{font-size:72px}
.result h2{font-size:clamp(32px,6vw,56px);margin:12px 0}
.stars{font-size:54px;letter-spacing:7px;margin:16px 0 22px}
.result-metrics{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px auto;max-width:850px}
.metric{background:white;color:var(--ink);border:1px solid #eaddeb;border-radius:18px;padding:14px 20px;min-width:140px}
.metric.weak{border-color:#fbbf24}
.metric b{display:block;font-size:26px}
.metric small{color:#7d6987;font-weight:700}
.result-actions{position:relative;z-index:2;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:30px}.result-icon{width:82px;height:82px;padding:0;border:8px solid white;border-radius:50%;color:white;display:grid;place-items:center;cursor:pointer;box-shadow:0 7px 20px rgba(12,7,24,.25)}.result-icon svg{display:block;width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.result-icon.home svg{fill:none}.result-icon.home{background:#f97316}.result-icon.retry{background:#0ea5e9}.result-icon.next{background:#84cc16}.result-icon:hover{transform:translateY(-3px)}
.celebration{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}.celebration i{position:absolute;left:var(--x);bottom:-30px;color:var(--color);font-size:clamp(15px,2.5vw,30px);font-style:normal;opacity:0;animation:celebrate 2.6s var(--delay) ease-out both}.result>*:not(.celebration){position:relative;z-index:2}
@keyframes celebrate{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-85vh) scale(1.25) rotate(420deg)}}
@keyframes twinkle{to{opacity:.25;transform:scale(.7)}
}
@keyframes hoverFly{to{transform:translateY(-5px) rotate(-2deg)}
}
@keyframes boost{50%{transform:translate(-50%,-50%) scale(1.18) rotate(-6deg)}
}
@keyframes shake{25%{transform:translateX(-3px)}
75%{transform:translateX(3px)}
}
@keyframes floatSky{to{transform:translateY(8px);opacity:.45}
}
@keyframes ambientGradient{to{background-position:10% 4%,90% 12%,50% 100%}
}
@keyframes guideBounce{to{transform:translateY(-4px) scale(1.03)}
}
@media(max-width:850px){.world-header{grid-template-columns:auto 1fr}
.world-stars{grid-column:1/-1;justify-self:start}
.adaptive-card{grid-template-columns:auto 1fr}
.adaptive-card button{grid-column:1/-1}
.game-header{grid-template-columns:1fr 1fr}
.game-title-wrap{grid-column:1/-1;grid-row:1}
.hud{grid-template-columns:1fr}
.keyboard{padding:8px;gap:5px}
.key-row{gap:4px}
.key{min-height:42px;font-size:11px}.key.typing-key,.key.learned:not(.modifier-key){font-size:15px}.key.modifier-key{font-size:8px}
.game-header button{width:100%}
}
@media(max-width:560px){.app{width:min(100% - 14px,1120px);padding-top:16px}
.world-card{padding:16px;border-radius:24px}
.world-header{grid-template-columns:1fr}
.world-emblem{width:54px;height:54px}
.world-heading-featured{margin:-4px;padding:12px;border-radius:21px}
.world-heading-featured .world-header{grid-template-columns:auto minmax(0,1fr);gap:12px}
.world-heading-featured .world-emblem{width:64px;height:64px;border-radius:18px}
.world-heading-featured .world-emblem img{width:60px;height:60px}
.world-heading-featured h2{font-size:28px}
.world-heading-featured .world-header p{font-size:14px}
.world-heading-featured .world-stars{grid-column:1/-1;padding:9px 13px;font-size:16px}
.world-heading-featured .world-story{padding:10px 12px;font-size:14px;line-height:1.35}
.world-story{align-items:flex-start}
.adventure-path{min-height:auto;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:70px;padding:14px 2px}
.path-line,.path-turn{display:none}
.path-node{grid-row:auto;grid-column:auto;width:50px;height:50px;border-width:3px}
.path-node.game,.path-node.boss{width:50px;height:50px}
.node-icon{font-size:18px}
.node-label{font-size:8px}
.target-line{letter-spacing:0}
.hand-guide{gap:4px;padding-inline:4px}.hand-card{width:min(28%,90px)}.hand-card>b{font-size:7px}.hand-side-mark{width:27px;height:27px;font-size:14px}
.race-panel{padding-inline:10px}
.keyboard{overflow-x:auto}.key-row{min-width:760px}
.round-line{flex-direction:column}
.hud>div{grid-template-columns:auto auto 1fr}
.hud small{justify-self:end}
.result{padding-top:30px}
.track{height:44px}
.mascot{width:36px;height:36px}

}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Урок: сначала понятная задача, затем строка и спокойные подсказки. */
.lesson-title{margin:0 0 6px;font-size:clamp(19px,2.4vw,26px);color:#382947}
.lesson-description{max-width:760px;margin:0 auto 16px;color:#655672;line-height:1.5;font-size:15px}
.target-line,.target-line.medium-text,.target-line.long-text{flex-wrap:wrap;gap:12px 5px;align-items:center;white-space:normal}
.typing-word{display:inline-flex;gap:3px;flex:0 0 auto}
.target-line .char{flex:0 0 auto;width:clamp(34px,4.8vw,58px);height:clamp(34px,4.8vw,58px);aspect-ratio:auto}
.target-line.medium-text .char{flex:0 0 auto;width:clamp(28px,3.6vw,44px);height:clamp(28px,3.6vw,44px)}
.target-line.long-text .char{flex:0 0 auto;width:clamp(22px,2.6vw,32px);height:clamp(22px,2.6vw,32px)}
.target-line .space{width:clamp(24px,4vw,48px)}
.layout-dialog{position:fixed;width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;margin:auto;padding:30px;border:1px solid #ded0ec;border-radius:26px;background:#fffafd;color:#382947;text-align:center;box-shadow:0 24px 90px #1e103d66}
.layout-dialog::backdrop{background:#1e143a99;backdrop-filter:blur(5px)}
.layout-dialog h2{font-size:27px;margin:12px 0}
.layout-dialog p{font-size:16px;line-height:1.6}
.layout-dialog .dialog-note{font-size:14px;color:#746181}
.dialog-icon{font-size:42px}
.dialog-close{position:absolute;right:10px;top:10px;width:40px;height:40px;border:0;border-radius:50%;background:#eee6f4;color:#573870;font-size:28px;cursor:pointer}
button:focus-visible,select:focus-visible{outline:3px solid #b584f4;outline-offset:4px}
@media(max-width:560px){.game-header-actions{flex-wrap:wrap;justify-content:flex-end}.game-header{grid-template-columns:auto 1fr}.game-header-actions{grid-column:1/-1}.lesson-description{font-size:14px}.target-line{font-size:23px}.target-line.medium-text{font-size:20px}.typing-word{gap:2px}}

.game-header{grid-template-columns:auto 1fr}.game-header-actions{flex-wrap:wrap;justify-content:flex-end}

@media(min-width:851px){.game-header{grid-template-columns:110px minmax(130px,1fr) auto}.game-header-actions{max-width:720px}}

@media(max-width:850px){#gameScreen{margin-top:0}.hud{grid-template-columns:repeat(3,minmax(0,1fr))}.hud>div{grid-template-columns:auto 1fr}.hud small{justify-self:start}}
.lesson-title{text-align:center;text-shadow:none}

/* Экран практики: компактная композиция для ноутбука, естественный reflow при увеличении. */
body:has(#gameScreen:not(.hidden)) .app{padding-top:12px;padding-bottom:12px}
body:has(#gameScreen:not(.hidden)){background-blend-mode:screen;background-color:#231c2c}
#gameScreen{max-width:960px;margin:0 auto;color:#382947;zoom:var(--lesson-zoom,1)}
body:has(#gameScreen:not(.hidden)) .app{width:calc(100% - 28px)}
.game-header{grid-template-columns:110px minmax(0,1fr) 230px;gap:12px;margin-bottom:12px}
.game-header-actions{grid-column:auto;justify-content:flex-end;position:relative;flex-wrap:nowrap;gap:8px}
.game-title-wrap{grid-column:auto;grid-row:auto;min-width:0}
.game-header .ghost-button{width:auto;min-height:44px;font-size:13px}
.game-header .eyebrow{letter-spacing:.02em;font-size:11px}
.lesson-progress{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:center;gap:16px;margin-bottom:12px}.hud{max-width:none;width:100%;gap:6px;margin:0}
.hud>div{padding:8px 12px;grid-template-columns:auto 1fr;background:#fff;border-color:#e6deed}
.hud small{color:#655672;justify-self:start;font-size:11px}
.race-panel{margin-bottom:0;background:#49345f;border-radius:18px;padding:6px 12px}
.race-labels{font-size:10px;letter-spacing:.04em;opacity:1}
.checkpoint small{display:none}.checkpoint{top:10px}.checkpoint span{font-size:16px}
.exercise-card{padding:16px 20px;border-radius:24px;border:2px solid #ecd9a3;box-shadow:0 8px 24px #3829470d}
.lesson-title{margin:0 0 8px;font-size:clamp(20px,2.2vw,26px);line-height:1.25;letter-spacing:-.02em;text-align:center;text-shadow:none}
.lesson-description{max-width:640px;margin:0 auto 10px;text-align:center;color:#655672;font-size:14px;line-height:1.5}
.round-line{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;text-align:center;font-weight:600;color:#655672;font-size:14px}
#roundLabel{border-radius:99px;background:#f1f2f3;color:#555b62;padding:5px 12px;font-size:12px;font-weight:750}
.target-line,.target-line.medium-text,.target-line.long-text{min-height:64px;margin:14px 0 10px;padding:0;gap:12px 5px;align-content:center}
.target-line .char.current{background:#fff6df;color:#3b3226;border-color:#e7b545;box-shadow:0 0 0 3px rgba(231,181,69,.35),0 0 14px rgba(231,181,69,.35)}
.target-line .char.error{color:#9f1239;background:#ffe4eb;border-color:#be345a}
/* Пробел выглядит как пустая клавиша: та же плашка без символа. */
.target-line .space{font-size:0;color:transparent}.target-line .space::after{content:none}.target-line .space.current{background:#fff6df;border-color:#e7b545;box-shadow:0 0 0 3px rgba(231,181,69,.35)}
.feedback{min-height:24px;font-size:16px;line-height:1.5;font-weight:600;color:#655672}

.input-guides{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:20px;margin-top:16px;align-items:stretch}#keyboardWrap{min-width:0;padding-top:0;margin-top:0}
.keyboard{border:8px solid #f7f4fa;padding:8px;background:#eee8f3;gap:6px;border-radius:20px;box-shadow:0 4px 0 #d8cfe2}
.key{min-height:40px;color:#62676c;font-weight:700;border-width:1px;border-radius:8px}
.finger-pinky{--finger-color:#a9ccef}.finger-ring{--finger-color:#b6d9ba}.finger-middle{--finger-color:#f2d68c}.finger-index{--finger-color:#efb4c5}.finger-thumb{--finger-color:#c6b4e8}
.key.typing-key,.key.learned:not(.modifier-key){color:#41464b;text-shadow:none;font-size:19px;box-shadow:0 2px 0 color-mix(in srgb,var(--finger-color) 75%,#776586)}
.key.active{outline:none}.key.active::after{display:block;width:88px;height:88px;background:rgba(255,255,255,.38);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.key.space-key.typing-key{font-size:13px;color:#655672}.key .dot{background:#49345f;box-shadow:none}
.hand-guide{gap:8px;margin:0;padding:12px 4px;align-items:center;border-radius:20px;background:#fff;border:1px solid #ded5e8;overflow:hidden}
.hand-card{width:76px;max-width:48%;font-size:12px;letter-spacing:0}
.hand-outline{fill:#fcf8f4;stroke:#817185;stroke-width:4;filter:none}.hand-seams{stroke:#817185;stroke-width:3}
.hand-finger-zone .hand-zone{fill:var(--finger-color);fill-opacity:.22}
.hand-finger-zone.active .hand-zone{fill-opacity:.9;stroke:#71409a;stroke-width:5;filter:none}
.hand-finger-zone.active .finger-dot{filter:none;r:12}.finger-dot{stroke:#fff;stroke-width:2}
.hand-side-mark{width:auto;height:auto;background:transparent;color:#655672;font-size:12px;font-weight:650;top:78%}
.gauntlet-visual{aspect-ratio:3/4}
.gauntlet-image{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(49,31,66,.18))}
.gauntlet-gem{position:absolute;width:13%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.left-gauntlet .finger-pinky{left:19%;top:37%}.left-gauntlet .finger-ring{left:33%;top:32%}.left-gauntlet .finger-middle{left:49%;top:29.5%}.left-gauntlet .finger-index{left:64%;top:33%}.left-gauntlet .finger-thumb{left:85%;top:51%}
.right-gauntlet .finger-thumb{left:13.5%;top:51%}.right-gauntlet .finger-index{left:36%;top:33%}.right-gauntlet .finger-middle{left:51.5%;top:29.5%}.right-gauntlet .finger-ring{left:67%;top:32%}.right-gauntlet .finger-pinky{left:81%;top:37%}
.gauntlet-gem.active{background:color-mix(in srgb,var(--finger-color) 68%,#fff);box-shadow:0 0 0 2px rgba(255,255,255,.92),0 0 8px 4px var(--finger-color),0 0 18px 7px color-mix(in srgb,var(--finger-color) 75%,transparent);animation:gauntletGemPulse .75s ease-in-out infinite alternate}
.gauntlet-visual .hand-side-mark{top:87%;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 1px 4px rgba(49,31,66,.12)}
@keyframes gauntletGemPulse{to{transform:translate(-50%,-50%) scale(1.18);filter:brightness(1.1)}}
@media(prefers-reduced-motion:reduce){.gauntlet-gem.active{animation:none}}
/* Текст остаётся доступен скринридеру; зрительно палец показывает схема. */
.finger-hint{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:850px){.input-guides{grid-template-columns:minmax(0,1fr)}.hand-guide{gap:32px;margin-top:0}.game-header{grid-template-columns:90px minmax(0,1fr) 220px}.game-title-wrap{grid-row:auto;grid-column:auto}.lesson-progress{grid-template-columns:260px minmax(0,1fr);gap:12px}.key{min-height:38px}}
@media(max-width:600px){.game-header{grid-template-columns:1fr 1fr;gap:8px}.game-title-wrap{grid-row:1;grid-column:1/-1}.game-header-actions{grid-column:2}.game-header .ghost-button{padding:0 10px;font-size:12px}.game-header .eyebrow{font-size:11px;letter-spacing:0}.lesson-progress{grid-template-columns:1fr;gap:8px}.exercise-card{padding:14px 12px}.lesson-description{font-size:13px}.round-line{font-size:12px}.target-line,.target-line.medium-text,.target-line.long-text{padding:10px 2px}.target-line.long-text .char{width:17px}.hand-guide{gap:32px;margin-top:0}.hud>div{padding:6px 8px}.hud b{font-size:15px}.hud span{font-size:17px}}
@media(min-width:851px) and (max-height:740px){.lesson-title{font-size:22px}.lesson-description{font-size:13px;margin-bottom:8px}.exercise-card{padding:12px 20px}.target-line,.target-line.medium-text,.target-line.long-text{margin:8px 0 6px;min-height:54px;padding:6px}.target-line .char,.target-line.medium-text .char{height:42px}.target-line.long-text .char{height:34px}.key{min-height:34px}.hand-card{width:76px}.input-guides{margin-top:12px}}

.game.hands-disabled .input-guides,.game.keyboard-disabled .input-guides{grid-template-columns:minmax(0,1fr)}.input-guides:has(.keyboard-hidden){grid-template-columns:1fr}

.lesson-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(max-width:850px){.balloon-stage{height:clamp(220px,34vh,320px)}}
@media(min-width:851px){
}
/* На игровых уровнях карточка задания скрыта: сцена с шарами занимает всю ширину, буквы видны в шарах. */
.game[data-kind="game"] .exercise-card,.game[data-kind="boss"] .exercise-card{display:none}
.lesson-workspace .balloon-stage,.lesson-workspace .boss-stage{margin:0}

/* Шапка урока один в один с рендером B: строка с миром, строка с кнопками, показатели и тропа. */
.game-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"title title title" "back . actions";gap:10px 12px;margin-bottom:12px;align-items:center}
.game-title-wrap{grid-area:title;display:flex;justify-content:center;min-width:0}
#backButton{grid-area:back}
.game-header-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}
.game-header .ghost-button{width:auto;min-height:50px;padding:0 20px;font-size:17px;font-weight:800;color:#4a2f66;background:linear-gradient(180deg,#ffffff 0%,#f1ebfa 100%);border:3px solid #ffffffcc;border-radius:18px;box-shadow:0 6px 16px #3b235022}
.game-header .eyebrow{margin:0;padding:12px 26px;border-radius:999px;background:linear-gradient(180deg,#fffaf0 0%,#fdf3dd 100%);color:#3b3226;font-size:18px;font-weight:900;letter-spacing:0;text-transform:none;border:3px solid #ecd9a3;box-shadow:0 6px 18px rgba(120,90,20,.16);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lesson-settings{display:flex;align-items:center;gap:8px;margin:0}
.setting-button{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:50px;padding:0 14px;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#f1ebfa 100%);border:3px solid #ffffffcc;box-shadow:0 6px 16px #3b235022;color:#9a8aa8;font-size:16px;font-weight:800;cursor:pointer;user-select:none;transition:.15s}
.setting-button input{position:absolute;opacity:0;pointer-events:none}
.setting-button .setting-icon{font-size:20px;line-height:1;filter:grayscale(1);opacity:.5}
.setting-button:has(input:checked){color:#4a2f66}
.setting-button:has(input:checked) .setting-icon{filter:none;opacity:1}
.setting-button:has(input:focus-visible){outline:3px solid #9b6fe3;outline-offset:2px}

/* Показатели: круглая 3D-иконка из рендера, под ней значение и подпись. */
.lesson-progress{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);align-items:stretch;gap:14px;margin-bottom:12px}
.hud{max-width:none;width:100%;min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:10px;margin:0}
.hud>div{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;align-content:center;row-gap:4px;padding:7px 6px 6px;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#f1ebfa 100%);border:3px solid #ffffffcc;box-shadow:0 6px 16px #3b235022;text-align:center}
.hud span{grid-row:auto;width:clamp(42px,4.9vw,66px);height:clamp(42px,4.9vw,66px);font-size:0;background:url("assets/hud-stat-icons.webp?v=8f8031ed6e") 0 0/300% 100% no-repeat;filter:drop-shadow(0 3px 4px #3b235022)}
.hud>div:nth-child(2) span{background-position:50% 0}
.hud>div:nth-child(3) span{background-position:100% 0}
.hud>div>b,.hud>div>small{grid-row:2;display:inline;white-space:nowrap;line-height:1}
.hud>div{grid-template-rows:auto auto;grid-template-columns:auto auto;column-gap:6px;align-items:baseline;justify-content:center;min-width:0;padding-inline:4px;overflow:hidden}
.hud>div>span{grid-column:1/-1}
.hud b{font-size:clamp(15px,1.7vw,22px);font-weight:900;color:#3b2350}
.hud small{color:#3b2350;font-size:clamp(10px,1.05vw,14px);font-weight:800;justify-self:center}
.hud>div:nth-child(2)>b,.hud>div:nth-child(3)>b{order:2}
/* Дорожка прогресса: нарисованное небо с островами, тропа и вехи поверх. */
.race-panel{position:relative;margin:0;border-radius:24px;padding:0;overflow:hidden;background:#3b2c72 url("assets/hud-trail-bg.webp?v=447c8f08d3") center/cover no-repeat;border:3px solid #ffffffcc;box-shadow:0 6px 16px #3b235022;min-height:84px}
.race-labels{display:none}
.trail-path{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.trail-path path{fill:none;stroke:#fff8e1;stroke-dasharray:7 6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-width:3px;filter:drop-shadow(0 1px 1px #00000055)}
.track{position:absolute;inset:0;height:auto;margin:0;border-radius:0;background:transparent;border:0;overflow:visible}
.track::before{content:none}
.track-fill{display:none}
.checkpoint{position:absolute;width:clamp(26px,2.9vw,38px);height:clamp(26px,2.9vw,38px);transform:translate(-50%,-56%);opacity:.9;background:url("assets/hud-trail-kit.webp?v=b8382b95f4") 0 0/300% 200% no-repeat;filter:drop-shadow(0 3px 3px #00000055);z-index:2;transition:.2s}
.checkpoint::before,.checkpoint::after{content:none}
.ico-gem{background-position:0 0}.ico-star{background-position:50% 0}.ico-potion{background-position:100% 0}.ico-crown{background-position:0 100%}.ico-trophy{background-position:50% 100%}
.checkpoint.reached{opacity:1;transform:translate(-50%,-56%) scale(1.15);filter:drop-shadow(0 0 8px #fde68a) drop-shadow(0 3px 3px #00000055)}
.mascot{position:absolute;left:4%;top:60%;width:clamp(30px,3.3vw,42px);height:clamp(30px,3.3vw,42px);transform:translate(-50%,-50%);z-index:4;background:url("assets/hud-trail-kit.webp?v=b8382b95f4") 100% 100%/300% 200% no-repeat;filter:drop-shadow(0 0 8px #fff7cc) drop-shadow(0 3px 4px #00000066);transition:left .23s cubic-bezier(.2,.8,.2,1),top .23s cubic-bezier(.2,.8,.2,1)}
.mascot .mascot-svg,.mascot .trail{display:none}
.progress-bubble{position:absolute;left:4%;top:60%;transform:translate(-50%,calc(-100% - 26px));padding:3px 10px;border-radius:999px;background:#fff;color:#4a2f66;font-size:13px;font-weight:900;box-shadow:0 3px 8px #3b235033;transition:left .23s cubic-bezier(.2,.8,.2,1),top .23s cubic-bezier(.2,.8,.2,1);z-index:5;white-space:nowrap}
.progress-bubble::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:#fff;transform:translateX(-50%) rotate(45deg)}
@media(max-width:850px){.game-header{grid-template-areas:"title title" "back actions";grid-template-columns:auto 1fr}.game-header-actions{flex-wrap:wrap}.lesson-progress{grid-template-columns:1fr}.race-panel{min-height:80px}.setting-button b{display:none}}

/* Главная по рендеру A: лавандовая страница, баннер-картина с живыми плашками, три карточки. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body:has(#homeScreen:not(.hidden)){background:radial-gradient(circle at 15% 10%,#ffffffb0 0,transparent 2%),radial-gradient(circle at 80% 25%,#ffffffa0 0,transparent 1.5%),radial-gradient(circle at 60% 70%,#ffffff90 0,transparent 1.5%),radial-gradient(circle at 30% 85%,#ffffff90 0,transparent 1.5%),linear-gradient(180deg,#e9e0f7 0%,#e2d7f3 55%,#d8cbee 100%);background-attachment:fixed;animation:none;color:#3b2350}
body:has(#homeScreen:not(.hidden)) .app{padding-top:22px}
.hero{color:#3b2350}
.home-banner{position:relative;container-type:inline-size;width:100%;aspect-ratio:2972/708;border-radius:26px;overflow:hidden;background:#cbb9ec url("assets/home-banner.webp?v=1058d90f1d") center/cover no-repeat;box-shadow:0 8px 24px #3b235022;margin-bottom:16px;text-align:left}
.home-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,250,255,.22) 0%,rgba(255,250,255,.08) 48%,transparent 68%);pointer-events:none}
.home-banner-copy{position:absolute;z-index:2;left:11.2%;top:10%;width:52%;color:#351668;text-shadow:0 2px 0 rgba(255,255,255,.72),0 8px 22px rgba(51,22,104,.15)}
.home-banner-copy h1{margin:0;font-size:4.05cqw;line-height:.91;letter-spacing:-.045em;font-weight:900}
.home-banner-copy p{margin:1.15cqw 0 0;max-width:48cqw;font-size:1.55cqw;line-height:1.2;font-weight:800;color:#4a286d;text-shadow:0 1px 0 rgba(255,255,255,.78)}
/* height:9% здесь резолвится относительно .home-banner (его containing block, т.к. сам
   .home-actions абсолютно спозиционирован) — а дети берут height:100% от него, поэтому
   капсула логина и слайдер режима гарантированно одной высоты, без рассинхрона по min-height. */
.home-actions{position:absolute;z-index:4;right:3.5%;top:8%;height:9%;min-height:44px;display:flex;align-items:stretch;gap:.7cqw;max-width:70%}
.account-chip{box-sizing:border-box;height:100%;display:flex;align-items:center;gap:.5cqw;padding:0 1.3cqw;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);color:#3b2350;box-shadow:0 .3cqw .9cqw #3b235026;font-weight:900;font-size:1.35cqw;white-space:nowrap;max-width:44%;overflow:hidden;text-overflow:ellipsis;cursor:pointer;flex:none}
.account-chip:hover,.account-chip:focus-visible{background:#fff}
/* Слайдер «Ребёнок / Взрослый»: та же стеклянная капсула, что у account-chip, но заливка-«таблетка»
   едет между вкладками фирменным фиолетовым градиентом кнопок (см. .primary-button, .adaptive-card). */
.difficulty-tabs{box-sizing:border-box;position:relative;height:100%;display:flex;align-items:stretch;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.72);border-radius:999px;padding:4px;gap:2px;box-shadow:0 .3cqw .9cqw #3b235026;flex:none}
.difficulty-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(180deg,#a97ff2 0%,#8a5de0 100%);box-shadow:0 2px 0 #6f49c4,0 4px 10px #7a4fd04d,inset 0 1px 0 #ffffff77;transition:transform .28s cubic-bezier(.34,1.4,.64,1)}
.difficulty-tabs[data-mode="adult"] .difficulty-thumb{transform:translateX(100%)}
.difficulty-tab{position:relative;z-index:1;flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:.35em;border:0;background:transparent;border-radius:999px;padding:0 1.1cqw;font-weight:900;font-size:1.15cqw;line-height:1;color:#6d5b78;white-space:nowrap;cursor:pointer;transition:color .28s ease}
.difficulty-tab.active{color:#fff}
.difficulty-tab:hover:not(.active){color:#3b2350}
.difficulty-tab:focus-visible{outline:2px solid #8a5de0;outline-offset:2px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.difficulty-thumb{transition:none}}
@media(max-width:850px){.home-actions{right:12px;top:12px;height:auto;min-height:44px;gap:8px;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:flex-end}.account-chip{height:44px;padding:0 14px;font-size:13px}.difficulty-tabs{height:44px}.difficulty-tab{font-size:13px;padding:0 12px}}
.stats-row{position:absolute;z-index:3;left:11.2%;right:0;top:61.5%;height:29.6%;margin:0;display:flex;justify-content:flex-start;align-items:stretch;gap:1.5cqw}
.stat-pill{position:relative;width:calc(13.8cqw + 10px);flex:none;height:100%;display:grid;grid-template-columns:5.2cqw 1fr;align-items:center;column-gap:.5cqw;padding:0 .8cqw 0 .6cqw;border:1px solid rgba(255,255,255,.72);border-radius:1.3cqw;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);color:#3b2350;box-shadow:0 .3cqw .9cqw #3b235026;font-weight:900;white-space:nowrap;box-sizing:border-box}
.stat-pill.chip-trophy{width:calc(13.8cqw + 20px);column-gap:.15cqw;padding-right:1.4cqw}
.stat-pill.chip-streak{width:calc(13.8cqw + 42px);column-gap:.5cqw;padding-right:.8cqw}
.stat-pill::before{content:"";grid-column:1;grid-row:1;width:5.2cqw;height:5.2cqw;background:center/contain no-repeat}
.stat-pill.chip-map::before{background-image:url("assets/home-chip-map.webp?v=80b7ed17cd")}.stat-pill.chip-star::before{background-image:url("assets/home-chip-star.webp?v=4c1a72a4f0")}.stat-pill.chip-trophy::before{background-image:url("assets/home-chip-trophy.webp?v=6e0d420d62")}.stat-pill.chip-streak::before{background-image:url("assets/home-chip-streak.webp?v=ed4e729f13")}
.stat-pill>span{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.05}
.stat-pill>span>b{font-size:1.85cqw}.stat-pill>span>small{font-size:16px;letter-spacing:-.01em;font-weight:800;color:#4a2f66;margin-top:.3cqw}
.adaptive-card{grid-template-columns:120px 1fr auto;gap:22px;background:linear-gradient(180deg,#ffffff 0%,#f6f1fc 100%);border:1px solid #ddd2ee;border-radius:24px;padding:14px 22px 14px 18px;margin:0 auto 14px;box-shadow:0 4px 14px #3b235018;color:#3b2350}.adaptive-icon{display:grid;place-items:center;width:120px;height:120px;overflow:visible}.adaptive-icon img{width:108px;height:108px;object-fit:contain;display:block;filter:drop-shadow(0 6px 8px #3b235022)}
.adaptive-card .world-kicker{font-size:12px;letter-spacing:.08em;font-weight:900}.warmup-card .world-kicker{color:#e08a1e}.adaptive-card:not(.warmup-card):not(.arena-card) .world-kicker{color:#7c4fd6}.arena-card .world-kicker{color:#4f8fdc}.adaptive-card h2{margin:4px 0 6px;font-size:24px;letter-spacing:-.01em;color:#3b2350}.adaptive-card p{color:#4a2f66;font-size:16px}.warmup-card,.arena-card{border-color:#ddd2ee;background:linear-gradient(180deg,#ffffff 0%,#f6f1fc 100%)}
.adaptive-card .primary-button{min-width:190px;height:52px;padding:0 24px;border-radius:999px;background:linear-gradient(180deg,#a97ff2 0%,#8a5de0 100%);color:#fff;font-size:17px;font-weight:800;box-shadow:0 3px 0 #6f49c4,0 8px 18px #7a4fd033,inset 0 1px 0 #ffffff66;border:0;text-shadow:0 1px 0 #00000022}.adaptive-card .primary-button::after{content:none}
@media(max-width:850px){.home-banner{aspect-ratio:auto;min-height:400px;background-position:64% center}.home-banner::after{background:linear-gradient(180deg,rgba(255,250,255,.38) 0%,rgba(255,250,255,.06) 55%,rgba(46,24,72,.08) 100%)}.account-chip{right:12px;top:12px;height:auto;min-height:44px;padding:0 14px;font-size:13px;max-width:52%}.home-banner-copy{left:20px;top:22px;width:calc(100% - 40px)}.home-banner-copy h1{font-size:clamp(34px,9vw,52px);line-height:.92}.home-banner-copy p{margin-top:10px;max-width:520px;font-size:clamp(14px,3.5vw,18px)}.stats-row{inset:auto 14px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stat-pill{position:relative;inset:auto!important;width:auto!important;height:64px;padding:7px 10px;border-radius:14px;column-gap:7px}.stat-pill{grid-template-columns:46px 1fr}.stat-pill::before{width:46px;height:46px}.stat-pill.chip-streak::before{font-size:34px}.stat-pill>span>b{font-size:18px}.stat-pill>span>small{font-size:11px}.adaptive-card{grid-template-columns:72px 1fr}.adaptive-icon{width:72px;height:72px}.adaptive-icon img{width:68px;height:68px}.adaptive-card .primary-button{grid-column:1/-1}}
/* «Живая карта» мира по рендеру C: небольшие круглые дощечки на дороге, значок у игровых уровней, ворота босса, светящаяся текущая площадка. */
.living-map{position:relative;container-type:inline-size;width:100%;aspect-ratio:1536/900;border-radius:22px;overflow:hidden;background:#b7a8dd top center/100% auto no-repeat;}
.living-map.baked{aspect-ratio:1586/992;background-size:cover;border:3px solid #ffffffcc;box-shadow:0 6px 16px #3b235022;margin-top:14px}
.map-node{position:absolute;z-index:1;width:8.2cqw;height:8.2cqw;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;cursor:pointer;color:#3b2350;font-family:inherit;transition:transform .18s ease,filter .18s ease}
.map-node:hover{transform:translate(-50%,-50%) scale(1.08);z-index:2}
.map-node:focus-visible{outline:3px solid #fde68a;outline-offset:2px;border-radius:30%}
.map-sign{position:absolute;inset:0;background:url("assets/map-node-kit.webp?v=8d20518d72") 0 0/300% 200% no-repeat;filter:drop-shadow(0 3px 3px #2a184055)}
.map-node.completed .map-sign{background-position:50% 0}
.map-node.current .map-sign{background-position:100% 0}
.map-node.boss .map-sign{background-position:50% 100%}
/* Текущая площадка светится: тёплое пятно под дощечкой. */
.map-node.current::before{content:"";position:absolute;left:50%;top:52%;width:150%;height:110%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff1b8cc 0%,#ffd97a66 35%,transparent 70%);animation:platformGlow 1.8s ease-in-out infinite;pointer-events:none}
.map-node:hover::before{content:"";position:absolute;left:50%;top:52%;width:140%;height:100%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffffff99 0%,#fff1b855 40%,transparent 70%);pointer-events:none}
@keyframes platformGlow{50%{opacity:.55}}
.map-node .node-icon{position:absolute;left:50%;top:36%;width:58%;height:58%;transform:translate(-50%,-50%);background-image:var(--sprite-image);background-repeat:no-repeat;background-size:var(--sprite-size,700% 300%);background-position:var(--sprite-position,var(--sprite-x) var(--sprite-y));filter:drop-shadow(0 2px 2px #00000044)}
.map-node .battle-node-badge{position:absolute;right:-4%;top:-2%;width:2.6cqw;height:2.6cqw;font-size:1.5cqw;background:#fff;color:#4a2f66;border:2px solid #f3e8ff;box-shadow:0 2px 6px #3b235033;z-index:2}
.map-plate{position:absolute;left:50%;top:80%;transform:translate(-50%,-50%);width:74%;text-align:center;font-size:1.05cqw;font-weight:900;color:#5a3a1e;text-shadow:0 1px 0 #ffffff88;white-space:nowrap}
.map-node .node-stars{position:absolute;left:50%;top:97%;display:flex;gap:.15cqw;transform:translateX(-50%)}
.map-node .node-stars i{width:1.8cqw;height:1.8cqw;background:url("assets/star-sprites.webp?v=69836784ba") 0 0/200% 100% no-repeat;filter:grayscale(1) brightness(1.55) contrast(.9);opacity:.85}
.map-node .node-stars i.lit{filter:drop-shadow(0 0 2px #fff3b0);opacity:1}
.map-node.boss{width:13cqw;height:13cqw}
.map-node.boss .map-plate{font-size:1.2cqw;top:82%}
.map-mascot{position:absolute;left:78%;top:-62%;width:6cqw;height:6cqw;background:url("assets/map-node-kit.webp?v=8d20518d72") 100% 100%/300% 200% no-repeat;filter:drop-shadow(0 3px 3px #2a184055);animation:mascotBob 2.2s ease-in-out infinite;pointer-events:none;z-index:3}
@keyframes mascotBob{50%{transform:translateY(-.5cqw)}}
.map-node.current{z-index:2}
@media(max-width:850px){.living-map{border-radius:16px}.map-node{width:11cqw;height:11cqw}.map-plate{font-size:1.5cqw}.map-node .node-stars i{width:2.2cqw;height:2.2cqw}.map-mascot{width:8cqw;height:8cqw}}
/* Дощечки нарисованы в самой картине: поверх только иконка, подпись, звёзды, значок и свечение. */
.living-map.baked .map-node{width:7cqw;height:7cqw;transform:translate(-50%,-50%)}
.living-map.baked .map-node:hover{transform:translate(-50%,-50%) scale(1.06)}
.living-map.baked .map-sign{display:none}
.living-map.baked .map-node .node-icon{top:50%;width:64%;height:64%}
.living-map.baked .map-plate{top:111%;font-size:1.35cqw;width:130%;color:#3a2410;font-weight:900;text-shadow:0 1px 0 #ffe9c4cc;letter-spacing:.01em}
.living-map.baked .map-node .node-stars{top:132%}
.living-map.baked .map-node .battle-node-badge{right:-8%;top:-8%}
.living-map.baked .map-node.completed::after{content:"";position:absolute;inset:-6%;border-radius:50%;box-shadow:0 0 0 .25cqw #ffd97a99,0 0 1.2cqw .3cqw #ffd97a88;pointer-events:none}
.living-map.baked .map-node.current::before{top:50%;width:170%;height:170%}
.living-map.baked .map-node.current::after{content:"";position:absolute;inset:-7%;border-radius:50%;box-shadow:0 0 0 .3cqw #ffe89a,0 0 1.6cqw .5cqw #ffd97a;animation:platformGlow 1.8s ease-in-out infinite;pointer-events:none}
.living-map.baked .map-node.boss{width:9cqw;height:10cqw}
.living-map.baked .map-node.boss .map-plate{top:96%;font-size:1.3cqw;color:#fff;text-shadow:0 1px 2px #00000088}
.living-map.baked .map-node.boss .node-stars{top:114%}
.living-map.baked .map-mascot{left:92%;top:-30%}
/* Цельная иллюстрация: один слой прогресса, спокойная реакция самого объекта. */
.living-map-scroll{overflow-x:auto;overscroll-behavior-x:contain;border-radius:22px;margin-top:14px;scrollbar-width:thin;scrollbar-color:#ae99ca #eee6f7}
.living-map.full{min-width:680px;margin:0;border:0;aspect-ratio:1586/992;background-size:100% 100%;box-shadow:none}
.living-map.full .painted-node{width:8.827cqw;height:8.827cqw;border-radius:38%;transform:translate(-50%,-50%);box-shadow:none;filter:none;outline:none;touch-action:manipulation}
.living-map.full .painted-node.boss{width:12.61cqw;height:12.61cqw}
.living-map.full .map-node.painted-node::before,.living-map.full .map-node.painted-node::after{content:none;display:none}
.living-map.full .painted-node:hover,.living-map.full .painted-node:active{transform:translate(-50%,-50%)}
.painted-hover{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;filter:brightness(1.2) saturate(1.14) contrast(1.05);transform:scale(1);transition:opacity .22s ease,transform .22s ease;background:var(--terrain) no-repeat;background-size:100cqw auto;background-position:calc(4.4135cqw - var(--px) * 1cqw) calc(4.4135cqw - var(--py) * .62547cqw);-webkit-mask-image:radial-gradient(circle closest-side,#000 66%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 66%,transparent 100%);will-change:transform,opacity}
.painted-node.boss .painted-hover{background-position:calc(6.305cqw - var(--px) * 1cqw) calc(6.305cqw - var(--py) * .62547cqw)}
.living-map.full .painted-node:is(:hover,:focus-visible) .painted-hover{opacity:1;transform:scale(1.01)}
.living-map.full .painted-node.boss:is(:hover,:focus-visible,:active) .painted-hover{transform:none}
.living-map.full .painted-node:focus-visible{outline:2px solid #f7eeff;outline-offset:2px}
.living-map.full .painted-node:active .painted-hover{filter:brightness(1.06) saturate(1.08);transform:scale(1.01)}
.map-rating{position:absolute;top:91%;left:50%;transform:translateX(-50%);display:flex;gap:.13cqw;pointer-events:none;filter:drop-shadow(0 1px 1px #37234866)}
.painted-node.boss .map-rating{top:89%}
/* На цельных картах звёзды стоят ровно под табличкой уровня: центр по --lx, видимый верх звезды на 5px ниже её низа (--ly);
   .17cqw компенсирует прозрачное поле над лучом звезды в SVG (2.5/24 от высоты 1.65cqw). 1cqw = 1% ширины карты, высота = 0.62547 ширины. */
.living-map.full .painted-node .map-rating{left:calc(50% + (var(--lx) - var(--px)) * 1cqw);top:calc(50% + (var(--ly) - var(--py)) * .62547cqw + 5px - .17cqw)}
.rating-star{width:1.65cqw;height:1.65cqw;overflow:visible;fill:#c8bfcc;stroke:#75647e;stroke-width:1.15;stroke-linejoin:round}
.rating-star.earned{fill:#ffcf59;stroke:#a96920}
/* Серые звёзды теряются на камне и тёмной зелени: белая окантовка ~1px вторым контуром позади звезды (дешевле CSS-фильтров на 600+ иконках). */
.star-halo{fill:none;stroke:#fff;stroke-width:4.4;stroke-linejoin:round}
.earned .star-halo{display:none}
.star-shine{fill:none;stroke:#ede7f2;stroke-width:1.2;stroke-linecap:round;opacity:.65}
.earned .star-shine{stroke:#fff6bd;opacity:1}
/* Три звезды из трёх: ряд постоянно мягко светится золотом, чтобы идеально пройденные уровни были видны с первого взгляда. */
.map-rating.perfect{filter:drop-shadow(0 1px 1px #37234866) drop-shadow(0 0 .35cqw #ffd54a);animation:perfectGlow 2.4s ease-in-out infinite}
@keyframes perfectGlow{50%{filter:drop-shadow(0 1px 1px #37234866) drop-shadow(0 0 .7cqw #ffc02a) drop-shadow(0 0 1.1cqw #ffb30088)}}
@media(prefers-reduced-motion:reduce){.map-rating.perfect{animation:none}}
/* Значки игровых уровней на карте: медальоны Codex (звёздный дождь и шары) из листа map-game-badges.webp, размер прежних значков. */
.map-progress-balloon,.map-progress-star{position:absolute;right:-4%;top:-26%;width:2.9cqw;height:2.9cqw;pointer-events:none;background:url("assets/map-game-badges.webp?v=9308f9ae36") 100% 0/200% 100% no-repeat;filter:drop-shadow(0 .25cqw .45cqw #3a203a66);animation:mapStarFloat 2.6s ease-in-out infinite}
.map-progress-star{background-position:0 0}
.map-progress-balloon i{display:none}
.living-map.full .painted-node:is(:hover,:focus-visible){z-index:4}
@keyframes mapBalloonFloat{50%{transform:translateY(-.35cqw)}}
@keyframes mapStarFloat{50%{transform:translateY(-.35cqw)}}
@media(prefers-reduced-motion:reduce){.painted-hover{transition:none}.living-map.full .painted-node:is(:hover,:focus-visible) .painted-hover{transform:none}.map-progress-balloon,.map-progress-star{animation:none}}
/* Огонёк (золотой шарик света, Codex) летит за курсором по карте; позиция задаётся через transform из JS. */
.map-cursor-mascot{position:absolute;left:0;top:0;width:3.9cqw;height:3.9cqw;opacity:0;pointer-events:none;z-index:6;will-change:transform;transition:opacity .25s ease}
.map-cursor-mascot::before{content:"";position:absolute;inset:0;background:url("assets/map-cursor-spark.webp?v=703b48a669") center/contain no-repeat;filter:drop-shadow(0 0 6px #fde68acc) drop-shadow(0 4px 4px #2a184066);animation:sparkFlicker 1.6s ease-in-out infinite alternate;transform:translate(-30%,-115%) scale(.6);transition:transform .25s ease}
.map-cursor-mascot.visible{opacity:1}.map-cursor-mascot.visible::before{transform:translate(-30%,-115%) scale(1)}
@keyframes sparkFlicker{from{filter:drop-shadow(0 0 5px #fde68aaa) drop-shadow(0 4px 4px #2a184066)}to{filter:drop-shadow(0 0 12px #fde047) drop-shadow(0 4px 4px #2a184066)}}
.map-cloud-layer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;contain:strict}
.map-cloud-puff{position:absolute;left:0;top:0;width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);border-radius:50%;background:radial-gradient(circle,#fff7d6 0%,#fde047cc 30%,#f59e0b55 58%,transparent 72%);pointer-events:none;animation:cloudPuff 1.1s ease-out forwards;will-change:transform,opacity}
@keyframes cloudPuff{0%{opacity:.9;transform:translate(var(--x),var(--y)) scale(.55)}40%{opacity:.75}100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) scale(1.35)}}
@media(hover:none){.map-cursor-mascot,.map-cloud-layer{display:none}}

/* ===== Битва с хранителем (boss.js?v=bb6fe97974): арена на картине мира, Мира слева, каменный хранитель справа. ===== */
.boss-stage{position:relative;height:clamp(300px,46vh,520px);margin:0;overflow:hidden;border-radius:22px;border:3px solid #ffffffb8;box-shadow:0 12px 34px #1a0b2e55;background:#2a1b45;container-type:size;--gem:#a78bfa;user-select:none}
.boss-backdrop{position:absolute;inset:0;background:#efe3f5 center 58%/cover no-repeat;transform:scale(1.03);animation:bossDrift 18s ease-in-out infinite alternate}
.boss-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#3b235014 0%,#3b235000 35%,#3b235000 70%,#3b235033 100%)}
@keyframes bossDrift{from{transform:scale(1.03) translateX(-.6%)}to{transform:scale(1.05) translateX(.6%)}}
.boss-floor{position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(180deg,transparent,#3b235040)}
.boss-dust{position:absolute;inset:0;pointer-events:none}
.boss-dust i{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#fff9d6,#fde04700 70%);opacity:0;animation:bossDust 7s linear infinite}
.boss-dust i:nth-child(odd){width:4px;height:4px}
.boss-dust i:nth-child(1){left:6%;animation-delay:0s}.boss-dust i:nth-child(2){left:14%;animation-delay:1.3s}.boss-dust i:nth-child(3){left:23%;animation-delay:2.9s}.boss-dust i:nth-child(4){left:31%;animation-delay:.7s}.boss-dust i:nth-child(5){left:40%;animation-delay:4.1s}.boss-dust i:nth-child(6){left:48%;animation-delay:2.2s}.boss-dust i:nth-child(7){left:55%;animation-delay:5.3s}.boss-dust i:nth-child(8){left:62%;animation-delay:.4s}.boss-dust i:nth-child(9){left:70%;animation-delay:3.4s}.boss-dust i:nth-child(10){left:77%;animation-delay:1.9s}.boss-dust i:nth-child(11){left:84%;animation-delay:6.1s}.boss-dust i:nth-child(12){left:91%;animation-delay:2.6s}.boss-dust i:nth-child(13){left:96%;animation-delay:4.8s}.boss-dust i:nth-child(14){left:36%;animation-delay:5.9s}
@keyframes bossDust{0%{transform:translateY(105cqh) translateX(0);opacity:0}10%{opacity:.9}50%{transform:translateY(50cqh) translateX(12px)}90%{opacity:.6}100%{transform:translateY(-5cqh) translateX(-8px);opacity:0}}
.boss-instruction{position:absolute;left:14px;top:12px;z-index:6;max-width:46%;padding:6px 13px;border-radius:999px;background:#ffffffe0;color:#49345f;font-size:12px;font-weight:800;line-height:1.25;box-shadow:0 2px 10px #1a0b2e40}

/* Энергия хранителя: сердце, золотая рамка, жёлтая полоска, число очков. */
.boss-hp{position:absolute;right:calc(3% + 40cqh);top:12px;transform:translateX(50%);z-index:6;display:grid;grid-template-columns:auto minmax(100px,18cqw) auto;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:#2b1748cc;border:2px solid #fbbf24;box-shadow:0 4px 14px #1a0b2e66,inset 0 0 0 2px #ffffff22}
.boss-hp-heart{display:grid;width:24px;height:24px;filter:drop-shadow(0 1px 2px #0006)}.boss-hp-heart svg{width:100%;height:100%}
.boss-hp-track{position:relative;height:14px;border-radius:999px;background:#160d25;box-shadow:inset 0 2px 4px #000a;overflow:hidden}
.boss-hp-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(180deg,#fff3a6 0%,#fde047 45%,#f59e0b 100%);box-shadow:0 0 10px #fde04799;transition:width .28s cubic-bezier(.2,.8,.3,1),background .3s}
.boss-hp.low .boss-hp-fill{background:linear-gradient(180deg,#fecaca 0%,#f87171 45%,#dc2626 100%);box-shadow:0 0 10px #f8717199;animation:bossHpLow .7s ease-in-out infinite alternate}
@keyframes bossHpLow{to{filter:brightness(1.35)}}
.boss-hp-label{color:#fde68a;font-size:13px;font-weight:900;min-width:3ch;text-align:right;text-shadow:0 1px 2px #0008}

/* Персонажи: спрайты Codex. Мира внизу слева (2 кадра: готова / выстрел), хранитель справа (5 кадров состояний). */
.boss-hero{position:absolute;left:3%;bottom:11%;z-index:4;height:64%;aspect-ratio:1;will-change:transform}
.boss-foe{position:absolute;right:3%;top:7%;z-index:3;height:80%;aspect-ratio:1;will-change:transform;transform-origin:50% 55%}
.hero-sprite,.foe-sprite{position:absolute;inset:0;background-repeat:no-repeat;background-position:0 0;filter:drop-shadow(0 10px 14px #2a184066)}
.hero-sprite{background-size:300% 100%;animation:bossHeroIdle 2.8s ease-in-out infinite;transform-origin:50% 100%}
.boss-hero.cast .hero-sprite{background-position:50% 0;animation:none}
.boss-hero.scared .hero-sprite{background-position:100% 0;animation:none}
@keyframes bossHeroIdle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.012)}}
.foe-sprite{background-size:600% 100%;animation:bossBreathe 3.4s ease-in-out infinite;transform-origin:center}
@keyframes bossBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.boss-foe.low.mood-idle .foe-sprite{background-position:60% 0}
.boss-foe.mood-hit .foe-sprite{background-position:20% 0}
.boss-foe.mood-laugh .foe-sprite{background-position:100% 0;filter:drop-shadow(0 10px 14px #2a184066) drop-shadow(0 0 18px #fde04799)}
.boss-foe.mood-beaten .foe-sprite{background-position:80% 0;animation:none;filter:drop-shadow(0 10px 14px #2a184066) drop-shadow(0 0 26px #fde04799)}
.boss-shadow{position:absolute;left:14%;right:14%;bottom:2%;height:7%;border-radius:50%;background:radial-gradient(ellipse,#2a184066,#2a184000 70%)}
.boss-foe .boss-shadow{left:8%;right:8%;bottom:-3%;height:9%}
.hero-wand-tip{position:absolute;left:91%;top:32%;width:2px;height:2px}
.foe-target{position:absolute;left:50%;top:52%;width:2px;height:2px}
.boss-foe.struck .foe-sprite{filter:brightness(1.6) saturate(.7) drop-shadow(0 0 18px #fff8)}
.boss-stage.defeated .boss-foe .foe-sprite{transition:filter .8s .6s}
/* Спецэффекты: снаряды, искры, лучи, кольца, урон. Всё позиционируется по left/top в пикселях сцены. */
.boss-fx{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.boss-fx i,.boss-fx b{position:absolute;display:block}
.boss-bolt{width:34px;height:34px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px #fde047) drop-shadow(0 0 16px #fbbf2499)}
.boss-bolt svg{width:100%;height:100%;display:block}
.boss-bolt.crit{width:46px;height:46px;filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px #fde047)}
.boss-bolt.final{width:60px;height:60px;filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 30px #fde047)}
.boss-spark{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fff,#fde047 55%,#fbbf2400 75%);transform:translate(-50%,-50%);filter:drop-shadow(0 0 4px #fde047)}
.boss-spark.star{width:14px;height:14px;border-radius:0;background:none}.boss-spark.star svg{width:100%;height:100%;display:block}
.boss-spark.crit{width:12px;height:12px}
.boss-spark.confetti{width:10px;height:10px;background:var(--c,#fde047);filter:none;border-radius:2px}
.boss-spark.confetti.star{background:none;width:16px;height:16px}
.boss-ray{width:38px;height:6px;border-radius:999px;background:linear-gradient(90deg,#fff,#fde047 60%,#fde04700);transform-origin:0 50%;transform:translate(0,-50%) rotate(var(--a))}
.boss-ray.crit{width:52px;height:8px}
.boss-ring{width:70px;height:70px;border-radius:50%;border:5px solid #fff;box-shadow:0 0 14px #fde047,inset 0 0 14px #fde047;transform:translate(-50%,-50%)}
.boss-ring.crit{width:100px;height:100px;border-width:7px}
.boss-flash{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff,#fff7c2 40%,#fde04700 70%);transform:translate(-50%,-50%);mix-blend-mode:screen}
.boss-giggle{transform:translate(-50%,-50%);font-size:clamp(16px,2.6cqw,26px);font-weight:900;color:#fff;-webkit-text-stroke:1.5px #7c3aed;text-shadow:0 2px 0 #5b21b6,0 4px 10px #0007;white-space:nowrap}
.boss-wave{width:120px;height:120px;border-radius:50%;border:6px solid #a855f7;box-shadow:0 0 20px #a855f7,inset 0 0 20px #a855f7;transform:translate(-50%,-50%)}
.boss-dmg{transform:translate(-50%,-50%);font-size:clamp(20px,3.4cqw,34px);font-weight:900;color:#fde047;-webkit-text-stroke:1.5px #7c2d12;text-shadow:0 2px 0 #7c2d12,0 4px 10px #0009;white-space:nowrap;letter-spacing:.02em}
.boss-dmg.crit{color:#fff;font-size:clamp(24px,4cqw,42px);-webkit-text-stroke:2px #b45309}
.boss-chunk{width:var(--s,14px);height:var(--s,14px);border-radius:30% 50% 40% 55%;background:linear-gradient(135deg,#d6c5a3,#8c7b64);box-shadow:inset -2px -2px 3px #5f5040,0 2px 4px #0006;transform:translate(-50%,-50%)}

/* Плитки строки: доделанные зелёные, текущая серая с рамкой, остальные белые. Ширина от длины строки. */
.boss-tiles{position:absolute;left:50%;bottom:4%;z-index:7;display:flex;justify-content:center;gap:5px;max-width:calc(100% - 20px);transform:translateX(-50%);--tile:min(54px,calc((100cqw - 60px - 5px * (var(--n,10) - 1)) / var(--n,10)))}
.boss-tile{display:grid;place-items:center;width:var(--tile);height:var(--tile);border-radius:calc(var(--tile) * .2);background:#fff;color:#3b2350;font-size:calc(var(--tile) * .58);font-weight:900;line-height:1;box-shadow:0 3px 0 #cfc3dc,0 6px 14px #1a0b2e55;transition:background .18s,color .18s,transform .18s,box-shadow .18s}
.boss-tile.space{width:calc(var(--tile) * .72);color:#b4a8c4;font-size:calc(var(--tile) * .42)}
.boss-tile.done{background:#b7f0c6;color:#1b6b3a;box-shadow:0 3px 0 #7fcf97,0 6px 14px #1a0b2e55}
.boss-tile.current{background:#9aa1ad;color:#fff;box-shadow:0 0 0 3px #fff,0 3px 0 #6b7280,0 8px 18px #1a0b2e66;transform:translateY(-6px) scale(1.06);animation:bossTilePulse 1.1s ease-in-out infinite}
@keyframes bossTilePulse{50%{box-shadow:0 0 0 4px #fde047,0 3px 0 #6b7280,0 8px 18px #1a0b2e66}}
.boss-tile.error{background:#fecdd3;color:#be123c;box-shadow:0 0 0 3px #f43f5e,0 3px 0 #be123c;animation:shake .22s linear}
.boss-flash-text{position:absolute;left:50%;top:32%;z-index:8;transform:translate(-50%,-50%) scale(.6);opacity:0;padding:10px 22px;border-radius:999px;background:#2b1748e6;border:2px solid #fbbf24;color:#fde68a;font-size:clamp(14px,2.4cqw,22px);font-weight:900;white-space:nowrap;pointer-events:none;text-shadow:0 2px 4px #000a}
.boss-flash-text.show{animation:bossFlashText 1.5s cubic-bezier(.2,.8,.3,1) both}
@keyframes bossFlashText{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(.9)}}
.boss-stage .victory-banner{background:rgba(26,11,46,.72)}
.boss-stage.victory .victory-banner{opacity:1;transform:scale(1);transition-delay:1.3s}
@media(max-width:850px){.boss-stage{height:clamp(250px,40vh,360px)}.boss-hero{height:50%;left:1%;bottom:16%}.boss-foe{height:62%;right:1%;top:10%}.boss-hp{right:calc(1% + 31cqh)}.boss-instruction{max-width:40%;font-size:11px}.boss-hp{grid-template-columns:auto minmax(70px,22cqw) auto;padding:4px 9px 4px 6px}.boss-hp-label{font-size:11px}}
@media(prefers-reduced-motion:reduce){.boss-backdrop,.boss-dust i,.hero-sprite,.foe-sprite,.boss-tile.current,.boss-hp.low .boss-hp-fill{animation:none}.boss-flash-text.show{animation:none;opacity:1;transform:translate(-50%,-50%)}}

/* Настройки урока переносятся внутри узкой колонки, не растягивая страницу. */
@media(max-width:600px){.game-header{grid-template-columns:auto minmax(0,1fr)}.game-header-actions{min-width:0}.lesson-settings{flex-wrap:wrap;justify-content:flex-end}}
@media(min-width:851px){.balloon-stage{height:clamp(160px,calc(100vh - 560px),460px)}}

/* Выгрузка прогресса и предупреждение об отказе хранилища. */
.home-footer{position:relative;z-index:2;margin:34px auto 10px;max-width:560px;display:grid;justify-items:center;gap:10px;text-align:center}
.home-footer .export-button{width:auto;padding:0 22px}
.home-footer-note{margin:0;font-size:13px;line-height:1.5;color:#6d5b78;font-weight:600}
.storage-warning{max-width:560px;margin:10px auto;padding:14px 18px;border-radius:18px;background:#fff4e5;border:2px solid #f5c48a;color:#6b3d0b;font-size:15px;line-height:1.5;text-align:center;font-weight:700}
.storage-warning p{margin:0 0 8px}
.storage-warning p:empty{display:none}
.storage-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.storage-actions .ghost-button{width:auto}
.restore-done{max-width:560px;margin:10px auto;padding:12px 18px;border-radius:18px;background:#ecfdf5;border:2px solid #86efac;color:#14532d;font-size:15px;line-height:1.5;text-align:center;font-weight:700}
.home-footer .storage-actions{margin:0}
#restoreDialog .storage-actions{margin-top:14px}
#restoreDialog .primary-button{width:auto;padding:0 26px}
.footer-link{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;color:#6d5b78;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.footer-link:hover,.footer-link:focus-visible{color:#4b375b}
.account-field{display:block;text-align:left;font-size:14px;font-weight:800;color:#4b375b;margin:14px 0 0}
.account-field input{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:0 14px;height:46px;border-radius:14px;border:1px solid #ded3e4;font-size:16px;font-family:inherit;color:#382947;text-align:left}
.account-field input:focus-visible{outline:2px solid #8a5de0;outline-offset:1px}
#accountDialog{top:8vh;bottom:auto;margin:0 auto}
/* 3D-кнопка с тенью-подложкой (0 7px 0) визуально тяжелее снизу: текст, отцентрованный
   по границам самого бокса, на глаз выглядит прибитым к верху. Компенсируем отступом. */
#accountDialog .auth-google{width:100%;box-sizing:border-box;text-decoration:none;display:flex;align-items:center;justify-content:center;padding-top:4px}
#accountDialog .auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:#6d5b78;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
#accountDialog .auth-divider::before,#accountDialog .auth-divider::after{content:"";flex:1;height:1px;background:#e4dbee}
.auth-tabs{display:flex;background:#f3edf8;border-radius:999px;padding:4px;gap:4px}
.auth-tab{flex:1;display:flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:999px;min-height:38px;padding:0;font-weight:900;font-size:14px;color:#6d5b78;cursor:pointer}
.auth-tab.active{background:#261736;color:#fff;box-shadow:0 2px 6px #3b235026}
.auth-tab:focus-visible{outline:2px solid #8a5de0;outline-offset:2px}
#accountDialog .auth-submit{width:100%;box-sizing:border-box;margin-top:20px;display:flex;align-items:center;justify-content:center;padding-top:4px}
.auth-forgot{display:block;margin:22px auto 0;font-size:13px}
.account-identity{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:6px}
.account-identity .hero-pick{gap:6px}
.account-identity .hero-pick-button{width:56px;padding:4px 2px;font-size:11px}
.account-identity .hero-pick-button img{width:40px;height:40px}

/* ===== Звёздный дождь (stars.js?v=e6b29e0d82): ночное небо, Мира с корзинкой слева, звёзды с буквами в небе, пастельные плитки внизу. ===== */
.star-stage{position:relative;height:clamp(300px,46vh,520px);margin:0;overflow:hidden;border-radius:22px;border:3px solid #ffffffb8;box-shadow:0 12px 34px #1a0b2e55;background:#2b1d57;container-type:inline-size;user-select:none}
.star-backdrop{position:absolute;inset:0;background:#0b1636 center 50%/cover no-repeat;transform:scale(1.03);animation:bossDrift 20s ease-in-out infinite alternate}
.star-twinkle{position:absolute;inset:0;pointer-events:none}
.star-twinkle i{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff,#fde04700 70%);animation:starTwinkle 3s ease-in-out infinite}
.star-twinkle i:nth-child(1){left:8%;top:18%}.star-twinkle i:nth-child(2){left:19%;top:9%;animation-delay:.5s}.star-twinkle i:nth-child(3){left:33%;top:14%;animation-delay:1.1s}.star-twinkle i:nth-child(4){left:46%;top:7%;animation-delay:1.7s}.star-twinkle i:nth-child(5){left:57%;top:20%;animation-delay:.3s}.star-twinkle i:nth-child(6){left:66%;top:11%;animation-delay:2.2s}.star-twinkle i:nth-child(7){left:78%;top:16%;animation-delay:.9s}.star-twinkle i:nth-child(8){left:90%;top:9%;animation-delay:1.4s}.star-twinkle i:nth-child(9){left:25%;top:40%;animation-delay:2.6s}.star-twinkle i:nth-child(10){left:52%;top:45%;animation-delay:.7s}.star-twinkle i:nth-child(11){left:72%;top:38%;animation-delay:1.9s}.star-twinkle i:nth-child(12){left:94%;top:34%;animation-delay:2.9s}
@keyframes starTwinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.3)}}
.star-counter{position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:6;padding:6px 13px;border-radius:999px;background:#3b2a6acc;color:#fff;font-size:13px;font-weight:800;box-shadow:0 2px 10px #1a0b2e40}
.star-instruction{position:absolute;right:14px;top:12px;z-index:6;max-width:46%;padding:6px 13px;border-radius:999px;background:#ffffffe0;color:#49345f;font-size:12px;font-weight:800;line-height:1.25;box-shadow:0 2px 10px #1a0b2e40}
.star-sky{position:absolute;inset:0;z-index:5}
.star-hero{position:absolute;left:3%;bottom:22%;z-index:4;height:44%;aspect-ratio:700/640;will-change:transform}
.star-hero-sprite{position:absolute;inset:0;background-repeat:no-repeat;background-position:0 0;background-size:300% 100%;filter:drop-shadow(0 8px 12px #2a184055);animation:bossHeroIdle 3s ease-in-out infinite;transform-origin:50% 100%}
.star-hero.catch .star-hero-sprite{background-position:50% 0;animation:none}
.star-hero.oops .star-hero-sprite{background-position:100% 0;animation:none}
.star-basket-target{position:absolute;left:65%;top:62%;width:2px;height:2px}
html[data-hero="boy"] .star-basket-target{left:61%;top:61%}
.star-basket-glow{position:absolute;left:65%;top:56%;width:2px;height:2px;z-index:2;pointer-events:none}
.star-basket-glow .star-rise{top:0;left:0}
html[data-hero="boy"] .star-basket-glow{left:61%;top:55%}
.star-item{position:absolute;width:var(--star,80px);height:var(--star,80px);transform:translate(-50%,-50%);display:grid;place-items:center;will-change:transform}
.star-rise{position:absolute;left:50%;top:14%;width:5px;height:5px;margin:-2px 0 0 -2px;border-radius:50%;background:radial-gradient(circle,#fff,#fde047 55%,#fde04700 75%);filter:drop-shadow(0 0 3px #fde047);opacity:0;animation:starRise var(--d,1.2s) ease-out forwards;pointer-events:none}
.star-rise.big{width:9px;height:9px;margin:-4px 0 0 -4px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);border-radius:0;background:#fff7c8}
@keyframes starRise{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1;transform:translate(var(--dx),calc(var(--h) * -.15)) scale(1)}100%{transform:translate(var(--dx2),calc(var(--h) * -1)) scale(.2);opacity:0}}
.star-body{position:absolute;inset:-30%;background-repeat:no-repeat;background-size:300% 100%;background-position:0 0;filter:drop-shadow(0 4px 6px #1a0b2e55)}
.star-item.active .star-body{background-position:50% 0;inset:-38%;filter:drop-shadow(0 0 14px #fde68acc)}
.star-item.missed .star-body{background-position:100% 0}
.star-item b{position:relative;z-index:1;font-size:calc(var(--star,80px) * .5);font-weight:900;color:#3b1a6b;line-height:1;transform:translateY(-9%);text-shadow:0 1px 0 #fff9,0 0 2px #fff6}
.star-item.space b{font-size:calc(var(--star,80px) * .32);color:#6d28d9}
.star-item.flying{z-index:30!important}
.star-item.landed .star-body{background-position:50% 0;filter:drop-shadow(0 0 16px #fde68a)}
.star-item.landed b{opacity:.9}
.star-fx{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.star-fx i,.star-fx b{position:absolute;display:block}
.star-tiles{position:absolute;left:52%;bottom:4%;z-index:7;display:flex;justify-content:center;gap:6px;max-width:calc(100% - 20px);transform:translateX(-50%);--tile:min(46px,calc((100cqw - 60px - 6px * (var(--n,10) - 1)) / var(--n,10)))}
.star-tiles .boss-tile{width:var(--tile);height:var(--tile);font-size:calc(var(--tile) * .58)}
.star-tiles .boss-tile.space{width:var(--tile);font-size:calc(var(--tile) * .42)}
.star-stage .victory-banner{background:rgba(26,11,46,.66)}
.star-stage.victory .victory-banner{opacity:1;transform:scale(1);transition-delay:.9s}
.lesson-workspace .star-stage{margin:0}
@media(max-width:850px){.star-stage{height:clamp(250px,40vh,360px)}.star-hero{height:36%;left:2%;bottom:22%}.star-instruction{max-width:40%;font-size:11px}.star-counter{font-size:11px}}
@media(prefers-reduced-motion:reduce){.star-backdrop,.star-twinkle i,.star-hero-sprite{animation:none}}

/* ===== Завершение уровня: универсальная жемчужная открытка поверх фона текущего мира. ===== */
.result{min-height:calc(100vh - 48px);padding:104px 22px 30px;display:grid;place-items:center;color:#382542;overflow:visible}
.result.hidden{display:none}
.result-panel{position:relative;z-index:2;width:min(1080px,100%);min-height:590px;padding:82px 76px 52px;border:0;border-radius:0;background:url("assets/result-panel-frame.webp?v=76e5dc6c8c") center/100% 100% no-repeat;filter:drop-shadow(0 26px 34px rgba(31,21,41,.3));text-align:center}
.result-panel::before,.result-panel::after{display:none}
.result-character{display:none}
.result-heading{position:relative;z-index:2}.result .eyebrow{display:inline-flex;align-items:center;gap:14px;margin:0 0 7px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#715039;font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.result .eyebrow::before,.result .eyebrow::after{content:"✦";color:#d6a43e;font-size:12px}
.result h2{margin:0;color:#39223f;font-size:clamp(38px,4.4vw,58px);line-height:1.05;letter-spacing:-.035em;text-shadow:0 2px 0 rgba(255,255,255,.8)}
.result-subtitle{margin:10px auto 25px;max-width:680px;color:#664c45;font-size:17px;font-weight:700}
.stars{position:absolute;z-index:3;left:50%;top:5px;display:flex;align-items:flex-end;gap:0;margin:0;transform:translate(-50%,-74%);letter-spacing:0;font-size:0;filter:drop-shadow(0 0 18px rgba(255,210,79,.55))}.result-star{display:block;width:108px;aspect-ratio:1;background:url("assets/home-chip-star.webp?v=4c1a72a4f0") center/contain no-repeat;color:transparent;font-size:0;filter:drop-shadow(0 8px 6px rgba(119,73,13,.27))}.result-star:nth-child(2){width:132px;margin:0 -5px 8px}.result-star:not(.earned){filter:grayscale(1) brightness(.72) contrast(1.1) drop-shadow(0 6px 5px rgba(40,30,60,.35));opacity:.92;transform:scale(.9)}
.result-metrics{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:560px;margin:30px auto 20px}
/* Карточки статистики, лента совета и кнопки нарисованы Codex (assets/result-*.webp); текст и иконки в кнопках рисует код. */
.metric{position:relative;min-width:0;padding:0 4px 17%;border:0;border-radius:0;background:url("assets/result-metric-cards.webp?v=0ed9a9ab07") 0 0/400% 100% no-repeat;box-shadow:none;aspect-ratio:360/404;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#3a2441}
.metric:nth-child(2){background-position:33.333% 0}.metric:nth-child(3){background-position:66.667% 0}.metric:nth-child(4){background-position:100% 0}
.metric-icon{display:none}
.metric b{display:block;margin-top:0;font-size:clamp(20px,2.2vw,28px);line-height:1}.metric small{display:block;margin-top:4px;color:#7a6262;font-size:11px;font-weight:900}
.result-note{position:relative;z-index:2;width:max-content;max-width:72%;margin:0 auto 24px;padding:14px 4px;border-style:solid;border-width:0 52px;border-image:url("assets/result-advice-ribbon.webp?v=2fe340774e") 0 300 fill/0 52px stretch;border-radius:0;background:none;box-shadow:none;color:#6a4d3d;font-size:15px;font-weight:800}.result-note.hidden{display:none}
.result-actions{position:relative;z-index:2;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 34px}.result-button{min-height:56px;padding:0 4px;border-style:solid;border-width:0 32px;border-image:url("assets/result-button-cream.webp?v=5221d3d830") 0 90 fill/0 32px stretch;border-radius:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#4c384e;background:none;font:inherit;font-weight:900;cursor:pointer;box-shadow:none;transition:transform .18s,filter .18s}.result-button.primary{min-width:235px;border-image-source:url("assets/result-button-gold.webp?v=f7c3399543");color:#3f2d27}.result-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.result-button:focus-visible{outline:none;filter:brightness(1.06)}.result-button:hover{transform:translateY(-2px);filter:brightness(1.04)}.result-button:active{transform:translateY(2px);filter:brightness(.97)}.result-button.hidden{display:none}
.result .storage-warning{position:relative;z-index:3;margin:0 auto 20px;max-width:760px}
.celebration{position:fixed}.celebration i{color:#f4c453!important}
@media(max-width:800px){.result{padding:68px 12px 20px}.result-panel{min-height:0;padding:70px 55px 40px;border-radius:0}.result-panel::before,.result-panel::after{display:none}.result-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.result-subtitle{font-size:16px}.result-star{width:76px}.result-star:nth-child(2){width:94px;margin-bottom:6px}}
@media(max-width:480px){.result{min-height:auto;padding-top:58px}.result-panel{padding:64px 35px 34px;border-radius:0}.result h2{font-size:34px}.result .eyebrow{font-size:10px;letter-spacing:.1em}.result-subtitle{margin:8px auto 16px;font-size:14px}.stars{gap:5px}.result-star{width:58px}.result-star:nth-child(2){width:70px;margin-bottom:4px}.result-metrics{gap:8px;margin-bottom:14px}.metric{padding:10px 5px;border-radius:18px}.metric-icon{width:38px;height:38px}.metric-icon svg{width:23px;height:23px}.metric b{font-size:25px}.metric small{font-size:10px}.result-note{padding:9px 12px;border-radius:17px;font-size:12px}.result-actions{display:grid;grid-template-columns:1fr 1fr}.result-button{padding:0 12px}.result-button.primary{grid-column:1/-1;min-width:0}}

/* Дом героя: комната на мир, предметы за вехи практики. */
/* Главная: занятия слева в полширины, справа высокий блок «Дом героя» с пергаментной заготовкой под карту локаций. */
.home-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;margin:0 auto 14px}
.home-side{display:grid;gap:14px;align-content:start}
.home-side .adaptive-card{margin:0;grid-template-columns:64px 1fr auto;gap:14px;padding:12px 16px 12px 14px}
.home-side .adaptive-icon{width:64px;height:64px}.home-side .adaptive-icon img{width:60px;height:60px}
.home-side .adaptive-card h2{margin:3px 0 4px;font-size:20px}.home-side .adaptive-card p{font-size:14px;line-height:1.3}
.home-side .adaptive-card .primary-button{min-width:0;height:44px;padding:0 18px;font-size:15px;white-space:nowrap}
.room-panel{position:relative;display:flex;flex-direction:column;min-height:280px;padding:16px 20px 18px;text-align:left;color:#3b2350;background:linear-gradient(180deg,#ffffff 0%,#fbf4e6 100%);border:1px solid #d9c59a;border-radius:24px;box-shadow:0 4px 14px #3b235018}
.room-panel .world-kicker{font-size:12px;letter-spacing:.08em;font-weight:900;color:#a26a1c}.room-panel h2{margin:4px 0 4px;font-size:24px;letter-spacing:-.01em}.room-panel p{margin:0;color:#4a2f66;font-size:14px;line-height:1.3}
.room-panel-map{position:relative;flex:1;min-height:150px;margin:12px 0 14px;border-radius:18px;border:2px solid #dcb66b;background:radial-gradient(ellipse at 50% 40%,#fff9ea 0%,#f6e6c4 70%,#eed9b0 100%);box-shadow:inset 0 0 0 4px #fff7e3,inset 0 0 40px #d9b77a55;overflow:hidden}
.room-panel-map::before,.room-panel-map::after{content:"✦";position:absolute;color:#c99a3e;font-size:16px;top:6px;left:10px}.room-panel-map::after{left:auto;right:10px;top:auto;bottom:4px}
.room-panel-map svg{position:absolute;inset:0;width:100%;height:100%}.room-panel-map i{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #c99a3e;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #c99a3e33}
.room-panel .primary-button{align-self:flex-end;min-width:0;height:44px;padding:0 20px;border-radius:999px;background:linear-gradient(180deg,#a97ff2 0%,#8a5de0 100%);color:#fff;font-size:15px;font-weight:800;box-shadow:0 3px 0 #6f49c4,0 8px 18px #7a4fd033,inset 0 1px 0 #ffffff66;border:0}.room-panel .primary-button::after{content:none}
@media(max-width:850px){.home-grid{grid-template-columns:1fr}.room-panel{min-height:0}.room-panel-map{min-height:120px}}
.room{max-width:1100px;margin:0 auto;padding:0 6px 30px}
.room-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:10px 0 14px}
.room-header .ghost-button{width:auto;min-height:50px;padding:0 20px;font-size:17px;font-weight:800;color:#4a2f66;background:linear-gradient(180deg,#ffffff 0%,#f1ebfa 100%);border:3px solid #ffffffcc;border-radius:18px;box-shadow:0 6px 16px #3b235022}
.room-title-wrap{text-align:center}.room-title-wrap h2{margin:2px 0 0;font-size:26px;color:#3b2350}
.hero-pick{display:flex;gap:8px;justify-content:center}
.hero-pick-button{display:grid;justify-items:center;gap:2px;width:74px;padding:6px 4px;border-radius:16px;border:3px solid #ffffffcc;background:linear-gradient(180deg,#ffffff 0%,#f1ebfa 100%);color:#4a2f66;font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 6px 16px #3b235022}
.hero-pick-button img{width:52px;height:52px;object-fit:contain;display:block}
.hero-pick-button.chosen{border-color:#f5b642;background:linear-gradient(180deg,#fff9e8 0%,#ffe9b8 100%)}
.hero-pick-large .hero-pick-button{width:150px;padding:12px 8px;font-size:18px}.hero-pick-large .hero-pick-button img{width:118px;height:118px}
.hero-dialog p{font-size:16px;line-height:1.5}
.hero-dialog .primary-button{margin-top:30px;width:100%;min-width:0;height:52px;border-radius:999px;background:linear-gradient(180deg,#a97ff2 0%,#8a5de0 100%);box-shadow:0 3px 0 #6f49c4,0 8px 18px #7a4fd033,inset 0 1px 0 #ffffff66;border:0;font-size:17px;font-weight:800;text-shadow:0 1px 0 #00000022}
.room-stage{position:relative;width:100%;aspect-ratio:3/2;border-radius:24px;overflow:hidden;background-size:cover;background-position:center;background-color:#6b4a2b;box-shadow:0 18px 44px #1e103d55}
.room-item,.room-hero{position:absolute;display:block;height:auto;filter:drop-shadow(0 8px 10px #2a184055);pointer-events:none}
.room-item.fresh{animation:roomFresh 1.6s ease-out 1}
@keyframes roomFresh{0%{transform:scale(.6);filter:drop-shadow(0 0 0 #fff0) brightness(1.6)}60%{transform:scale(1.08);filter:drop-shadow(0 0 22px #ffe08acc) brightness(1.25)}100%{transform:scale(1);filter:drop-shadow(0 8px 10px #2a184055)}}
.room-status{text-align:center;margin:14px auto 0;max-width:640px;padding:10px 18px;border-radius:16px;background:#ffffffd9;font-size:16px;font-weight:700;color:#4a2f66;box-shadow:0 4px 14px #1e103d33}
/* Место ещё не купленной вещи: мерцающая метка с ценой; ребёнок сам решает, что поставить раньше. */
.room-slot{position:absolute;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;border:3px solid #ffffffb0;background:radial-gradient(circle,#5a3d8a99 0%,#3b235066 70%,transparent 100%);display:grid;place-items:center;gap:0;color:#fff;font-weight:900;font-size:15px;cursor:not-allowed;opacity:.55;filter:grayscale(.4);transition:transform .15s ease}
.room-slot b{grid-row:1;text-shadow:0 1px 3px #000a}
.room-slot-spark{grid-row:1;position:absolute;font-size:20px;opacity:.9;animation:roomSlotIdle 2.4s ease-in-out infinite}
.room-slot-ready{cursor:pointer;opacity:1;filter:none;border-color:#ffe08a;background:radial-gradient(circle,#8a5de0cc 0%,#5a3d8a99 70%,transparent 100%);box-shadow:0 0 18px #ffe08acc}
.room-slot-ready:hover,.room-slot-ready:focus-visible{transform:translate(-50%,-50%) scale(1.12)}
.room-slot-ready .room-slot-spark{animation:roomSlotReady 1.3s ease-in-out infinite}
@keyframes roomSlotIdle{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes roomSlotReady{0%,100%{opacity:.85;transform:scale(1) rotate(-6deg)}50%{opacity:1;transform:scale(1.25) rotate(6deg)}}
.room-buy-dialog{text-align:center}
.room-buy-image{width:120px;height:120px;object-fit:contain;margin:0 auto 6px;display:block;filter:drop-shadow(0 8px 10px #2a184055)}
.room-buy-price{font-size:20px;font-weight:900;color:#8a5de0;margin:2px 0 4px}
@media(max-width:600px){.room-header{grid-template-columns:1fr 1fr}.room-title-wrap{grid-column:1/-1;order:-1}.room-slot{width:40px;height:40px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.room-item.fresh{animation:none}.room-slot-spark{animation:none}}