/* ════════════════════════════════════════════════════════════
   FRAME-BACKED SECTIONS  (Referral / VIP / Support)
   Frame artwork is placed as a real <img> (establishes height on
   every browser, no reliance on aspect-ratio), with live text /
   inputs overlaid via percentage positioning so content stays
   dynamic and responsive.
   ════════════════════════════════════════════════════════════ */

.fr-wrap { max-width: 560px; margin: 0 auto; padding: 14px; }
@media (min-width: 600px) { .fr-wrap { max-width: 600px; } }

.fr-panel { position: relative; width: 100%; margin-bottom: 14px; }
.fr-bg { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.fr-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; direction: rtl; }
.fr-abs { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; }

/* ============== REFERRAL — الإحالة ============== */
.fr-ref-title { text-align: center; margin: 2px 0 10px; }
.fr-ref-title .t1 { font-size: 1.18rem; font-weight: 900; color: var(--gold-light); }
.fr-ref-title .t2 { font-size: 0.8rem; color: var(--text-dim); margin-top: 3px; }
.fr-ref-title .t2 strong { color: var(--gold); }

.fr-ref-code {
  left: 8.5%; right: 8.2%; top: 27%; height: 15%;
  color: #3a2c10; font-weight: 900; font-family: 'Tajawal', monospace;
  letter-spacing: 3px; font-size: clamp(1rem, 5.2vw, 1.9rem);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.fr-ref-copy {
  left: 33%; right: 33%; top: 49%; height: 15%; cursor: pointer;
  color: #3a2c10; font-weight: 900; font-size: clamp(0.78rem, 3.6vw, 1.05rem); gap: 6px;
}
.fr-ref-copy:active { transform: scale(0.97); }

.fr-ref-stat { top: 70%; height: 22%; width: 27.7%; flex-direction: column; gap: 1px; padding: 0 2px; }
.fr-ref-stat .v { font-size: clamp(0.9rem, 4.4vw, 1.55rem); font-weight: 900; line-height: 1; }
.fr-ref-stat .l { font-size: clamp(0.5rem, 2.3vw, 0.74rem); color: #d8c9a8; line-height: 1.1; white-space: nowrap; }
.fr-ref-stat-1 { left: 66.5%; }   /* إجمالي الإحالات — يمين */
.fr-ref-stat-2 { left: 36%; }     /* مكافآت مكتملة — وسط */
.fr-ref-stat-3 { left: 5.6%; }    /* أرباح — يسار */
.fr-ref-stat .v.gold { color: var(--gold-light); }
.fr-ref-stat .v.green { color: #7CFFB0; }
.fr-ref-stat .v.white { color: #f3ead0; }

.fr-ref-terms-title { position: absolute; top: 3%; right: 5%; font-size: 1.02rem; font-weight: 900; color: var(--gold-light); }
.fr-scroll-1 { left: 21%; right: 23%; top: 26%; height: 16%; }
.fr-scroll-2 { left: 21%; right: 23%; top: 50%; height: 16%; }
.fr-scroll-txt { color: #4a3318; font-weight: 800; font-size: clamp(0.6rem, 2.7vw, 0.9rem); line-height: 1.15; white-space: nowrap; }
.fr-scroll-txt .hl { color: #8a5a14; }
.fr-chest { left: 21%; right: 23%; top: 72%; height: 13%; }
.fr-chest-txt { color: var(--gold-light); font-weight: 900; font-size: clamp(0.64rem, 2.9vw, 0.94rem); white-space: nowrap; }

/* ============== أصدقائي — رأس القسم ============== */
.fr-friends-header {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, rgba(28,35,48,0.92), rgba(15,19,28,0.92));
  border: 1px solid var(--gold-dim);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
.fr-friends-header-left { display: flex; align-items: center; gap: 10px; }
.fr-friends-header-icon {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, #7a5020);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; border: 1px solid var(--gold-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 6px rgba(0,0,0,0.3);
}
.fr-friends-header-title { font-size: 1rem; font-weight: 900; color: var(--gold-light); line-height: 1.2; }
.fr-friends-header-sub { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
.fr-friends-header-count {
  min-width: 32px; height: 26px; padding: 0 10px; flex: 0 0 auto;
  border-radius: 20px; background: rgba(201,168,76,0.14);
  border: 1px solid var(--gold-dim); color: var(--gold-light);
  font-weight: 900; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
}

/* قائمة الأصدقاء */
.fr-friends-list { direction: rtl; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 0; }
.fr-friends-list .empty-state { text-align: center; padding: 22px 14px; color: var(--text-dim); font-size: 0.85rem; background: rgba(20,26,38,0.5); border: 1px dashed var(--border); border-radius: 14px; }

.fr-friend-card {
  background: linear-gradient(135deg, rgba(24,30,42,0.88), rgba(13,17,25,0.88));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  transition: border-color .2s, box-shadow .2s;
}
.fr-friend-card.is-rewarded { border-color: var(--gold-dim); box-shadow: 0 2px 10px rgba(201,168,76,0.12); }

.fr-friend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.fr-friend-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fr-friend-avatar {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #7a5020);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; font-weight: 900; color: #1a1305;
  border: 2px solid var(--gold-dim);
}
.fr-friend-name { font-size: 0.9rem; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-friend-reward {
  flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; padding: 4px 11px;
  border-radius: 20px; white-space: nowrap;
}
.fr-friend-reward.done {
  background: linear-gradient(135deg, rgba(201,168,76,0.28), rgba(201,168,76,0.1));
  color: var(--gold-light); border: 1px solid var(--gold-dim);
}
.fr-friend-reward.pending {
  background: rgba(122,138,170,0.08); color: var(--text-dim); border: 1px solid var(--border);
}

.fr-friend-steps { display: flex; gap: 8px; }
.fr-step { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 10px; font-size: 0.7rem; font-weight: 700; min-width: 0; }
.fr-step span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-step .ic { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; flex: 0 0 auto; }
.fr-step.done { background: rgba(0,200,83,0.09); color: #7CFFB0; }
.fr-step.done .ic { background: var(--success); color: #07210f; }
.fr-step.pending { background: rgba(255,179,0,0.07); color: #d8b35a; }
.fr-step.pending .ic { background: rgba(255,179,0,0.25); color: var(--warning); }

/* ============== VIP ============== */
.fr-vip-cur-title { position: absolute; top: 8%; right: 8%; font-size: clamp(0.78rem,3.6vw,1.05rem); font-weight: 900; color: var(--gold-light); display: flex; align-items: center; gap: 5px; }
.fr-vip-cur-name { position: absolute; right: 9%; top: 29%; font-size: clamp(1.05rem,5.2vw,1.8rem); font-weight: 900; color: #f3ead0; text-align: right; }
.fr-vip-cur-desc { position: absolute; right: 9%; top: 47%; font-size: clamp(0.68rem,3.2vw,0.96rem); color: var(--gold-light); text-align: right; }
.fr-vip-prog-label { position: absolute; right: 9%; top: 70%; font-size: clamp(0.6rem,2.9vw,0.82rem); color: var(--text-dim); }
.fr-vip-prog-val { position: absolute; left: 9%; top: 70%; font-size: clamp(0.6rem,2.9vw,0.82rem); color: #f3ead0; font-weight: 700; }
.fr-vip-prog-track { position: absolute; left: 10%; right: 10%; top: 87.5%; height: 5%; border-radius: 20px; overflow: hidden; background: rgba(0,0,0,0.0); }
.fr-vip-prog-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #f0d080, var(--gold)); border-radius: 20px; transition: width .4s ease; box-shadow: 0 0 6px rgba(240,208,128,.6); }

.fr-vip-list { margin-top: 8px; }
.fr-vip-bar { position: relative; width: 100%; margin-top: -9px; }
.fr-vip-bar:first-child { margin-top: 0; }
.fr-vip-bar .name { position: absolute; right: 20%; top: 30%; font-size: clamp(0.95rem,4.6vw,1.5rem); font-weight: 900; }
.fr-vip-bar .desc { position: absolute; right: 20%; top: 56%; font-size: clamp(0.62rem,3vw,0.92rem); color: var(--gold-light); }
.fr-vip-bar .amt  { position: absolute; left: 6%; top: 40%; font-size: clamp(0.72rem,3.4vw,1.05rem); font-weight: 800; }
.fr-vip-bar.bronze .name, .fr-vip-bar.bronze .amt { color: #f3ead0; }
.fr-vip-bar.silver .name { color: var(--gold-light); } .fr-vip-bar.silver .amt { color: #f3ead0; }
.fr-vip-bar.gold .name { color: #5a3e00; } .fr-vip-bar.gold .desc { color: #6b4d10; } .fr-vip-bar.gold .amt { color: #5a3e00; }
.fr-vip-bar.diamond .name { color: #2a3340; } .fr-vip-bar.diamond .desc { color: #3a4654; } .fr-vip-bar.diamond .amt { color: #2a3340; }
.fr-vip-bar.legend .name, .fr-vip-bar.legend .amt { color: #f3ead0; }
.fr-vip-bar.is-current .name::after { content: "★"; margin-right: 6px; color: var(--gold-light); filter: drop-shadow(0 0 4px rgba(240,208,128,.8)); }

/* ============== SUPPORT — الدعم الفني ============== */
.fr-sup-title { position: absolute; top: 2%; right: 16%; font-size: clamp(0.95rem,4.4vw,1.3rem); font-weight: 900; color: var(--gold-light); text-align: right; }
.fr-sup-sub { position: absolute; top: 6.5%; right: 5%; left: 12%; font-size: clamp(0.6rem,2.9vw,0.86rem); color: var(--text-dim); text-align: right; line-height: 1.4; }
.fr-sup-lbl-subject { position: absolute; top: 14.5%; right: 5%; font-size: clamp(0.72rem,3.4vw,1rem); font-weight: 800; color: var(--gold-light); }
.fr-sup-subject {
  position: absolute; top: 19.5%; left: 5%; right: 5%; height: 11%;
  background: transparent; border: none; outline: none; color: #e8eef8;
  text-align: right; padding: 0 18px 0 40px; font-family: 'Tajawal',sans-serif;
  font-size: clamp(0.74rem,3.4vw,1rem); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.fr-sup-subject option { background: #0c121c; color: #e8eef8; }
.fr-sup-lbl-msg { position: absolute; top: 29.5%; right: 5%; font-size: clamp(0.72rem,3.4vw,1rem); font-weight: 800; color: var(--gold-light); }
.fr-sup-msg {
  position: absolute; top: 34.5%; left: 5%; right: 5%; height: 18%;
  background: transparent; border: none; outline: none; resize: none; color: #e8eef8;
  text-align: right; padding: 12px 18px; font-family: 'Tajawal',sans-serif;
  font-size: clamp(0.74rem,3.4vw,1rem); line-height: 1.5;
}
.fr-sup-send {
  position: absolute; top: 58.5%; left: 5%; right: 5%; height: 7.5%;
  background: transparent; border: none; cursor: pointer; color: #3a2c10;
  font-weight: 900; font-family:'Tajawal',sans-serif; font-size: clamp(0.8rem,3.8vw,1.12rem);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.fr-sup-send:active { transform: scale(0.98); }
.fr-sup-refresh {
  position: absolute; top: 78%; left: 4%; width: 21%; height: 6%;
  background: transparent; border: none; cursor: pointer; color: #c9d4e6;
  font-weight: 800; font-family:'Tajawal',sans-serif; font-size: clamp(0.66rem,3vw,0.92rem);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.fr-sup-mytickets-lbl { position: absolute; top: 78%; right: 6%; font-size: clamp(0.78rem,3.6vw,1.05rem); font-weight: 900; color: var(--gold-light); }
.fr-sup-result { position: absolute; top: 67.5%; left: 5%; right: 5%; text-align: center; font-size: 0.8rem; min-height: 1em; color: var(--gold-light); }
.fr-sup-tickets { margin-top: 12px; direction: rtl; }

/* ════════════════════════════════════════════════════════════
   GAME SCREEN — status bar + new-game button (gold frames)
   ════════════════════════════════════════════════════════════ */

/* شريط الحالة بإطار ذهبي (admin – اختر قطعة) */
.status-bar.fr-status {
  background: url("../img/frames/game_panel.png") center/100% 100% no-repeat;
  border: none;
  border-radius: 0;
  color: #f3ead0;
  font-weight: 800;
  min-height: 48px;
  padding: 10px 26px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  font-size: 0.9rem;
}

/* زر "لعبة جديدة" — صورة الإطار الذهبي مع أيقونة الرجوع الزرقاء (مدمجة) */
.fr-newgame-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(90vw, 480px);
  aspect-ratio: 2085 / 633;
  padding: 0 22% 0 6%;            /* مساحة على اليمين للأيقونة الزرقاء المدمجة */
  border: none;
  cursor: pointer;
  background: url("../img/frames/newgame_btn.png") center/100% 100% no-repeat;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  font-family: 'Tajawal', sans-serif;
  font-weight: 900;
  font-size: clamp(0.95rem, 3.6vw, 1.25rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5a3e00;
  text-shadow: 0 1px 1px rgba(255,255,255,0.45);
  transition: transform .12s, filter .15s;
}
.fr-newgame-btn span { display: inline-block; line-height: 1; }
.fr-newgame-btn:hover { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) brightness(1.05); }
.fr-newgame-btn:active { transform: scale(0.97); }

/* الحاوية السفلية للزر */
.controls.fr-controls { justify-content: center; margin-top: 14px; margin-bottom: 6px; }

/* بطاقات اللاعبين بإطار الصورة الذهبي (مطابق لصفحة اللعب) */
.scorebar .player-card {
  background: url("../img/frames/player_panel.png") center/100% 100% no-repeat;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 14px;
}
.scorebar .player-card::before { display: none; }
.scorebar .player-card.active {
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(240,210,120,0.55));
}
.scorebar .player-score { color: var(--gold-light); }
.scorebar .turn-badge {
  background: linear-gradient(180deg,#f0d080,var(--gold));
  color: #2a1d04; font-weight: 900;
}

/* ════════════════════════════════════════════════════════════
   نافذة الفوز/الخسارة الجديدة (إطار + ميدالية + يد تحكم)
   ════════════════════════════════════════════════════════════ */
.win-card {
  position: relative;
  width: min(92vw, 370px);
  margin: 0 auto;
}
.win-frame-bg {
  display: block;
  width: 100%; height: auto;
  pointer-events: none; user-select: none;
}
/* المحتوى داخل اللوحة الداكنة فقط.
   اللوحة الداكنة من ~30% إلى ~73% رأسياً (فوقها الكأس، تحتها اللوحة الذهبية).
   نُرتّب: (الميدالية + اسم الفائز) ثم الرسالة ثم صندوق الجائزة. */
.win-content {
  position: absolute;
  left: 11%; right: 11%;
  top: 31%; bottom: 31%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; direction: rtl;
  gap: 4%;
}
/* صف الفائز: الاسم مع الميدالية بجانبه (يمين) — مطابق للتصميم المرجعي */
.win-winner-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%; flex-wrap: nowrap;
  direction: rtl;
}
.win-medal {
  width: 42px; max-width: 13%; height: auto; flex: 0 0 auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  order: 2;                 /* تظهر على يمين الاسم في RTL */
}
.win-card #modal-title {
  margin: 0; color: #f3ead0; font-weight: 900;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  line-height: 1.2;
  text-align: center;
  order: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.win-card #modal-msg {
  margin: 0; color: var(--gold-light);
  font-size: clamp(0.78rem, 3.4vw, 0.95rem);
  text-align: center;
  opacity: 0.95;
}
.win-prize-box {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.42));
  border: 2px solid rgba(240,210,120,0.6);
  border-radius: 12px;
  padding: 9px 12px;
  color: #ffd76a; font-weight: 900;
  font-size: clamp(1rem, 4.6vw, 1.35rem);
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.5), 0 0 14px rgba(240,210,120,0.18);
  min-height: 1.3em;
  display: flex; align-items: center; justify-content: center;
}
.win-prize-box:empty { display: none; }

/* زر "لعب مجدداً" — يُغطّي بدقة اللوحة الذهبية الصغيرة السفلية في الإطار */
.win-replay-btn {
  position: absolute;
  left: 27%;
  right: 27%;
  top: 74.5%;
  bottom: 12.5%;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  width: auto;
  box-sizing: border-box;
  border: none; cursor: pointer;
  border-radius: 10px;
  padding: 4px 8px;
  font-family: 'Tajawal', sans-serif;
  font-weight: 900;
  font-size: clamp(0.78rem, 3.3vw, 0.95rem);
  white-space: nowrap;
  color: #5a3e00;
  background: linear-gradient(180deg, #fff7d6 0%, #f4d979 22%, #dcb84e 55%, #c79a30 80%, #ecce6a 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5),
              inset 0 -3px 8px rgba(140,100,10,0.35),
              0 3px 10px rgba(0,0,0,0.4);
  text-shadow: 0 1px 1px rgba(255,255,255,0.45);
  transition: transform .12s, filter .15s, box-shadow .15s;
}
.win-replay-btn:hover { filter: brightness(1.04); }
.win-replay-btn:active { transform: scale(0.97); }
.win-ctrl { width: 20px; max-width: 9%; height: auto; }

/* تسمية "الفائز" — تظهر فقط إن لم يكن هناك زر فوقها؛ نُخفيها لأن الزر يغطي اللوحة */
.win-nameplate-label { display: none; }