/* «Лесенка» поверх «Мягких карточек»: крупнее кнопки, удобно пальцем на телефоне. */
body{padding-bottom:76px;-webkit-tap-highlight-color:transparent}
main{max-width:640px;padding:14px 16px 24px;gap:12px}
header{padding:8px 16px;gap:10px;flex-wrap:nowrap}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.ava{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:var(--acs);flex:none}
.who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{color:var(--mu);font-size:12px}
.bal{margin-left:auto;font-weight:700;font-size:20px;padding:4px 12px;border-radius:999px;background:var(--acs);color:var(--ac);white-space:nowrap;font-variant-numeric:tabular-nums}
.ib{border:0;background:none;color:var(--mu);padding:6px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.ib:hover{background:var(--hov);color:var(--tx)}
.kids{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.kids button{font:inherit;font-weight:600;border:1px solid var(--lnf);background:var(--card);color:var(--tx);padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;display:flex;gap:6px;align-items:center}
.kids button.on{background:var(--ac);border-color:var(--ac);color:var(--acx)}
.seg{display:inline-flex;flex:none;white-space:nowrap;padding:3px;border:1px solid var(--ln);border-radius:10px;background:var(--field);gap:2px}
.seg button{font:inherit;border:0;background:none;color:var(--mu);padding:6px 12px;border-radius:7px;cursor:pointer}
.seg button.on{background:var(--card);color:var(--ac);box-shadow:var(--sh);font-weight:600}
.seg input{border:0;background:none;padding:4px 6px;width:auto}
/* лесенка */
.lad{gap:10px}
.steps{display:flex;align-items:flex-end;gap:4px;height:120px;padding-top:26px}
.st{flex:1;border-radius:6px 6px 3px 3px;background:var(--ln);position:relative;display:flex;align-items:flex-end;justify-content:center;font-size:11px;color:var(--mu);padding-bottom:3px;transition:background-color .15s}
.st.on{background:var(--k,var(--ac));color:#fff}
.st .pz{position:absolute;top:-24px;font-size:18px;line-height:1}
.st.cur:after{content:"";position:absolute;inset:-3px;border-radius:8px;border:2px solid var(--k,var(--ac))}
.ladtxt{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.ladtxt b{font-size:17px}
.win{background:var(--okbg);color:var(--ok);border-radius:10px;padding:12px;font-weight:600;text-align:center;font-size:17px}
.key{border-radius:10px;padding:10px 12px;font-size:14px;display:flex;gap:8px;align-items:flex-start}
.key.lock{background:var(--warnbg);color:var(--warn)}.key.open{background:var(--okbg);color:var(--ok)}
/* задания */
.cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin:0 -2px}
.cats button{font:inherit;font-size:13px;border:1px solid var(--ln);background:var(--card);color:var(--mu);padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.cats button.on{background:var(--acs);border-color:var(--acs);color:var(--ac);font-weight:600}
.grp{font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;margin:6px 2px -4px}
.tk{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--ln);border-radius:12px;box-shadow:var(--sh)}
.tk.done{border-color:color-mix(in srgb,var(--ok) 45%,var(--ln));background:color-mix(in srgb,var(--okbg) 55%,var(--card))}
.tk .tt{flex:1;min-width:0}
.tk .tt div{font-weight:500;line-height:1.3}
.tk .tt small{display:block;color:var(--mu);font-size:12px;line-height:1.35;margin-top:2px}
.tk .lb{font-size:13px;flex:none}
.tk .cnt{font-size:12px;font-weight:700;color:var(--ok);white-space:nowrap}
.go{font:inherit;font-weight:700;min-width:74px;padding:10px 10px;border-radius:10px;border:0;background:var(--ac);color:var(--acx);cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;transition:transform .15s,background-color .15s}
.go:active{transform:scale(.96)}
.go.neg{background:var(--bad)}
.go.off{background:var(--ln);color:var(--mu);cursor:default;font-weight:500;font-size:12px}
.list{display:grid;gap:8px}
.ent{display:flex;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--ln);font-size:14px}
.ent:last-child{border-bottom:0}
.ent span{flex:1;min-width:0}
.ent .n{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.plus{color:var(--ok)}.minus{color:var(--bad)}
.sum3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.sum3 div{background:var(--field);border-radius:10px;padding:10px 4px}
.sum3 b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.sum3 small{color:var(--mu);font-size:12px}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.shop button{font:inherit;text-align:left;border:1px solid var(--ln);background:var(--card);border-radius:12px;padding:12px;cursor:pointer;display:grid;gap:6px;box-shadow:var(--sh);color:var(--tx)}
.shop button b{color:var(--ac);font-size:17px}
.rules{white-space:pre-line;font-size:14px}
/* нижнее меню */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--ln);display:flex;justify-content:center;padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
.tabs button{flex:1;max-width:150px;font:inherit;font-size:12px;border:0;background:none;color:var(--mu);display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:10px;cursor:pointer}
.tabs button svg{width:22px;height:22px}
.tabs button.on{color:var(--ac);background:var(--acs)}
/* окна и подсказки */
dialog{border:0;border-radius:14px;padding:18px;max-width:440px;width:calc(100% - 32px);background:var(--card);color:var(--tx);box-shadow:var(--sh2)}
dialog::backdrop{background:#0008}
dialog .acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.opts{display:grid;gap:8px}
.opts button{font:inherit;font-weight:600;padding:12px;border-radius:10px;border:1px solid var(--lnf);background:var(--field);color:var(--tx);cursor:pointer;display:flex;justify-content:space-between}
#toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:20;background:var(--tx);color:var(--card);padding:10px 14px;border-radius:12px;display:none;gap:12px;align-items:center;box-shadow:var(--sh2);max-width:calc(100% - 32px)}
#toast button{font:inherit;font-weight:700;border:0;background:none;color:var(--ac);cursor:pointer;padding:0}
.pop{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
.srow{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--ln)}
.srow:last-child{border-bottom:0}
.srow>span{flex:none}.srow>span:first-child{flex:1;min-width:0}
.srow.off span{opacity:.45;text-decoration:line-through}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.presets button{font:inherit;font-size:13px;border:1px solid var(--lnf);background:var(--field);color:var(--tx);padding:5px 10px;border-radius:999px;cursor:pointer}
.empty{color:var(--mu);font-size:14px;text-align:center;padding:10px}
@media(prefers-reduced-motion:reduce){.pop{animation:none}}
.row .grow{flex:1 1 140px}
.fm{display:grid;gap:12px}
details.card>summary{cursor:pointer;list-style:none}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary:after{content:"▾";margin-left:auto;color:var(--mu);transition:transform .15s}
details.card[open]>summary:after{transform:rotate(180deg)}
details.card:not([open]){gap:0}