/* Shopping panel — positions are percentages of assets/shop/panel.webp (1396 × 912). */
.page-shop.content-mode main{padding:0}
.shop-scene{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:linear-gradient(#050b16bb,#050b16dd),url('assets/bgcity-v2.webp') center/cover no-repeat;padding:4vh 7vw}
.shop-wrap{position:relative;width:min(100%,calc((100dvh - 16vh) * 1396 / 912));aspect-ratio:1396/912;container-type:inline-size;font-family:Arial,sans-serif}
.shop-panel{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.shop-wrap button{background:none;border:0;padding:0;cursor:pointer}
.shop-wrap button:disabled{cursor:default}
.shop-wrap button img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}

.shop-title{position:absolute;left:50%;top:-6.5%;transform:translateX(-50%);z-index:3;padding:.6cqw 4.2cqw .9cqw;border:.35cqw solid #ffe2a6;border-radius:2.2cqw;background:linear-gradient(#ffc163,#f08a14 55%,#c9620a);box-shadow:0 .4cqw 0 #8a3f05,0 .8cqw 1.6cqw #0008;color:#fff;font:italic 900 3.6cqw/1 'Barlow Condensed',Arial;letter-spacing:.1cqw;-webkit-text-stroke:.25cqw #8a3f05;paint-order:stroke fill;text-shadow:0 .3cqw 0 #8a3f05}
.shop-close{position:absolute;right:-4%;top:-8%;width:7%;aspect-ratio:127/117;z-index:4}
.shop-close:hover img,.shop-page:not(:disabled):hover img,.shop-btn:hover img,.shop-tab-arrow:not(:disabled):hover img{filter:brightness(1.12)}

.shop-tabs{position:absolute;left:1.2%;right:1.2%;top:.6%;height:7%;display:flex;align-items:center;justify-content:center;gap:.35%;z-index:2}
.shop-tab,.shop-tab-arrow{height:100%;flex:0 1 auto}
.shop-tab img,.shop-tab-arrow img{height:100%;width:auto}
.shop-tab{filter:brightness(.95)}
.shop-tab.shop-tab-orange{filter:sepia(1) saturate(2.6) hue-rotate(172deg) brightness(.92)}
.shop-tab.active{filter:sepia(1) saturate(4.5) hue-rotate(-14deg) brightness(1.05) drop-shadow(0 0 .5cqw #ffd27a)}
.shop-tab.shop-tab-orange.active{filter:brightness(1.08) drop-shadow(0 0 .5cqw #ffd27a)}
.shop-tab:not(.active):hover{filter:brightness(1.1)}
.shop-tab-arrow:disabled{opacity:.45}

.shop-page{position:absolute;top:44%;width:7.5%;aspect-ratio:138/124;z-index:3}
.shop-page-prev{left:-5.8%}
.shop-page-next{right:-5.8%}
.shop-page:disabled{opacity:.4}

.shop-slot{position:absolute;width:16.6%;height:31.1%;display:flex;flex-direction:column;align-items:center}
.shop-name{height:22.5%;width:92%;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font:700 1.15cqw/1.1 Arial,sans-serif;text-shadow:0 .1cqw .25cqw #0b3a78}
.shop-icon{position:relative;margin-top:4%;width:56%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.shop-item-art{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 .3cqw .4cqw #0005)}
.shop-frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:.3cqw solid #f4f8ff;border-radius:1cqw;background:radial-gradient(circle at 50% 40%,#1f4f8f,#0b1f3d 75%);box-shadow:0 .3cqw .5cqw #0005;overflow:hidden}
.shop-frame img{width:82%;height:82%;object-fit:contain}
.shop-star{color:#f9ae32;font-size:5cqw;text-shadow:0 0 1cqw #ff9d2a}
.shop-hot{position:absolute;left:-30%;top:-8%;width:55%;height:auto;pointer-events:none;transform:rotate(-8deg)}
.shop-owned{position:absolute;right:-6%;bottom:-6%;background:#0c1b2ee6;border:.12cqw solid #7fb8ff;color:#ffd27a;font:700 .95cqw Arial;padding:.1cqw .5cqw;border-radius:.4cqw}
.shop-price{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);width:72%;aspect-ratio:226/91;background:url('assets/shop/price-pill.webp') center/100% 100% no-repeat!important;display:flex;align-items:center;justify-content:center;gap:4%;white-space:nowrap;color:#fff;font:700 1.15cqw Arial,sans-serif;text-shadow:0 .1cqw .2cqw #06244d}
.shop-price:not(:disabled):hover{filter:brightness(1.15)}
.shop-price:disabled{filter:grayscale(.6) brightness(.8)}
.shop-price:disabled span{color:#ffb4a8}
.shop-r-common{color:#e8edf5}.shop-r-uncommon{color:#7dffb0}.shop-r-rare{color:#bfe3ff}.shop-r-epic{color:#e2b8ff}.shop-r-legendary{color:#ffd166}

.shop-empty{position:absolute;left:3%;right:3%;top:40%;text-align:center;color:#fff;font:700 1.8cqw Arial;text-shadow:0 .2cqw .4cqw #000a}
.shop-foot{position:absolute;left:3.6%;right:3.6%;top:89.8%;height:8.4%;display:flex;align-items:center;gap:1.5%}
.shop-wallet{flex:0 0 40%;height:78%;display:flex;align-items:center;gap:2.5%;padding:0 1% 0 1.5%;border:.25cqw solid #e9f3ff;border-radius:3cqw;background:linear-gradient(#1a5fb4,#0d3f86);box-shadow:inset 0 .2cqw .4cqw #fff3}
.shop-wallet img{height:80%;width:auto}
.shop-wallet b{flex:1;color:#6ff06f;font:800 1.7cqw Arial;text-align:center;text-shadow:0 .15cqw .2cqw #032}
.shop-wallet button{height:95%;aspect-ratio:73/85;margin-left:auto}
.shop-pages{margin-left:auto;color:#dbe9ff;font:700 1.2cqw Arial;text-shadow:0 .1cqw .2cqw #000}
.shop-btn{height:80%;aspect-ratio:123/83}
.shop-pages+.shop-btn{margin-left:2%}
.shop-wallet+.shop-btn{margin-left:auto}