/* ══════════════════════════════════════════════════════════════
   شاشة الدرع — روليت الطرد والروليت المخفي (٢٠٢٦/١٠/٣١ المالك: «الدرع ما يبان… ليت له انميشن نفس الطرد»)
   نفس حاوية شاشة الطرد (#koOver) بس أصناف مستقلّة rsv- — شاشة الطرد rko نفسها ما انلمست.
   rsv-save: الدرع أنقذه (الصاعقة تضرب الدرع ⇒ ينكسر ⇒ «نجا!») · rsv-gain: الخانة الذهبيّة (الدرع ينزل على بطاقته)
   ══════════════════════════════════════════════════════════════ */
.ko-over.rsv-on{padding:0}
.rsv{
  --cw:min(36cqw,80cqh); --ch:calc(var(--cw) * .3667);
  position:relative;z-index:1;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.2cqh;
  font-family:'Cairo','Tajawal',sans-serif;overflow:hidden;
}
/* أشعّة ذهبيّة تدور ورا */
.rsv::before{content:'';position:absolute;inset:-40%;z-index:-1;
  background:repeating-conic-gradient(from 0deg,rgba(255,206,84,.13) 0 9deg,transparent 9deg 22deg);
  animation:rsvSpin 14s linear infinite, rsvIn .5s both}
.rsv::after{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 50% 52%,rgba(28,48,120,.94),rgba(6,10,30,.98) 65%)}
@keyframes rsvSpin{to{transform:rotate(360deg)}}
@keyframes rsvIn{from{opacity:0}to{opacity:1}}

/* الكلمة */
.rsv-word{font-weight:900;font-size:clamp(30px,10cqh,116px);line-height:1;letter-spacing:-1px;white-space:nowrap;
  background:linear-gradient(180deg,#fff 8%,#ffe9a6 50%,#ffb21f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(255,180,30,.5));animation:rsvSlam .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes rsvSlam{0%{transform:scale(2.4);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}

/* الساحة: المهاجم ⇐ الصاعقة ⇐ الدرع + المنقَذ */
.rsv-arena{display:flex;align-items:center;justify-content:center;gap:3cqw;width:100%}
.rsv-card{position:relative;width:var(--cw);height:var(--ch);border-radius:calc(var(--ch) * .16);overflow:hidden;flex:none;
  background:linear-gradient(135deg,#1c2a55,#0c1430);box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 3px rgba(255,255,255,.12) inset;
  display:flex;align-items:center;gap:calc(var(--ch) * .12);padding:0 calc(var(--ch) * .16);color:#fff}
.rsv-card .rsv-bg{position:absolute;inset:0}
.rsv-card.has-banner .rsv-bg{background-image:var(--own-img);background-size:cover;background-position:center var(--own-y,50%)}
.rsv-card.has-banner .rsv-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,30,.15),rgba(8,12,30,.55))}
.rsv-face{position:relative;flex:none}
.rsv-face .av{width:calc(var(--ch) * .62) !important;height:calc(var(--ch) * .62) !important;font-size:calc(var(--ch) * .3) !important}
.rsv-tx{position:relative;display:flex;flex-direction:column;min-width:0}
.rsv-nm{font-weight:900;font-size:calc(var(--ch) * .2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.rsv-role{font-weight:800;font-size:calc(var(--ch) * .12);opacity:.9;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.rsv-num{position:absolute;top:calc(var(--ch) * .06);inset-inline-end:calc(var(--ch) * .08);font:900 calc(var(--ch) * .2)/1 'Oswald','Cairo',sans-serif;
  padding:2px 10px;border-radius:10px;background:rgba(0,0,0,.55)}

.rsv-by{animation:rsvFromA .45s .1s cubic-bezier(.2,1.2,.4,1) both;opacity:.82}
.rsv-me{animation:rsvFromB .45s .1s cubic-bezier(.2,1.2,.4,1) both}
@keyframes rsvFromA{from{transform:translateX(40%);opacity:0}}
@keyframes rsvFromB{from{transform:translateX(-40%);opacity:0}}

/* الصاعقة بالنصّ: تطير لجهة المنقَذ (RTL ⇒ يسار) وتختفي لمّا تضرب الدرع */
.rsv-bolt{position:relative;flex:none;width:calc(var(--ch) * .7);height:calc(var(--ch) * .7);color:#ff5a6e;
  filter:drop-shadow(0 0 14px rgba(255,70,90,.9));animation:rsvBolt .65s .45s cubic-bezier(.5,0,.9,.4) both}
.rsv-bolt svg{width:100%;height:100%}
@keyframes rsvBolt{0%{transform:translateX(60%) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateX(-110%) scale(1.15);opacity:0}}

/* الدرع قدّام بطاقة المنقَذ */
.rsv-shwrap{position:relative}
.rsv-shield{position:absolute;z-index:3;top:50%;inset-inline-end:calc(var(--ch) * -.42);width:calc(var(--ch) * 1.25);height:calc(var(--ch) * 1.25);
  transform:translateY(-50%);color:#ffd34d;filter:drop-shadow(0 0 26px rgba(255,200,60,.85))}
.rsv-shield svg{width:100%;height:100%;overflow:visible}
.rsv-shield .sh-body{animation:rsvShIn .4s .45s cubic-bezier(.2,1.6,.4,1) both, rsvShHit .35s .98s both, rsvShGone .25s 1.75s forwards}
.rsv-shield .sh-crack{stroke:#5a3a00;stroke-width:.7;fill:none;stroke-linecap:round;stroke-dasharray:30;stroke-dashoffset:30;animation:rsvCrack .3s 1.25s forwards, rsvShGone .25s 1.75s forwards}
.rsv-shield .sh-ring{position:absolute;inset:-20%;border-radius:50%;border:4px solid #fff3c4;opacity:0;animation:rsvRing .5s 1s ease-out both}
@keyframes rsvShIn{from{transform:scale(0) rotate(-25deg);opacity:0}}
@keyframes rsvShHit{0%,100%{transform:translateX(0)}30%{transform:translateX(-8%) rotate(-6deg)}60%{transform:translateX(5%) rotate(4deg)}}
@keyframes rsvShGone{to{opacity:0;transform:scale(1.15)}}
@keyframes rsvCrack{to{stroke-dashoffset:0}}
@keyframes rsvRing{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
/* شظايا الدرع */
.rsv-shard{position:absolute;z-index:4;top:50%;inset-inline-end:0;width:calc(var(--ch) * .28);height:calc(var(--ch) * .28);
  background:linear-gradient(135deg,#fff3b0,#ffb21f);clip-path:polygon(50% 0,100% 70%,20% 100%);opacity:0;
  animation:rsvShard .8s 1.72s cubic-bezier(.2,.7,.4,1) forwards}
.rsv-shard:nth-child(1){--x:-120%;--y:-160%;--r:200deg}
.rsv-shard:nth-child(2){--x:-180%;--y:60%;--r:-160deg}
.rsv-shard:nth-child(3){--x:60%;--y:-190%;--r:120deg}
.rsv-shard:nth-child(4){--x:90%;--y:140%;--r:-230deg}
.rsv-shard:nth-child(5){--x:-40%;--y:200%;--r:300deg}
@keyframes rsvShard{0%{opacity:1;transform:translate(0,-50%) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.5)}}

/* ختم «نجا!» ووهج البطاقة */
.rsv-me{box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 3px rgba(255,255,255,.12) inset}
.rsv-save .rsv-me{animation:rsvFromB .45s .1s cubic-bezier(.2,1.2,.4,1) both, rsvGlow 1.2s 1.8s ease-out both}
@keyframes rsvGlow{0%{box-shadow:0 0 0 4px #ffd34d,0 0 60px 10px rgba(255,200,60,.8)}100%{box-shadow:0 0 0 3px #ffd34d,0 0 24px 2px rgba(255,200,60,.45)}}
.rsv-stamp{position:absolute;z-index:5;top:50%;left:50%;padding:.15em .55em;border:.12em solid #ffd34d;border-radius:.3em;
  font:900 calc(var(--ch) * .34)/1 'Cairo','Tajawal',sans-serif;color:#ffd34d;background:rgba(10,16,40,.55);text-shadow:0 2px 10px rgba(0,0,0,.7);
  transform:translate(-50%,-50%) rotate(-10deg);opacity:0;left:24%;animation:rsvStamp .4s 1.85s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes rsvStamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(2.2)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}}

.rsv-note{display:flex;align-items:center;gap:.5em;padding:.5em 1.1em;border-radius:99px;background:rgba(0,0,0,.45);border:1.5px solid rgba(255,211,77,.45);
  color:#fff;font-weight:900;font-size:clamp(15px,3.4cqh,34px);opacity:0;animation:rsvIn .4s 2.1s forwards}
.rsv-note svg{width:1.2em;height:1.2em;color:#ffd34d}
.rsv-gain .rsv-note{animation-delay:1.1s}

/* الخانة الذهبيّة: الدرع ينزل من فوق ويستقرّ جنب البطاقة */
.rsv-gain .rsv-word{font-size:clamp(28px,9cqh,100px)}
.rsv-gain .rsv-shield .sh-body{animation:rsvDrop .6s .35s cubic-bezier(.2,1.4,.4,1) both, rsvPulse 1.2s 1s ease-in-out infinite}
.rsv-gain .rsv-shield .sh-ring{animation:rsvRing .6s .9s ease-out both}
@keyframes rsvDrop{from{transform:translateY(-220%) scale(.6) rotate(20deg);opacity:0}}
@keyframes rsvPulse{50%{transform:scale(1.08)}}
.rsv-gain .rsv-me{animation:rsvFromB .45s .05s cubic-bezier(.2,1.2,.4,1) both, rsvGlow 1.2s .9s ease-out both}

@container (max-aspect-ratio:1/1){
  .rsv{--cw:min(84cqw,60cqh)}
  .rsv-arena{flex-direction:column;gap:2cqh}
  .rsv-bolt{transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){.rsv::before{animation:none}}
.rsv-gain .rsv-shield .sh-crack{display:none}   /* الخانة الذهبيّة: الدرع جديد سليم */