/* 🪟 «کارت شیشه‌ای» (۲۹ مهر): only under html.cg; card = art, rarity = light, name below */
@property --ga2{syntax:'<angle>';inherits:false;initial-value:0deg}
.hc.hcg{aspect-ratio:auto;padding:0;background:none;box-shadow:none;border-radius:0;display:block;container-type:inline-size;transform:none;transform-style:flat;overflow:visible;isolation:isolate}
.hc.hcg::before,.hc.hcg::after{content:none!important}
.hcg .g-hl{position:absolute;left:-6%;right:-6%;top:0;aspect-ratio:5/6;border-radius:50%;background:radial-gradient(closest-side,var(--rc),transparent);opacity:0;z-index:-1;pointer-events:none}
.hcg.g-epic .g-hl,.hcg.g-legendary .g-hl,.hcg.g-waifu .g-hl,.hcg.g-oshi .g-hl,.hcg.g-husbando .g-hl,.hcg.glv2 .g-hl,.hcg.glv3 .g-hl{opacity:.3;animation:gBr 4.5s ease-in-out infinite}
@keyframes gBr{50%{opacity:.48;transform:scale(1.05)}}
.hcg .g-rim{position:relative;display:block;aspect-ratio:5/7;border-radius:15px;padding:1.5px;background:rgba(255,255,255,.09);box-shadow:0 12px 24px -14px rgba(0,0,0,.8);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hcg.g-rare .g-rim{background:linear-gradient(160deg,#f3f6ff,#7d8ab3 40%,#e9eeff 70%,#6c789f)}
.hcg.g-epic .g-rim,.hcg.g-legendary .g-rim,.hcg.g-waifu .g-rim,.hcg.g-oshi .g-rim,.hcg.g-husbando .g-rim,.hcg.glv2 .g-rim,.hcg.glv3 .g-rim{background:conic-gradient(from var(--ga2),var(--k1),var(--k2),var(--k1),var(--k3),var(--k1));animation:gSp 6s linear infinite}
.hcg.g-epic{--k1:#4d2bb0;--k2:#e0d2ff;--k3:#8a60ff}
.hcg.g-legendary{--k1:#8f620f;--k2:#fff3c4;--k3:#f3c04f}
.hcg.g-waifu{--k1:#a3355f;--k2:#ffe2ee;--k3:#ff7fae}
.hcg.g-oshi{--k1:#a35a12;--k2:#ffeccd;--k3:#ffb35c}
.hcg.g-husbando{--k1:#1b5a96;--k2:#d9eeff;--k3:#5fb4ff}
.hcg.glv2{--rc:#ffd257;--k1:#9a6a12;--k2:#fffbe6;--k3:#ffd257}
.hcg.glv3{--rc:#c084fc;--k1:#ff6ec7;--k2:#7afcff;--k3:#fffd82}
.hcg.glv3 .g-rim{background:conic-gradient(from var(--ga2),#ff6ec7,#ffd36e,#7afcff,#b388ff,#ff6ec7)}
@keyframes gSp{to{--ga2:360deg}}
.hcg .g-art{position:relative;display:block;width:100%;height:100%;border-radius:13.5px;overflow:hidden;background:#151a33}
.hcg .g-art .art{position:absolute;inset:-3%;border-radius:0;background:center 18%/cover #1b2040;transform:translate(var(--px,0),var(--py,0));transition:transform .3s}
.hcg .g-art::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 26%,transparent 72%,rgba(0,0,0,.22))}
.hcg .g-spec{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at var(--mx,30%) var(--my,12%),rgba(255,255,255,.32),transparent 45%);mix-blend-mode:soft-light}
.hcg .g-foil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:color-dodge}
.hcg.g-legendary .g-foil,.hcg.glv2 .g-foil{opacity:.4;background:linear-gradient(115deg,transparent 30%,rgba(255,230,150,.75) 45%,rgba(255,255,255,.85) 50%,rgba(255,215,110,.7) 55%,transparent 70%);background-size:260% 100%;animation:gFl 5.5s ease-in-out infinite}
.hcg.g-epic .g-foil{opacity:.22;background:linear-gradient(115deg,transparent 35%,rgba(220,200,255,.8) 50%,transparent 65%);background-size:260% 100%;animation:gFl 7s ease-in-out infinite}
@keyframes gFl{0%{background-position:130% 0}70%,100%{background-position:-40% 0}}
.hcg.g-waifu .g-foil,.hcg.g-oshi .g-foil,.hcg.g-husbando .g-foil{opacity:.5;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.75) 0 2.5px,transparent 3.5px),radial-gradient(circle at 70% 60%,rgba(255,255,255,.6) 0 2px,transparent 3px),radial-gradient(circle at 40% 85%,color-mix(in srgb,var(--rc) 70%,#fff) 0 2.5px,transparent 3.5px);background-size:80px 100px;animation:gDr 10s linear infinite}
@keyframes gDr{to{background-position:0 200px}}
.hcg.gholo .g-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.42;background:linear-gradient(125deg,#ff6ec7,#7afcff,#fffd82,#b388ff,#ff6ec7);background-size:300% 300%;background-position:var(--hx,30%) 50%;transition:background-position .3s}
.hcg.glv3 .g-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.5;background:linear-gradient(125deg,#ff6ec7,#7afcff,#fffd82,#b388ff,#ff6ec7);background-size:300% 300%;animation:gHl 8s linear infinite}
@keyframes gHl{to{background-position:300% 300%}}
.hcg .g-fav{position:absolute;z-index:4;top:7px;left:7px;width:9px;height:9px;border-radius:50%;background:#ff5c8a;box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 8px #ff5c8a}
.hcg.gcol .g-rim{box-shadow:0 0 0 2px #34d399,0 12px 24px -14px rgba(0,0,0,.8)}
.hcg.gmiss .g-art .art{filter:grayscale(1) brightness(.35)}
.hcg.gmiss .g-rim{background:rgba(255,255,255,.06)!important;animation:none!important}
.hcg.gmiss .g-hl,.hcg.gmiss .g-foil{display:none}
.hcg .hc-chal{position:absolute;z-index:4;left:6px;right:6px;bottom:6px;font-size:10px}
/* small cards (trade, pack lists): lighter */
.hcg:hover .g-rim{transform:translateY(-3px)}
/* inside the 3D card window and pack flips the card itself stays flat */
.k3-f /* lite / reduced motion: light stays, motion stops */
html.lite .hcg .g-rim,html.lite .hcg .g-hl,html.lite .hcg .g-foil,html.lite .hcg .g-art::after{animation:none!important}
html.lite .hcg .g-foil{display:none}
@media (prefers-reduced-motion:reduce){.hcg *{animation:none!important}}
/* card window: info chips */
.cg-inf{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.cg-inf span{font:800 11.5px/1 Vazirmatn,Tahoma,sans-serif;padding:6px 10px;border-radius:99px;background:rgba(127,140,190,.14)}
.cg-inf .rk{background:color-mix(in srgb,var(--rc) 22%,transparent);color:var(--rc)}
.cg-own{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.35);font:500 13px Vazirmatn,Tahoma,sans-serif}
.cg-own span{opacity:.8;flex:1 1 140px}
.cg-own button{border:0;border-radius:10px;padding:8px 12px;font:700 12.5px Vazirmatn,Tahoma,sans-serif;background:rgba(255,255,255,.1);color:inherit;cursor:pointer}
.cg-own button[data-cgm="all"]{background:#8b5cf6;color:#fff}
.cg-own button:disabled{opacity:.4;cursor:default}

/* 👁 caption: appears when the card reaches the middle of the screen (or under the mouse), leaves when it scrolls away */
.hcg .g-cap{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;padding:34px 9px 9px;pointer-events:none;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(7,9,20,.5) 30%,rgba(7,9,20,.9) 78%);opacity:0;transition:opacity .4s ease}
.hcg .g-cap::before{content:"";position:absolute;left:9px;right:9px;top:26px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--rc),transparent);opacity:.9;transform:scaleX(0);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.hcg .g-cap>*{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.hcg .g-cap>:nth-child(2){transition-delay:.06s}.hcg .g-cap>:nth-child(3){transition-delay:.12s}
.hcg.gfo .g-cap,.hcg:hover .g-cap,.hcg:focus-visible .g-cap{opacity:1}
.hcg.gfo .g-cap>*,.hcg:hover .g-cap>*,.hcg:focus-visible .g-cap>*{opacity:1;transform:none}
.hcg.gfo .g-cap::before,.hcg:hover .g-cap::before{transform:scaleX(1)}
.hcg.gfo .g-art .art{filter:brightness(1.04)}
.hcg .g-cap b{display:block;font:800 13.5px/1.3 Vazirmatn,Tahoma,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hcg .g-fv{font-style:normal;color:#ff6f9c;margin-left:4px}
.hcg .g-m{display:flex;align-items:center;justify-content:space-between;gap:6px;font:800 11.5px/1.2 Vazirmatn,Tahoma,sans-serif}
.hcg .g-rk i{font-style:normal;margin-left:3px}.hcg .g-rk em{font-style:normal}
.hcg .g-rk{overflow:hidden;color:color-mix(in srgb,var(--rc) 75%,#fff);white-space:nowrap}
.hcg.g-common .g-rk{color:#c6cce6}
.hcg .g-v{display:inline-flex;align-items:center;gap:3px;color:#ffd978;direction:ltr;white-space:nowrap}
.hcg .g-v i{font-style:normal;font-size:10px}
.hcg .g-x{display:flex;flex-wrap:wrap;gap:4px;min-height:0}
.hcg .g-x:empty{display:none}
.hcg .g-x span{font:700 10px/1 Vazirmatn,Tahoma,sans-serif;padding:3px 6px;border-radius:99px;background:rgba(255,255,255,.14);color:#e9ecff}
.hcg .g-x .gh{background:rgba(180,130,255,.38)}.hcg .g-x .gg{background:rgba(255,205,80,.35);color:#fff4d1}.hcg .g-x .gr{background:linear-gradient(90deg,rgba(255,110,199,.45),rgba(122,252,255,.45))}
.hcg .g-x .gc{background:rgba(52,211,153,.35)}.hcg .g-x .gx{background:rgba(255,255,255,.1);color:#c6cce6}
.hcg.gmiss .g-cap b{color:#c6cce6}
/* tiny cards (trade thumbnails, lists): only the name, no chips */
@container (max-width:132px){.hcg .g-cap{padding:22px 6px 6px;gap:3px}.hcg .g-cap b{font-size:11.5px}.hcg .g-m{font-size:10.5px}.hcg .g-rk em{display:none}.hcg .g-x span:not([dir]){display:none}.hcg .g-x span{font-size:9px;padding:2px 5px}.hcg .g-cap::before{top:16px}}
@container (max-width:84px){.hcg .g-m{display:none}}
/* inside the big card window the info is already next to the card */
.k3-f .hcg .g-cap{display:none}
/* pack opening: the details come in once the card is turned over */
.kd-fc .hcg .g-cap{transition-delay:.45s}.kd-fc.up .hcg .g-cap{opacity:1}.kd-fc.up .hcg .g-cap>*{opacity:1;transform:none}.kd-fc.up .hcg .g-cap::before{transform:scaleX(1)}.kd-flip.big .kd-fc .hcg .g-x{display:none}
html.lite .hcg .g-cap>*,html.lite .hcg .g-cap::before{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){.hcg .g-cap,.hcg .g-cap>*{transition:none}}
.vt-f.vt-g{background:none;box-shadow:none}.vt-f.vt-g>.hcg{position:absolute;inset:0;width:100%;height:100%}
/* pages without cards.css (market, list pages, profile) */
.hc.hcg{position:relative;width:100%;min-width:0}.hcg .g-art{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:13.5px}.hcg .art{position:absolute;inset:0;background-size:cover;background-position:center top;background-repeat:no-repeat}

/* ☕ cafe tiles (same widths as .cf-card) */
.hcg.cf-g{flex:none;width:96px;cursor:pointer}
.hcg.cf-g{flex:none;width:96px}
.cf-row.big .hcg.cf-g{width:calc((100% - 16px) / 3);max-width:150px}
.hcg.cf-g.sm{width:54px}
.cf-side .hcg.cf-g{width:calc((100% - 8px) / 2);max-width:100px}
.cf-ch .hcg.cf-g{width:120px}
.cf-tw .hcg.cf-g.sm{width:64px}
.cf-hc .hcg.cf-g{width:92px}
.cf-side .hcg.cf-g{width:auto;max-width:110px}
.cf-wi>.hcg.cf-g{flex:none;width:64px}
@media (max-width:420px){.hcg.cf-g{width:84px}}
@media (max-width:640px){.cf-side .hcg.cf-g{max-width:none}}
@media (max-width:640px){.cf-side .hcg.cf-g{flex:0 0 calc((100% - 6px) / 2);width:auto;max-width:none}}

/* (۲۹ مهر، گزارش Edward: «کارت‌های من» با بالا پایین کردن خراب می‌شد و می‌پرید) هاله‌ی پشت کارت دیگه filter:blur نداره (صدتا لایه‌ی تار گوشی رو از کار می‌انداخت و عکس‌ها پاک می‌شدن)؛ تو گوشی هاله ثابته */
@media (hover:none),(max-width:700px){.hcg .g-hl{animation:none!important}}

/* 🏷 (۱ آبان، بازخورد اعضا) رتبه و تعداد همیشه روی کارت؛ اسم انیمه زیر اسم کارت */
.hcg .g-pins{position:absolute;z-index:6;top:6px;left:6px;right:6px;display:flex;justify-content:space-between;align-items:flex-start;gap:4px;pointer-events:none}
.hcg .g-rp,.hcg .g-n{font:800 9.5px/1 Vazirmatn,Tahoma,sans-serif;font-style:normal;padding:3px 6px;border-radius:99px;background:rgba(7,9,20,.66);white-space:nowrap}
.hcg .g-rp{display:inline-flex;gap:3px;align-items:center;color:color-mix(in srgb,var(--rc) 72%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 60%,transparent)}
.hcg .g-rp b{font-weight:800}.hcg .g-rp em{font-style:normal}
.hcg.g-common .g-rp{color:#c6cce6;box-shadow:inset 0 0 0 1px rgba(198,204,230,.35)}
.hcg .g-n{margin-inline-start:auto;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.hcg.tkf .g-rp em{display:none}
.hcg .g-an{display:block;font:600 10.5px/1.3 Vazirmatn,Tahoma,sans-serif;color:#c6cce6;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:132px){.hcg .g-an{font-size:9.5px}.hcg .g-rp,.hcg .g-n{font-size:9px;padding:3px 5px}}
@container (max-width:100px){.hcg .g-rp em{display:none}}
@container (max-width:84px){.hcg .g-pins{top:4px;left:4px;right:4px}.hcg .g-rp,.hcg .g-n{font-size:8.5px;padding:2px 4px}.hcg .g-an{display:none}}
/* 🖤 «افتخاری» v2 (۶ آبان): obsidian glass in a brushed-silver rim, engraved corners, near black-and-white art, ink from below, a silver sweep
   (only while hovered, or as the card being opened). Nothing spins or blurs every frame. */
.hcg.g-hon{--rc:#e6e8ee;--hsv:#eef0f5}
.hcg.g-hon .g-hl{opacity:.3;background:radial-gradient(closest-side,rgba(240,243,250,.55),transparent)}
.hcg.g-hon .g-rim{padding:2px;background:linear-gradient(135deg,#f6f7fa 0%,#8b8d97 14%,#1d1e23 30%,#08080a 50%,#24252b 68%,#c4c6cf 86%,#6a6c75 100%);box-shadow:0 0 0 1px #000,0 0 22px -6px rgba(235,238,248,.4),0 12px 24px -12px #000}
.hcg.g-hon .g-art{background:#050506}
.hcg.g-hon .g-art .art{filter:grayscale(.72) contrast(1.24) brightness(.95)}
.hcg.g-hon .g-art::after{content:"";position:absolute;inset:7px;z-index:4;border-radius:7px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);background:linear-gradient(var(--hsv),var(--hsv)) 0 0/15px 1.5px,linear-gradient(var(--hsv),var(--hsv)) 0 0/1.5px 15px,linear-gradient(var(--hsv),var(--hsv)) 100% 0/15px 1.5px,linear-gradient(var(--hsv),var(--hsv)) 100% 0/1.5px 15px,linear-gradient(var(--hsv),var(--hsv)) 0 100%/15px 1.5px,linear-gradient(var(--hsv),var(--hsv)) 0 100%/1.5px 15px,linear-gradient(var(--hsv),var(--hsv)) 100% 100%/15px 1.5px,linear-gradient(var(--hsv),var(--hsv)) 100% 100%/1.5px 15px;background-repeat:no-repeat;filter:drop-shadow(0 0 3px rgba(255,255,255,.55))}
.hcg.g-hon .g-spec{background:radial-gradient(130% 55% at 50% 118%,#000 30%,rgba(0,0,0,.55) 55%,transparent 76%);opacity:1;mix-blend-mode:normal}
.hcg.g-hon .g-foil{opacity:.85;mix-blend-mode:screen;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.5) 47%,rgba(220,226,240,.12) 53%,transparent 62%) -160% 0/260% 100% no-repeat;animation:none}
.hcg.g-hon:hover .g-foil,.kd-fc.up .hcg.g-hon .g-foil{animation:gHonSw 4.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes gHonSw{0%,48%{background-position:-160% 0}100%{background-position:260% 0}}
.hcg.g-hon .g-cap b{background:linear-gradient(180deg,#fff 20%,#aeb1bc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hcg.g-hon .g-rp{color:#0b0b0d;background:linear-gradient(180deg,#fbfcfe,#aeb0ba);box-shadow:0 0 0 1px #000,0 0 10px rgba(255,255,255,.3)}
.hcg.g-hon .g-art .art{filter:grayscale(.88) contrast(1.28) brightness(.94)}
/* a small silver diamond on the caption line, and a crest at the top of the frame */
.hcg.g-hon .g-cap::after{content:"";position:absolute;left:50%;top:22px;width:8px;height:8px;margin-left:-4px;transform:rotate(45deg) scale(0);background:linear-gradient(135deg,#fff,#8b8d97);box-shadow:0 0 0 1.5px #000,0 0 10px rgba(255,255,255,.8);transition:transform .45s cubic-bezier(.2,1.5,.4,1) .2s}
.hcg.g-hon.gfo .g-cap::after,.hcg.g-hon:hover .g-cap::after,.kd-fc.up .hcg.g-hon .g-cap::after{transform:rotate(45deg) scale(1)}
.hcg.g-hon .g-rim::after{content:"";position:absolute;z-index:8;top:-4px;left:50%;width:9px;height:9px;margin-left:-4.5px;transform:rotate(45deg);background:linear-gradient(135deg,#fff,#7d7f89);box-shadow:0 0 0 1.5px #000,0 0 12px rgba(255,255,255,.7);pointer-events:none}
html.lite .hcg.g-hon .g-foil{animation:none!important}
@media (prefers-reduced-motion:reduce){.hcg.g-hon .g-foil{animation:none!important}}