/* Copyright (c) 2026 Dorin Verlan. Extended shop: FX cards, 3D flip, inventory grids, admin editor. */
.xgridc{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;perspective:1200px}
.xcard{--rx:0deg;--ry:0deg;--mx:50%;position:relative;border-radius:22px;background:var(--card);cursor:pointer;isolation:isolate;overflow:hidden;
 box-shadow:0 10px 30px color-mix(in srgb,var(--glow) calc(var(--gi)*45%),transparent),0 0 0 1px var(--line);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform:rotateX(var(--rx)) rotateY(var(--ry));will-change:transform;outline:none}
.xcard:hover,.xcard:focus-visible{transform:translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:0 18px 48px color-mix(in srgb,var(--glow) calc(var(--gi)*80%),transparent),0 0 calc(var(--gi)*34px) color-mix(in srgb,var(--glow) calc(var(--gi)*70%),transparent),0 0 0 1px var(--line)}
[data-theme=dark] .xcard{box-shadow:0 0 calc(var(--gi)*40px) color-mix(in srgb,var(--glow) calc(var(--gi)*75%),transparent),0 0 0 1px var(--line)}
.xcard .xbg,.xd .xbg{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--c1) 28%,transparent),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--c2) 16%,var(--card)),var(--card) 60%)}
.has-bg .xbg{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--card) 70%,transparent) 45%,var(--card) 75%),var(--bgimg) center/cover}
.xcard.bd-solid{box-shadow:0 10px 30px color-mix(in srgb,var(--glow) calc(var(--gi)*45%),transparent),inset 0 0 0 2px color-mix(in srgb,var(--c1) 55%,transparent)}
.xcard.bd-dashed{outline:2px dashed color-mix(in srgb,var(--c1) 65%,transparent);outline-offset:-6px}
.xcard.bd-double{box-shadow:0 10px 30px color-mix(in srgb,var(--glow) calc(var(--gi)*45%),transparent),inset 0 0 0 2px var(--c1),inset 0 0 0 5px var(--card),inset 0 0 0 7px var(--c2)}
.xcard.bd-gradient:before,.xd.bd-gradient .xhero:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(var(--ang,135deg),var(--c1),var(--c2),var(--c1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
.xin{position:relative;padding:22px 20px 18px;display:flex;flex-direction:column;gap:10px;height:100%;min-height:300px}
.xico{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--c1) 16%,var(--card));box-shadow:0 8px 24px color-mix(in srgb,var(--glow) calc(var(--gi)*60%),transparent),inset 0 0 0 1px color-mix(in srgb,var(--c1) 30%,transparent)}
.xico img{width:48px;height:48px;image-rendering:pixelated;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}.xico.big{width:110px;height:110px;border-radius:28px;flex:none}.xico.big img{width:72px;height:72px}
.xcard h3{margin:2px 0 0;font-size:22px;font-weight:900;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.xdesc{color:var(--muted);font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}.xfoot small{color:var(--muted);font-weight:600}
.xbadge{position:absolute;top:22px;right:20px;font-size:11px;font-weight:900;letter-spacing:.08em;padding:4px 10px;border-radius:999px;color:#fff;background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:0 4px 14px color-mix(in srgb,var(--glow) 50%,transparent)}
.xrib{position:absolute;top:18px;left:-34px;z-index:3;transform:rotate(-45deg);background:linear-gradient(90deg,#f43f5e,#a855f7);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 40px;box-shadow:0 4px 12px rgba(168,85,247,.4)}
.xchips{display:flex;flex-wrap:wrap;gap:8px}
.xchip{position:relative;display:inline-flex;align-items:center;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:8px 12px;border-radius:12px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card));border:1.5px solid color-mix(in srgb,var(--accent) 35%,transparent);box-shadow:0 3px 12px rgba(139,44,245,.14);transition:.2s;cursor:default}
.xchip.sm{font-size:11.5px;padding:5px 9px;border-radius:10px}.xchip.more{color:var(--muted)}
[data-theme=dark] .xchip{color:#d8b4fe;background:rgba(139,44,245,.12);border-color:rgba(168,85,247,.5);box-shadow:0 0 14px rgba(139,44,245,.35),inset 0 0 10px rgba(139,44,245,.12)}
.xchip:hover,.xchip:focus{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,44,245,.35)}.xchip.inh{opacity:.78;border-style:dashed}
.xchip .xs-tip{min-width:200px}
/* fx */
.xshine{position:absolute;inset:0;pointer-events:none;z-index:1}
.fx-shimmer .xshine{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:250% 100%;animation:xsh 3.6s linear infinite}
[data-theme=dark] .fx-shimmer .xshine{background-image:linear-gradient(105deg,transparent 35%,rgba(216,180,254,.18) 50%,transparent 65%)}
@keyframes xsh{0%{background-position:150% 0}100%{background-position:-100% 0}}
.fx-pulse .xico{animation:xpu 2.4s ease-in-out infinite}@keyframes xpu{50%{transform:scale(1.07);box-shadow:0 0 calc(var(--gi)*44px) color-mix(in srgb,var(--glow) 80%,transparent)}}
.xp{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}.xp i{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;background:var(--c2);box-shadow:0 0 8px var(--glow);opacity:0;animation:xpa 5s linear infinite}
.xp i:nth-child(1){left:8%}.xp i:nth-child(2){left:22%;animation-delay:1.2s;width:4px;height:4px}.xp i:nth-child(3){left:38%;animation-delay:2.6s}.xp i:nth-child(4){left:52%;animation-delay:.6s;width:3px;height:3px}.xp i:nth-child(5){left:66%;animation-delay:3.4s}.xp i:nth-child(6){left:80%;animation-delay:1.9s;width:4px;height:4px}.xp i:nth-child(7){left:92%;animation-delay:4.1s}.xp i:nth-child(8){left:45%;animation-delay:4.6s;width:5px;height:5px}.xp i:nth-child(9){left:14%;animation-delay:3s}.xp i:nth-child(10){left:74%;animation-delay:.2s}
@keyframes xpa{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-340px);opacity:0}}
.fx-holo .xshine{background:radial-gradient(circle at var(--mx) 30%,rgba(255,255,255,.35),transparent 45%),linear-gradient(115deg,transparent 30%,rgba(56,189,248,.16),rgba(244,114,182,.16),rgba(250,204,21,.12),transparent 70%);mix-blend-mode:overlay}
.fx-holo.fx-shimmer .xshine{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%) 0 0/250% 100%,radial-gradient(circle at var(--mx) 30%,rgba(255,255,255,.3),transparent 45%),linear-gradient(115deg,transparent 30%,rgba(56,189,248,.16),rgba(244,114,182,.16),transparent 70%)}
.fx-rainbow h3,.xd.fx-rainbow h2{background:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#38bdf8,#a855f7,#f43f5e);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xrb 4s linear infinite}
.fx-rainbow.bd-gradient:before,.xd.fx-rainbow.bd-gradient .xhero:before{background:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#38bdf8,#a855f7,#f43f5e);background-size:200% 100%;animation:xrb 4s linear infinite}
@keyframes xrb{to{background-position:-200% 0}}
/* mini previews (cases) */
.xminis{display:flex;gap:6px}.xmini{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--rc) 14%,var(--card2));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc) 55%,transparent)}.xmini img{width:24px;height:24px;image-rendering:pixelated}
/* inventory grid */
.xinv{border-radius:18px;padding:14px;background:linear-gradient(180deg,#efe7fb,#e4d8f7);box-shadow:inset 0 2px 0 #fff,0 8px 24px rgba(139,44,245,.12);border:1px solid #d9c8f3}
[data-theme=dark] .xinv{background:linear-gradient(180deg,#1b1824,#141219);border-color:#2e2840;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 28px rgba(139,44,245,.18)}
.xinv-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-weight:800;font-size:13px;margin-bottom:10px;color:var(--text)}.xinv-h small{color:var(--muted);font-weight:600}
.xs-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;max-width:440px}
.xs-slot{position:relative;aspect-ratio:1;border-radius:8px;background:#c9bbe0;box-shadow:inset 2px 2px 0 #a996c6,inset -2px -2px 0 #f6f0ff;display:grid;place-items:center;outline:none}
[data-theme=dark] .xs-slot{background:#221e2c;box-shadow:inset 2px 2px 0 #0f0d14,inset -2px -2px 0 #2f2a3c}
.xs-slot img{width:78%;height:78%;image-rendering:pixelated;pointer-events:none}
.xs-slot.full:hover,.xs-slot.full:focus{background:#b9a6db;z-index:5}[data-theme=dark] .xs-slot.full:hover{background:#2f2840}
.xs-slot[class*=" r-"]{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 75%,transparent),inset 0 -10px 16px -8px color-mix(in srgb,var(--rc) 55%,transparent)}
.xs-slot.r-legendary,.xs-slot.r-epic{animation:xglo 2.4s ease-in-out infinite}@keyframes xglo{50%{filter:drop-shadow(0 0 6px var(--rc))}}
.xs-slot.gl img{filter:drop-shadow(0 0 3px #c084fc) brightness(1.08)}
.xs-n{position:absolute;right:3px;bottom:1px;font:800 12px/1 Inter,sans-serif;color:#fff;text-shadow:1px 1px 0 #3b2a55,-1px 0 0 #3b2a55;pointer-events:none}
.xs-ch{position:absolute;left:2px;top:1px;font:700 9px/1 Inter,sans-serif;font-style:normal;color:var(--rc);text-shadow:0 0 2px #000;pointer-events:none}
.xs-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);min-width:160px;max-width:260px;padding:9px 11px;border-radius:10px;background:rgba(18,8,32,.96);border:2px solid #4c1d95;box-shadow:0 0 0 1px #000,0 10px 30px rgba(76,29,149,.5);color:#f2effa;font:500 12px/1.35 Inter,sans-serif;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:.12s;pointer-events:none;z-index:50;text-align:left;white-space:normal}
.xs-tip b{color:#fff;font-size:13px}.xs-tip .en{color:#a5b4fc}.xs-tip small{color:#8b8299;font-family:ui-monospace,monospace;font-size:10.5px}.xs-tip .cnt{color:#cbd5e1}.xs-tip .nb{color:#f0abfc}
.xs-tip{display:none!important}
.xs-grid.edit .xs-slot{cursor:pointer}.xs-slot.ov{box-shadow:inset 0 0 0 2px var(--accent),0 0 12px rgba(139,44,245,.6)}
/* overlay + 3D flip */
body.xlock{overflow:hidden}
.xov{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:3vh 3vw;perspective:1600px;isolation:isolate}
/* (overlay dim moved to .xov:before) */
.xpanel{position:relative;width:min(1040px,100%);height:min(88vh,1000px);transform-style:preserve-3d;transition:transform .75s cubic-bezier(.65,.05,.25,1);will-change:transform}
.xface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:26px}
.xface.front{inset:auto;pointer-events:none}.xface.front>.xcard{height:100%;transform:none!important}
.xscroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;border-radius:inherit}.xface.back{background:var(--card);overflow:hidden;box-shadow:0 30px 80px rgba(76,29,149,.35),0 0 0 1px var(--line)}
[data-theme=dark] .xface.back{box-shadow:0 0 60px rgba(139,44,245,.35),0 0 0 1px var(--line)}
.xpanel.noflip .front{display:none}.xpanel.noflip{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}.xov:not(.on) .xpanel.noflip{opacity:0}
.xclose{position:absolute;top:14px;right:14px;z-index:9;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;font-size:16px;box-shadow:var(--sh)}
.xclose:hover{color:var(--accent)}
.xd{padding:0 0 26px}.xd h3{display:flex;align-items:center;gap:8px;margin:22px 0 12px;font-size:17px}.xd h3 svg{color:var(--accent)}
.xhero{position:relative;isolation:isolate;display:flex;gap:24px;align-items:center;padding:34px 30px 30px;border-radius:26px 26px 0 0;overflow:hidden}
.xhero h2{font-size:clamp(28px,4vw,42px);font-weight:900;margin:8px 0 4px;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.xhero p{margin:0;max-width:620px}.xd .sm{font-size:13px}.pill.hot{background:linear-gradient(90deg,#f43f5e,#a855f7);color:#fff}
.xcols{display:grid;grid-template-columns:1fr 300px;gap:26px;padding:0 30px}.xd>.tbl,.xd>h3{margin-left:30px;margin-right:30px}
.xbuy{align-self:start;position:sticky;top:10px;margin-top:22px;padding:18px;border-radius:20px;background:var(--card2);border:1px solid var(--line);box-shadow:0 10px 30px rgba(139,44,245,.1)}.xbuy h3{margin-top:0}
.xdur{display:grid;gap:8px}.xdur button{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;font:inherit;transition:.15s}
.xdur button.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,44,245,.15),0 6px 18px rgba(139,44,245,.2)}.xbuy-sum{margin:12px 0 8px;font-size:15px}.xbig{font-size:26px;font-weight:900;margin-bottom:8px}
.xperks{list-style:none;padding:0;margin:0;display:grid;gap:8px}.xperks li{position:relative;padding:10px 12px 10px 38px;border-radius:12px;background:var(--card2);border:1px solid var(--line)}
.xperks li:before{content:"✦";position:absolute;left:14px;color:var(--c1);text-shadow:0 0 8px var(--glow)}
.xkt{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.xkt button,.xlt button{font:700 12.5px ui-monospace,monospace;padding:7px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer}
.xkt button.on,.xlt button.on{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 14px rgba(139,44,245,.35)}
.xrar{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:13px}.xrar span{display:inline-flex;align-items:center;gap:6px}.xrar i{width:10px;height:10px;border-radius:3px;background:var(--rc);box-shadow:0 0 6px var(--rc)}
.xcmp td,.xcmp th{text-align:center}.xcmp td:first-child{text-align:left}.xcmp .me{background:color-mix(in srgb,var(--accent) 8%,transparent)}.xcmp .ok{color:#22c55e;font-weight:900}.xcmp .no{color:var(--muted)}
.hidden{display:none!important}
/* admin editor */
.xadm{overflow:visible}.xed{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}.xed section{border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;background:var(--card)}
.xed section h3{margin:0 0 10px;font-size:16px}.xf2{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}.xf2 .full{grid-column:1/-1}
.xrows{display:grid;gap:8px;margin-bottom:8px}.xrow{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:8px;align-items:center}.xrow label{margin:0;font-size:12px}
.xrow.c3{grid-template-columns:150px 1fr 1.4fr auto auto}.xrow.c1{grid-template-columns:1fr auto auto}
.xlt{display:flex;gap:6px;align-items:center;margin-bottom:12px}.xck{display:flex!important;align-items:center;gap:8px;color:var(--text)!important}.xck input{width:auto}
.xanims{display:flex;flex-wrap:wrap;gap:6px 16px}.xicon-pick{display:flex;gap:6px;align-items:center}.xicon-pick img{width:36px;height:36px;image-rendering:pixelated;border-radius:8px;background:var(--soft);padding:4px}
.xed-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px)}
.xpv{border:1px solid var(--line);border-radius:16px;padding:12px}.xpv .xlt{margin:0}.xpv-stage{margin-top:10px;padding:18px;border-radius:14px;background:var(--bg);color:var(--text);perspective:1000px}
.xpick{border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:0;flex:1}.xpick select{width:auto}
.xpick-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px;overflow:auto;max-height:340px;padding:2px}.xpick-l .xs-slot{cursor:grab}.xpick-l .sel{box-shadow:inset 0 0 0 2px var(--accent),0 0 10px rgba(139,44,245,.6)}
@media (max-width:900px){.xcols,.xed{grid-template-columns:1fr}.xed-side{position:static;max-height:none}.xhero{flex-direction:column;text-align:center;padding:26px 18px}.xcols{padding:0 16px}.xd>.tbl,.xd>h3{margin-left:16px;margin-right:16px}.xpanel{height:92vh}.xrow,.xrow.c3{grid-template-columns:1fr 1fr}.xf2{grid-template-columns:1fr}.xs-grid{gap:3px}}
@media (prefers-reduced-motion:reduce){.xcard,.xpanel,.xov{transition:opacity .2s!important}.xcard *,.xd *,.xshine{animation:none!important}.xcard:hover{transform:none}}
.xed input[type=color]{height:40px;padding:3px;cursor:pointer}

/* v2: floating viewport-clamped tooltip */
.xtipf{position:fixed;left:0;top:0;z-index:300;max-width:min(280px,calc(100vw - 16px));padding:9px 11px;border-radius:10px;background:rgba(18,8,32,.97);border:2px solid #4c1d95;box-shadow:0 0 0 1px #000,0 10px 30px rgba(76,29,149,.5);color:#f2effa;font:500 12px/1.35 Inter,sans-serif;display:flex;flex-direction:column;gap:2px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s;overflow-wrap:anywhere}
.xtipf.on{opacity:1;visibility:visible}.xtipf b{color:#fff;font-size:13px}.xtipf .en{color:#a5b4fc}.xtipf small{color:#8b8299;font-family:ui-monospace,monospace;font-size:10.5px}.xtipf .cnt{color:#cbd5e1}.xtipf .nb{color:#f0abfc}
/* v2: frame on the outer shell, scroll inside rounded body */
.xface.back{border-radius:26px;overflow:hidden;isolation:isolate}
.xface.back:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:8;box-shadow:inset 0 0 0 1px var(--line)}
.xface.back.bd-solid:after{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c1) 60%,transparent)}
.xface.back.bd-double:after{box-shadow:inset 0 0 0 2px var(--c1),inset 0 0 0 5px var(--card),inset 0 0 0 7px var(--c2)}
.xface.back.bd-dashed:after{box-shadow:none;border:2px dashed color-mix(in srgb,var(--c1) 65%,transparent)}
.xface.back.bd-gradient:after{box-shadow:none;padding:2px;background:linear-gradient(135deg,var(--c1),var(--c2),var(--c1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.xface.back.fx-rainbow.bd-gradient:after{background:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#38bdf8,#a855f7,#f43f5e);background-size:200% 100%;animation:xrb 4s linear infinite}
.xd.bd-gradient .xhero:before,.xd.fx-rainbow.bd-gradient .xhero:before{content:none}
.xhero{border-radius:0}
.xscroll{border-radius:26px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%,transparent) transparent;overflow-x:hidden}
.xscroll::-webkit-scrollbar{width:6px}.xscroll::-webkit-scrollbar-track{background:transparent;margin:26px 0}.xscroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 45%,transparent);border-radius:6px}
.xclose{right:16px;top:16px}
.xd{min-width:0}.xcols>*{min-width:0}.xchip{max-width:100%;overflow-wrap:anywhere}.xd h2,.xcard h3{overflow-wrap:anywhere}
.xs-grid{width:100%}.xcmp{overflow-x:auto}
@media (prefers-reduced-motion:reduce){.xface.back:after{animation:none!important}}
/* v3 perf: sprite icons, cheap overlay, compositor-only animations */
.xi{display:block;width:78%;aspect-ratio:1;background:url(/items/sprite.webp?v=3) no-repeat;background-size:calc(var(--sc)*100%) calc(var(--sr)*100%);background-position:calc(var(--sx)/(var(--sc) - 1)*100%) calc(var(--sy)/(var(--sr) - 1)*100%);image-rendering:pixelated;pointer-events:none}
.xico .xi{width:48px}.xico.big .xi{width:72px}.xmini .xi{width:24px}.xpick-l .xi{width:78%}
.xs-lazy{width:100%;max-width:440px;aspect-ratio:9/var(--rows);border-radius:8px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent) 0 calc(11.11% - 4px),transparent calc(11.11% - 4px) 11.11%)}
.xov,.xov.on{background:none;backdrop-filter:none;transition:none}
.xov:before{content:"";position:fixed;inset:0;background:rgba(20,10,40,.5);opacity:0;transition:opacity .45s;z-index:-1}[data-theme=dark] .xov:before{background:rgba(0,0,0,.7)}
.xov.on:before{opacity:1}
.xpanel{will-change:auto}
.xanim .xface.back,.xanim .xface.front .xcard{box-shadow:none!important}
.xanim *,.xanim *:before,.xanim *:after{animation-play-state:paused!important}
.xanim .xp,.xanim .xshine,.xanim .xchip{box-shadow:none!important}
body.xlock .xgridc *,body.xlock .xgridc *:before,.xcard.off *,.xcard.off:before{animation-play-state:paused!important}
/* shimmer via transform instead of background-position */
.fx-shimmer .xshine{overflow:hidden;background:none!important;animation:none}
.fx-shimmer .xshine:before{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-120%);animation:xsh2 3.6s linear infinite;will-change:transform}
[data-theme=dark] .fx-shimmer .xshine:before{background:linear-gradient(105deg,transparent,rgba(216,180,254,.16),transparent)}
@keyframes xsh2{to{transform:translateX(280%)}}
.fx-holo .xshine{mix-blend-mode:normal;opacity:.7}
.fx-pulse .xico{animation:xpu2 2.4s ease-in-out infinite}@keyframes xpu2{50%{transform:scale(1.07)}}
.xs-slot.r-legendary,.xs-slot.r-epic{animation:none}
.xs-slot.r-legendary:after,.xs-slot.r-epic:after{content:"";position:absolute;inset:-3px;border-radius:10px;box-shadow:0 0 8px var(--rc);opacity:0;animation:xglo2 2.4s ease-in-out infinite;pointer-events:none}
@keyframes xglo2{50%{opacity:1}}
.xp i{box-shadow:none;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.xov:before{transition:none}.xs-slot:after,.xshine:before{animation:none!important}}
/* icon picker (admin) */
.xip{position:relative;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:4px 6px;transition:.15s}
.xip:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.xip-cur{flex:none;width:36px;height:36px;border-radius:8px;background:var(--soft);display:grid;place-items:center}.xip-cur .xi{width:28px}
.xip-cur .xi-up,.xico .xi-up,.xip-ic .xi-up,.xmini .xi-up{width:80%;height:80%;object-fit:contain;border-radius:6px}.xico .xi-up{width:48px;height:48px}.xico.big .xi-up{width:72px;height:72px}
.xi-none{display:block;width:60%;aspect-ratio:1;border:2px dashed color-mix(in srgb,var(--muted) 55%,transparent);border-radius:6px}
.xip input#xipq{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:6px 4px;outline:0}
.xip-btn{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;font-weight:700}.xip-btn:hover,.xip-btn:focus-visible{color:var(--accent);border-color:var(--accent)}
.xip-pop{position:absolute;z-index:60;left:-1px;right:-1px;top:calc(100% + 6px);max-height:320px;overflow:auto;background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:14px;box-shadow:0 14px 40px rgba(60,20,120,.22);padding:6px;scrollbar-width:thin}
.xip-o{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 8px;border-radius:10px;cursor:pointer;color:var(--text)}
.xip-o b{font-weight:600;font-size:14px;grid-column:2}.xip-o small{grid-column:2;color:var(--muted);font-size:12px}.xip-o .xip-ic{grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--soft);color:var(--accent)}.xip-o .xip-ic .xi{width:26px}
.xip-o.sp b{color:var(--accent)}.xip-o.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}.xip-o.cur b:after{content:' ✓';color:var(--accent)}
.xip-o.sp+.xip-o:not(.sp){margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px}
.xip-e{margin:8px;color:var(--muted);font-size:13px}
.xpick.icon-mode{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.xpick.icon-mode .xs-slot{cursor:pointer}
.xpick.icon-mode>b:after{content:' — ' attr(data-hint);font-weight:400;color:var(--accent);font-size:12px}
/* shop grid layout */
.xlay{display:flex!important;flex-wrap:wrap;gap:var(--lgap,22px)!important;max-width:var(--lmax,none);grid-template-columns:none!important}
.xlay>*{flex:0 1 var(--lw,260px);width:var(--lw,260px);min-width:0;max-width:100%}
.xlay[data-align=center]{justify-content:center;margin-inline:auto}.xlay[data-align=left]{justify-content:flex-start;margin-right:auto}.xlay[data-align=right]{justify-content:flex-end;margin-left:auto}
@media(max-width:640px){.xlay{max-width:none}.xlay>*{flex:1 1 100%;width:auto}}
.xgpv{border:1px dashed var(--line);border-radius:16px;padding:14px;margin:12px 0;background:var(--bg2);overflow:hidden}.xgpv .xlay>*{transform:none}.xgph{text-align:center}
.xkl{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.xkl li{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;background:var(--card2);border:1px solid var(--line)}.xkl li .xi{width:24px;flex:none}.xkl li span{flex:1;min-width:0;overflow-wrap:anywhere}.xkl li b{color:var(--accent)}

/* admin-set text colours (tc-*): unset = theme default */
.xcard.tc-title>.xin>h3,.tc-title .xhero h2{background:none;color:var(--tt);-webkit-text-fill-color:var(--tt)}
.xcard.tc-tgrad>.xin>h3,.tc-tgrad .xhero h2{background:linear-gradient(90deg,var(--tt),var(--tt2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.xcard.tc-glow>.xin>h3,.tc-glow .xhero h2{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tg) 85%,transparent)) drop-shadow(0 0 14px color-mix(in srgb,var(--tg) 45%,transparent))}
.tc-desc .xdesc,.tc-desc .xhdesc{color:var(--td)}
.tc-price .price,.tc-price .xbig,.tc-price .xsum,.tc-price .xdur .cr{color:var(--tp)}
.tc-chip .xchip:not(.more),[data-theme=dark] .tc-chip .xchip:not(.more){color:var(--tcf);border-color:color-mix(in srgb,var(--tcf) 40%,transparent)}
.tc-chipbg .xchip,[data-theme=dark] .tc-chipbg .xchip{background:var(--tcb)}
.tc-rib .xrib,.tc-rib .xbadge,.tc-rib .pill.hot{color:var(--tr)}
.xtc-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 14px}
.xtc-r{display:grid;grid-template-columns:1fr 44px auto;align-items:center;gap:8px;font-size:13px}.xtc-r input[type=color]{width:44px;height:32px;padding:2px}
.xtc-r .xtc-s{grid-column:1/-1;font-size:11px;font-style:normal;margin-top:-6px}.xtc-r.def input{opacity:.55}.xtc-r.dis{opacity:.5}
.xtc-w{display:none;margin-top:10px;padding:10px 12px;border-radius:12px;border:1.5px solid #f59e0b;background:color-mix(in srgb,#f59e0b 12%,var(--card));font-size:13px}.xtc-w.on{display:block}.xtc-w ul{margin:6px 0 0;padding-left:18px}