/* Layout: одна колонка под телефон, сверху полоска прогресса, героиня с репликой, ниже задание, снизу большая кнопка. Цвета — голубое небо и золотое солнце флага Казахстана. */
:root{
  --bg:#EAF6F9; --surface:#FFFFFF; --ink:#16324A; --muted:#58748A; --line:#CFE3EA;
  --sky:#0B93B3; --sky-deep:#07708A; --sun:#F6B40E; --sun-deep:#C98F00; --halo:#FFF6D6;
  --good:#2C9F55; --good-ink:#1E7A3F; --good-bg:#E3F6EA; --bad:#D9483F; --bad-ink:#B3362E; --bad-bg:#FDE9E7;
  --chip-can:#22804A; --chip-must:#07708A; --chip-fine:#B55A0C; --on-sun:#2A2200;
  --font-display:"Unbounded","Nunito",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1C26; --surface:#162A37; --ink:#EAF4F8; --muted:#9DB5C4; --line:#24404F;
  --sky:#23B5D6; --sky-deep:#137F99; --sun:#FFC83D; --sun-deep:#C9930F; --halo:#24404F;
  --good:#4CC777; --good-ink:#7BE0A0; --good-bg:#183A27; --bad:#FF7A70; --bad-ink:#FF9A92; --bad-bg:#40221F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1C26; --surface:#162A37; --ink:#EAF4F8; --muted:#9DB5C4; --line:#24404F;
  --sky:#23B5D6; --sky-deep:#137F99; --sun:#FFC83D; --sun-deep:#C9930F; --halo:#24404F;
  --good:#4CC777; --good-ink:#7BE0A0; --good-bg:#183A27; --bad:#FF7A70; --bad-ink:#FF9A92; --bad-bg:#40221F; color-scheme:dark}

/* цвет книжки (data-palette) — на <html> и на любом элементе (превью в выборе цвета); светлая и тёмная тема.
   Проверка контраста — tests/unit/contrast_test.js */
[data-palette="sea"]{--bg:#EAF6F9; --surface:#FFFFFF; --line:#CFE3EA; --sky:#0B93B3; --sky-deep:#07708A; --sun:#F6B40E; --sun-deep:#C98F00; --halo:#FFF6D6}
[data-palette="sunny"]{--bg:#FFF7E0; --surface:#FFFFFF; --line:#FBE3A6; --sky:#E8740C; --sky-deep:#A9520A; --sun:#FFC83D; --sun-deep:#C98F00; --halo:#FFF0C2}
[data-palette="berry"]{--bg:#FDEBF3; --surface:#FFFFFF; --line:#F6C6DA; --sky:#D63A73; --sky-deep:#A8275A; --sun:#FFB84D; --sun-deep:#C9830F; --halo:#FFE9F2}
[data-palette="forest"]{--bg:#EAF7E8; --surface:#FFFFFF; --line:#C6E8C0; --sky:#2F9450; --sky-deep:#1F6B37; --sun:#FFC83D; --sun-deep:#C9930F; --halo:#F3FBE3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-palette="sea"],:root:not([data-theme="light"]) [data-palette="sea"]{--bg:#0E1C26; --surface:#162A37; --line:#24404F; --sky:#23B5D6; --sky-deep:#137F99; --sun:#FFC83D; --sun-deep:#C9930F; --halo:#24404F}}
:root[data-theme="dark"][data-palette="sea"],:root[data-theme="dark"] [data-palette="sea"]{--bg:#0E1C26; --surface:#162A37; --line:#24404F; --sky:#23B5D6; --sky-deep:#137F99; --sun:#FFC83D; --sun-deep:#C9930F; --halo:#24404F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-palette="sunny"],:root:not([data-theme="light"]) [data-palette="sunny"]{--bg:#1E160A; --surface:#2B200F; --line:#4A3718; --sky:#FF9A3D; --sky-deep:#B5560C; --sun:#FFC83D; --sun-deep:#C9930F; --halo:#4A3718}}
:root[data-theme="dark"][data-palette="sunny"],:root[data-theme="dark"] [data-palette="sunny"]{--bg:#1E160A; --surface:#2B200F; --line:#4A3718; --sky:#FF9A3D; --sky-deep:#B5560C; --sun:#FFC83D; --sun-deep:#C9930F; --halo:#4A3718}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-palette="berry"],:root:not([data-theme="light"]) [data-palette="berry"]{--bg:#1F0F17; --surface:#2E1722; --line:#4D2639; --sky:#FF6FA3; --sky-deep:#B02A5F; --sun:#FFB84D; --sun-deep:#C9830F; --halo:#4D2639}}
:root[data-theme="dark"][data-palette="berry"],:root[data-theme="dark"] [data-palette="berry"]{--bg:#1F0F17; --surface:#2E1722; --line:#4D2639; --sky:#FF6FA3; --sky-deep:#B02A5F; --sun:#FFB84D; --sun-deep:#C9830F; --halo:#4D2639}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-palette="forest"],:root:not([data-theme="light"]) [data-palette="forest"]{--bg:#0D1C12; --surface:#15291C; --line:#24452F; --sky:#4CC777; --sky-deep:#1F7A3E; --sun:#FFC83D; --sun-deep:#C9930F; --halo:#24452F}}
:root[data-theme="dark"][data-palette="forest"],:root[data-theme="dark"] [data-palette="forest"]{--bg:#0D1C12; --surface:#15291C; --line:#24452F; --sky:#4CC777; --sky-deep:#1F7A3E; --sun:#FFC83D; --sun-deep:#C9930F; --halo:#24452F}

/* обёртка страницы (раньше её добавлял артефакт) */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

html,body{height:100%}
body{background:var(--bg);background-image:radial-gradient(var(--line) 1.3px,transparent 1.5px);background-size:22px 22px;background-attachment:fixed;color:var(--ink);font-family:var(--font-body);font-size:19px;line-height:1.4;font-weight:600;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button{touch-action:manipulation}
.app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* верхняя панель */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);background-image:radial-gradient(var(--line) 1.3px,transparent 1.5px);background-size:22px 22px;background-attachment:fixed;display:flex;align-items:center;gap:12px;padding-block:12px 8px}
.icon-btn{flex:none;width:44px;height:44px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--ink);
  font:800 20px/1 var(--font-body);display:grid;place-items:center;cursor:pointer}
.icon-btn:disabled{opacity:.35;cursor:default}
.bar{flex:1;height:14px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--sun);transition:width .4s ease}

/* экран */
.stage{flex:1;display:flex;flex-direction:column;gap:18px;padding-block:8px 16px}
.stage.enter{animation:enter .35s ease-out}
@keyframes enter{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}

.hero-row{display:flex;align-items:flex-end;gap:10px}
.hero-box{display:block;flex:none;width:118px;height:118px;border-radius:50%;background:var(--halo)}
.hero-box.big{width:150px;height:150px}
.hero-box.small{width:84px;height:84px}
.bubble{position:relative;flex:1;min-width:0;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:22px;font-size:19px}
.bubble::before{content:"";position:absolute;left:-10px;bottom:18px;width:16px;height:16px;background:var(--surface);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.bubble b{color:var(--sky)}
.bubble.alt{border-color:var(--sun);margin-bottom:0}
.bubble.alt::before{display:none}
.bubble:focus,h1:focus{outline:none}

h1{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.2;margin:0;text-wrap:balance}
.task{font-weight:800;font-size:18px;color:var(--muted);margin:0}

/* кнопки */
.btn{appearance:none;border:0;border-radius:16px;padding:16px 18px;font:800 19px/1.2 var(--font-body);cursor:pointer;color:#fff;background:var(--sky-deep);
  box-shadow:0 5px 0 color-mix(in srgb,var(--sky-deep) 70%,#000);transition:transform .08s,box-shadow .08s;width:100%}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 transparent}
.btn:disabled{background:var(--line);box-shadow:0 5px 0 var(--line);color:var(--muted);cursor:default;transform:none}
.btn.sun{background:var(--sun);box-shadow:0 5px 0 var(--sun-deep);color:var(--on-sun)}
.btn.inline{margin-top:4px}
.btn:focus-visible,.opt:focus-visible,.icon-btn:focus-visible,.card:focus-visible,.tile:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.foot{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding-top:18px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
.foot>*{pointer-events:auto}

.opts{display:grid;gap:12px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{appearance:none;text-align:left;border:2px solid var(--line);border-bottom-width:5px;border-radius:var(--r);background:var(--surface);color:var(--ink);
  padding:14px;font:700 18px/1.3 var(--font-body);cursor:pointer;display:flex;align-items:center;gap:12px;min-width:0}
.opt .em{font-size:30px;line-height:1;flex:none}
.opt.sel{border-color:var(--sky);background:var(--halo);background:color-mix(in srgb,var(--sky) 12%,var(--surface))}
.opt.ok{border-color:var(--good);background:var(--good-bg)}
.opt.no{border-color:var(--bad);background:var(--bad-bg);animation:nudge .35s}
.opt.done{opacity:.45;cursor:default}
.opt:disabled{cursor:default}
@keyframes nudge{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* выбор героини */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick .opt{flex-direction:column;text-align:center;gap:4px;padding:10px 8px 12px}
.pick .nm{font-family:var(--font-display);font-size:18px}
.pick .an{font-size:14px;color:var(--muted);font-weight:700}

/* правила игры */
.rules{display:grid;gap:10px}
.rule{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border-radius:var(--r);padding:12px 14px;border:2px solid var(--line)}
.chip{flex:none;font:800 13px/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:#fff;border-radius:99px;padding:7px 10px;margin-top:2px}
.chip.can{background:var(--chip-can)}.chip.must{background:var(--chip-must)}.chip.fine{background:var(--chip-fine)}

/* карточки-перевёртыши */
.cards{display:grid;gap:12px}
.card{position:relative;display:block;border:0;padding:0;background:none;cursor:pointer;perspective:900px;min-height:150px;text-align:left;font:inherit;color:inherit;width:100%}
.card .in{position:relative;display:grid;min-height:150px;transition:transform .5s;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.card.flip .in{transform:rotateY(180deg)}
.face{grid-area:1/1;border-radius:var(--r);padding:14px 16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;gap:6px;justify-content:center}
.front{background:var(--surface);border:2px solid var(--line);border-bottom-width:5px;transform:rotateY(0deg)}
.back{background:var(--halo);border:2px solid var(--sun);border-bottom-width:5px;transform:rotateY(180deg)}
.lbl{font:800 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.word{font-family:var(--font-display);font-size:21px;line-height:1.15;display:flex;align-items:center;gap:10px}
.word .em{font-size:30px}
.hint{font-size:14px;color:var(--muted);font-weight:700}
.def{font-size:17px;font-weight:700}
.ex{font-size:15px;color:var(--muted);font-weight:700}

/* пары */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.col{display:grid;gap:10px}
.col h3{margin:0;font:800 13px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pairs .opt{font-size:16px;padding:10px;gap:8px}
.pairs .opt .em{font-size:24px}
.made{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.made li{background:var(--good-bg);border-radius:14px;padding:10px 12px;font-size:16px;font-weight:700}

/* хочу или положено */
.item{background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:22px 16px;text-align:center;display:grid;gap:6px;justify-items:center}
.item .em{font-size:64px;line-height:1}
.item .nm{font-family:var(--font-display);font-size:22px}
.item.compact{padding:12px 14px;grid-auto-flow:column;justify-content:center;align-items:center;gap:12px}
.item.compact .em{font-size:40px}
.item.compact .nm{font-size:19px}
.count{font-size:15px;color:var(--muted);font-weight:800;text-align:center}
.feedback{border-radius:16px;padding:12px 14px;font-weight:800;font-size:18px}
.feedback.ok{background:var(--good-bg);color:var(--good-ink)}
.feedback.no{background:var(--bad-bg);color:var(--bad-ink)}
.feedback.hint{background:var(--halo);color:var(--ink)}

/* история */
.story{display:grid;gap:10px}
.panel{display:flex;gap:14px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:12px 14px;animation:enter .35s ease-out}
.panel .em{font-size:40px;line-height:1;flex:none}
.rule-big{background:var(--sun);color:var(--on-sun);border-radius:var(--r);padding:16px;font-family:var(--font-display);font-size:20px;line-height:1.25;text-align:center}

/* незнайка */
.duo{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--line)}
.dots i.ok{background:var(--good)}.dots i.cur{background:var(--sun)}
.say{background:var(--surface);border:3px solid var(--sun);border-radius:22px;padding:16px;font-size:20px;font-weight:800;text-align:center}

/* пересказ */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{appearance:none;border:2px solid var(--line);border-bottom-width:5px;border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer;
  min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;font:700 15px/1.25 var(--font-body);text-align:center;min-width:0}
.tile.wide{grid-column:1/-1;flex-direction:row;min-height:80px}
.tile .n{font:700 12px/1 var(--font-display);color:var(--muted)}
.tile .em{font-size:40px;line-height:1}
.tile.open{background:var(--halo);border-color:var(--sun)}
.tile.open .em{font-size:28px}
.tile .hl{font-weight:800;overflow-wrap:anywhere}
.adult{border:2px dashed var(--line);border-radius:var(--r);padding:12px 14px;font-size:15px;color:var(--muted);font-weight:700;display:grid;gap:8px}
.adult b{color:var(--ink)}
.adult summary{cursor:pointer;color:var(--ink);font-weight:800}
.adult p{margin:8px 0 0}

/* диплом */
.diploma{background:var(--surface);border:3px solid var(--sun);border-radius:26px;padding:20px 18px 22px;text-align:center;display:grid;gap:8px;justify-items:center;
  background-image:radial-gradient(circle at 50% 0,var(--halo),transparent 70%)}
.diploma .kicker{font:800 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.diploma .who{font-family:var(--font-display);font-size:34px;line-height:1.1}
.diploma .what{font-size:18px;font-weight:800;max-width:30ch}
.diploma ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;text-align:left}
.diploma li{font-size:16px;font-weight:700}
.diploma .date{font-size:14px;color:var(--muted);font-weight:700}

/* низкий экран (iPhone SE): у Незнайки кнопки «Верно/Ошибка» первого утверждения уходили за край */
@media (max-height:640px){.duo .hero-box.big{width:84px;height:84px}.duo .hero-box.small{width:60px;height:60px}.opts{gap:8px}.opt{padding:9px 12px}.opt .em{font-size:24px}.item.compact{padding:8px 12px}.item.compact .em{font-size:32px}}
@media (max-width:380px){body{font-size:18px}.hero-box{width:96px;height:96px}.pick .hero-box{width:100px;height:100px}.bubble{font-size:17px}h1{font-size:21px}}
@media (prefers-reduced-motion:reduce){.stage.enter,.panel,.opt.no{animation:none}.card .in{transition:none}}

/* карта книжки: героиня и счётчик сверху, темы по порядку, в каждой — карточки уроков */
.stage.map{padding-block:16px 24px;gap:22px}
.meter{display:grid;gap:6px}
.meter .txt{font-weight:800;font-size:16px;color:var(--muted);font-variant-numeric:tabular-nums}
.meter .track{height:12px;border-radius:99px;background:var(--line);overflow:hidden}
.meter .track i{display:block;height:100%;border-radius:99px;background:var(--good)}
.topic{display:grid;gap:10px}
.topic h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.2;text-wrap:balance}
.topic .tn{display:block;margin-bottom:6px;font:800 12px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lcard{appearance:none;display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:2px solid var(--line);border-bottom-width:5px;border-radius:var(--r);background:var(--surface);color:var(--ink);padding:12px 14px;font:700 17px/1.25 var(--font-body)}
.lcard .num{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:var(--on-sun);font:700 16px/1 var(--font-display)}
.lcard .t{flex:1;min-width:0;display:grid;gap:3px}
.lcard .st{font-size:13px;font-weight:800;color:var(--muted)}
.lcard.prog{border-color:var(--sun)}
.lcard.prog .num{background:var(--sky-deep);color:#fff}
.lcard.done{border-color:var(--good)}
.lcard.done .num{background:var(--good);color:#fff;font-size:22px}
.lcard.done .st{color:var(--good-ink)}
.lcard.review .num{background:var(--halo);font-size:22px}
.lcard.review.done .num{background:var(--good)}
.lcard.soon{cursor:default;background:transparent;border-style:dashed;border-bottom-width:2px;padding:8px 14px;font-size:15px;color:var(--muted)}
.lcard.soon .num{width:34px;height:34px;border-radius:11px;background:var(--line);color:var(--muted);font-size:14px}
.lcard.soon.review .num{font-size:17px}
.lcard:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.btn.ghost{background:var(--surface);color:var(--ink);border:2px solid var(--line);box-shadow:0 5px 0 var(--line)}

/* вход и профили детей */
.field{width:100%;box-sizing:border-box;font:700 18px/1.3 var(--font-body);padding:14px 16px;color:var(--ink);background:var(--surface);
  border:2px solid var(--line);border-radius:var(--r);appearance:none}
.field:focus{outline:3px solid var(--sun);outline-offset:2px;border-color:var(--sky)}
.kid-row{display:flex;gap:10px;align-items:stretch}
.kid-row .opt{flex:1}
.kid-row .nm{font-family:var(--font-display);font-size:18px}
.btn.small{width:auto;flex:none;padding:10px 14px;font-size:16px}
.btn.danger{border-color:var(--bad);color:var(--bad-ink)}
.swatch{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 2px var(--line);background:linear-gradient(135deg,var(--sky-deep) 50%,var(--sun) 50%)}
.opt.age{justify-content:center;font:700 22px/1 var(--font-display);padding:16px}
.meter .saving{font-size:14px;font-weight:700;color:var(--muted)}
.bubble .mail{overflow-wrap:anywhere}

/* карта: смена героя, ряд героев, значки тем, сертификаты (шаги 9–13) */
.kicker-book{font:800 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.topic-head{display:flex;align-items:flex-start;gap:8px}
.topic-head h2{flex:1;min-width:0;background:var(--sky-deep);color:#fff;border-radius:14px;padding:10px 12px}
.topic-head .tn{color:#fff;opacity:.85}
.badges{flex:none;display:flex;gap:2px;padding-top:6px}
.badge{appearance:none;border:0;background:none;font-size:22px;line-height:1;padding:3px;cursor:pointer;filter:grayscale(1);opacity:.35}
.badge.earned{filter:none;opacity:1}
.badge.new{animation:badge-pop 1s ease-in-out}
@keyframes badge-pop{0%,100%{transform:scale(1)}30%{transform:scale(1.6) rotate(-10deg)}60%{transform:scale(1.2) rotate(8deg)}}
.cert-btn{justify-self:start}
.certificate .masters{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;font-size:14px;font-weight:800}
.cert-foot{display:grid;gap:10px}
.stage.form{gap:14px}
@media (max-height:640px){.diploma{padding:12px 14px 14px;gap:4px}.diploma .hero-box.big{width:84px;height:84px}.diploma .who{font-size:26px}
  .diploma li{font-size:15px}.diploma ul{gap:3px;margin-top:2px}.diploma .what{font-size:16px}}
@media (prefers-reduced-motion:reduce){.badge.new{animation:none}}
@media print{
  @page{size:A4;margin:15mm}
  body{background:#fff!important;background-image:none!important}
  .top,.foot,.cert-foot{display:none!important}
  .app{max-width:none;padding:0}
  .stage.enter{animation:none}
  .certificate{break-inside:avoid;border-color:#F6B40E}
}
/* фидбек 2026-10-18: кнопки под пузырём крупные, «Сменить ребёнка» наверху, превью палитр */
.map-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pal-card{appearance:none;display:grid;gap:10px;text-align:left;padding:12px;border-radius:var(--r);cursor:pointer;color:var(--ink);
  border:2px solid var(--line);border-bottom-width:5px;background:var(--bg);background-image:radial-gradient(var(--line) 1.3px,transparent 1.5px);background-size:12px 12px}
.pal-card.sel{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky)}
.pal-card .pal-plaque{background:var(--sky-deep);color:#fff;border-radius:9px;padding:7px 9px;font:700 13px/1.1 var(--font-display)}
.pal-card .pal-row{display:flex;align-items:center;gap:6px}
.pal-card .pal-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--font-display)}
.pal-card .pal-dot.sun{background:var(--sun);color:var(--on-sun)}.pal-card .pal-dot.ok{background:var(--good);color:#fff}
.pal-card .pal-name{font:800 17px/1.2 var(--font-body)}
/* экраны входа: большой герой сверху, текст под ним, поле и кнопки внизу */
.stage.full{min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));box-sizing:border-box;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.guide-top{display:grid;justify-items:center;gap:18px;padding-top:24px}
.hero-box.xl{width:min(220px,56vw);height:min(220px,56vw)}
.bubble.up{margin-bottom:0;text-align:center;width:100%;box-sizing:border-box}
.bubble.up::before{left:50%;top:-10px;bottom:auto;margin-left:-8px;transform:rotate(135deg)}
.opts.bottom{margin-top:auto}
@media (max-height:640px){.hero-box.xl{width:150px;height:150px}.guide-top{padding-top:8px;gap:14px}}
/* карта: «Сменить друга | Цвет книжки» под героем; прогресс героя — на экране выбора */
.map-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:-6px}
.map-actions .btn{padding:14px 10px;font-size:17px}
.switch-intro{align-self:flex-end}
.pick .hp{display:grid;gap:4px;width:100%;margin-top:4px}
.pick .hp-txt{font-size:13px;color:var(--muted);font-weight:800}
.pick .hp-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.pick .hp-bar i{display:block;height:100%;border-radius:99px;background:var(--good)}
@media (max-width:380px){.map-actions .btn{font-size:16px;padding:14px 6px}}