/* Шахматная страна — стили. Анимации только transform/opacity; prefers-reduced-motion отключает декоративное движение. */
@font-face { font-family: Nunito; src: url(fonts/nunito-cyr.woff2) format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Nunito; src: url(fonts/nunito-lat.woff2) format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: Pangolin; src: url(fonts/pangolin-cyr.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Pangolin; src: url(fonts/pangolin-lat.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --bg: #fff4e0; --ink: #2a1f1a; --ink-2: #6e5a4c; --sun: #ffd23f; --coral: #ff7a45; --mint: #c9f0d2; --grass: #9bd67a; --sky: #cdeefe; --teal: #146c72;
  --font-h: Pangolin, "Comic Sans MS", system-ui, sans-serif; --font-b: Nunito, system-ui, sans-serif;
  --top: 88px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-b); font-weight: 800; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
button { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; border: 0; margin: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { -webkit-user-drag: none; }
.ki { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#app { position: fixed; inset: 0; overflow: hidden; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.scr.leaving { pointer-events: none; z-index: 0; }
.noscript { padding: 40px; font: 400 24px/1.4 var(--font-h); text-align: center; }
.fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

/* ---------- Герой: фигура + лицо ---------- */
.char { position: relative; display: block; width: 100%; aspect-ratio: 1; transform-origin: 50% 90%; animation: breathe var(--breathe, 3s) ease-in-out infinite; }
.char > img { width: 100%; height: 100%; display: block; pointer-events: none; }
.char > .face { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.face .eyes-happy, .face .eyes-closed, .face .mouth-wow, .face .mouth-talk, .face .mouth-sad { display: none; }
.face .eyes-open { transform-box: fill-box; transform-origin: center; animation: blink var(--blink, 4s) var(--blink-d, 0s) infinite; }
.char.happy .eyes-open { display: none; } .char.happy .eyes-happy { display: inline; }
.char.sleep .eyes-open { display: none; } .char.sleep .eyes-closed { display: inline; }
.char.wow .mouth-smile { display: none; } .char.wow .mouth-wow { display: inline; }
.char.sad .mouth-smile { display: none; } .char.sad .mouth-sad { display: inline; }
.char.talk .mouth-smile, .char.talk .mouth-wow { display: none; } .char.talk .mouth-talk { display: inline; }
.char.talk .talk-m { transform-box: fill-box; transform-origin: center; animation: talkm .18s ease-in-out infinite alternate; }
.char.sleep { animation-duration: 4.5s; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes talkm { from { transform: scaleY(.25); } to { transform: scaleY(1.05); } }
@keyframes sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }

/* ---------- Кнопки ---------- */
.rb { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.rb:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.rb.xl { width: 84px; height: 84px; } .rb.xl .ki { width: 40px; height: 40px; }
.rb.speak { background: var(--sun); }
.rb.speak.talking { animation: talkb .5s ease-in-out infinite alternate; }
.rb.speak.invite { animation: invite 1.1s ease-in-out infinite; }
.rb.mus.off { color: #a8998a; background: #f4ece0; }
@keyframes talkb { to { box-shadow: 0 5px 0 var(--ink), 0 0 0 10px rgba(255, 210, 63, .45); } }
@keyframes invite { 50% { transform: translateY(-6px) rotate(-8deg); } }
.who-btn { overflow: hidden; padding: 6px; } .who-btn .av { width: 100%; height: 100%; }
.lockb { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--ink-2); background: rgba(255,255,255,.65); border: 2px solid rgba(42,31,26,.22); }
.lockb .ki { width: 22px; height: 22px; }
.lockb.corner { position: absolute; right: 14px; top: 14px; z-index: 5; }
.bigplay { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--coral); color: #fff; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.bigplay .ki { width: 64px; height: 64px; margin-left: 8px; }
.bigplay::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 5px solid rgba(255, 122, 69, .45); animation: ring 1.8s ease-out infinite; pointer-events: none; }
.bigplay.sm { width: 108px; height: 108px; } .bigplay.sm .ki { width: 52px; height: 52px; }
@keyframes ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* ---------- Верхняя панель ---------- */
.top { position: relative; z-index: 6; flex: none; height: var(--top); display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.top-mid { flex: 1; display: flex; justify-content: center; min-width: 0; }
.prog { display: flex; gap: 6px; }
.prog i { width: 30px; height: 30px; color: #e8dcc8; display: grid; place-items: center; }
.prog i .ki { width: 100%; height: 100%; stroke: #c8b8a0; stroke-width: 1.4; }
.prog i.got { color: var(--sun); } .prog i.got .ki { stroke: var(--ink); }
.prog i.now { animation: bob 1.2s ease-in-out infinite; } .prog i.now .ki { stroke: var(--ink); stroke-dasharray: 3 2; }

/* ---------- Пешик-проводник и пузырь ---------- */
.coach { position: absolute; left: 10px; bottom: 10px; z-index: 7; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.coach-hero { width: 96px; height: 96px; pointer-events: auto; display: grid; place-items: end center; }
.coach-hero .char { width: 100%; }
.bubble { margin-bottom: 52px; max-width: min(56vw, 380px); padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(42,31,26,.25);
  font: 400 18px/1.25 var(--font-h), system-ui; opacity: 0; transform-origin: 0 100%; transition: opacity .25s; }
.coach.saying .bubble { opacity: 1; }
.coach.coach-left { left: 10px; }

/* ---------- Заставка ---------- */
.scr-splash { background: linear-gradient(#bfe9ff 0%, #e4f6ff 48%, #fff4e0 100%); }
.sky { position: absolute; inset: 0; pointer-events: none; }
.sun { position: absolute; right: 8%; top: 8%; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, #ffe680 0 55%, #ffd23f 56%); border: 3px solid var(--ink);
  box-shadow: 0 0 0 14px rgba(255, 210, 63, .25), 0 0 0 30px rgba(255, 210, 63, .12); animation: sunp 4s ease-in-out infinite; }
@keyframes sunp { 50% { transform: scale(1.06) rotate(8deg); } }
.cloud { position: absolute; width: 120px; height: 40px; border-radius: 40px; background: #fff; border: 3px solid var(--ink); scale: var(--s, 1); animation: drift var(--d, 16s) ease-in-out infinite alternate; }
.cloud::before { content: ""; position: absolute; left: 24px; top: -24px; width: 56px; height: 52px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); border-bottom-color: transparent; }
.sky .c1 { left: 6%; top: 14%; } .sky .c2 { left: 56%; top: 28%; --s: .7; --d: 20s; } .sky .c3 { left: 24%; top: 40%; --s: .5; --d: 24s; }
@keyframes drift { to { translate: 50px 0; } }
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26%; }
.castle { position: absolute; left: 50%; bottom: 7%; width: min(64vw, 360px); translate: -50% 0; }
.castle .flag { transform-box: fill-box; transform-origin: 0 50%; animation: flag 1.6s ease-in-out infinite; }
@keyframes flag { 50% { transform: scaleX(.75) skewY(6deg); } }
.splash-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 16px 34vh; text-align: center; }
.title { font: 400 46px/1.05 var(--font-h); color: var(--coral); text-shadow: 3px 3px 0 var(--ink); -webkit-text-stroke: 1.5px var(--ink); max-width: 9.5em; }
.title .ch { display: inline-block; }
.splash-hero { width: 150px; }
.splash-hero .char { animation: breathe 2.6s ease-in-out infinite, sway 3.4s ease-in-out infinite; }

/* ---------- Кто играет ---------- */
.scr-profiles { background: linear-gradient(#cdeefe, #fff4e0); }
.who-main { flex: 1; display: grid; place-items: center; padding: 16px 16px 140px; }
.who-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.who-p { width: 150px; display: grid; justify-items: center; gap: 6px; }
.who-p .av { width: 140px; height: 140px; padding: 18px; border-radius: 40px; background: #fff; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.who-p small { font: 700 16px/1.2 var(--font-b); color: var(--ink-2); min-height: 20px; }
.av { display: grid; place-items: center; } .av svg { width: 100%; height: 100%; }

/* ---------- Карта ---------- */
.scr-map { background: linear-gradient(#bfe6ff 0, #dff5d0 30%, #cdeab4 70%, #fff0cf 100%); }
.scr-map .top { background: linear-gradient(rgba(191,230,255,.95), rgba(191,230,255,0)); }
.par { position: absolute; left: 0; right: 0; top: 0; height: 400%; pointer-events: none; will-change: transform; }
.par-far .cloud { opacity: .85; }
.hill { position: absolute; width: 80%; height: 260px; border-radius: 50%; background: #c3e6a5; scale: var(--s); opacity: .55; }
.hill:nth-child(odd) { background: #b4dd93; }
.map-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; z-index: 1; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.map-scroll::-webkit-scrollbar { display: none; }
.map-content { position: relative; max-width: 900px; margin: 0 auto; padding: calc(var(--top) + 20px) 16px 180px; }
.par-near { position: absolute; inset: 0; pointer-events: none; }
.tree { position: absolute; width: 70px; height: 92px; scale: var(--s, 1); }
.tree::before { content: ""; position: absolute; left: 0; top: 0; width: 70px; height: 64px; border-radius: 50%; background: #6cc04a; border: 3px solid var(--ink); animation: sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
.tree::after { content: ""; position: absolute; left: 29px; top: 58px; width: 12px; height: 32px; background: #a8714a; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 4px 4px; z-index: -1; }
.flower { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 0 0 5px #ff9ec4, 0 0 0 8px var(--ink); }
.road { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; }
.road-base { fill: none; stroke: #f6dca2; stroke-width: 40; stroke-linecap: round; }
.road-dash { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: 3 16; stroke-linecap: round; opacity: .9; }
.road-done { fill: none; stroke: rgba(255, 166, 0, .5); stroke-width: 14; stroke-linecap: round; }
.path { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 46px; }
.node-row { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateX(var(--x)); }
.node { position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.node:active { box-shadow: 0 3px 0 var(--ink); }
.node .char { width: 78px; }
.node.done { background: var(--mint); }
.node.current, .node.open { background: var(--sun); width: 128px; height: 128px; }
.node.open { background: #ffe9a0; }
.node.current .char { width: 92px; }
.node.locked, .node.soon { background: #f1e7d6; border-color: #b9a68c; box-shadow: 0 8px 0 #b9a68c; }
.node.locked .char, .node.soon .char, .node.locked .grid3, .node.soon .castle-ic, .node.locked .q { filter: grayscale(.85) opacity(.55); }
.glow { position: absolute; top: -26px; width: 184px; height: 184px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 80, .8), rgba(255, 220, 80, 0) 68%); animation: glow 1.8s ease-in-out infinite; z-index: -1; pointer-events: none; }
@keyframes glow { 50% { transform: scale(1.14); opacity: .65; } }
.done-badge { position: absolute; right: -6px; bottom: -6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); border: 3px solid var(--ink); color: #fff; }
.done-badge .ki { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.4; }
.zz { position: absolute; right: -2px; top: -14px; font: 400 24px/1 var(--font-h); color: #7d6c55; animation: zz 2.6s ease-in-out infinite; }
.zz i { font-style: normal; font-size: 17px; margin-left: 2px; vertical-align: super; }
@keyframes zz { 50% { transform: translate(4px, -7px); opacity: .5; } }
.size { height: 24px; padding: 0 10px; border-radius: 99px; display: inline-flex; align-items: center; background: rgba(255,255,255,.85); border: 2px solid rgba(42,31,26,.2); font: 700 13px/1 var(--font-b); color: var(--ink-2); }
.grid3 { width: 60px; height: 60px; display: grid; grid-template-columns: repeat(3, 1fr); border: 3px solid var(--ink); border-radius: 9px; overflow: hidden; }
.grid3 i { background: #fff4dc; } .grid3 i:nth-child(odd) { background: #a9dba4; }
.duo { display: flex; align-items: flex-end; } .duo .char { width: 58px; } .duo .char + .char { margin-left: -16px; }
.q { font: 400 58px/1 var(--font-h); color: #7c5cff; }
.castle-ic { width: 72px; height: 72px; }
.guide { position: absolute; left: 0; top: 0; width: 66px; z-index: 3; margin: -46px 0 0 -33px; pointer-events: none; }
.guide .char { animation: breathe 2.4s ease-in-out infinite, sway 3s ease-in-out infinite; }
.guide-hand { position: absolute; left: -26px; top: 46%; width: 34px; rotate: -100deg; animation: wavehand 1.4s ease-in-out infinite; }
.guide.walking .guide-hand { rotate: -60deg; }
@keyframes wavehand { 50% { translate: -4px 2px; } }
.hand { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 0 rgba(42,31,26,.25)); }

/* ---------- Урок ---------- */
.scr-lesson { background: linear-gradient(#e3f6d3, #fff4e0 60%); }
.les-main { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 12px 16px; min-height: 0; }
.goal { display: flex; gap: 12px; min-height: 64px; align-items: center; }
.gslot { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.7); border: 3px dashed rgba(42,31,26,.35); }
.gslot .apple { width: 42px; filter: grayscale(1) opacity(.25); transition: filter .3s; }
.gslot.full { background: #fff; border: 3px solid var(--ink); } .gslot.full .apple { filter: none; }
.stage { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; }
.big-slot:empty, .under-slot:empty, .go-slot:empty { display: none; }
.big-hero { display: flex; flex-direction: column; align-items: center; }
.big-hero .bh { width: 150px; }
.big-hero .bh .char { animation: breathe 2.4s ease-in-out infinite, sway 3.2s ease-in-out infinite; }
.plate { margin-top: -6px; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 99px; background: #fff; border: 3px solid var(--ink); font: 400 24px/1 var(--font-h); box-shadow: 0 4px 0 var(--ink); }
.q-hero .q { font-size: 120px; animation: bob 1.6s ease-in-out infinite; display: block; }
.go-slot { position: relative; z-index: 8; margin: 4px 0 6px; }
.board-slot { display: grid; place-items: center; }
.bwrap { --bs: min(92vw, 640px, calc(100dvh - var(--top) - 210px)); position: relative; width: var(--bs); container-type: inline-size; }
.bwrap.demo { --bs: min(80vw, 420px, calc(100dvh - var(--top) - 330px)); }
.board { display: grid; grid-template-columns: repeat(var(--n), 1fr); aspect-ratio: 1; border: 4px solid var(--ink); border-radius: 24px; overflow: hidden; box-shadow: 0 8px 0 var(--ink); background: #fff4dc; }
.cell { position: relative; background: #fff4dc; min-width: 0; }
.cell.d { background: #a9dba4; }
.cell::after, .cell::before { content: ""; position: absolute; pointer-events: none; }
.cell.target::after { inset: 27%; border-radius: 50%; background: radial-gradient(circle, #fff7b0, #ffd23f 60%, rgba(255, 210, 63, 0) 72%); animation: glow 1.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 80ms); }
.cell.cap::after { inset: 10%; border-radius: 50%; border: 5px solid #ff7a45; box-shadow: 0 0 0 4px rgba(255,122,69,.25); animation: glow 1s ease-in-out infinite; }
.cell.danger::before { inset: 0; background: repeating-linear-gradient(45deg, rgba(239, 71, 111, .2) 0 8px, rgba(239, 71, 111, .08) 8px 16px); }
.cell.way::before { inset: 4px; border-radius: 12px; border: 3px dashed rgba(42,31,26,.45); }
.cell.lit { background: #ffe680; } .cell.lit.d { background: #f3d34f; }
.cell.lit-lane { background: #ffd966; } .cell.lit-lane.d { background: #f0c330; }
.cell.lit-ladder { background: #a6dcf5; } .cell.lit-ladder.d { background: #77c3e8; }
.cell.trail::after { inset: 38%; border-radius: 50%; background: rgba(124, 92, 255, .45); }
.layer { position: absolute; inset: 4px; pointer-events: none; }
.tok, .item { position: absolute; left: 0; top: 0; width: calc(100% / var(--n)); height: calc(100% / var(--n)); }
.tok-hop, .tok-sq, .tok-idle, .item-in { width: 100%; height: 100%; display: grid; grid-template: 100% / 100%; place-items: center; }
.tok-sq { transform-origin: 50% 88%; }
.tok .char { width: 86%; }
.tok.enemy .char { width: 78%; }
.tok-shadow { position: absolute; left: 22%; right: 22%; bottom: 5%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(42,31,26,.35), rgba(42,31,26,0)); opacity: .35; transition: transform .25s, opacity .25s; }
.tok.lifted .tok-shadow { transform: scale(.6); opacity: .18; }
.tok.lifted .char { filter: drop-shadow(0 6px 0 rgba(255, 210, 63, .9)); }
.tok.shine .char { filter: drop-shadow(0 0 8px #ffe680) drop-shadow(0 0 2px #ffd23f); animation: breathe 1.4s ease-in-out infinite; }
.tok.scared .char { animation: shiver .25s linear infinite; }
@keyframes shiver { 50% { transform: translateX(1.5%) rotate(1deg); } }
.item .apple { width: 60%; animation: bob 2.4s ease-in-out infinite; }
.item .bush { width: 82%; }
.item .house, .item .star { width: 62%; }
.ghost svg { width: 74cqw; max-width: 100%; display: block; }
.ghost-tok .tok-idle { animation: bob 1.4s ease-in-out infinite; }
.ghost { width: 78%; display: block; }
.ghost svg { width: 100%; }
.handf { position: absolute; left: 0; top: 0; width: clamp(56px, 13cqw, 84px); pointer-events: none; z-index: 5; opacity: 0; transition: transform .7s cubic-bezier(.3,1.25,.5,1), opacity .3s; }
.handf .hand { margin: -6px 0 0 -26%; }
.handf.on { opacity: 1; }
.handf.tap .hand { animation: press .6s ease-in-out; }
@keyframes press { 40% { transform: translate(-4px, -6px) scale(.86); } }
.hand-pt { position: fixed; left: 0; top: 0; width: 76px; z-index: 55; pointer-events: none; }
.hand-pt > span { display: block; }
.hand-pt .hand { animation: tapme 1.2s ease-in-out infinite; }
@keyframes tapme { 0%, 100% { transform: translate(0, 0); } 45%, 55% { transform: translate(-6px, -9px) scale(.9); } }
.flystar { position: fixed; left: -22px; top: -22px; width: 44px; height: 44px; z-index: 58; color: var(--sun); pointer-events: none; }
.flystar .ki { width: 100%; height: 100%; stroke: var(--ink); stroke-width: 1.3; }
.who-opts { display: flex; gap: 18px; justify-content: center; }
.who-card { width: 112px; height: 112px; border-radius: 30px; display: grid; place-items: center; background: #fff; border: 4px solid var(--ink); box-shadow: 0 7px 0 var(--ink); }
.who-card .char { width: 78%; }
.who-card.right { background: var(--mint); }
.who-card.nope { background: #ffe3dc; }
.bwrap.war .cell:not(.d) { background: #fff4dc; }

/* ---------- Награда ---------- */
.scr-reward { background: #ffe7b3; }
.rw-main { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 0 16px 120px; overflow: hidden; }
.rays { position: absolute; left: 50%; top: 42%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,255,255,.55) 0 10deg, rgba(255,255,255,0) 10deg 20deg); animation: spin 40s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 58%); mask: radial-gradient(circle, #000 18%, transparent 58%); }
@keyframes spin { to { transform: rotate(360deg); } }
.rw-stars { position: relative; display: flex; gap: 10px; align-items: flex-end; }
.rw-stars span { width: 66px; height: 66px; color: var(--sun); display: block; }
.rw-stars span:nth-child(2) { width: 86px; height: 86px; margin-bottom: 12px; }
.rw-stars .ki { width: 100%; height: 100%; stroke: var(--ink); stroke-width: 1.2; }
.sticker { position: relative; display: grid; place-items: center; }
.sticker > * { filter: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 8px 10px rgba(42,31,26,.28)); }
.big-sticker { width: 220px; height: 220px; rotate: -6deg; }
.big-sticker > * { width: 100%; height: 100%; }
.big-sticker .char { width: 100%; }
.big-sticker.new::after { content: ""; position: absolute; inset: -10%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.85) 50%, transparent 58%); background-size: 260% 100%; animation: shine 2.6s ease-in-out 1.4s infinite; pointer-events: none; mix-blend-mode: soft-light; border-radius: 30%; }
@keyframes shine { from { background-position: 160% 0; } to { background-position: -110% 0; } }
.rw-actions { position: relative; display: flex; align-items: center; gap: 24px; }

/* ---------- Альбом ---------- */
.scr-album { background: #f7e6c4; overflow-y: auto; }
.al-main { flex: 1; display: flex; justify-content: center; padding: 6px 16px 150px; }
.page { width: min(100%, 760px); align-self: flex-start; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px; border-radius: 28px; background: #fffaf0; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink);
  background-image: radial-gradient(rgba(42,31,26,.06) 1.5px, transparent 1.5px); background-size: 18px 18px; }
.aslot { aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; border: 3px dashed rgba(42,31,26,.28); background: rgba(255,255,255,.5); min-height: 64px; }
.aslot.got { border: 3px solid transparent; background: #fff3d6; }
.aslot .sticker, .aslot .shadow { width: 74%; aspect-ratio: 1; display: grid; place-items: center; }
.aslot .sticker > *, .aslot .shadow > * { width: 100%; height: 100%; }
.aslot.got:nth-child(odd) .sticker { rotate: -5deg; } .aslot.got:nth-child(even) .sticker { rotate: 4deg; }
.shadow > * { filter: brightness(0) opacity(.12); }
.shadow .face { display: none; }
.shadow.gift { font: 400 clamp(34px, 7vw, 64px)/1 var(--font-h); color: rgba(124, 92, 255, .35); } /* наклейка-сюрприз: заранее не показываем */

/* ---------- Сон ---------- */
.scr-sleep { background: linear-gradient(#1d2357, #3a3f86 60%, #5b5fa8); color: #fff; }
.stars-bg i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff6c8; scale: var(--s); animation: twinkle var(--d) ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.5); } }
.moon { position: absolute; right: 12%; top: 10%; width: 110px; height: 110px; border-radius: 50%; box-shadow: -26px 10px 0 0 #ffe680; rotate: -20deg; animation: bob 6s ease-in-out infinite; }
.sl-main { flex: 1; display: grid; place-items: end center; padding-bottom: 14vh; }
.bed { position: relative; width: 300px; height: 190px; }
.bed::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; border-radius: 20px; background: #8a5a3c; border: 4px solid var(--ink); }
.bed::after { content: ""; position: absolute; left: 14px; bottom: 54px; width: 70px; height: 46px; border-radius: 22px; background: #fff; border: 3px solid var(--ink); }
.sleeper { position: absolute; left: 110px; bottom: 50px; width: 110px; transition: transform 1.4s cubic-bezier(.5,0,.3,1.2); transform-origin: 50% 90%; z-index: 1; }
.sleeper.lying { transform: translate(-70px, 34px) rotate(-82deg); }
.blanket { position: absolute; left: 70px; right: 12px; bottom: 40px; height: 64px; border-radius: 30px 30px 14px 14px; background: repeating-linear-gradient(90deg, #ff9ec4 0 20px, #ffc2dc 20px 40px); border: 4px solid var(--ink); z-index: 2; transform-origin: 50% 100%;
  transform: translateY(46px) scaleY(.45); transition: transform .9s cubic-bezier(.3,1.5,.5,1); }
.blanket.tucked { transform: none; animation: breathe 4.5s ease-in-out 1s infinite; }
.bwrap.duo[data-turn="w"] .board { box-shadow: 0 8px 0 var(--ink), 0 14px 0 6px rgba(255, 210, 63, .7); }
.bwrap.duo[data-turn="b"] .board { box-shadow: 0 8px 0 var(--ink), 0 -10px 0 6px rgba(63, 167, 214, .6); }

/* ---------- Родителям (взрослый интерфейс, обычный текст) ---------- */
.scr-parent { background: #f6f2ea; font-family: var(--font-b); font-weight: 600; color: #2a2a2a; overflow-y: auto; -webkit-user-select: text; user-select: text; display: block; }
.p-top { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; height: 64px; padding: 0 10px; background: rgba(246,242,234,.94); border-bottom: 1px solid #e6dfd1; }
.p-top h1 { text-align: center; font: 800 19px/1 var(--font-b); }
.p-back { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; } .p-back .ki { width: 26px; height: 26px; }
.p-main { width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 14px 60px; display: grid; gap: 14px; }
.p-card { background: #fff; border: 1px solid #ebe4d6; border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.p-card h2 { font: 800 17px/1.2 var(--font-b); }
.p-sub { font: 800 14px/1.2 var(--font-b); color: #6b6458; }
.p-profiles { display: grid; gap: 10px; }
.p-prof { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 6px; border-radius: 14px; border: 2px solid transparent; }
.p-prof.cur { border-color: #3fa45b; background: #f1faf2; }
.p-av { width: 56px; height: 56px; border-radius: 16px; background: #f4efe4; padding: 8px; } .p-av .av { width: 100%; height: 100%; }
.p-name { height: 48px; width: 100%; min-width: 0; border-radius: 12px; border: 1.5px solid #ddd5c6; padding: 0 12px; font: 700 17px var(--font-b); background: #fff; color: inherit; }
.p-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #a0533f; } .p-icon .ki { width: 22px; height: 22px; }
.p-avs { display: flex; flex-wrap: wrap; gap: 8px; }
.p-avpick { width: 56px; height: 56px; border-radius: 16px; background: #f4efe4; padding: 9px; border: 2px solid transparent; } .p-avpick .av { width: 100%; height: 100%; }
.p-avpick.on { border-color: #3fa45b; background: #e4f5e6; }
.p-note, .p-sleep p { font-size: 14px; line-height: 1.45; color: #5b5448; font-weight: 600; }
.p-btn { min-height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; background: #f1ebdf; font: 800 15px/1.1 var(--font-b); }
.p-btn .ki { width: 20px; height: 20px; }
.p-btn.ghost { background: none; border: 1.5px solid #e2d9c8; color: #8a5a3c; }
.p-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.p-lessons { list-style: none; padding: 0; display: grid; gap: 6px; }
.p-lessons li { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: #f8f4ec; font-size: 15px; }
.p-lessons li.done { background: #e9f6ea; } .p-lessons li.locked { color: #9a917f; }
.p-stats { display: flex; justify-content: space-between; font-size: 14px; color: #6b6458; gap: 8px; flex-wrap: wrap; }
.p-stats b { color: #2a2a2a; font-size: 18px; margin-right: 2px; }
.p-week { position: relative; height: 130px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; padding-top: 6px; }
.p-day { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.p-day i { width: 100%; max-width: 32px; border-radius: 8px 8px 4px 4px; background: #9fd3a0; max-height: calc(100% - 20px); }
.p-day small { font-size: 12px; color: #8a8273; height: 16px; }
.p-limit { position: absolute; left: 0; right: 0; border-top: 2px dashed #ff7a45; pointer-events: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #f1ebdf; }
.seg-b { min-height: 46px; border-radius: 9px; font: 800 14px/1.15 var(--font-b); color: #5b5448; padding: 0 4px; }
.seg-b.on { background: #fff; color: #2a2a2a; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.p-sleep { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: #eef1fb; }
.p-switch { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 16px; }
.p-switch input { appearance: none; -webkit-appearance: none; width: 54px; height: 32px; border-radius: 99px; background: #d9d2c4; position: relative; margin: 0; cursor: pointer; transition: background .2s; flex: none; }
.p-switch input::before { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.p-switch input:checked { background: #3fa45b; } .p-switch input:checked::before { transform: translateX(22px); }
.p-list { padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: #5b5448; }
.gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(40, 30, 20, .6); }
.gate-card { width: min(100%, 380px); padding: 24px 20px; border-radius: 22px; background: #fff; text-align: center; display: grid; gap: 12px; justify-items: center; }
.gate-card h2 { font: 800 22px/1.2 var(--font-b); } .gate-card p { font-size: 15px; color: #5b5448; }
.hold { position: relative; width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; background: #f1ebdf; touch-action: none; }
.hold svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hold circle { fill: none; stroke-width: 3; } .hold .t { stroke: #e3dccd; } .hold .v { stroke: var(--teal); stroke-linecap: round; }
.or b { color: #2a2a2a; }
.gate-opts { display: flex; gap: 10px; }
.opt { width: 66px; height: 56px; border-radius: 12px; background: #f1ebdf; font: 800 20px/1 var(--font-b); }
.opt.no { background: #fbe3e0; }
.gate-close { min-height: 44px; padding: 0 12px; font: 700 14px/1 var(--font-b); color: #8a8273; text-decoration: underline; }

/* ---------- Планшет (главный) и ноутбук ---------- */
@media (min-width: 700px) {
  :root { --top: 100px; }
  .top { padding: 0 24px; gap: 14px; }
  .rb { width: 72px; height: 72px; } .rb .ki { width: 36px; height: 36px; }
  .title { font-size: 72px; } .splash-hero { width: 210px; } .bigplay { width: 150px; height: 150px; } .bigplay .ki { width: 72px; height: 72px; }
  .castle { width: 420px; }
  .node-row { transform: translateX(calc(var(--x) * 1.7)); }
  .node { width: 132px; height: 132px; } .node .char { width: 94px; }
  .node.current, .node.open { width: 152px; height: 152px; } .node.current .char { width: 110px; }
  .duo .char { width: 70px; }
  .guide { width: 84px; margin: -58px 0 0 -42px; }
  .coach-hero { width: 132px; height: 132px; }
  .bubble { font-size: 21px; margin-bottom: 76px; }
  .gslot { width: 72px; height: 72px; } .gslot .apple { width: 50px; }
  .big-hero .bh { width: 200px; }
  .who-card { width: 136px; height: 136px; }
  .prog i { width: 36px; height: 36px; }
  .big-sticker { width: 280px; height: 280px; }
  .page { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 28px; }
  .who-p { width: 180px; } .who-p .av { width: 170px; height: 170px; }
  .bwrap { --bs: min(88vw, 660px, calc(100dvh - var(--top) - 230px)); }
}
@media (min-width: 1100px) {
  .p-main { max-width: 1040px; grid-template-columns: 1fr 1fr; align-items: start; }
  .bwrap.demo { --bs: min(46vw, 440px, calc(100dvh - var(--top) - 120px)); }
  .scr-lesson .stage:has(.big-slot:not(:empty)) { flex-direction: row; gap: 48px; }
}
@media (max-width: 480px) {
  .top { gap: 6px; padding: 0 8px; }
  .rb { width: 56px; height: 56px; } .rb .ki { width: 28px; height: 28px; }
  .prog { gap: 2px; } .prog i { width: 22px; height: 22px; }
  .sun { width: 70px; height: 70px; right: 5%; top: 4%; }
}
@media (min-width: 700px) { .bed { scale: 1.4; transform-origin: 50% 100%; } }
/* Телефон: пузырь с текстом прячем в игре, чтобы не закрывал доску */
@media (max-width: 600px) and (max-height: 900px) {
  .scr-lesson .bubble { display: none; }
  .scr-lesson .coach-hero { width: 76px; height: 76px; }
  .bwrap.demo { --bs: min(78vw, 330px, calc(100dvh - var(--top) - 330px)); }
  .big-hero .bh { width: 120px; }
  .title { font-size: 42px; }
}
/* Низкие экраны (ноутбук, планшет боком) */
@media (max-height: 700px) and (min-width: 700px) {
  .scr-lesson .stage:has(.big-slot:not(:empty)) { flex-direction: row; gap: 40px; }
  .bwrap.demo { --bs: min(46vw, 420px, calc(100dvh - var(--top) - 80px)); }
}

/* ---------- Уменьшение движения ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .face .eyes-open { animation: none !important; }
}