/* Стили из prototype/heroes.html (строки 9-236) как есть. Новые экраны в конце файла. */

:root{
  --L:initial; --D: ;
  --f-b:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gold:#f2b53a; --xp:#35a866; --boss:#dd4459;
  --ink:var(--L,#1f2545) var(--D,#eef1ff);
  --soft:var(--L,#566090) var(--D,#aab3d8);
  /* мир по умолчанию: фэнтези */
  --sky:var(--L,#dcefd6) var(--D,#14211a);
  --panel:var(--L,#fffdf8) var(--D,#1f2f26);
  --well:var(--L,#eaf3e2) var(--D,#2a3e32);
  --pv:var(--L,#cfe7c8) var(--D,#3c5c49);
  --line:var(--L,#1f2545) var(--D,#6a9a7c);
  --shade:var(--L,#a5cf9c) var(--D,#0a120d);
  --magic:#7a4fd6; --accent-text:var(--L,#6a3fc6) var(--D,#c9b0ff);
  --f-d:"Balsamiq Sans","Golos Text",system-ui,sans-serif;
  --r:18px; --rs:11px; --rb:14px; --drop:9px; --ease:ease;
  --edge:0 -3px 0 0 var(--line),0 3px 0 0 var(--line),-3px 0 0 0 var(--line),3px 0 0 0 var(--line);
  --ring:0 0 0 2.5px var(--line);
  --box:0 0 0 2.5px var(--line),0 6px 0 2.5px var(--shade);
  --box-b:0 0 0 2.5px var(--line),0 5px 0 2.5px var(--shade);
  --box-a:0 0 0 2.5px var(--line),0 2px 0 2.5px var(--shade);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--L: ;--D:initial}
}
:root[data-theme="dark"]{--L: ;--D:initial}
:root[data-world="space"]{
  --sky:var(--L,#dfe5ff) var(--D,#0c1030);
  --panel:var(--L,#ffffff) var(--D,#171d4a);
  --well:var(--L,#e8ecff) var(--D,#222a66);
  --pv:var(--L,#cfd8ff) var(--D,#2c3684);
  --line:var(--L,#1f2545) var(--D,#4d62d6);
  --shade:var(--L,#b3bff5) var(--D,#060818);
  --glow:var(--L,rgba(42,109,240,.55)) var(--D,rgba(90,170,255,.8));
  --magic:#2a6df0; --accent-text:var(--L,#2458d0) var(--D,#7fd0ff);
  --f-d:"Exo 2","Golos Text",system-ui,sans-serif;
  --r:14px; --rs:9px; --rb:999px; --drop:6px;
  --ring:0 0 0 2px var(--line);
  --box:0 0 0 2px var(--line),0 10px 20px -10px var(--glow);
  --box-b:0 0 0 2px var(--line);
  --box-a:0 0 0 2px var(--line);
}
:root[data-world="block"]{
  --sky:var(--L,#cde7f5) var(--D,#12152d);
  --panel:var(--L,#fbfdff) var(--D,#1f2448);
  --well:var(--L,#e2edf8) var(--D,#2b3163);
  --pv:var(--L,#d6e8f6) var(--D,#3a4382);
  --line:var(--L,#1f2545) var(--D,#5560b4);
  --shade:var(--L,#9bb8d0) var(--D,#080a18);
  --magic:#2e8540; --accent-text:var(--L,#2b7a3a) var(--D,#8fe09a);
  --f-d:"Pixelify Sans","Golos Text",system-ui,sans-serif;
  --r:0px; --rs:0px; --rb:0px; --drop:7px; --ease:steps(10);
  --ring:var(--edge);
  --box:var(--edge),0 7px 0 0 var(--shade);
  --box-b:var(--edge),0 6px 0 0 var(--shade);
  --box-a:var(--edge),0 3px 0 0 var(--shade);
}
:root[data-world="nature"]{
  --sky:var(--L,#e4f2d6) var(--D,#152614);
  --panel:var(--L,#fffef6) var(--D,#21331f);
  --well:var(--L,#eef5df) var(--D,#2c4429);
  --pv:var(--L,#d8ecc4) var(--D,#3d5c38);
  --line:var(--L,#1f2545) var(--D,#7aa86c);
  --shade:var(--L,#b5d39a) var(--D,#0b140a);
  --magic:#2f8f58; --accent-text:var(--L,#22744a) var(--D,#9be0a8);
}
:root[data-world="ocean"]{
  --sky:var(--L,#d6eef8) var(--D,#0b1d2e);
  --panel:var(--L,#fbfeff) var(--D,#13304a);
  --well:var(--L,#e2f3fb) var(--D,#1b405f);
  --pv:var(--L,#bfe3f4) var(--D,#235478);
  --line:var(--L,#1f2545) var(--D,#4f9ccf);
  --shade:var(--L,#93c8e2) var(--D,#050e17);
  --magic:#1f7fb8; --accent-text:var(--L,#16699c) var(--D,#8fd4ff);
  --r:22px; --rb:999px;
}
:root[data-world="dino"]{
  --sky:var(--L,#f1e4cc) var(--D,#261c12);
  --panel:var(--L,#fffbf3) var(--D,#35281b);
  --well:var(--L,#f6ecd9) var(--D,#463624);
  --pv:var(--L,#e6d2ad) var(--D,#5c4730);
  --line:var(--L,#1f2545) var(--D,#b08a5e);
  --shade:var(--L,#cdb48a) var(--D,#100b06);
  --magic:#b4552a; --accent-text:var(--L,#9a4520) var(--D,#ffb98a);
}
:root[data-world="hero"]{
  --sky:var(--L,#e6e4f7) var(--D,#14132e);
  --panel:var(--L,#ffffff) var(--D,#232150);
  --well:var(--L,#eceaf9) var(--D,#2f2d66);
  --pv:var(--L,#d7d3f3) var(--D,#3d3a84);
  --line:var(--L,#1f2545) var(--D,#6d68d8);
  --shade:var(--L,#b7b1e6) var(--D,#08071a);
  --magic:#dd4459; --accent-text:var(--L,#c2263f) var(--D,#ff9aaa);
  --f-d:"Exo 2","Golos Text",system-ui,sans-serif;
  --r:12px; --rs:8px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:400 16px/1.45 var(--f-b)}
body.lock{overflow:hidden}
h1,h2,h3,p,ul{margin:0}
button,input,select{font:inherit;color:inherit}
svg{display:block}
#app{max-width:520px;margin:0 auto;padding:0 13px 96px}

.px{background:var(--panel);margin:3px 3px var(--drop);border-radius:var(--r);box-shadow:var(--box)}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;gap:12px;padding:10px 0 2px;background:var(--sky)}
.brand{font:700 24px/1.2 var(--f-d);padding:6px 3px 12px}
.who{display:flex;gap:11px;flex:1;min-width:0;overflow-x:auto;padding:3px 3px 10px;scrollbar-width:none}
.who::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:7px;flex:none;border:0;padding:4px 12px 4px 4px;min-height:38px;background:var(--panel);font:500 16px/1 var(--f-d);cursor:pointer;border-radius:var(--rb);box-shadow:var(--box-b)}
.chip svg{width:30px;height:30px;background:var(--pv);border-radius:var(--rb)}
.chip[aria-pressed="true"]{background:var(--gold);color:#33210a}
.purse{display:flex;align-items:center;gap:6px;font:700 22px/1 var(--f-d);padding-bottom:7px}
.purse svg{width:22px;height:22px}

#note:empty{display:none}
#note p{margin:6px 3px 12px;padding:10px 12px;background:var(--boss);color:#fff;font-weight:500;border-radius:var(--rs)}

#view>*+*{margin-top:16px}
.loading{padding:60px 0;text-align:center;font:500 20px var(--f-d);color:var(--soft)}

.stage{overflow:hidden;background:var(--pv)}
.stage svg{width:100%;height:auto}
.card{padding:14px 14px 16px}
.idrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.idrow>div:first-child{min-width:0}
.idrow h1{font:700 28px/1.05 var(--f-d);overflow-wrap:anywhere}
.rank{font:500 16px/1.2 var(--f-d);color:var(--soft);margin-top:4px}
.lvl{display:flex;align-items:baseline;gap:7px;font:500 15px/1 var(--f-d);color:var(--soft);flex:none}
.lvl b{font:700 36px/0.9 var(--f-d);color:var(--accent-text)}
.bar{height:18px;margin:14px 3px 3px;background:var(--well);border-radius:var(--rb);box-shadow:var(--ring);overflow:hidden}
.bar i{display:block;height:100%;background:var(--xp);transition:width .5s var(--ease)}
.bar.hp i{background:var(--boss)}
.bar.gold i{background:var(--gold)}
.hint{font-size:14px;color:var(--soft);margin-top:8px}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px 6px}
.stat{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:10px 12px}
.stat svg{width:24px;height:24px}
.stat span{font:500 16px/1 var(--f-d)}
.stat b{font:700 24px/1 var(--f-d)}

.chestcard{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.chestcard svg{width:72px;height:64px;background:var(--pv);border-radius:var(--rs)}
.chestcard h2{font:700 19px/1.15 var(--f-d)}
.pips{display:flex;gap:6px;margin-top:9px}
.pips i{width:16px;height:16px;background:var(--well);box-shadow:inset 0 0 0 2px var(--line);border-radius:calc(var(--rs) / 2)}
.pips i.on{background:var(--gold)}

.btn{border:0;cursor:pointer;min-height:44px;padding:11px 16px;margin:3px 3px var(--drop);background:var(--magic);color:#fff;font:500 17px/1 var(--f-d);border-radius:var(--rb);box-shadow:var(--box-b)}
.btn:active:not([disabled]){transform:translateY(3px);box-shadow:var(--box-a)}
.btn.gold{background:var(--gold);color:#33210a}
.btn.plain{background:var(--panel);color:var(--ink)}
.btn.danger{background:var(--boss);color:#fff}
.btn[disabled]{background:var(--well);color:var(--soft);cursor:default}
.btn.wide{display:block;width:calc(100% - 6px)}
.btn.sm{min-height:38px;padding:8px 12px;font-size:15px}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.link{border:0;background:none;padding:6px 2px;min-height:32px;font:500 14px/1 var(--f-b);color:var(--soft);text-decoration:underline;cursor:pointer}

.callout{padding:14px;display:grid;gap:10px}
.callout p{font-weight:500}

.sec{font:700 21px/1.15 var(--f-d);margin:24px 3px 11px}
#view>.sec{margin-top:24px}
.sub{color:var(--soft);font-size:14px;margin:-6px 3px 10px}
#view>.sub{margin-top:-6px}
.qlist{list-style:none;padding:0;display:grid;gap:9px}
.q{display:grid;grid-template-columns:auto 1fr auto;gap:8px 11px;align-items:center;padding:11px 12px}
.q-ico svg{width:28px;height:28px}
.q-t{font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.gain{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font:500 14px/1 var(--f-d);color:var(--soft)}
.gain span{display:inline-flex;align-items:center;gap:4px}
.gain svg{width:14px;height:14px}
.q-act{display:grid;justify-items:end;gap:2px}
.q-act .btn{margin-right:0}
.tag{font:500 14px/1.15 var(--f-d);padding:7px 10px;background:var(--well);text-align:center;border-radius:var(--rs)}
.tag.ok{background:var(--xp);color:#fff}
.q[data-s="done"] .q-t{color:var(--soft)}
.empty{padding:14px;color:var(--soft)}

.boss{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center;padding:12px 14px 14px}
.boss svg{width:86px;height:86px;background:var(--pv);border-radius:var(--rs)}
.boss h2{font:700 21px/1.1 var(--f-d)}
.boss .bar{margin-top:10px}
.prize{margin-top:8px;font-size:15px}

.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 4px}
.seg .btn{padding:10px 4px;font-size:16px}
.seg .btn[aria-pressed="true"]{background:var(--gold);color:#33210a}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 6px}
.it{padding:8px 8px 4px;display:grid;gap:8px;align-content:start}
.pv{background:var(--pv);height:116px;border-radius:var(--rs);overflow:hidden}
.pv svg{width:100%;height:100%}
.it-n{font-weight:600;line-height:1.2;min-height:2.4em}
.price{display:flex;align-items:center;gap:5px;font:700 17px/1 var(--f-d);min-height:18px}
.price svg{width:16px;height:16px}
.price.own{font-weight:500;color:var(--soft);font-size:15px}
.it .btn{width:calc(100% - 6px)}
.rw{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;padding:11px 12px}
.rw .price{margin-top:5px}
.rw .btn{margin-right:0}

.gate{display:grid;gap:12px}
.gate h1,.sheet h2{font:700 24px/1.1 var(--f-d)}
input,select{width:100%;min-height:46px;padding:9px 11px;background:var(--panel);border:2.5px solid var(--line);border-radius:var(--rs)}
#pin{font:700 26px/1 var(--f-d);letter-spacing:.4em;text-align:center;-webkit-text-security:disc}
.err{color:var(--boss);font-weight:600}
.row{display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center;padding:11px 12px}
.row b{font-weight:600;overflow-wrap:anywhere}
.row small{display:block;color:var(--soft);font-size:14px;margin-top:3px}
.row .acts{display:flex;gap:6px}
.row.pend{grid-template-columns:1fr}
.row .btn{margin-right:0}
.form{padding:13px;display:grid;gap:10px}
.form label{display:grid;gap:5px;font-size:14px;font-weight:500;color:var(--soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stack{display:grid;gap:8px}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--panel);border-top:2.5px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs>div{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.tab{position:relative;border:0;background:none;cursor:pointer;min-height:60px;padding:9px 2px 8px;display:grid;justify-items:center;align-content:center;gap:5px;font:500 14px/1 var(--f-d);color:var(--soft)}
.tab svg{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--ink);background:var(--well)}
.tab:focus-visible{outline-offset:-4px}
.dot{position:absolute;top:5px;left:calc(50% + 9px);min-width:19px;height:19px;padding:0 4px;background:var(--boss);color:#fff;font:700 13px/19px var(--f-d);text-align:center;border-radius:var(--rb)}

#modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px 17px}
#modal[hidden]{display:none}
.veil{position:absolute;inset:0;background:rgba(12,14,34,.76)}
.sheet{position:relative;width:calc(100% - 6px);max-width:400px;max-height:calc(100% - 14px);overflow:auto;padding:16px 14px 12px;text-align:center}
.sheet p{margin-top:8px}
.sheet .btn{margin-top:14px}
.party{position:relative;height:150px;overflow:hidden;background:var(--pv);margin-bottom:14px;display:grid;place-items:center;border-radius:var(--rs)}
.party svg{position:relative;width:114px;height:136px}
.party svg.wide{width:140px;height:120px}
.party i{position:absolute;top:-10px;width:8px;height:8px;border-radius:calc(var(--rs) / 4);animation:fall 1.5s linear infinite}
@keyframes fall{to{transform:translateY(175px) rotate(200deg)}}
.pop{animation:pop .5s ease-out both}
@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.big{font:700 34px/1 var(--f-d);color:var(--accent-text)}
.opts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0 2px}
.opt{border:0;cursor:pointer;padding:0;width:50px;height:50px;margin:3px;background:var(--pv);border-radius:var(--rs);box-shadow:var(--ring);overflow:hidden}
.opt svg{width:100%;height:100%}
.opt.sw{width:38px;height:38px;border-radius:var(--rb)}
.opt.sx{width:auto;height:auto;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;background:var(--panel);font:500 16px/1 var(--f-d)}
.opt.sx svg{width:42px;height:42px;background:var(--pv);border-radius:var(--rs)}
.opt[aria-pressed="true"]{box-shadow:var(--ring),0 0 0 6px var(--gold)}
.lookpv{width:132px;height:150px;margin:0 auto 8px;background:var(--pv);border-radius:var(--rs);overflow:hidden}
.lookpv svg{width:100%;height:100%}
.sheet label{display:grid;gap:5px;text-align:left;font-size:14px;font-weight:500;color:var(--soft);margin-top:10px}
.sheet h3{font:500 15px/1 var(--f-d);color:var(--soft);margin-top:14px}

#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;pointer-events:none;width:max-content;max-width:88vw}
#toast span{display:block;padding:10px 14px;background:var(--ink);color:var(--panel);font:500 16px/1.2 var(--f-d);text-align:center;border-radius:var(--rs)}

@media (prefers-reduced-motion:reduce){
  .party i{display:none}
  .pop{animation:none}
  .bar i{transition:none}
  .btn:active:not([disabled]){transform:none}
}

/* ---------- Супер Дети: экраны, которых не было в прототипе ---------- */
.tabs[hidden]{display:none}
.brand.grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:9px}
.bellbtn{position:relative;flex:none;border:0;cursor:pointer;width:42px;height:42px;margin:0 3px 8px 0;padding:9px;background:var(--panel);color:var(--ink);border-radius:var(--rb);box-shadow:var(--box-b)}
.bellbtn svg{width:24px;height:24px}
.bellbtn .dot{top:-6px;left:auto;right:-8px}
.chip{cursor:default}
a.btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box}
.gate .field{display:grid;gap:5px;font-size:14px;font-weight:500;color:var(--soft)}
.codein{font:700 30px/1 var(--f-d);letter-spacing:.35em;text-align:center}
.returned{margin-top:7px;font-size:14px;font-weight:500;color:var(--boss)}
.sticker{font:500 14px/1.15 var(--f-d);color:var(--accent-text)}
.row .acts.wrap{flex-wrap:wrap;justify-content:flex-end}
.pick{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.check{flex:none;width:28px;height:28px;border:0;padding:0;cursor:pointer;background:var(--well);border-radius:calc(var(--rs) / 1.5);box-shadow:var(--ring)}
.check[aria-pressed="true"]{background:var(--xp);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 L10 17 L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:80%;background-position:center;background-repeat:no-repeat}
.kid{padding:12px;display:grid;gap:10px}
.kid-top{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.kid-top b{font:700 20px/1.1 var(--f-d)}
.kid-top small{display:block;color:var(--soft);font-size:14px;margin-top:4px}
.kid-face{display:block;width:52px;height:52px;background:var(--pv);border-radius:var(--rs);overflow:hidden}
.kid-face svg{width:100%;height:100%}
.kid-acts{display:flex;flex-wrap:wrap;gap:4px}
.kid-acts .btn{margin-right:0}
.codebox{margin:14px auto 4px;font:700 42px/1 var(--f-d);letter-spacing:.12em;color:var(--accent-text)}
.linkbox{margin-top:12px;padding:10px;background:var(--well);border-radius:var(--rs);font-size:14px;overflow-wrap:anywhere;user-select:all;text-align:left}
.evlist{display:grid;gap:8px;margin-top:12px;text-align:left}
.ev{padding:10px 12px;background:var(--well);border-radius:var(--rs)}
.ev.new{box-shadow:inset 4px 0 0 var(--gold)}
.ev p{margin:0;font-weight:500;white-space:pre-line}
.ev small{display:block;margin-top:4px;color:var(--soft);font-size:13px}
.sheet .link{display:block;margin:10px auto 0}

/* ---------- Этап 2: монеты, город, сундуки, коллекции, цель, испытание недели ---------- */
.wallet{display:inline-flex;align-items:center;gap:8px;font:700 18px/1 var(--f-d)}
.wallet>span{display:inline-flex;align-items:center;gap:3px}
.wallet svg{width:20px;height:20px}
.purse .wallet{gap:6px;font-size:16px}
.purse .wallet svg{width:17px;height:17px}
.price{gap:8px}
.price>span{display:inline-flex;align-items:center;gap:3px}
.path{margin-top:8px;font-size:15px;color:var(--soft)}
.path b{color:var(--accent-text)}
.stat{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}
.statnext{grid-column:1/-1;font-size:12.5px;line-height:1.25;color:var(--soft)}
.callout.gift{background:var(--panel)}
.nextup{display:grid;gap:6px}
.nextup h2{font:700 19px/1.15 var(--f-d)}
.nextup ul{margin:0;padding-left:20px}
.coll{padding:12px}
.coll-h{display:flex;justify-content:space-between;align-items:baseline;font:500 16px/1.2 var(--f-d)}
.coll-h span{color:var(--soft);font-size:14px}
.coll-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.ci{display:block;aspect-ratio:1;background:var(--pv);border-radius:var(--rs);overflow:hidden}
.ci svg{width:100%;height:100%}
.ci.off svg{filter:grayscale(1) brightness(.2);opacity:.18}
.hint.done{color:var(--xp);font-weight:600}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-top:12px}
.pickcard{display:grid;gap:6px;justify-items:center;border:0;cursor:pointer;padding:8px 6px 10px;background:var(--panel);color:var(--ink);border-radius:var(--rs);box-shadow:var(--ring);font:500 14px/1.2 var(--f-d)}
.pickcard .pv{width:100%;height:96px}
.pickcard small{color:var(--accent-text);font-weight:600}
.pickcard:active{transform:translateY(2px)}
.prize-art{display:block;width:120px;height:120px}
.prize-art svg{width:100%;height:100%}
.hits{padding:10px 12px;display:grid;gap:6px}
.hits p{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:0;font-size:15px}
.hits svg{width:20px;height:20px}
.hits .hit{font:700 16px/1 var(--f-d);color:var(--boss)}
.flag{padding:8px 12px;display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center}
.flag svg{width:90px;height:auto}
.week h2{font:700 19px/1.15 var(--f-d)}
.steps{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.steps li{display:grid;justify-items:center;gap:3px;padding:8px 4px;background:var(--well);border-radius:var(--rs);text-align:center;opacity:.75}
.steps li.on{opacity:1;background:var(--pv);box-shadow:var(--ring)}
.steps .medal{font-size:24px;line-height:1}
.steps b{font:700 15px/1 var(--f-d)}
.steps small{font-size:12.5px;color:var(--soft);line-height:1.2}
.steps small.gift{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px}
.steps small.gift svg{width:14px;height:14px}
.bank{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px}
.bank .hint{margin-top:6px}
.bp{display:grid;justify-items:center;gap:2px;flex:none}
.bp svg{width:30px;height:30px}
.bp b{font:700 22px/1 var(--f-d)}
.bp small{font-size:12px;color:var(--soft)}
.city{display:grid;grid-template-columns:1fr 1fr;gap:9px 6px}
.house{display:grid;justify-items:center;gap:4px;border:0;cursor:pointer;padding:8px 8px 10px;color:var(--ink);text-align:center;font:500 16px/1.15 var(--f-d)}
.house svg{width:100%;max-width:150px;height:auto}
.house small{font:400 13px/1.25 var(--f-b);color:var(--soft)}
.house.empty b{color:var(--soft)}
.house .pips{margin-top:2px}
.shophead{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:10px 14px}
.shophead svg{width:96px;height:auto}
.shophead h1{font:700 24px/1.1 var(--f-d)}
.lockedit .pv{opacity:.55;filter:grayscale(.6)}
.locked{display:flex;align-items:center;gap:6px;min-height:38px;margin:3px 3px var(--drop);font:500 13px/1.2 var(--f-d);color:var(--soft)}
.locked svg{width:18px;height:18px;flex:none}
.nextstep{margin-top:14px}
.nextstep .hint{text-align:center}
.paybox{margin-top:10px;padding:10px;background:var(--well);border-radius:var(--rs);display:grid;gap:4px;justify-items:center}
.paybox p{margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.row.qa{grid-template-columns:auto 1fr auto}
.row.qa .q-ico svg{width:24px;height:24px}
.kids{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 14px}
.kids legend{font-size:14px;font-weight:500;color:var(--soft);margin-bottom:6px}
.chk{display:flex!important;align-items:center;gap:6px;color:var(--ink)!important;font-size:16px!important}
.chk input{width:22px;min-height:22px;height:22px}
.sheet select{margin-top:2px}

/* Атрибут hidden важнее display из стилей блоков. */
[hidden]{display:none!important}

/* ---------- Этап 3: комнаты, витрина, тропа месяца, награды, идеи, альбом ---------- */
.rooms{display:flex;gap:8px;overflow-x:auto;padding:3px 3px 10px;scrollbar-width:none}
.rooms::-webkit-scrollbar{display:none}
.chip.room{cursor:pointer;padding:4px 12px;min-height:34px;font-size:15px}
.showcase svg{width:100%;height:auto}
.mstars{color:var(--gold);font-size:13px;letter-spacing:-1px}
.callout.offer{background:var(--panel)}
.month-h{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center}
.month-h .trophy{display:block;width:52px;height:52px;background:var(--pv);border-radius:var(--rs);padding:4px}
.month-h .trophy svg{width:100%;height:100%}
.month h2{font:700 19px/1.15 var(--f-d)}
.steps.four{grid-template-columns:repeat(4,1fr)}
.steps.four b{font-size:20px}
.city-extra{display:grid;grid-template-columns:1fr 1fr;gap:9px 6px;margin-top:9px}
.city-extra svg.small{width:56px;height:56px}
.ideabox{padding:12px 14px;display:grid;gap:6px;justify-items:start;margin-top:12px}
.ideabox .btn{margin-left:0}
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.album-it{display:grid;justify-items:center;gap:4px;padding:8px;text-align:center;font-size:13px}
.album-it span{display:block;width:56px;height:56px}
.album-it svg{width:100%;height:100%}
.badge-row{grid-template-columns:auto 1fr}
.badge-row svg{width:28px;height:28px}
.loadmeter{margin-top:4px}
.callout.suggest{background:var(--well);margin-top:6px}
.btn svg{display:inline-block;width:18px;height:18px;vertical-align:-3px}

/* ---------- Этапы 4-5: дом, Банк, проект, новые режимы цели, режим "Малыш" ---------- */
.homecard{grid-template-columns:120px 1fr;justify-items:start;align-items:center;gap:12px;width:calc(100% - 6px);margin-top:9px;text-align:left}
.homecard svg{width:120px}
.homecard div{display:grid;gap:4px}
.homecard.locked svg{opacity:.6}
.houseera{display:grid;gap:8px}
.houseera h2{font:700 19px/1.15 var(--f-d)}
.houseera>svg{width:100%;height:auto;background:var(--pv);border-radius:var(--rs)}
.houseera.locked>svg{opacity:.5}
.parts{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:6px}
.parts li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;background:var(--well);border-radius:var(--rs)}
.parts li b{font:500 15px/1.2 var(--f-d)}
.parts li.on{background:var(--pv)}
.parts .btn,.parts .locked{margin:0}
.parts .hint{margin:0;font-size:13px}
.vault{display:grid;gap:6px}
.vault h2{font:700 19px/1.15 var(--f-d)}
.vault .big{font:700 30px/1.1 var(--f-d);color:var(--accent-text)}
.vault label{display:grid;gap:4px;font-weight:500}
.vault input{min-height:44px;padding:8px 12px;border:0;border-radius:var(--rs);background:var(--well);box-shadow:var(--ring);font-size:18px}
.quick{display:flex;flex-wrap:wrap;gap:4px}
.quick .btn[aria-pressed="true"]{background:var(--gold);color:#33210a}
.exchange{display:grid;gap:6px}
.exchange h2{font:700 19px/1.15 var(--f-d)}
.xrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0;font:700 20px/1 var(--f-d)}
.xrow span{display:inline-flex;align-items:center;gap:4px}
.xrow svg,.exchange .hint svg{width:22px;height:22px;display:inline-block;vertical-align:-5px}
.project h2,.clues h2{font:700 19px/1.15 var(--f-d)}
.psteps{margin:10px 0 0;padding-left:22px;display:grid;gap:4px}
.psteps li.on{color:var(--soft);text-decoration:line-through}
.clues ol{margin:8px 0 0;padding-left:22px;display:grid;gap:4px}
.decor{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.decor .tag{padding:4px 8px;font-size:13px}
.seg.modes{grid-template-columns:repeat(2,1fr)}
.seg.worlds{grid-template-columns:repeat(2,1fr)}
.puzzle{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center}
.puzzle svg{width:110px;height:110px;border-radius:var(--rs)}
.puzzle h2{font:700 19px/1.15 var(--f-d)}
.puzzle .big{font:700 28px/1.1 var(--f-d);color:var(--accent-text);margin-top:4px}
.wallet.pile{gap:6px}
.wallet.pile svg{width:26px;height:26px}
.price .wallet.pile svg,.price>span svg{flex:none}

:root[data-age="small"] body{font-size:18px}
:root[data-age="small"] .btn{min-height:52px;font-size:19px;padding:13px 18px}
:root[data-age="small"] .btn.sm{min-height:46px;font-size:17px}
:root[data-age="small"] .q-t{font-size:19px}
:root[data-age="small"] .q-ico svg{width:36px;height:36px}
:root[data-age="small"] .tab span{font-size:15px}
:root[data-age="small"] .statnext,
:root[data-age="small"] .nextup .hint,
:root[data-age="small"] .ideabox .hint,
:root[data-age="small"] .project .hint,
:root[data-age="small"] .boss .hint,
:root[data-age="small"] .sub{display:none}
:root[data-age="small"] .purse .wallet svg{width:24px;height:24px}
:root[data-age="small"] .purse .wallet{font-size:20px}

/* ---------- Наказания и норма в день ---------- */
.normbox{margin:10px 0 4px;padding:10px 12px;background:var(--well);border-radius:var(--rs);display:grid;gap:6px}
.normbox p{margin:0}
.normbox small{display:block;color:var(--soft);font-size:13px;margin-top:2px}
.penalty .seg{margin-bottom:6px}
.callout.penaltynote{background:var(--panel)}
.gain.repair span{color:var(--accent-text);font-weight:600}
.q.repairq{box-shadow:var(--box),inset 4px 0 0 var(--gold)}
.steps li.closed{opacity:.5}