/* ─── شاشة إعادة الجولة ─────────────────────────────────── */
.rp-bg {
  position: fixed; inset: 0; z-index: 60; background: rgba(6, 6, 10, .72); backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start; padding: 3vh 16px 16px; overflow-y: auto;
  animation: fade .12s ease-out;
}
.rp {
  width: 100%; max-width: 1180px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); overflow: hidden; animation: pop .15s ease-out;
}
.rp-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.rp-h h2 { font-size: 17px; }
.rp-h .rid { font-size: 12px; color: var(--text-3); font-family: ui-monospace, Consolas, monospace; direction: ltr; }
.rp-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.rp-side { border-inline-start: 1px solid var(--border); padding: 16px; display: grid; gap: 14px; align-content: start; background: var(--surface-2); }
@media (max-width: 960px) {
  .rp-main { grid-template-columns: minmax(0, 1fr); }
  .rp-side { border-inline-start: 0; border-top: 1px solid var(--border); }
  .rp-bg { padding: 0; }
  .rp { border-radius: 0; min-height: 100%; }
}

/* المسرح — دايماً غامق متل اللعبة */
.rp-stage {
  --gold: #e8bd67; --gold-2: #b8862b; --ink: #f4f3ef; --ink-2: #b9b6ab;
  position: relative; padding: 16px 16px 12px; color: var(--ink);
  background:
    radial-gradient(700px 300px at 50% -10%, rgba(232, 189, 103, .18), transparent 70%),
    linear-gradient(180deg, #17120c, #0e0c0a 70%);
  display: grid; gap: 12px;
}
.rp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; }
.rp-scene { font-weight: 700; font-size: 15px; }
.rp-scene small { color: var(--ink-2); font-weight: 500; margin-inline-start: 6px; }
.rp-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.rp-chip.mult { background: linear-gradient(145deg, #f3d38a, #b8862b); color: #231704; border-color: transparent; }
.rp-chip.mult.bump { animation: bump .45s ease-out; }
.rp-win { margin-inline-start: auto; text-align: end; line-height: 1.15; }
.rp-win .l { font-size: 11.5px; color: var(--ink-2); }
.rp-win b { font-size: 22px; color: var(--gold); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.rp-board { position: relative; margin: 0 auto; width: 100%; }
.rp-grid {
  position: relative; display: grid; gap: 6px; padding: 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(232, 189, 103, .25); box-shadow: inset 0 0 40px rgba(0, 0, 0, .5);
  direction: ltr; /* البكرات من اليسار لليمين متل اللعبة */
}
.rp-reel { display: flex; flex-direction: column; gap: 6px; justify-content: center; position: relative; min-width: 0; }
.rp-cell {
  position: relative; aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 70%), #1d1812;
  border: 1px solid rgba(255, 255, 255, .07);
  transition: opacity .25s, transform .25s, filter .25s, box-shadow .25s;
}
.rp-sym { display: grid; place-items: center; gap: 0; width: 100%; height: 100%; text-align: center; line-height: 1; }
.rp-sym .g { font-size: calc(var(--cell, 80px) * .46); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.rp-sym .t { font-size: max(9px, calc(var(--cell, 80px) * .13)); color: var(--ink-2); font-weight: 700; margin-top: -2px; }
.rp-sym img { width: 88%; height: 88%; object-fit: contain; }
.rp-sym.word .g {
  font-size: calc(var(--cell, 80px) * .24); font-weight: 900; letter-spacing: .5px;
  background: linear-gradient(180deg, #fff3cf, #e8bd67 55%, #9a6b17); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rp-sym.seven .g { font-size: calc(var(--cell, 80px) * .52); font-weight: 900; color: #ff4d4d; text-shadow: 0 0 10px rgba(255, 60, 60, .5); }
.rp-sym.letter .g { font-size: calc(var(--cell, 80px) * .42); font-weight: 900; }
.rp-cell.wild { background: radial-gradient(circle at 50% 35%, rgba(255, 214, 120, .35), rgba(120, 70, 10, .25) 70%), #2a1d0a; border-color: rgba(232, 189, 103, .6); }
.rp-cell.scat { border-color: rgba(120, 190, 255, .5); }
.rp-cell.gold { box-shadow: inset 0 0 0 3px #e8bd67, 0 0 14px rgba(232, 189, 103, .45); }

/* حالات */
.rp-grid.dim .rp-cell:not(.hit) { opacity: .28; filter: grayscale(.5); }
.rp-cell.hit { box-shadow: 0 0 0 2px #ffe08a, 0 0 22px rgba(255, 208, 90, .55); transform: scale(1.04); z-index: 1; }
.rp-cell.pop { animation: pop-out .5s ease-in forwards; }
.rp-cell.towild { animation: to-wild .6s ease-out; }
.rp-cell.fresh { animation: drop-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.rp-reel.spinning .rp-cell { animation: reel-in .55s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: var(--d, 0s); }
.rp-reel.expanded .rp-cell { animation: expand-glow .7s ease-out; }
.rp-mbadge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; direction: ltr;
  background: linear-gradient(145deg, #f3d38a, #b8862b); color: #231704; box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
  animation: bump .45s ease-out;
}
.rp-lines { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible; }
.rp-lines polyline { fill: none; stroke: #ffd36b; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 200, 80, .8)); stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw .6s ease-out forwards; }

.rp-caption {
  min-height: 52px; border-radius: 12px; padding: 9px 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08);
  display: grid; gap: 3px; align-content: center; font-size: 14px;
}
.rp-caption .cm { font-weight: 700; }
.rp-caption .cs { font-size: 12.5px; color: var(--ink-2); }
.rp-caption .calc { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.rp-caption .amt { color: var(--gold); font-weight: 800; }

/* بطاقة فوق المسرح (بداية البونص / الخلاصة) */
.rp-card {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px;
  background: rgba(8, 6, 4, .78); backdrop-filter: blur(2px); border-radius: 16px; animation: fade .2s ease-out;
}
.rp-card > div { text-align: center; display: grid; gap: 8px; max-width: 420px; }
.rp-card h3 { font-size: 22px; color: var(--gold); }
.rp-card .big { font-size: 34px; font-weight: 900; color: var(--gold); direction: ltr; unicode-bidi: isolate; }
.rp-card .tier { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #231704; background: linear-gradient(145deg, #f3d38a, #b8862b); border-radius: 999px; padding: 3px 14px; justify-self: center; }
.rp-card .kv2 { display: grid; grid-template-columns: auto auto; gap: 4px 18px; justify-content: center; font-size: 14px; color: var(--ink-2); }
.rp-card .kv2 b { color: var(--ink); direction: ltr; unicode-bidi: isolate; text-align: start; }

/* التحكم */
.rp-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-ctl .b {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--ink); font: inherit;
}
.rp-ctl .b:hover { background: rgba(255, 255, 255, .14); }
.rp-ctl .b.play { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #f3d38a, #b8862b); color: #231704; border: 0; }
.rp-ctl .b svg { width: 18px; height: 18px; }
.rp-ctl input[type=range] { flex: 1; min-width: 120px; height: 6px; padding: 0; accent-color: #e8bd67; background: transparent; border: 0; box-shadow: none; }
.rp-ctl .pos { font-size: 12px; color: var(--ink-2); min-width: 64px; text-align: center; direction: ltr; }
.rp-speed { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.rp-speed button { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 700; padding: 0 10px; height: 34px; cursor: pointer; }
.rp-speed button.on { background: rgba(232, 189, 103, .22); color: var(--gold); }

.rp-scenes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.rp-scenes button {
  flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: var(--ink-2);
  border-radius: 10px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; display: grid; gap: 0; text-align: center; line-height: 1.35;
}
.rp-scenes button b { color: var(--ink); font-size: 12.5px; direction: ltr; unicode-bidi: isolate; }
.rp-scenes button.win b { color: var(--gold); }
.rp-scenes button.on { border-color: #e8bd67; background: rgba(232, 189, 103, .16); color: var(--ink); }
.rp-scenes button .rt { color: #7fc3ff; }

/* اللوحة الجانبية */
.rp-sum { display: grid; gap: 10px; }
.rp-sum .hero { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.rp-sum .hero .v { font-size: 26px; font-weight: 800; direction: ltr; text-align: end; unicode-bidi: isolate; }
.rp-bal { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.rp-bal .k { font-size: 11.5px; color: var(--text-3); }
.rp-bal .v { font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.rp-bal .arr { color: var(--text-3); font-size: 18px; }
.rp-kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; font-size: 13.5px; margin: 0; }
.rp-kv dt { color: var(--text-2); }
.rp-kv dd { margin: 0; text-align: end; }
.rp-nav { display: flex; gap: 8px; }
.rp-nav .btn { flex: 1; }
.rp-json { max-height: 300px; overflow: auto; font: 12px/1.5 ui-monospace, Consolas, monospace; direction: ltr; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; white-space: pre; margin: 0; }

@keyframes reel-in { 0% { transform: translateY(-120%); filter: blur(6px); opacity: 0; } 70% { filter: blur(0); opacity: 1; } 100% { transform: none; } }
@keyframes drop-in { from { transform: translateY(-140%); opacity: 0; } }
@keyframes pop-out { 40% { transform: scale(1.15); filter: brightness(1.8); } 100% { transform: scale(.2); opacity: 0; } }
@keyframes to-wild { 0% { transform: scale(1.2) rotate(-6deg); filter: brightness(2); } 100% { transform: none; } }
@keyframes expand-glow { 0% { filter: brightness(2.2); transform: scaleY(1.08); } 100% { filter: none; transform: none; } }
@keyframes bump { 0% { transform: translateX(-50%) scale(1.6); } 100% { transform: translateX(-50%) scale(1); } }
.rp-chip.mult.bump { animation-name: bump2; }
@keyframes bump2 { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rp-cell, .rp-reel .rp-cell, .rp-lines polyline, .rp-mbadge, .rp-chip { animation: none !important; transition: none !important; }
  .rp-lines polyline { stroke-dashoffset: 0; }
}

/* قنابل المضاعف (Sweet Bonanza) */
.rp-bomb {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  font: 800 clamp(10px, calc(var(--cell, 80px) * .2), 16px)/1 system-ui, sans-serif; color: #fff;
  background: linear-gradient(180deg, #ff5a8a, #c2185b); padding: 2px 6px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5); direction: ltr; pointer-events: none;
}