/* Full stylesheet of the Netlify prototype (index.html <style>, lines 15-1112), verbatim.
   Loaded after tokens.css/base.css and BEFORE shell.css so the app shell can override layout only. */
.pbub2[data-k=how]{max-height:none!important;display:block!important;--tx:50%}.hbx{display:grid;gap:8px;text-align:left}.hbr{display:flex;gap:8px;align-items:center;font-size:.82rem;line-height:1.25}.hbr>span{min-width:0}.hbr b{display:block;font-size:.9rem}.hbr .ringw,.hbr .ring{width:34px;height:34px;flex:none}
.hgd .hgh{display:flex;align-items:center;gap:10px;margin:0 34px 8px 0}.hgd .hgh h3{margin:0}.hgd .frd-av{width:56px;height:64px;margin:0;flex:none}.hgd p{margin:10px 0;font-size:.93rem;line-height:1.4}.hgd .cmp.one{grid-template-columns:1fr;gap:2px;margin:6px 0}.hgd .actions{margin-top:12px}
.gl{padding:8px 6px}.gl .glh{display:flex;justify-content:space-between;align-items:center;padding:0 8px 6px}.gl .glh h3{margin:0}.gl .gstk{display:flex;align-items:center;gap:4px;font-weight:800}.gl .gstk .ic{width:22px;height:22px}.gl .gstk .ic+b{margin-right:8px}.gl .gstk .off{opacity:.35}.gl .gwk{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin:12px 4px 0}.gl .gd{display:flex;flex-direction:column;align-items:center;gap:2px}.gl .gd small{font-size:.68rem;font-weight:700;color:var(--soft)}.gl .gd i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.82rem;font-weight:700;color:var(--soft)}.gl .gd i .ic{width:20px;height:20px}.gl .gd.td i{border:2px solid var(--accent);color:var(--ink)}.gl .gd.fut i{opacity:.5}
.gd i{position:relative}.gd.mis i::after{content:'×';position:absolute;top:-4px;right:-2px;font-size:.85rem;font-weight:700;color:var(--soft);opacity:.75;line-height:1}.gl .gmonth{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}.gl .gmonth summary{cursor:pointer;font-weight:700;font-size:.85rem;color:var(--soft);list-style:none;text-align:center;padding:4px}.gl .gmonth summary::-webkit-details-marker{display:none}.gl .calw{margin-top:6px}.gl .gmsg{margin:8px 8px 2px;text-align:center;color:var(--soft);font-size:.88rem}.cur-sum b{font:700 1.45rem/1.1 var(--f-hand)}.gl .gcs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.gl .gc{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:2px 0;color:var(--ink);font:inherit;cursor:pointer;min-width:0}.gl .gc.dis{cursor:default}.gl .gi{position:relative;width:46px;height:46px;border-radius:50%;border:2.5px solid var(--line);display:grid;place-items:center;background:var(--fill)}.gl .gi .ic{width:24px;height:24px}.gl .gc.on .gi{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card))}.gl .gv{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}.gl .gv .ic{width:13px;height:13px}.gl .gl2{font-size:.72rem;font-weight:700;color:var(--soft)}.gl .gdots{display:flex;gap:3px;height:6px}.gl .gdots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.gl .gdots i.on{background:var(--accent)}.gl .gc.chest:not(.ready) .gi{opacity:.5}.gl .gc.ready .gi{border-color:#e0a020;background:#fff3d0;color:#a56a00;animation:gpulse 1.4s ease-in-out infinite}@keyframes gpulse{50%{transform:scale(1.1)}}.gl.gdone{display:flex;align-items:center;gap:8px;padding:8px 12px;font-weight:700;color:var(--soft)}.gl.gdone .ic{width:20px;height:20px;color:var(--accent)}@media(prefers-reduced-motion:reduce){.gl .gc.ready .gi{animation:none}}
.gapb{display:inline-block;width:1.25em;height:1.25em;border:2.5px dashed currentColor;border-radius:.3em;vertical-align:-.3em;margin:0 .1em;opacity:.55;box-sizing:border-box}
/* Layout: one column worksheet on graph paper. Math sits on a gridded strip in blue pen; corrections and the grade come in red pen. Dark theme is a chalkboard. */
:root{
  --paper:#f5f8fd; --grid:#dce8f6; --card:#ffffff; --ink:var(--brand); --soft:#52688a; --line:#b9cde6;
  --blue-d:var(--brand); --blue-l:var(--brand-2); --pen:var(--brand); --pen-fg:#ffffff; --pen-soft:#dde9fb; --biro:var(--brand); --accent:var(--brand-2); --accent-soft:#dff0ff;
  --red:#c5281f; --red-soft:#fdeceb; --green:#157a4a; --green-soft:#e4f5ec;
  --ruby:var(--brand-ruby); --flame:#f26a0f; --flame-in:#ffc933; --gold:#e8a400; --gold-soft:#fff3cf; --boss:#27479e; --boss-soft:#dfe5fa; --on-solid:#ffffff;
  --f-hand:'Andika',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-ui:'Andika',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-math:'STIX Two Text','Cambria Math','Times New Roman',serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1a2e; --grid:#182640; --card:#16233d; --ink:#eaf1ff; --soft:#9db0d0; --line:#2c4166;
    --pen:var(--brand-2); --pen-fg:#06142a; --pen-soft:#1d3358; --biro:var(--brand-2); --accent:var(--brand-2); --accent-soft:#1b3350;
    --red:#ff9188; --red-soft:#3a2321; --green:#7fdca9; --green-soft:#1d3a2c; --ruby:#ff4d6d; --flame:#ff8a3d; --flame-in:#ffd866; --gold:#ffcf4a; --gold-soft:#3b3417; --boss:#9fb8ff; --boss-soft:#222f57; --on-solid:#0f1a2e; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f1a2e; --grid:#182640; --card:#16233d; --ink:#eaf1ff; --soft:#9db0d0; --line:#2c4166;
  --pen:var(--brand-2); --pen-fg:#06142a; --pen-soft:#1d3358; --biro:var(--brand-2); --accent:var(--brand-2); --accent-soft:#1b3350;
  --red:#ff9188; --red-soft:#3a2321; --green:#7fdca9; --green-soft:#1d3a2c; --ruby:#ff4d6d; --flame:#ff8a3d; --flame-in:#ffd866; --gold:#ffcf4a; --gold-soft:#3b3417; --boss:#9fb8ff; --boss-soft:#222f57; --on-solid:#0f1a2e; color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px; background-position:-1px -1px;
  color:var(--ink); font:16px/1.5 var(--f-ui);
}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px;padding-block:20px 56px}
h1{font:700 clamp(2.4rem,9vw,3.4rem)/1 var(--f-hand);margin:4px 0 12px;text-wrap:balance;color:var(--biro)}
h2{font:700 1.9rem/1.1 var(--f-hand);margin:0 0 10px;text-wrap:balance}
.kicker{font:600 .75rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0}
.lead{max-width:34em;color:var(--soft);margin:0 0 20px}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:6px;padding:18px}
.setup{display:grid;gap:18px}
fieldset.group{border:0;padding:0;margin:0;min-width:0}
fieldset.group legend{font:600 .8rem var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);padding:0;margin-bottom:8px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;display:block}
.pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill span{display:block;padding:10px 14px;border:1.5px solid var(--line);border-radius:6px;background:var(--card);min-height:44px}
.pill input:checked+span{border-color:var(--pen);background:var(--pen-soft);box-shadow:inset 0 0 0 1px var(--pen)}
.pill input:focus-visible+span{outline:3px solid var(--pen);outline-offset:2px}
.topics{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.topics li{font-size:.85rem;color:var(--soft);border:1px dashed var(--line);border-radius:999px;padding:3px 10px}
.btn{font:600 1rem var(--f-ui);padding:12px 22px;min-height:48px;border-radius:6px;border:1.5px solid var(--pen);background:var(--pen);color:var(--pen-fg);cursor:pointer}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--pen)}
.link{font:500 .9rem var(--f-ui);background:none;border:0;color:var(--soft);text-decoration:underline;cursor:pointer;padding:8px 0}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--pen);outline-offset:2px}
.qbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.qcount{font:800 1.7rem var(--f-ui);color:var(--brand)}
:root[data-theme="dark"] .qcount,:root[data-theme="dark"] .rndfx{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .qcount,:root:not([data-theme="light"]) .rndfx{color:#fff}}
.prog{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px}
.sq{width:16px;height:16px;border:1.5px solid var(--line);background:var(--card);border-radius:2px}
.sq.done{background:var(--pen-soft);border-color:var(--pen)}
.sq.ok{background:var(--s-ok);border-color:var(--s-ok)}   /* верен / грешен — цветовете на родителския изглед (tokens.css --s-*) */
.sq.bad{background:var(--s-att);border-color:var(--s-att)}
.sq.cur{border:2.5px solid var(--pen)}
.sec{font:600 .75rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.ask{font-size:1.1rem;margin:6px 0 12px}
.expr{
  font-family:var(--f-math);font-size:clamp(1.3rem,5.4vw,2.1rem);line-height:1.5;color:var(--biro);
  padding:12px 16px;border:1.5px solid var(--line);border-radius:4px;overflow-x:auto;white-space:nowrap;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;background-color:var(--card);
}
.expr i,.mth i,.preview i{font-style:italic}
sup{font-size:.64em;line-height:0;position:relative;top:-.7em;vertical-align:baseline;margin-left:.05em}
.op{margin-inline:.28em}
.and{font-family:var(--f-ui);font-size:.7em;margin-inline:.5em;color:var(--soft)}
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.78em;line-height:1.05;margin-inline:.08em}
.fr>span:first-child{border-bottom:1.5px solid currentColor;padding-inline:.15em;padding-bottom:.1em}
.fr>span:last-child{padding-inline:.15em;padding-top:.18em}
.fr sup{line-height:0;font-size:.7em}
.fr>span:last-child:has(sup){padding-top:.4em}
.fr>span:first-child:has(sup){padding-top:.35em}
.mth{font-family:var(--f-math)}
.answer{margin-top:16px}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.opt{font:inherit;background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:6px;padding:12px 14px;min-height:50px;cursor:pointer;text-align:center}
.opts.wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.opt.m{font-family:var(--f-math);font-size:1.3rem;text-align:left;overflow-x:auto}
.lt{display:inline-block;min-width:1.9em;font:700 1rem var(--f-ui);color:var(--soft)}
.opt[aria-pressed="true"]{border-color:var(--pen);background:var(--pen-soft);box-shadow:inset 0 0 0 1px var(--pen)}
.opt.is-correct{border-color:var(--s-ok);background:var(--t-ok);box-shadow:inset 0 0 0 1px var(--s-ok)}
.opt.is-wrong{border-color:var(--s-att);background:var(--t-att);box-shadow:inset 0 0 0 1px var(--s-att)}
.opt:disabled{cursor:default;color:var(--ink)}
.lbl{display:block;font:600 .8rem var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.ans{width:100%;font:1.4rem var(--f-math);padding:10px 12px;border:1.5px solid var(--soft);border-radius:4px;background:var(--card);color:var(--ink)}
.ans:disabled{opacity:.75}
.preview{font-family:var(--f-math);font-size:1.3rem;min-height:2em;color:var(--soft);padding-top:6px;overflow-x:auto;white-space:nowrap}
.keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.key{min-width:44px;height:44px;padding:0 10px;font:1.15rem var(--f-math);border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;cursor:pointer}
.key.v{font-style:italic}
.key:disabled{opacity:.45;cursor:default}
.err{color:var(--t-att-ink);font-weight:500;margin:8px 0 0}
.fb{margin-top:16px;padding:12px 14px;border-radius:6px;border:1.5px solid var(--line)}
.fb.ok{border-color:var(--s-ok);background:var(--t-ok)}
.fb.bad{border-color:var(--s-att);background:var(--t-att)}
.mark{font:700 1.9rem/1.1 var(--f-hand)}
.fb.ok .mark{color:var(--t-ok-ink)}
.fb.bad .mark{color:var(--t-att-ink)}
.fb .line{margin:6px 0 0}
.fb .right{font-family:var(--f-math);font-size:1.3rem}
.actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.score{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:18px}
.grade{flex:none;width:118px;height:118px;border:4px solid var(--s-att);border-radius:50%;display:grid;place-items:center;font:700 4.6rem/1 var(--f-hand);color:var(--t-att-ink);transform:rotate(-6deg)}
.score p{margin:0}
.big{font:700 2rem/1.1 var(--f-hand)}
.trow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line)}
.trow:last-child{border-bottom:0}
.trow .prog{margin:0;justify-content:flex-end}
.review{margin-top:16px}
.review summary{cursor:pointer;font-weight:600;padding:8px 0}
.rv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.rv .n{font:700 1.3rem var(--f-hand);color:var(--soft)}
.rv .mth{font-size:1.2rem;min-width:0;overflow-x:auto}
.rv .st{grid-column:2;font-size:.95rem}
.rv .st.why{color:var(--soft);font-size:.92rem}
.rv .st.ok{color:var(--t-ok-ink)}
.fb .line b{font-weight:600}
.fb .why{font-size:.95rem}
.rv .st.bad{color:var(--t-att-ink)}
.rv .st .mth{display:inline;font-size:1.1rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.today{margin:0;font-size:1rem}
.topics.hot li{border-style:solid;border-color:var(--pen);color:var(--pen)}
h3{font:700 1.45rem/1.1 var(--f-hand);margin:0 0 8px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.ch4{margin:14px 0 8px;font-size:.95rem}
.ct{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);min-width:0;font:inherit;color:inherit;text-align:center}
.ct.won{border-color:var(--pen)}
.ct.pos{border:2.5px solid #2fa85a;background:rgba(47,168,90,.10)}.ct.eq{border:2.5px solid #e0a020;background:rgba(224,160,32,.10)}.ct.neg{border:2.5px solid #e5384c;background:rgba(229,56,76,.10)}
.ct .cb .l,.ct .cb .w{font-style:normal}
.ct .cth{width:56px;height:56px}
.ct .cth svg{width:100%;height:100%}
.ct .cn{font-size:.74rem;line-height:1.15;overflow-wrap:normal;word-break:normal;max-width:100%}
.ct .cb{font-size:.82rem;font-weight:800}
.ct .cb em{font-style:normal;color:inherit;margin:0 2px}
.ct.pos .cb,.ct.pos .cb i{color:#2fa85a}
.ct.neg .cb,.ct.neg .cb i{color:#e5384c}
.ct.eq .cb,.ct.eq .cb i{color:#c98a10}
i.w{font-style:normal;color:var(--t-ok-ink);font-weight:800}i.l{font-style:normal;color:var(--t-att-ink);font-weight:800}
.ct[hidden]{display:none}.ct.more{cursor:pointer;border-style:dashed}.ct .plus{display:flex;width:56px;height:56px;border-radius:50%;align-items:center;justify-content:center;background:var(--pen-soft);font:900 1.2rem var(--f-hand,inherit)}
.collov{position:fixed;inset:0;z-index:9000;background:rgba(10,20,40,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.collbox{position:relative;background:var(--card);color:var(--ink);border-radius:18px;padding:18px 14px 14px;max-width:560px;width:100%;max-height:85vh;overflow:auto}
.collbox h3{margin:0 34px 12px 4px}.collbox .rx{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:1rem;cursor:pointer}
.ct.un .cth{filter:brightness(0) opacity(.28)}
.ct.un .cb,.ct.un .cn{color:var(--soft);font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--card);border:1.5px solid var(--line);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tl{font:600 .72rem var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.tv{font:700 2.2rem/1.1 var(--f-hand);font-variant-numeric:tabular-nums}
.trend{margin:0 0 14px}
.chartcard{display:grid;gap:10px;margin-bottom:14px}
.chartwrap{position:relative}
.svg{display:block;width:100%;height:auto}
.svg .gl{stroke:var(--grid);stroke-width:1}
.svg .ax{fill:var(--soft);font:12px var(--f-ui)}
.svg .val{fill:var(--ink);font:600 13px var(--f-ui)}
.svg .ln{fill:none;stroke:var(--pen);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.svg .dot{fill:var(--pen);stroke:var(--card);stroke-width:2}
.svg .bar{fill:var(--pen)}
.svg .bar.on{opacity:.7}
.svg .xh{stroke:var(--soft);stroke-width:1}
.svg .hit{fill:transparent;cursor:crosshair}
.tip{position:absolute;top:0;transform:translateX(-50%);background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:6px;padding:7px 10px;font-size:.85rem;line-height:1.35;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:2}
.note{font-size:.85rem;color:var(--soft);margin:0}
.card+.card,.card+details.card{margin-top:14px}
.hard{display:grid;gap:12px;margin-bottom:10px}
.hn{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between}.hard .hn{flex-wrap:nowrap}.hard .hn>span{flex:1;min-width:0}.hard .hn .btn,.tbl .btn{flex:none;min-height:34px;padding:4px 12px;font-size:.88rem}
.badge{font:600 .72rem var(--f-ui);border:1px solid var(--pen);color:var(--pen);border-radius:999px;padding:1px 8px}
.hb{height:10px;background:var(--grid);border-radius:2px;margin:5px 0 3px;overflow:hidden}
.hb span{display:block;height:100%;background:var(--s-att)}
.hm{font-size:.85rem;color:var(--soft)}
.tblw{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font:600 .75rem var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);padding:6px 10px 6px 0;border-bottom:1.5px solid var(--line)}
.tbl td{padding:7px 10px 7px 0;border-bottom:1px dashed var(--line)}
.resetbox{margin-top:14px}
#startInfo{display:grid;gap:14px}
#startInfo:empty{display:none}
[hidden]{display:none!important}

/* ---- top bar ---- */
.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1.5px solid var(--line)}
.topin{max-width:1120px;margin:0 auto;padding:8px 16px;display:grid;grid-template-columns:1fr auto auto auto auto auto;grid-template-areas:"logo sk xp prof user theme";gap:6px 12px;align-items:center}
.logo{grid-area:logo;justify-self:start;display:flex;align-items:center;gap:8px;font:700 1.75rem/1 var(--f-hand);color:var(--ink);background:none;border:0;cursor:pointer;padding:4px 0}
.logo .mk{width:32px;height:32px;border-radius:8px;background:var(--pen);color:var(--pen-fg);display:flex;align-items:center;justify-content:center;font:600 1.3rem/1 var(--f-math)}
.logo i{font-family:var(--f-math);font-style:italic;font-weight:600}.logo sup{font:700 .55em var(--f-ui);top:-.75em;margin-left:.08em}.logo .lt2{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}.logo .slogan{font:500 .72rem/1 var(--f-ui);letter-spacing:.02em;color:var(--soft)}.logo .lg{flex:none;border-radius:0;overflow:visible}
.logo .wm{color:var(--biro);font-size:1.9rem;line-height:.95}.logo .mk{width:40px}.logo .mk sup{font-size:.5em;top:-.45em;margin-left:1px}
.iconbtn{grid-area:theme;width:44px;height:44px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.iconbtn .ic{width:22px;height:22px}
.iconbtn#btnUser{grid-area:user;width:auto;min-width:44px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px;font:600 .9rem var(--f-ui)}
#btnUser[hidden]{display:none}
#btnUser .ulab{display:none}
#btnUser img{width:30px;height:30px;border-radius:50%;display:block}
#btnUser.in{padding:0 6px}
@media (min-width:760px){#btnUser:not(.in) .ulab{display:inline}}
.userpop{position:fixed;top:64px;right:max(12px,calc((100vw - 1120px)/2 + 16px));z-index:70;width:min(300px,calc(100vw - 24px));background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 10px 32px rgba(0,0,0,.28)}
.userpop[hidden]{display:none}
.userpop .un{font-weight:700}.userpop .ue{color:var(--soft);font-size:.85rem;word-break:break-all}
.userpop .us{margin:10px 0;font-size:.85rem;color:var(--soft)}
.userpop .us.err{color:#c0392b}
.userpop .btn{width:100%;margin-top:6px}
.nav{grid-area:nav;display:flex;gap:6px}
.tab{flex:1;font:600 .95rem var(--f-ui);padding:8px 10px;min-height:44px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.tab[aria-current="page"]{border-color:var(--pen);background:var(--pen-soft);color:var(--pen)}
@media (min-width:760px){
  .topin{grid-template-columns:1fr auto auto auto}
}
.ic{width:1.25em;height:1.25em;fill:currentColor;flex:none;vertical-align:-.25em}
.narrow{max-width:760px;margin-inline:auto}
.wrap{padding-block:18px 56px}
/* ---- pages ---- */
.dash{display:grid;gap:14px;align-items:start}
.col{display:grid;gap:14px;min-width:0}
.col>.card{margin-top:0!important}
@media (min-width:900px){
  .dash{grid-template-columns:390px minmax(0,1fr);gap:22px}
}
.streak{display:flex;align-items:center;gap:14px}
.icf{color:var(--flame)}.bigflame{width:72px;height:72px;color:var(--flame)}
.bigflame.off{color:var(--line);--flame-in:var(--card)}
.streak .num{font:700 3.4rem/1 var(--f-hand)}
.streak .sub{color:var(--soft);font-size:.9rem}
.streak .side{margin-left:auto;text-align:right;font-size:.85rem;color:var(--soft);display:grid;gap:4px}
.streak .side b{color:var(--ink);font-size:1rem}
.msg{margin:12px 0 0}
.chip.today{border-color:var(--accent);color:var(--accent)}
.chip{display:inline-block;font:600 .72rem var(--f-ui);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--pen);color:var(--pen);border-radius:999px;padding:2px 10px}
.chip.boss{border-color:var(--boss);color:var(--boss)}
.chip.good{border-color:var(--s-ok);color:var(--t-ok-ink)}
.chip.bad{border-color:var(--s-att);color:var(--t-att-ink)}
.chip.mute{border-color:var(--line);color:var(--soft)}
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.stars .ic{width:20px;height:20px;color:var(--gold)}
.stars .ic.off{color:var(--line)}
.stars.lg .ic{width:34px;height:34px}
.stars.sm .ic{width:15px;height:15px}
.tcard h3,.panel h3{margin:6px 0 4px;font-size:1.7rem}
.tcard p,.panel p{margin:0 0 10px}
.calh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.calh h3{margin:0;text-transform:capitalize}
.calh .iconbtn{width:40px;height:40px;grid-area:auto}
.calh .iconbtn:disabled{opacity:.35;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .wd{font:600 .68rem var(--f-ui);text-align:center;color:var(--soft);text-transform:uppercase;padding-bottom:2px}
.cd{aspect-ratio:1/1;min-height:40px;border-radius:8px;border:1.5px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:.72rem;line-height:1.1;color:var(--soft);position:relative}
.cd .ic{width:20px;height:20px}
.cd.in{border-color:var(--line);background:var(--card)}
.cd.out{opacity:.4}
.cd.fl{background:var(--gold-soft);border-color:var(--flame);color:var(--ink)}
.cd.boss{border-color:var(--boss)}
.cd .kb{color:var(--boss)}
.cd.today{box-shadow:0 0 0 2px var(--pen)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:.8rem;color:var(--soft)}
.legend span{display:inline-flex;align-items:center;gap:4px}
.legend .ic{width:16px;height:16px}
.trailcard{padding:0!important;overflow:hidden;overflow:clip}   /* clip не прави скрол контейнер → залепеният фон (.trbg) работи */
#pathTrail{min-width:0;margin-bottom:14px}
.toprow{display:grid;gap:14px;margin-bottom:14px;align-items:stretch}
#shopBox:not(:empty){margin-bottom:14px}
.shophead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.shophead h3{margin:0}
#shopBox:not(:empty){position:fixed;inset:0;z-index:60;display:grid;place-items:center}
.hfull{position:relative;transform:translateZ(0);-webkit-overflow-scrolling:touch;width:100%;height:100%;overflow:auto;background:var(--paper,var(--card));padding:14px 14px 28px;overscroll-behavior:contain}
.hfull>.card{box-shadow:none;border:0;background:transparent;padding:0!important;max-width:760px;margin:0 auto}
.hfull .shophead{position:sticky;top:0;z-index:2;background:var(--paper,var(--card));padding:6px 0 8px}
.mprev{display:flex;flex-direction:column;align-items:center;margin:0 auto 6px;max-width:760px}
.qpane .card{position:relative}
.rndfx{position:absolute;left:0;right:0;top:26px;text-align:center;font:900 clamp(2.8rem,11vw,4rem) var(--f-ui);color:var(--brand);opacity:0;pointer-events:none;z-index:2}
.card.rndgo .rndfx{animation:rndb 1.4s ease forwards}
.card.rndgo>:not(.rndfx){animation:rndc 1.4s ease both;pointer-events:none;transition:opacity .16s ease}.ptip.out{opacity:0}
@keyframes rndb{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1)}58%{opacity:1;transform:scale(1.05)}82%{opacity:0;transform:scale(1.12)}100%{opacity:0}}
@keyframes rndc{0%,52%{opacity:0}85%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.card.rndgo .rndfx,.card.rndgo>:not(.rndfx){animation:none}}
.contbtn{background:#d03c3c!important;border-color:#d03c3c!important;color:#fff!important;display:block;width:100%;margin-top:12px;padding:14px 16px;font-size:1.15rem;font-weight:800}
.qacts{display:flex;gap:8px;flex-wrap:nowrap}.qacts{align-items:stretch}.qacts .btn{flex:1 1 0;width:50%;min-width:0;padding-left:8px;padding-right:8px;white-space:normal;line-height:1.2;text-align:center;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.mprev{position:relative;flex-wrap:wrap}
.rbar{flex:1 1 100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 4px;margin:0;border-radius:0;background:none;color:var(--ink);font:700 .95rem var(--f-ui);font-style:normal;border-bottom:1px solid var(--line)}
.rbar .rbl{color:var(--soft);font-weight:600}
.rbar .cprice{font:800 1.1rem var(--f-ui);font-style:normal;margin-left:0}.rbar .cprice .ic{width:20px;height:20px}
.mprev .stabs{flex:1 1 100%;margin:2px 0 10px;display:grid;grid-template-columns:48px repeat(3,minmax(0,1fr));gap:5px}
.mprev .stab[data-s=ward] .ic{width:20px;height:20px;display:block;margin:0 auto;color:inherit}
.mprev .stab{padding:7px 2px;font-size:.84rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:340px){.mprev .stab{font-size:.74rem;padding:7px 0}}
.mprev .stab[data-s=ward]{background:var(--pen)!important;color:#fff!important;border-color:var(--pen)!important;opacity:.85}
.mprev .stab[data-s=ward][aria-selected=true]{opacity:1;box-shadow:0 0 0 3px var(--pen-soft)}
.wbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 4px 8px;font-weight:700;color:var(--soft)}
.rbar.tbar{padding:2px 4px 6px;border-bottom:0;letter-spacing:.08em}
.mprev{border-bottom:2px solid var(--pen)!important}
.btn.buy{display:inline-flex;align-items:center;gap:14px;padding-right:14px}
.btn.buy .bp{display:inline-flex;align-items:center;gap:4px;font-weight:800}
.btn.buy .bp .ic{width:16px;height:16px;color:#fff;--gem-x:var(--pen)}
.ifoot .cprice{padding-right:14px}
.rbar .rbt,.chead .rbt{font:800 .9rem var(--f-ui);font-style:normal;color:var(--pen);letter-spacing:.02em}
.rbar.tbar .mclose{display:inline-flex;align-items:center;gap:6px;letter-spacing:0;min-height:34px;padding:4px 14px}
.rbar.tbar .mclose .ic{width:16px;height:16px}
.icard{flex-wrap:wrap}.icard .iname{flex:1 1 100%}
.icard .ifoot{flex:1 1 100%;display:flex;justify-content:flex-end;align-items:center;gap:10px;min-height:8px}
.ifoot .acts{width:auto!important;justify-content:flex-end}
.cprice{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-style:normal;color:var(--pen);margin-left:auto}
.ifoot .acts+.cprice{margin-left:0}
.cprice .ic{width:18px;height:18px;color:var(--pen);--gem-x:var(--pen-fg)}
.cprice.bought,.cprice.bought .ic{color:#1d6b3d}.cprice.bought{font-size:.9rem}
.mprev{flex-direction:row;align-items:center;justify-content:center;gap:16px}
.mhero{display:flex;flex-direction:column;align-items:center;flex:none}
.mst{flex:1;min-width:0;max-width:340px;display:flex;flex-direction:column;gap:7px}
.mrow{border-radius:10px;padding:2px 4px}
.mrt{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:.82rem;font-weight:600;color:var(--soft)}
.mrt .ml{display:inline-flex;align-items:center;gap:5px}.mrt .ml .ic{width:16px;height:16px}
.mrt .mt{color:var(--ink);text-align:right}.mrt .mt em{font-style:normal;color:var(--soft);font-weight:500;margin-left:4px}
.mrt .mt .neg{color:#d03c3c}
.mb{position:relative;display:block;height:10px;background:var(--grid);border-radius:99px;overflow:hidden;margin-top:3px}
.mb .mf,.mb .mg{position:absolute;top:0;bottom:0;display:block;transition:width .5s ease}
.mb .mf{left:0}.mb .mg{opacity:.55;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 4px,transparent 4px 8px);animation:mgs 1s linear infinite}
@keyframes mgs{to{background-position:16px 0}}
.mrow.willmax .mb{box-shadow:0 0 0 2px #ffd04a,0 0 10px 2px rgba(255,208,74,.8);animation:mwm 1s ease-in-out infinite}
@keyframes mwm{50%{box-shadow:0 0 0 2px #ffd04a,0 0 16px 5px rgba(255,208,74,1)}}
.mrow.maxfx{animation:mfx 1.6s ease-out 1;position:relative}
.mrow.maxfx::after{content:"МАКС! ★";position:absolute;right:4px;top:-12px;font:800 .8rem var(--f-ui);color:#b87800;background:#ffe08a;border-radius:99px;padding:1px 8px;animation:mpop 1.6s ease-out 1 forwards}
@keyframes mfx{0%{transform:scale(1);background:rgba(255,208,74,0)}20%{transform:scale(1.07);background:rgba(255,208,74,.55)}60%{transform:scale(1.03);background:rgba(255,208,74,.3)}100%{transform:scale(1);background:rgba(255,208,74,0)}}
@keyframes mpop{0%{opacity:0;transform:translateY(8px) scale(.6)}25%{opacity:1;transform:translateY(0) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
@media (max-width:759px){.mprev{gap:10px}.mst{gap:3px}.mrt{font-size:.74rem}.mb{height:8px;margin-top:2px}}
@media (prefers-reduced-motion:reduce){.mrow.willmax .mb,.mb .mg,.mrow.maxfx{animation:none}}
.mprev+.card .shophead{position:static}
.mleft{display:contents}
@media (min-width:900px) and (min-height:560px){
#shopBox:not(:empty){padding:20px}
.hfull{width:min(1080px,100%)!important;height:min(90vh,820px)!important;max-height:none!important;overflow:hidden;display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:28px;align-content:stretch;padding:22px 26px}
.hfull>.mprev{display:contents}
.hfull .mleft{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;align-items:center;gap:14px;align-self:start;overflow:auto;max-height:100%}
.hfull .mleft .mst{max-width:none;width:100%;flex:none}
.hfull .mleft .mhero .hero{width:170px}
.hfull .mprev .rbar.tbar{grid-column:2;grid-row:1}
.hfull .mleft .rbar{flex:none;width:100%;box-sizing:border-box;margin-top:4px;padding:12px 16px;border:2px solid var(--pen);border-radius:14px;background:var(--pen-soft);border-bottom:2px solid var(--pen)}
.hfull .mleft .rbar .rbl{font-size:1rem;color:var(--ink)}.hfull .mleft .rbar .cprice.big{font-size:1.6rem}.hfull .mleft .rbar .cprice .ic{width:30px;height:30px}
.hfull .mprev .stabs{grid-column:2;grid-row:2;margin:0 0 8px;padding-bottom:10px;border-bottom:2px solid var(--pen)}
.hfull>.card{grid-column:2;grid-row:3;overflow-y:auto;min-height:0;max-width:none;margin:0;padding-right:6px!important}
.hfull>.card.shopcard{width:auto}
}
@media (max-width:759px){.mprev{position:sticky;top:-14px;z-index:3;background:var(--paper);margin:-14px -14px 6px;padding:8px 14px;max-width:none;border-bottom:1px solid var(--line)}.mprev .hero{width:92px}.mprev .herocap{display:none}}
@media (min-width:760px){#shopBox:not(:empty){padding:16px}.hfull{width:min(760px,100%);height:auto;max-height:92vh;border-radius:14px;border:1.5px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.35)}}
@media (max-width:559px){.hpop{padding:0}.hpop-card{width:100%;height:100%;max-height:none;border-radius:0}}
.hbtns{display:flex;gap:8px;margin-top:12px;align-self:stretch}
.hbtns .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.hbtns .ic{width:18px;height:18px}
#heroBox{display:none}
.trailx{overflow:visible;cursor:auto}
.trailx::-webkit-scrollbar{display:none}
.trailx:focus-visible{outline:3px solid var(--pen);outline-offset:-3px}
.trail{position:relative;margin:0 auto}
.nlab{flex-direction:column;align-items:center;gap:1px}
.trail .conn{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.conn path{fill:none;stroke:var(--line);stroke-width:4;stroke-dasharray:1 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.conn path.on{stroke:var(--pen);stroke-dasharray:none}
.node{position:absolute;transform:translateX(-50%);width:66px;height:66px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;font:700 1.9rem/1 var(--f-hand);color:var(--pen-fg);background:var(--pen);box-shadow:0 5px 0 rgba(0,0,0,.28);padding:0}
.node .ic{width:30px;height:30px}
.node:active{transform:translateX(-50%) translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.node.boss{width:84px;height:84px;background:var(--boss)}

.node.s-today-done,.node.s-done{background:var(--pen)}
.node.boss.s-today-done,.node.boss.s-done{background:var(--boss)}
.node.boss.s-locked{background:var(--boss-soft);color:var(--boss);box-shadow:0 5px 0 var(--boss);border:2px dashed var(--boss)}
.node.s-locked{background:var(--grid);color:var(--soft);box-shadow:0 5px 0 var(--line)}
.node.s-missed{background:var(--t-att);color:var(--t-att-ink);box-shadow:0 5px 0 var(--s-att);border:2px solid var(--s-att)}
.node.s-today{background:var(--accent);color:#2a1700}
.node.s-today::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--accent);opacity:.5;animation:pulse 1.8s ease-out infinite}
.node.boss.s-today{background:var(--boss);color:var(--on-solid)}.node.boss.s-today::after{border-color:var(--boss)}
@keyframes pulse{from{transform:scale(.9);opacity:.7}to{transform:scale(1.18);opacity:0}}
.node.sel{outline:3px solid var(--ink);outline-offset:4px}
.node.eh{background:var(--card);border:3px solid var(--pen);box-shadow:0 5px 0 rgba(0,0,0,.28)}
.node.eh.s-today{border-color:var(--accent);background:var(--card)}
.node.eh.s-locked{border-color:var(--line);background:var(--grid);border-style:solid}
.node.eh.s-missed{border-color:var(--s-att);background:var(--t-att)}
.node.s-today,.node.eh.s-today{border-color:#f5b800!important;animation:sunGlow 2.4s ease-in-out infinite;z-index:2}
.node.s-today::after,.node.boss.s-today::after{inset:-14px;border:0;opacity:1;background:radial-gradient(circle,rgba(255,200,40,.55) 0%,rgba(255,200,40,.22) 45%,rgba(255,200,40,0) 70%);animation:sunHalo 2.4s ease-in-out infinite;pointer-events:none;z-index:-1}
@keyframes sunGlow{0%,100%{box-shadow:0 5px 0 rgba(0,0,0,.28),0 0 10px 2px rgba(255,190,30,.55)}50%{box-shadow:0 5px 0 rgba(0,0,0,.28),0 0 24px 8px rgba(255,200,40,.85)}}
@keyframes sunHalo{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.18);opacity:1}}
.node.s-today::before{content:"";position:absolute;inset:-38px;border-radius:50%;z-index:-2;pointer-events:none;background:repeating-conic-gradient(from 0deg,rgba(255,190,20,.95) 0 7deg,rgba(255,190,20,0) 7deg 20deg);-webkit-mask:radial-gradient(circle,transparent 46%,#000 50%,rgba(0,0,0,.5) 70%,transparent 100%);mask:radial-gradient(circle,transparent 46%,#000 50%,rgba(0,0,0,.5) 70%,transparent 100%);animation:sunSpin 16s linear infinite,sunPulse 2.4s ease-in-out infinite}
.node.boss.s-today::before{inset:-44px;-webkit-mask:radial-gradient(circle,transparent 56%,#000 60%,rgba(0,0,0,.5) 76%,transparent 100%);mask:radial-gradient(circle,transparent 56%,#000 60%,rgba(0,0,0,.5) 76%,transparent 100%)}
.node.s-today::after,.node.boss.s-today::after{inset:-30px!important;z-index:-1!important;background:radial-gradient(circle,rgba(255,215,60,.9) 0%,rgba(255,200,40,.5) 40%,rgba(255,200,40,0) 70%)!important}
.node.s-today{z-index:1!important}.nlab{z-index:3}
.node.s-today::before{inset:-32px}
@keyframes sunSpin{to{transform:rotate(360deg)}}
@keyframes sunPulse{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.node.s-today,.node.s-today::after,.node.s-today::before{animation:none!important}}
.nh{width:100%;height:100%;display:block;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff,#cfe3ff)}
.nh.q{width:56px;height:56px;flex:none}.nh.bru .oe{display:none}.nh.bru .ox{display:block}
.node.s-locked .nh{filter:grayscale(.75) brightness(.95) opacity(.8)}
.nh .ow,.nh .jaw,.nh .oe{animation:none!important}
.nbadge{position:absolute;right:-6px;bottom:-4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--line);color:var(--soft)}
.nbadge .ic{width:15px;height:15px}.nbadge.m{border-color:var(--s-att);color:var(--s-att)}.nbadge.d{border-color:var(--s-ok);background:var(--s-ok);color:var(--s-ink)}.nbadge.c{border-color:var(--boss);color:var(--boss)}
.node.boss.eh,.node.boss.eh.s-locked,.node.boss.eh.s-missed,.node.boss.eh.s-today,.node.boss.eh.s-done,.node.boss.eh.s-today-done{width:112px!important;height:112px!important;border-radius:50%!important;border:4px solid var(--boss)!important;background:var(--card)!important;box-shadow:0 6px 0 rgba(0,0,0,.28)!important}
.node.boss.eh.s-locked{border-style:dashed!important;border-color:var(--line)!important}
.node.boss.eh.s-missed{border-color:var(--s-att)!important}
.node.boss .nbadge{width:32px;height:32px;right:-2px;bottom:-2px}.node.boss .nbadge .ic{width:19px;height:19px}
.nlab{position:absolute;transform:translateX(-50%);font-size:.74rem;color:var(--soft);white-space:nowrap;display:flex;justify-content:center;pointer-events:none}
.node.pop .nh{animation:nHit 1s cubic-bezier(.2,1.4,.4,1) both}.node.pop{z-index:5}
.nlab.pop .stars .ic{opacity:0;animation:nStar .6s cubic-bezier(.2,1.8,.4,1) forwards}.nlab.pop .stars .ic:nth-child(1){animation-delay:.8s}.nlab.pop .stars .ic:nth-child(2){animation-delay:1.1s}.nlab.pop .stars .ic:nth-child(3){animation-delay:1.4s}
.nlab.pop .nrub{opacity:0;animation:nStar .6s 1.8s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes nHit{0%{transform:scale(1.5) rotate(-18deg);filter:brightness(2.2)}22%{transform:scale(.8) rotate(12deg);filter:brightness(1.3)}45%{transform:scale(1.1) rotate(-6deg);filter:none}70%{transform:scale(.96) rotate(2deg)}100%{transform:none}}
@keyframes nStar{0%{opacity:0;transform:scale(0) rotate(-60deg)}70%{opacity:1;transform:scale(1.4) rotate(8deg)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.node.pop .nh,.nlab.pop .stars .ic,.nlab.pop .nrub{animation-duration:.01s!important;animation-delay:0s!important}}
.cbd{font-weight:700;margin:10px 0 4px}.cblg{margin-top:8px;display:flex;gap:0;background:var(--grid);border-radius:12px;padding:3px}
.cbl{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;border:0;background:transparent;color:var(--soft);border-radius:10px;padding:8px 4px;font:700 .78rem var(--f-ui);cursor:pointer;white-space:nowrap}
.cbl .ic{width:16px;height:16px;flex:none}.cbl.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18)}.cbl.on .ic{color:var(--cc)}.cbsv{cursor:pointer}
.pt{display:grid;grid-template-columns:1fr auto 14px;gap:2px 10px;align-items:center;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}.pt:first-child{border-top:0}
.pt-l{display:flex;flex-direction:column;min-width:0}.pt-l small{color:var(--soft)}.pt-r{position:relative;font-size:1.1rem;align-self:center}.pt-st{position:absolute;right:0;top:100%;white-space:nowrap;color:var(--gold);font-size:.8rem;line-height:1}.pt.hs{padding-bottom:20px}
.pt-go,.hgo{font:700 1.7rem/1 var(--f-ui);color:var(--pen);text-align:right;display:block}.pt-go{width:14px}
.pt-tab{display:none}.pt-tab .par-t2{width:100%}
@media (min-width:760px){.pt-list{display:none}.pt-tab{display:block}.collov.sheet{align-items:center;padding:16px}.collov.sheet .collbox{border-radius:18px}}
.hr-b{cursor:pointer}.hr-b{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}.hr-b>.hn,.hr-b>.hb,.hr-b>.hm{grid-column:1}.hr-b>.hgo{grid-column:2;grid-row:1/4;align-self:center;width:14px}.hgo{white-space:nowrap}.hgo i{display:none;font-style:normal;font-size:.85rem}@media (min-width:760px){.hgo{font-size:1rem;display:inline;width:auto!important}.hgo i{display:inline}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.chipb{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:.85rem;cursor:pointer}
.collov.sheet{align-items:flex-end;padding:0}.collov.sheet .collbox{border-radius:18px 18px 0 0;max-width:640px;max-height:80vh;animation:shUp .25s ease}@keyframes shUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.par-rv summary{padding:8px 0}.rv-bad{color:var(--red);font-weight:700}.rv-t{display:block;color:var(--soft);font-size:.78rem;margin:0 0 2px}
.nfix{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--soft);font-size:.7rem}.nfix .ic{width:12px;height:12px}
.cd.mis::after{content:'×';position:absolute;top:1px;right:4px;font-size:.8rem;font-weight:700;color:var(--soft);opacity:.7;line-height:1}
.nrub{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:var(--pen);font-size:.78rem}.nrub .ic{width:14px;height:14px}
.older{display:block;margin:10px auto 0}
.panel .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.panel .actions{margin-top:12px}
.panel{position:relative}.panel.pdn .qrow>div{padding-right:46px}
.rtl{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:8px;font-size:1.05rem}.rtl li{display:flex;align-items:center;justify-content:center;gap:8px}.rtl .ic{width:26px;height:26px}.rtl .ic.on{color:var(--gold)}
.rtry{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;min-width:40px;height:40px;padding:0 10px;justify-content:center;border-radius:99px;border:1.5px solid var(--line);background:var(--fill);color:var(--pen);font:700 .9rem var(--f-ui);cursor:pointer}.rtry .ic{width:20px;height:20px}.rtry span{display:none}.rtry:active{filter:brightness(.95)}
@media (min-width:760px){.rtry span{display:inline}.panel.pdn .qrow>div{padding-right:140px}}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.pst{background:var(--fill);border-radius:12px;padding:8px 6px;text-align:center;min-width:0}.pst small{display:block;color:var(--soft);font-size:.74rem;margin-bottom:3px}.pst>div{display:flex;align-items:center;justify-content:center;gap:4px;min-height:26px;font-size:.82rem;color:var(--soft);white-space:nowrap}.pst b{font-size:1.05rem;color:var(--ink)}.pst .ic{width:18px;height:18px}.pst .stars .ic{width:17px;height:17px}.pst .stars{display:inline-flex;gap:1px}
.statline{margin-top:10px;color:var(--soft);font-size:.9rem}
.statline b{color:var(--ink)}
.rstars{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.qhead{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
#statsBox{min-width:0;margin-top:26px}
#statsBox>h2{margin-top:0}
@media (min-width:760px){.card{padding:22px}}
.xpill{grid-area:xp;display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);font:600 1.35rem/1 var(--f-math);color:var(--ink);white-space:nowrap}
.xpill .ic{width:26px;height:26px;color:var(--pen);--gem-x:var(--pen-fg)}
.xpill i{font-style:italic}
.xpill sup{font:700 .62em var(--f-ui);top:-.6em;margin-left:1px;color:var(--pen)}
.xpill.bump{animation:bump .7s ease}
@keyframes bump{30%{transform:scale(1.18)}}
.xgain{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;border:1.5px solid var(--pen);background:var(--pen-soft);border-radius:8px}
.xgain .ic{width:30px;height:30px;color:var(--pen);--gem-x:var(--pen-fg);flex:none}
.xgain b{font-size:1.15rem}
#heroBox{min-width:0}
.herocard{padding:12px!important;height:100%}
.herogrid{display:grid;gap:16px}
.herobox{display:flex;flex-direction:column;align-items:center;background:var(--pen-soft);border:1.5px solid var(--line);border-radius:10px;padding:12px}
.hero{width:100%;max-width:190px;height:auto;overflow:visible}
.herocap{margin-top:6px;text-align:center}
.stabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.stab{font:600 .9rem var(--f-ui);padding:7px 12px;min-height:40px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--soft);cursor:pointer}
.stab[aria-selected="true"]{border-color:var(--pen);background:var(--pen-soft);color:var(--pen)}
.items{display:grid;gap:8px}
.icard{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--card)}
.icard.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.icard.eq{border-color:var(--pen)}
.iname{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:4px 0;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.iname .pr{font-size:.85rem;color:var(--soft);display:inline-flex;align-items:center;gap:4px}
.iname .pr .ic{width:16px;height:16px;color:var(--pen);--gem-x:var(--pen-fg)}
.btn.sm{padding:8px 14px;min-height:40px;font-size:.9rem;white-space:nowrap}
.shop .ic{color:var(--pen);--gem-x:var(--pen-fg);width:18px;height:18px}
.hmsg{min-height:1.3em;margin-top:8px}
@media (min-width:760px){.herogrid{grid-template-columns:230px minmax(0,1fr);align-items:start}}
.bases{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.bsel{display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 2px 6px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--soft);font:600 .72rem var(--f-ui);cursor:pointer;min-width:0}
.bsel .hero{width:100%;max-width:62px}
.bsel[aria-checked="true"]{border-color:var(--pen);background:var(--pen-soft);color:var(--pen);box-shadow:inset 0 0 0 1px var(--pen)}
.lkgrid{display:grid;gap:14px;margin-top:6px}
@media (min-width:640px){.lkgrid{grid-template-columns:150px minmax(0,1fr);align-items:start}.lkprev{position:sticky;top:76px}}
.lkprev{display:flex;flex-direction:column;align-items:center;gap:8px}
.hfull .lkprev{position:sticky;top:var(--hh,56px);z-index:3;background:var(--paper,var(--card))}
@media (max-width:639px){.hfull .lkprev{flex-direction:row;justify-content:center;padding:6px 0;border-bottom:1px solid var(--line)}.hfull .lkprev .hero{width:84px}.hfull .shophead h3{font-size:1.1rem}}
.lkprev .hero{width:130px;max-width:100%}
.lkrow{margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{min-height:36px;padding:6px 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:600 .85rem var(--f-ui);cursor:pointer}
.opt.on{border-color:var(--pen);background:var(--pen-soft);color:var(--pen);box-shadow:inset 0 0 0 1px var(--pen)}
.opt.tb{width:64px;height:64px;padding:2px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.opt.tb .hero{width:100%;height:100%;max-width:none;overflow:hidden;border-radius:9px;background:var(--paper2,var(--card))}
.opt.sw{width:36px;padding:0;border-radius:50%;border:2px solid var(--line)}
.opt.sw.on{border-color:var(--pen);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--pen)}
.herobox{position:relative}
.bubble{align-self:stretch;margin-bottom:8px;padding:7px 10px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;font-size:.88rem;line-height:1.3;text-align:center;position:relative;animation:bubble 2.2s ease-in-out infinite}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--card);border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:translateX(-50%) rotate(45deg)}
@keyframes bubble{50%{transform:translateY(-2px)}}
.stats{align-self:stretch;display:grid;gap:6px;margin-top:10px}
.stat{display:grid;grid-template-columns:92px 1fr 34px;align-items:center;gap:8px;font-size:.85rem}
.stat .sl{display:flex;align-items:center;gap:5px;color:var(--soft);font-weight:600}
.stat .sl .ic{width:16px;height:16px}
.minis{display:none;align-self:stretch;justify-content:center;gap:22px;margin-top:8px;padding:8px 10px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.ringw{position:relative;width:46px;height:46px;display:inline-block;flex:none}
.ring{width:46px;height:46px;max-width:none;display:block}
.ring .rt{stroke:var(--grid)}
.ring .rp.f-gear{stroke:#e0a020}.ring .rp.f-sat{stroke:#e5384c}.ring .rp.f-str{stroke:var(--stat-str)}.ring .rp.f-hap{stroke:#2fa85a}
.ring .rp{fill:none;background:none!important}
.ri{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink)}
.ri .ic{width:18px;height:18px}
.ri-f-gear{color:#c98a10}.ri-f-sat{color:#e5384c}.ri-f-str{color:var(--stat-str)}.ri-f-hap{color:#2fa85a}
.frind .ri-f-sat{color:#e5384c}.frind .ri-f-str{color:var(--stat-str)}.frind .ri-f-hap{color:#2fa85a}
.hpop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.hpop[hidden]{display:none}
.hpop-bg{position:absolute;inset:0;background:rgba(10,16,40,.5)}
.hpop-card{position:relative;width:min(100%,380px);max-height:90vh;overflow:auto;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.lfs{display:grid;gap:8px;margin:10px 0 2px;width:100%}.lfr{display:flex;align-items:center;gap:8px}.lfi{flex:none;width:24px;height:24px;display:grid;place-items:center;color:#e5384c}.lfi svg{width:20px;height:20px}.lfb{flex:1;min-width:0}.lfb b{display:block;font-size:.8rem;margin-bottom:2px}.lfn{flex:none;font-weight:800;font-size:.85rem;min-width:44px;text-align:right}
.dscs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dsc{background:var(--fill);border-radius:14px;padding:10px 10px 12px;text-align:center;border:2.5px solid transparent}.dsc.win{border-color:#2fa85a;background:rgba(47,168,90,.12)}.dsc .dn{display:flex;align-items:center;justify-content:center;gap:4px;font-size:.95rem;margin-bottom:6px;overflow-wrap:anywhere}.dsc .dn svg{width:18px;height:18px;color:#e0a020;flex:none}.dsc .dl2{display:flex;justify-content:space-between;gap:6px;font-size:.78rem;padding:3px 0;border-bottom:1px dashed var(--line);text-align:left}.dsc{display:flex;flex-direction:column}.dsc .dt{margin-top:auto;padding-top:8px}.dsc .dt small{display:block;color:var(--soft);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}.dsc .dt b{font:700 2rem/1 var(--f-hand)}.dsc.win .dt b{color:#2fa85a}
.gl .gcs{position:relative;grid-template-columns:repeat(4,1fr);gap:0}.gl .gcs::before{content:"";position:absolute;left:12.5%;right:12.5%;top:25px;border-top:3px dashed var(--line);z-index:0}.gl .gc{position:relative;z-index:1}.gl .garr{position:absolute;right:-12px;top:14px;width:24px;height:24px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--soft);z-index:2}.gl .garr .ic{width:16px;height:16px}.gl .gdots{display:flex;gap:4px;height:14px}.gl .gdots i{width:14px;height:14px;border-radius:50%;background:var(--fill);border:2px solid var(--line);box-sizing:border-box;display:grid;place-items:center;color:#fff}.gl .gdots i.on{background:var(--accent);border-color:var(--accent)}.gl .gdots i .ic{width:9px;height:9px}.gl .gc.nx .gi{border-color:#e0a020;animation:gglow 1.3s ease-in-out infinite}@keyframes gglow{0%,100%{box-shadow:0 0 0 0 rgba(224,160,32,.0)}50%{box-shadow:0 0 0 5px rgba(224,160,32,.35),0 0 16px 4px rgba(255,200,60,.65)}}.gl .gmonth{position:relative}.gl .calx{position:absolute;right:2px;top:2px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:3}.gl .calx .ic{width:18px;height:18px;transform:rotate(90deg)}.gl .gmonth:not([open]) .calx{display:none}.gl .gmonth summary::after{content:" ⌄"}.gl .gmonth[open] summary{visibility:hidden;height:30px}.gl .gmonth[open] summary::after{content:""}
.chestov .chbox{position:relative;background:var(--card);color:var(--ink);border-radius:20px;padding:22px 16px 18px;width:min(320px,92vw);text-align:center}.chestov .rx{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}.chestov .chh{font:700 1.3rem var(--f-hand);margin:6px 0 4px}.chgift{position:relative;display:block;margin:14px auto 6px;width:150px;height:150px;border:0;background:none;cursor:pointer;animation:chshake 1.1s ease-in-out infinite}.chgift .chbx{position:absolute;left:20px;right:20px;bottom:10px;height:78px;border-radius:8px;background:linear-gradient(90deg,#e5384c 0 42%,#ffd23f 42% 58%,#e5384c 58%);border:3px solid #1d2440}.chgift .chlid{position:absolute;left:12px;right:12px;bottom:84px;height:28px;border-radius:8px;background:linear-gradient(90deg,#c92a3e 0 42%,#ffd23f 42% 58%,#c92a3e 58%);border:3px solid #1d2440;transition:transform .6s cubic-bezier(.2,.9,.3,1.2),opacity .6s}.chgift .chlid::before{content:"";position:absolute;left:50%;top:-22px;width:34px;height:22px;margin-left:-17px;border:4px solid #ffd23f;border-radius:50% 50% 0 0;box-sizing:border-box}.chgift .chrb{position:absolute;left:0;right:0;top:56px;display:flex;flex-direction:column;align-items:center;opacity:0;transform:scale(.2);color:var(--ruby);transition:transform .5s .25s cubic-bezier(.2,1.6,.4,1),opacity .3s .25s}.chgift .chrb .ic{width:58px;height:58px}.chgift .chrb b{font:800 1.6rem var(--f-ui);color:var(--ink)}.chconf{position:absolute;left:50%;top:50%;width:0;height:0}.chconf i{position:absolute;width:9px;height:9px;border-radius:2px;background:var(--c);opacity:0}.chdone{margin-top:12px;visibility:hidden}.chestov.open .chgift{animation:none;cursor:default}.chestov.open .chlid{transform:translate(30px,-80px) rotate(35deg);opacity:0}.chestov.open .chbx{opacity:.25;transition:opacity .5s}.chestov.open .chrb{opacity:1;transform:translateY(-34px) scale(1)}.chestov.open .chconf i{animation:chconf .9s ease-out forwards}.chestov.open .chdone{visibility:visible}@keyframes chconf{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d)*-1.6)) rotate(260deg)}}@keyframes chshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}@media(prefers-reduced-motion:reduce){.chgift{animation:none}}
.dpw{min-width:0}.dpw .dpwb{flex:1 1 0;min-width:14px;max-width:56px}.dpw b{flex:none}
.collbox .panel{display:flex;flex-direction:column}.collbox .panel .rtry{position:static;order:99;width:100%;height:46px;margin-top:12px;justify-content:center}.collbox .panel .rtry span{display:inline}
.collbox .panel{box-shadow:none;border:0;background:none;padding:0;margin:0}.collbox .panel .qrow{padding-right:34px}.nodeov .rx{z-index:5}
#pathTrail .gl{margin:0 0 10px}
@media (min-width:760px){#pathTrail .gl{margin:0;grid-column:1;grid-row:2}#pathTrail .hstripcard{grid-column:1;grid-row:1}#pathTrail .trailcard{grid-column:2;grid-row:1/span 2}}
.chn{margin:0 0 10px;font-weight:700}.chdone .actions{display:flex;gap:8px;justify-content:center}.chdone .chok{margin-top:8px;width:100%}
#pathTrail .htip{display:none}
#tabbar{display:none}
@media (max-width:759px){
body.ondash #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);border-top:1.5px solid var(--line);padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
body.ondash{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
#tabbar button{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;font:700 .68rem var(--f-ui);color:var(--soft);padding:4px 0;cursor:pointer}
#tabbar button svg{width:24px;height:24px}
#tabbar button.on{color:var(--accent)}#tabbar button .icf{color:var(--flame)}
#tabbar .tdot{position:absolute;top:2px;left:calc(50% + 8px);width:10px;height:10px;border-radius:50%;background:#e5384c;border:2px solid var(--card)}
#scrDash[data-tab=band] #pathTrail,#scrDash[data-tab=stats] #pathTrail,#scrDash .toprow{display:none}#scrDash[data-tab=hero] #dashA,#scrDash[data-tab=goals] #dashA{display:none}
#scrDash[data-tab=hero] .htip{display:block;margin:0 0 10px;padding:6px 14px}#scrDash .htr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}#scrDash .htr+.htr{border-top:1px solid var(--line)}#scrDash .htr p{margin:0;font-weight:700;font-size:.92rem}#scrDash .htr .btn{flex:none}#scrDash[data-tab=hero] .gl,#scrDash[data-tab=hero] .trailcard,#scrDash[data-tab=hero] #dashA,#scrDash[data-tab=hero] #dashB,#scrDash[data-tab=hero] #statsBox,#scrDash[data-tab=goals] .hstripcard,#scrDash[data-tab=goals] #dashA,#scrDash[data-tab=goals] #dashB,#scrDash[data-tab=goals] #statsBox,#scrDash[data-tab=band] .hstripcard,#scrDash[data-tab=band] .gl,#scrDash[data-tab=band] .trailcard,#scrDash[data-tab=band] #dashB,#scrDash[data-tab=band] #statsBox,#scrDash[data-tab=stats] .hstripcard,#scrDash[data-tab=stats] .gl,#scrDash[data-tab=stats] .trailcard,#scrDash[data-tab=stats] #dashA{display:none}
}
.pm-x{display:none}
@media (max-width:759px){
#profmenu.profmenu{max-height:none;height:auto;inset:0;top:0;right:0;left:0;bottom:0;min-width:0;border-radius:0;overflow:auto;padding:60px 14px calc(20px + env(safe-area-inset-bottom));z-index:9000;gap:4px}
.profmenu .pm-x{display:grid;place-items:center;position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:700 1.1rem var(--f-ui);cursor:pointer;z-index:2}
.ib.full{position:fixed;inset:0;z-index:9000;margin:0;border-radius:0;overflow:auto;padding:64px 16px calc(20px + env(safe-area-inset-bottom));background:var(--card)}
.ib.full .ib-h{display:block}.ib.full .ib-h>b{font-size:1.2rem}
.ib.full .ib-h>span{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;display:flex;gap:8px;z-index:2}
.ib.full .ib-h>span .btn[data-gift=close]{width:44px;height:44px;border-radius:50%;padding:0;font-size:1.1rem}
.ib.full .ib-l{max-height:none;overflow:visible}
.ib.full .ib-f{display:none!important}
}
.gl:has(.gmonth[open]) .gwk{display:none}.gl .gmonth[open]{margin-top:0;border-top:0}
.gl .gtp{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--card);font:700 .74rem var(--f-ui);padding:6px 10px;border-radius:10px;white-space:nowrap;z-index:5;pointer-events:none}
.top .xpill.spill{grid-area:sk}.spill .ic.icf{color:var(--flame);width:24px;height:24px}.spill .ic.off{opacity:.35}.spill sup{color:var(--flame)!important}.spill[hidden]{display:none}
.gl .glh{padding:0 8px 2px}.gl .glh h3{font-size:1.05rem}.gl .gi{width:42px;height:42px}.gl .gcs::before{top:23px}.gl .garr{top:12px}.gl .gwk{grid-template-columns:repeat(7,1fr) 36px;margin-top:8px}.gl .gmt{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}.gl .gmt .ic{width:16px;height:16px;transform:rotate(-90deg)}.gl .gmonth summary{display:none}.gl .gmonth{margin-top:0;border-top:0;padding-top:0}.gl .gmonth[open] summary{display:none}
.trailh{padding-top:8px}
.collbox>.rx{position:sticky;top:-10px;right:0;float:right;margin:-10px -6px 0 8px;z-index:6;box-shadow:0 2px 8px rgba(20,30,60,.18)}
.lg{--lgf:#1f4fc0;--lgp:#c9d5f4;--lgo:#ff8a00;--lgbg:var(--card)}:root[data-theme="dark"] .lg{--lgf:#fff;--lgp:#3a4670;--lgo:#ff9a1f}
:root:not([data-theme="dark"]) body.ondash #tabbar{background:var(--pen,var(--brand));border-top-color:transparent;box-shadow:0 -3px 12px rgba(20,40,110,.22)}:root:not([data-theme="dark"]) #tabbar button{color:rgba(255,255,255,.68)}:root:not([data-theme="dark"]) #tabbar button.on{color:#fff}:root[data-theme="dark"] body.ondash #tabbar{border-top-color:transparent;box-shadow:0 -3px 12px rgba(0,0,0,.35)}:root:not([data-theme="dark"]) #tabbar .tdot{border-color:var(--pen,var(--brand))}
#tabbar button .icf{color:currentColor}#tabbar button.on{color:var(--pen)}:root[data-theme="dark"] #tabbar button.on{color:#fff}#tabbar .tdot{background:#ff8a00}#tabbar button{--flame-in:var(--card)}:root:not([data-theme="dark"]) #tabbar button{--flame-in:var(--pen,var(--brand))}
.top .logo{padding:0}.top .topin{padding-top:5px;padding-bottom:5px}
.frd .btns .btn,.frd .fbtns .fbtn{height:44px;min-height:44px;padding:0 14px;border-radius:12px;font:700 1rem var(--f-ui);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.frd .btns .btn svg,.frd .fbtns .fbtn svg.ic{width:18px;height:18px;margin:0;vertical-align:0}.frd .fbtns{gap:8px;margin:12px 0 4px;grid-template-columns:repeat(2,minmax(0,1fr))}.frd .fbtns .fbtn{padding:0 8px}.frd .fbtns .fbtn{border-width:1.5px}
.gl .gc.nx .gi{position:relative;overflow:visible}.gl .gc.nx .gi::before{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 0deg,rgba(255,190,20,.95) 0 7deg,rgba(255,190,20,0) 7deg 20deg);-webkit-mask:radial-gradient(circle,transparent 40%,#000 46%,rgba(0,0,0,.5) 68%,transparent 100%);mask:radial-gradient(circle,transparent 40%,#000 46%,rgba(0,0,0,.5) 68%,transparent 100%);animation:sunSpin 16s linear infinite,sunPulse 2.4s ease-in-out infinite}.gl .gc.nx{z-index:2}
@media (max-width:759px){#pathTrail{display:flex;flex-direction:column;min-height:calc(100vh - 64px - 74px - 26px);min-height:calc(100dvh - 64px - 74px - 26px)}#pathTrail .trailcard{order:1;margin:0 0 10px;flex:1;display:flex;flex-direction:column}#pathTrail .trailcard .trailx{margin:auto 0}#pathTrail .gl{order:2;margin:0}#pathTrail .gl .glh{padding-bottom:10px}.node.s-today::before{inset:-26px;opacity:.6}}
.trailh .tst{display:flex;gap:6px;align-items:center}.trailh .tst b{display:inline-flex;align-items:center;gap:3px;padding:3px 9px 3px 6px;border-radius:999px;font:800 .85rem var(--f-ui);background:var(--fill)}.trailh .tst b .ic{width:16px;height:16px}.trailh .tst .ok{color:#14833b}.trailh .tst .no{color:#c23a3a}
#topfab{display:none;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:48px;height:48px;border:0;border-radius:50%;background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(20,40,110,.35);cursor:pointer;place-items:center;padding:0}body.onpar #topfab.on{display:grid}#topfab svg{width:26px;height:26px}
.node.s-today::before,.node.boss.s-today::before{inset:-12px;background:radial-gradient(circle,rgba(255,190,20,.0) 52%,rgba(255,190,20,.65) 62%,rgba(255,190,20,0) 80%);-webkit-mask:none;mask:none;animation:sunHalo 2.4s ease-in-out infinite}
.par-k{position:relative}.gchip{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;padding:0;border-radius:50%;border:1.5px dashed var(--line);background:var(--card);color:var(--soft);display:grid;place-items:center;cursor:pointer}.gchip>.ic{width:20px;height:20px}.gchip i{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:#fff;font:800 .8rem/16px var(--f-ui);font-style:normal;text-align:center;display:grid;place-items:center}.gchip i .ic{width:11px;height:11px}.gchip.on{border:1.5px solid #14833b;color:#14833b;background:#e3f4e8}.gchip.on i{background:#14833b}
.xbtn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;flex:none;display:grid;place-items:center;padding:0}.xbtn svg{width:18px;height:18px}
.hpop-card .shophead{position:sticky;top:0;z-index:3;background:var(--card);margin:-16px -16px 8px;padding:12px 16px 8px}
.prow{display:flex;gap:12px;align-items:center;margin-top:12px}
.ptx{flex:1;min-width:0;display:grid;gap:4px}
.ptx small{color:var(--soft);font-size:.8rem;line-height:1.3}
.how{margin-top:14px;font-size:.88rem;background:var(--fill);border-radius:14px;padding:12px}.how ul{margin:4px 0 0;padding-left:18px}.how li{margin:3px 0}.hrow{display:grid;grid-template-columns:118px 1fr 28px;gap:8px;align-items:center;margin:6px 0}.hrow b{text-align:right}.how .eq{margin:8px 0}.how .note{margin:8px 0 0}
.plist{margin-top:14px;font-size:.88rem}.plist ul{margin:6px 0 0;padding-left:18px}
.hpop .hbtns{margin-top:14px;flex-wrap:wrap}.hpop .hbtns .btn{flex:1 1 auto}
@media (max-width:899px){.stats,.herocap{display:none}.minis{display:flex}}
.dbar .p,.dbar.ob .p{background:linear-gradient(#ffe066,#f5a300)}.dbar .p.lo,.dbar.ob .p.lo{background:linear-gradient(#ff7a73,#d6312a)}.dbar .p.ex,.dbar.ob .p.ex{background:linear-gradient(#8ef0a0,#27ae4f)}.cmp .sb{position:relative}.sb .sx{position:absolute;top:0;display:block;height:100%;border-radius:0 99px 99px 0;background:linear-gradient(90deg,#8ef0a0,#27ae4f)}.sb{height:10px;background:var(--grid);border-radius:99px;overflow:hidden;display:block}
.sb span{display:block;height:100%;border-radius:99px}
.f-gear{background:#e0a020}.f-sat{background:#e5384c}.f-str{background:var(--stat-str)}.f-hap{background:#2fa85a}
.sv{text-align:right;font-variant-numeric:tabular-nums}
.acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn.warn{background:var(--accent);border-color:var(--accent);color:#2a1700}
.icard.worn{border-color:var(--s-att)}
.icard.unfit{opacity:.6;filter:grayscale(.85)}
.wr{font-style:normal;color:var(--t-att-ink);font-weight:600}
.hero .hb{animation:hbob 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes hbob{50%{transform:translateY(-2px) scaleY(1.012)}}
.hero.happy .hb{animation:hjump 1.1s ease-in-out infinite}
@keyframes hjump{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
.hero.sad .hb{animation:hsad 3.4s ease-in-out infinite}
@keyframes hsad{50%{transform:translateY(1.5px) scaleY(.985)}}
.hero .blink{animation:blink 4.5s infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.hero .tear{animation:tear 1.8s ease-in infinite}
@keyframes tear{0%{transform:translateY(0);opacity:0}20%{opacity:.95}100%{transform:translateY(14px);opacity:0}}
.hero .twk{animation:twk 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes twk{50%{opacity:.2;transform:scale(.6)}}
.hero.eating .hb{animation:eat .3s ease-in-out 5}
@keyframes eat{50%{transform:translateY(-5px) rotate(-2deg)}}
.hero .legfx{opacity:0}
.hero.eating .legfx{animation:legfly 1.4s ease-out}
@keyframes legfly{0%{opacity:0;transform:translateY(12px)}20%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
@media (max-width:420px){.stat{grid-template-columns:80px 1fr 30px}}
@media (max-width:520px){.icard{flex-wrap:wrap}.icard .acts{width:100%;justify-content:flex-start}.icard>.btn{width:100%}}
.iname .pr{flex-wrap:wrap}
.qrow{display:flex;gap:14px;align-items:center}
.qrow>div{min-width:0;flex:1}
.castle{width:96px;height:auto;flex:none;overflow:visible}
.castle.q{width:104px}.castle.q2{width:64px}
.node.boss,.node.boss.s-locked,.node.boss.s-missed,.node.boss.s-today,.node.boss.s-done,.node.boss.s-today-done{width:96px;height:96px;background:none!important;box-shadow:none!important;border:0!important;border-radius:0}
.node.boss .castle{width:100%;height:100%;display:block}
.castle .flame{animation:flick .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0 50%}
@keyframes flick{to{transform:scale(1.3)}}
.node.boss.sel{outline:3px solid var(--ink);outline-offset:0;border-radius:14px}
.phero{position:absolute;width:62px;transform:translateX(-50%);z-index:2;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}
.phero:focus-visible{outline:3px solid var(--pen);outline-offset:4px;border-radius:12px}
.phero .hero{width:100%;max-width:none}
.hhead{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.hname{font:700 1.5rem/1.1 var(--f-hand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn.sm{grid-area:auto;width:36px;height:36px;border-radius:8px}
.iconbtn.sm .ic{width:18px;height:18px}
.nameinp{width:100%;max-width:360px;font:600 1.1rem var(--f-ui);padding:10px 12px;border:1.5px solid var(--soft);border-radius:6px;background:var(--card);color:var(--ink)}
.castle.q{width:112px}
.node.boss,.node.boss.s-locked,.node.boss.s-missed,.node.boss.s-today,.node.boss.s-done,.node.boss.s-today-done{width:120px!important;height:120px!important}
.phero{width:92px}
.phero .pbub{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);width:max-content;max-width:150px;padding:5px 9px;background:var(--card);border:1.5px solid var(--line);border-radius:10px;font-size:.72rem;line-height:1.25;text-align:center;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.12);animation:pbub 2.2s ease-in-out infinite}
@keyframes pbub{50%{transform:translateX(-50%) translateY(-2px)}}
.phero .pbub::after{content:"";position:absolute;left:50%;bottom:-6px;width:9px;height:9px;background:var(--card);border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.prings{position:absolute;left:calc(100% + 2px);top:26px;display:flex;flex-direction:column;gap:4px;padding:4px;background:var(--card);border:1.5px solid var(--line);border-radius:12px}
.prings .ringw,.prings .ring{width:26px;height:26px}
.prings .ri .ic{width:12px;height:12px}
.hstripcard{padding:0!important;margin-bottom:10px}
.hstrip{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 14px}
.hhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hn2{font:700 1.5rem/1.1 var(--f-hand);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbubrow{display:flex;align-items:flex-end;box-sizing:border-box;height:100px}
.pbubrow{padding-bottom:8px}
.pbub2{position:relative;display:inline-flex;align-items:center;gap:8px;max-height:100px;overflow:hidden;padding:8px 10px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;font-size:.92rem;line-height:1.3;color:var(--ink);animation:bubble 2.2s ease-in-out infinite}
.pbub2::after{content:"";position:absolute;left:-7px;bottom:16px;width:11px;height:11px;background:var(--card);border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:rotate(45deg)}
.hmain{display:flex;align-items:stretch;gap:12px}
.phero2{flex:none;width:auto;display:flex;align-items:stretch;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phero2 .hero{width:100%;max-width:none}
.phero2:focus-visible,.prings2:focus-visible{outline:3px solid var(--pen);outline-offset:3px;border-radius:12px}
.hside{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:9px}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hside .hn{font:700 1.3rem/1.1 var(--f-hand);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prings2{display:flex;gap:10px;align-self:stretch;justify-content:space-around;box-sizing:border-box;padding:5px 9px;background:var(--card);border:1.5px solid var(--line);border-radius:14px}
.rbtn{background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:50%;font:inherit;color:inherit}
.rbtn:focus-visible,.stat:focus-visible,.prow:focus-visible{outline:3px solid var(--pen);outline-offset:2px;border-radius:12px}
.stat[data-act],.prow[data-act]{cursor:pointer}
.ringw.warn{animation:rwarn 1.4s ease-in-out infinite}.ringw.good{filter:drop-shadow(0 0 5px rgba(46,160,90,.75))}
@keyframes rwarn{50%{filter:drop-shadow(0 0 6px rgba(224,60,60,.95));transform:scale(1.08)}}
.stat.warn .sl{color:#d03c3c}.stat.warn .sl .ic{animation:rwarn 1.4s ease-in-out infinite}.stat.good .sl .ic{filter:drop-shadow(0 0 4px rgba(46,160,90,.8))}
.glvl{font-size:.82rem;color:var(--soft);font-weight:600;text-align:center}.glvl b{color:var(--ink,inherit)}
@media (min-width:760px){.glvl{display:none}}
.hbub .bi{flex:none;display:inline-flex;color:var(--pen)}.hbub .bi .ic{width:18px;height:18px}.hbub .bt{min-width:0}.hpop .bubble.hbub{display:flex;align-items:center;justify-content:center;gap:8px;min-height:66px;box-sizing:border-box}
.stat.sel,.prow.sel{background:var(--pen-soft);border-radius:10px;box-shadow:0 0 0 4px var(--pen-soft)}
.iname{display:flex;flex-direction:row;align-items:center;gap:12px;text-align:left}.ithw{flex:none;width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--card);border-radius:14px}.ithw .ithumb{width:64px;height:64px;display:block;overflow:visible}.itx{display:flex;flex-direction:column;gap:2px;min-width:0}
.cur summary,.cur-g summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px}.cur summary::-webkit-details-marker,.cur-g summary::-webkit-details-marker{display:none}.cur-sum{justify-content:space-between}.cur-n{font-size:.85rem;color:var(--soft);font-weight:600;margin-left:auto}.cur-body{margin-top:8px;display:flex;flex-direction:column;gap:6px}.cur-grade select{font:inherit;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);min-height:40px}.cur-g{background:var(--fill);border-radius:12px;padding:2px 12px}.cur-m{font-size:.75rem;padding:3px 8px;border-radius:99px;background:var(--card);color:var(--soft);font-weight:600}.cur-m.ok{background:var(--pen-soft);color:var(--pen)}.cur-g summary .cur-n{margin-left:0}.cur-g summary b{flex:1}.cur-items{display:flex;flex-direction:column;gap:2px;padding:4px 0 10px}.cur-t{display:flex;align-items:center;gap:10px;min-height:40px;font-size:.92rem}.cur-t input{width:20px;height:20px;accent-color:var(--pen)}
.pf h2,.par-t{margin:0 0 6px}.pf-roles{display:grid;gap:10px;margin:12px 0}.pf-role{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:16px;border:0;border-radius:16px;background:var(--fill);color:var(--ink);font:inherit;cursor:pointer;min-height:64px}.pf-role b{font-size:1.1rem}.pf-role span{color:var(--soft);font-size:.9rem}.pf-role:hover,.pf-role:focus-visible{box-shadow:inset 0 0 0 2px var(--pen)}
.pf-f{display:flex;flex-direction:column;gap:4px;margin:10px 0;font-weight:600;font-size:.92rem}.pf-f input,.pf-f select{font:inherit;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);min-height:44px}.pf-btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pf-av svg[viewBox^="4 0"]{border-radius:50%;max-width:84px;max-height:84px;margin:0 auto}
.pf-gl{margin:14px 0 0;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);border-top:1.5px solid var(--line);padding-top:12px}.pf-gl:first-of-type{border-top:0;padding-top:0;margin-top:6px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:12px 0}.pf-c{display:flex;flex-direction:column;gap:6px;align-items:stretch}.pf-pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border:0;border-radius:16px;background:var(--fill);color:var(--ink);font:inherit;cursor:pointer}.pf-c.cur .pf-pick{box-shadow:inset 0 0 0 2px var(--pen)}.pf-pick small{color:var(--soft)}.pf-av{width:84px;height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden}.pf-av .hero{height:96px;width:auto}.pf-av b{font-size:2.4rem;color:var(--pen)}.pf-pi{width:56px;height:56px;fill:var(--pen)}
.par-k .par-st.clk{grid-template-columns:minmax(0,1fr) auto}.par-k .par-st.clk .pt-go{width:auto;font:700 .85rem var(--f-ui);color:var(--pen);white-space:nowrap}.par-k .par-st.clk .pt-go{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--pen);color:#fff;align-self:center}.par-k .par-st.clk .pt-go .ic{width:22px;height:22px}
.par-st.clk:hover .pt-go,.par-st.clk:focus-visible .pt-go{text-decoration:underline}
.par-k{margin-bottom:12px}.par-top{display:flex;gap:12px;align-items:center}.par-av{flex:none;width:72px;height:104px;display:flex;align-items:center;justify-content:center}.par-av .hero{height:104px;width:auto}.par-h h3{margin:0}.par-h .note{margin:2px 0}.par-g{margin-top:10px}.par-gb{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.par-msg{color:var(--pen);font-weight:600}.gift{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.gift .btn{margin-left:auto}.is-parent #xpill{display:none}.par-face{display:none}
@media (min-width:900px){.par-face{display:none}.par-k.kfull{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:28px;align-items:start}.par-k.kfull .par-top{display:contents}.par-k.kfull .par-av{grid-column:1;grid-row:1/span 4;width:220px;height:300px;position:relative;align-self:center}.par-k.kfull .par-av>.hero{display:none}.par-k.kfull .par-face{display:block;width:100%;height:100%;border-radius:20px;overflow:hidden;background:var(--pen-soft)}.par-k.kfull .par-av .par-face .hero,.par-k.kfull .par-face svg{display:block;width:100%;height:100%;max-width:none}.par-k.kfull .par-h{grid-column:2;grid-row:1;display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}.par-k.kfull .par-h .note,.par-k.kfull .par-h p{margin:0}.par-k.kfull .par-ind{grid-column:2;grid-row:2}.par-k.kfull .par-g,.par-k.kfull .par-st{grid-column:2;margin-top:4px}.par-k.kfull .par-g .par-gb{justify-content:flex-start}.par-k.kfull .par-g .par-gb .btn{flex:0 0 auto;min-width:84px;padding:8px 18px}}
.pm-av{display:flex;width:30px;height:30px;overflow:hidden;border-radius:50%;background:var(--fill);align-items:center;justify-content:center}.pm-av .hero{width:30px;height:30px}.profmenu{position:fixed;top:58px;right:10px;z-index:60;min-width:220px;background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:2px}.profmenu[hidden]{display:none}.pm-h{display:flex;flex-direction:column;padding:8px 10px}.pm-h small{color:var(--soft)}.pm-i{display:flex;align-items:center;gap:10px;padding:10px;border:0;background:none;border-radius:10px;font:inherit;color:var(--ink);cursor:pointer;text-align:left;min-height:44px}.pm-i:hover,.pm-i:focus-visible{background:var(--fill)}.pm-i .ic{width:20px;height:20px;color:var(--pen)}.pm-sep{height:1px;background:var(--line);margin:4px 6px}
.iconbtn#btnProf{grid-area:prof;border-radius:50%;overflow:hidden;padding:0}
.pm-acct{display:flex;flex-direction:column;gap:4px;padding:8px 10px}.pm-acct small{color:var(--soft)}.pm-acct .btn{align-self:flex-start;margin-top:4px}.pm-lab{font-size:.78rem;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.04em;padding:6px 10px 2px}.pm-p{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;background:none;border-radius:12px;font:inherit;color:var(--ink);cursor:pointer;text-align:left;min-height:48px}.pm-p:hover,.pm-p:focus-visible{background:var(--fill)}.pm-p.cur{background:var(--pen-soft)}.pm-p .pm-av{flex:none;width:36px;height:36px}.pm-p .pm-av .hero{width:36px;height:36px}.pm-t{display:flex;flex-direction:column;flex:1;min-width:0}.pm-t small{color:var(--soft)}.pm-ck .ic{width:18px;height:18px;color:var(--pen)}.profmenu{max-height:calc(100vh - 76px);overflow:auto;min-width:260px}
.par-back{margin-bottom:10px}.par-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;margin:8px 0}.par-wd{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.78rem}.par-wb{height:74px;display:flex;align-items:flex-end}.par-wb i{display:block;width:18px;border-radius:6px;background:var(--grid)}.par-wb i.on{background:var(--pen)}.par-wd small{color:var(--soft)}.par-cal{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin:8px 0}.par-cd{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--fill);font-size:.72rem;color:var(--soft)}.par-cd.on{background:var(--pen);color:var(--pen-fg,#fff);font-weight:700}.par-cd.td{box-shadow:0 0 0 2px var(--ink)}.par-tw{overflow-x:auto}.par-t2{width:100%;border-collapse:collapse;font-size:.85rem}.par-t2 th{text-align:left;color:var(--soft);font-weight:600;padding:4px 6px}.par-t2 td{padding:6px;border-top:1px solid var(--line);white-space:nowrap}.card h4{margin:12px 0 4px;font-size:.92rem;color:var(--soft)}
.pips{letter-spacing:1px;color:#e0a020;font-size:.8em}.mut{color:var(--soft)}
@media (prefers-reduced-motion:reduce){.ringw.warn,.stat.warn .sl .ic{animation:none}}
.prings2 .ringw,.prings2 .ring{width:34px;height:34px}
.prings2 .ri .ic{width:15px;height:15px}
.fstats{display:none}
.fbtns{display:flex;gap:8px}
.fbtns .btn{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.fbtns .ic{width:16px;height:16px}
@media (min-width:760px){
  .hstrip{padding:14px 20px}
  .phero2{width:auto}
  .hmain{gap:24px}
  .prings2{display:none}
  #pathTrail{display:grid;grid-template-columns:minmax(380px,440px) minmax(0,1fr);gap:14px;align-items:stretch}
  #pathTrail .hstripcard,#pathTrail .trailcard{margin:0}
  .hstrip{height:100%}
  .hmain{gap:16px}
  .phero2{width:auto}
  .fstats{display:grid;gap:8px;max-width:560px}
  .fbtns{flex-wrap:wrap}
  .fbtns .btn{flex:0 0 auto;padding:8px 16px}
}
.pbig{display:flex;justify-content:center;margin:8px 0 4px}.pbig .hero{width:170px}
.hpop .bubble{margin:10px 0 0}

/* по-меко и просто: без рамки около всичко, заоблени ъгли и лека сянка */
:root{--fill:#e4edf8;--shadow:0 2px 10px rgba(20,60,120,.1)}
:root[data-theme="dark"]{--fill:#1d2d4d;--shadow:0 2px 12px rgba(0,0,0,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fill:#1d2d4d;--shadow:0 2px 12px rgba(0,0,0,.35)}}
.card,.tile{border-color:transparent;border-radius:18px;box-shadow:var(--shadow)}
.trailcard{border-radius:18px}
.trailh{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px 0}.trailh h3{margin:0}.trailh span{color:var(--soft);font-size:.8rem;font-weight:700}
.btn{border-radius:12px;border-color:transparent}
.btn.ghost{background:var(--pen-soft);border-color:transparent;color:var(--pen)}
.iconbtn:not(.top .iconbtn),.opt,.key,.stab,.icard,.bsel,.minis,.prings2,.tab,.pill span,.ans,.nameinp{border-color:transparent;background:var(--fill)}
.tab,.key,.opt,.pill span,.ans,.nameinp,.iconbtn{border-radius:12px}
.opt.sw,.stab{border-radius:999px}
.opt.sw{border-color:transparent}
.bubble,.pbub2,.phero .pbub,.prings,.hpop-card,.hfull,.userpop{border-color:transparent;box-shadow:var(--shadow)}
.pbub2,.bubble{border-radius:16px}
.pbub2::after,.bubble::after,.phero .pbub::after{border-color:transparent}
.hpop-card,.hfull{border-radius:20px}
.fb{border-color:transparent;border-radius:14px}
.xgain{border-color:transparent;border-radius:14px}
.herobox{border-color:transparent;border-radius:16px}
.top{border-bottom-color:transparent}
.top .iconbtn,.top .xpill{border-color:transparent}
.tab[aria-current="page"],.stab[aria-selected="true"],.opt.on,.opt[aria-pressed="true"]{background:var(--pen-soft);color:var(--pen);box-shadow:inset 0 0 0 2px var(--pen)}
.opt.sw.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--pen)}
.icard.sel{box-shadow:inset 0 0 0 2px var(--accent)}
.tbl th{border-bottom-color:var(--fill)}
body{background-image:none!important}
.chip{border-color:transparent;background:var(--pen-soft)}
.cd{border-radius:12px}
.top{transition:box-shadow .2s,border-color .2s}
.top.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 14px rgba(20,60,120,.14)}
.expr{background-image:none;background-color:var(--fill);border-color:transparent;border-radius:14px;padding:14px 18px}
.sq{border-radius:5px}
.sq:not(.ok):not(.bad):not(.done):not(.cur){border-color:transparent;background:var(--fill)}
.sq.cur{border:2.5px solid var(--pen)}

/* творец на героя */
.creator{position:fixed;inset:0;z-index:61;display:flex;flex-direction:column;background:var(--card);overflow:hidden}
.chead{display:block;padding:12px 16px 8px;flex:none;border-bottom:1px solid var(--line)}
.chead h3{margin:0;text-align:center;font:600 1rem var(--f-ui);color:var(--soft)}
.cstage{position:relative}.cdone{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:12px;font-weight:700;z-index:2;box-shadow:0 2px 8px rgba(20,40,90,.25)}.cdone svg{width:18px;height:18px}.chead .done{font:700 .95rem var(--f-ui);color:var(--pen);background:none;border:0;padding:10px 12px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.cstage{flex:1 1 auto;min-height:150px;display:flex;align-items:flex-end;justify-content:center;background:var(--pen-soft);padding:12px 10px 0;overflow:hidden}
.cstage .hero{height:100%;width:auto;max-width:100%;max-height:100%}
.ctabs{flex:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;padding:8px 12px 10px;border-bottom:2px solid var(--pen);position:relative;z-index:1;background:var(--card)}
.ctab{flex:none;display:inline-flex;flex-direction:row;align-items:center;gap:6px;min-height:40px;padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--soft);font:600 .9rem var(--f-ui);cursor:pointer}
.ctab .ic{width:20px;height:20px}
.ctab[aria-selected="true"]{background:var(--pen);color:var(--pen-fg);border-color:var(--pen)}
.ctypes{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px 12px 0;background:var(--card)}
.ctype{display:flex;flex-direction:column;align-items:center;gap:1px;height:64px;border:0;border-radius:14px;background:var(--fill);padding:3px 2px;cursor:pointer;font:700 .74rem var(--f-ui);color:var(--ink);min-width:0;overflow:hidden}
.ctype .cti{display:block;width:100%;height:38px;overflow:hidden;flex:none}
.ctype .cti .hero{width:100%;height:100%;max-width:none}
.ctype span{line-height:1.1}
.mb.fill .mf,.mb.fill .mg{transition:width 1s cubic-bezier(.2,.8,.2,1),left 1s cubic-bezier(.2,.8,.2,1)}
.mb.fill{box-shadow:0 0 0 2px #ffd04a,0 0 10px 2px rgba(255,208,74,.7)}
.cdemo{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:var(--card)}
.cdemo svg{width:22px;height:22px}
.cgauge{position:absolute;left:14px;bottom:60px;z-index:2;width:58px;height:58px;display:grid;place-items:center;background:var(--card);border-radius:50%;box-shadow:0 1px 5px rgba(20,40,90,.2)}
.cgauge svg{position:absolute;inset:3px;width:52px;height:52px}
.cgauge .gar{transition:stroke-dashoffset .15s linear}
.cgauge .gnum{position:relative;font:800 1rem var(--f-ui);color:var(--pen);line-height:1;margin-top:-6px}
.cgauge .glb{position:absolute;bottom:13px;font:700 .5rem var(--f-ui);color:var(--soft);letter-spacing:.03em}
.cdemo.pump .ph{animation:phpress .38s ease-in-out 4}
@keyframes phpress{50%{transform:translateY(6px)}}
.fxl{position:fixed;inset:0;pointer-events:none;z-index:99999;overflow:hidden}
.fxl i{position:absolute}
.fxg{position:absolute;transform-origin:center}
.fxg svg{width:100%;height:100%}
.fxgem{position:absolute;width:18px;height:18px;color:var(--pen)}
.fxgem svg{width:100%;height:100%}
.ctype.on{background:var(--pen-soft);box-shadow:inset 0 0 0 2px var(--pen);color:var(--pen)}
.ctabs .stab{padding:7px 2px;font-size:.84rem;text-align:center;white-space:nowrap}
.creator .chead.rbar{display:flex;flex:none;padding:10px 16px 8px;border-bottom:1px solid var(--line)}
.ctabs .stab .ic{width:20px;height:20px}
.cpanel{flex:none;height:clamp(220px,40vh,420px);overflow:auto;padding:14px 16px 24px;overscroll-behavior:contain;background:var(--card)}
.cin{max-width:640px;margin:0 auto}
@media (min-width:900px){#scrParent{max-width:1180px}.kd{columns:2;column-gap:14px}.kd>.card{margin:0 0 14px;break-inside:avoid;display:block}.kd>.chartcard{display:grid}.kd .cbsv,.kd .pchart{max-height:260px;width:100%}.kd .chartcard{gap:6px}.kd .tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:8px}.kd .tile{padding:8px 12px}.kd .tv{font-size:1.45rem;white-space:nowrap}.kd .card{padding:16px}.kd h4{margin:10px 0 4px}}
.csec{margin-bottom:18px}
.ctitle{margin:0 0 8px;font:700 1rem var(--f-ui);color:var(--ink)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.ctile{aspect-ratio:1;border-radius:16px;border:0;background:var(--fill);padding:4px;cursor:pointer;display:flex}
.ctile .hero{width:100%;height:100%;max-width:none;border-radius:12px;overflow:hidden}
.ctile.on{background:var(--pen-soft);box-shadow:inset 0 0 0 3px var(--pen)}
.csw{display:flex;flex-wrap:wrap;gap:10px;padding:3px}
.csw button{width:46px;height:46px;border-radius:14px;border:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.csw button.on{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--pen)}
.cpanel .nameinp{max-width:none}
.hname{flex:none;margin:8px 12px;display:flex;align-items:center;gap:10px;overflow:visible}.hname .hnl{flex:none;font:800 1rem var(--f-ui);color:var(--ink)}.hname .nameinp{flex:1;min-width:0;max-width:none;box-sizing:border-box;height:45px}
.ctile{position:relative;flex-direction:column}
.ctile .clab{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:700 .72rem var(--f-ui);color:var(--ink);text-shadow:0 0 4px var(--fill),0 0 4px var(--fill)}
.ctile:has(.clab){padding-bottom:20px}
.ctile:has(.clab) .hero{height:100%}
.pfig{position:relative;display:inline-block}
.pedit{position:absolute;right:-50px;bottom:6px;width:42px;height:42px}
.hbtns .btn{display:inline-flex;align-items:center;gap:6px}
.logo .lgav{flex:none;width:46px;height:46px;border-radius:14px;background:#f3d9bc;overflow:hidden;display:block}
.logo .lgav .hero{width:100%;height:100%;max-width:none;display:block}
.csw button.same{width:auto;padding:0 12px;background:var(--fill);color:var(--ink);font:600 .8rem var(--f-ui)}

@media (min-width:900px){
  #scrDash:not([hidden]){display:grid;grid-template-columns:390px minmax(0,1fr);column-gap:22px;align-items:start}
  #scrDash>#heroBox,#scrDash>#shopBox,#scrDash>#pathTrail,#scrDash>#statsBox{grid-column:1/-1}#scrDash>#heroBox{grid-row:1}#scrDash>#shopBox{grid-row:2}#scrDash>#pathTrail{grid-row:3}#scrDash>#statsBox{grid-row:6}
  #scrDash>.toprow,#scrDash>.dash{display:contents}
  #scrDash #dashA{grid-column:1;grid-row:4/span 2;margin-bottom:14px;align-self:start}
  #scrDash #questBox{grid-column:2;grid-row:4;margin-bottom:14px;align-self:start}
  #scrDash #questBox>*{height:100%}
  #scrDash #dashB{grid-column:2;grid-row:5;margin:0 0 14px;align-self:start}
  #scrDash #questBox{margin-bottom:14px}
  #scrDash #dashB .cd{aspect-ratio:auto;height:46px;min-height:0}
}
@media (min-width:900px){
#statsBox .chartcard{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:4px}#statsBox .chartcard>h3{grid-row:1}#statsBox .chartcard>.chartwrap{grid-row:2;min-width:0}#statsBox .chartcard>h3:nth-of-type(1),#statsBox .chartcard>#cw1{grid-column:1}#statsBox .chartcard>h3:nth-of-type(2),#statsBox .chartcard>#cw2{grid-column:2}#statsBox .chartcard>.note{grid-column:1/-1;grid-row:3}#statsBox .chartwrap svg{max-height:230px;width:100%;height:auto}
}
@media (min-width:760px){.creator{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 32px));height:min(780px,92vh);border-radius:16px;border:1.5px solid var(--line);box-shadow:0 0 0 100vmax rgba(10,20,40,.55),0 12px 40px rgba(0,0,0,.35)}.creator .cstage{border-radius:14px 14px 0 0}}

.pbubrow .pbub2{display:flex;width:100%;overflow:visible;box-sizing:border-box;margin-bottom:8px;--tx:50%}
.pbubrow .pbub2::after{left:var(--tx);bottom:-7px;margin-left:-6px;border-left:0;border-top:0;border-right:1.5px solid transparent;border-bottom:1.5px solid transparent;box-shadow:3px 3px 4px -2px rgba(20,40,80,.12);transition:left .3s}
.pbubrow .pbub2[data-k=sat]{--tx:17%}.pbubrow .pbub2[data-k=str],.pbubrow .pbub2[data-k=gear]{--tx:50%}.pbubrow .pbub2[data-k=hap]{--tx:83%}
@media (max-width:759px){.hstrip{padding:12px}.hmain{gap:8px}}
.hstrip .fbtns{gap:6px;flex-wrap:nowrap}.hstrip .fbtns .btn{flex:1 1 0;padding:8px 4px;font-size:.84rem;gap:4px}.hstrip .fbtns .btn .ic{width:14px;height:14px}
@media (min-width:760px){.pbubrow .pbub2,.pbubrow .pbub2[data-k]{--tx:28px}}
:root:not([data-theme=light]) .pbub2::after{border-color:transparent}
.dur{list-style:none;margin:0 0 10px;padding:0}.plist ul{padding:0;margin:8px 0 0}.dur .dwh{font-size:.92rem}.dur .dn{font-size:.8rem;color:var(--soft);margin-top:2px}
.lifebar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}.lifebar span{display:block;height:100%;border-radius:99px;background:#2e9e5b}.lifebar span.mid{background:#e0a020}.lifebar span.low{background:#d0453a}
.hstrip .phero2 .hero{height:222px;width:auto;max-width:100%;align-self:center}
.hstrip .phero2{padding:14px 0;box-sizing:border-box}.hstrip .phero2 .hero{min-height:190px}
.pbubrow{height:auto;padding:0}.pbubrow .pbub2{height:116px;max-height:none;justify-content:center;align-items:center;text-align:center;gap:8px;padding:8px 12px;font-size:.95rem;margin-bottom:10px}
.pbubrow .pbub2 .bt{text-align:center}

.hstrip .hmain{gap:0;justify-content:space-between}
.hstrip .hside{flex:0 0 66%;width:66%}
.pbubrow{height:112px;align-items:stretch}
.pbubrow .pbub2{height:100%;max-height:none;margin-bottom:8px;align-items:center;justify-content:center;text-align:center}
.pbub2 .bt{flex:1;text-align:center;display:flex;align-items:center;justify-content:center}
@media (min-width:760px){.hstrip .hmain{gap:0}.pbubrow{height:104px}}
.hstrip .phero2{flex:1 1 0;min-width:0;justify-content:center}
@media (min-width:760px){.hstrip .phero2 .hero{height:250px}}
.lk-card h3{margin:0 0 6px}.lk-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}.lk-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 10px;background:var(--fill);border-radius:12px}.lk-list small{color:var(--soft)}.lk-b{display:flex;gap:6px}
.lk-sel{display:grid;gap:6px;margin:10px 0}.lk-r{display:flex;align-items:center;gap:8px;font-size:.95rem}.lk-url{width:100%;box-sizing:border-box;margin:8px 0}
.lk-card h4{margin:12px 0 4px;font-size:.95rem}.lk-frs{display:grid;gap:8px}.lk-fr{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--fill);border-radius:12px}.lk-fr small{display:block;color:var(--soft)}.lk-av{width:44px;height:44px;border-radius:50%;background:var(--card);overflow:hidden;flex:none;display:grid;place-items:center}.lk-av svg{width:100%;height:100%}.lk-av.ra,.frd-av.ra{overflow:hidden}.frd-av.ra{width:96px;height:96px;border-radius:50%;display:block;margin:0 auto 6px}.lk-av.ra svg,.frd-av.ra svg{width:100%;height:100%}.pm-av svg,.pf-av svg{max-width:100%}
.band{margin-top:20px}.band>.card.grp{background:transparent;padding:0;box-shadow:none;border:0;margin:0 0 4px}.band .gr-l:first-of-type{margin-top:8px}
.grp-top{display:flex;align-items:center;gap:10px}.grp-t{flex:1;min-width:0}.grp-t .par-t{margin:0;font-size:1.35rem;overflow-wrap:break-word;hyphens:auto}.grp-t .note{margin:2px 0 0}
.gr-l{margin:14px 2px 6px;font-weight:700;color:var(--muted,#667)}.gr-n{font-size:1.2rem;font-weight:800;color:inherit;font-family:inherit}.gr-ak{margin-top:12px}.grp-t .note b{color:inherit}.grp-n{font-size:1.6rem;font-weight:800}.gr-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:6px}
.gr-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:16px;background:var(--card,#fff);border:2px solid transparent;font:inherit;text-align:center;min-width:0}
.gr-t.me{border-color:var(--accent,#7c5cff)}.gr-t b{font-size:.9rem;max-width:100%;overflow-wrap:anywhere;line-height:1.15}.gr-t.add b{font-size:1.8rem;line-height:1}.gr-t small{color:var(--muted,#667);font-size:.75rem}
.gr-av{width:56px;height:56px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}.gr-av svg{width:100%;height:100%}
.gr-t.add{border:2px dashed #b9b4d6;background:transparent;cursor:pointer;justify-content:center}.gr-t.add .gr-av{background:var(--fill,#eee);font-size:1.8rem;color:#7c5cff}
.gr-ad{position:absolute;top:6px;right:6px;width:20px;height:20px;color:#e0a528}.gr-ad svg{width:100%;height:100%}.gr-add{margin-top:12px}.gr-add h3{margin:0 0 8px}
.me-top{display:flex;align-items:center;gap:12px}.me-av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none}.me-av svg{width:100%;height:100%}.me-t{flex:1;min-width:0}.me-t b{display:block;font-size:1.1rem}.me-t small{color:var(--soft)}.me-sw{margin-top:10px}
.avpick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}.avpick.big{gap:8px;margin-top:10px}.frd-av.fig{width:72px;height:144px;margin:0 auto 6px;overflow:visible}.frd-av.fig svg{width:100%;height:100%}.avp{padding:0;border:3px solid transparent;border-radius:50%;overflow:hidden;background:none;cursor:pointer;aspect-ratio:1;display:block}.avp svg{width:100%;height:100%;display:block}.avp.on{border-color:var(--pen)}
.lk-av.em{color:var(--soft);border:1.5px dashed var(--line);background:transparent}.lk-av.em svg{width:24px;height:24px}.frd-av.em{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;border:2px dashed var(--line);color:var(--soft)}.frd-av.em svg{width:44px;height:44px}
@media (min-width:900px){#scrDash #pathTrail{grid-template-columns:390px minmax(0,1fr);gap:22px}}
.xpill sup{font:700 1em var(--f-ui);position:static;top:auto;margin:0;color:var(--pen);vertical-align:baseline}
.pbub2,.bubble.hbub,.bubble{background:#fff!important;color:#0b1b4d!important}
.pbub2::after,.bubble::after{background:#fff!important}
.pbub2 .bi,.bubble .bi{color:var(--brand)}
.xpill{gap:0}.xpill .ic{width:30px;height:30px}.xpill sup{font:700 .72em/1 var(--f-ui);position:relative;top:-.7em;margin-left:2px;color:var(--ruby);align-self:flex-start;margin-top:6px}
.pbub2,.bubble.hbub,.bubble{background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pbub2::after,.bubble::after{background:rgba(255,255,255,.86)!important;clip-path:polygon(100% 0,100% 100%,0 100%)}
.hn2{overflow:visible;padding:0 .3em .1em 0;line-height:1.25;text-overflow:clip}
.pbub2,.bubble.hbub,.bubble{background:#fff!important;color:#0b1b4d!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.pbub2::after,.bubble::after{background:#fff!important}
.pbub2 .bi,.bubble .bi{color:var(--brand)}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]) .pbub2,:root:not([data-theme=light]) .bubble.hbub,:root:not([data-theme=light]) .bubble{background:#2c4068!important;color:#eef3ff!important}
:root:not([data-theme=light]) .pbub2::after,:root:not([data-theme=light]) .bubble::after{background:#2c4068!important}
:root:not([data-theme=light]) .pbub2 .bi,:root:not([data-theme=light]) .bubble .bi{color:#9dbcff}
}
:root[data-theme=dark] .pbub2,:root[data-theme=dark] .bubble.hbub,:root[data-theme=dark] .bubble{background:#2c4068!important;color:#eef3ff!important}
:root[data-theme=dark] .pbub2::after,:root[data-theme=dark] .bubble::after{background:#2c4068!important}
:root[data-theme=dark] .pbub2 .bi,:root[data-theme=dark] .bubble .bi{color:#9dbcff}
.pbub2,.bubble.hbub,.bubble{box-shadow:0 4px 14px rgba(40,80,170,.30),0 8px 26px rgba(40,80,170,.22)!important}
.pbub2::after,.bubble::after{clip-path:none!important;box-shadow:5px 5px 9px -3px rgba(40,80,170,.38)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .pbub2,:root:not([data-theme=light]) .bubble{box-shadow:0 6px 20px rgba(0,0,0,.5)!important}:root:not([data-theme=light]) .pbub2::after,:root:not([data-theme=light]) .bubble::after{box-shadow:5px 5px 9px -3px rgba(0,0,0,.5)!important}}
:root[data-theme=dark] .pbub2,:root[data-theme=dark] .bubble{box-shadow:0 6px 20px rgba(0,0,0,.5)!important}:root[data-theme=dark] .pbub2::after,:root[data-theme=dark] .bubble::after{box-shadow:5px 5px 9px -3px rgba(0,0,0,.5)!important}
.pbubrow .pbub2::after{left:-6px!important;bottom:22px!important;margin-left:0!important;box-shadow:-4px 4px 8px -3px rgba(40,80,170,.38)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .pbubrow .pbub2::after{box-shadow:-4px 4px 8px -3px rgba(0,0,0,.5)!important}}
:root[data-theme=dark] .pbubrow .pbub2::after{box-shadow:-4px 4px 8px -3px rgba(0,0,0,.5)!important}
.rbtn,.hstrip .stat{position:relative}
.fpt{display:none;position:absolute;top:-13px;left:-5px;width:16px;height:16px;color:#e5392f;pointer-events:none;z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));animation:fptb 1s ease-in-out infinite}
.fpt svg{display:block}
.rbtn.sel .fpt,.stat.sel .fpt{display:block}
@keyframes fptb{0%,100%{opacity:1;transform:translate(0,0)}50%{opacity:.25;transform:translate(3px,3px)}}
@media (prefers-reduced-motion:reduce){.fpt{animation:none}}
.ib{margin-bottom:14px;padding:12px 14px}.ib-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ib-w{position:relative}.ib-l{max-height:172px;overflow-y:auto;display:grid;gap:6px;padding-right:2px}
.ib-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:var(--fill);border-radius:12px;min-height:44px;box-sizing:border-box}
.ib-t{min-width:0}.ib-n{font-weight:700;color:var(--ruby);white-space:nowrap}.ib-n .ic{width:15px;height:15px;vertical-align:-.2em}
.ib-f{display:none;position:absolute;left:0;right:0;bottom:0;height:54px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--card) 92%);border-radius:0 0 12px 12px}
.ib-w.more .ib-f{display:block}.ib-w.more.end .ib-f{display:none}
#scrDash>#inboxBar{grid-column:1/-1;grid-row:1}
#scrDash>#inboxBar:empty{display:none}

.iconbtn{position:relative}.bdg{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:#e5484d;color:#fff;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px}.bdg[hidden]{display:none}
.msgmenu{width:min(340px,calc(100vw - 20px));max-height:70vh;overflow:auto;padding:8px}.mm-r{display:flex;gap:8px;padding:8px 6px;border-top:1px solid var(--fill)}.mm-d{font-weight:800;color:var(--soft);width:14px;text-align:center}.mm-t{display:flex;flex-direction:column;gap:2px;font-size:.92rem}.mm-t small{color:var(--soft)}.mm-e{padding:8px 10px}
.fun .fun-t{font-weight:700;margin:6px 0 10px}.fun-ok{text-align:center;margin:2px 0}.fun-a{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.fun-a small{color:var(--soft);font-weight:700;min-width:70px}
.fe,.ff{border:2px solid var(--fill);background:var(--card);border-radius:12px;padding:6px 10px;font:inherit;cursor:pointer;color:inherit}.fe{font-size:1.25rem;line-height:1}.fe.on,.ff.on{border-color:var(--acc,#e07a1f);background:var(--fill)}.ff:disabled{opacity:.45;cursor:default}.ff svg{width:14px;height:14px;vertical-align:-2px}
.fam h3{margin:0 0 2px}.fm-r{display:flex;align-items:center;gap:8px;padding:6px 4px;border-top:1px solid var(--fill)}.fm-r.me{background:var(--fill);border-radius:10px}.fm-n{width:16px;font-weight:800;color:var(--soft);text-align:center}.fm-r b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fm-s{display:inline-flex;align-items:center;gap:3px;font-weight:700;min-width:44px;justify-content:flex-end}.fm-s svg{width:14px;height:14px}
.topin{grid-template-columns:1fr auto auto auto auto}.iconbtn[hidden]{display:none}
.topin{grid-template-columns:1fr auto auto auto auto!important;grid-template-areas:"logo sk xp msg prof"!important}.iconbtn#btnMsg{grid-area:msg}.iconbtn#btnTheme{grid-area:theme}
@media(max-width:480px){.topin{gap:6px 6px!important;padding:8px 10px!important}.iconbtn{width:38px;height:38px}.xpill{padding:0 6px}}
.topin{grid-template-areas:"logo sk msg xp prof"!important}
.top .iconbtn#btnMsg{grid-area:msg}.top .iconbtn#btnProf{grid-area:prof}
.top .xpill{grid-area:xp;height:44px;min-width:44px;padding:0 8px;justify-content:center;border-radius:12px;background:var(--fill);gap:1px}
.top .xpill .ic{width:24px;height:24px}
.top .xpill sup{font:800 .85rem/1 var(--f-ui);top:-.45em;margin:0 0 0 1px}
.top .iconbtn{border-radius:12px;background:var(--fill);overflow:hidden}
@media(max-width:480px){.top .xpill{height:38px;min-width:38px;padding:0 6px}.top .xpill .ic{width:22px;height:22px}}
.pbubrow{margin-bottom:14px}
.fpt{width:20px;height:20px;top:-16px;left:-8px}.fpt svg{width:20px;height:20px}.fpt svg path{stroke-width:3.8}
.ib-r.un .ib-t{font-weight:800}.ib-r.rd .ib-t{font-weight:400;color:var(--soft)}.ib-r.rd .ib-t b{font-weight:600}.ib-d{font-weight:800;opacity:.6}.ib-dt{display:block;font-weight:400;color:var(--soft);font-size:.78rem}.ib-h>span{display:flex;gap:6px;align-items:center}
.flt{position:fixed;z-index:200;width:20px;height:20px;pointer-events:none;opacity:0;animation:fltup 1.5s ease-out forwards}.flt svg{width:20px;height:20px}.flt.gem{color:#e5393f}.flt.heart{color:#e5393f}
@keyframes fltup{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-110px) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.flt{animation-duration:.01s}}
.par-g .par-gb{display:flex;flex-wrap:nowrap;gap:6px}.par-g .par-gb .btn{flex:1 1 0;min-width:0;padding:8px 4px;display:inline-flex;align-items:center;justify-content:center;gap:3px;font-size:.88rem}.par-g .par-gb .ic{width:18px;height:18px}
.par-rb{align-items:center;margin:6px 0 0;font-size:.85rem;color:var(--ink);display:grid}.par-rb .rbd{font-size:.72rem;line-height:1.25;color:var(--soft);white-space:normal}.par-rb .sv{white-space:nowrap}
.par-rb .rbd{display:flex;gap:6px;flex-wrap:nowrap}.rbc{display:inline-flex;align-items:center;gap:3px;border:0;background:var(--pen-soft);color:var(--ink);border-radius:999px;padding:3px 8px;font:700 .8rem var(--f-ui);cursor:pointer;white-space:nowrap}.rbc .ic{width:18px;height:18px}.rbc.w{color:#157a4a}.rbc.g{color:#157a4a}.rbc.l{color:#c5281f}.par-st{margin-top:12px;padding-top:10px;border-top:1.5px solid var(--line)}.par-st.clk{display:grid;grid-template-columns:1fr 14px;gap:10px;align-items:center;cursor:pointer}.par-st .pt-st{position:static;display:inline;margin-left:4px}.par-st .par-last{margin:0 0 6px}.par-st .par-last b{color:var(--ink)}
.par-g{margin-top:12px;padding-top:10px;border-top:1.5px solid var(--line)}.par-gt{display:block;margin-bottom:2px}
.par-open{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:14px;padding:12px 14px;border:1.5px solid var(--pen);background:var(--pen-soft);color:var(--pen);border-radius:12px;font:700 1rem var(--f-ui);cursor:pointer}.par-open i{font:700 1.7rem/1 var(--f-ui);font-style:normal}.par-gr{margin:2px 0 0}.par-fl{display:flex;align-items:center;gap:4px;margin:4px 0 0;color:var(--soft);font-size:.92rem}.par-fl .ic{width:20px;height:20px;color:var(--flame)}.par-fl b{color:var(--ink);font-size:1.05rem}
.ptr{margin:2px 0;font-weight:700;font-size:.92rem}.ptr.up{color:var(--t-ok-ink)}.ptr.dn{color:var(--t-att-ink)}.ptr.nt{color:var(--soft)}.par-st .note{margin:2px 0}.par-more{display:flex;justify-content:flex-end;margin-top:6px}
.par-g .par-gb{margin-top:8px}.btn.dis{opacity:.5}
.ptip{position:fixed;z-index:9500;background:var(--brand);color:#fff;padding:9px 12px;border-radius:10px;font-size:.88rem;line-height:1.3;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.3);pointer-events:none}
.par-lim{font-weight:700;margin:6px 0 0}.par-gb .btn:disabled{opacity:.5}
.pedit.pedit-t{width:auto!important;height:auto!important;min-height:40px;padding:8px 18px!important;display:inline-flex!important;align-items:center;gap:8px;border-radius:12px;font-weight:700}.pedit-t svg{width:18px;height:18px}
.pfig{display:flex!important;flex-direction:column;align-items:center}.pedit.pedit-t{position:static!important;margin:10px auto 0}

.duel{position:relative;margin:0 0 12px;border-radius:18px;overflow:hidden;border:2px solid var(--line);background:var(--card)}
.dhud{display:flex;align-items:flex-start;gap:8px;padding:8px 10px 4px;background:linear-gradient(#0000,#0000)}.dpl{flex:1;min-width:0}.dpl.r{text-align:right}.dpl b{display:block;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.dvs{font:800 .95rem var(--f-hand,inherit);color:#e5393f;padding-top:6px;flex:none}
.dbar{display:flex;gap:2px;height:14px;padding:2px;border-radius:7px;background:#1b1b2b;border:2px solid #1b1b2b}.dpl.r .dbar{flex-direction:row-reverse}.dbar .p{flex:1;border-radius:2px;background:linear-gradient(#ffe56a,#f2a516);transition:opacity .25s,transform .25s}.dbar .p.gone{opacity:.12;transform:scaleY(.4)}
.dscene{position:relative;height:178px;overflow:hidden;background:linear-gradient(#8fd0ff,#e4f5ff 62%)}
:root:not([data-theme=light]) .dscene{}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .dscene{background:linear-gradient(#1c2a55,#46508a 62%)}}:root[data-theme=dark] .dscene{background:linear-gradient(#1c2a55,#46508a 62%)}
.dhills{position:absolute;inset:auto 0 24px 0;height:70px;background:radial-gradient(60px 46px at 30px 70px,var(--h1,#7fcf8a) 98%,#0000) 0 0/120px 70px repeat-x,radial-gradient(80px 34px at 90px 70px,var(--h2,#5fb872) 98%,#0000) 0 0/160px 70px repeat-x}
.dground{position:absolute;left:0;right:0;bottom:0;height:26px;background:repeating-linear-gradient(90deg,var(--g1,#8a6a3c) 0 24px,var(--g2,#7a5c33) 24px 48px);border-top:4px solid var(--gb,#4f9a4f)}
.dsbg{position:absolute;inset:0;pointer-events:none}.dsbg svg{display:block;width:100%;height:100%}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .dsbg{filter:brightness(.72)}}:root[data-theme=dark] .dsbg{filter:brightness(.72)}
.walking .dhills{animation:dwalk 1.2s linear infinite}.walking .dground{animation:dwalk2 .5s linear infinite}
@keyframes dwalk{to{background-position:-120px 0,-160px 0}}@keyframes dwalk2{to{background-position:-48px 0}}
.dh,.do{position:absolute;bottom:20px;height:150px;transition:transform .22s ease-out}
.dh{left:6%;width:42%;display:flex;justify-content:center}.dhold{position:relative;height:100%;display:inline-block}.dhold svg{height:100%;width:auto;display:block}
.do{right:6%;width:38%}.do svg{height:100%;width:100%;display:block}.do.boss{height:168px;width:46%;right:2%}
.walking .dh{animation:dbob .32s ease-in-out infinite alternate}.walking .do{animation:dcome 1.3s ease-out both}
@keyframes dbob{to{transform:translateY(-6px)}}@keyframes dcome{from{transform:translateX(130%)}to{transform:none}}
.dh.atkR{animation:hatk .64s ease-in-out}.do.atkL{animation:oatk .64s ease-in-out}
@keyframes hatk{0%{transform:none}22%{transform:translateX(-14px) rotate(-4deg)}40%,58%{transform:translateX(88px) rotate(3deg)}100%{transform:none}}
@keyframes oatk{0%{transform:none}22%{transform:translateX(16px) rotate(5deg) scaleY(.96)}40%,58%{transform:translateX(-80px) rotate(-6deg)}100%{transform:none}}
.do:not(.dizzy):not(.ko) svg{transform-origin:50% 100%;animation:oidle 2.6s ease-in-out infinite}
.do.hum:not(.dizzy):not(.ko) svg{animation:none!important}
.do.hum.av{width:56%}
.do.k-slime:not(.dizzy):not(.ko) svg{animation:oslime 1.5s ease-in-out infinite}
.do.k-dragon:not(.dizzy):not(.ko) svg,.do.k-hydra:not(.dizzy):not(.ko) svg{animation:odrag 3s ease-in-out infinite}.do.k-bat:not(.dizzy):not(.ko) svg,.do.k-ghost:not(.dizzy):not(.ko) svg{animation:odrag 1.8s ease-in-out infinite}
@keyframes oidle{0%,100%{transform:scale(1,1) rotate(0)}50%{transform:scale(1.012,1.035) rotate(-.6deg)}}
@keyframes oslime{0%,100%{transform:scale(1,1)}50%{transform:scale(1.07,.93)}}
@keyframes odrag{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px) scale(1.01)}}
.do .oe{transform-box:fill-box;transform-origin:50% 55%;animation:oblink 4.4s infinite}.do.k1 .oe{animation-delay:-1.3s}.do.k2 .oe{animation-delay:-2.2s}.do.k3 .oe{animation-delay:-3.1s}.do.k4 .oe{animation-delay:-.6s}
@keyframes oblink{0%,92%,100%{transform:scaleY(1)}95.500%{transform:scaleY(.08)}}
.do .ow{transform-box:fill-box;transform-origin:50% 100%;animation:ows 2.4s ease-in-out infinite alternate}
.do .ow.wg{transform-origin:0% 100%;animation:owg 1.1s ease-in-out infinite alternate}.do .ow.tl{transform-origin:0% 0%;animation:ows 1.6s ease-in-out infinite alternate}
@keyframes ows{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
@keyframes owg{from{transform:rotate(8deg) scaleY(.95)}to{transform:rotate(-14deg) scaleY(1.05)}}
.do.atkL .ow:not(.wg):not(.tl){animation:owsw .64s ease-in-out}
@keyframes owsw{0%{transform:rotate(0)}22%{transform:rotate(30deg)}40%,58%{transform:rotate(-60deg)}100%{transform:rotate(0)}}
.do.hurt:not(.ko) svg{animation:ohit .4s ease-out}
.do svg{overflow:visible}
@keyframes ohit{0%{transform:none}25%{transform:rotate(7deg) scale(.93,1.06)}60%{transform:rotate(-3deg) scale(1.04,.96)}100%{transform:none}}
.do.dizzy .ow,.do.ko .ow{animation:none}
@media(prefers-reduced-motion:reduce){.do svg,.do .oe,.do .ow{animation:none!important}}
.hurt{animation:dhurt .4s}.hurt svg{filter:brightness(1.6) saturate(.6)}
@keyframes dhurt{0%,100%{translate:0}20%{translate:-8px}40%{translate:8px}60%{translate:-5px}80%{translate:4px}}
.dh.hurt .dhold svg{filter:brightness(1.1) sepia(.6) hue-rotate(-30deg) saturate(3)}
.dbr{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:multiply}.dbd{position:absolute;color:#f6d9a0;font-size:.75rem;text-shadow:0 0 2px #7a4a1a;pointer-events:none}
.dsoot{position:absolute;left:34%;top:2%;width:34%;height:15%;border-radius:50%;background:radial-gradient(closest-side,#111,#1110);pointer-events:none}
.dsmoke{position:absolute;left:46%;top:-4%;width:10px;height:10px;border-radius:50%;background:#9996;animation:dsmk 1.6s ease-out infinite}
@keyframes dsmk{from{transform:translateY(0) scale(.6);opacity:.8}to{transform:translateY(-34px) scale(2.2);opacity:0}}
.dh.burn .dhold svg{filter:brightness(.7) sepia(.8) saturate(3)}
.dfxl{position:absolute;inset:0;pointer-events:none}
.dsp{position:absolute;bottom:80px;width:60px;height:60px;margin:0 -30px;background:radial-gradient(circle,#fff 0 18%,#ffe14a 19% 40%,#ff9a2a 41% 60%,#0000 62%);clip-path:polygon(50% 0,60% 35%,100% 30%,68% 56%,86% 100%,50% 72%,14% 100%,32% 56%,0 30%,40% 35%);animation:dsp .45s ease-out forwards}.dsp.o{right:24%}.dsp.h{left:26%}
@keyframes dsp{from{transform:scale(.2) rotate(0);opacity:1}to{transform:scale(1.5) rotate(40deg);opacity:0}}
.dflt{position:absolute;bottom:130px;font:900 1.35rem var(--f-hand,inherit);color:#fff;text-shadow:-1.5px -1.5px 0 #1b1b2b,1.5px -1.5px 0 #1b1b2b,-1.5px 1.5px 0 #1b1b2b,1.5px 1.5px 0 #1b1b2b,0 -1.5px 0 #1b1b2b,0 1.5px 0 #1b1b2b,-1.5px 0 0 #1b1b2b,1.5px 0 0 #1b1b2b;animation:dfl 1s ease-out forwards}.dflt.o{right:22%}.dflt.h{left:22%;color:#ff8a80}
@keyframes dfl{from{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-6px) scale(1.2)}to{transform:translateY(-44px) scale(1);opacity:0}}
.dban{position:absolute;left:0;right:0;top:34%;text-align:center;font:900 1.9rem var(--f-hand,inherit);color:#ffe14a;--ol:#b0201a;text-shadow:-2px -2px 0 var(--ol),2px -2px 0 var(--ol),-2px 2px 0 var(--ol),2px 2px 0 var(--ol),0 -2px 0 var(--ol),0 2px 0 var(--ol),-2px 0 0 var(--ol),2px 0 0 var(--ol);animation:dbn 1.4s ease-out forwards;letter-spacing:.04em}.dban.won{color:#7dffa0;--ol:#14702f}.dban.lose{color:#ffb0b0}
@keyframes dbn{0%{transform:scale(.3);opacity:0}20%{transform:scale(1.25);opacity:1}35%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(1.1)}}
.dfire{position:absolute;right:46%;bottom:90px;width:42%;height:46px;transform-origin:100% 50%;background:radial-gradient(ellipse at 100% 50%,#fff 0,#ffe14a 18%,#ff8a1f 48%,#e5321a 72%,#0000 76%);clip-path:polygon(100% 30%,70% 0,60% 22%,34% 6%,30% 30%,0 20%,12% 50%,0 80%,30% 70%,34% 94%,60% 78%,70% 100%,100% 70%);animation:dfr .85s ease-out forwards}
@keyframes dfr{from{transform:scaleX(.05);opacity:1}35%{transform:scaleX(1);opacity:1}to{transform:scaleX(1.05);opacity:0}}
.do.dizzy svg{animation:dwob 1s ease-in-out infinite;transform-origin:50% 100%}.do.dizzy .oe{display:none}.do.dizzy .ox{display:block}.ox{display:none}
@keyframes dwob{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.do.dizzy::after{content:"★ ★ ★";position:absolute;left:0;right:0;top:4%;text-align:center;color:#ffd23a;font-size:1.2rem;letter-spacing:.3em;animation:dstars 1.2s linear infinite;text-shadow:0 0 3px #b07a00}
@keyframes dstars{from{transform:translateX(-14px)}50%{transform:translateX(14px)}to{transform:translateX(-14px)}}
.dh.win{animation:djump .6s ease-in-out 3}@keyframes djump{50%{transform:translateY(-22px)}}
.dh.ko .dhold{transform:rotate(-86deg) translate(10%,30%);transform-origin:50% 100%;transition:transform .6s ease-in}

.do.win{animation:djump .6s ease-in-out 3}
@media(max-width:480px){.dscene{height:150px}.dh,.do{height:124px}.do.boss{height:140px}.dban{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.walking .dhills,.walking .dground,.walking .dh,.walking .do,.dsmoke{animation:none}.dh,.do{transition:none}}

.opts{display:grid!important;grid-template-columns:repeat(var(--oc,1),minmax(0,1fr))!important;gap:8px!important}
.opts .opt,.opts .opt.m{width:100%;display:flex;align-items:center;justify-content:center;border-radius:10px!important;min-height:52px!important;padding:10px 8px!important;font-size:1.25rem!important;text-align:center!important;overflow:hidden}
.opts .opt.m{gap:8px}.opts .opt .lt{opacity:.55;font:700 .85rem var(--f-ui);margin-right:4px}
#btnMain{width:100%}
.doh{position:absolute;inset:0;pointer-events:none}.dbump{position:absolute;width:9%;height:8%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd9b0,#e08a5a);border:1.5px solid #8a3a1a}
.do.ko svg,.do.ko .doh{transform:rotate(88deg) translate(8%,-6%);transform-origin:50% 100%;transition:transform .6s ease-in}.do.ko .oe{display:none}.do.ko .ox{display:block}
.do.ko::after{content:"★ ★ ★";position:absolute;left:0;right:0;bottom:30%;text-align:center;color:#ffd23a;font-size:1.1rem;letter-spacing:.3em;animation:dstars 1.2s linear infinite}
.dshd{position:absolute;left:58%;top:36%;width:34px;height:40px;opacity:0;transform:scale(.3) translateX(-10px);transform-origin:0 50%;z-index:3}
.dh.def .dshd{animation:dblock .6s ease-out}
@keyframes dblock{0%{opacity:0;transform:scale(.3)}25%,70%{opacity:1;transform:scale(1.15) translateX(4px)}100%{opacity:0;transform:scale(1)}}
.blk{animation:dblk .35s}@keyframes dblk{0%,100%{translate:0}40%{translate:-5px}}
.rtiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0}@media(min-width:520px){.rtiles{grid-template-columns:repeat(4,1fr)}}
.rt{background:var(--fill);border-radius:12px;padding:10px 6px;text-align:center}.rt b{display:block;font:800 1.5rem var(--f-hand,inherit)}.rt span{font-size:.78rem;color:var(--soft)}.rt.g b{color:#1f9a4c}.rt.b b{color:#d6312a}.rt.x b{color:#c2185b}

.rfs{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 20px calc(24px + env(safe-area-inset-bottom));background:radial-gradient(130% 80% at 50% 0%,var(--accent-soft),var(--paper) 62%);color:var(--ink);text-align:center;overflow:auto;animation:rfIn .35s ease both;-webkit-tap-highlight-color:transparent}
.rfs.lose{background:radial-gradient(130% 80% at 50% 0%,var(--t-att),var(--paper) 62%)}
.rfs>*{flex:none;max-width:460px;width:100%}
.rfs h2{margin:0;font:900 2.3rem/1.1 var(--f-hand,inherit);opacity:0;transform:scale(.5)}
.rfs.go h2{animation:rfPop .7s .05s cubic-bezier(.2,1.6,.4,1) forwards}
.rfs.won h2{color:var(--t-ok-ink)}.rfs.lose h2{color:var(--t-att-ink)}.rfs.neu h2{color:var(--pen)}
.rfs .rsub{margin:0;color:var(--soft);opacity:0}.rfs.go .rsub{animation:rfFade .5s .45s forwards}
.rfs .rstars{display:flex;gap:8px;justify-content:center;margin:4px 0}
.rfs .rstar .ic{width:min(26vw,96px);height:min(26vw,96px);color:var(--line);opacity:0;transform:scale(0) rotate(-50deg)}
.rfs .rstar.show .ic{animation:rfStar .7s cubic-bezier(.2,1.8,.4,1) forwards}
.rfs .rstar.on.show .ic{color:var(--gold);filter:drop-shadow(0 0 14px var(--gold))}
.rfs .rstar.off.show .ic{animation-name:rfStarOff}
.rfs .rbox{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;border-radius:18px;background:var(--card);border:2px solid var(--line);opacity:0;transform:translateY(14px)}
.rfs .rbox.show{animation:rfUp .45s ease forwards}
.rfs .rbox .big{font:900 2.6rem/1 var(--f-hand,inherit);min-width:2.2ch;display:inline-block}
.rfs .rbox .lbl2{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2}
.rfs .rbox .lbl2 small{color:var(--soft);font-size:.82rem}
.rfs .rbox .lbl2 b{font-size:1.05rem}
.rfs .rbox.gem{border-color:var(--pen);background:var(--pen-soft)}
.rfs .rbox.gem .ic{width:44px;height:44px;color:var(--pen);--gem-x:var(--pen-fg)}
.rfs .rbox .trb{width:46px;height:46px}
.rfs .rbox.flm{border-color:var(--flame);background:var(--gold-soft)}.rfs .rbox.flm .ic{width:44px;height:44px}
.rfs .rbox.flm.show .ig .ic,.rfs .rbox.gem.show .ig .ic{animation:rfStar .75s .1s cubic-bezier(.2,1.8,.4,1) both}
.rfs .rbox.flm.show .ig .ic{filter:drop-shadow(0 0 8px var(--flame))}
.rfs .rbox.flm.pop .big{animation:rfTick .35s ease}
.rfs .rbox.gem.pulse .ic{animation:rfGem .5s ease}
.rfs .rbox.bump .big{animation:rfTick .28s ease}
.rfs .racts{display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(16px)}
.rfs .racts.show{animation:rfUp .5s ease forwards}
.rfs .racts .btn{width:100%}.rfs .r2{display:flex;gap:10px}.rfs .r2 .btn{flex:1;padding:10px 8px;font-size:.92rem}.rfs .rx{position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:700 1.1rem var(--f-ui);cursor:pointer;z-index:2}
.rfs .rmore{background:none;border:0;color:var(--soft);font:600 .95rem var(--f-ui);padding:6px;cursor:pointer;text-decoration:underline}
.rfs .conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rfs .conf i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.9;animation:rfFall linear forwards}
@keyframes rfIn{from{opacity:0}to{opacity:1}}
@keyframes rfPop{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
@keyframes rfFade{to{opacity:1}}
@keyframes rfStar{0%{opacity:0;transform:scale(0) rotate(-50deg)}70%{opacity:1;transform:scale(1.25) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes rfStarOff{0%{opacity:0;transform:scale(.4)}100%{opacity:.55;transform:scale(1)}}
@keyframes rfUp{to{opacity:1;transform:none}}
@keyframes rfGem{0%,100%{transform:scale(1)}40%{transform:scale(1.35) rotate(-10deg)}}
@keyframes rfTick{0%{transform:scale(1)}50%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes rfFall{to{transform:translateY(110vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.rfs *{animation-duration:.01s!important;animation-delay:0s!important}}
.verdict{text-align:center;margin:10px 0 2px;font:900 1.6rem var(--f-hand,inherit)}.verdict.won{color:var(--t-ok-ink)}.verdict.lose{color:var(--t-att-ink)}
.card>.duel{margin:-4px 0 6px}

.rarm{will-change:transform}.dhold svg.dshd{height:40px;width:34px;display:block}
.do.ko{transform:translateX(-52%) rotate(88deg);transform-origin:50% 100%;transition:transform .6s ease-in}
.do.ko svg,.do.ko .doh{transform:none!important}
.do.ko::after{display:none}
.kos{position:absolute;bottom:62px;color:#ffd23a;letter-spacing:.3em;font-style:normal;font-size:1.1rem;text-shadow:0 0 3px #b07a00;animation:dstars 1.2s linear infinite;pointer-events:none}.kos.o{right:20%}.kos.h{left:18%}
.opts .opt,.opts .opt.m{overflow:hidden;justify-content:center}
.opts .opt .oi{display:inline-block;white-space:nowrap;letter-spacing:0;line-height:1.25}
.opts.wrapok .opt .oi{white-space:normal;overflow-wrap:anywhere}
.opts .opt .oi .op{margin:0 .12em}.opts .opt .oi i{margin:0}

.inquiz header.top{display:none!important}.inquiz{overflow:hidden;margin-top:0!important}.inquiz .wrap{padding:0!important;max-width:none!important}
#scrQuiz{--sh:clamp(170px,33vh,340px)}@supports (height:1dvh){#scrQuiz{--sh:clamp(170px,33dvh,340px)}}
#scrQuiz:not([hidden]){position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:var(--paper);padding:0;margin:0;max-width:none}
#scrQuiz .duel{margin:0;border:0;border-radius:0;flex:0 0 auto;background:var(--card)}
#scrQuiz .dhud{padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 6px 56px}
#scrQuiz .dscene{height:var(--sh)}
#scrQuiz .dh,#scrQuiz .do{height:calc(var(--sh) - 24px);bottom:20px}#scrQuiz .do.boss{height:calc(var(--sh) - 8px)}
#scrQuiz .dh{left:max(6%,calc(50% - 360px))}#scrQuiz .do{right:max(6%,calc(50% - 360px))}#scrQuiz .do.boss{right:max(2%,calc(50% - 380px))}
.pre .dh,.pre .do{visibility:hidden}
@media (min-width:900px) and (min-height:520px){
#scrQuiz{--sh:clamp(280px,56vh,520px)}@supports (height:1dvh){#scrQuiz{--sh:clamp(280px,56dvh,520px)}}
#scrQuiz:not([hidden]){flex-direction:row}
#scrQuiz .duel{flex:0 0 46%;width:46%;display:flex;flex-direction:column;justify-content:center;border-right:2px solid var(--line)}
#scrQuiz .dhud{padding-right:20px}
#scrQuiz .duel{justify-content:flex-start}#scrQuiz .dscene{height:auto;flex:1 1 auto;min-height:0}
#scrQuiz .dh,#scrQuiz .do{height:var(--sh);bottom:34px}#scrQuiz .do.boss{height:calc(var(--sh) + 16px)}
#scrQuiz .dh{left:6%}#scrQuiz .do{right:6%}#scrQuiz .do.boss{right:3%}
#scrQuiz .qpane{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:24px 32px}
#scrQuiz .qpane .narrow{max-width:620px;width:100%}
}
.qpane{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 40px)}.qpane .narrow{max-width:720px;margin:0 auto}
.dflag{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:8px;z-index:8;width:40px;height:40px;border-radius:12px;background:rgba(20,28,50,.55);display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.5);cursor:pointer;padding:0}
.dscene.nx::before{content:"";position:absolute;inset:0;background:rgba(8,14,36,.42);z-index:5;animation:dnov .3s ease-out}
@keyframes dnov{from{opacity:0}to{opacity:1}}
.chal{border-left:5px solid #e5393f}.chal .ib-h b{font-size:1.02rem}.chal p{margin:6px 0 10px;font-size:.92rem}.chal .btn{margin-right:6px}
.lk-fr .btn.ch{margin-left:auto;flex:none}
button.frrow{width:100%;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}button.frrow>span:nth-child(2){flex:1;min-width:0}button.frrow:active{filter:brightness(.96)}.frrow .hgo{margin-left:auto;flex:none;width:14px}.frb{flex:none;font-size:1rem}
.frind{display:flex;flex-wrap:wrap;gap:2px 7px;margin-top:3px;font-size:.82rem;font-weight:700;color:var(--ink)}.frind>span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.frind svg{width:15px;height:15px}.frd .frind{justify-content:center;margin:2px 0 4px}
.frind{align-items:center;gap:4px 8px}.frind .frr{display:inline-flex}.frind .ringw,.frind .ring{width:32px;height:32px}.frind{flex-wrap:nowrap;gap:6px;align-items:center}.frind .ringw,.frind .ring{width:30px;height:30px}.frind .frn{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--grid);display:grid;place-items:center}.frind .frn svg{width:14px;height:14px}.frind .frn b{position:absolute;left:20px;top:1px;font-size:.64rem;line-height:1;font-weight:800;color:var(--ink);white-space:nowrap}.frd .frind{justify-content:center}.frind .ri svg{width:13px;height:13px}
.lk-fr small+.frind{margin-top:2px}.frind .fk-heart svg{color:#e5384c}.frind .fk-bicep svg{color:var(--pen)}.frind .fk-smile svg,.frind .fk-meh svg,.frind .fk-sad svg{color:#2fa85a}
.frd{text-align:center;padding:4px 6px 0}.frd-av{display:block;width:96px;height:112px;margin:0 auto 6px;overflow:hidden}.frd-av svg{width:100%;height:100%}.frd h3{margin:0 0 4px}.frd-st{margin:0 0 4px;color:var(--soft);font-size:.9rem}.frd-st svg{width:15px;height:15px;vertical-align:-3px}.frd-gr{display:inline-block;margin:6px 0 12px;padding:3px 12px;border-radius:99px;background:var(--fill);font-weight:700;font-size:.9rem}
.frd .btns{display:grid;gap:8px;margin-top:8px}.frd .btns .btn{width:100%;justify-content:center}.frd .btn svg{width:18px;height:18px;vertical-align:-4px;margin-right:6px}
.frd-chips{display:flex;gap:8px;justify-content:center;margin:10px 0}.frd-chips button{min-width:64px;padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:700 1.05rem var(--f-ui);cursor:pointer}.frd-chips button.on{border-color:var(--ruby,#c0392b);background:var(--fill)}.frd-chips button[disabled]{opacity:.4;cursor:default}
.cmp{margin:10px 0;padding:8px 10px;background:var(--fill);border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}.cmp .prow{margin-top:6px;gap:8px;text-align:left}.cmp .ringw,.cmp .ring{width:34px;height:34px}.cmp .ptx b{font-size:.85rem;white-space:nowrap}.cmp .sb{height:8px}.cmp .lo{opacity:.6}.cmp-rw{position:relative;display:inline-flex;flex:none;line-height:0}.cmp-w{position:absolute;top:-7px;left:50%;margin-left:-9px;color:#e0a020;line-height:0;transform:rotate(-8deg)}.cmp-w svg{width:18px;height:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}.fbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 4px}.fbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:12px 8px;border-radius:16px;border:2px solid var(--pen);font:inherit;font-weight:800;font-size:1rem;cursor:pointer}.fbtn svg.ic{width:32px;height:32px;margin:0}.fbtn.ch{background:var(--pen);color:#fff}.fbtn.ch:disabled{opacity:.55}.fbtn.gf{background:#fff;color:#1b2a4a;border-color:var(--line,#cfd8ee)}.fbtn.gf svg.ic{color:#d62f4b}.cmp-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}.cmp-c{text-align:center}.cmp-c .frd-av{margin:0 auto 6px}.cmp-c b{display:block}.frd-note{margin:8px 0;line-height:1.45}.frd-ok{color:var(--ok,#1f7a3f);font-weight:700;margin:8px 0}.frd-bk{margin-top:10px}.frd-sel{width:100%;padding:10px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:600 1rem var(--f-ui)}.lk-fr .btn.ch[disabled]{opacity:.55}
.dsnd{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);right:8px;z-index:8;width:40px;height:40px;border-radius:12px;background:rgba(20,28,50,.55);display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.5);cursor:pointer;padding:0}
.dsnd svg{width:22px;height:22px}.dsnd .x{display:none}.dsnd.off .x{display:block}.dsnd.off .wv{display:none}
#scrQuiz .dhud{padding-right:56px}
.dpw{display:flex;align-items:center;gap:6px;margin-top:4px}.dpwb{width:56px;flex:none;height:7px;border-radius:4px;background:#1b1b2b;overflow:hidden;border:1px solid #1b1b2b}.dpwb i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-2),var(--brand));border-radius:3px}.dpl.r .dpw{justify-content:flex-end}.dpn{display:block;font:600 .68rem var(--f-ui);color:var(--soft);margin-top:1px}.dpl.r .dpn{text-align:right}.dpw b{font-size:.72rem;color:var(--soft);white-space:nowrap}
.dnext{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:6;width:calc(100% - 28px);max-width:420px;padding:20px 16px;font:800 1.5rem var(--f-ui,inherit);border-radius:999px;background:#ffcf33;color:#3a2600;border:3px solid #1b1b2b;box-shadow:0 4px 0 #1b1b2b;cursor:pointer;white-space:nowrap;animation:dnp .35s ease-out}.dnext[hidden]{display:none}.dnext:active{transform:translateX(-50%) translateY(3px);box-shadow:0 1px 0 #1b1b2b}
@keyframes dnp{from{transform:translateX(-50%) scale(.5);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.dload{position:absolute;inset:0;z-index:60;background:radial-gradient(circle at 50% 30%,#40306f,#120c24);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;transition:opacity .4s;padding:20px}.dload[hidden]{display:none}.dload.out{opacity:0}
.dl-in{max-width:360px;width:100%}.dl-sub{font:700 1.05rem var(--f-ui,inherit);letter-spacing:.06em;text-transform:uppercase;color:#ffd96b;margin:0 0 14px}
.dl-op{width:min(60vw,220px);margin:0 auto;animation:dlb 1.1s ease-in-out infinite alternate}.dl-op svg{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 14px #000a)}@keyframes dlb{to{transform:translateY(-8px) scale(1.04)}}
.dl-vs{margin:10px 0 0;font:800 .95rem var(--f-ui,inherit);color:#ff8a80;text-transform:uppercase;letter-spacing:.2em}.dload h2{margin:4px 0 6px;font:900 1.7rem var(--f-hand,inherit);color:#fff}.dl-note{margin:0 0 18px;color:#cdd6f6}
.dl-cmp{background:var(--card,#fff);color:var(--ink,#16223d);border-radius:18px;padding:12px 10px;margin:10px 0;text-align:left}.dl-cmp~.dl-bar i{animation-duration:3.4s}
.dl-bar{height:8px;border-radius:5px;background:#ffffff26;overflow:hidden}.dl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe56a,#f2a516);animation:dlf 2.1s ease-out forwards}@keyframes dlf{to{width:100%}}
.surr{position:fixed;inset:0;z-index:80;background:#000a;display:flex;align-items:center;justify-content:center;padding:20px}.surr[hidden]{display:none}.surrc{background:var(--card);color:var(--ink);border-radius:18px;padding:22px;max-width:340px;text-align:center;box-shadow:0 10px 40px #0008}.surrc p{font:800 1.2rem var(--f-hand,inherit);margin:0 0 16px}.surrb{display:flex;flex-direction:column;gap:8px}
@media(prefers-reduced-motion:reduce){.dl-op,.dl-bar i{animation:none}.dl-bar i{width:100%}}

/* Белезите/цицините на противника повтарят анимациите на тялото му (дишане, подскок, удар, замайване) */
.do:not(.dizzy):not(.ko) .doh{animation:oidle 2.6s ease-in-out infinite}
.do.hum:not(.dizzy):not(.ko) .doh{animation:none!important}
.do.k-slime:not(.dizzy):not(.ko) .doh{animation:oslime 1.5s ease-in-out infinite}
.do.k-dragon:not(.dizzy):not(.ko) .doh,.do.k-hydra:not(.dizzy):not(.ko) .doh{animation:odrag 3s ease-in-out infinite}
.do.k-bat:not(.dizzy):not(.ko) .doh,.do.k-ghost:not(.dizzy):not(.ko) .doh{animation:odrag 1.8s ease-in-out infinite}
.do.hurt:not(.ko) .doh{animation:ohit .4s ease-out}
.do.dizzy .doh{animation:dwob 1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.do .doh{animation:none!important}}
.mrt .mt .pos{color:#16a34a;font-weight:800}
/* подписът на стъпката е отстрани (където има място), за да не го пресича пътят */
.nlab.sr,.nlab.sl{transform:translateY(-50%);align-items:flex-start;text-align:left}
.nlab.sl{transform:translate(-100%,-50%);align-items:flex-end;text-align:right}

/* Общ компонент: свиваем панел (shared/ui/fold.js) — показва първите N реда/плочки, последният избледнява, ▾ разпъва */
.fold { position: relative; padding: 14px 14px 4px; }
.fold > h3 { margin: 0 0 4px; }
.fold-b { overflow: hidden; position: relative; }
.fold-b.open { max-height: none !important; overflow: visible; }
.fold-b:not(.clip) { overflow: visible; }   /* няма подрязване (редовете са ≤ keep) — сянката на .stack не се реже */   /* разгънат: сянката на .stack не се реже (свит остава със скриване и избледняване) */
.fold-b.clip:not(.open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fh, 48px); pointer-events: none; background: linear-gradient(to bottom, transparent, var(--fbg, var(--card)) 96%); }
.fold-more { display: block; width: 100%; min-height: 0; height: 36px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--soft); cursor: pointer; }
.fold-more[hidden] { display: none; }
.fold-more::before { content: ''; display: block; width: 100%; height: 100%; background: no-repeat center / 26px 26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239db4e0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: transform .15s; } .fold-more.open::before { transform: rotate(180deg); }
.fold:not(:has(.fold-more:not([hidden]))) { padding-bottom: 14px; }
.fold-flag { position: absolute; top: 0; right: 16px; padding: 3px 10px 4px; border-radius: 0 0 10px 10px; background: var(--c-test); color: var(--c-test-fg); font: 800 .8rem/1.2 var(--f-ui); font-variant-numeric: tabular-nums; }
.fold-flat { padding: 0 !important; background: none; box-shadow: none; border: 0; } .fold-flat > h3, .fold-flat > h4 { margin-top: 0; }
.fold-flat .fold-more { height: 32px; }
/* Общ компонент: StackList (shared/ui/stack.js) — слепени редове в една заоблена карта */
.stack { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.stack > * { border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; background: transparent; border: 0 !important; }
.stack > * + * { border-top: 1px solid var(--line) !important; }   /* като „Предизвикателства/Турнири“ (.morerow) */

/* Общ компонент: компактен ред с прогрес (shared/ui/progrow.js) */
.prow:has(> .prow-main) { display: grid; grid-template-columns: minmax(0, 1fr) auto 70px 14px; gap: 8px; align-items: center; padding: 9px 12px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 0; background: transparent; border: 0; box-shadow: none; }
.prow-main { display: grid; gap: 1px; min-width: 0; } .prow-main b { font-size: .92rem; } .prow-main small { font-size: .74rem; color: var(--soft); }
.prow-bars { display: grid; gap: 5px; }
.prow-bar { display: grid; grid-template-columns: 10px minmax(0, 1fr) 34px; gap: 5px; align-items: center; height: 12px; }
.prow-bar > * { line-height: 1 !important; margin: 0; padding: 0; min-height: 0; align-self: center; }
.prow-bar .lb, .prow-bar .st { font-size: .66rem; font-weight: 800; color: var(--soft); } .prow-bar .st { text-align: right; }
.prow-bar .trk { display: block; height: 5px; border-radius: 3px; background: var(--line, #dfe6f3); overflow: hidden; } .prow-bar .trk i { display: block; height: 100%; background: var(--accent); }
.prow-bar.done .trk i { background: var(--s-ok); } .prow-bar.done .st { color: var(--t-ok-ink); } .prow-bar.run .st { color: var(--accent); }
.prow-pts { justify-self: end; width: 70px; box-sizing: border-box; text-align: center; padding: 3px 6px; border-radius: 8px; font-size: .78rem; font-weight: 800; background: var(--fill, #e8edf7); color: var(--soft); white-space: nowrap; }
.prow-pts.att { background: var(--t-att); color: var(--t-att-ink); } .prow-pts.mid { background: var(--t-mid); color: var(--t-mid-ink); } .prow-pts.ok { background: var(--t-ok); color: var(--t-ok-ink); }
.stack.fillbg { background: var(--fill, #f3f6fc); box-shadow: none; }
.prow-bar > * { padding: 0 !important; margin: 0 !important; height: auto; }
.prow-bar .trk { height: 5px !important; }
/* Общ компонент: ред „тест“ (shared/ui/testrow.js) */
.trow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 14px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.trow:active { background: color-mix(in srgb, var(--line) 40%, transparent); }
.trow-main { display: grid; gap: 2px; min-width: 0; } .trow-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .3em; } .trow-line b { font-size: .92rem; }
.trow-main small { font-size: .74rem; color: var(--soft); line-height: 1.25; }
.trow-chip { font-size: .92rem; font-weight: 800; } .trow-chip::after { content: ' ·'; }   /* „Сборник · Тест 1“ — едно цяло заглавие, без цветен чип */

.trow-g { display: grid; text-align: center; padding: 3px 9px; border-radius: 9px; line-height: 1.2; } .trow-g b { font-size: .8rem; } .trow-g small { font-size: .7rem; }
.trow-g.att { background: var(--t-att); color: var(--t-att-ink); } .trow-g.mid { background: var(--t-mid); color: var(--t-mid-ink); } .trow-g.ok { background: var(--t-ok); color: var(--t-ok-ink); }
.trow-chev { color: var(--soft); flex: none; }
.trow-late { color: #b3261e; font-style: normal; font-weight: 700; }
.trow-act { display: inline-flex; align-items: center; gap: 4px; }
.trow-cont { font-size: .8rem; font-weight: 700; color: var(--pen); white-space: nowrap; }
.trow-st { font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--accent-soft, #e3ecff); color: var(--accent, var(--brand-2)); }
.trow-del { border: 0; background: transparent; box-shadow: none; min-height: 0; width: 32px; height: 32px; padding: 0; font-size: 1rem; border-radius: 10px; color: inherit; opacity: .75; cursor: pointer; }
.prow-chev { color: var(--soft); flex: none; }
.fold > h3 { font-size: .95rem; line-height: 1.25; margin: 0 0 10px; }

.prow-pts.two { display: grid; gap: 1px; padding: 3px 4px; line-height: 1.1; } .prow-pts.two b { font-size: .74rem; } .prow-pts.two small { font-size: .64rem; font-weight: 700; opacity: .85; }
.prow-pts.act { background: transparent; padding: 0; } .prow-pts.act .trow-del { width: 36px; height: 36px; }
.prow-main small em { font-style: normal; font-weight: 700; }

.prow-bar.fin { grid-template-columns: 10px minmax(0, 1fr); } .prow-bar.fin .st { text-align: left; font-size: .76rem; color: var(--ink, inherit); font-variant-numeric: tabular-nums; }

.prow-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; } .prow-bar:not(.fin) { width: 92px; } .prow-pts.act { width: 70px; background: transparent; } .prow-bar.fin { width: 100%; }

/* име на стъпката и на чудовището до възела на пътеката */
.nlab .nsc{white-space:normal;max-width:150px;font-weight:400;font-size:.7rem;line-height:1.2;color:var(--soft)}.nlab .nd,.nlab .nmo{white-space:normal;max-width:150px}.nlab .nmo{font-weight:700;font-size:.8rem;color:var(--ink)}.nlab .nd{font-weight:400;font-size:.7rem;line-height:1.2;color:var(--soft);text-transform:lowercase;margin-bottom:2px}.nlab.m .nd,.nlab.m .nmo{color:var(--red)}


/* паралакс фон зад пътеката: 3 слоя (небе/облаци, силуети, дървета), всеки скролира със своя скорост (bindDrag в trail.js) */
.trailx{position:relative}
.trbg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.trbg-in{position:absolute;inset:0;opacity:.13}
.bgl{position:absolute;left:0;right:0;top:0;will-change:transform}
.bgl svg{width:100%;height:100%;display:block}
.trailx .trail{z-index:auto}   /* без собствен stacking context → notch-ът може да е над овърлея на екрана (z-index:6) */
.bgcl{animation:bgdrift 60s ease-in-out infinite alternate}
.bgsw{transform-box:fill-box;transform-origin:50% 100%;animation:bgsway 5s ease-in-out infinite alternate}
.bgbd{animation:bgfly 40s linear infinite}
@keyframes bgdrift{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@keyframes bgsway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
@keyframes bgfly{from{transform:translate(-40px,0)}50%{transform:translate(200px,-14px)}to{transform:translate(400px,0)}}
@media(prefers-reduced-motion:reduce){.bgcl,.bgsw,.bgbd{animation:none}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .trbg-in{filter:brightness(.8)}}:root[data-theme=dark] .trbg-in{filter:brightness(.8)}

/* име на пътеката (региона) там, където започва */
.rgsec{position:absolute;left:0;right:0;pointer-events:none;z-index:10}
.rgban{position:sticky;top:-2px;display:flex;justify-content:center;pointer-events:none}
.rgban span{font:700 .82rem var(--f-hand,var(--f-ui));color:var(--ink);background:var(--paper,#f5f8fd);border:0;border-radius:0 0 18px 18px;width:min(230px,80%);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 22px 8px;box-shadow:0 4px 6px -4px rgba(20,30,60,.14);text-align:center}
.trailh{justify-content:flex-end}

/* мобилно: пътеката е на цяла ширина (без бели полета отстрани; екранът има 12px падинг), без празния ред на заглавието */
@media (max-width:759px){#pathTrail .trailcard{margin-left:-12px;margin-right:-12px;border-left:0;border-right:0;border-radius:0}.screen-goals .trailh{display:none}}
/* граница на региона: линия през цялата ширина там, където започва; notch-ът виси под нея */
.rgsec::before{content:"";position:absolute;left:-60vw;right:-60vw;top:0;height:8px;background:var(--paper,#f5f8fd);box-shadow:0 2px 4px -2px rgba(20,30,60,.12),0 -2px 4px -2px rgba(20,30,60,.12)}
.rgsec:first-child::before{display:none}
/* всички notch-ове и линиите им са в цвета на хедъра (статичен) */
/* звезди и рубини на един ред; рубинът е като звездите по височина */
.nlab .nsr{display:flex;align-items:center;gap:6px;white-space:nowrap}.nlab .nsr .nrub{font-size:.64rem;line-height:1}.nlab .nsr .nrub .ic{width:11px;height:11px}
/* етикетите до възлите: текстовете са центрирани един под друг */
.nlab.sr,.nlab.sl{align-items:center;text-align:center}

/* notch → линия: обратно (вдлъбнато) заобляне от двете страни, за да преминава плавно в чертата; при залепване горе — в долния ръб на хедъра */
.rgban::before,.rgban::after{content:"";position:absolute;top:8px;width:14px;height:14px;pointer-events:none}
.rgban::before{left:calc(50% - min(115px,40%) - 14px);background:radial-gradient(circle at 0 100%,transparent 13.5px,var(--paper,#f5f8fd) 14px)}
.rgban::after{right:calc(50% - min(115px,40%) - 14px);background:radial-gradient(circle at 100% 100%,transparent 13.5px,var(--paper,#f5f8fd) 14px)}
.rgban.stuck::before,.rgban.stuck::after{top:0}
/* взет днешен ден: същата анимация като „днес“ (сияние + пулсиращ ореол), но в зелено */
.node.s-today-done,.node.eh.s-today-done{border-color:#1f9d4f!important;animation:doneGlow 2.4s ease-in-out infinite;z-index:1!important}
.node.s-today-done::before,.node.s-today-done::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.node.s-today-done::before{inset:-12px;z-index:-2;background:radial-gradient(circle,rgba(31,157,79,0) 52%,rgba(31,157,79,.65) 62%,rgba(31,157,79,0) 80%);animation:sunHalo 2.4s ease-in-out infinite}
.node.s-today-done::after{inset:-30px;z-index:-1;background:radial-gradient(circle,rgba(70,200,120,.8) 0%,rgba(40,170,90,.45) 40%,rgba(31,157,79,0) 70%);animation:sunHalo 2.4s ease-in-out infinite}
@keyframes doneGlow{0%,100%{box-shadow:0 5px 0 rgba(0,0,0,.28),0 0 10px 2px rgba(40,170,90,.55)}50%{box-shadow:0 5px 0 rgba(0,0,0,.28),0 0 24px 8px rgba(60,190,110,.85)}}
@media (prefers-reduced-motion:reduce){.node.s-today-done,.node.s-today-done::after,.node.s-today-done::before{animation:none!important}}

/* резултатът е „ушичка“ в долната част на плочката: цветът на рамката (зелено/жълто/червено) като фон */
.ct.pos .cb,.ct.eq .cb,.ct.neg .cb{align-self:center;margin:auto 0 -8px;padding:1px 10px 2px;min-width:54px;max-width:calc(100% + 6px);box-sizing:border-box;white-space:nowrap;font-size:.74rem;line-height:1.15;border-radius:9px 9px 0 0;color:#fff;transform:translateY(1px)}   /* „обърнат нотч“: ушичка по средата на долния ръб, не по цялата ширина */
.ct.pos .cb{background:#2fa85a}.ct.eq .cb{background:#e0a020;color:#2a1700}.ct.neg .cb{background:#e5384c}
.ct.pos .cb i,.ct.neg .cb i,.ct.pos .cb em,.ct.neg .cb em{color:#fff}.ct.eq .cb i,.ct.eq .cb em{color:#2a1700}

/* „Слава“: значки H2H · Купи · Трофеи + сгъваеми панели */
.gbadges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 14px}
.gbadge{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:10px 6px 8px;min-height:106px;border:0;border-radius:16px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 1px 0 var(--line)}
.gbadge:active{transform:scale(.97)}
.gbadge b{font-size:.92rem;margin-top:-5px;line-height:1.15}
.gb-art{display:flex;align-items:center;justify-content:center;width:46px;height:46px}
.gb-art svg{width:100%;height:100%}.gb-art svg.ic{width:34px;height:34px;color:var(--pen)}
.gb-sub{align-self:center;margin:auto 0 -8px;width:80px;max-width:calc(100% - 8px);height:26px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:1px 6px 2px;border-radius:10px 10px 0 0;background:color-mix(in srgb,var(--ink) 6%,var(--card));color:var(--ink);font-weight:800;font-size:.84rem;line-height:1;white-space:nowrap}   /* „обърнат нотч“ по средата на долния ръб (както в H2H диалога); и трите са еднакви по размер и цвят */   /* „обърнат нотч“ по средата на долния ръб (както в H2H диалога); расте с цифрите */
.gb-sub .stars{display:flex;justify-content:center;gap:1px;line-height:0}.gb-sub .stars .ic{width:14px;height:14px}

.collempty{margin:14px 4px 6px;text-align:center;color:var(--soft);font-weight:700;line-height:1.45}

/* Диалози на цял екран (мобилен): без заоблени ъгли, за да не се вижда фонът в краищата. Важи за магазин/външен вид (.hfull) и всеки диалог с класа .dlg-full.
   От 760px нагоре .hfull е центрирана карта със заоблени ъгли — там правилото не важи. */
.dlg-full{border-radius:0!important}
@media (max-width:759px){.hfull,.hpop-card.anv-full,.ib.full{border-radius:0!important}}

.nofit, .nofit * { animation: none !important; transition: none !important; }
/* Редакция на героя: кръгъл „Запази“ долу вдясно — само когато има промени (чернова); затварянето с Х / назад не записва */
.creator .lfab{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;width:56px;height:56px;border-radius:50%;border:0;background:var(--pen);color:var(--pen-fg,#fff);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(20,40,90,.35);padding:0}
.creator .lfab[hidden]{display:none}.creator .lfab svg{width:28px;height:28px}
.creator .lfab:active{transform:scale(.94)}.creator .lfab[disabled]{opacity:.6}
.creator .cpanel .cin{padding-bottom:88px}


/* Chrome <104: свойството translate: не се разбира → ударът и блокът не се тресат. Резерв с transform (в нови браузъри не се прилага). */
@supports not (translate: 0) {
  @keyframes dhurt{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
  @keyframes dblk{0%,100%{transform:translateX(0)}40%{transform:translateX(-5px)}}
}
.qacts .btn:only-child{flex:1 1 100%;width:100%;max-width:none}
/* Дискретни предпочитания: тема и език (Още — дете и родител) */
.prefs{padding:6px 14px}.prefrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}.prefrow+.prefrow{border-top:1px solid var(--line)}
.prefrow>span:first-child{font:700 .88rem var(--f-ui);color:var(--ink)}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;color:var(--soft);font:700 .78rem var(--f-ui);padding:6px 12px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--fill);color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)}
.seg button:disabled{opacity:.5}

/* Марка най-горе в „Още“ (детско): лого + „Арена x³⁵⁸“ + девиз в табелка, по средата */
.brandhd{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0 16px;text-align:center}.brandhd svg{width:64px;height:54px;flex:none;--lgp:var(--brand)}
.brandhd b{font:800 .66rem/1.2 var(--f-ui);letter-spacing:.02em;color:#fff;background:var(--brand);border-radius:999px;padding:2px 0 3px;width:72px;box-sizing:border-box;text-align:center;white-space:nowrap}   /* тъмносиня табелка (малка), девизът под нея */
:root[data-theme="dark"] .brandhd b{background:var(--brand-2);color:var(--brand)}
.brandhd .pl{margin-top:0;font:700 .7rem var(--f-ui);letter-spacing:.02em;color:var(--soft)}   /* девиз: без табелка, по-дребен — ширината се равнява на заглавието */
:root[data-theme="dark"] .brandhd svg{--lgp:#fff}
body:not(.adult) .screen-more .brandhd{grid-column:1/-1}
/* свит панел: сянката на .stack се вижда встрани и отгоре; режем само отдолу (там е избледняването) */
.fold-b.clip:not(.open) { overflow: visible; clip-path: inset(-18px -18px 0 -18px); }