/* 🍀 «گریمور» (Black Clover) + 🌃 «نایت سیتی» (Cyberpunk: Edgerunners) — special pack cards (۱۹ مهر) */

/* ============ 🍀 grimoire card ============ */
.gm{--mc:#5ef2a1;--mk:#0b3d2a;position:relative;display:block;width:100%;aspect-ratio:5/7;border-radius:14px;isolation:isolate;container-type:inline-size;font-family:Vazirmatn,Tahoma,sans-serif;color:#fff;
  transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .2s;box-shadow:0 18px 34px -14px rgba(0,0,0,.85),0 0 24px -8px var(--mc)}
.gm-edge{position:absolute;inset:-3px;border-radius:17px;z-index:-1;background:linear-gradient(135deg,#6b4a12,#f7d98a 18%,#a8741f 34%,#fff1c2 50%,#8a5c16 66%,#f2cc6b 82%,#5a3a0c);}
.gm.t-c .gm-edge{background:linear-gradient(135deg,#3a2a1a,#8a6a44 30%,#c9a877 50%,#6b4f2e 70%,#2e2012)}
.gm.t-x .gm-edge{box-shadow:0 0 18px 2px color-mix(in srgb,var(--mc) 70%,transparent)}
@keyframes gmGold{to{background-position:220% 220%}}
.gm-in{position:absolute;inset:0;border-radius:13px;overflow:hidden;background:radial-gradient(120% 80% at 50% 110%,var(--mk),#0a0806 70%)}
.gm-in::before{content:"";position:absolute;inset:4%;border:1.5px solid rgba(247,217,138,.55);border-radius:9px;z-index:6;pointer-events:none;box-shadow:inset 0 0 0 3px rgba(0,0,0,.25),inset 0 0 0 4px rgba(247,217,138,.25)}
.gm-ph{position:absolute;inset:0;background:center 18%/cover no-repeat;transform:scale(1.04);animation:gmBreath 7s ease-in-out infinite}
@keyframes gmBreath{50%{transform:scale(1.09) translateY(-1.5%)}}
.gm-in::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,8,6,.25),transparent 28%,transparent 52%,rgba(10,8,6,.92) 88%);pointer-events:none}
.gm-circ{position:absolute;z-index:1;width:150%;left:-25%;top:30%;opacity:.42;mix-blend-mode:screen;fill:none;stroke:var(--mc);stroke-width:.8;animation:gmSpin 22s linear infinite;will-change:transform}
.gm-circ .d{stroke-dasharray:2 3}.gm-circ .rn rect{fill:var(--mc);stroke:none}
@keyframes gmSpin{to{transform:rotate(360deg)}}
.gm-badge{position:absolute;z-index:7;top:6%;right:6%;width:23%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#1d1408 50%,#0a0703);box-shadow:0 0 0 2px #e9c36b,0 0 0 3.5px #5a3a0c,0 4px 10px rgba(0,0,0,.6)}
.gm-leaf{width:84%;fill:#bfa25a;stroke:#3a2a08;stroke-width:.6}
.gm-leaf circle{fill:#e9c36b}
.gm.t-r .gm-leaf{fill:#62d47a}.gm.t-x .gm-leaf{fill:var(--mc);filter:drop-shadow(0 0 3px var(--mc))}
.gm.t-x .gm-leaf g{animation:gmSpin 18s linear infinite;transform-origin:0 0}
.gm-leaf .dv{fill:#111!important;stroke:#ff3a3a;stroke-width:1.2;filter:drop-shadow(0 0 2px #ff2a2a)}
.gm.m-anti .gm-leaf{fill:#2a2a2a}.gm.m-anti .gm-badge{box-shadow:0 0 0 2px #e9c36b,0 0 0 3.5px #5a3a0c,0 0 16px rgba(255,40,40,.55)}
.gm-pg{position:absolute;inset:0;z-index:3;pointer-events:none}
.gm-pg i{position:absolute;bottom:-12%;width:10%;aspect-ratio:3/4;border-radius:2px;background:linear-gradient(135deg,#fff5dc,#d9c08c);box-shadow:0 0 6px rgba(255,230,160,.6);opacity:0;animation:gmPage 7s ease-in infinite}
.gm-pg i::after{content:"";position:absolute;inset:20% 18%;background:repeating-linear-gradient(#8a6a3a 0 1px,transparent 1px 4px);opacity:.6}
.gm-pg i:nth-child(1){left:12%}.gm-pg i:nth-child(2){left:70%;animation-delay:1.8s}.gm-pg i:nth-child(3){left:40%;animation-delay:3.6s}.gm-pg i:nth-child(4){left:84%;animation-delay:5.2s}
@keyframes gmPage{0%{opacity:0;transform:translateY(0) rotate(0) rotateY(0)}12%{opacity:.9}100%{opacity:0;transform:translateY(-130cqw) rotate(220deg) rotateY(360deg)}}
.gm-foot{position:absolute;z-index:7;left:8%;right:8%;bottom:6.5%;text-align:center;display:flex;flex-direction:column;gap:2px}
.gm-foot small{align-self:center;font-size:clamp(8px,6.2cqw,11px);font-weight:800;padding:1px 9px;border-radius:99px;color:var(--mk);background:var(--mc);box-shadow:0 0 10px color-mix(in srgb,var(--mc) 60%,transparent)}
.gm-foot b{font:400 clamp(14px,11cqw,22px)/1.25 Lalezar,Vazirmatn,sans-serif;color:#fff3cf;text-shadow:0 2px 0 #3a2208,0 0 14px rgba(0,0,0,.8)}
.gm-foot em{font-style:normal;font-size:clamp(8px,6cqw,11px);line-height:1.6;color:rgba(255,240,210,.82)}
.gm-sheen{position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,240,200,.38) 48%,transparent 60%);background-size:260% 100%;animation:gmSheen 5.5s ease-in-out infinite;mix-blend-mode:overlay}
.gm.t-c .gm-sheen{display:none}
@keyframes gmSheen{0%,55%{background-position:120% 0}100%{background-position:-140% 0}}
/* magic effects */
.gm-anti{position:absolute;inset:0;z-index:4;pointer-events:none}
.gm-anti svg{width:100%;height:100%;fill:none;stroke:#000;stroke-width:1.6;stroke-linejoin:bevel;filter:drop-shadow(0 0 1.5px #ff2a2a);stroke-dasharray:180;stroke-dashoffset:180;animation:gmCrack 3.6s steps(14) infinite}
.gm-anti polyline:nth-child(2){animation-delay:.25s}.gm-anti polyline:nth-child(3){animation-delay:.5s}
@keyframes gmCrack{0%{stroke-dashoffset:180}30%,48%{stroke-dashoffset:0;opacity:1}62%,100%{stroke-dashoffset:0;opacity:0}}
.gm.m-anti .gm-ph{animation:gmBreath 7s ease-in-out infinite,gmMono 3.6s steps(1) infinite}
@keyframes gmMono{0%,29%,50%,100%{filter:none}31%,46%{filter:grayscale(1) contrast(1.6) brightness(.9)}}
.gm-blk{position:absolute;inset:auto 0 0;height:45%;z-index:3;background:radial-gradient(60% 70% at 30% 100%,rgba(0,0,0,.9),transparent 70%),radial-gradient(50% 60% at 75% 100%,rgba(20,0,0,.85),transparent 70%);animation:gmBlk 2.4s ease-in-out infinite alternate;mix-blend-mode:multiply}
@keyframes gmBlk{to{transform:translateY(-6%) scaleY(1.12)}}
.gm-wind{position:absolute;inset:0;z-index:4;pointer-events:none}
.gm-wind i{position:absolute;left:50%;top:55%;width:120%;aspect-ratio:1;border-radius:50%;border:2px solid transparent;border-top-color:color-mix(in srgb,var(--mc) 80%,#fff);border-right-color:color-mix(in srgb,var(--mc) 35%,transparent);transform:translate(-50%,-50%) rotate(0);animation:gmWind 3.2s linear infinite;will-change:transform}
.gm-wind i:nth-child(2){width:85%;animation-duration:2.4s;animation-direction:reverse}.gm-wind i:nth-child(3){width:150%;animation-duration:4.6s;opacity:.6}
@keyframes gmWind{to{transform:translate(-50%,-50%) rotate(360deg)}}
.gm-emb,.gm-mote{position:absolute;inset:0;z-index:4;pointer-events:none}
.gm-emb i,.gm-mote i{position:absolute;bottom:-4%;width:3%;aspect-ratio:1;border-radius:50%;background:var(--mc);box-shadow:0 0 6px 2px var(--mc);animation:gmEmb 3.4s ease-in infinite;opacity:0}
.gm-emb i:nth-child(odd){animation-duration:2.6s}
.gm-emb i:nth-child(1),.gm-mote i:nth-child(1){left:8%}.gm-emb i:nth-child(2),.gm-mote i:nth-child(2){left:22%;animation-delay:.6s}.gm-emb i:nth-child(3),.gm-mote i:nth-child(3){left:36%;animation-delay:1.3s}.gm-emb i:nth-child(4),.gm-mote i:nth-child(4){left:50%;animation-delay:.3s}
.gm-emb i:nth-child(5),.gm-mote i:nth-child(5){left:64%;animation-delay:1.9s}.gm-emb i:nth-child(6),.gm-mote i:nth-child(6){left:78%;animation-delay:.9s}.gm-emb i:nth-child(7),.gm-mote i:nth-child(7){left:90%;animation-delay:2.4s}.gm-emb i:nth-child(8),.gm-mote i:nth-child(8){left:30%;animation-delay:2.8s}
.gm-emb i:nth-child(9){left:58%;animation-delay:1.6s}.gm-emb i:nth-child(10){left:14%;animation-delay:2.1s}
@keyframes gmEmb{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(8cqw,-120cqw) scale(.3)}}
.gm.m-flame .gm-in,.gm.m-blood .gm-in{box-shadow:inset 0 -40px 50px -20px color-mix(in srgb,var(--mc) 60%,transparent)}
.gm-slash{position:absolute;z-index:4;left:-20%;top:46%;width:140%;height:3px;background:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--mc) 80%,transparent),0 0 14px 3px var(--mc);transform:rotate(-24deg) scaleX(0);animation:gmSlash 4.2s cubic-bezier(.7,0,.2,1) infinite}
@keyframes gmSlash{0%,58%{transform:rotate(-24deg) scaleX(0);opacity:1}66%{transform:rotate(-24deg) scaleX(1);height:5px}84%{opacity:1;height:3px}100%{transform:rotate(-24deg) scaleX(1);opacity:0}}
.gm-clock{position:absolute;z-index:4;left:50%;top:44%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--mc) 70%,transparent);animation:gmSpin 30s linear infinite reverse;opacity:.75}
.gm-clock i{position:absolute;left:50%;top:50%;width:2px;height:44%;background:var(--mc);transform-origin:50% 100%;translate:-50% -100%;animation:gmSpin 6s steps(60) infinite;box-shadow:0 0 6px var(--mc)}
.gm-zap{position:absolute;inset:0;z-index:4;background:linear-gradient(transparent 0 0);pointer-events:none;animation:gmZap 3s steps(1) infinite}
@keyframes gmZap{0%,86%,92%,100%{box-shadow:none;background:transparent}88%,94%{background:rgba(255,243,107,.18);box-shadow:inset 0 0 40px rgba(255,243,107,.6)}}
/* ============ 🍀 shop box: a grimoire's leather cover (same size and rhythm as the Night City box) ============ */
.gb-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:center;padding:24px;border-radius:22px;overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(60% 90% at 22% 50%,#1f3a1c 0%,#0e1a0c 45%,#070b06 100%),#070b06;
  box-shadow:inset 0 0 0 1px rgba(233,195,107,.55),inset 0 0 0 7px #0a0f08,inset 0 0 0 8px rgba(233,195,107,.25),0 24px 60px -26px rgba(233,170,60,.5)}
.gb-box::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px),repeating-linear-gradient(-45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 5px)}
.gb-orn{position:absolute;z-index:-1;width:46px;height:46px;border:2px solid rgba(233,195,107,.6);pointer-events:none}
.gb-orn.a{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}.gb-orn.b{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.gb-orn.c{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 10px 0}.gb-orn.d{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 10px}
.gb-circ{position:absolute;left:24%;top:50%;width:300px;max-width:52%;z-index:-1;transform:translate(-50%,-50%);pointer-events:none}
.gb-circ .gm-circ{position:static;width:100%;opacity:.5;stroke:#f2cc6b;filter:drop-shadow(0 0 6px #e9a83a)}.gb-circ .gm-circ .rn rect{fill:#f2cc6b}
.gb-glow{position:absolute;left:24%;top:50%;width:260px;height:260px;z-index:-1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(126,240,160,.25),transparent);animation:hnPulse 4s ease-in-out infinite}
.gb-pages{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.gb-pages i{position:absolute;bottom:-30px;width:16px;height:21px;border-radius:2px;background:linear-gradient(135deg,#fff5dc,#d9c08c);opacity:0;animation:gbPage 9s linear infinite;box-shadow:0 0 8px rgba(255,220,140,.5)}
.gb-pages i:nth-child(1){left:6%}.gb-pages i:nth-child(2){left:16%;animation-delay:1s}.gb-pages i:nth-child(3){left:28%;animation-delay:2s}.gb-pages i:nth-child(4){left:38%;animation-delay:3s}.gb-pages i:nth-child(5){left:12%;animation-delay:4s}.gb-pages i:nth-child(6){left:34%;animation-delay:5s}.gb-pages i:nth-child(7){left:22%;animation-delay:6s}.gb-pages i:nth-child(8){left:44%;animation-delay:7s}.gb-pages i:nth-child(9){left:4%;animation-delay:8s}
@keyframes gbPage{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:.8}100%{opacity:0;transform:translateY(-420px) rotate(320deg)}}
.gb-btx small{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:800;color:#1a1200;background:linear-gradient(135deg,#fff1c2,#e9c36b);box-shadow:0 6px 18px -6px rgba(233,195,107,.9)}
.gb-btx h2{margin:10px 0 6px;font:400 clamp(36px,6.6vw,56px)/1.1 Lalezar,Vazirmatn,sans-serif;background:linear-gradient(180deg,#fff8e0,#f2cc6b 55%,#a8741f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(233,195,107,.45))}
.gb-btx p{margin:0;font-size:13.5px;line-height:1.95;color:rgba(255,240,210,.85)}
.gb-leafs{display:flex;gap:10px;margin:10px 0 2px;font-size:12px;color:rgba(255,240,210,.85)}
.gb-leafs span{display:flex;align-items:center;gap:5px}.gb-leafs svg{width:22px;fill:#bfa25a}.gb-leafs .r svg{fill:#62d47a}.gb-leafs .x svg{fill:#111;stroke:#ff3a3a;stroke-width:1.4}
.gb-box .wt-gift button{color:#ffe9b0;background:rgba(233,195,107,.12);box-shadow:inset 0 0 0 1px rgba(233,195,107,.5)}
/* ============ 🍀 reveal ============ */
.gm-rv{position:relative;overflow:hidden;background:radial-gradient(60% 50% at 50% 30%,#3a2a0c,#0c0803 70%)!important}
.gm-rvc{position:absolute;left:50%;top:30%;width:min(520px,120%);transform:translate(-50%,-50%) scale(.2);opacity:0;animation:gmRvc 1.6s cubic-bezier(.2,.9,.2,1) forwards;pointer-events:none}
.gm-rvc .gm-circ{position:static;width:100%;opacity:.8;stroke:#f7d98a;animation:gmSpin 12s linear infinite}.gm-rvc .gm-circ .rn rect{fill:#f7d98a}
@keyframes gmRvc{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.gm-rvp i{position:absolute;left:50%;top:32%;width:16px;height:21px;border-radius:2px;background:linear-gradient(135deg,#fff5dc,#d9c08c);opacity:0;animation:gmBurst 1.6s .4s ease-out forwards;pointer-events:none}
.gm-rvp i:nth-child(n){--a:calc(var(--k,1) * 26deg)}
.gm-rvp i:nth-child(1){--a:0deg}.gm-rvp i:nth-child(2){--a:26deg}.gm-rvp i:nth-child(3){--a:52deg}.gm-rvp i:nth-child(4){--a:78deg}.gm-rvp i:nth-child(5){--a:104deg}.gm-rvp i:nth-child(6){--a:130deg}.gm-rvp i:nth-child(7){--a:156deg}.gm-rvp i:nth-child(8){--a:182deg}.gm-rvp i:nth-child(9){--a:208deg}.gm-rvp i:nth-child(10){--a:234deg}.gm-rvp i:nth-child(11){--a:260deg}.gm-rvp i:nth-child(12){--a:286deg}.gm-rvp i:nth-child(13){--a:312deg}.gm-rvp i:nth-child(14){--a:338deg}
@keyframes gmBurst{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(-260px) rotate(200deg)}}
.gm-rvk{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(255,30,30,.35),transparent 55%);animation:gmRvk .5s steps(2) 4}
@keyframes gmRvk{50%{background:radial-gradient(circle at 50% 30%,rgba(0,0,0,.85),transparent 60%)}}
.gm-rv h3{position:relative;color:#fff1c2;text-shadow:0 0 18px rgba(233,195,107,.8)}
.gm-fly{opacity:0;animation:gmFly .7s cubic-bezier(.2,.9,.2,1.2) forwards;animation-delay:calc(1s + var(--i) * .14s)}
@keyframes gmFly{0%{opacity:0;transform:translateY(-60px) rotateY(180deg) scale(.6)}100%{opacity:1;transform:none}}

/* ============ 🌃 Night City card ============ */
.ng{--nc:#ff2a6d;position:relative;display:block;width:100%;aspect-ratio:5/7;isolation:isolate;container-type:inline-size;font-family:Vazirmatn,Tahoma,sans-serif;color:#fff;
  transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .2s}
.ng::before{content:"";position:absolute;inset:4% 2% -3%;z-index:-2;border-radius:10px;background:color-mix(in srgb,var(--nc) 30%,transparent);box-shadow:0 14px 26px rgba(0,0,0,.6),0 0 22px color-mix(in srgb,var(--nc) 45%,transparent)}
.ng-edge,.ng-in{clip-path:polygon(0 0,82% 0,100% 7%,100% 100%,16% 100%,0 93%)}
.ng-edge{position:absolute;inset:-2px;z-index:-1;background:linear-gradient(160deg,var(--nc),#111 30%,#111 70%,var(--nc))}
.ng.t-x .ng-edge{background:linear-gradient(160deg,var(--nc),#f7ef3a 25%,#05d9e8 50%,#ff2a6d 75%,var(--nc));background-size:300% 300%;animation:ngHoloBg 5s linear infinite}
@keyframes ngEdge{50%{filter:brightness(1.6)}}
@keyframes ngHoloBg{to{background-position:300% 300%}}
.ng-in{position:absolute;inset:0;overflow:hidden;background:#07070c}
.ng-ph{position:absolute;inset:0;background:var(--img) center 18%/cover no-repeat}
.ng-ph::before,.ng-ph::after{content:"";position:absolute;inset:0;background:inherit;mix-blend-mode:screen;opacity:0}
.ng-ph::before{filter:sepia(1) saturate(8) hue-rotate(-50deg);animation:ngSplitA 4.4s steps(1) infinite}
.ng-ph::after{filter:sepia(1) saturate(8) hue-rotate(150deg);animation:ngSplitB 4.4s steps(1) infinite}
@keyframes ngSplitA{0%,82%,100%{opacity:0;transform:none}84%{opacity:.7;transform:translate(-3%,0)}88%{opacity:.6;transform:translate(2%,1%)}}
@keyframes ngSplitB{0%,82%,100%{opacity:0;transform:none}84%{opacity:.7;transform:translate(3%,0)}88%{opacity:.6;transform:translate(-2%,-1%)}}
.ng-in::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(7,7,12,.55),transparent 22%,transparent 50%,rgba(7,7,12,.95) 86%),linear-gradient(90deg,color-mix(in srgb,var(--nc) 28%,transparent),transparent 30%)}
.ng-scan{position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.ng-scan::after{content:"";position:absolute;left:0;right:0;height:18%;background:linear-gradient(transparent,color-mix(in srgb,var(--nc) 22%,transparent),transparent);animation:ngSweep 3.8s linear infinite}
@keyframes ngSweep{from{top:-20%}to{top:110%}}
.ng-rain{position:absolute;inset:0;z-index:3;display:flex;justify-content:space-around;pointer-events:none;opacity:.55;mask-image:linear-gradient(90deg,#000 0 22%,transparent 40% 70%,#000 90%)}
.ng-rain i{font:700 clamp(6px,5cqw,10px)/1.05 monospace;font-style:normal;color:var(--nc);writing-mode:vertical-rl;will-change:transform;animation:ngRain calc(3s + var(--i) * .35s) linear infinite;animation-delay:calc(var(--i) * -.7s)}
@keyframes ngRain{from{transform:translateY(-100%)}to{transform:translateY(110%)}}
.ng-gl{position:absolute;inset:0;z-index:4;pointer-events:none}
.ng-gl i{position:absolute;left:0;right:0;background:var(--img) center 18%/cover no-repeat;opacity:0;animation:ngSlice 4.4s steps(1) infinite}
.ng-gl i:nth-child(1){top:22%;height:7%;background-position:center 26%}.ng-gl i:nth-child(2){top:48%;height:4%;animation-delay:.12s}.ng-gl i:nth-child(3){top:63%;height:9%;animation-delay:.05s}
@keyframes ngSlice{0%,83%,93%,100%{opacity:0;transform:none}85%{opacity:1;transform:translateX(-7%);filter:hue-rotate(90deg)}89%{opacity:1;transform:translateX(5%)}}
.ng-hud{position:absolute;z-index:6;top:4%;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;font-size:clamp(7px,5.6cqw,10px)}
.ng-hud b{padding:1px 8px;color:#000;background:var(--nc);clip-path:polygon(0 0,100% 0,88% 100%,0 100%);font-weight:900;letter-spacing:.02em}
.ng-hud i{font:700 1em monospace;font-style:normal;color:var(--nc);text-shadow:0 0 6px var(--nc)}
.ng-bc{position:absolute;z-index:6;top:12%;left:6%;width:26%;height:3%;background:repeating-linear-gradient(90deg,var(--nc) 0 1px,transparent 1px 3px,var(--nc) 3px 5px,transparent 5px 6px);opacity:.75}
.ng-foot{position:absolute;z-index:6;left:7%;right:7%;bottom:6%;display:flex;flex-direction:column;gap:1px}
.ng-foot small{font:800 clamp(7px,5.4cqw,10px) Vazirmatn,sans-serif;color:var(--nc)}
.ng-foot b{font:400 clamp(15px,12cqw,24px)/1.15 Lalezar,Vazirmatn,sans-serif;text-shadow:2px 0 0 color-mix(in srgb,var(--nc) 80%,transparent),-2px 0 0 rgba(5,217,232,.6);animation:ngName 4.4s steps(1) infinite}
@keyframes ngName{0%,83%,90%,100%{transform:none}85%{transform:translateX(3px) skewX(-8deg)}87%{transform:translateX(-2px)}}
.ng-foot em{font-style:normal;font-size:clamp(8px,5.8cqw,11px);line-height:1.6;color:rgba(230,240,255,.78);border-right:2px solid var(--nc);padding-right:6px}
.ng-holo{position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(120deg,transparent 20%,rgba(255,42,109,.25) 35%,rgba(247,239,58,.25) 45%,rgba(5,217,232,.25) 55%,transparent 70%);background-size:260% 100%;mix-blend-mode:color-dodge;animation:gmSheen 4.5s ease-in-out infinite}
.ng-ret{position:absolute;z-index:4;left:50%;top:34%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(255,31,31,.8);box-shadow:0 0 14px rgba(255,31,31,.6),inset 0 0 14px rgba(255,31,31,.4);animation:ngRet 2.6s ease-in-out infinite}
.ng-ret::before,.ng-ret::after{content:"";position:absolute;background:rgba(255,31,31,.85)}.ng-ret::before{left:50%;top:-12%;bottom:-12%;width:1.5px}.ng-ret::after{top:50%;left:-12%;right:-12%;height:1.5px}
.ng-ret i{position:absolute;inset:22%;border-radius:50%;border:1.5px dashed rgba(255,31,31,.8);animation:gmSpin 4s linear infinite}
@keyframes ngRet{50%{transform:translate(-46%,-52%) scale(.92)}}
.ng.r-cyborg .ng-ph{filter:contrast(1.15) saturate(.7)}
.ng.t-c .ng-rain{opacity:.3}
/* ============ 🌙 Lucy — the moon edition ============ */
.ng.t-moon{--nc:#05d9e8}.ng.t-moon::before{box-shadow:0 14px 26px rgba(0,0,0,.6),0 0 26px rgba(5,217,232,.55),0 0 40px rgba(255,111,200,.25)}
.ng.t-moon .ng-edge{background:conic-gradient(from var(--lmA,0deg),#05d9e8,#ff6fc8,#f7ef3a,#9b6bff,#05d9e8);}
@property --lmA{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lmEdge{to{--lmA:360deg}}
.lm-sky{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0,#1a1f4d,#060814 65%)}
.lm-moon{position:absolute;left:50%;top:6%;width:92%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle at 38% 36%,#ffffff,#e8ecff 38%,#b9c3e8 62%,#7f8bc4 80%,#3b4580),radial-gradient(circle at 60% 60%,rgba(0,0,0,.18) 0 8%,transparent 9%);
  box-shadow:0 0 50px 10px rgba(190,210,255,.45),0 0 120px 30px rgba(5,217,232,.25);animation:lmRise 9s ease-in-out infinite alternate}
.lm-moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 62%,rgba(80,90,150,.35) 0 7%,transparent 8%),radial-gradient(circle at 66% 30%,rgba(80,90,150,.3) 0 5%,transparent 6%),radial-gradient(circle at 58% 70%,rgba(80,90,150,.28) 0 9%,transparent 10%)}
@keyframes lmRise{from{transform:translate(-50%,6%) scale(.96)}to{transform:translate(-50%,-4%) scale(1.03)}}
.lm-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 4px #cfe9ff;animation:lmTw 2.6s ease-in-out infinite}
.lm-stars i:nth-child(1){left:8%;top:10%}.lm-stars i:nth-child(2){left:20%;top:30%;animation-delay:.4s}.lm-stars i:nth-child(3){left:84%;top:14%;animation-delay:.9s}.lm-stars i:nth-child(4){left:90%;top:40%;animation-delay:1.3s}.lm-stars i:nth-child(5){left:12%;top:52%;animation-delay:.2s}.lm-stars i:nth-child(6){left:70%;top:6%;animation-delay:1.7s}.lm-stars i:nth-child(7){left:30%;top:4%;animation-delay:2.1s}
.lm-stars i:nth-child(8){left:50%;top:2%;animation-delay:.6s}.lm-stars i:nth-child(9){left:94%;top:24%;animation-delay:1.1s}.lm-stars i:nth-child(10){left:4%;top:36%;animation-delay:1.9s}.lm-stars i:nth-child(11){left:62%;top:46%;animation-delay:.8s}.lm-stars i:nth-child(12){left:40%;top:20%;animation-delay:2.3s}.lm-stars i:nth-child(13){left:76%;top:56%;animation-delay:1.5s}.lm-stars i:nth-child(14){left:24%;top:16%;animation-delay:.1s}
@keyframes lmTw{50%{opacity:.2;transform:scale(.5)}}
.lm-ph{-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 34%);mask-image:linear-gradient(180deg,transparent 4%,#000 34%);background-position:center 22%}
.lm-wire{position:absolute;inset:0;z-index:4;width:100%;height:100%;fill:none;stroke:#05d9e8;stroke-width:.9;stroke-linecap:round;filter:drop-shadow(0 0 2px #05d9e8);stroke-dasharray:40 220;animation:lmWire 3.2s cubic-bezier(.6,0,.3,1) infinite}
.lm-wire path:nth-child(2){stroke:#ff6fc8;filter:drop-shadow(0 0 3px #ff6fc8);animation-delay:1.1s}.lm-wire path:nth-child(3){animation-delay:2.1s;stroke:#9be7ff}
@keyframes lmWire{0%{stroke-dashoffset:260;opacity:0}12%{opacity:1}70%{opacity:1}100%{stroke-dashoffset:-40;opacity:0}}
.lm-shard i{position:absolute;z-index:4;width:5%;aspect-ratio:1;border:1px solid #05d9e8;background:rgba(5,217,232,.12);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:lmShard 6s ease-in-out infinite}
.lm-shard i:nth-child(1){left:10%;top:60%}.lm-shard i:nth-child(2){left:82%;top:50%;animation-delay:.8s}.lm-shard i:nth-child(3){left:18%;top:38%;animation-delay:1.6s}.lm-shard i:nth-child(4){left:74%;top:70%;animation-delay:2.4s}.lm-shard i:nth-child(5){left:58%;top:30%;animation-delay:3.2s}.lm-shard i:nth-child(6){left:30%;top:74%;animation-delay:4s}.lm-shard i:nth-child(7){left:88%;top:30%;animation-delay:4.8s}.lm-shard i:nth-child(8){left:6%;top:24%;animation-delay:5.4s}
@keyframes lmShard{50%{transform:translateY(-12px) rotate(60deg);opacity:.4}}
.lm-flash{position:absolute;inset:0;z-index:8;pointer-events:none;background:rgba(5,217,232,.0);animation:lmFlash 7s steps(1) infinite}
@keyframes lmFlash{0%,80%,84%,100%{background:transparent}81%{background:rgba(5,217,232,.35)}83%{background:rgba(255,111,200,.2)}}
.lm-link{position:absolute;z-index:9;left:50%;top:44%;transform:translate(-50%,-50%);font:800 clamp(9px,7cqw,13px) Vazirmatn,sans-serif;padding:3px 10px;color:#001a1d;background:#05d9e8;box-shadow:0 0 18px #05d9e8;opacity:0;white-space:nowrap;animation:lmLink 7s steps(1) infinite}
@keyframes lmLink{0%,80%,92%,100%{opacity:0}81%,91%{opacity:1}84%{transform:translate(-48%,-50%) skewX(-12deg)}}
.lm-foot small{color:#ff9ad8;text-shadow:0 0 6px #ff6fc8}
.lm-foot b{font-size:clamp(18px,15cqw,30px);background:linear-gradient(90deg,#9be7ff,#fff,#ff9ad8);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 8px rgba(5,217,232,.7))}
.lm-holo{position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(155,231,255,.35) 40%,rgba(255,154,216,.35) 50%,rgba(247,239,58,.22) 58%,transparent 72%);background-size:260% 100%;mix-blend-mode:color-dodge;animation:gmSheen 4s ease-in-out infinite}
/* ============ 🌃 shop box ============ */
.nb-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:center;padding:24px;border-radius:6px;overflow:hidden;isolation:isolate;color:#fff;clip-path:polygon(0 0,96% 0,100% 6%,100% 100%,4% 100%,0 94%);
  background:linear-gradient(180deg,#0b0820,#120a24 60%,#05040c);box-shadow:inset 0 0 0 1px rgba(247,239,58,.5)}
.nb-city{position:absolute;inset:auto 0 0;height:55%;z-index:-1;background:
  linear-gradient(transparent 60%,rgba(255,42,109,.25)),
  linear-gradient(90deg,#0d0a1d 0 6%,transparent 6% 8%,#120e26 8% 15%,transparent 15% 17%,#0f0b22 17% 26%,transparent 26% 28%,#140f2b 28% 34%,transparent 34% 37%,#0e0a20 37% 47%,transparent 47% 49%,#130e28 49% 58%,transparent 58% 60%,#0f0b22 60% 70%,transparent 70% 72%,#120d26 72% 82%,transparent 82% 84%,#0e0a20 84% 100%);
  -webkit-mask-image:linear-gradient(90deg,#000,#000);clip-path:polygon(0 40%,6% 40%,6% 10%,15% 10%,15% 30%,26% 30%,26% 0,34% 0,34% 25%,47% 25%,47% 12%,58% 12%,58% 35%,70% 35%,70% 5%,82% 5%,82% 28%,100% 28%,100% 100%,0 100%)}
.nb-city::after{content:"";position:absolute;inset:0;background:radial-gradient(1px 1px at 10% 50%,#f7ef3a,transparent),radial-gradient(1px 1px at 30% 40%,#05d9e8,transparent),radial-gradient(1px 1px at 52% 60%,#ff2a6d,transparent),radial-gradient(1px 1px at 76% 45%,#f7ef3a,transparent);background-size:40px 30px;opacity:.8}
.nb-moonbg{position:absolute;left:20%;top:16%;width:180px;aspect-ratio:1;z-index:-1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fff,#dfe5ff 40%,#8f9bd6 75%,#3b4580);box-shadow:0 0 70px 14px rgba(190,210,255,.35);transform:translateX(-50%)}
.nb-rain{position:absolute;inset:0;z-index:-1;display:flex;justify-content:space-around;opacity:.35;pointer-events:none}
.nb-rain i{font:700 11px/1.05 monospace;font-style:normal;color:#05d9e8;writing-mode:vertical-rl;animation:ngRain calc(4s + var(--i) * .4s) linear infinite;animation-delay:calc(var(--i) * -.9s)}
.nb-rain i:nth-child(3n){color:#ff2a6d}.nb-rain i:nth-child(4n){color:#f7ef3a}
.nb-scan{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);pointer-events:none}
.nb-btx small{display:inline-block;padding:4px 12px;font-size:12px;font-weight:900;color:#000;background:#f7ef3a;clip-path:polygon(0 0,100% 0,94% 100%,0 100%);box-shadow:0 0 18px rgba(247,239,58,.6)}
.nb-btx h2{margin:10px 0 6px;font:400 clamp(36px,6.6vw,56px)/1.1 Lalezar,Vazirmatn,sans-serif;color:#f7ef3a;text-shadow:3px 0 0 #ff2a6d,-3px 0 0 #05d9e8,0 0 24px rgba(247,239,58,.45);animation:nbGl 5s steps(1) infinite}
@keyframes nbGl{0%,90%,96%,100%{transform:none}92%{transform:translateX(4px) skewX(-10deg)}94%{transform:translateX(-3px)}}
.nb-btx p{margin:0;font-size:13.5px;line-height:1.95;color:rgba(230,236,255,.85)}
.nb-moon{color:#9be7ff;text-shadow:0 0 10px #05d9e8}
.nb-box .dl-buy:not(.sm){border-radius:0;clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
.nb-box .wt-gift button{color:#fff59a;background:rgba(247,239,58,.1);box-shadow:inset 0 0 0 1px rgba(247,239,58,.5)}
@media (max-width:760px){.gb-box,.nb-box{grid-template-columns:1fr;padding:18px 14px}.gb-box .hn-fan,.nb-box .hn-fan{order:-1;height:250px}.gb-circ,.gb-glow{left:50%;top:24%}.nb-moonbg{left:50%;top:8%;width:130px}}
/* ============ 🌃 reveal ============ */
.ng-rv{position:relative;overflow:hidden;background:linear-gradient(180deg,#0b0820,#05040c)!important}
.ng-rv .nb-rain{z-index:0;opacity:.3}
.ng-rvc{position:absolute;inset:0;pointer-events:none;background:#05d9e8;opacity:0;animation:ngBoot .9s steps(1) forwards}
@keyframes ngBoot{0%{opacity:.6}10%{opacity:0}20%{opacity:.35;background:#ff2a6d}30%,100%{opacity:0}}
.ng-rvm{position:absolute;left:50%;top:8%;width:min(320px,70%);aspect-ratio:1;border-radius:50%;transform:translate(-50%,40%) scale(.6);opacity:0;background:radial-gradient(circle at 38% 36%,#fff,#e8ecff 38%,#b9c3e8 62%,#7f8bc4 80%,#3b4580);box-shadow:0 0 80px 20px rgba(190,210,255,.5),0 0 160px 40px rgba(5,217,232,.3);animation:ngRvm 2.4s cubic-bezier(.2,.9,.2,1) forwards;pointer-events:none}
@keyframes ngRvm{to{transform:translate(-50%,0) scale(1);opacity:.9}}
.ng-rvq{position:relative;display:block;text-align:center;margin-top:6px;font:400 clamp(18px,4vw,26px) Lalezar,Vazirmatn,sans-serif;color:#cfeeff;text-shadow:0 0 18px #05d9e8;opacity:0;animation:ngQ 1s 1.6s forwards}
@keyframes ngQ{to{opacity:1}}
.ng-boot{position:relative;text-align:center;margin:10px 0 4px}.ng-boot b{display:block;font:700 15px monospace;color:#f7ef3a;text-shadow:2px 0 #ff2a6d,-2px 0 #05d9e8}.ng-boot span{font-size:13px;color:rgba(230,236,255,.8)}
.ng-dec{opacity:0;animation:ngDec .6s steps(6) forwards;animation-delay:calc(.9s + var(--i) * .16s)}
.has-moon .ng-dec{animation-delay:calc(2.6s + var(--i) * .16s)}
@keyframes ngDec{0%{opacity:0;filter:hue-rotate(90deg) blur(4px);transform:translateX(-10px) skewX(14deg)}50%{opacity:1;transform:translateX(6px) skewX(-8deg)}100%{opacity:1;filter:none;transform:none}}
/* ============ light mode, reduced motion, off-screen ============ */
html.lite .gm-pg,html.lite .gm-emb,html.lite .gm-mote,html.lite .gb-pages,html.lite .ng-rain,html.lite .nb-rain,html.lite .lm-shard,html.lite .lm-stars{display:none}
html.lite .gm-circ,html.lite .gm-wind i,html.lite .gm-ph,html.lite .ng-scan::after,html.lite .lm-moon,html.lite .gm-edge,html.lite .ng-edge{animation:none}
@media (prefers-reduced-motion:reduce){.gm *,.ng *,.gb-box *,.nb-box *{animation:none!important}}
@media (max-width:700px){.ng-ph::before,.ng-ph::after{display:none}}
/* ⚡ light: off-screen cards stop; small cards (lists, fans, collection grids) drop their heaviest layers */
.gm.pn-off *,.ng.pn-off *,.gm.pn-off,.ng.pn-off,.hx.pn-off *,.wt.pn-off *,.rc.pn-off *{animation-play-state:paused!important}
@container (max-width:150px){.gm-pg,.gm-emb,.gm-mote,.ng-rain,.ng-gl,.lm-shard,.lm-stars,.gm-sheen{display:none}.gm-circ{animation:none}.ng-ph::before,.ng-ph::after{display:none}}
/* 📱 phones: each card keeps only its signature move (cracks, wind, slash, the moon and wires, glitch); the decoration stands still */
@media (max-width:700px),(pointer:coarse){
  .gm-ph,.gm-circ,.gm-pg i,.gm-sheen,.gm-clock,.gm-blk,.ng-scan::after,.ng-rain i,.ng-holo,.lm-stars i,.lm-shard i,.lm-holo,.lm-moon,.ng-ret i,.gb-pages i,.nb-rain i,.gb-glow{animation:none!important}
  .gm-pg,.gm-sheen,.ng-rain,.lm-shard,.gm-emb i:nth-child(n+6),.gm-mote i:nth-child(n+5){display:none}
}