/* 25 Oct 2026 (owner: «сьезжает панелька вниз, надо вообще полностью переделать магазин» — like the donation shop of the reference):
   the shop window (js/client/62-donate-ui.js). One size that fits the screen and is never dragged off it: the sections in a column on the
   left, a grid of product cards on the right that scrolls inside the window, the balance at the top, the pool's line at the bottom; what a
   chest gave comes over the window. The hanging offer's window (22-offers-ui.js) shows the same card (.shCard). Loaded before round.css. */
#modals .veil[data-k=don] .modal.panel{width:min(1120px,100%);height:min(780px,100%);max-height:100%;padding:0!important;overflow:hidden;display:flex;flex-direction:column}
.shWrap{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border-radius:inherit;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%,#2c1e12 0%,#170f0a 55%,#100b07 100%)}
.shTop{display:flex;align-items:center;gap:12px;padding:12px 14px 10px 18px;border-bottom:2px solid #4a3018;background:linear-gradient(180deg,#3a2614,#21160c)}
/* 25 Oct: the title and, beside it, the line «80% покупок за MET уходит в банк вашей ступени ($…)» (62-donate-ui.js dnPool); the footer is gone */
.shTW{flex:1;min-width:0;display:flex;align-items:center;gap:14px}
.shTitle{flex:none;font:700 24px/1 var(--f-display);color:var(--gold);text-shadow:2px 2px 0 #000;white-space:nowrap}
.shPool{min-width:0;padding:5px 11px;border-radius:8px;background:rgba(12,9,6,.55);outline:1px solid #4a3018;outline-offset:-1px;color:#e9d9ad;font:600 13px/1.3 var(--f-ui)}
.shBal{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.shBal>span{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#0c0906;outline:2px solid #4a3018;outline-offset:-2px;font:700 15px/1 var(--f-ui);white-space:nowrap}
.shGold{color:var(--gold)}.shMet{color:#c9a4ff}
.shX{flex:none;width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#ffe0b0;font:700 16px/1 var(--f-ui);
  background:var(--fB,#2a1c10);outline:2px solid var(--rim,#8d6232);outline-offset:-2px}
.shX:hover{outline-color:var(--rimHi,#d4a046);color:#fff}
.shBody{flex:1;min-height:0;display:flex}
.shNav{flex:0 0 196px;display:flex;flex-direction:column;gap:4px;padding:12px 10px;border-right:2px solid #3a2614;background:#120c08cc;overflow:auto}
.shNav button{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--dim);
  font:600 14px/1.1 var(--f-ui);text-align:left;cursor:pointer}
.shNav button canvas{width:24px;height:24px;image-rendering:pixelated;flex:none}
.shNav button:hover{background:#2a1c10;color:var(--ink)}
.shNav button.on{background:linear-gradient(90deg,#4f3514,#2a1c0c 90%);color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.shNav button.hot span{color:#ffe08a}
.shNav button em{margin-left:auto;font:700 11px var(--f-ui);color:#ffb84a;font-style:normal}
.shNav button.hot{animation:shGlow 1.6s ease-in-out infinite alternate}
.shMain{flex:1;min-width:0;display:flex;flex-direction:column}
.shHead{padding:12px 18px 6px}
.shHead h3{margin:0;font:700 18px/1.2 var(--f-ui);color:var(--ink)}
.shHead p{margin:3px 0 0;color:var(--dim);font-size:12.5px;line-height:1.35}
.shGrid{flex:1;min-height:0;overflow:auto;padding:8px 18px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-content:start}
.shGrid.one{grid-template-columns:minmax(0,500px);justify-content:center}
.shCard{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:12px;background:linear-gradient(180deg,#2b1e13 0%,#1a120b 100%);
  outline:2px solid #5b3d1e;outline-offset:-2px;box-shadow:inset 0 0 0 4px #120c08,0 4px 12px #0008}
.shCard:hover{outline-color:var(--sc)}
.shCT{padding:10px 12px 9px;font:700 15px/1.2 var(--f-ui);color:var(--sc);background:linear-gradient(90deg,#0000006a,transparent);border-bottom:1px solid #3a2614;
  border-radius:12px 12px 0 0;text-shadow:1px 1px 0 #000}
.shCard:has(>.shTag) .shCT{padding-right:min(46%,130px)}
.shTag{position:absolute;top:8px;right:8px;max-width:58%;padding:3px 8px;border-radius:999px;background:var(--sc);color:#1a0b02;font:800 10px/1.2 var(--f-ui);
  text-transform:uppercase;letter-spacing:.03em;text-align:center;box-shadow:0 1px 4px #000a}
.shArt{display:grid;place-items:center;height:104px;background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--sc) 32%,transparent) 0%,transparent 58%)}
.shArt canvas.big{width:80px;height:80px;image-rendering:pixelated;filter:drop-shadow(0 4px 6px #000)}
.shArt canvas[data-dpk]{width:76px;height:76px;image-rendering:pixelated;filter:drop-shadow(0 4px 6px #000)}
.shGlyph{font-size:46px;line-height:1;filter:drop-shadow(0 3px 4px #000)}
.shD{padding:0 12px 8px;color:var(--dim);font-size:12px;line-height:1.4;text-align:center}
.shStat{padding:0 12px 6px;font-size:12px;color:var(--dim);text-align:center}.shStat b{color:var(--ink)}
/* 31 Oct: the odds of a companion card's buttons, colour dots */
.shOdds{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;padding:0 10px 4px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}.shOdds b{color:var(--ink);font-weight:600;min-width:2.2em;text-align:right}.shOdds i{font-style:normal;margin-right:2px}
.shOn{color:var(--good)}
.shList{padding:0 12px 8px;font-size:12px}
.shLH{color:#c9b37a;font:700 10.5px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.05em;margin:6px 0 4px}
.shList ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.shList li{display:flex;align-items:center;gap:7px;padding:3px 7px;border-radius:6px;background:#00000038}
.shList li canvas{width:16px;height:16px;image-rendering:pixelated;flex:none}
.rchMay{display:flex;flex-wrap:wrap;gap:4px;padding:3px 7px;border-radius:6px;background:#00000038} /* 31 Oct: what a chest of luck may give (62-donate-ui.js rchCard) */
.rchMay canvas{width:20px;height:20px;image-rendering:pixelated}
.shList li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shList li b{color:var(--ink);font-weight:600;white-space:nowrap}
.shList li em{font-style:normal;color:#b9a678;min-width:40px;text-align:right;font-weight:600}
.shList ul.odds li{background:#2a1c1040}
.shMeta{display:flex;justify-content:space-between;align-items:center;gap:4px 10px;flex-wrap:wrap;padding:7px 12px 0;margin-top:auto;border-top:1px dashed #3a2614;font-size:11.5px;color:var(--dim)}
.shMeta b{color:var(--ink)}.shFull,.shFull b{color:#ff8a6a}.shWorth{color:#c9b37a}
.shBtns{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 12px}
.shCard>.shStat+.shBtns,.shCard>.shD+.shBtns{margin-top:auto}
.shBtns .btn{flex:1 1 auto;padding:7px 8px;font-size:12.5px;white-space:nowrap}
.shBtns .shBuy{flex:1 1 100%;padding:9px 10px;font-size:14px}
.shBtns .shUse{flex:1 1 100%}
.shTimer{text-align:center;color:var(--dim);font-size:12px;padding:4px 0 6px}.shTimer b{color:#ffb84a;font:700 16px var(--f-ui)}
.shOffer{outline-color:var(--gold);box-shadow:inset 0 0 0 4px #120c08,0 0 26px #ffd24a40}
.shOffer .shArt{height:120px}
/* what fell out of a chest */
.shRes{position:absolute;inset:0;display:grid;place-items:center;background:#0a0604dc;z-index:3;animation:shFade .2s ease-out}
.shResP{width:min(600px,92%);max-height:92%;overflow:auto;text-align:center;padding:18px 18px 16px;border-radius:16px;
  background:radial-gradient(90% 60% at 50% 0%,#3b2814 0%,#1b120b 70%);outline:2px solid var(--gold);outline-offset:-2px;box-shadow:0 0 50px #ffd24a33,0 20px 60px #000}
.shResP canvas.big{width:96px;height:96px;image-rendering:pixelated;filter:drop-shadow(0 0 14px #ffd24a88);animation:shPop .55s cubic-bezier(.2,1.6,.4,1)}
.shResP h3{margin:6px 0 0;font:700 22px/1.2 var(--f-display);color:var(--gold);text-shadow:2px 2px 0 #000}
.shResP p{margin:2px 0 12px;color:var(--dim)}
.shResG{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.shIt{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;border-radius:10px;background:#1d140c;
  outline:2px solid color-mix(in srgb,var(--ic) 55%,#000);outline-offset:-2px;animation:shIn .35s ease-out both}
.shIt canvas{width:40px;height:40px;image-rendering:pixelated}
.shIt b{font:600 12.5px/1.25 var(--f-ui)}.shIt small{color:var(--dim)}
.shIt.roll{background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--ic) 22%,#1d140c) 0%,#1d140c 70%);box-shadow:0 0 18px color-mix(in srgb,var(--ic) 45%,transparent)}
.shIt i{position:absolute;top:4px;right:7px;font:800 9px/1 var(--f-ui);color:var(--gold);text-transform:uppercase;font-style:normal}
.shIt:nth-child(2){animation-delay:.06s}.shIt:nth-child(3){animation-delay:.12s}.shIt:nth-child(4){animation-delay:.18s}.shIt:nth-child(5){animation-delay:.24s}
.shIt:nth-child(6){animation-delay:.3s}.shIt:nth-child(7){animation-delay:.36s}.shIt:nth-child(8){animation-delay:.42s}.shIt:nth-child(n+9){animation-delay:.48s}
.shResP>.btn{min-width:180px;padding:10px 18px;font-size:15px}
.shRes.still,.shRes.still *{animation:none!important}
@keyframes shFade{from{opacity:0}to{opacity:1}}
@keyframes shPop{0%{transform:scale(.4) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes shIn{from{transform:translateY(8px) scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes shGlow{from{box-shadow:inset 0 0 0 1px #ffd24a33}to{box-shadow:inset 0 0 0 1px #ffd24aaa,0 0 12px #ffd24a44}}
/* the hanging offer's window: one card */
.ofWrap.ofOne .shGrid.one{overflow:visible;padding:6px 0 12px}
.ofWrap.ofOne .ofFoot{gap:8px}
/* 30 Oct (owner): the one set stands in the middle of the window */
.ofWrap.ofOne .shGrid{grid-template-columns:minmax(0,380px);justify-content:center}
/* the chapter card of «Вставить находки»: its own buttons (19-lore-ui.js trkFillBtns) */
#loreTrk .tfill{display:flex;gap:6px;margin:0 8px 8px}
#loreTrk .tfill .btn{flex:1 1 auto;padding:6px 8px;font-size:12px;white-space:normal;line-height:1.15}
/* phones and narrow windows: the sections in a row on top, one card a row */
@media (max-width:760px){
  .shTop{padding:10px 10px 8px 12px;gap:8px;flex-wrap:wrap}
  .shTitle{font-size:19px}
  .shTW{display:contents} /* the line about the bank goes to its own row under the title, the balance and ✕ */
  .shTitle{flex:1;min-width:0}
  .shPool{order:5;flex:1 1 100%;font-size:11.5px;padding:4px 8px}
  .shBal>span{font-size:12.5px;padding:5px 9px}
  .shBody{flex-direction:column}
  .shNav{flex:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:2px solid #3a2614;padding:6px;gap:4px}
  .shNav button{flex:none;padding:8px 10px;font-size:13px}
  .shNav button.on{box-shadow:inset 0 -3px 0 var(--gold)}
  .shHead{padding:8px 12px 4px}.shHead p{font-size:11.5px}
  .shGrid{grid-template-columns:1fr;padding:6px 10px 12px}
}
/* the craft's guarantee table on the left of «Спутники → Крафт» (10-companions-screen.js pityTable): a row a colour — the colours and the
   crafts its duplicates allow, then the bar of failures and how many crafts until a certain one */
.cpity{margin:4px 0 6px;padding:10px 10px 8px;border-radius:12px;background:#0c0a12cc;outline:1px solid #3a2e52;outline-offset:-1px}
.cpH{font:700 12.5px/1.2 var(--f-ui);color:#e8dcc0;text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px}
.cpRow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:4px 10px;width:100%;padding:6px 8px;margin:0;border:0;
  border-radius:8px;background:none;color:#cfc4a8;font:600 12.5px/1.2 var(--f-ui);text-align:left;cursor:pointer}
.cpRow+.cpRow{margin-top:2px}
.cpRow:hover{background:#ffffff0d}
.cpRow.on{background:#ffffff14;box-shadow:inset 3px 0 0 var(--b)}
.cpC{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cpC i{width:9px;height:9px;border-radius:2px;flex:none;box-shadow:0 0 0 1px #000}
.cpN{color:#9a8f72;font-size:11.5px;white-space:nowrap}.cpN b{color:#fff}
.cpBar{position:relative;height:16px;border-radius:999px;background:#1b1726;outline:1px solid #3a2e52;overflow:hidden}
.cpBar u{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,color-mix(in srgb,var(--b) 50%,#000),var(--b))}
.cpBar b{position:relative;display:block;text-align:center;font:700 11px/16px var(--f-ui);color:#fff;text-shadow:0 1px 2px #000}
.cpG{color:#9a8f72;font-size:11.5px;white-space:nowrap;min-width:64px;text-align:right}.cpG b{color:#fff}
.cpRow.sure .cpG{color:var(--gold);font-weight:700}
.cpRow.sure .cpBar{box-shadow:0 0 10px var(--b)}
.cpity .cnote{margin-top:6px;font-size:12px}
/* the fairy's bottle at a death (62-donate-ui.js faeShow): over the HUD, in the middle */
#faeBox{position:absolute;left:50%;bottom:190px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:12px;padding:12px 14px;
  width:min(520px,calc(100% - 32px));border-color:#ff9ae8;outline-color:#ff9ae8!important;box-shadow:0 0 30px #ff9ae866,0 10px 30px #000c;animation:shIn .3s ease-out}
#faeBox canvas{width:48px;height:48px;image-rendering:pixelated;flex:none;filter:drop-shadow(0 0 8px #ff9ae8)}
#faeBox span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#faeBox b{font:700 16px/1.2 var(--f-ui);color:#ffc2f1}
#faeBox small{color:var(--dim);font-size:12px;line-height:1.35}
#faeBox .btn{flex:none;padding:10px 14px;font-size:14px}
@media (max-width:700px){#faeBox{bottom:240px;flex-wrap:wrap}#faeBox .btn{flex:1 1 100%}}
/* 30 Oct (owner): the new shop — the sets with their discount (the price one by one struck out), the packs of companions with a button a kind,
   the offer's three sets, the battle pass and its line of rewards (js/client/62-donate-ui.js) */
.shWorth s{color:#9a8f72;text-decoration-thickness:2px}
.shPick{flex:1 1 100%;text-align:center;color:var(--dim);font-size:11.5px;margin-bottom:-2px}
.shGrid.three{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ofWrap .shGrid.three{overflow:visible;padding:6px 0 12px}
.modal:has(.ofWrap .shGrid.three){width:min(980px,96vw)}
.bpPk{margin:0;padding:0 4px;list-style:none;text-align:left;display:flex;flex-direction:column;gap:3px}
.bpPk li{padding:3px 8px;border-radius:6px;background:#00000038;color:#e9d9ad;font-size:12px}
.bpPk li::before{content:'✦ ';color:#c9a4ff}
.shBp{grid-column:1/-1;max-width:560px;justify-self:center;width:100%}
.bpLine{grid-column:1/-1;min-width:0;border-radius:12px;background:#120c08cc;outline:2px solid #3a2614;outline-offset:-2px;padding:10px 0 8px}
.bpH{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 12px 8px}
.bpH b{font:700 15px/1.2 var(--f-ui);color:#c9a4ff}
.bpH span{flex:1;min-width:200px;color:var(--dim);font-size:12px;line-height:1.35}
.bpH .btn{padding:7px 14px}
.bpRow{display:flex;gap:8px;overflow-x:auto;padding:4px 12px 10px;scroll-behavior:smooth}
.bpD{flex:0 0 108px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;border-radius:10px;background:#1d140c;
  outline:2px solid #3a2614;outline-offset:-2px;opacity:.72;transition:transform .12s}
.bpD small{color:var(--dim);font:600 11px/1.1 var(--f-ui);white-space:nowrap}
.bpD{cursor:pointer}.bpD:hover{filter:brightness(1.18)}
.bpPop{position:fixed;z-index:60;min-width:200px;max-width:280px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;font:500 13px/1.3 var(--f-ui);color:var(--ink);background:#170f09f2;border:1px solid #6a4a28;border-radius:10px;box-shadow:0 8px 24px #000a}
.bpPop>b{color:var(--gold);font-size:14px}.bpPop small{color:var(--dim)}.bpPop .btn{margin-top:4px}
.bpD .bpI{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:44px;align-items:center}
.bpD .bpI span{display:flex;flex-direction:column;align-items:center;gap:1px}
.bpD .bpI canvas{width:28px;height:28px;image-rendering:pixelated}
.bpD .bpI b{font:700 11px/1 var(--f-ui)}
.bpD em{font:700 11px/1.1 var(--f-ui);font-style:normal;color:var(--dim);min-height:12px}
.bpD.big{outline-color:#4a6aa8}
.bpD.now{outline-color:var(--gold);opacity:1}
.bpD.ok{opacity:1;cursor:pointer;outline-color:#c9a4ff;box-shadow:0 0 14px #c9a4ff55;animation:shGlow 1.4s ease-in-out infinite alternate}
.bpD.ok em{color:#c9a4ff}
.bpD.ok:hover{transform:translateY(-2px)}
.bpD.got{opacity:.5}
.bpD.got em{color:var(--good)}
@media (max-width:760px){.bpD{flex-basis:92px}.bpD .bpI canvas{width:24px;height:24px}}