/* ═══ ملك الحلبة (ring.js) — حلبة مصارعة بالليل تحت الأضواء ═══ */
.rg{position:relative;overflow:hidden;font-weight:800;
  background:radial-gradient(ellipse at 50% 38%,#3a1220 0%,#1a0a14 48%,#08060c 100%)}
.rg .xg-chip{background:linear-gradient(160deg,#3b1424,#1c0b14);border:2px solid rgba(255,120,80,.45)}
.rg .xg-title b{color:#fff;text-shadow:0 .4cqh 0 #7a1020,0 0 3cqh rgba(255,90,60,.55);letter-spacing:.02em}
.rg .xg-title small{color:#ffd2b8}

.rg-arena{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* كشّافات تتمرجح فوق الحلبة */
.rg-lights{position:absolute;inset:0;pointer-events:none}
.rg-lights i{position:absolute;top:-10%;width:30%;height:120%;opacity:.22;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(255,240,200,.9),transparent 75%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);animation:rgSwing 6s ease-in-out infinite alternate}
.rg-lights i:first-child{left:12%;--r:-14deg}
.rg-lights i:last-child{right:12%;--r:14deg;animation-delay:-3s}
@keyframes rgSwing{from{transform:rotate(var(--r))}to{transform:rotate(calc(var(--r) * -.4))}}

/* الحلبة: أرضيّة بمنظور + حبال + أعمدة بالزوايا */
.rg-ring{position:relative;width:min(96cqw,170cqh);height:62cqh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2cqw;padding:0 5cqw}
.rg-mat{position:absolute;left:4%;right:4%;bottom:-4cqh;height:44cqh;border-radius:1cqh;
  background:linear-gradient(180deg,#2f4f8a,#1d3260);border:.6cqh solid #e8eef8;
  transform:perspective(60cqh) rotateX(46deg);transform-origin:50% 100%;box-shadow:0 3cqh 6cqh rgba(0,0,0,.6),inset 0 0 6cqh rgba(0,0,0,.45)}
.rg-mat span{position:absolute;inset:0;display:grid;place-items:center;font-size:9cqh;font-weight:900;color:rgba(255,255,255,.12);letter-spacing:.1em}
.rg-ropes{position:absolute;left:3%;right:3%;top:16%;height:52%;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:3}
.rg-ropes i{display:block;height:.9cqh;border-radius:99px;box-shadow:0 .4cqh .8cqh rgba(0,0,0,.5)}
.rg-ropes i:nth-child(1){background:linear-gradient(90deg,#e0303f,#ff6b6b,#e0303f)}
.rg-ropes i:nth-child(2){background:linear-gradient(90deg,#f2f2f2,#ffffff,#f2f2f2)}
.rg-ropes i:nth-child(3){background:linear-gradient(90deg,#2f6bff,#6aa0ff,#2f6bff)}
.rg-post{position:absolute;top:12%;bottom:6%;width:2.2cqh;border-radius:1cqh;z-index:4;box-shadow:0 1cqh 2cqh rgba(0,0,0,.5)}
.rg-post.p1{right:1.5%;background:linear-gradient(90deg,#8a1020,#e0303f,#8a1020)}
.rg-post.p2{left:1.5%;background:linear-gradient(90deg,#163a8a,#2f6bff,#163a8a)}

/* المقاتل */
.rg-f{position:relative;z-index:5;justify-self:center;width:min(30cqw,52cqh);padding:2.4cqh 1.6cqw 2cqh;border-radius:2.4cqh;text-align:center;
  background:linear-gradient(180deg,rgba(20,10,20,.94),rgba(10,6,14,.97));border:.5cqh solid var(--fc);box-shadow:0 0 0 .3cqh rgba(0,0,0,.4),0 2cqh 5cqh rgba(0,0,0,.55),0 0 4cqh color-mix(in srgb,var(--fc) 40%,transparent);
  transition:transform .25s,opacity .3s}
.rg-f.has-ban{background:linear-gradient(180deg,rgba(10,6,14,.45),rgba(10,6,14,.88) 70%),var(--fban) var(--fpos,center)/cover no-repeat}
.rg-a{--fc:#ff4a4a}
.rg-b{--fc:#4a8cff}
.rg-glove{position:absolute;top:-4.4cqh;font-size:7cqh;filter:drop-shadow(0 .6cqh .6cqh rgba(0,0,0,.5))}
.rg-a .rg-glove{left:-2cqh;transform:scaleX(-1) rotate(-20deg)}
.rg-b .rg-glove{right:-2cqh;transform:rotate(-20deg)}
.rg-av{position:relative;display:inline-block}
.rg-av .av{width:max(64px,16cqh)!important;height:max(64px,16cqh)!important;font-size:max(30px,8cqh)!important}
.rg-crown{position:absolute;top:-4.6cqh;left:50%;transform:translateX(-50%);font-style:normal;font-size:4.4cqh;display:flex;align-items:center;gap:.2em}
.rg-crown b{font-size:2.6cqh;color:#ffd24a;background:#2a1a00;border-radius:99px;padding:0 .4em}
.rg-nm{display:block;margin-top:1cqh;font-size:max(18px,3.8cqh);font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 .3cqh .6cqh #000}
.rg-taps{margin-top:.8cqh;display:flex;align-items:baseline;justify-content:center;gap:.6cqw}
.rg-taps b{font-size:max(28px,8cqh);font-weight:900;line-height:1;color:var(--fc);text-shadow:0 0 2cqh color-mix(in srgb,var(--fc) 60%,transparent),0 .4cqh 0 #000}
.rg-taps small{font-size:max(14px,2.4cqh);color:#ffe2d0}

/* اللكمات */
.rg-f.punch{animation:rgPunch .18s ease-out}
.rg-a.punch{--dx:-2.4cqw}.rg-b.punch{--dx:2.4cqw}   /* RTL: الأحمر يمين ⇒ يلكم لليسار */
@keyframes rgPunch{50%{transform:translateX(var(--dx)) scale(1.04)}}
.rg-f.hurt{animation:rgHurt .22s ease-out}
.rg-a.hurt{--hx:1.4cqw}.rg-b.hurt{--hx:-1.4cqw}
@keyframes rgHurt{40%{transform:translateX(var(--hx)) rotate(calc(var(--hx) * .2deg));filter:brightness(1.6) saturate(.6)}}
.rg-pow{position:absolute;left:var(--x);top:var(--y);font-style:normal;font-size:7cqh;pointer-events:none;z-index:6;animation:rgPow .6s ease-out forwards}
@keyframes rgPow{0%{transform:scale(.3) rotate(-15deg);opacity:0}25%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(1) translateY(-4cqh);opacity:0}}

/* المنتصف: VS + شريط القوّة + النداء */
.rg-vs{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:1.4cqh;width:22cqw}
.rg-vs>b{font-size:9cqh;font-weight:900;font-style:italic;color:#ffd24a;text-shadow:0 .6cqh 0 #7a3a00,0 0 3cqh rgba(255,200,60,.6)}
.rg-bar{position:relative;width:100%;height:3.2cqh;border-radius:99px;overflow:hidden;background:#4a8cff;border:.4cqh solid #fff;box-shadow:0 .6cqh 1.4cqh rgba(0,0,0,.5)}
.rg-bar i{position:absolute;inset:0 auto 0 0;width:var(--p,50%);background:linear-gradient(90deg,#c21f2f,#ff5a5a);transition:width .18s;border-inline-end:.4cqh solid #fff}
[dir=rtl] .rg-bar i{inset:0 0 0 auto}
.rg-call{min-height:6cqh;font-size:max(20px,5.4cqh);font-weight:900;color:#fff;text-shadow:0 .4cqh 0 #000,0 0 2cqh rgba(255,120,60,.7);white-space:nowrap}
.rg-call.pop{animation:rgCall .5s cubic-bezier(.2,1.6,.4,1)}
.rg-call.go{color:#ffd24a}
@keyframes rgCall{from{transform:scale(2.2);opacity:0}}

/* النهاية: الفايز يلمع والخسران يطير برّا */
.rg-f.won{transform:scale(1.08);box-shadow:0 0 0 .5cqh #ffd24a,0 0 6cqh rgba(255,210,74,.7)}
.rg-f.ko{animation:rgFly 1.1s cubic-bezier(.3,.6,.4,1) forwards}
.rg-a.ko{--fx:30cqw}.rg-b.ko{--fx:-30cqw}
@keyframes rgFly{30%{transform:translate(calc(var(--fx) * .25),-6cqh) rotate(calc(var(--fx) * .3deg))}100%{transform:translate(var(--fx),24cqh) rotate(calc(var(--fx) * 2deg));opacity:0}}
.rg-ko{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:12cqh;font-weight:900;color:#ffd24a;text-shadow:0 .8cqh 0 #7a0010,0 0 3cqh #ff3a3a;transform:rotate(-12deg)}
.rg.shake{animation:rgShake .45s}
@keyframes rgShake{20%,60%{transform:translate(.8cqw,-.6cqh)}40%,80%{transform:translate(-.8cqw,.6cqh)}}

/* الجمهور (صفّ رؤوس داكنة) */
.rg-crowd{position:absolute;left:0;right:0;bottom:0;height:9cqh;pointer-events:none;opacity:.85;
  background:radial-gradient(circle at 4cqh 9cqh,#140a12 3.4cqh,transparent 3.5cqh) 0 0/8cqh 9cqh repeat-x,
             radial-gradient(circle at 4cqh 10cqh,#0c060b 3.8cqh,transparent 3.9cqh) 4cqh 1cqh/8cqh 9cqh repeat-x}
.rg.live .rg-crowd{animation:rgCrowd .5s ease-in-out infinite alternate}
@keyframes rgCrowd{to{transform:translateY(-.8cqh)}}

/* الدور الجاي */
.rg-next{flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1cqw;min-height:6cqh;font-size:max(14px,2.4cqh);color:#ffd2b8}
.rg-next em{font-style:normal;display:inline-flex;align-items:center;gap:.5cqw;padding:.4cqh 1cqw .4cqh .4cqw;border-radius:99px;background:rgba(255,255,255,.08);color:#fff}
.rg-next em b{max-width:12cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* طولي (جوال/آيباد عمودي): المقاتلين فوق بعض */
@container (max-aspect-ratio:1/1){
  .rg-ring{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;height:70cqh;gap:1cqh}
  .rg-f{width:min(80cqw,46cqh);padding:1.4cqh 2cqw}
  .rg-av .av{width:max(52px,11cqh)!important;height:max(52px,11cqh)!important;font-size:max(24px,5.4cqh)!important}
  .rg-vs{width:70cqw}
  .rg-mat,.rg-post,.rg-lights{display:none}
}
@media (prefers-reduced-motion:reduce){.rg-lights i,.rg.live .rg-crowd{animation:none}}