/* Опыт и уровни (ui/xp.js): the panel «опыт за выпуск» on the results (under the winner line) and the lobby's level plate.
   «Эфир»: flat dark plate, 1.5 px lines, amber = XP / jetons, a hex badge with the level, white Oswald numbers; the level-up
   flash in the logo's kant (magenta / cyan split) with an amber sweep. Phone: the badge shrinks, the lines go 1-2 columns. */

/* ---------- the hex badge (both places) ---------- */
.xp-bd{position:relative;flex:none;display:grid;place-items:center;width:78px;height:88px}
.xp-bd .hx{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xp-bd .hx-o{fill:rgba(7,5,11,.9);stroke:var(--amber);stroke-width:2;filter:drop-shadow(0 0 6px rgba(255,181,71,.45))}
.xp-bd .hx-i{fill:none;stroke:rgba(255,181,71,.35);stroke-width:1}
.xp-bd .xp-n{position:relative;font:700 38px/1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#fff;text-shadow:-1px 0 rgba(255,62,165,.7),1px 0 rgba(53,230,255,.55)}
.xp-bd.sm{width:46px;height:52px} .xp-bd.sm .xp-n{font-size:22px} .xp-bd.sm .hx-o{stroke-width:2.4}
.jc{width:1.05em;height:1.05em;flex:none;fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linejoin:round;vertical-align:-.16em;margin-right:.3em}

/* ---------- the results panel ---------- */
#show .sh-xp{--cc:var(--amber);--cl:14px;--xp-bdw:108px;position:relative;display:flex;align-items:center;gap:18px;padding:10px 18px 12px 12px;background:rgba(7,5,11,.82);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--amber);overflow:hidden;animation:xpIn .4s ease-out both}
#show .sh-xp[hidden]{display:none}
.sh-xp .xp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.sh-xp .xp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sh-xp .xp-head .lbl{color:var(--amber)}
.sh-xp .xp-tot{font:700 30px/1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#fff}
.sh-xp .xp-tot i{font-style:normal}
.sh-xp .xp-tot small{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);border:0;padding:0;vertical-align:.4em}
.sh-xp .xp-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px}
.sh-xp .xp-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:3px 0 3px 10px;border-left:2px solid var(--line2);opacity:0;transform:translateX(-8px);transition:opacity .22s ease-out,transform .22s ease-out,border-color .6s}
.sh-xp .xp-r.on{opacity:1;transform:none;border-left-color:var(--amber)}
.sh-xp .xp-r span{min-width:0;font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-xp .xp-r b{flex:none;font:600 17px/1 var(--disp);font-variant-numeric:tabular-nums;color:var(--amber)}
.sh-xp .xp-r.mul b{color:var(--mag)} .sh-xp .xp-r.mul{border-left-color:var(--mag)}
.sh-xp .xp-empty{margin:0;color:var(--dim)}
.sh-xp .xp-bar{position:relative;height:10px;background:rgba(236,230,242,.08);border:1px solid var(--line);overflow:hidden}
.sh-xp .xp-f{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#b8741c,var(--amber) 70%,#ffe2ad);box-shadow:0 0 12px rgba(255,181,71,.55)}
.sh-xp .xp-sh{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);opacity:0}
.sh-xp.lvup .xp-sh{animation:xpSweep .9s ease-out}
.sh-xp.lvup .xp-bar{animation:xpBarHit .6s ease-out}
.sh-xp .xp-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sh-xp .xp-of{color:var(--ink2);font-variant-numeric:tabular-nums}
.sh-xp .xp-nx{color:var(--dim)} .sh-xp .xp-nx em{font-style:normal;color:var(--amber)}
/* the case (v0.13.8.6, SOC-163; ui/xp.js caseHtml): after the bar — a plate per implant, a flash of its rarity colour
   (--rc: common --line2, rare --cyan, legendary --amber, cursed --red), the icon, the name + Mk, «надето · ТОРС» /
   «в коллекции», «открыт слот НОГИ». No case: «до ящика: N раундов» + the pity's three marks. Reduced motion: .still */
.sh-xp .xp-case{display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(4px);transition:opacity .25s ease-out,transform .25s ease-out}
.sh-xp .xp-case.on{opacity:1;transform:none}
.sh-xp .xc{--rc:var(--line2);position:relative;display:flex;align-items:center;gap:14px;min-height:46px;padding:10px 14px 10px 10px;background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 16%,rgba(12,9,18,.94)),rgba(12,9,18,.94) 70%);border:var(--bw) solid var(--rc);box-shadow:inset 3px 0 0 var(--rc);overflow:hidden}
.sh-xp .xc[data-rar=common]{--rc:rgba(236,230,242,.55)}
.sh-xp .xc-fl{position:absolute;inset:0;background:radial-gradient(ellipse at 18% 50%,color-mix(in srgb,var(--rc) 60%,transparent),transparent 70%);opacity:0;pointer-events:none}
.sh-xp .xp-case.on:not(.still) .xc-fl{animation:xcFlash .9s ease-out both}
.sh-xp .xp-case.on:not(.still) .xc-ico{animation:xcPop .45s .15s cubic-bezier(.3,1.6,.5,1) both}
.sh-xp .xc-ico{flex:none;display:grid;place-items:center;width:58px;height:58px;color:var(--rc);border:var(--bw) solid var(--rc);background:color-mix(in srgb,var(--rc) 12%,transparent)}
.sh-xp .xc-ico .ico{width:34px;height:34px}
.sh-xp .xc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sh-xp .xc-k{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sh-xp .xc-k b{color:var(--rc);font-weight:500}
.sh-xp .xc-h{font:600 15px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--rc)}   /* «ЯЩИК · НОВЫЙ ИМПЛАНТ» in the rarity's colour */
.sh-xp .xc[data-rar=common] .xc-h{color:#fff}
.sh-xp .xc-d{font:500 12px/1.3 var(--mono);letter-spacing:.02em;color:var(--ink);white-space:normal}   /* what the implant does (shared/perks.js perkDesc) */
.sh-xp .xc-n{font:600 24px/1.05 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.sh-xp .xc-n em{font-style:normal;margin-left:8px;color:var(--rc);font-size:.8em}
.sh-xp .xc-s{color:var(--ink2)} .sh-xp .xc-s.on{color:var(--cyan)}
.sh-xp .xc-slot{flex:none;padding:4px 8px;color:#fff;border:var(--bw) solid var(--cyan);box-shadow:inset 0 0 10px rgba(53,230,255,.2);white-space:nowrap}
.sh-xp .xc.none{background:rgba(12,9,18,.92);border-color:var(--line);box-shadow:inset 3px 0 0 var(--line2);justify-content:space-between;min-height:34px}
.sh-xp .xc.none .xc-k{color:var(--ink)}
.sh-xp .xc-pity{display:flex;gap:4px} .sh-xp .xc-pity i{width:22px;height:8px;border:1px solid var(--line2);background:transparent}
.sh-xp .xc-pity i.on{background:var(--amber);border-color:var(--amber)} .sh-xp .xc-pity i.sure{border-style:dashed;border-color:var(--amber)}
@keyframes xcFlash{0%{opacity:0}25%{opacity:1}100%{opacity:.18}}
@keyframes xcPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sh-xp .xp-case{transition:none} .sh-xp .xc-fl{opacity:.18}}
@media (max-width:600px){.sh-xp .xp-case{grid-column:1/-1} .sh-xp .xc{gap:9px;padding:7px 8px 7px 6px;flex-wrap:wrap} .sh-xp .xc-n{font-size:19px} .sh-xp .xc-ico{width:46px;height:46px} .sh-xp .xc-ico .ico{width:26px;height:26px} .sh-xp .xc-t{flex:1 1 0} .sh-xp .xc-h{font-size:13px} .sh-xp .xc-d{font-size:11px} .sh-xp .xc-slot{flex:1 1 100%;text-align:center;padding:3px 6px}}
/* the headline: «СПАСЕНО 12 → +150 ОП» (swat, cyan) / «ПОЖРАНО 18 → +108 ОП» (possessed, magenta) — the round's main number */
.sh-xp .xp-hero{--hc:var(--cyan);display:flex;align-items:baseline;gap:14px;padding:2px 0 4px;opacity:.25;transition:opacity .25s}
.sh-xp[data-side=possessed] .xp-hero{--hc:var(--mag)}
.sh-xp .xp-hero.on{opacity:1}
.sh-xp .xh-k{font:600 clamp(20px,2vw,28px)/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--hc);text-shadow:0 0 14px color-mix(in srgb,var(--hc) 45%,transparent)}
.sh-xp .xh-n{font:700 clamp(40px,4.4vw,60px)/.9 var(--disp);font-variant-numeric:tabular-nums;color:#fff;text-shadow:-2px 0 rgba(255,62,165,.6),2px 0 rgba(53,230,255,.5);min-width:1.2em}
.sh-xp .xh-ar{width:clamp(28px,2.6vw,40px);height:auto;align-self:center;fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sh-xp .xh-x{font:700 clamp(34px,3.6vw,50px)/.9 var(--disp);font-variant-numeric:tabular-nums;color:var(--amber);text-shadow:0 0 16px rgba(255,181,71,.5)}
.sh-xp .xh-x i{font-style:normal}
.sh-xp .xh-x small{margin-left:8px;font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);border:0;padding:0;vertical-align:.3em}
.sh-xp .xp-bigs{display:flex;flex-direction:column;gap:4px}
/* the other big lines: «ПОБЕДА +60 ОП» / «ЗА СМЕНУ +N» / «ПЕНТАГРАММЫ +N» / «БОССЫ +N · ДИДЖЕЙ · ДОН» — one step under the headline */
.sh-xp .xp-big{--bc:var(--amber);display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;opacity:.2;transition:opacity .25s}
.sh-xp .xp-big.on{opacity:1}
.sh-xp .xp-big.win{--bc:var(--live)} .sh-xp .xp-big.shift{--bc:var(--ink2)} .sh-xp .xp-big.pent{--bc:#ff5570} .sh-xp .xp-big.boss{--bc:var(--amber)}
.sh-xp .xb-k{min-width:8.5em;font:600 clamp(16px,1.5vw,21px)/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--bc)}
.sh-xp .xb-x{font:700 clamp(24px,2.3vw,32px)/.95 var(--disp);font-variant-numeric:tabular-nums;color:#fff}
.sh-xp .xb-x i{font-style:normal} .sh-xp .xb-x small{margin-left:6px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);border:0;padding:0;vertical-align:.3em}
.sh-xp .xb-s{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.sh-xp.flashing .xp-bigs{opacity:0}
/* level 0 (a newcomer): the hexagon an empty dashed outline — the number comes with the first level */
.xp-bd.nil .hx-o{fill:rgba(7,5,11,.6);stroke:var(--line2);stroke-dasharray:4 4;filter:none} .xp-bd.nil .hx-i{stroke:none}
/* «СПЕЦНАЗ 62 % ↑ · 31–19»: the rate of the side he played, in the head of the panel */
.sh-xp .xp-head{flex-wrap:wrap}
.sh-xp .xp-wr{--wc:var(--cyan);display:inline-flex;align-items:baseline;gap:8px;margin-right:auto;margin-left:18px;padding:3px 10px;border:var(--bw) solid color-mix(in srgb,var(--wc) 55%,transparent);background:rgba(7,5,11,.6)}
.sh-xp .xp-wr[data-side=possessed]{--wc:var(--mag)}
.sh-xp .xp-wr .wr-s{font:600 13px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--wc)}
.sh-xp .xp-wr .wr-p{font:700 22px/1 var(--disp);font-variant-numeric:tabular-nums;color:#fff}
.sh-xp .xp-wr svg{width:14px;height:14px;align-self:center;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sh-xp .xp-wr.up svg{stroke:var(--live)} .sh-xp .xp-wr.dn svg{stroke:var(--red)} .sh-xp .xp-wr.eq svg{stroke:var(--dim)}
.sh-xp .xp-wr .wr-n{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim)}
.sh-xp .xp-wr.solo{border:0;background:none;padding:0;color:var(--dim)}
/* the guest's plate: under the big lines, one plate, never a modal */
.sh-xp .xp-guest{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:8px 12px;border:var(--bw) dashed rgba(255,181,71,.45);background:rgba(255,181,71,.05)}
.sh-xp .xp-guest p{flex:1 1 320px;margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink2)}
.sh-xp .xg-b{display:flex;align-items:center;gap:8px}
.sh-xp .xg-b .btn-a.sm{min-height:36px;padding:0 14px;font-size:15px;letter-spacing:.1em}
.sh-xp .xg-b .btn-a.tg{background:var(--cyan)}
.sh-xp .xg-b .lnk{min-height:36px;padding:0 8px;border:0;background:none;color:var(--dim);font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.sh-xp.flashing .xp-guest{opacity:0}
/* the badge's column: «УРОВЕНЬ N» stays under it in the round the level was taken (SOC-163) */
.sh-xp .xp-bdc{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.sh-xp .xp-bdl{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:120px;padding:4px 8px;text-align:center;font:700 16px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#fff;
  border:var(--bw) solid var(--amber);background:rgba(255,181,71,.12);text-shadow:-1px 0 rgba(255,62,165,.7),1px 0 rgba(53,230,255,.55);animation:xpIn .4s ease-out both}
.sh-xp .xp-bdl[hidden]{display:none}
.sh-xp .xp-bdl small{font:600 11px/1 var(--mono);letter-spacing:.08em;color:var(--amber);text-shadow:none}
/* the level-up flash: over the panel */
.sh-xp .xp-up{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:22px;pointer-events:none;opacity:0;background:#07050b;
  box-shadow:inset 0 0 0 var(--bw) var(--amber),inset 0 0 40px rgba(255,62,165,.18)}
/* while the flash is up the lines, the total and the foot fade out under it (a solid plate over the panel, the badge beside) */
.sh-xp .xp-bigs,.sh-xp .xp-bar,.sh-xp .xp-head,.sh-xp .xp-rows,.sh-xp .xp-foot,.sh-xp .xp-empty{transition:opacity .18s ease-out}
.sh-xp.flashing .xp-bar,.sh-xp.flashing .xp-head,.sh-xp.flashing .xp-rows,.sh-xp.flashing .xp-foot,.sh-xp.flashing .xp-empty{opacity:0}
.sh-xp.flashing .xp-up{left:var(--xp-bdw,104px)}
.sh-xp .xp-up.on{animation:xpUp 1.5s ease-out forwards}
.sh-xp .xp-up.stay{opacity:1;position:static;background:none;justify-content:flex-start;gap:14px;inset:auto}
.sh-xp .xp-upt{font:700 clamp(30px,3.6vw,48px)/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:-2px 0 rgba(255,62,165,.8),2px 0 rgba(53,230,255,.6),0 0 24px rgba(255,62,165,.45)}
.sh-xp .xp-upj{display:inline-flex;align-items:center;font:600 clamp(20px,2.2vw,28px)/1 var(--disp);letter-spacing:.08em;color:var(--amber);text-shadow:0 0 14px rgba(255,181,71,.5)}
.sh-xp .xp-up.stay .xp-upt{font-size:20px;letter-spacing:.12em} .sh-xp .xp-up.stay .xp-upj{font-size:18px}
.sh-xp.done .xp-up.stay{order:3}
.sh-xp.lvup .xp-bd{animation:xpBadge .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes xpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes xpSweep{0%{opacity:1;transform:translateX(-100%)}100%{opacity:1;transform:translateX(100%)}}
@keyframes xpBarHit{0%{box-shadow:0 0 0 0 rgba(255,181,71,.9)}100%{box-shadow:0 0 0 10px rgba(255,181,71,0)}}
@keyframes xpUp{0%{opacity:0;transform:scale(1.25);letter-spacing:.3em}14%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
@keyframes xpBadge{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ #show .sh-xp,.sh-xp .xp-r{animation:none;transition:none} .sh-xp .xp-up.on{animation:none;opacity:1} }

/* ---------- the lobby plate: next to the account, bottom right of the logo row ---------- */
.lob-lvl{grid-area:acct;justify-self:end;align-self:start;margin-top:calc(var(--tap) + 12px);display:flex;align-items:center;gap:12px;width:min(310px,100%);padding:6px 14px 8px 8px;
  background:rgba(7,5,11,.8);border:var(--bw) solid var(--line);box-shadow:inset 3px 0 0 var(--amber)}
.lob-lvl .ll-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.lob-lvl .ll-k{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lob-lvl .ll-k .lbl{font-size:10px;color:var(--ink2)} .lob-lvl .ll-k b{font:600 15px/1 var(--disp);color:#fff;letter-spacing:.04em}
.lob-lvl .ll-of{font-variant-numeric:tabular-nums;color:var(--dim)!important}
.lob-lvl .ll-bar{display:block;height:6px;background:rgba(236,230,242,.08);border:1px solid var(--line)}
.lob-lvl .ll-bar i{display:block;height:100%;background:linear-gradient(90deg,#b8741c,var(--amber));box-shadow:0 0 8px rgba(255,181,71,.5);transition:width .6s ease-out}
.lob-lvl .ll-nx{font-size:9.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lob-lvl .ll-nx em{font-style:normal;color:var(--amber)}

/* a short desktop: tighter */
@media (min-width:901px) and (max-height:900px){
  #show .sh-xp{padding:8px 16px 9px 10px;gap:14px;--xp-bdw:86px}
  .sh-xp .xp-bd{width:62px;height:70px} .sh-xp .xp-bd .xp-n{font-size:30px}
  .sh-xp .xp-main{gap:6px} .sh-xp .xp-tot{font-size:24px}
  .sh-xp .xp-rows{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 12px}
  .sh-xp .xp-r{padding:2px 0 2px 9px} .sh-xp .xp-r span{font-size:11px} .sh-xp .xp-r b{font-size:15px}
  .sh-xp .xp-bar{height:8px}
}
/* ---------- phone / narrow ---------- */
@media (max-width:900px){
  #show .sh-xp{gap:12px;padding:8px 12px 10px 8px;--xp-bdw:76px}
  .sh-xp .xp-bd{width:56px;height:64px} .sh-xp .xp-bd .xp-n{font-size:28px}
  .sh-xp .xp-tot{font-size:24px}
  .sh-xp .xp-rows{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:3px 10px}
  .sh-xp .xp-r span{font-size:10.5px;letter-spacing:.03em} .sh-xp .xp-r b{font-size:15px}
  .sh-xp .xp-up{flex-direction:column;gap:6px}
}
/* phone portrait: the badge beside the total, the lines in two columns across the whole panel */
@media (max-width:600px){
  #show .sh-xp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;--xp-bdw:66px}
  .sh-xp .xp-main{display:contents}
  .sh-xp .xp-bd{width:46px;height:52px} .sh-xp .xp-bd .xp-n{font-size:23px}
  .sh-xp .xp-rows,.sh-xp .xp-bar,.sh-xp .xp-foot,.sh-xp .xp-empty,.sh-xp .xp-up.stay{grid-column:1/-1}
  .sh-xp .xp-bdl{font-size:12px;padding:3px 5px;letter-spacing:.06em;max-width:96px} .sh-xp .xp-bdl small{font-size:9.5px}
  .sh-xp .xp-rows{grid-template-columns:1fr 1fr;gap:3px 10px}
  .sh-xp .xp-r{padding-left:7px} .sh-xp .xp-r span{font-size:9.5px;letter-spacing:.02em} .sh-xp .xp-r b{font-size:14px}
  .sh-xp .xp-up{padding:0 10px;text-align:center} .sh-xp .xp-upt{font-size:26px;letter-spacing:.08em;line-height:1.1} .sh-xp .xp-upj{font-size:20px}
  .sh-xp .xp-wr{gap:6px;padding:3px 8px;flex-wrap:nowrap} .sh-xp .xp-wr .wr-s{font-size:12px;letter-spacing:.1em} .sh-xp .xp-wr .wr-p{font-size:19px;white-space:nowrap} .sh-xp .xp-wr .wr-n{white-space:nowrap;letter-spacing:.06em}   /* «0 %» / «31–19» never break into two lines */
  .sh-xp .xp-bigs,.sh-xp .xp-guest{grid-column:1/-1} .sh-xp .xp-wr{margin-left:0} .sh-xp .xp-head{gap:6px 10px} .sh-xp .xp-hero{gap:10px;flex-wrap:wrap} .sh-xp .xb-k{min-width:0} .sh-xp .xh-k{font-size:20px} .sh-xp .xh-n{font-size:40px} .sh-xp .xh-x{font-size:34px}
}
@media (max-width:760px) and (min-height:521px){
  .lob-lvl{justify-self:start;align-self:center;margin-top:0;width:auto;max-width:calc(100% - 186px);padding:3px 10px 4px 4px;gap:7px}   /* left of the account button */
  .lob-lvl .xp-bd.sm{width:34px;height:38px} .lob-lvl .xp-bd.sm .xp-n{font-size:16px}
  .lob-lvl .ll-nx,.lob-lvl .ll-of{display:none} .lob-lvl .ll-t{gap:5px;min-width:74px} .lob-lvl .ll-k .lbl{font-size:9px;white-space:nowrap}
}
@media (max-height:520px){
  .lob-lvl{align-self:start;margin-top:calc(var(--tap) + 6px);width:min(260px,100%);padding:4px 10px 5px 5px;gap:8px}
  .lob-lvl .xp-bd.sm{width:36px;height:40px} .lob-lvl .xp-bd.sm .xp-n{font-size:17px} .lob-lvl .ll-nx{display:none}
  #show .sh-xp{padding:6px 10px 8px 6px;--xp-bdw:62px} .sh-xp .xp-bd{width:46px;height:52px} .sh-xp .xp-bd .xp-n{font-size:22px}
  .sh-xp .xp-main{gap:5px} .sh-xp .xp-tot{font-size:20px} .sh-xp .xh-n{font-size:34px} .sh-xp .xh-x{font-size:28px} .sh-xp .xh-k{font-size:18px} .sh-xp .xp-rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px} .sh-xp .xp-r span{font-size:9.5px;letter-spacing:.02em} .sh-xp .xp-r b{font-size:13px}
}

/* ---------- «Лидеры» of «Ball of Satan» (public/leaders.js; the modal's base: ui/screens/panels.css #ld) ---------- */
#ld.bos .ld-b{margin:6px 0 4px;gap:0;border-bottom:var(--bw) solid var(--line)}
#ld.bos .ld-tab{flex:1;min-height:44px;padding:0 8px;border:0;border-bottom:2px solid transparent;background:none;color:var(--dim);cursor:pointer;font:600 16px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
#ld.bos .ld-tab.on{color:#fff;border-bottom-color:var(--amber)}
#ld.bos .ld-f{margin:8px 0 10px;padding-top:0;border-top:0}
#ld.bos .ld-f .chip.side.swat.on{color:var(--cyan);border-color:var(--cyan)} #ld.bos .ld-f .chip.side.possessed.on{color:var(--mag);border-color:var(--mag)}
#ld.bos .ldt td.v b{font:600 20px/1 var(--disp);color:var(--amber)}
#ld.bos .ldt td.v i{margin-left:8px;font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.08em;color:var(--dim)}
#ld.bos .ld-me{border-top:var(--bw) solid var(--line2)}
#ld.bos .ld-me .ldt tr td{background:rgba(53,230,255,.07)}
#ld.bos .ld-where{display:block;margin-bottom:3px;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
#ld.bos .ld-guest{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 8px;color:var(--mute);font:500 12px/1.4 var(--mono);letter-spacing:.04em;background:rgba(236,230,242,.04)}
#ld.bos .ld-guest .btn-a.sm{min-height:38px;padding:0 16px;font-size:15px;letter-spacing:.1em}
@media (max-width:600px){ #ld.bos .ld-tab{font-size:13px;letter-spacing:.08em;padding:0 4px} #ld.bos .ldt td.v i{display:block;margin:4px 0 0} }

/* the Tab board of «Ball of Satan» (ui/board-dv.js): the level badge before a nick, from level 1 on */
.bd-side li .n .bd-lv{position:relative;display:inline-grid;place-items:center;width:17px;height:19px;margin-right:6px;vertical-align:-4px}
.bd-side li .n .bd-lv svg{position:absolute;inset:0;width:100%;height:100%;fill:rgba(7,5,11,.9);stroke:var(--amber);stroke-width:4}
.bd-side li .n .bd-lv b{position:relative;font:600 10px/1 var(--disp);color:#fff;letter-spacing:0}

/* one XP number big (SOC-163, the game designer's loop audit §6: three numbers on one screen read as three awards): the total
   in amber, the headline and the big lines a step down as the breakdown */
.sh-xp .xp-tot{font-size:clamp(38px,3.8vw,54px);color:var(--amber);text-shadow:0 0 16px rgba(255,181,71,.4)}
.sh-xp .xp-tot small{vertical-align:.9em}
.sh-xp .xh-n{font-size:clamp(28px,2.8vw,40px)} .sh-xp .xh-x{font-size:clamp(20px,1.9vw,26px);color:var(--ink);text-shadow:none}
.sh-xp .xb-x{font-size:clamp(18px,1.6vw,22px);color:var(--ink)}
@media (max-width:600px){.sh-xp .xp-tot{font-size:36px} .sh-xp .xh-n{font-size:28px} .sh-xp .xh-x{font-size:20px}}
@media (max-height:520px){.sh-xp .xp-tot{font-size:28px} .sh-xp .xh-n{font-size:24px} .sh-xp .xh-x{font-size:18px}}