/* Домовята — стили приложения */
:root{
  --bg:#1A120E; --bg2:#231913; --card:#2C211A; --card2:#3A2B21; --line:#4B3829;
  --ink:#FFF0DA; --ink2:#D9C2A3; --ink3:#A08A70;
  --gold:#F6B940; --gold2:#FFD27A; --red:#EE6A52; --green:#7BD096; --blue:#78BDEB;
  --wait:#F6B940;
  --r:18px;
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --body:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hand:'Pangolin','Comic Sans MS','Segoe Print',cursive;
  color-scheme:dark;
}
body.pro{--bg:#111315; --bg2:#171A1D; --card:#1D2125; --card2:#272C32; --line:#343A41; --ink:#EDF0F3; --ink2:#B4BCC5; --ink3:#7D8894; --gold:#E9B24A; --gold2:#F5CD7A;}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;color:var(--ink);font:400 15px/1.45 var(--body);
  background:radial-gradient(100% 420px at 50% -140px,rgba(246,185,64,.20),transparent 70%) no-repeat,var(--bg);
  -webkit-tap-highlight-color:transparent}
body.pro{background:var(--bg)}
body.lock{overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}
.app{max-width:520px;margin:0 auto;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 116px}
.h2{font:700 12.5px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);margin:28px 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;text-wrap:balance}
.h2 .muted{font:600 13px var(--body);letter-spacing:0;text-transform:none}
.muted{color:var(--ink3)}
.small{font-size:13px}
.card{background:var(--card);border-radius:var(--r);padding:14px}
.list{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wide{width:100%;margin-top:14px}
.num{font-variant-numeric:tabular-nums}

/* buttons */
.btn{appearance:none;border:0;border-radius:14px;padding:12px 16px;font:700 15px var(--body);background:var(--gold);color:#2A1805;line-height:1.1;transition:transform .08s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.sm{padding:9px 13px;font-size:13.5px;border-radius:11px}
.btn.ghost{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.green{background:var(--green);color:#0D2515}
.btn.red{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.btn.dark{background:var(--card2);color:var(--ink)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.icon-btn{border:0;background:var(--card);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink2);flex:none}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;background:var(--card2);font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap}
.chip.gold{color:var(--gold2)}
.chip.with{color:var(--blue)}
.coin{display:inline-block;width:1em;height:1em;border-radius:50%;flex:none;vertical-align:-.14em;
  background:radial-gradient(circle at 35% 30%,#FFEAB0,#F6B940 55%,#C98A1C);box-shadow:inset 0 0 0 1.5px #B67B14}

/* picker */
.brand{font:800 32px/1 var(--display);letter-spacing:-.01em;color:var(--gold2);margin-top:14px}
.brand-sub{font-size:13.5px;color:var(--ink3);margin-top:8px}
.demo{margin-top:14px;padding:10px 12px;border:1.5px dashed var(--line);border-radius:14px;color:var(--ink2);font-size:13px}
.demo b{color:var(--gold2)}
.who{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:10px}
.who-card{border:0;background:var(--card);border-radius:20px;padding:8px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.who-card b{font:700 16px var(--display);margin-top:-2px}
.who-card span{font-size:12px;color:var(--ink3)}
.who-card .prog{height:5px;width:72%;border-radius:9px;background:var(--card2);overflow:hidden;margin-top:7px}
.who-card .prog i{display:block;height:100%;background:var(--m)}
.who-card .nm{display:flex;flex-direction:column;align-items:center}
.who-par .who-card{flex-direction:row;gap:10px;padding:6px 12px;text-align:left;align-items:center}
.who-par .who-card .nm{align-items:flex-start}

/* header */
.top{display:flex;align-items:center;gap:10px;padding-block:4px 6px;position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:linear-gradient(var(--bg) 70%,transparent);margin-inline:-16px;padding-inline:16px}
.who-mini{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.who-mini b{font:700 15px var(--display);display:block}
.who-mini span{font-size:12px;color:var(--ink3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wallet{display:flex;align-items:center;gap:6px;font:800 17px var(--display);color:var(--gold2);background:var(--card);padding:8px 12px;border-radius:12px}

/* hero */
.hero{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:4px}
.say{font:400 18px/1.25 var(--hand);background:var(--card);padding:10px 14px;border-radius:18px 18px 18px 4px}
.lvl{margin-top:9px;font-size:12.5px;color:var(--ink3)}
.xpbar{height:8px;border-radius:9px;background:var(--card2);overflow:hidden;margin-top:5px}
.xpbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--m),var(--gold))}
.pet{display:block;overflow:visible}
.pet .pet-b{transform-origin:60px 112px;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.035,.965)}}
.hop .pet-b{animation:hop .7s ease}
@keyframes hop{0%,100%{transform:none}35%{transform:translateY(-16px) scale(1.05,.95)}65%{transform:translateY(0) scale(.95,1.06)}}

/* week & stamps */
.tbar{position:relative;height:12px;border-radius:9px;background:var(--card2);margin:10px 0 8px}
.tbar i{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:var(--green);max-width:100%}
.tbar em{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink2);opacity:.55;border-radius:2px}
.big-num{font:800 22px var(--display);color:var(--ink)}
.stamps{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.stamps div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--ink3);font-weight:600}
.stamps i{width:100%;max-width:42px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:16px;border:1.5px dashed var(--line)}
.s-stamp i{background:var(--m);border:0;color:#1A120E;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.s-today i{border:2px solid var(--gold);border-style:solid}
.s-miss i{opacity:.5}
.jar{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.jar span{font-size:26px;filter:grayscale(1) opacity(.3)}
.jar span.on{filter:none}

/* boss */
.bstrip{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;background:linear-gradient(135deg,#2A331F,#1C2216);border-radius:16px;padding:6px 14px 6px 8px;margin-top:12px;border:0;width:100%;text-align:left;color:#E6EED3}
.bstrip b{font:700 13px var(--display)}
.hp{height:10px;border-radius:9px;background:#0E1209;overflow:hidden;margin-top:6px}
.hp i{display:block;height:100%;background:linear-gradient(90deg,#EE6A52,#F6B940);border-radius:9px;transition:width .6s}
.hp-txt{font-size:11.5px;color:#AEB99A;margin-top:4px}
.boss{position:relative;background:radial-gradient(120% 90% at 80% 0%,#3A4628,#1C2216 70%);border-radius:24px;padding:18px;color:#E6EED3;overflow:hidden}
.boss h3{font:800 20px/1.15 var(--display);margin:0;text-wrap:balance}
.boss p{margin:6px 0 0;color:#B9C4A4;font-size:14px}
.boss .bsvg{display:grid;place-items:center;margin:4px 0 6px}
.boss .hp{height:16px}
.hit{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-6px) rotate(-3deg)}40%{transform:translateX(5px) rotate(2deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.dmg{display:flex;height:14px;border-radius:9px;overflow:hidden;background:var(--card2);margin-top:10px}
.dmg i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* tasks */
.task{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:var(--card);border-radius:var(--r);padding:12px;box-shadow:inset 0 0 0 1.5px transparent}
.task .ic{width:52px;height:52px;border-radius:14px;background:var(--card2);display:grid;place-items:center;font-size:28px;border:0;padding:0}
.task .ttl{font-weight:650;font-size:15.5px;line-height:1.25}
.task .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.task.wait{box-shadow:inset 0 0 0 1.5px rgba(246,185,64,.45)}
.task.ok .ttl{text-decoration:line-through;text-decoration-color:var(--ink3);color:var(--ink2)}
.task.ok .ic{filter:saturate(.4)}
.task.back{box-shadow:inset 0 0 0 1.5px var(--red)}
.st{font:700 11px/1.15 var(--body);text-align:center;border-radius:11px;padding:6px 8px;border:0;background:transparent}
.st-wait{color:var(--wait);box-shadow:inset 0 0 0 1.5px var(--wait)}
.st-ok{color:var(--green);font-size:24px}
.note{font:400 16px/1.25 var(--hand);margin-top:6px}
.note.back{color:var(--red)}
.note.ok{color:var(--green)}
.checks{grid-column:1/-1;margin:2px 0 0;padding:10px 12px 10px 30px;background:var(--bg2);border-radius:12px;color:var(--ink2);font-size:14px}
.checks li+li{margin-top:3px}
.say-btn{border:0;background:var(--card2);color:var(--gold2);border-radius:9px;width:30px;height:30px;display:inline-grid;place-items:center;vertical-align:middle;margin-left:4px}
.big .task{grid-template-columns:74px 1fr auto}
.big .task .ic{width:74px;height:74px;font-size:42px;border-radius:18px}
.big .task .ttl{font-size:17px}
.big .btn.sm{padding:14px 16px;font-size:16px}
.empty{text-align:center;padding:26px 10px;color:var(--ink3)}

/* market */
.lot{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;background:var(--card);border-radius:var(--r);padding:12px}
.lot .ic{font-size:30px;text-align:center}
.lot .ttl{font-weight:650}
.lot .price{font:800 19px var(--display);color:var(--gold2);display:flex;align-items:center;gap:6px;justify-content:flex-end}
.lot .up{font-size:12px;color:var(--green);text-align:right;margin-top:2px}
.lot .acts{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.lot.bounty{background:linear-gradient(120deg,rgba(246,185,64,.22),var(--card) 60%)}
.lot.mine{box-shadow:inset 0 0 0 1.5px var(--gold)}
.lot.gone{opacity:.55}

/* shop */
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.item{background:var(--card);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:6px}
.item .ic{font-size:30px}
.item .ttl{font-weight:650;font-size:14.5px;line-height:1.25;flex:1}
.item .nt{font-size:12px;color:var(--ink3)}
.item .price{font:800 17px var(--display);color:var(--gold2);display:flex;align-items:center;gap:6px}
.item.hot{box-shadow:inset 0 0 0 1.5px var(--gold)}
.goal .gbar{height:14px;border-radius:9px;background:var(--card2);overflow:hidden;margin:10px 0}
.goal .gbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:9px}
.goal .acts{display:flex;gap:8px;flex-wrap:wrap}

/* me */
.pet-big{display:grid;place-items:center;padding-top:6px}
.inv{display:flex;flex-wrap:wrap;gap:8px}
.inv button{border:0;background:var(--card2);color:var(--ink);border-radius:12px;padding:8px 12px;font-weight:600;font-size:13.5px}
.inv button.on{background:var(--gold);color:#2A1805}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink3)}
input,select{background:var(--bg2);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--ink);font:500 15px var(--body);width:100%;min-width:0}
input:focus,select:focus{border-color:var(--gold);outline:none}
.form-row{display:flex;gap:8px;align-items:flex-end}
.form-row>*{flex:1}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tog{width:48px;height:28px;border-radius:99px;border:0;background:var(--card2);position:relative;flex:none}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink3);transition:transform .15s}
.tog.on{background:var(--green)}
.tog.on::after{transform:translateX(20px);background:#fff}
details summary{cursor:pointer;color:var(--ink2);font-size:13px;margin-top:10px}
.odds{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.odds td{padding:4px 0;border-bottom:1px solid var(--line)}
.odds td:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* home */
.pairs{display:grid;gap:10px}
.pair{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--card);border-radius:var(--r);padding:8px 12px}
.pair .duo{display:flex}
.pair .duo svg+svg{margin-left:-14px}
.pair b{font:700 14px var(--display)}
.lead{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.zones{display:flex;flex-wrap:wrap;gap:8px}

/* nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  background:var(--bg2);background:color-mix(in srgb,var(--bg2) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.nav-in{display:flex;max-width:520px;margin:0 auto}
.nav button{flex:1;border:0;background:none;color:var(--ink3);display:flex;flex-direction:column;align-items:center;gap:2px;font:600 11px var(--body);padding:6px 0 4px;border-radius:12px;position:relative}
.nav button.on{color:var(--gold2)}
.nav .badge{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font:700 11px/18px var(--body);padding:0 5px}

/* parent */
.seg{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.seg button{flex:none;border:0;box-shadow:inset 0 0 0 1.5px var(--line);background:transparent;border-radius:99px;padding:8px 13px;font-weight:600;font-size:13.5px;color:var(--ink2);display:flex;gap:6px;align-items:center}
.seg button.on{background:var(--ink);color:var(--bg);box-shadow:none}
.seg .cnt{background:var(--red);color:#fff;border-radius:9px;font-size:11px;padding:1px 6px}
.rv{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:var(--card);border-radius:16px;padding:10px 12px}
.rv .ic{font-size:26px;text-align:center}
.rv .ttl{font-weight:650;font-size:14.5px;line-height:1.25}
.rv .acts{display:flex;gap:6px}
.rv.stack .acts{grid-column:1/-1;justify-content:flex-end}
.btn.sq{width:44px;height:44px;padding:0;font-size:20px;display:grid;place-items:center}
.reasons{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.reasons button{border:0;background:var(--card2);color:var(--ink);border-radius:10px;padding:8px 10px;font-size:13px}
.tbl-wrap{overflow-x:auto;margin-inline:-4px}
table.pay{border-collapse:collapse;width:100%;min-width:430px;font-size:13.5px}
table.pay th{font:600 11.5px var(--body);color:var(--ink3);text-align:right;padding:6px 4px;border-bottom:1px solid var(--line)}
table.pay th:first-child,table.pay td:first-child{text-align:left}
table.pay td{padding:9px 4px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
table.pay tfoot td{font-weight:800;border-bottom:0}
.fam{display:grid;grid-template-columns:1fr 92px auto;gap:8px;align-items:center}
.danger{box-shadow:inset 0 0 0 1.5px rgba(238,106,82,.5)}

/* layer: modals, ceremony, fx */
.modal{position:fixed;inset:0;background:rgba(10,6,4,.72);display:grid;place-items:center;z-index:60;padding:16px}
.sheet{background:var(--bg2);border-radius:24px;padding:22px;max-width:420px;width:100%;box-shadow:0 0 0 1px var(--line),0 20px 60px rgba(0,0,0,.5);text-align:center}
.sheet h3{font:800 20px var(--display);margin:6px 0 8px;text-wrap:balance}
.sheet p{color:var(--ink2);margin:0 0 14px}
.cer{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;color:#FFF0DA;
  background:radial-gradient(80% 60% at 50% 0%,rgba(246,185,64,.25),transparent 70%),#120C09;
  padding:calc(16px + env(safe-area-inset-top,0px)) 20px calc(16px + env(safe-area-inset-bottom,0px))}
.cer-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;max-width:760px;width:100%;margin:0 auto}
.c-eyebrow{font:700 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:#D9B77A}
.c-h{font:800 clamp(26px,6vw,46px)/1.08 var(--display);margin:4px 0;text-wrap:balance}
.c-p{font-size:17px;color:#E6D2B5;max-width:34em;margin:0}
.c-boss.dead svg{filter:grayscale(.8) opacity(.6);transform:rotate(-8deg)}
.titles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;width:100%;margin-top:8px}
.tcard{background:rgba(255,240,218,.07);border-radius:20px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:2px}
.tcard .tt{font:800 14px/1.2 var(--display);color:#FFD27A;margin-top:2px}
.tcard .nm{font-weight:700;font-size:16px}
.tcard .why{font-size:12.5px;color:#CBB595}
.cer-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;max-width:760px;width:100%;margin:10px auto 0}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,240,218,.25)}
.dots i.on{background:#FFD27A}
.draft{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:100%}
.draft button{border:0;border-radius:18px;padding:14px 10px;background:rgba(255,240,218,.08);color:#FFF0DA;display:flex;flex-direction:column;align-items:center;gap:4px}
.draft button b{font:700 15px var(--display)}
.draft button span{font-size:12px;color:#CBB595}
.draft button:disabled{opacity:.9;background:rgba(123,208,150,.14);cursor:default}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:14px;font-weight:600;z-index:90;max-width:calc(100% - 32px);text-align:center;animation:tin .25s ease;box-shadow:0 8px 30px rgba(0,0,0,.4)}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}}
.float{position:fixed;z-index:85;font:800 22px var(--display);color:var(--gold2);pointer-events:none;transform:translate(-50%,0);animation:fup 1.1s ease-out forwards;text-shadow:0 2px 0 rgba(0,0,0,.35);white-space:nowrap}
@keyframes fup{to{opacity:0;transform:translate(-50%,-70px)}}
.conf{position:fixed;z-index:84;width:8px;height:12px;border-radius:2px;pointer-events:none;animation:conf .95s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes conf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (min-width:700px){.app{padding-top:18px}}

/* ——— вход, создание семьи, профили ——— */
.center{min-height:calc(100vh - 40px);display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:24px}
.brand.lg{font-size:36px;margin-top:0}
.form{display:flex;flex-direction:column;gap:12px}
.form .card{display:flex;flex-direction:column;gap:10px}
.kid-row{display:grid;grid-template-columns:1fr 92px 40px;gap:8px;align-items:center}
.kid-row .icon-btn{width:40px;height:44px}
.code-in{text-align:center;font:800 26px var(--display);letter-spacing:.08em;text-transform:uppercase}
.pin-in{text-align:center;font:800 28px var(--display);letter-spacing:.35em}
.who-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.who-grid button{border:0;background:var(--card);border-radius:18px;padding:8px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink)}
.who-grid button b{font:700 15px var(--display)}
.who-grid button span{font-size:12px;color:var(--ink3)}
.accs{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.accs button{display:flex;align-items:center;gap:10px;border:0;background:var(--card);border-radius:14px;padding:8px 12px;color:var(--ink);text-align:left}
.accs button.on{box-shadow:inset 0 0 0 2px var(--gold)}
.accs .dot{width:14px;height:14px;border-radius:50%;flex:none}
.sheet.left{text-align:left}
.sheet .btn.wide{margin-top:10px}
.big-code{font:800 30px var(--display);letter-spacing:.06em;color:var(--gold2);text-align:center;margin:6px 0}
.dev{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.dev:first-of-type{border-top:0}
.check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink2)}
.check input{width:22px;height:22px;flex:none}
.err{color:var(--red);font-size:14px;margin:0}