.shop-page{padding-block:8px 40px}.shop-balance{border:2px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 20%,var(--surface-hi)),var(--surface) 72%);box-shadow:var(--shadow);animation:rise .5s var(--ease) both;border-radius:18px;flex-wrap:wrap;align-items:center;gap:18px;padding:18px 22px;display:flex}.shop-coin{background:radial-gradient(circle at 34% 30%,#ffe9a8,var(--gold) 58%,#a9761a 100%);border:3px solid #7a5310;border-radius:50%;flex:none;place-items:center;width:64px;height:64px;display:grid;position:relative;box-shadow:inset 0 0 0 4px #ffffff8c,0 6px #00000047}.shop-coin:before{content:"";border:2px dashed #7a53108c;border-radius:50%;position:absolute;inset:6px}.shop-coin b{font:800 30px/1 var(--f-mono);color:#5a3c08;text-shadow:0 1px #ffffff8c}.shop-balance-meta{gap:4px;min-width:0;display:grid}.shop-balance-label{font:700 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.shop-balance-amount{font:800 clamp(30px,6vw,46px)/1 var(--f-mono);color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:3px 3px 0 var(--ink)}.shop-balance-amount.pop{animation:coinPop .45s var(--spring)}@keyframes coinPop{0%{transform:scale(1)}35%{filter:brightness(1.25);transform:scale(1.28)}to{transform:scale(1)}}.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px;display:grid}.shop-card{border:2px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 16%,var(--surface-hi)),var(--surface) 70%);box-shadow:var(--shadow),var(--glow);animation:rise .5s var(--ease) both;animation-delay:calc(var(--i)*90ms + .15s);transition:transform .25s var(--spring),border-color .2s,box-shadow .25s;border-radius:18px;gap:14px;padding:20px;display:grid;position:relative;overflow:hidden}.shop-card:before{content:"";background:radial-gradient(circle,color-mix(in srgb,var(--c) 42%,transparent),transparent 70%);width:170px;height:170px;transition:transform .4s var(--ease);border-radius:50%;position:absolute;top:-40px;right:-40px}.shop-card:hover{border-color:var(--c);box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent),0 18px 30px -12px color-mix(in srgb,var(--c) 55%,transparent);transform:translateY(-6px)}.shop-card:hover:before{transform:scale(1.5)}.shop-card-top{align-items:center;gap:14px;display:flex;position:relative}.shop-icon{filter:drop-shadow(0 5px #00000047);width:56px;height:56px;transition:transform .3s var(--spring);flex:none;position:relative}.shop-card:hover .shop-icon{transform:scale(1.12)translateY(-3px)}.shop-card h3{font:700 19px var(--f-body);color:var(--c)}.shop-card-desc{color:var(--muted);max-width:34ch;margin:0;font-size:14px;position:relative}.shop-card-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex;position:relative}.shop-price{font:800 20px var(--f-mono);color:var(--gold);font-variant-numeric:tabular-nums;align-items:center;gap:8px;display:inline-flex}.shop-price .shop-coin{border-width:2px;width:26px;height:26px;box-shadow:inset 0 0 0 2px #ffffff8c,0 3px #00000040}.shop-price .shop-coin:before{border-width:1px;inset:2px}.shop-price .shop-coin b{font-size:13px}.shop-own{font:700 12px var(--f-mono);color:var(--fg);background:color-mix(in srgb,var(--c) 22%,var(--surface));border:2px solid color-mix(in srgb,var(--c) 45%,var(--line));border-radius:999px;padding:4px 10px}.shop-buy{width:100%;margin-top:2px;position:relative}.shop-lock{font:600 12px var(--f-mono);color:var(--fire2);text-align:center;margin:6px 0 0}.icon-dice{background:var(--surface-hi);border:3px solid var(--water);width:48px;height:48px;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--water) 25%,transparent);border-radius:12px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:2px;padding:7px;display:grid}.icon-dice i{background:var(--water);border-radius:50%;place-self:center;width:9px;height:9px}.icon-dice i:first-child{grid-area:1/1}.icon-dice i:nth-child(2){grid-area:1/3}.icon-dice i:nth-child(3){grid-area:2/2}.icon-dice i:nth-child(4){grid-area:3/1}.icon-dice i:nth-child(5){grid-area:3/3}.icon-dice:after{content:"";border:3px solid var(--water);border-top-color:#0000;border-radius:50%;width:22px;height:22px;position:absolute;bottom:-8px;right:-8px;transform:rotate(45deg)}.icon-ball{background:linear-gradient(180deg,var(--fire) 0 46%,var(--ink) 46% 54%,var(--surface-hi) 54% 100%);border:3px solid var(--ink);border-radius:50%;width:48px;height:48px;display:block;position:relative}.icon-ball:before{content:"";background:var(--surface-hi);border:3px solid var(--ink);border-radius:50%;width:16px;height:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.icon-ball:after{content:"";background:var(--fire);border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.icon-shield{clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 70%,#fff),var(--violet) 55%,color-mix(in srgb,var(--violet) 60%,var(--ink)));width:46px;height:52px;margin:0 5px;display:block;position:relative;box-shadow:inset 0 0 0 3px #ffffff73}.icon-shield:before{content:"";background:var(--surface-hi);border:3px solid var(--violet);border-radius:50%;width:16px;height:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.icon-type{border:3px solid var(--ink);background:linear-gradient(115deg,transparent 30%,#ffffff80 46%,transparent 60%) 0 0/250% 100%,linear-gradient(160deg,#b6f08a 0%,var(--leaf) 50%,color-mix(in srgb,var(--leaf) 55%,var(--ink)) 100%);width:42px;height:54px;box-shadow:0 0 14px color-mix(in srgb,var(--leaf) 70%,transparent);border-radius:7px;margin:0 7px;animation:3s linear infinite packShine;display:block;position:relative}.icon-type:before{content:"◆";color:#eaffd6;text-shadow:2px 2px 0 var(--ink);place-items:center;font-size:20px;display:grid;position:absolute;inset:0}.icon-swap{background:linear-gradient(135deg,var(--psy),color-mix(in srgb,var(--psy) 60%,var(--ink)));border:3px solid var(--ink);border-radius:12px;width:46px;height:46px;margin:0 5px;display:block;position:relative;box-shadow:inset 0 0 0 3px #fff6}.icon-swap:before{content:"⇄";font:800 24px/1 var(--f-mono);color:#fff;text-shadow:2px 2px 0 var(--ink);place-items:center;display:grid;position:absolute;inset:0}.shop-how{animation:rise .5s var(--ease) both;margin-top:22px;animation-delay:.4s}.shop-how h3{font:700 17px var(--f-body);margin:0 0 12px}.shop-rewards{gap:8px;margin:0;padding:0;list-style:none;display:grid}.shop-rewards li{border:2px solid var(--line);background:color-mix(in srgb,var(--surface) 82%,transparent);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.shop-rewards .r-label{font:600 14px var(--f-body);color:var(--fg)}.shop-rewards .r-val{font:800 16px var(--f-mono);color:var(--gold);font-variant-numeric:tabular-nums}.shop-rewards .r-val small{font:700 12px var(--f-mono);color:var(--muted);margin-left:6px}.shop-bots{font:600 13px var(--f-body);color:var(--muted);margin:12px 0 0}.shop-online{flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;display:flex}.shop-online .pill{font:700 12px var(--f-mono);color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--surface));border:2px solid color-mix(in srgb,var(--gold) 45%,var(--line))}.shop-cos{animation:rise .5s var(--ease) both;margin-top:22px;animation-delay:.45s}.shop-cos h3{font:700 17px var(--f-body);margin:0 0 14px}.shop-cos-tabs{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.shop-cos-tab{font:700 13px var(--f-mono);letter-spacing:.02em;color:var(--muted);background:var(--surface-hi);border:2px solid var(--line);cursor:pointer;transition:all .2s var(--ease);border-radius:999px;padding:8px 16px}.shop-cos-tab:hover{color:var(--fg);border-color:var(--muted)}.shop-cos-tab.on{color:var(--ink);background:var(--gold);border-color:var(--gold);box-shadow:0 4px #00000040}.shop-cos-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.shop-cos-card{text-align:center;border:2px solid var(--line);background:linear-gradient(135deg,var(--surface-hi),var(--surface) 75%);box-shadow:var(--shadow);transition:transform .25s var(--spring),border-color .2s;border-radius:16px;justify-items:center;gap:10px;padding:16px 12px;display:grid;position:relative}.shop-cos-card:hover{border-color:var(--gold);transform:translateY(-4px)}.shop-cos-preview{place-items:center;height:78px;display:grid}.cos-preview-frame{background:linear-gradient(160deg,var(--surface-hi),var(--surface));border:2px solid var(--line);border-radius:9px;width:52px;height:72px;position:relative}.cos-preview-arena{border:2px solid var(--line);background:radial-gradient(circle at 80% 18%,var(--glow,#fff4becc) 0,transparent 26%), linear-gradient(180deg,transparent 0 56%,var(--g1,#7ad47c) 56%,var(--g3,#348a46) 100%), linear-gradient(180deg,var(--sky1,#4f9bff) 0,var(--sky2,#8fd0ff) 40%,var(--sky3,#d9f2ff) 56%);border-radius:12px;width:132px;height:78px;position:relative;overflow:hidden}.cos-preview-arena:before{content:"";background:var(--far,#7fa7d8);opacity:.9;clip-path:polygon(0 70%,14% 38%,28% 64%,44% 26%,58% 62%,74% 30%,88% 60%,100% 44%,100% 100%,0 100%);height:32%;position:absolute;top:26%;left:0;right:0}.cos-preview-arena:after{content:"";background:var(--plat-top,#8fdc86);width:42%;height:16%;box-shadow:62px -26px 0 -4px var(--plat-top,#8fdc86),0 3px 0 var(--plat-side,#6b4e35),62px -23px 0 -4px var(--plat-side,#6b4e35);border-radius:50%;position:absolute;bottom:8%;left:10%}.cos-preview-avatar{background:radial-gradient(circle at 40% 35%,var(--surface-hi),var(--surface));border:3px solid var(--line);border-radius:50%;place-items:center;width:64px;height:64px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #fff6}.cos-preview-avatar img{object-fit:cover;width:100%;height:100%;image-rendering:pixelated}.shop-cos-name{font:700 14px var(--f-body);color:var(--fg);margin:0}.shop-cos-card .shop-price{font-size:16px}.shop-cos-buy{width:100%;margin-top:2px}.shop-skel{border:2px solid var(--line);background:linear-gradient(100deg,var(--surface) 30%,var(--surface-hi) 50%,var(--surface) 70%);background-size:200% 100%;border-radius:18px;height:120px;animation:1.4s linear infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}@keyframes rise{0%{opacity:0;transform:translateY(18px)}}@media (max-width:900px){.shop-grid{grid-template-columns:1fr}}@media (max-width:480px){.shop-balance{gap:14px;padding:16px}.shop-coin{width:54px;height:54px}.shop-coin b{font-size:26px}}.icon-pack{border:3px solid var(--ink);width:40px;height:54px;box-shadow:0 0 14px color-mix(in srgb,var(--gold) 70%,transparent);background:linear-gradient(115deg,#0000 30%,#ffffff8c 46%,#0000 60%) 0 0/250% 100%,linear-gradient(160deg,#ffe27a 0%,#ffb21f 45%,#e0720c 100%);border-radius:7px;margin:0 4px;animation:3s linear infinite packShine;display:block;position:relative}.icon-pack:before{content:"★";color:#fff6c2;text-shadow:2px 2px 0 var(--ink);place-items:center;font-size:20px;display:grid;position:absolute;inset:0}@keyframes packShine{to{background-position:-150% 0,0 0}}.shop-signup{border:2px solid color-mix(in srgb,var(--gold) 70%,var(--ink));background:linear-gradient(110deg,color-mix(in srgb,var(--gold) 24%,var(--surface)),var(--surface));box-shadow:0 0 26px color-mix(in srgb,var(--gold) 30%,transparent);animation:rise .5s var(--ease) both;border-radius:16px;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px;padding:14px 18px;display:flex;position:relative;overflow:hidden}.shop-signup:after{content:"";pointer-events:none;background:linear-gradient(105deg,#0000 40%,#ffffff1f 50%,#0000 60%) 160% 0/250% 100% no-repeat;animation:3.4s 1s infinite shimmer;position:absolute;inset:0}.shop-signup-coin{background:radial-gradient(circle at 35% 30%,#fff2a8,var(--gold));width:38px;height:38px;box-shadow:inset 0 0 0 3px #8a6a00,0 0 16px color-mix(in srgb,var(--gold) 65%,transparent);border-radius:50%;flex:none}.shop-signup-text{flex:1;gap:3px;min-width:200px;display:grid}.shop-signup-text b{color:var(--gold);font:800 16px var(--f-body)}.shop-signup-text span{color:var(--muted);font-size:13px}
