/* Знайка — страницы заданий всех предметов */
:root {
  --navy: #0f2a78; --navy-2: #1b3a94; --ink: #33457a; --blue: #1f5fe0; --page: #eef6ff;
  --g1: #ff8a3d; --g1-2: #ffb547; --g1-bg: #fff3e4;
  --g2: #21b26b; --g2-2: #6bd96a; --g2-bg: #e7f9ec;
  --g3: #2f7bff; --g3-2: #5fb4ff; --g3-bg: #e6f1ff;
  --g4: #8a5cf6; --g4-2: #c084fc; --g4-bg: #f2ebff;
  --ok: #19b35c; --bad: #ef4444;
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --shadow: 0 12px 30px rgba(31, 82, 170, .14);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.learn-page {
  margin: 0; min-height: 100vh; font-family: var(--font); color: var(--navy);
  background:
    radial-gradient(900px 500px at 10% -10%, #cfe8ff 0, transparent 60%),
    radial-gradient(700px 500px at 100% 0, #fde8ff 0, transparent 55%),
    radial-gradient(800px 600px at 50% 120%, #fff1c7 0, transparent 60%),
    var(--page);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid #ffb400; outline-offset: 3px; }

/* ---------- каталог ---------- */
.m-hero {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px;
  margin: 26px 0 18px; padding: 28px 36px; border-radius: 30px; overflow: hidden; color: #fff;
  background: linear-gradient(110deg, #2f6ff0 0%, #5a8bff 45%, #a066ff 100%);
  box-shadow: 0 18px 40px rgba(47,111,240,.3);
}
.m-hero::before, .m-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); }
.m-hero::before { width: 240px; height: 240px; right: 18%; top: -120px; }
.m-hero::after { width: 160px; height: 160px; left: -40px; bottom: -70px; }
.m-hero h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); font-weight: 900; letter-spacing: -.02em; }
.m-hero h1 span { display: inline-block; margin-left: 8px; padding: 4px 14px; border-radius: 999px; background: #ffd23f; color: var(--navy); font-size: .5em; vertical-align: middle; transform: rotate(-4deg); animation: wobble 3s ease-in-out infinite; }
.m-hero p { margin: 10px 0 0; font-size: 17px; font-weight: 500; max-width: 560px; opacity: .95; }
.m-hero-art img { width: 210px; height: auto; margin: -30px -10px -40px 0; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); animation: float 4s ease-in-out infinite; }

.m-filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 8px; }
.m-chip { border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 15px; background: #fff; color: var(--navy); box-shadow: 0 3px 10px rgba(15,42,120,.1); transition: transform .15s ease, background-color .2s ease, color .2s ease; }
.m-chip:hover { transform: translateY(-2px); }
.m-chip.on { color: #fff; background: var(--navy); }
.m-chip.g1.on { background: var(--g1); } .m-chip.g2.on { background: var(--g2); } .m-chip.g3.on { background: var(--g3); } .m-chip.g4.on { background: var(--g4); }

.m-grade { margin: 22px 0 10px; }
.m-grade h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 20px; }
.m-grade h2 small { font-size: 15px; font-weight: 700; color: #8a6400; }
.m-gbadge { padding: 6px 16px; border-radius: 12px; color: #fff; font-weight: 800; }
.g1 .m-gbadge { background: linear-gradient(135deg, var(--g1), var(--g1-2)); }
.g2 .m-gbadge { background: linear-gradient(135deg, var(--g2), var(--g2-2)); }
.g3 .m-gbadge { background: linear-gradient(135deg, var(--g3), var(--g3-2)); }
.g4 .m-gbadge { background: linear-gradient(135deg, var(--g4), var(--g4-2)); }

.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 14px; }
.m-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 168px; padding: 16px 16px 14px;
  border-radius: 22px; background: #fff; box-shadow: 0 6px 18px rgba(15,42,120,.08); overflow: hidden; isolation: isolate;
  animation: rise .5s cubic-bezier(.2,.8,.3,1.2) both; animation-delay: calc(var(--i) * 40ms);
  transition: transform .2s ease, box-shadow .2s ease;
}
.m-card::before { content: ""; position: absolute; inset: auto -30% -55% auto; width: 170px; height: 170px; border-radius: 50%; z-index: -1; opacity: .9; transition: transform .35s ease; }
.m-card.g1::before { background: var(--g1-bg); } .m-card.g2::before { background: var(--g2-bg); } .m-card.g3::before { background: var(--g3-bg); } .m-card.g4::before { background: var(--g4-bg); }
.m-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--shadow); }
.m-card:hover::before { transform: scale(1.35); }
.m-card:hover .m-ico { animation: jelly .7s ease; }
.m-num { position: absolute; top: 12px; right: 14px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; }
.g1 .m-num { background: var(--g1); } .g2 .m-num { background: var(--g2); } .g3 .m-num { background: var(--g3); } .g4 .m-num { background: var(--g4); }
.m-ico { font-size: 40px; line-height: 1; margin-bottom: 4px; display: inline-block; transform-origin: 50% 90%; }
.m-ct { font-weight: 800; font-size: 16px; line-height: 1.2; }
.m-cd { font-size: 13px; font-weight: 500; color: var(--ink); }
.m-card .m-stars3 { margin-top: auto; padding-top: 8px; }
.m-card.done { box-shadow: 0 0 0 3px #ffd23f, 0 8px 22px rgba(255,190,0,.25); }

.m-stars3 { display: inline-flex; gap: 2px; }
.m-stars3 i { font-style: normal; color: #d9e1f2; font-size: 20px; }
.m-stars3 i.on { color: #ffbe0b; text-shadow: 0 2px 0 #e19b00; }
.m-stars3.big { gap: 10px; margin: 10px 0 6px; }
.m-stars3.big i { font-size: 64px; }
.m-stars3.big i.on { animation: starIn .7s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 260ms + 200ms); }

/* ---------- экран задания ---------- */
.m-play { margin: 20px 0 120px; }
.m-play-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.m-back { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: #fff; box-shadow: 0 3px 10px rgba(15,42,120,.12); font-size: 24px; font-weight: 800; flex-shrink: 0; transition: transform .15s; }
.m-back:hover { transform: translateX(-3px); }
.m-play-title { display: flex; flex-direction: column; min-width: 0; }
.m-play-title small { font-size: 13px; font-weight: 600; color: var(--ink); }
.m-play-title b { font-size: 20px; font-weight: 800; }
.m-dots { list-style: none; display: flex; gap: 8px; margin: 0 0 0 auto; padding: 0; }
.m-dots li { width: 16px; height: 16px; border-radius: 50%; background: #d9e3f5; transition: transform .3s, background-color .3s; }
.m-dots li.cur { transform: scale(1.35); background: #fff; box-shadow: 0 0 0 3px var(--accent, var(--blue)); }
.m-dots li.ok { background: var(--ok); }
.m-dots li.miss { background: #ffb3b3; }
.m-play.g1 { --accent: var(--g1); --accent-2: var(--g1-2); --tint: var(--g1-bg); }
.m-play.g2 { --accent: var(--g2); --accent-2: var(--g2-2); --tint: var(--g2-bg); }
.m-play.g3 { --accent: var(--g3); --accent-2: var(--g3-2); --tint: var(--g3-bg); }
.m-play.g4 { --accent: var(--g4); --accent-2: var(--g4-2); --tint: var(--g4-bg); }

.m-board {
  position: relative; padding: 28px 28px 24px; border-radius: 30px; background: #fff; text-align: center;
  box-shadow: var(--shadow), inset 0 -6px 0 var(--tint);
  animation: boardIn .45s cubic-bezier(.2,.8,.3,1.15) both;
}
.m-board::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; border-radius: 30px 30px 0 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.m-board.win { animation: winPulse .6s ease; }
.m-q { margin: 6px auto 14px; max-width: 760px; font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; line-height: 1.3; }
.m-visual { display: flex; justify-content: center; align-items: center; min-height: 80px; margin: 6px 0 18px; }
.m-hint { min-height: 26px; margin: 14px 0 0; font-weight: 700; color: #c2410c; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.m-hint b { color: var(--ok); font-size: 20px; }

/* картинки */
.items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; max-width: 520px; font-size: clamp(34px, 5vw, 50px); }
.items.pairs { max-width: 380px; }
.item { display: inline-block; animation: popIn .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 70ms); }
.item.gone { position: relative; opacity: .35; filter: grayscale(1); animation: popIn .45s both, fade 1s 1s forwards; animation-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms + 700ms); }
.item.gone::after { content: ""; position: absolute; left: -6%; right: -6%; top: 48%; height: 5px; border-radius: 4px; background: var(--bad); transform: rotate(-30deg); }
.eq-visual { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.eq-visual .items { max-width: 260px; }
.op { font-size: 46px; color: var(--accent); }
.big-expr { font-size: clamp(34px, 6vw, 60px); font-weight: 900; letter-spacing: .01em; color: var(--navy); animation: popIn .5s cubic-bezier(.3,1.6,.5,1) both; }
.slot { display: inline-grid; place-items: center; min-width: 1.4em; padding: 0 .18em; border-radius: .25em; background: var(--tint); color: var(--accent); border: 3px dashed var(--accent); animation: breathe 1.6s ease-in-out infinite; }
.slot.solved { background: #e6f9ee; border: 3px solid var(--ok); color: var(--ok); animation: popIn .5s cubic-bezier(.3,1.6,.5,1); }
.story { font-size: 84px; animation: float 3s ease-in-out infinite; }

.nline { width: min(620px, 100%); height: auto; overflow: visible; }
.nline .axis { stroke: var(--navy); stroke-width: 4; stroke-linecap: round; }
.nline .axis-arrow { fill: var(--navy); }
.nline .tick { stroke: var(--navy); stroke-width: 3; }
.nline .tick-l { font: 700 22px var(--font); fill: var(--navy); text-anchor: middle; }
.nline .nl-mark circle { fill: var(--accent); stroke: #fff; stroke-width: 4; }
.nline .q-mark { font: 900 30px var(--font); fill: var(--accent); text-anchor: middle; animation: bounceY 1s ease-in-out infinite; }

.shape { width: 180px; height: 180px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.15)); }
.shape * { fill: var(--fill); stroke: rgba(0,0,0,.12); stroke-width: 3; }
.pop { animation: popIn .6s cubic-bezier(.3,1.6,.5,1) both; }

.blocks { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 720px; }
.rod { display: grid; grid-template-rows: repeat(10, 16px); gap: 2px; padding: 3px; border-radius: 6px; background: #1f5fe0; animation: dropIn .5s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 80ms); }
.rod i { width: 18px; border-radius: 3px; background: #6ea2ff; }
.units { display: grid; grid-template-columns: repeat(3, 22px); gap: 4px; align-self: flex-end; margin-left: 6px; }
.units i { width: 22px; height: 22px; border-radius: 5px; background: #ffb547; box-shadow: inset 0 -3px 0 #e08a00; animation: popIn .4s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 60ms + 300ms); }
.flat { width: 92px; height: 92px; border-radius: 8px; background-color: #8a5cf6; background-image: linear-gradient(#b99bff 2px, transparent 2px), linear-gradient(90deg, #b99bff 2px, transparent 2px); background-size: 9.1px 9.1px; animation: dropIn .5s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 100ms); }

.clock { width: 220px; height: 220px; animation: popIn .6s cubic-bezier(.3,1.6,.5,1) both; }
.c-face { fill: #fffdf5; } .c-rim { fill: none; stroke: var(--accent); stroke-width: 10; }
.c-num { font: 800 19px var(--font); fill: var(--navy); text-anchor: middle; }
.c-dot { fill: #b5c2de; }
.c-h { stroke: var(--navy); stroke-width: 8; stroke-linecap: round; }
.c-m { stroke: #ef4444; stroke-width: 5; stroke-linecap: round; }
.c-pin { fill: var(--navy); }

.coins { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.coin { width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1; color: #475569; background: radial-gradient(circle at 35% 30%, #fff, #cbd5e1 60%, #94a3b8); box-shadow: inset 0 0 0 5px rgba(255,255,255,.6), inset 0 0 0 7px #94a3b8, 0 6px 12px rgba(0,0,0,.18); animation: spinIn .7s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i) * 120ms); }
.coin b { font-size: 26px; } .coin small { font-size: 13px; font-weight: 800; }
.coin.c10 { color: #7c4a03; background: radial-gradient(circle at 35% 30%, #fff7cc, #f5c542 60%, #c98f12); box-shadow: inset 0 0 0 5px rgba(255,255,255,.5), inset 0 0 0 7px #c98f12, 0 6px 12px rgba(0,0,0,.18); }
.coin.c1 { width: 60px; height: 60px; } .coin.c1 b { font-size: 22px; }

.pie { width: 200px; height: 200px; }
.pie path { stroke: #fff; stroke-width: 4; transform-origin: 100px 100px; animation: popIn .4s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 70ms); }
.pie .on { fill: var(--accent); } .pie .off { fill: #e4ebf7; }

.grid-rect { width: min(340px, 100%); height: auto; }
.grid-rect rect { fill: var(--tint); stroke: var(--accent); stroke-width: 1.5; animation: popIn .3s ease both; animation-delay: calc(var(--i) * 15ms); }
.g-l { font: 800 15px var(--font); fill: var(--navy); text-anchor: middle; }

.dots { display: grid; grid-template-columns: repeat(var(--cols), 32px); gap: 10px; }
.dots i { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff 0 15%, var(--accent-2) 16%, var(--accent)); animation: popIn .35s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 40ms); }

.column { display: inline-flex; flex-direction: column; align-items: flex-end; padding: 12px 30px 12px 44px; border-radius: 18px; background: #f7faff; font: 900 clamp(36px, 6vw, 54px)/1.15 "Courier New", ui-monospace, monospace; color: var(--navy); letter-spacing: .06em; animation: popIn .5s cubic-bezier(.3,1.6,.5,1) both; }
.column span { position: relative; }
.column em { position: absolute; right: 100%; margin-right: 6px; font-style: normal; color: var(--accent); }
.column .sum { align-self: stretch; text-align: right; margin-top: 6px; padding-top: 6px; border-top: 4px solid var(--accent); color: var(--accent); animation: breathe 1.6s ease-in-out infinite; }

.scale-wrap { position: relative; width: min(420px, 100%); padding-top: 54px; }
.scale { display: block; width: 100%; height: auto; }
.s-lbl { position: absolute; top: 0; padding: 8px 14px; border-radius: 14px; font-weight: 900; font-size: clamp(18px, 3.2vw, 24px); color: var(--navy); background: #fff; box-shadow: 0 0 0 3px var(--tint), 0 6px 14px rgba(15,42,120,.12); white-space: nowrap; animation: bounceY 2.6s ease-in-out infinite; }
.s-lbl.l { left: 0; } .s-lbl.r { right: 0; animation-delay: -1.3s; }
.s-post, .s-bar { stroke: var(--navy); stroke-width: 6; stroke-linecap: round; fill: none; }
.s-str { fill: none; stroke: #94a3b8; stroke-width: 2; }
.s-pan { fill: var(--accent); }
.s-pin { fill: var(--accent); }
.s-beam { transform-origin: 180px 46px; animation: balance 2.6s ease-in-out infinite; }

.pattern { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pattern span { min-width: 74px; height: 74px; padding: 0 12px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 0 rgba(0,0,0,.12); animation: popIn .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 110ms); }
.pattern .pq { background: #fff; color: var(--accent); border: 4px dashed var(--accent); box-shadow: none; animation: breathe 1.6s ease-in-out infinite; }

/* ответы */
.m-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 760px; margin: 0 auto; }
.m-choices.two, .m-choices.cmp { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); max-width: 520px; }
.m-choices.cmp { --n: 3; }
.m-opt {
  min-height: 74px; padding: 10px; border: 0; border-radius: 22px; cursor: pointer;
  font-size: clamp(22px, 3vw, 32px); font-weight: 900; color: var(--navy); background: #fff;
  box-shadow: 0 0 0 3px var(--tint) inset, 0 7px 0 #d5def0, 0 12px 18px rgba(15,42,120,.08);
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s;
  animation: rise .4s cubic-bezier(.2,.8,.3,1.3) both; animation-delay: calc(var(--i) * 70ms + 150ms);
}
.m-opt:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--accent) inset, 0 10px 0 #d5def0, 0 14px 22px rgba(15,42,120,.12); }
.m-opt:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 3px var(--accent) inset, 0 2px 0 #d5def0; }
.m-opt.right { background: var(--ok); color: #fff; box-shadow: 0 7px 0 #0f8a43; animation: bump .5s cubic-bezier(.3,1.6,.5,1); }
.m-opt.reveal { animation: glow 1s ease-in-out infinite; }
.m-opt.wrong { background: #ffe1e1; color: var(--bad); box-shadow: 0 7px 0 #f4b4b4; opacity: .8; }
.m-opt:disabled { cursor: default; }

.m-input { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.m-display { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 220px; height: 76px; padding: 0 22px; border-radius: 22px; background: var(--tint); border: 3px solid var(--accent); font-size: 40px; font-weight: 900; }
.m-display small { font-size: 22px; color: var(--ink); margin-left: 6px; }
.m-display.typed span { display: inline-block; animation: typed .25s ease; }
.m-caret { width: 3px; height: 40px; border-radius: 2px; background: var(--accent); animation: blink 1s step-end infinite; }
.m-keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.m-key { height: 64px; border: 0; border-radius: 18px; cursor: pointer; font-size: 28px; font-weight: 800; color: var(--navy); background: #fff; box-shadow: 0 5px 0 #d5def0, 0 8px 14px rgba(15,42,120,.08); transition: transform .08s, box-shadow .08s; animation: rise .35s cubic-bezier(.2,.8,.3,1.3) both; animation-delay: calc(var(--i) * 25ms + 100ms); }
.m-key:active, .m-key.hit { transform: translateY(4px); box-shadow: 0 1px 0 #d5def0; }
.m-key.ok { color: #fff; background: linear-gradient(180deg, #2bd472, var(--ok)); box-shadow: 0 5px 0 #0f8a43; }
.m-key.del { color: #b45309; background: #fff4e0; box-shadow: 0 5px 0 #f3d9a8; }

.m-order { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.m-train { display: flex; gap: 10px; padding: 10px 14px 18px; border-radius: 20px; background: linear-gradient(transparent 70%, #cbd5e1 70% 74%, transparent 74%); }
.m-wagon { position: relative; width: 66px; height: 56px; border-radius: 14px; border: 3px dashed #b6c4e0; display: grid; place-items: center; font-size: 26px; font-weight: 900; color: #fff; }
.m-wagon::after { content: ""; position: absolute; bottom: -12px; left: 10px; width: 14px; height: 14px; border-radius: 50%; background: #475569; box-shadow: 30px 0 0 #475569; }
.m-wagon.fill { border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); animation: bump .45s cubic-bezier(.3,1.6,.5,1); }
.m-bubbles { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.m-ball { width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer; font-size: 28px; font-weight: 900; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6) 0 12%, transparent 13%), linear-gradient(135deg, #ff7eb3, #ff5d5d); box-shadow: 0 8px 16px rgba(255,93,93,.35); animation: popIn .4s cubic-bezier(.3,1.6,.5,1) both, float 3s ease-in-out infinite; animation-delay: calc(var(--i) * 80ms), calc(var(--i) * -0.6s); transition: opacity .3s, transform .3s; }
.m-ball:nth-child(2n) { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6) 0 12%, transparent 13%), linear-gradient(135deg, #5fb4ff, #2f7bff); box-shadow: 0 8px 16px rgba(47,123,255,.35); }
.m-ball:nth-child(3n) { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6) 0 12%, transparent 13%), linear-gradient(135deg, #6bd96a, #21b26b); box-shadow: 0 8px 16px rgba(33,178,107,.35); }
.m-ball.used { opacity: 0; transform: scale(.3); pointer-events: none; }

.m-next { border: 0; cursor: pointer; padding: 12px 24px; border-radius: 999px; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 14px rgba(0,0,0,.15); animation: popIn .4s cubic-bezier(.3,1.6,.5,1) both; }

/* ---------- результат ---------- */
.m-result { margin: 40px auto 120px; max-width: 640px; padding: 36px 28px; border-radius: 34px; background: #fff; text-align: center; box-shadow: var(--shadow); animation: boardIn .5s cubic-bezier(.2,.8,.3,1.15) both; }
.m-trophy { font-size: 96px; line-height: 1; animation: trophy 1s cubic-bezier(.3,1.6,.5,1) both; }
.m-result h2 { margin: 12px 0 0; font-size: 34px; font-weight: 900; }
.m-result p { margin: 4px 0 22px; font-size: 17px; color: var(--ink); font-weight: 600; }
.m-res-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.m-btn { display: inline-flex; align-items: center; padding: 14px 24px; border: 0; border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2f6ff0, #a066ff); box-shadow: 0 8px 18px rgba(47,111,240,.3); transition: transform .15s; }
.m-btn:hover { transform: translateY(-2px); }
.m-btn.ghost { color: var(--navy); background: #fff; box-shadow: inset 0 0 0 2px #d5def0; }

/* ---------- Мила и эффекты ---------- */
.m-fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.m-conf { position: fixed; width: 10px; height: 14px; border-radius: 3px; }
.m-conf.star { width: 16px; height: 16px; border-radius: 0; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }
.m-fly { position: fixed; font-size: 30px; z-index: 60; }
.m-noscript { padding: 30px; text-align: center; font-weight: 700; }

/* ---------- анимации ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(-40px); } 100% { opacity: 1; transform: none; } }
@keyframes spinIn { 0% { opacity: 0; transform: rotateY(90deg) scale(.5); } 100% { opacity: 1; transform: none; } }
@keyframes boardIn { 0% { opacity: 0; transform: translateY(24px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes winPulse { 0%, 100% { box-shadow: var(--shadow), inset 0 -6px 0 var(--tint); } 40% { box-shadow: 0 0 0 8px rgba(25,179,92,.25), var(--shadow); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
.shake { animation: shake .5s ease !important; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes jelly { 0% { transform: scale(1); } 30% { transform: scale(1.25, .8); } 50% { transform: scale(.85, 1.15); } 70% { transform: scale(1.08, .95); } 100% { transform: scale(1); } }
@keyframes bounceY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes balance { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes typed { from { transform: scale(1.3); color: var(--accent); } to { transform: none; } }
@keyframes glow { 0%, 100% { box-shadow: 0 7px 0 #0f8a43, 0 0 0 0 rgba(25,179,92,.5); } 50% { box-shadow: 0 7px 0 #0f8a43, 0 0 0 10px rgba(25,179,92,0); } }
@keyframes starIn { 0% { opacity: 0; transform: scale(0) rotate(-180deg); } 100% { opacity: 1; transform: none; } }
@keyframes trophy { 0% { opacity: 0; transform: translateY(40px) scale(.3) rotate(-20deg); } 100% { opacity: 1; transform: none; } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-26px) rotate(-6deg); } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }
@keyframes fade { to { opacity: .2; } }

/* ---------- телефон ---------- */
@media (max-width: 720px) {
  .m-hero { grid-template-columns: 1fr; padding: 22px 20px 0; }
  .m-hero-art { justify-self: end; }
  .m-hero-art img { width: 150px; margin: -10px -6px -6px 0; }
  .m-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-card { min-height: 150px; padding: 14px 12px 12px; border-radius: 18px; }
  .m-ico { font-size: 32px; }
  .m-ct { font-size: 14px; } .m-cd { font-size: 12px; }
  .m-play-head { flex-wrap: wrap; }
  .m-dots { width: 100%; justify-content: center; margin: 4px 0 0; }
  .m-board { padding: 22px 14px 18px; border-radius: 24px; }
  .m-choices { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-opt { min-height: 64px; }
  .m-keypad { grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 300px; }
  .m-wagon { width: 50px; height: 46px; font-size: 20px; }
  .m-ball { width: 62px; height: 62px; font-size: 22px; }
  .dots { grid-template-columns: repeat(var(--cols), 24px); gap: 8px; }
  .dots i { width: 24px; height: 24px; }
  .story { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}


/* ======== 1.1: сцена, Мила, подписка, результаты ======== */
.m-subbar { position: relative; z-index: 5; }
.m-subbar-row { display: flex; align-items: center; gap: 12px; padding: 14px 0 0; }
.m-crumb { font-weight: 800; font-size: 15px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.85); box-shadow: 0 3px 10px rgba(15,42,120,.08); }
.m-subj { font-size: 18px; font-weight: 900; margin-right: auto; }
.m-stars { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(135deg, #fff4c2, #ffe08a); font-weight: 900; font-size: 18px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.06), 0 4px 12px rgba(255,190,0,.25); }
.m-icon-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: #fff; box-shadow: 0 3px 10px rgba(15,42,120,.12); font-size: 20px; cursor: pointer; }
.m-app { position: relative; z-index: 4; }

.m-hero.tone-blue { background: linear-gradient(110deg, #2f6ff0 0%, #5a8bff 45%, #7aa8ff 100%); }
.m-hero.tone-violet { background: linear-gradient(110deg, #6d4cff 0%, #9b6bff 50%, #d08cff 100%); }
.m-hero.tone-green { background: linear-gradient(110deg, #10a35f 0%, #3fc47a 55%, #8fe08a 100%); }
.m-hero.tone-orange { background: linear-gradient(110deg, #ff6a3d 0%, #ff9a3d 50%, #ffc94a 100%); }
.m-hero-art img { width: 190px; margin: -20px 10px -60px 0; }
.m-progress { position: relative; height: 26px; margin-top: 14px; max-width: 420px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.m-progress i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #ffe066, #ffb800); animation: grow 1.2s cubic-bezier(.2,.8,.3,1) both; }
.m-progress span { position: relative; display: block; text-align: center; line-height: 26px; font-weight: 800; font-size: 13px; color: var(--navy); }
@keyframes grow { from { width: 0; } }
.m-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 18px; border-radius: 20px; background: linear-gradient(135deg, #fff7d1, #ffe7a3); box-shadow: 0 6px 16px rgba(255,190,0,.18); animation: rise .5s ease both; }
.m-banner > span { font-size: 30px; }
.m-banner p { margin: 0; flex: 1; font-weight: 600; }
.m-banner.warn { background: linear-gradient(135deg, #fff1e6, #ffd9bd); }
.m-free { position: absolute; top: 12px; left: 64px; padding: 3px 8px; border-radius: 999px; background: #e6f7ee; color: #12753c; font-size: 11px; font-weight: 800; }
.m-card { padding-top: 16px; }
.m-cfoot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 8px; }
.medal { font-size: 26px; line-height: 1; }
.m-score { font-weight: 800; font-size: 14px; color: var(--ink); }
.m-new { font-weight: 800; font-size: 14px; color: var(--accent, var(--blue)); }
.g1 .m-new { color: var(--g1); } .g2 .m-new { color: var(--g2); } .g3 .m-new { color: var(--g3); } .g4 .m-new { color: var(--g4); }
.m-lock { font-weight: 800; font-size: 13px; color: #9a5800; }
.m-card.locked { filter: saturate(.55); }
.m-card.locked .m-ico { opacity: .6; }
.m-card.locked::after { content: "🔒"; position: absolute; right: 14px; bottom: 12px; font-size: 22px; }

.m-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(15,42,120,.35); backdrop-filter: blur(4px); animation: rise .25s ease; }
.m-modal-box { position: relative; width: min(480px, 100%); padding: 30px 26px; border-radius: 28px; background: #fff; text-align: center; animation: popIn .45s cubic-bezier(.3,1.6,.5,1); }
.m-modal-ico { font-size: 64px; }
.m-modal-box h2 { font-size: 24px; font-weight: 900; margin: 6px 0; }
.m-modal-box p { color: var(--ink); font-weight: 600; margin: 0 0 18px; }
.m-modal-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f1f5ff; font-size: 24px; cursor: pointer; }

/* интерактивная сцена */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; --px: 0; --py: 0; }
.is-playing .scene { opacity: 1; }
.scene-bg { position: absolute; inset: -40px; background-size: cover; background-position: center right; filter: saturate(1.2); transform: translate(calc(var(--px) * -24px), calc(var(--py) * -16px)) scale(1.05); transition: transform .3s ease-out; }
.scene-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238,246,255,.92) 0%, rgba(238,246,255,.65) 50%, rgba(238,246,255,.2) 100%); }
.scene-glow span { position: absolute; left: var(--x); top: var(--y); font-size: 34px; font-weight: 900; color: #fff; text-shadow: 0 0 12px #6fb2ff, 0 0 24px #6fb2ff; opacity: .7; transform: translate(calc(var(--px) * 40px), calc(var(--py) * 30px)); animation: drift 9s ease-in-out infinite; animation-delay: var(--d); transition: transform .3s ease-out; }
@keyframes drift { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -22px; rotate: 6deg; } }
.mila { position: fixed; right: 2vw; bottom: -40px; z-index: 6; width: clamp(150px, 19vw, 300px); padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(60px) scale(.9); transition: opacity .5s ease, transform .6s cubic-bezier(.3,1.4,.5,1); }
.is-playing .mila { opacity: 1; pointer-events: auto; transform: none; }
.mila img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(15,42,120,.28)); transform-origin: 50% 90%; animation: milaIdle 4s ease-in-out infinite; }
.mila.happy img { animation: milaJump .7s cubic-bezier(.3,1.5,.5,1) 2; }
.mila.sad img { animation: milaShake .8s ease; }
.mila-bubble { position: absolute; right: 70%; top: 6%; width: max-content; max-width: 240px; padding: 12px 16px; border-radius: 20px 20px 4px 20px; background: #fff; font: 800 16px var(--font); color: var(--navy); text-align: left; box-shadow: 0 10px 24px rgba(15,42,120,.2); opacity: 0; transform: scale(.6) translateY(10px); transform-origin: right bottom; transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.mila.talk .mila-bubble { opacity: 1; transform: none; }
.mila:focus-visible { outline: none; }
.mila:focus-visible img { outline: 3px solid #ffb400; border-radius: 30px; }
@keyframes milaIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes milaJump { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-40px) scale(1.04) rotate(-4deg); } 60% { transform: translateY(0) scale(1.02, .97); } }
@keyframes milaShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
.is-playing .m-play { max-width: min(860px, 100% - 260px); }
.is-playing .m-board { background: rgba(255,255,255,.94); backdrop-filter: blur(6px); }

/* новые виды картинок */
.big-word { font-size: clamp(34px, 6vw, 58px); font-weight: 900; letter-spacing: .02em; animation: popIn .5s cubic-bezier(.3,1.6,.5,1) both; }
.pic-card { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 28px; border-radius: 26px; background: var(--tint); animation: popIn .5s cubic-bezier(.3,1.6,.5,1) both; }
.pic-e { font-size: clamp(64px, 10vw, 96px); line-height: 1.1; animation: float 3s ease-in-out infinite; }
.pic-card b { font-size: 20px; font-weight: 800; }
.quote { max-width: 620px; padding: 22px 26px; border-radius: 22px; background: linear-gradient(135deg, #fffbea, #fff3d0); font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; line-height: 1.4; font-style: italic; position: relative; animation: popIn .5s cubic-bezier(.3,1.6,.5,1) both; }
.quote::before { content: "❝"; position: absolute; left: 10px; top: -10px; font-size: 44px; color: #f4c95d; font-style: normal; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.swatch i { width: 140px; height: 140px; border-radius: 36% 64% 52% 48% / 44% 40% 60% 56%; background: var(--sw); box-shadow: inset 0 -10px 20px rgba(0,0,0,.12), 0 10px 20px rgba(0,0,0,.15); animation: popIn .5s cubic-bezier(.3,1.6,.5,1) both, blob 6s ease-in-out infinite; }
.swatch b { font-size: 20px; }
@keyframes blob { 50% { border-radius: 58% 42% 40% 60% / 52% 62% 38% 48%; } }
.mix { display: flex; align-items: center; gap: 12px; font-size: 40px; font-weight: 900; color: var(--accent); }
.blob { width: 90px; height: 90px; border-radius: 42% 58% 50% 50% / 50% 44% 56% 50%; background: var(--c); box-shadow: inset 0 -8px 16px rgba(0,0,0,.15), 0 0 0 3px rgba(0,0,0,.05); animation: popIn .5s cubic-bezier(.3,1.6,.5,1) both, blob 5s ease-in-out infinite; }
.blob.q { display: grid; place-items: center; background: #fff; border: 4px dashed var(--accent); color: var(--accent); font-size: 40px; }
.rainbow { display: flex; gap: 6px; }
.rainbow i { width: 44px; height: 110px; border-radius: 22px; background: var(--c); animation: dropIn .5s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 90ms); font-style: normal; }
.rainbow i.q { display: grid; place-items: center; background: #fff; border: 3px dashed var(--accent); color: var(--accent); font-size: 26px; font-weight: 900; }
.odd { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: clamp(48px, 8vw, 72px); }
.odd span { animation: popIn .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 100ms); }
.odd.big { font-size: clamp(54px, 9vw, 84px); }
.chain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; }
.chain span { padding: 12px 16px; border-radius: 18px; background: var(--tint); animation: popIn .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 140ms); }
.chain b { color: var(--accent); font-size: 28px; }
.mirror { font-size: 90px; animation: float 3s ease-in-out infinite; }
.m-timer { width: min(420px, 100%); height: 14px; margin: 0 auto; border-radius: 10px; background: #e8eef9; overflow: hidden; }
.m-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: timer linear forwards; }
@keyframes timer { from { width: 100%; } to { width: 0; } }
.m-choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
.m-choices.long .m-opt { font-size: clamp(16px, 2vw, 20px); font-weight: 800; padding: 12px; }
.m-choices.long { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* результат */
.m-res-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 8px; }
.m-res-stats div { padding: 12px 6px; border-radius: 18px; background: var(--page); animation: popIn .45s cubic-bezier(.3,1.6,.5,1) both; }
.m-res-stats div:nth-child(2) { animation-delay: .1s; } .m-res-stats div:nth-child(3) { animation-delay: .2s; } .m-res-stats div:nth-child(4) { animation-delay: .3s; }
.m-res-stats b { display: block; font-size: 24px; font-weight: 900; }
.m-res-stats small { font-weight: 600; color: var(--ink); font-size: 12px; }
.m-res-note { min-height: 22px; font-weight: 800; color: #b45309; }
.m-mini-rating { margin: 6px 0 20px; padding: 16px; border-radius: 22px; background: linear-gradient(160deg, #f5f8ff, #eef0ff); text-align: left; }
.m-mini-rating h3 { margin: 0 0 4px; font-size: 18px; font-weight: 900; }
.m-place b { font-size: 24px; color: var(--blue); }
.m-top5 { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.m-top5 li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #fff; animation: rise .4s ease both; }
.m-top5 li.me { box-shadow: inset 0 0 0 2px #ffd23f; background: #fffbea; }
.m-top5 .pl { width: 24px; font-weight: 900; }
.m-top5 .av { font-size: 22px; }
.m-top5 .nm { flex: 1; font-weight: 700; }
.m-top5 .nm small { display: block; font-weight: 500; color: var(--ink); font-size: 12px; }
.m-link { font-weight: 800; color: var(--blue); }
.m-guest, .m-loading { font-weight: 600; text-align: center; }
.m-guest a { color: var(--blue); font-weight: 800; }

@media (max-width: 1020px) {
  .is-playing .m-play { max-width: none; }
  .mila { width: 120px; right: 6px; bottom: -20px; }
  .mila-bubble { right: 60%; top: -10%; font-size: 14px; max-width: 200px; }
  .scene-bg::after { background: rgba(238,246,255,.85); }
}
@media (max-width: 720px) {
  .m-subbar-row .m-subj { font-size: 15px; }
  .m-crumb { display: none; }
  .m-res-stats { grid-template-columns: 1fr 1fr; }
  .m-choices.three { grid-template-columns: 1fr 1fr 1fr; }
  .m-choices.long { grid-template-columns: 1fr; }
  .mila { width: 96px; }
  .m-hero { padding-bottom: 22px; }
  .m-hero-art { position: absolute; right: 4px; bottom: -6px; }
  .m-hero-art img { width: 96px; margin: 0; }
  .m-hero-txt { padding-right: 70px; }
  .rainbow i { width: 30px; height: 80px; }
  .blob { width: 64px; height: 64px; }
  .scene-glow { display: none; }
}

/* ===== 1.2.2: чёткий фон заданий вместо растянутой фотографии ===== */
.scene-bg {
  --t1: rgba(47, 111, 240, .10); --t2: rgba(255, 196, 61, .32); --t3: rgba(160, 102, 255, .18);
  background:
    radial-gradient(620px 420px at 88% 18%, var(--t2), transparent 70%),
    radial-gradient(760px 520px at 6% 92%, var(--t3), transparent 70%),
    linear-gradient(var(--t1) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, var(--t1) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(160deg, #eef6ff 0%, #f6f2ff 100%);
  filter: none;
}
.scene-bg::after { content: none; display: none; }
.subj-russian .scene-bg { --t1: rgba(124, 77, 255, .10); --t2: rgba(255, 143, 200, .28); --t3: rgba(124, 77, 255, .16); }
.subj-world .scene-bg { --t1: rgba(28, 154, 76, .10); --t2: rgba(255, 214, 102, .32); --t3: rgba(56, 189, 248, .18); }
.subj-art .scene-bg { --t1: rgba(223, 79, 29, .09); --t2: rgba(255, 143, 200, .28); --t3: rgba(255, 196, 61, .26); }
/* парящие символы — чёткие, без размытого свечения */
.scene-glow span { color: #2f6ff0; opacity: .22; text-shadow: none; font-size: 40px; }
.scene-glow span:nth-child(3n) { color: #a066ff; }
.scene-glow span:nth-child(3n+1) { color: #ff8a3d; }
.is-playing .m-board { backdrop-filter: none; background: #fff; }