/* ══════════════════════════════════════════════════════════════
   شاشةُ الطرد — روليت الطرد والروليت المخفي (RouletteGame.koHtml)
   كلُّ المقاسات بوحدات الحاوية (.ko-over فيها container-type:size)،
   فتملأ المسرحَ كبيراً كان أو جوّالاً. والتوقيتُ كلّه على --t:
   صفرٌ في الطرد العاديّ، وفي المخفي بعد انقلاب العلم.
   ══════════════════════════════════════════════════════════════ */
.ko-over.rko-on{padding:0}
.ko-over:has(.rko.good){--ko-red:#2fbf71}
.ko-over:has(.rko.hid){--ko-red:#9a5cf0}

.rko{
  --t:0s;
  /* البطاقةُ بنسبة البنر 600/220 — العرضُ من الحاوية، والارتفاعُ منه */
  --cw:min(40cqw,86cqh);
  --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:3cqh;
  font-family:'Cairo','Tajawal',sans-serif;
  animation:rkoQuake .42s calc(var(--t) + .62s) both;
}
.rko.hid{--t:1.05s}
.rko.good{animation:none}

/* ── الكلمة ── */
.rko-word{display:grid;place-items:center;line-height:1}
.rko-word > span{
  grid-area:1/1;
  font-weight:900;font-size:clamp(30px,10.5cqh,120px);letter-spacing:-1px;
  background:linear-gradient(180deg,#fff 10%,#ffc2cb 55%,#ff4a64);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(255,40,70,.45));
  animation:rkoSlam .5s cubic-bezier(.2,1.5,.4,1) both;
  white-space:nowrap;
}
.rko.good .rko-word > span{background-image:linear-gradient(180deg,#fff 10%,#c8ffe0 55%,#35d884);
  filter:drop-shadow(0 6px 22px rgba(40,220,130,.45))}
.rko-w1{background-image:linear-gradient(180deg,#fff 10%,#e3d4ff 55%,#a878ff) !important;
  animation:rkoSlam .5s cubic-bezier(.2,1.5,.4,1) both, rkoFade .25s 1s forwards !important}
.rko.hid .rko-w2{animation:rkoSlam .5s cubic-bezier(.2,1.5,.4,1) calc(var(--t) + .5s) both}

/* ── الساحة: الطارد يميناً، الضربة، المطرود يساراً ── */
.rko-arena{display:flex;align-items:center;justify-content:center;gap:2.4cqw}

/* بطاقةٌ عريضةٌ كبطاقات شاشة الاختيار: الرقمُ فالصورةُ فالاسم في سطر،
   والبنرُ يملأها كلَّها بلا قصّ */
.rko-card{
  position:relative;flex:0 0 auto;
  width:var(--cw);aspect-ratio:600/220;
  border-radius:calc(var(--cw) * .045);overflow:hidden;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:calc(var(--cw) * .03);
  padding:0 calc(var(--cw) * .04);
  border:2px solid color-mix(in srgb,var(--pb-acc) 65%,transparent);
  background:linear-gradient(105deg,color-mix(in srgb,var(--pb-acc) 40%,#0c1b14),#08120d);
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;
  isolation:isolate;
}
.rko-bg{position:absolute;inset:0;z-index:-1}
.rko-card.has-banner .rko-bg{
  background-image:var(--own-img);background-size:cover;
  background-position:center var(--own-y,50%);
}
/* (٢٠٢٦/١٠/٠٧ المالك: «البنر يكون طالع كلّه وشوي مخفي») ستارٌ خفيف متساوٍ تقريباً فيبان البنر كاملاً —
   كان يثقل يميناً حتى ٠٫٧٨ فيختفي نصّ البنر خلف الاسم. والاسمُ يبقى مقروءاً بظلٍّ أقوى تحته */
.rko-card.has-banner .rko-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,9,24,.18),rgba(6,9,24,.26) 50%,rgba(6,9,24,.4));
}
.rko-card.has-banner .rko-nm,.rko-card.has-banner .rko-sub{
  text-shadow:0 2px 4px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.7)}
.rko-role{
  position:absolute;top:0;inset-inline-end:calc(var(--cw) * .05);
  padding:calc(var(--cw) * .008) calc(var(--cw) * .03);
  border-radius:0 0 10px 10px;
  font-weight:900;font-size:calc(var(--cw) * .034);color:#062a17;
  background:linear-gradient(90deg,#5fe39a,#e2dc8e);
}
.rko-out .rko-role{background:linear-gradient(90deg,#ff5d72,#ff9a6a);color:#2a0409}
.rko.good .rko-out .rko-role{background:linear-gradient(90deg,#5fe39a,#9ff0c4);color:#062a17}

.rko-num{
  flex:0 0 auto;
  min-width:calc(var(--cw) * .1);height:calc(var(--cw) * .1);padding:0 6px;
  display:grid;place-items:center;border-radius:calc(var(--cw) * .025);
  font-weight:900;font-size:calc(var(--cw) * .064);line-height:1;
  color:#0b1a12;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.rko-streak{
  position:absolute;bottom:calc(var(--cw) * .025);inset-inline-end:calc(var(--cw) * .05);
  padding:3px 10px;border-radius:999px;font-weight:900;font-size:calc(var(--cw) * .032);
  color:#2a1000;background:linear-gradient(90deg,#ffb347,#ff6a3d);
  box-shadow:0 0 18px rgba(255,120,50,.6);
  animation:rkoPop .4s .5s both;
}
.rko-face{position:relative;flex:0 0 auto;display:flex}
.rko-face .av.xl{
  width:calc(var(--cw) * .24) !important;height:calc(var(--cw) * .24) !important;
  font-size:calc(var(--cw) * .12) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pb-acc) 70%,#fff),0 10px 26px rgba(0,0,0,.45);
}
.rko-tx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;text-align:start}
.rko-nm{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:900;font-size:calc(var(--cw) * .085);line-height:1.2;color:#fff;
  text-shadow:0 2px 3px #000,0 4px 14px rgba(0,0,0,.8);
}
.rko-sub{font-style:normal;font-weight:700;font-size:calc(var(--cw) * .036);color:rgba(255,255,255,.82);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px #000}

/* ── الضربة ── */
.rko-hit{display:flex;flex-direction:column;align-items:center;gap:4px;
  animation:rkoPop .45s cubic-bezier(.2,1.6,.4,1) calc(var(--t) + .45s) both}
.rko-bolt{font-size:calc(var(--cw) * .1);line-height:1;filter:drop-shadow(0 0 22px rgba(255,200,60,.8))}
.rko-hit b{font-weight:900;font-size:calc(var(--cw) * .045);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}

/* الطارد يدخل من اليمين ثم يندفع نحو المطرود */
.rko-by{animation:rkoInR .42s cubic-bezier(.2,1.2,.4,1) .08s both, rkoLunge .36s ease-in-out calc(var(--t) + .4s)}
/* المطرود يدخل من اليسار، يهتزّ مع الضربة، ثم ينطفئ */
.rko-out{animation:rkoInL .42s cubic-bezier(.2,1.2,.4,1) .08s both,
  rkoShake .36s calc(var(--t) + .62s),
  rkoDie .7s calc(var(--t) + 1.55s) forwards}
.rko-out::after{
  content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
  animation:rkoFlash .3s calc(var(--t) + .62s)}
.rko.hid .rko-out{animation:rkoShake .36s calc(var(--t) + .62s), rkoDie .7s calc(var(--t) + 1.55s) forwards}
/* ينطفئ الوجهُ والبنر وحدهما — الختمُ والشريطُ الأحمر يبقيان زاهيين */
.rko-out:not(.rko.good *) :is(.rko-bg,.rko-face,.rko-tx,.rko-num){
  animation:rkoDim .7s calc(var(--t) + 1.55s) forwards}

/* شقوقٌ تظهر مع الضربة */
.rko-crack{position:absolute;inset:0;pointer-events:none}
.rko-crack i{
  position:absolute;left:70%;top:50%;height:2px;background:rgba(255,255,255,.85);
  box-shadow:0 0 6px rgba(255,255,255,.7);transform-origin:0 50%;
  width:0;animation:rkoCrack .22s calc(var(--t) + .64s) forwards;
}
.rko-crack i:nth-child(1){--r:-12deg;--w:42%}
.rko-crack i:nth-child(2){--r:165deg;--w:38%}
.rko-crack i:nth-child(3){--r:62deg;--w:30%}
.rko.good .rko-crack{display:none}

/* الختم */
.rko-stamp{
  position:absolute;top:50%;left:72%;z-index:2;
  padding:calc(var(--cw) * .004) calc(var(--cw) * .02);
  border:calc(var(--cw) * .008) solid #ff3b4f;border-radius:12px;
  color:#ff3b4f;background:rgba(40,0,6,.35);
  font-weight:900;font-size:calc(var(--cw) * .064);line-height:1.1;white-space:nowrap;
  text-shadow:0 0 14px rgba(255,59,79,.6);
  box-shadow:0 0 30px rgba(255,59,79,.35) inset;
  transform:translate(-50%,-50%) rotate(-14deg);
  animation:rkoStamp .32s cubic-bezier(.3,1.4,.5,1) calc(var(--t) + .74s) both;
}
.rko.good .rko-stamp{border-color:#35d884;color:#35d884;background:rgba(0,40,20,.35);
  text-shadow:0 0 14px rgba(53,216,132,.6);box-shadow:0 0 30px rgba(53,216,132,.35) inset}

/* الإرجاع: البطاقة تبدأ باهتةً ثم تعود لها ألوانها */
.rko.good .rko-out{animation:rkoInL .42s cubic-bezier(.2,1.2,.4,1) .08s both, rkoRevive .8s .6s both}
.rko.good .rko-out::after{background:#9dffc9}

/* ── حالاتٌ بلا طارد: سببُها في فقاعةٍ مكانه ── */
.rko-why{
  width:calc(var(--cw) * .5);min-height:var(--ch);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:16px;border-radius:22px;text-align:center;
  background:rgba(0,0,0,.32);border:1px dashed rgba(255,255,255,.28);
  animation:rkoInR .42s cubic-bezier(.2,1.2,.4,1) .08s both;
}
.rko-why-i{font-size:calc(var(--cw) * .09);line-height:1}
.rko-k-time .rko-why-i{animation:rkoTurn 1.2s ease-in-out .3s 2}
.rko-k-self .rko-why-i{animation:rkoFacepalm .6s .5s both}
.rko-why b{font-weight:800;font-size:calc(var(--cw) * .036);color:#fff}

/* ── المخفي: علمٌ مقلوبٌ ثم ينقلب ── */
.rko-flip{
  position:relative;width:var(--cw);aspect-ratio:600/220;flex:0 0 auto;
  transform-style:preserve-3d;
  animation:rkoFlip .75s cubic-bezier(.5,0,.3,1.2) .55s both;
}
.rko-front,.rko-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rko-back{
  transform:rotateY(180deg);
  border-radius:calc(var(--cw) * .045);overflow:hidden;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:calc(var(--cw) * .04);
  padding:0 calc(var(--cw) * .05);
  background:linear-gradient(105deg,#2a1a4a,#120a22);border:2px solid #a878ff88;
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 40px rgba(168,120,255,.35);
}
.rko-flag img{display:block;height:calc(var(--ch) * .66);width:auto;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.rko-femo{font-size:calc(var(--ch) * .5)}
.rko-back b{font-weight:900;font-size:calc(var(--cw) * .045);color:#e8dcff;text-align:center;padding:0 8px}

/* ── صفُّ الباقين ── */
.rko-strip{
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px;
  max-width:92%;padding:7px 14px;border-radius:999px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);
  animation:rkoUp .4s .3s both;
}
.rko-pip .av.sm{width:clamp(22px,5cqh,40px) !important;height:clamp(22px,5cqh,40px) !important;
  font-size:clamp(11px,2.4cqh,20px) !important}
.rko-pip{position:relative;display:inline-flex}
.rko-pip.gone{animation:rkoGone .6s calc(var(--t) + 1.3s) forwards}
.rko-pip.gone::after{
  content:"✕";position:absolute;inset:0;display:grid;place-items:center;
  color:#ff3b4f;font-weight:900;font-size:clamp(16px,4cqh,30px);opacity:0;
  animation:rkoShow .3s calc(var(--t) + 1.3s) forwards;
}
.rko-pip.back{animation:rkoBack .6s .9s both}
.rko-more{font-weight:800;color:#fff;font-size:13px}
.rko-strip em{font-style:normal;font-weight:700;color:rgba(255,255,255,.8);
  font-size:clamp(12px,2.6cqh,18px);margin-inline-start:8px}
.rko-strip em b{font-weight:900;color:#fff;font-size:1.3em}

/* ── الحركات ── */
@keyframes rkoSlam{from{opacity:0;transform:scale(1.9)}to{opacity:1;transform:none}}
@keyframes rkoFade{to{opacity:0}}
@keyframes rkoShow{to{opacity:1}}
@keyframes rkoInR{from{opacity:0;transform:translateX(12cqw) scale(.9)}to{opacity:1;transform:none}}
@keyframes rkoInL{from{opacity:0;transform:translateX(-12cqw) scale(.9)}to{opacity:1;transform:none}}
@keyframes rkoLunge{0%,100%{transform:none}55%{transform:translateX(-4.5cqw) rotate(-3deg) scale(1.04)}}
@keyframes rkoShake{0%,100%{transform:none}20%{transform:translateX(-14px) rotate(-4deg)}
  45%{transform:translateX(10px) rotate(3deg)}70%{transform:translateX(-5px)}}
@keyframes rkoDie{to{transform:translateY(1.4cqh) rotate(-3deg) scale(.96)}}
@keyframes rkoDim{to{filter:grayscale(1) brightness(.45)}}
@keyframes rkoFlash{0%{opacity:.85}100%{opacity:0}}
@keyframes rkoCrack{from{width:0;transform:rotate(var(--r))}to{width:var(--w);transform:rotate(var(--r))}}
@keyframes rkoStamp{from{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.6)}
  to{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
@keyframes rkoPop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:none}}
@keyframes rkoQuake{0%,100%{transform:none}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-3px)}75%{transform:translate(-3px,2px)}}
@keyframes rkoRevive{from{filter:grayscale(1) brightness(.5)}
  60%{filter:none;box-shadow:0 0 60px rgba(53,216,132,.8)}to{filter:none;box-shadow:0 0 34px rgba(53,216,132,.5)}}
@keyframes rkoFlip{from{transform:rotateY(180deg)}to{transform:rotateY(0)}}
@keyframes rkoUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rkoGone{to{filter:grayscale(1);opacity:.35;transform:scale(.8)}}
@keyframes rkoBack{0%{transform:scale(.4);filter:grayscale(1)}70%{transform:scale(1.3);filter:none}
  100%{transform:none;filter:drop-shadow(0 0 10px #35d884)}}
@keyframes rkoTurn{50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes rkoFacepalm{0%{transform:scale(.4) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}

/* المسرحُ الضيّق (الجوّال بالطول): البطاقتان فوق بعض والضربةُ بينهما */
@container (max-aspect-ratio: 5/4){
  .rko{--cw:min(86cqw,64cqh)}
  .rko-arena{flex-direction:column;gap:1.6cqh}
  .rko-hit{flex-direction:row;gap:10px}
  .rko-why{width:var(--cw);min-height:0;flex-direction:row;padding:10px 14px}
  .rko-by{animation:rkoInR .42s cubic-bezier(.2,1.2,.4,1) .08s both, rkoLungeV .36s ease-in-out calc(var(--t) + .4s)}
}
@keyframes rkoLungeV{0%,100%{transform:none}55%{transform:translateY(3cqh) scale(1.03)}}

@media (prefers-reduced-motion:reduce){
  .rko,.rko *{animation-duration:.01s !important;animation-delay:0s !important}
}