/* ---------- станция улучшений: всё собрано из растрового набора интерфейса, img/ui/shop/ ---------- */
/* --p — «пиксель макета» (1280×720), задаётся из shop.js по размеру окна. Анимации только transform/opacity. */
#shop{position:fixed;inset:0;z-index:30;--p:1px;--fs:.5;color:var(--text);font-family:'Exo 2',system-ui,sans-serif;overflow:hidden;touch-action:none}
#shop[hidden]{display:none}
#shop *{box-sizing:border-box}
#shop button{font:inherit;color:inherit;background-color:transparent;border-width:0;padding:0;margin:0;outline:none}
#shop [hidden]{display:none!important}
.shp-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(5,8,12,.42),rgba(2,3,5,.86))}

/* рамка окна: заголовок и подвал лежат в полях самой картинки */
.shp-win{position:absolute;left:calc(26*var(--p));right:calc(26*var(--p));top:calc(14*var(--p));bottom:calc(14*var(--p));display:flex;flex-direction:column;min-height:0;
  border-style:solid;border-color:transparent;border-width:calc(200*var(--fs)*var(--p)) calc(84*var(--fs)*var(--p)) calc(114*var(--fs)*var(--p));
  border-image:url(../img/ui/shop/panel.webp) 200 84 114 fill stretch}
.shp-head{position:absolute;left:0;right:0;top:calc(-136*var(--fs)*var(--p));height:calc(112*var(--fs)*var(--p));display:flex;align-items:center;gap:calc(14*var(--p));padding:0 calc(8*var(--p))}
.shp-tt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:calc(1*var(--p))}
.shp-tt b{font:400 calc(23*var(--p))/1 'Russo One',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--cream);text-shadow:0 calc(2*var(--p)) 0 #000,0 0 calc(14*var(--p)) rgba(255,190,110,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shp-tt span{font:700 calc(11*var(--p))/1.2 'Exo 2',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7fd8ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shp-score{position:relative;flex:none;width:calc(372*var(--p));height:calc(55*var(--p));margin:calc(-2*var(--p)) 0;background:url(../img/ui/shop/score.webp) center/100% 100% no-repeat;display:flex;align-items:center;justify-content:flex-end;gap:calc(10*var(--p));padding:0 calc(42*var(--p)) 0 calc(62*var(--p))}
.shp-score b{font:400 calc(29*var(--p))/1 'Russo One',sans-serif;letter-spacing:.03em;color:var(--amber2);text-shadow:0 calc(2*var(--p)) 0 #2b1705,0 0 calc(14*var(--p)) rgba(255,180,70,.55);white-space:nowrap;transform-origin:right center}
.shp-score em{font:800 calc(10*var(--p))/1 'Exo 2',sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#d7b98a}
.shp-glow{position:absolute;inset:8% 6%;opacity:0;background:radial-gradient(ellipse at 70% 50%,rgba(255,190,90,.6),transparent 70%);pointer-events:none}
.shp-x{position:relative;flex:none;--s:calc(46*var(--p))!important;margin-left:calc(2*var(--p))}

/* вкладки: пластины из набора */
.shp-tabs{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(6*var(--p));padding:calc(2*var(--p)) 0 calc(6*var(--p));position:relative;z-index:2}
.shp-tab{position:relative;height:calc(46*var(--p));min-width:0;border-style:solid!important;border-color:transparent!important;border-width:calc(21*var(--p)) calc(24*var(--p))!important;border-image:url(../img/ui/shop/plate0.webp) 84 100 fill stretch;transition:transform .12s}
.shp-tab-in{position:absolute;left:calc(-20*var(--p));right:calc(-20*var(--p));top:calc(-21*var(--p));bottom:calc(-21*var(--p));display:flex;align-items:center;justify-content:center;gap:calc(7*var(--p))}
.shp-tab-in>img{width:calc(32*var(--p));height:calc(32*var(--p));flex:none;opacity:.78;transition:opacity .12s,transform .14s}
.shp-tab-in>span{font:400 calc(13*var(--p))/1.05 'Russo One',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#a79f90;text-shadow:0 calc(2*var(--p)) 0 #000;white-space:nowrap;min-width:0}
.shp-tab:hover{border-image-source:url(../img/ui/shop/plate1.webp)}
.shp-tab:hover .shp-tab-in>span{color:#fff1d2}.shp-tab:hover .shp-tab-in>img{opacity:1}
.shp-tab:active{border-image-source:url(../img/ui/shop/plate2.webp);transform:translateY(calc(1*var(--p)))}
.shp-tab.on{border-image-source:url(../img/ui/shop/plate1.webp)}
.shp-tab.on .shp-tab-in>span{color:var(--amber2);text-shadow:0 calc(2*var(--p)) 0 #2b1705,0 0 calc(12*var(--p)) rgba(255,170,60,.6)}
.shp-tab.on .shp-tab-in>img{opacity:1;transform:scale(1.12)}
.shp-tab.on::after{content:'';position:absolute;left:8%;right:8%;bottom:calc(-24*var(--p));height:calc(2*var(--p));background:linear-gradient(90deg,transparent,#5fe8ff,transparent);box-shadow:0 0 calc(8*var(--p)) #5fe8ff}

.shp-body{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) calc(352*var(--p));gap:calc(10*var(--p));position:relative}
.shp-main{min-width:0;min-height:0;display:flex;flex-direction:column;gap:calc(6*var(--p))}
.shp-cap{display:none;flex:none;align-items:baseline;gap:calc(10*var(--p));padding:0 calc(6*var(--p));min-width:0}
.shp-body[data-tab=weapon] .shp-cap{display:flex}
.shp-cap b{flex:none;font:400 calc(14*var(--p))/1.1 'Russo One',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--amber2);text-shadow:0 calc(2*var(--p)) 0 #000}
.shp-cap span{flex:1 1 auto;min-width:0;font:500 calc(11.5*var(--p))/1.1 'Exo 2',sans-serif;color:#a9a091;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shp-cap em{display:none;font:400 calc(14*var(--p))/1.1 'Russo One',sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--amber2)}

/* оружие: пластины с картинками */
.shp-wpn{flex:none;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:calc(3*var(--p));touch-action:pan-x}
.shp-w{position:relative;height:calc(55*var(--p));min-width:0;border-style:solid!important;border-color:transparent!important;border-width:calc(13*var(--p)) calc(15*var(--p))!important;border-image:url(../img/ui/shop/plate0.webp) 84 100 fill stretch;transition:transform .12s}
.shp-w>img{position:absolute;left:calc(-9*var(--p));top:calc(-7*var(--p));width:calc(100% + 18*var(--p));height:calc(100% + 14*var(--p));object-fit:contain;filter:drop-shadow(0 calc(2*var(--p)) calc(3*var(--p)) rgba(0,0,0,.9))}
.shp-w:hover{border-image-source:url(../img/ui/shop/plate1.webp)}
.shp-w:active{border-image-source:url(../img/ui/shop/plate2.webp)}
.shp-w.on{border-image-source:url(../img/ui/shop/plate1.webp);transform:translateY(calc(-1*var(--p)))}
.shp-w.on::after{content:'';position:absolute;left:0;right:0;bottom:calc(-12*var(--p));height:calc(2*var(--p));background:linear-gradient(90deg,transparent,#5fe8ff,transparent);box-shadow:0 0 calc(7*var(--p)) #5fe8ff}
.shp-w.focus{transform:translateY(calc(-1*var(--p))) scale(1.07);z-index:1}
.shp-w.focus::before{content:'';position:absolute;inset:calc(-12*var(--p)) calc(-13*var(--p));border:1px solid rgba(191,246,255,.8);box-shadow:0 0 calc(10*var(--p)) rgba(95,232,255,.8),inset 0 0 calc(6*var(--p)) rgba(95,232,255,.4);pointer-events:none}
.shp-w.off>img{filter:brightness(.16) saturate(.25) drop-shadow(0 0 calc(1*var(--p)) rgba(255,160,70,.5))}
.shp-lock{display:inline-block;width:calc(14*var(--p));height:calc(16*var(--p));filter:brightness(1.5);background:url(../img/ui/shop/lock.webp) center/contain no-repeat;flex:none}
.shp-w>.shp-lock{position:absolute;left:50%;top:50%;width:calc(20*var(--p));height:calc(23*var(--p));transform:translate(-50%,-50%);display:none}
.shp-w.off>.shp-lock{display:block}

/* карточки */
.shp-grid{flex:1 1 0;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(calc(112*var(--p)),1fr);gap:calc(5*var(--p));overflow-y:auto;overflow-x:hidden;touch-action:pan-y;align-content:start;padding:calc(2*var(--p));scrollbar-width:thin;scrollbar-color:#5a4426 transparent}
.shp-grid.n4,.shp-grid.n5,.shp-grid.n6{grid-auto-rows:minmax(calc(112*var(--p)),calc(150*var(--p)))}
.shp-grid::-webkit-scrollbar{width:calc(6*var(--p))}.shp-grid::-webkit-scrollbar-thumb{background:#7a5526;border-radius:3px}
.shp-c{position:relative;display:block;width:100%;height:100%;min-width:0;text-align:left;transition:transform .12s;
  border-style:solid!important;border-color:transparent!important;border-width:calc(26*var(--p))!important;border-image:url(../img/ui/shop/card0.webp) 66 fill stretch}
.shp-c-in{position:absolute;left:calc(-14*var(--p));right:calc(-7*var(--p));top:calc(-16*var(--p));bottom:calc(-16*var(--p));display:flex;align-items:center;gap:calc(11*var(--p))}
.shp-c:hover{transform:translateY(calc(-2*var(--p)));border-image-source:url(../img/ui/shop/card1.webp)}
.shp-c:active{border-image-source:url(../img/ui/shop/card2.webp);transform:translateY(calc(1*var(--p)))}
.shp-c.sel{border-image-source:url(../img/ui/shop/card1.webp)}
.shp-c[data-st=gate],.shp-c[data-st=need],.shp-c[data-st=limit],.shp-c[data-st=full]{border-image-source:url(../img/ui/shop/card3.webp)}
.shp-c[data-st=gate].sel,.shp-c[data-st=need].sel,.shp-c[data-st=limit].sel,.shp-c[data-st=full].sel{border-image-source:url(../img/ui/shop/card1.webp)}
.shp-c.sel::before{content:'';position:absolute;left:calc(-16*var(--p));right:calc(-16*var(--p));top:calc(-16*var(--p));bottom:calc(-16*var(--p));pointer-events:none;background:linear-gradient(90deg,rgba(95,232,255,.09),transparent 45%)}
.shp-c-ico{position:relative;flex:none;width:calc(82*var(--p));height:calc(82*var(--p));display:flex;align-items:center;justify-content:center}
.shp-c-ico img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 calc(3*var(--p)) calc(4*var(--p)) rgba(0,0,0,.85))}
.shp-c.arm .shp-c-ico{width:calc(136*var(--p));height:calc(72*var(--p))}
.shp-c.arm .shp-c-top b{white-space:normal;line-height:1.05}
.shp-c-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:calc(4*var(--p))}
.shp-c-top{display:flex;align-items:baseline;gap:calc(8*var(--p));min-width:0}
.shp-c-top b{flex:1 1 auto;min-width:0;font:400 calc(15*var(--p))/1.1 'Russo One',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#f7e6bd;text-shadow:0 calc(2*var(--p)) 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shp-c-top em{flex:none;font:800 calc(10.5*var(--p))/1 'Exo 2',sans-serif;font-style:normal;letter-spacing:.08em;color:#8fa3ad}
.shp-c-d{min-height:calc(14*var(--p));font:500 calc(11.5*var(--p))/1.25 'Exo 2',sans-serif;color:#b8ad98}
.shp-c-d .shp-no{color:#ff8a70;font-weight:800}
.shp-c-d:empty{display:none}
.shp-g{display:flex;gap:0;width:100%;height:calc(15*var(--p))}
.shp-g i{position:relative;flex:1 1 0;min-width:0;background:url(../img/ui/shop/seg_e.webp) center/100% 100% no-repeat}
.shp-g i u{position:absolute;inset:0;background:url(../img/ui/shop/seg_f.webp) center/100% 100% no-repeat;opacity:0;transform-origin:left center;text-decoration:none}
.shp-g i.on u{opacity:1}
.shp-g i.nx u{background-image:url(../img/ui/shop/seg_c.webp);opacity:.28}
.shp-c.sel .shp-g i.nx u{animation:shpNx 1.1s ease-in-out infinite}
@keyframes shpNx{0%,100%{opacity:.25}50%{opacity:.85}}
.shp-g i.lk{opacity:.42}
.shp-g.n3{max-width:calc(150*var(--p))}
.shp-c[data-st=max] .shp-g i.on u{background-image:url(../img/ui/shop/seg_g.webp)}
.shp-c-bot{display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--p));min-height:calc(19*var(--p))}
.shp-v{min-width:0;display:flex;align-items:center;gap:calc(6*var(--p));font:800 calc(13*var(--p))/1.1 'Exo 2',sans-serif;letter-spacing:.02em;color:#a9b2b9;white-space:nowrap;overflow:hidden}
.shp-v .shp-b{color:var(--cyan);text-shadow:0 0 calc(8*var(--p)) rgba(95,232,255,.45)}
.shp-v .shp-ok{color:var(--amber2)}
.shp-v .shp-no{color:#ff8a70;font-size:calc(10.5*var(--p));font-weight:700;margin-left:calc(5*var(--p));overflow:hidden;text-overflow:ellipsis;min-width:0}
.shp-ar{display:inline-block;flex:none;width:calc(11*var(--p));height:calc(9*var(--p));opacity:.85;background:linear-gradient(90deg,#5fe8ff,#5fe8ff) left center/70% 18% no-repeat;position:relative;clip-path:polygon(0 38%,62% 38%,62% 0,100% 50%,62% 100%,62% 62%,0 62%);background:#5fe8ff}
.shp-gate{display:flex;align-items:center;gap:calc(4*var(--p));font:700 calc(11*var(--p))/1.1 'Exo 2',sans-serif;color:#b9a98c;min-width:0}
.shp-gate>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shp-p{flex:none;display:flex;align-items:center;gap:calc(4*var(--p));margin-left:auto}
.shp-p img{width:calc(18*var(--p));height:calc(18*var(--p))}
.shp-p b{font:400 calc(15*var(--p))/1 'Russo One',sans-serif;letter-spacing:.02em;color:var(--amber2);text-shadow:0 calc(2*var(--p)) 0 #2b1705,0 0 calc(8*var(--p)) rgba(255,180,70,.4)}
.shp-p.tag b{font:800 calc(10.5*var(--p))/1 'Exo 2',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#c8bfae;padding:calc(3*var(--p)) calc(7*var(--p));background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);text-shadow:none}
.shp-c[data-st=pts] .shp-p b{color:#ff7a5a;text-shadow:0 calc(2*var(--p)) 0 #300}
.shp-c[data-st=max] .shp-p.tag b{color:#2b1806;background:linear-gradient(#ffd27a,#d4861c);box-shadow:0 0 calc(8*var(--p)) rgba(255,170,60,.5)}
.shp-c[data-st=owned] .shp-p.tag b{color:#072a33;background:linear-gradient(#a9f4ff,#2fb3d1);box-shadow:0 0 calc(8*var(--p)) rgba(95,232,255,.45)}
.shp-c[data-st=gate] .shp-c-ico img,.shp-c[data-st=need] .shp-c-ico img,.shp-c[data-st=limit] .shp-c-ico img,.shp-c[data-st=full] .shp-c-ico img{opacity:.5}
.shp-c[data-st=gate] .shp-c-top b,.shp-c[data-st=need] .shp-c-top b,.shp-c[data-st=limit] .shp-c-top b,.shp-c[data-st=full] .shp-c-top b{color:#a49b8a}
.shp-c[data-st=need] .shp-p b,.shp-c[data-st=gate] .shp-p b{color:#8d8678;text-shadow:none}
.shp-c-fl{position:absolute;left:calc(-16*var(--p));right:calc(-16*var(--p));top:calc(-16*var(--p));bottom:calc(-16*var(--p));opacity:0;pointer-events:none;background:radial-gradient(ellipse at 40% 50%,rgba(150,240,255,.62),rgba(95,232,255,.18) 55%,transparent 80%)}
.shp-c.no .shp-c-fl{background:radial-gradient(ellipse at 40% 50%,rgba(255,80,50,.6),rgba(255,60,30,.2) 55%,transparent 80%)}

/* правая панель */
.shp-det{position:relative;min-height:0;display:flex;flex-direction:column;gap:calc(6*var(--p));border-style:solid;border-color:transparent;border-width:calc(50*var(--p)) calc(24*var(--p)) calc(20*var(--p));border-image:url(../img/ui/shop/dpanel.webp) 112 52 42 fill stretch;padding:0 calc(7*var(--p));touch-action:pan-y}
.shp-d-cat{position:absolute;left:0;right:0;top:calc(-33*var(--p));height:calc(24*var(--p));display:flex;align-items:center;justify-content:center;font:800 calc(11.5*var(--p))/1 'Exo 2',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 calc(8*var(--p)) rgba(95,232,255,.5);white-space:nowrap;overflow:hidden}
.shp-pic{position:relative;flex:1 1 calc(130*var(--p));min-height:calc(104*var(--p));max-height:calc(210*var(--p));margin:calc(-4*var(--p)) calc(-6*var(--p)) 0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:url(../img/ui/shop/bay.webp) center/cover no-repeat}
.shp-pic::after{content:'';position:absolute;inset:0;border-style:solid;border-color:transparent;border-width:calc(15*var(--p));border-image:url(../img/ui/shop/pframe.webp) 74 stretch;pointer-events:none}
.shp-pic>img{position:relative;z-index:1;height:84%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 calc(6*var(--p)) calc(8*var(--p)) rgba(0,0,0,.8))}
.shp-pic.wide>img{width:86%;height:80%;aspect-ratio:auto}
.shp-pic>img.shp-pic-st{position:absolute;right:calc(14*var(--p));bottom:calc(12*var(--p));width:calc(58*var(--p));height:calc(58*var(--p));z-index:2}
.shp-halo{position:absolute;left:50%;top:50%;width:calc(190*var(--p));height:calc(190*var(--p));margin:calc(-95*var(--p));background:url(../img/fx/ring.webp) center/contain no-repeat;opacity:.24;animation:shpSpin 18s linear infinite}
@keyframes shpSpin{to{transform:rotate(360deg)}}
.shp-d-txt{flex:none}
.shp-d-h{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8*var(--p))}
.shp-d-h h3{margin:0;min-width:0;font:400 calc(20*var(--p))/1.1 'Russo One',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#f7e6bd;text-shadow:0 calc(2*var(--p)) 0 #000,0 0 calc(12*var(--p)) rgba(255,190,110,.25)}
.shp-d-lv{flex:none;font:800 calc(11*var(--p))/1 'Exo 2',sans-serif;letter-spacing:.08em;color:#8fa3ad}.shp-d-lv b{color:var(--amber2);font-size:1.3em}
.shp-d-txt p{margin:calc(3*var(--p)) 0 0;font:500 calc(12.5*var(--p))/1.32 'Exo 2',sans-serif;color:#c9bfab}
.shp-d-rows{flex:none;display:flex;flex-direction:column;gap:calc(2*var(--p));padding:calc(5*var(--p)) 0;border-top:1px solid rgba(255,190,110,.18);border-bottom:1px solid rgba(255,190,110,.18)}
.shp-d-rows:empty{display:none}
.shp-r{display:flex;align-items:center;gap:calc(6*var(--p));font:700 calc(12.5*var(--p))/1.25 'Exo 2',sans-serif;color:#a7a196}
.shp-r span{flex:1 1 auto;min-width:0}
.shp-r b{flex:none;font-weight:800;color:#e8e2d6}
.shp-r em{flex:none;font-style:normal;font-weight:800;color:var(--cyan);text-shadow:0 0 calc(8*var(--p)) rgba(95,232,255,.45)}
.shp-d-msg{flex:none;font:800 calc(12*var(--p))/1.25 'Exo 2',sans-serif;letter-spacing:.02em;color:#ffb35a}
.shp-d-msg.off{display:none}
.shp-d-msg[data-k=pts]{color:#ff7a5a}.shp-d-msg[data-k=max]{color:var(--amber2)}.shp-d-msg[data-k=owned]{color:#7fe8f8}.shp-d-msg[data-k=full]{color:#c9bfab}
.shp-d-buy{margin-top:auto;flex:none;display:flex;flex-direction:column;align-items:center;gap:calc(2*var(--p))}
.shp-d-pr{align-self:stretch;display:flex;align-items:center;gap:calc(5*var(--p))}
.shp-d-pr.off{visibility:hidden}
.shp-d-pr span{flex:1;font:800 calc(10.5*var(--p))/1 'Exo 2',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8fa3ad}
.shp-d-pr img{width:calc(26*var(--p));height:calc(26*var(--p))}
.shp-d-pr b{font:400 calc(25*var(--p))/1 'Russo One',sans-serif;color:var(--amber2);text-shadow:0 calc(2*var(--p)) 0 #2b1705,0 0 calc(12*var(--p)) rgba(255,180,70,.45)}
.shp-det[data-st=pts] .shp-d-pr b{color:#ff7a5a;text-shadow:0 calc(2*var(--p)) 0 #300}
.shp-det[data-st=gate] .shp-d-pr b,.shp-det[data-st=need] .shp-d-pr b{color:#a39a89;text-shadow:none}
#shop .shp-buy{--w:calc(262*var(--p))!important}
#shop .shp-buy:not(.or){filter:saturate(.75) brightness(.86) drop-shadow(0 calc(4*var(--p)) calc(6*var(--p)) rgba(0,0,0,.5))}

.shp-foot{position:absolute;left:0;right:0;bottom:calc(-52*var(--fs)*var(--p));height:calc(46*var(--fs)*var(--p));display:flex;align-items:center;justify-content:center;gap:calc(26*var(--p));font:700 calc(11*var(--p))/1 'Exo 2',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a8478;white-space:nowrap}
.shp-foot kbd{font-size:calc(10*var(--p));padding:0 calc(4*var(--p));margin:0 1px}
#shop.touch .shp-foot,#shop.touch .shp-tab>kbd{display:none}

/* слой летящих чисел */
.shp-fly{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.shp-num{position:absolute;font:400 calc(21*var(--p))/1 'Russo One',sans-serif;color:#ffcf6a;text-shadow:0 calc(2*var(--p)) 0 #2b1705,0 0 calc(10*var(--p)) rgba(255,170,60,.85);white-space:nowrap}
.shp-sp{position:absolute;pointer-events:none}

/* декоративная плитка на месте пустой ячейки */
.shp-deco{position:relative;min-width:0;min-height:0;overflow:hidden;opacity:.9;pointer-events:none}
.shp-deco img{position:absolute;display:block}
.shp-deco .wp{left:6%;top:50%;width:88%;height:80%;object-fit:contain;transform:translateY(-50%);opacity:.55;filter:drop-shadow(0 calc(6*var(--p)) calc(10*var(--p)) rgba(0,0,0,.9))}
.shp-deco .hero{right:0;bottom:0;height:125%;width:auto;opacity:.42;-webkit-mask:linear-gradient(90deg,transparent,#000 40%,#000 80%,transparent),linear-gradient(transparent,#000 22%,#000 75%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 40%,#000 80%,transparent),linear-gradient(transparent,#000 22%,#000 75%,transparent);mask-composite:intersect}

/* снабжение: сводка героя */
.shp-stat{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(10*var(--p)) calc(18*var(--p));padding:calc(10*var(--p)) calc(16*var(--p));margin:calc(2*var(--p));border-top:1px solid rgba(255,190,110,.18);background:linear-gradient(rgba(8,12,16,.5),rgba(8,12,16,.15))}
.shp-bar{min-width:0}
.shp-bar-t{display:flex;justify-content:space-between;align-items:baseline;gap:calc(8*var(--p));margin-bottom:calc(3*var(--p));font:800 calc(11*var(--p))/1 'Exo 2',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a7a196}
.shp-bar-t b{font:400 calc(15*var(--p))/1 'Russo One',sans-serif;letter-spacing:.02em;color:#f7e6bd}
.shp-gg{position:relative;width:100%;aspect-ratio:606/53;overflow:hidden;background:center/100% 100% no-repeat}
.shp-gg i,.shp-gg u{position:absolute;inset:0;display:block;transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.shp-gg i{overflow:hidden}
.shp-gg u{background:center/100% 100% no-repeat;text-decoration:none}
.hp .shp-gg{background-image:url(../img/ui/hp_empty.webp)}.hp .shp-gg u{background-image:url(../img/ui/hp_full.webp)}
.en .shp-gg{background-image:url(../img/ui/en_empty.webp)}.en .shp-gg u{background-image:url(../img/ui/en_full.webp)}
.shp-cnt{min-width:0;display:flex;align-items:center;gap:calc(9*var(--p))}
.shp-cnt img{width:calc(46*var(--p));height:calc(46*var(--p));flex:none}
.shp-cnt span{min-width:0;display:flex;flex-direction:column;gap:calc(2*var(--p))}
.shp-cnt em{font:800 calc(11*var(--p))/1 'Exo 2',sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#a7a196}
.shp-cnt b{font:400 calc(20*var(--p))/1 'Russo One',sans-serif;color:#f7e6bd;text-shadow:0 calc(2*var(--p)) 0 #000}

/* ---------- узкие экраны: 800×400 и 400×800. Рамка тоньше, вкладки только значками, панель подробностей компактная ---------- */
#shop[data-lay=short],#shop[data-lay=tall]{--fs:.27}
#shop[data-lay=short] .shp-win,#shop[data-lay=tall] .shp-win{left:calc(3*var(--p));right:calc(3*var(--p));top:calc(3*var(--p));bottom:calc(3*var(--p))}
#shop[data-lay=short] .shp-foot,#shop[data-lay=tall] .shp-foot,#shop[data-lay=short] .shp-deco,#shop[data-lay=tall] .shp-deco,#shop[data-lay=short] .shp-stat,#shop[data-lay=tall] .shp-stat{display:none}
#shop[data-lay=short] .shp-head,#shop[data-lay=tall] .shp-head{gap:calc(6*var(--p));padding:0 calc(2*var(--p));top:calc(-42*var(--p));height:calc(34*var(--p))}
#shop[data-lay=short] .shp-tt b,#shop[data-lay=tall] .shp-tt b{font-size:calc(14*var(--p));letter-spacing:.06em}
#shop[data-lay=short] .shp-tt span{font-size:calc(9*var(--p));letter-spacing:.1em}
#shop[data-lay=tall] .shp-tt span{display:none}
#shop[data-lay=short] .shp-score,#shop[data-lay=tall] .shp-score{width:calc(196*var(--p));height:calc(30*var(--p));margin:0;padding:0 calc(22*var(--p)) 0 calc(34*var(--p));gap:calc(5*var(--p))}
#shop[data-lay=short] .shp-score b,#shop[data-lay=tall] .shp-score b{font-size:calc(17*var(--p))}
#shop[data-lay=short] .shp-score em,#shop[data-lay=tall] .shp-score em{display:none}
#shop[data-lay=short] .shp-x,#shop[data-lay=tall] .shp-x{--s:calc(31*var(--p))!important}
#shop[data-lay=short] .shp-x::after,#shop[data-lay=tall] .shp-x::after{content:'';position:absolute;inset:calc(-7*var(--p))}
#shop[data-lay=short] .shp-tab,#shop[data-lay=tall] .shp-tab{border-width:calc(14*var(--p)) calc(15*var(--p))!important}
#shop[data-lay=short] .shp-tab-in,#shop[data-lay=tall] .shp-tab-in{left:calc(-15*var(--p));right:calc(-15*var(--p));top:calc(-14*var(--p));bottom:calc(-14*var(--p))}
#shop[data-lay=short] .shp-tab-in>span,#shop[data-lay=tall] .shp-tab-in>span{display:none}
#shop[data-lay=short] .shp-tab-in>img,#shop[data-lay=tall] .shp-tab-in>img{width:calc(30*var(--p));height:calc(30*var(--p))}
#shop[data-lay=short] .shp-tab.on::after,#shop[data-lay=tall] .shp-tab.on::after{bottom:calc(-13*var(--p))}
#shop[data-lay=short] .shp-cap,#shop[data-lay=tall] .shp-cap{display:flex;padding:0 calc(3*var(--p))}
#shop[data-lay=short] .shp-cap span,#shop[data-lay=tall] .shp-cap span{display:none}
#shop[data-lay=short] .shp-cap b:empty,#shop[data-lay=tall] .shp-cap b:empty{display:none}
#shop[data-lay=short] .shp-cap b,#shop[data-lay=tall] .shp-cap b,#shop[data-lay=short] .shp-cap em,#shop[data-lay=tall] .shp-cap em{font-size:calc(12*var(--p))}
#shop[data-lay=short] .shp-cap b:not(:empty)~em,#shop[data-lay=tall] .shp-cap b:not(:empty)~em{display:none}
#shop[data-lay=short] .shp-cap b:empty~em,#shop[data-lay=tall] .shp-cap b:empty~em{display:block}
#shop[data-lay=short] .shp-wpn,#shop[data-lay=tall] .shp-wpn{display:flex;gap:calc(3*var(--p));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-bottom:calc(3*var(--p))}
#shop[data-lay=short] .shp-wpn::-webkit-scrollbar,#shop[data-lay=tall] .shp-wpn::-webkit-scrollbar{display:none}
#shop[data-lay=short] .shp-w,#shop[data-lay=tall] .shp-w{flex:0 0 calc(82*var(--p));height:calc(44*var(--p))}
#shop[data-lay=short] .shp-grid,#shop[data-lay=tall] .shp-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:calc(82*var(--p));gap:calc(3*var(--p));padding:calc(1*var(--p))}
#shop[data-lay=short] .shp-c,#shop[data-lay=tall] .shp-c{border-width:calc(20*var(--p))!important}
#shop[data-lay=short] .shp-c-in,#shop[data-lay=tall] .shp-c-in{left:calc(-10*var(--p));right:calc(-5*var(--p));top:calc(-11*var(--p));bottom:calc(-11*var(--p));gap:calc(7*var(--p))}
#shop[data-lay=short] .shp-c-ico,#shop[data-lay=tall] .shp-c-ico{width:calc(56*var(--p));height:calc(56*var(--p))}
#shop[data-lay=short] .shp-c.arm .shp-c-ico,#shop[data-lay=tall] .shp-c.arm .shp-c-ico{width:calc(96*var(--p));height:calc(52*var(--p))}
#shop[data-lay=short] .shp-c-b,#shop[data-lay=tall] .shp-c-b{gap:calc(3*var(--p))}
#shop[data-lay=short] .shp-c-top b,#shop[data-lay=tall] .shp-c-top b{font-size:calc(13*var(--p))}
#shop[data-lay=short] .shp-g,#shop[data-lay=tall] .shp-g{height:calc(12*var(--p))}
#shop[data-lay=short] .shp-c-bot,#shop[data-lay=tall] .shp-c-bot{min-height:calc(16*var(--p))}
#shop[data-lay=short] .shp-v,#shop[data-lay=tall] .shp-v{font-size:calc(12*var(--p))}
#shop[data-lay=short] .shp-p b,#shop[data-lay=tall] .shp-p b{font-size:calc(13.5*var(--p))}
#shop[data-lay=short] .shp-p img,#shop[data-lay=tall] .shp-p img{width:calc(15*var(--p));height:calc(15*var(--p))}
#shop[data-lay=short] .shp-gate,#shop[data-lay=tall] .shp-gate{font-size:calc(10.5*var(--p))}
#shop[data-lay=short] .shp-c-d,#shop[data-lay=tall] .shp-c-d{font-size:calc(10.5*var(--p));line-height:1.15}
#shop[data-lay=short] .shp-det,#shop[data-lay=tall] .shp-det{border-width:calc(26*var(--p)) calc(13*var(--p)) calc(10*var(--p));padding:0 calc(3*var(--p));gap:calc(3*var(--p))}
#shop[data-lay=short] .shp-d-cat,#shop[data-lay=tall] .shp-d-cat{top:calc(-20*var(--p));height:calc(16*var(--p));font-size:calc(9.5*var(--p));letter-spacing:.14em}
#shop[data-lay=short] .shp-d-h h3,#shop[data-lay=tall] .shp-d-h h3{font-size:calc(14.5*var(--p))}
#shop[data-lay=short] .shp-d-txt p,#shop[data-lay=tall] .shp-d-txt p{font-size:calc(11*var(--p));line-height:1.22;margin-top:calc(1*var(--p))}
#shop[data-lay=short] .shp-d-rows,#shop[data-lay=tall] .shp-d-rows{padding:calc(2*var(--p)) 0}
#shop[data-lay=short] .shp-r,#shop[data-lay=tall] .shp-r{font-size:calc(11*var(--p))}
#shop[data-lay=short] .shp-d-msg,#shop[data-lay=tall] .shp-d-msg{font-size:calc(10.5*var(--p));line-height:1.15}
#shop[data-lay=short] .shp-d-buy,#shop[data-lay=tall] .shp-d-buy{flex-direction:row;align-items:center;justify-content:space-between;gap:calc(4*var(--p))}
#shop[data-lay=short] .shp-d-pr,#shop[data-lay=tall] .shp-d-pr{align-self:center;flex:1 1 auto;min-width:0;gap:calc(3*var(--p))}
#shop[data-lay=short] .shp-d-pr span,#shop[data-lay=tall] .shp-d-pr span{display:none}
#shop[data-lay=short] .shp-d-pr img,#shop[data-lay=tall] .shp-d-pr img{width:calc(18*var(--p));height:calc(18*var(--p))}
#shop[data-lay=short] .shp-d-pr b,#shop[data-lay=tall] .shp-d-pr b{font-size:calc(15.5*var(--p));white-space:nowrap}
#shop[data-lay=short] .shp-buy,#shop[data-lay=tall] .shp-buy{--w:calc(136*var(--p))!important}

/* альбомный телефон: вкладки слева столбиком */
#shop[data-lay=short] .shp-win{flex-direction:row;gap:calc(4*var(--p))}
#shop[data-lay=short] .shp-tabs{grid-template-columns:calc(48*var(--p));grid-auto-rows:minmax(0,1fr);padding:0;gap:calc(3*var(--p));width:calc(48*var(--p))}
#shop[data-lay=short] .shp-tab{height:auto;min-height:calc(44*var(--p))}
#shop[data-lay=short] .shp-tab.on::after{left:auto;right:calc(-15*var(--p));top:18%;bottom:18%;width:calc(2*var(--p));height:auto;background:linear-gradient(transparent,#5fe8ff,transparent)}
#shop[data-lay=short] .shp-body{grid-template-columns:minmax(0,1fr) calc(244*var(--p));gap:calc(4*var(--p))}
#shop[data-lay=short] .shp-main{gap:calc(2*var(--p))}
#shop[data-lay=short] .shp-grid{grid-auto-rows:calc(74*var(--p))}
#shop[data-lay=short] .shp-pic{flex:1 1 calc(64*var(--p));min-height:calc(50*var(--p));max-height:calc(96*var(--p));margin:0 calc(-2*var(--p))}
#shop[data-lay=short] .shp-pic>img.shp-pic-st{right:calc(7*var(--p));bottom:calc(6*var(--p));width:calc(30*var(--p));height:calc(30*var(--p))}
#shop[data-lay=short] .shp-pic::after,#shop[data-lay=tall] .shp-pic::after{border-width:calc(9*var(--p))}

/* книжный телефон: подробности снизу */
#shop[data-lay=tall] .shp-tabs{gap:calc(3*var(--p));padding:0 0 calc(4*var(--p))}
#shop[data-lay=tall] .shp-tab{height:calc(42*var(--p))}
#shop[data-lay=tall] .shp-tt b{white-space:normal;font-size:calc(11.5*var(--p));line-height:1.08}
#shop[data-lay=tall] .shp-score{flex:0 1 calc(180*var(--p));min-width:0}
#shop[data-lay=tall] .shp-body{display:flex;flex-direction:column;gap:calc(4*var(--p))}
#shop[data-lay=tall] .shp-main{flex:1 1 0;min-height:0;gap:calc(3*var(--p))}
#shop[data-lay=tall] .shp-det{flex:none;display:grid;grid-template-columns:calc(112*var(--p)) minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:calc(7*var(--p));row-gap:calc(3*var(--p))}
#shop[data-lay=tall] .shp-pic{grid-column:1;grid-row:1/span 2;margin:0;min-height:calc(84*var(--p));height:100%;max-height:none}
#shop[data-lay=tall] .shp-pic>img{height:82%}
#shop[data-lay=tall] .shp-pic.wide>img{width:90%;height:72%}
#shop[data-lay=tall] .shp-pic>img.shp-pic-st{right:calc(5*var(--p));bottom:calc(4*var(--p));width:calc(30*var(--p));height:calc(30*var(--p))}
#shop[data-lay=tall] .shp-d-txt{grid-column:2;grid-row:1}
#shop[data-lay=tall] .shp-d-rows{grid-column:2;grid-row:2;align-self:end;border-bottom:0}
#shop[data-lay=tall] .shp-d-rows:empty+.shp-d-msg{margin-top:0}
#shop[data-lay=tall] .shp-d-msg{grid-column:1/-1;grid-row:3;min-height:calc(13*var(--p))}
#shop[data-lay=tall] .shp-d-buy{grid-column:1/-1;grid-row:4}

/* правки мелких раскладок */
#shop .shp-buy>span{font-size:calc(var(--w)*.088)}
#shop[data-lay=short] .shp-buy>span,#shop[data-lay=tall] .shp-buy>span{font-size:calc(var(--w)*.104)}
#shop[data-lay=short] .shp-p.tag b,#shop[data-lay=tall] .shp-p.tag b{font-size:calc(9*var(--p));padding:calc(2*var(--p)) calc(5*var(--p))}
#shop[data-lay=tall] .shp-d-lv,#shop[data-lay=short] .shp-d-lv{display:none}
#shop[data-lay=tall] .shp-pic{height:calc(92*var(--p));min-height:0;align-self:start}
#shop[data-lay=tall] .shp-pic>img{height:calc(76*var(--p))}
#shop[data-lay=tall] .shp-pic.wide>img{height:calc(62*var(--p))}
#shop[data-lay=tall] .shp-d-h h3{font-size:calc(13.5*var(--p));overflow-wrap:anywhere}