/* 🎨 «استایل رینگ»: arena skins and entrance animations (used by the ring and by the shop's live previews) */
.rsk{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.rsk-scene,.rsk-fx,.rsk-fx i{position:absolute}
.rsk-scene{inset:0}
.rsk-fx{inset:0}

/* ---------- 🌸 معبد ساکورا ---------- */
.rsk-sakura{background:linear-gradient(180deg,#1b0b2e 0%,#4a1748 34%,#c2486e 62%,#ffb08a 78%,#2a0f24 79%,#14081a 100%)}
.rsk-sakura .rsk-scene::before{content:"";position:absolute;left:50%;top:44%;width:46%;max-width:340px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#fff3e6 0 38%,#ffd2b8 52%,rgba(255,170,150,.0) 70%);opacity:.85;filter:blur(1px)}
/* the torii gate */
.rsk-sakura .rsk-scene::after{content:"";position:absolute;left:50%;bottom:21%;width:72%;max-width:460px;height:42%;transform:translateX(-50%);
  background:
    linear-gradient(#b0132b,#7a0d1f) 12% 0/8% 100% no-repeat,
    linear-gradient(#b0132b,#7a0d1f) 88% 0/8% 100% no-repeat,
    linear-gradient(#c8173a,#8a0f24) 50% 4%/100% 9% no-repeat,
    linear-gradient(#a3122a,#6e0b1c) 50% 22%/86% 6% no-repeat,
    linear-gradient(#2a0f24,#2a0f24) 50% 0/112% 4% no-repeat;
  filter:drop-shadow(0 0 30px rgba(255,120,150,.35));opacity:.9}
.rsk-sakura .rsk-fx i{top:-6%;width:12px;height:9px;border-radius:12px 0 12px 0;background:linear-gradient(135deg,#ffe2ea,#ff9fbf);opacity:.9;animation:rskPetal var(--t,9s) linear var(--d,0s) infinite}
@keyframes rskPetal{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(30px,28vh) rotate(160deg)}50%{transform:translate(-20px,56vh) rotate(320deg)}100%{transform:translate(40px,112vh) rotate(640deg)}}

/* ---------- 🌃 شهر نئون ---------- */
.rsk-neon{background:linear-gradient(180deg,#05010f 0%,#12042b 40%,#3a0a5e 58%,#0b0418 59%,#05010f 100%)}
.rsk-neon .rsk-scene::before{content:"";position:absolute;left:-5%;right:-5%;bottom:41%;height:34%;
  background:
    linear-gradient(#0b0418,#0b0418) 2% 100%/7% 62% no-repeat,linear-gradient(#0e0520,#0e0520) 10% 100%/9% 88% no-repeat,
    linear-gradient(#0b0418,#0b0418) 20% 100%/6% 54% no-repeat,linear-gradient(#10062a,#10062a) 27% 100%/10% 100% no-repeat,
    linear-gradient(#0b0418,#0b0418) 38% 100%/7% 70% no-repeat,linear-gradient(#0e0520,#0e0520) 46% 100%/8% 46% no-repeat,
    linear-gradient(#10062a,#10062a) 55% 100%/9% 92% no-repeat,linear-gradient(#0b0418,#0b0418) 65% 100%/6% 60% no-repeat,
    linear-gradient(#0e0520,#0e0520) 72% 100%/11% 78% no-repeat,linear-gradient(#0b0418,#0b0418) 84% 100%/7% 52% no-repeat,
    linear-gradient(#10062a,#10062a) 92% 100%/9% 84% no-repeat;
  filter:drop-shadow(0 -2px 0 rgba(255,60,200,.55)) drop-shadow(0 0 18px rgba(130,60,255,.5))}
/* windows + signs */
.rsk-neon .rsk-scene::after{content:"";position:absolute;left:0;right:0;bottom:44%;height:26%;opacity:.8;
  background:radial-gradient(circle,#ff3fd0 0 1.5px,transparent 2px) 0 0/22px 18px,radial-gradient(circle,#36e8ff 0 1.5px,transparent 2px) 11px 9px/26px 22px;
  -webkit-mask:linear-gradient(90deg,#000 0 9%,transparent 9% 27%,#000 27% 37%,transparent 37% 55%,#000 55% 64%,transparent 64% 72%,#000 72% 83%,transparent 83% 92%,#000 92%);mask:linear-gradient(90deg,#000 0 9%,transparent 9% 27%,#000 27% 37%,transparent 37% 55%,#000 55% 64%,transparent 64% 72%,#000 72% 83%,transparent 83% 92%,#000 92%);
  animation:rskBlink 3.2s steps(2) infinite}
@keyframes rskBlink{50%{opacity:.55}}
/* the grid floor */
.rsk-neon .rsk-fx{top:59%;bottom:-40%;left:-50%;right:-50%;transform:perspective(320px) rotateX(62deg);transform-origin:50% 0;
  background:linear-gradient(transparent 0 92%,rgba(255,63,208,.9) 92%) 0 0/100% 36px,linear-gradient(90deg,transparent 0 96%,rgba(54,232,255,.8) 96%) 0 0/48px 100%;
  animation:rskGrid 1.6s linear infinite;-webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}
@keyframes rskGrid{to{background-position:0 36px,0 0}}
.rsk-neon::after{content:"";position:absolute;left:0;right:0;top:58.5%;height:2px;background:#ff3fd0;box-shadow:0 0 14px #ff3fd0,0 0 40px #8a2bff}

/* ---------- 🌕 ماه سرخ ---------- */
.rsk-bloodmoon{background:radial-gradient(ellipse 80% 60% at 50% 30%,#3a0508 0%,#16020a 55%,#070107 100%)}
.rsk-bloodmoon .rsk-scene::before{content:"";position:absolute;left:50%;top:30%;width:62%;max-width:420px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#ff6a4a 0,#d4161f 32%,#7a0610 70%,#3d0308 100%);
  box-shadow:0 0 60px 10px rgba(220,20,40,.55),0 0 160px 40px rgba(160,10,30,.35);animation:rskMoon 7s ease-in-out infinite alternate}
@keyframes rskMoon{to{box-shadow:0 0 80px 18px rgba(240,30,50,.65),0 0 200px 60px rgba(160,10,30,.4)}}
.rsk-bloodmoon .rsk-scene::after{content:"";position:absolute;left:-20%;right:-20%;top:18%;height:30%;
  background:radial-gradient(ellipse 30% 40% at 20% 50%,rgba(10,0,4,.9),transparent 70%),radial-gradient(ellipse 35% 35% at 70% 60%,rgba(10,0,4,.85),transparent 70%),radial-gradient(ellipse 25% 30% at 45% 30%,rgba(20,0,6,.8),transparent 70%);
  animation:rskCloud 26s linear infinite alternate}
@keyframes rskCloud{to{transform:translateX(12%)}}
.rsk-bloodmoon .rsk-fx i{top:-10%;width:1.5px;height:46px;background:linear-gradient(transparent,rgba(255,80,90,.7));animation:rskRain var(--t,1.1s) linear var(--d,0s) infinite}
@keyframes rskRain{to{transform:translate(-40px,115vh)}}

/* ---------- 🌋 قلب آتشفشان ---------- */
.rsk-volcano{background:linear-gradient(180deg,#0d0505 0%,#2a0a05 46%,#5c1606 70%,#ff5a12 86%,#ffb347 100%)}
.rsk-volcano .rsk-scene::before{content:"";position:absolute;left:-10%;right:-10%;bottom:12%;height:52%;background:linear-gradient(#170604,#0a0302);
  clip-path:polygon(0 100%,0 62%,14% 48%,26% 58%,38% 22%,44% 8%,48% 12%,52% 6%,58% 24%,70% 50%,82% 40%,100% 64%,100% 100%)}
.rsk-volcano .rsk-scene::after{content:"";position:absolute;left:43%;width:14%;bottom:47%;height:24%;background:linear-gradient(transparent,rgba(255,110,20,.75));filter:blur(10px);animation:rskPlume 2.6s ease-in-out infinite alternate}
@keyframes rskPlume{to{opacity:.55;transform:scaleY(1.2)}}
.rsk-volcano .rsk-fx i{bottom:-4%;width:4px;height:4px;border-radius:50%;background:#ffd36b;box-shadow:0 0 8px #ff7a1a,0 0 2px #fff;animation:rskEmber var(--t,4s) ease-out var(--d,0s) infinite}
@keyframes rskEmber{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--x,20px),-80vh)}}
.rsk-volcano::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(90deg,#ff3d00,#ffb347,#ff6a00,#ffd36b,#ff3d00);background-size:200% 100%;filter:blur(6px);opacity:.75;animation:rskLava 6s linear infinite}
@keyframes rskLava{to{background-position:200% 0}}

/* in the arena the skin sits behind everything and the stock lights step aside */
.ar.skinned .ar-lights{display:none}
.ar.skinned .ar-ropes i{opacity:.75}

/* ---------- entrances ---------- */
.ent-fx{position:absolute;inset:0;pointer-events:none;z-index:4}
/* ⚡ صاعقه */
.ent-thunder .ft-card{animation:entDrop .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes entDrop{0%{transform:translateY(-120%) scale(.8);opacity:0}55%{opacity:1}100%{transform:none}}
.ent-thunder .ent-fx::before{content:"";position:absolute;left:50%;top:-140%;width:46%;height:240%;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,#fff 40%,#9fe6ff 60%,transparent);clip-path:polygon(50% 0,62% 34%,54% 36%,70% 70%,58% 71%,66% 100%,38% 58%,50% 56%,32% 30%,44% 29%);
  filter:drop-shadow(0 0 10px #7fd8ff) drop-shadow(0 0 30px #3aa8ff);opacity:0;animation:entBolt .7s ease-out .05s both}
@keyframes entBolt{0%,100%{opacity:0}10%,30%{opacity:1}20%{opacity:.3}}
.ent-thunder .ent-fx::after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle,rgba(200,240,255,.95),rgba(80,180,255,.25) 40%,transparent 65%);opacity:0;animation:entFlash .55s ease-out .25s both}
@keyframes entFlash{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
.ent-thunder .ft-card{box-shadow:0 0 0 2px var(--rc),0 0 30px rgba(120,210,255,.6)}
/* 🔥 شعله */
.ent-inferno .ft-card{animation:entRise .8s cubic-bezier(.2,1.3,.4,1) .15s both}
@keyframes entRise{0%{transform:translateY(40%) scale(.85);opacity:0;filter:brightness(2.5) sepia(1) hue-rotate(-20deg)}60%{opacity:1}100%{transform:none;filter:none}}
.ent-inferno .ent-fx{overflow:visible}
.ent-inferno .ent-fx::before{content:"";position:absolute;left:-15%;right:-15%;bottom:-12%;height:85%;
  background:radial-gradient(ellipse 22% 60% at 20% 100%,#ffd36b,#ff6a00 45%,transparent 70%),radial-gradient(ellipse 26% 80% at 50% 100%,#fff2b0,#ff8a00 40%,#ff2d00 60%,transparent 75%),radial-gradient(ellipse 22% 65% at 80% 100%,#ffd36b,#ff5400 45%,transparent 70%);
  filter:blur(3px);transform-origin:50% 100%;opacity:0;animation:entFlame 1.1s ease-out both}
@keyframes entFlame{0%{opacity:0;transform:scaleY(.2)}25%{opacity:1;transform:scaleY(1.15)}60%{opacity:.9;transform:scaleY(.9)}100%{opacity:0;transform:scaleY(.5)}}
.ent-inferno .ft-card{box-shadow:0 0 0 2px var(--rc),0 0 30px rgba(255,120,30,.55)}

/* light mode: still beautiful, just still — no falling petals, rain, embers, moving grid or blinking */
html.lite .rsk-fx i{display:none}
html.lite .rsk-neon .rsk-fx,html.lite .rsk-neon .rsk-scene::after,html.lite .rsk-bloodmoon .rsk-scene::before,html.lite .rsk-bloodmoon .rsk-scene::after,html.lite .rsk-volcano .rsk-scene::after,html.lite .rsk-volcano::after{animation:none}
html.lite .rsk-neon .rsk-scene::before,html.lite .rsk-sakura .rsk-scene::after,html.lite .ent-thunder .ent-fx::before,html.lite .ent-inferno .ent-fx::before{filter:none}
@media (prefers-reduced-motion:reduce){.rsk-fx i{display:none}.rsk *,.rsk::after{animation:none!important}}
.ar.skinned>.ar-top,.ar.skinned>.ar-call,.ar.skinned>.ar-ring,.ar.skinned>.ar-why,.ar.skinned>.ar-ctl{position:relative;z-index:1}
.ar.skinned .rsk::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(5,4,11,.55),transparent 22%,transparent 70%,rgba(5,4,11,.7))}
.ar.skinned .ar-skip{background:rgba(10,8,20,.78);color:#e8e6f5}
.ar.skinned .ar-why{backdrop-filter:none}