/* ════════════════════════════════════════════════════════════════════════
   result.css — لوحة النتيجة النهائيّة في سين جيم «المنصّة» (المرحلة 2، 2026-10-20، اختيار المالك من ثلاثة اتّجاهات)
   الشاشة العريضة: عمودان بلا تمرير (الفائز والمنصّتان والعرض والأزرار | رسم «من أين جاءت النقاط؟»)، والجوّال عمودٌ واحد.
   الحالة النهائيّة هي الأساس، والحركة keyframes «من» تحت ‎.rb-play‎ (دخول الشاشة وحده)؛ قاعدة تقليل الحركة القائمة
   في seenjeem.css/play.css (animation:none!important) تُظهر النهاية فوراً، والقصاصات شفّافةٌ أصلاً فلا تظهر.
   لونا الفريقين في الرسم مُتحقَّق منهما بأداة dataviz على سطحَي النهار والليل (فصل عمى الألوان 6.8/7.4 — مقبولٌ مع
   الترميز الثاني القائم: جهة كلّ فريق، والأسماء في المفتاح، والقيمة مكتوبةً عند طرف كلّ عمود).
   ════════════════════════════════════════════════════════════════════════ */

#result-card.rb {
  --rb-t1: #2a8560; --rb-t2: #c0573f;
  --rb-gold-hi: #f3dc98; --rb-gold-lo: #c39434;
  --rb-glow: #e9c97a66;
  position: relative; width: 100%; max-width: 1380px; margin: 0 auto;
  min-height: calc(100dvh - var(--hdr, 60px));
  padding: 18px clamp(16px, 3vw, 40px) 20px;
  display: grid; grid-template-columns: minmax(330px, .82fr) minmax(0, 1.25fr); gap: clamp(18px, 2.6vw, 40px); align-items: center;
  overflow: hidden; box-sizing: border-box; text-align: start; color: var(--ink);
}
:root.dark #result-card.rb {
  --rb-t1: #35a07a; --rb-t2: #d86a52;
  --rb-gold-hi: #f6e1a6; --rb-gold-lo: #b88a2e;
  --rb-glow: #d6b15a33;
}
.rb *, .rb *::before, .rb *::after { box-sizing: border-box; }
:where(.rb) :where(h2, h3, p) { margin: 0; } /* بلا تخصيص — قواعد العناصر أدناه تعلوها */
.rb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── الفائز والمنصّتان ── */
.rb-hero { position: relative; isolation: isolate; text-align: center; padding: 6px 8px; }
.rb-glow { position: absolute; z-index: -1; inset: -8% -12% 40%; background: radial-gradient(closest-side, var(--rb-glow), transparent 75%); }
.rb-crown { width: 64px; margin: 0 auto 8px; color: var(--rb-gold-lo); filter: drop-shadow(0 8px 16px #a8842c55); }
.rb-crown svg { display: block; width: 100%; height: auto; }
.rb[data-winner="tie"] .rb-crown { opacity: .55; filter: grayscale(.4); }
.rb-kicker { font: 700 14px var(--font-display); color: var(--ink-dim); }
.rb-name { margin: 2px 0 12px; font: 900 clamp(36px, 4.4vw, 62px)/1.08 var(--font-display); letter-spacing: -.5px; overflow-wrap: anywhere; }
.rb-name.t1 { color: var(--t1-text, var(--t1)); }
.rb-name.t2 { color: var(--t2-text, var(--t2)); }
.rb-name.tie { background: linear-gradient(120deg, var(--gold-soft), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rb-podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.rb-step { width: min(160px, 42%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rb-step-name { max-width: 100%; font: 700 14px var(--font-display); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-step-score b { font: 800 32px/1.1 var(--font-display); color: var(--ink); }
.rb-step.win .rb-step-score b { font-size: 38px; }
.rb-step-block { width: 100%; height: 46px; display: grid; justify-items: center; align-items: start; padding-top: 8px; border-radius: 16px 16px 6px 6px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--inset), transparent); box-shadow: inset 0 0 0 1px var(--line-2); }
.rb-step.win .rb-step-block, .rb-step.even .rb-step-block { height: 74px; background: linear-gradient(180deg, var(--rb-gold-hi), var(--rb-gold-lo)); box-shadow: 0 14px 30px -14px #a8842c99, inset 0 1px 0 #ffffff80; }
.rb-step-place { font: 900 26px/1 var(--font-display); color: var(--ink-dim); }
.rb-step.win .rb-step-place, .rb-step.even .rb-step-place { color: #3a2c08; }
.rb-margin { margin: 10px 0 14px; font: 700 15px var(--font-display); color: var(--ink-dim); }
.rb-margin b { color: var(--gold); font-weight: 800; }

/* ── صندوق الرصيد/عرض أوّل شراء (منطقه في app.js): شريطٌ رفيع لا بطاقة كبيرة ── */
.rb .result-offer:not(.soft) { max-width: 440px; margin: 0 auto 14px; padding: 10px 12px 10px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; text-align: start;
  border-radius: 16px; background: linear-gradient(100deg, var(--accent-wash-2), transparent); border: 1px solid var(--line-2); }
.rb .result-offer:not(.soft) .btn { grid-row: 1 / span 2; grid-column: 2; margin-top: 0; padding: 9px 18px; font-size: 14px; }
.rb .result-offer.soft { margin: 0 0 14px; padding: 0; background: none; border: 0; }
.rb .result-offer .ro-title { font-size: 16px; margin-bottom: 2px; }
.rb .result-offer .ro-sub { font-size: 14px; line-height: 1.65; }
.rb .result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── الرسم: أعمدة متقابلة لكلّ مجال ── */
.rb-chart { position: relative; padding: 16px 18px 14px; border-radius: 26px; background: var(--card-grad); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); }
.rb-chart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rb-chart-head h3 { font: 800 19px/1.3 var(--font-display); }
.rb-chart-head p { margin-top: 2px; font-size: 13px; color: var(--ink-dim); }
.rb-legend { display: flex; gap: 14px; font: 600 13px var(--font-display); color: var(--ink-dim); white-space: nowrap; }
.rb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; background: var(--rb-t1); }
.rb-legend .t2 i { background: var(--rb-t2); }
.rb-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rb-row { position: relative; display: grid; grid-template-columns: 1fr minmax(150px, 30%) 1fr; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 14px; }
.rb-row:not(:last-child)::after { content: ""; position: absolute; inset-inline: 10px; bottom: -2.5px; height: 1px; background: var(--line); }
.rb-row.decisive { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px var(--gold); }
.rb-row.decisive::after { display: none; }
.rb-cat { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.rb-thumb { flex: none; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.rb-thumb > img, .rb-thumb > svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.rb-cat-name { min-width: 0; font: 700 14px/1.3 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; font: 800 11px/1.5 var(--font-display); font-style: normal; white-space: nowrap;
  color: #3a2c08; background: linear-gradient(180deg, var(--rb-gold-hi), var(--rb-gold-lo)); }
/* كلّ فريقٍ يبدأ من الوسط ويمتدّ إلى جهته — الأوّل يمين الوسط (اتّجاه الصفحة) والثاني يساره؛ الحافّة المستديرة طرفُ القيمة */
.rb-bar { display: flex; align-items: center; gap: 8px; min-width: 0; height: 28px; }
.rb-bar.t1 { direction: ltr; }
.rb-bar.t2 { direction: rtl; }
.rb-bar i { flex: none; display: block; height: 18px; width: calc((100% - 52px) * var(--w) / 100); border-radius: 0; border-start-end-radius: 5px; border-end-end-radius: 5px; background: var(--rb-t1); }
.rb-bar.t2 i { background: var(--rb-t2); }
.rb-bar.t1 i { transform-origin: left center; }
.rb-bar.t2 i { transform-origin: right center; }
.rb-bar b { font: 800 14px var(--font-display); color: var(--ink); white-space: nowrap; }
.rb-bar i[style="--w:0"] + b { color: var(--ink-dim); font-weight: 600; }
.rb-extra { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.rb-extra .t1, .rb-extra .t2 { font-weight: 700; color: var(--ink); }

/* ── الحركة: دخول الشاشة وحده (‎.rb-play‎)، والقصاصات تسقط مرّةً واحدة ── */
.rb-burst { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.rb-burst i { position: absolute; top: -40px; left: var(--x); width: calc(13px * var(--s)); height: calc(15px * var(--s)); opacity: 0; clip-path: var(--hex-tall);
  background: linear-gradient(180deg, var(--rb-gold-hi), var(--rb-gold-lo)); }
.rb-burst i[style*="--k:1"] { background: var(--rb-t1); }
.rb-burst i[style*="--k:2"] { background: linear-gradient(180deg, #fff6dc, var(--rb-gold-hi)); }
@keyframes rbRise { from { opacity: 0; transform: translateY(10px); } }
@keyframes rbPop { from { opacity: 0; transform: scale(.82); } }
@keyframes rbGrowX { from { transform: scaleX(0); } }
@keyframes rbGrowY { from { transform: scaleY(0); } }
@keyframes rbFall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 8%, 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(min(92dvh, 720px)) rotate(var(--r)); } }
.rb-play .rb-burst i { animation: rbFall 2.6s cubic-bezier(.3, .55, .45, 1) var(--d) both; }
.rb-play .rb-crown { animation: rbPop .55s cubic-bezier(.2, .9, .3, 1.25) .15s both; }
.rb-play .rb-kicker, .rb-play .rb-name { animation: rbRise .5s cubic-bezier(.2, .7, .3, 1) .25s both; }
.rb-play .rb-step-block { animation: rbGrowY .6s cubic-bezier(.2, .8, .3, 1.1) .35s both; }
.rb-play .rb-margin, .rb-play .rb-hero .result-offer, .rb-play .rb-hero .result-actions { animation: rbRise .5s ease .7s both; }
.rb-play .rb-chart { animation: rbRise .55s cubic-bezier(.2, .7, .3, 1) .2s both; }
.rb-play .rb-row { animation: rbRise .45s ease both; animation-delay: calc(.45s + var(--i) * 90ms); }
.rb-play .rb-bar i { animation: rbGrowX .7s cubic-bezier(.2, .75, .3, 1) both; animation-delay: calc(.6s + var(--i) * 90ms); }

/* ── الشاشات الكبيرة: نفس التخطيط بمقاسٍ أكبر يملأ ارتفاعها ── */
@media (min-width: 1700px) and (min-height: 900px) {
  #result-card.rb { max-width: 1640px; gap: 56px; }
  .rb-crown { width: 84px; }
  .rb-kicker { font-size: 17px; }
  .rb-name { font-size: 78px; margin-bottom: 18px; }
  .rb-step { width: 190px; }
  .rb-step-name { font-size: 16px; }
  .rb-step-score b { font-size: 40px; }
  .rb-step.win .rb-step-score b { font-size: 48px; }
  .rb-step-block { height: 58px; }
  .rb-step.win .rb-step-block, .rb-step.even .rb-step-block { height: 96px; }
  .rb-margin { font-size: 18px; margin: 16px 0 20px; }
  .rb .result-offer:not(.soft) { max-width: 520px; }
  .rb .result-offer .ro-title { font-size: 18px; }
  .rb .result-offer .ro-sub { font-size: 15.5px; }
  .rb-chart { padding: 24px 26px 20px; border-radius: 30px; }
  .rb-chart-head h3 { font-size: 24px; }
  .rb-chart-head p, .rb-legend { font-size: 15px; }
  .rb-rows { gap: 8px; }
  .rb-row { padding: 9px 10px; }
  .rb-thumb { width: 44px; height: 44px; border-radius: 12px; }
  .rb-cat-name { font-size: 17px; }
  .rb-bar { height: 34px; }
  .rb-bar i { height: 22px; width: calc((100% - 62px) * var(--w) / 100); }
  .rb-bar b { font-size: 16.5px; }
  .rb-tag { font-size: 12.5px; top: -11px; }
  .rb-extra { font-size: 14px; }
}

/* ── الجوّال واللوح العموديّ: عمودٌ واحد، والمجال (صورة واسم) فوق بعضهما في الوسط ── */
@media (max-width: 900px) {
  #result-card.rb { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; }
  .rb-chart { padding: 14px 12px 12px; border-radius: 22px; }
  .rb-chart-head { flex-wrap: wrap; }
  .rb-row { grid-template-columns: 1fr 96px 1fr; gap: 6px; padding: 6px 4px; }
  .rb-cat { flex-direction: column; gap: 4px; }
  .rb-cat-name { max-width: 96px; font-size: 12px; }
  .rb-thumb { width: 30px; height: 30px; border-radius: 9px; }
  .rb-bar { gap: 5px; }
  .rb-bar i { height: 14px; width: calc((100% - 40px) * var(--w) / 100); }
  .rb-bar b { font-size: 12.5px; }
  .rb-tag { top: -10px; font-size: 10px; }
  .rb .result-offer:not(.soft) { display: block; text-align: center; padding: 14px 16px; }
  .rb .result-offer:not(.soft) .btn { margin-top: 10px; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .rb-hero { padding-top: 18px; }
  .rb-row { grid-template-columns: 1fr 150px 1fr; }
  .rb-cat { flex-direction: row; }
  .rb-cat-name { max-width: 104px; font-size: 13.5px; }
}