/* =============================================================
   بيننا واحد — الأنماط العامة
   نفس الهوية البصرية من مرجع التصميم: عتمة الغرفة + ضوء الكشف
   ============================================================= */

:root {
  --bg-void: #120e1b;
  --bg-panel: #1e1730;
  --bg-panel-raised: #271e3c;
  --line: #362a4f;
  --ink: #f2ece0;
  --ink-muted: #9c90b3;
  --ink-faint: #6c6285;
  --amber: #e7a93d;
  --amber-soft: #f0c274;
  --crimson: #c8483d;
  --crimson-soft: #de6b5f;
  --success: #6fae7f;

  --font-display: "Estedad", "Arial Black", sans-serif;
  --font-body: "Estedad", "Tahoma", "Segoe UI", sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-void);
  color: var(--ink);
  min-height: 100%;
}

body {
  direction: rtl;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: #1a1220; }

button, input, select, textarea { font-family: inherit; }

/* touch-action: manipulation يشيل تأخير الـ300ms اللي بعض المتصفحات
   بالجوال تسويه وهي تتأكد "هذي ضغطة وحدة ولا تكبير بإصبعين؟" — بدونه
   بعض الأزرار كانت تحتاج ضغطتين أول مرة. */
button, a, [data-action] { touch-action: manipulation; }

button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; text-wrap: balance; }

/* أي عنصر ثاني يستخدم خط العرض (رقم الغرفة، المؤقت، لحظة الكشف،
   النقاط...) ياخذ نفس الوزن الغامق حتى يضل عنده هوية واضحة، مو خط
   عادي رفيع. */
.room-code-chip,
.player-row .score,
.timer-label,
.suspense-mark,
.reveal-hero .who,
.score-row .rank,
.score-row .total,
.winner-names {
  font-weight: 800;
}

.num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--amber-soft); outline-offset: 3px; }

.app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: calc(18px + var(--safe-top)) 18px calc(28px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* شاشات الكمبيوتر الواسعة: نكبّر كل شي (الحاوية، الخط، المسافات) حتى
   تملي الشاشة بدل ما تضل مضغوطة بعمود صغير بالنص. ما تأثر على الجوال
   إطلاقًا لأن عرضه أصلاً أصغر من نقطة التحول هذي. */
@media (min-width: 900px) {
  html { font-size: 19px; }
  .app { max-width: 780px; padding-top: 48px; padding-bottom: 48px; gap: 26px; }
}

/* ---------- عناصر عامة ---------- */

.brand-logo {
  display: block;
  width: clamp(100px, 26vw, 140px);
  height: auto;
  margin: 0 auto;
}

.brand {
  text-align: center;
  font-size: clamp(2.3rem, 9.5vw, 3rem);
  filter: drop-shadow(0 3px 0 rgba(26,18,32,0.35));
  margin-bottom: 4px;
}

.brand-w1 { color: var(--amber-soft); }
.brand-w2 { color: var(--crimson-soft); }

.subtitle { text-align: center; color: var(--ink-muted); font-size: 0.95rem; margin-top: -10px; }
.subtitle.lg { font-size: 1.15rem; color: var(--ink); }

.odd-highlight { color: var(--crimson-soft); font-weight: 700; }

.credit-note { text-align: center; color: var(--ink-faint); font-size: 0.72rem; margin-top: auto; padding-top: 10px; }
.credit-note .heart { color: var(--crimson-soft); }

.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
}

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.center { text-align: center; }
.grow { flex: 1; }

label.field-label { font-size: 0.85rem; color: var(--ink-muted); }

input[type="text"], input[type="tel"], input[type="email"], input[type="password"] {
  width: 100%;
  background: var(--bg-void);
  border: 1.5px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 1.05rem;
  min-height: 52px;
}

input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  border-color: var(--amber);
}

.share-text-input {
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  color: var(--amber-soft);
}

.btn {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 100px;
  padding: 15px 26px;
  min-height: 52px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  width: 100%;
}

.btn:not(:disabled):active { transform: scale(0.98) translateY(1px); }

/* لمسة 3D: عند تمرير الماوس، الزر "يبرز" لفوق ويكبر ظله شوي — بس على
   أجهزة فيها ماوس فعلي (hover: hover)، حتى ما يعلق تأثير الـhover على
   الجوال بعد أول لمسة. */
@media (hover: hover) {
  .btn:not(:disabled):hover { transform: translateY(-3px); }
  .btn.primary:not(:disabled):hover { box-shadow: 0 16px 28px -12px rgba(231,169,61,0.75); }
  .btn.danger:not(:disabled):hover { box-shadow: 0 16px 28px -12px rgba(200,72,61,0.7); }
  .btn.secondary:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 12px 22px -14px rgba(0,0,0,0.5); }
  .btn.ghost:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 10px 18px -12px rgba(0,0,0,0.5); }
}

.btn.primary { background: linear-gradient(180deg, var(--amber-soft), var(--amber)); color: #251a0c; box-shadow: 0 10px 22px -10px rgba(231,169,61,0.6); }
.btn.secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.secondary:not(:disabled):hover { border-color: var(--amber); color: var(--amber-soft); }
.btn.danger { background: linear-gradient(180deg, var(--crimson-soft), var(--crimson)); color: #2a0c09; box-shadow: 0 10px 22px -10px rgba(200,72,61,0.55); }
.btn.ghost { background: var(--bg-panel-raised); color: var(--ink-muted); border: 1px solid var(--line); }
.btn.auto { width: auto; }
.btn.sm { padding: 10px 18px; min-height: 40px; font-size: 0.88rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  padding: 5px 13px;
  border-radius: 100px;
}

.pill.host { color: var(--amber-soft); border-color: rgba(231,169,61,0.45); }

.error-box {
  background: rgba(200,72,61,0.12);
  border: 1px solid rgba(200,72,61,0.4);
  color: var(--crimson-soft);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
}

.hint { color: var(--ink-faint); font-size: 0.82rem; line-height: 1.6; }

/* ---------- شريط علوي: كود الغرفة + الجولة ---------- */

.top-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.top-bar > .icon-btn { justify-self: start; }
.top-bar > .round-chip { justify-self: end; }

.top-bar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-self: center;
}

.top-bar-brand img { width: 38px; height: auto; }

.top-bar-brand span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  background: linear-gradient(to left, var(--crimson-soft) 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.room-code-chip {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--amber-soft);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 16px;
}

.round-chip { color: var(--ink-muted); font-size: 0.85rem; }

.icon-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--ink-faint);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.icon-btn:hover { color: var(--crimson-soft); border-color: var(--crimson-soft); }

.back-x-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--ink-muted);
  background: linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel));
  border: 1px solid var(--line);
  box-shadow: 0 5px 12px -5px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.back-x-btn:hover { color: var(--amber-soft); border-color: var(--amber); }

.back-x-btn:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: 0 2px 6px -3px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}

.back-x-btn.danger-x:hover { color: var(--crimson-soft); border-color: var(--crimson-soft); }

.kick-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--ink-faint);
  font-size: 0.68rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kick-btn:hover { color: var(--crimson-soft); border-color: var(--crimson-soft); }

/* ---------- الأفتار ---------- */

.avatar {
  border-radius: 50%;
  background: var(--bg-panel-raised);
  object-fit: cover;
  flex: 0 0 auto;
}

.avatar.sz-sm { width: 34px; height: 34px; }
.avatar.sz-md { width: 46px; height: 46px; }
.avatar.sz-lg { width: 88px; height: 88px; }

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.avatar-option {
  position: relative;
  background: var(--bg-void);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.avatar-option img { width: 100%; height: 100%; border-radius: 12px; }

.avatar-option.selected { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(231,169,61,0.25); }

.avatar-option.taken { opacity: 0.3; pointer-events: none; }

.avatar-option.taken::after {
  content: "مأخوذ";
  position: absolute;
  inset: auto 0 6px 0;
  text-align: center;
  font-size: 0.62rem;
  color: var(--ink-faint);
}

.avatar-edit-btn {
  background: none;
  border: none;
  padding: 0;
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}

.avatar-edit-btn .avatar { box-shadow: 0 0 0 2px var(--amber); }

.avatar-edit-btn::after {
  content: "✎";
  position: absolute;
  inset: auto -2px -2px auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--amber);
  color: #251a0c;
  font-size: 0.62rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-panel-raised);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 6, 15, 0.72);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  z-index: 50;
  animation: bw-fade-up 0.2s ease both;
}

.modal-card {
  width: 100%;
  max-width: 560px;
  max-height: 82dvh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
}

@media (min-width: 640px) {
  .modal-overlay { align-items: center; }
}

/* ---------- قائمة اللاعبين ---------- */

.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-panel-raised);
  border-radius: 12px;
  padding: 10px 12px;
}

.player-row .name { font-weight: 600; }
.player-row .meta { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.player-row .score { font-family: var(--font-display); color: var(--amber-soft); font-size: 1.1rem; }

/* ---------- المؤقت ---------- */

.timer-bar {
  height: 8px;
  border-radius: 100px;
  background: var(--bg-panel-raised);
  overflow: hidden;
}

.timer-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--crimson-soft));
  /* عمدًا بدون transition: الجافاسكربت يحدّث العرض كل 100ms بنفسه
     (راجع updateTimerDom بـ app.js)، فأي CSS transition هنا كان
     يتعارك مع التحديثات المتكررة ويسبب تقطّع بصري (يبان يتحرك بسرعة
     ثم يقف فجأة). التحديث المتكرر وحده كافٍ لحركة سلسة. */
}

.timer-label { text-align: center; font-family: var(--font-display); font-size: 1.6rem; color: var(--amber-soft); }

/* آخر ٥ ثوانٍ من أي عداد — بدون صوت، بس نبضة بصرية نظيفة على الرقم */
#timer-num.urgent {
  display: inline-block;
  color: var(--crimson-soft);
  animation: bw-timer-pulse 0.6s ease-in-out infinite;
}

@keyframes bw-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.28); }
}

@media (prefers-reduced-motion: reduce) {
  #timer-num.urgent { animation: none; }
}

/* ---------- بطاقة السؤال ---------- */

.question-card {
  text-align: center;
  background: radial-gradient(circle at 50% -10%, rgba(231,169,61,0.16), transparent 60%), var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 22px;
}

.question-card .eyebrow { color: var(--ink-faint); font-size: 0.82rem; margin-bottom: 10px; }
.question-card .q { font-size: clamp(1.3rem, 5vw, 1.7rem); font-weight: 600; line-height: 1.5; }

textarea.answer-box {
  width: 100%;
  background: var(--bg-void);
  border: 1.5px solid var(--line);
  color: var(--ink);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 1.05rem;
  min-height: 90px;
  resize: vertical;
  font-family: inherit;
}

textarea.answer-box:focus { border-color: var(--amber); }

/* ---------- بطاقات الإجابات والتصويت ---------- */

.answer-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-panel-raised);
  border-radius: 14px;
  padding: 12px 14px;
}

.answer-card .who { font-weight: 600; font-size: 0.92rem; }
.answer-card .text { color: var(--ink); margin-top: 3px; }
.answer-card .no-answer { color: var(--ink-faint); font-style: normal; }

.vote-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-panel-raised);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: right;
  overflow: hidden;
}

.vote-option.selected { border-color: var(--crimson-soft); background: rgba(200,72,61,0.14); }

/* ختم "صوّت" — يطلع فوق البطاقة أول ما تحدد لاعب بالتصويت */
.vote-stamp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* عمدًا بدون opacity هنا ولا بالأنيميشن — الغرفة فيها تحديثات
     Firestore متكررة من لاعبين ثانين، وأي تحديث يعيد رسم الشاشة
     كاملة (root.innerHTML) يخلق عنصر الختم من جديد، فلو الأنيميشن
     يحرّك الشفافية (زي bw-reveal-pop) يصير الختم يرجع شفاف كل ما
     يصير تحديث ويضل يبان "مختفي" فعليًا أغلب الوقت. الحل: الختم
     مرئي 100% دايمًا (بدون أنيميشن شفافية)، والحركة (الدوران/الحجم)
     بس على النص الداخلي — حتى لو انقطعت الأنيميشن بمنتصفها، النص
     يضل واضح تمامًا.
  */
}

.vote-stamp span {
  position: relative;
  display: inline-block;
  padding: 5px 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--crimson-soft);
  background: rgba(18, 14, 27, 0.82);
  border: 3px solid var(--crimson-soft);
  border-radius: 8px;
  animation: bw-stamp-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes bw-stamp-pop {
  0% { transform: rotate(-7deg) scale(0.7); }
  100% { transform: rotate(-7deg) scale(1); }
}

.vote-stamp span::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px solid var(--crimson-soft);
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .vote-stamp span { animation: none; transform: rotate(-7deg); }
}

.vote-option .who { font-weight: 600; }
.vote-option .text { color: var(--ink-muted); font-size: 0.85rem; margin-top: 2px; }

/* بطاقة اللاعب نفسه بشاشة التصويت — نفس شكل البقية بالضبط بس ما تنضغط */
.vote-option.me { opacity: 0.75; cursor: default; }
.vote-option.me .who { display: flex; align-items: center; gap: 6px; }

/* ---------- ظهور تدريجي (إجابات، أصوات التصويت) ---------- */

.pop-in { animation: bw-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes bw-pop-in {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pop-in { animation: none; }
}

/* ---------- شاشة "مين صوّت على مين" ---------- */

.tally-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-panel-raised);
  border-radius: 14px;
  padding: 10px 14px;
  min-height: 58px;
}

.tally-row .who { font-weight: 600; }

.tally-voters {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: -8px;
}

.tally-voter-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-panel-raised);
  margin-inline-start: -10px;
  background: var(--bg-void);
}

.tally-voter-avatar:first-child { margin-inline-start: 0; }

.fade-in-btn { animation: bw-fade-up 0.4s ease both; }

.invisible-hold { visibility: hidden; }

.progress-note { text-align: center; color: var(--ink-faint); font-size: 0.85rem; }

/* ---------- صف صور "مين خلص" (بدل نص X من Y) ---------- */

.progress-avatars {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.progress-avatar-wrap { position: relative; flex: 0 0 auto; }

.progress-avatar-wrap.pending .avatar { opacity: 0.32; filter: grayscale(70%); }

.progress-avatar-wrap.done .avatar {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 2px var(--success);
}

.progress-check {
  position: absolute;
  inset: auto -3px -3px auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--success);
  color: #0c2013;
  font-size: 0.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-void);
  /* الأنيميشن نفسها تجيها من .pop-in (تُضاف بـJS مرة وحدة بس لكل
     علامة ✓ جديدة) — بدون تعريف animation ثابت هنا حتى ما تشتغل من
     جديد مع كل إعادة رسم للشاشة. */
}

/* ---------- الكشف ---------- */

.reveal-hero {
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(200,72,61,0.28), transparent 65%);
  border: 1px solid rgba(200,72,61,0.4);
  border-radius: 20px;
  padding: 34px 20px;
}

.reveal-hero .lead { color: var(--ink-muted); font-size: 0.95rem; }
.reveal-hero .who { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.8rem); color: var(--crimson-soft); margin-top: 8px; }

/* مرحلة التشويق قبل الكشف: علامة استفهام تنبض */
.reveal-hero.suspense {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.suspense-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--crimson-soft);
  margin-top: 16px;
  animation: bw-suspense-pulse 0.6s ease-in-out infinite;
}

@keyframes bw-suspense-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.22); opacity: 1; }
}

/* لحظة الكشف: يظهر فجأة بحركة "pop" */
.reveal-hero.pop { animation: bw-reveal-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes bw-reveal-pop {
  0% { transform: scale(0.55); opacity: 0; }
  65% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.reveal-questions { animation: bw-fade-up 0.45s ease both; }

@keyframes bw-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .suspense-mark, .reveal-hero.pop, .reveal-questions { animation: none; }
}

.two-q { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.two-q > div { background: var(--bg-panel-raised); border-radius: 14px; padding: 14px; }

.two-q .tag { font-size: 0.72rem; color: var(--ink-faint); margin-bottom: 6px; }

.two-q .main .tag { color: var(--ink-muted); }

.two-q .odd .tag { color: var(--crimson-soft); }

@media (max-width: 420px) {
  .two-q { grid-template-columns: 1fr; }
}

/* ---------- النتائج ولوحة المتصدرين ---------- */

.score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel-raised);
  border-radius: 12px;
  padding: 10px 12px;
}

.score-row .rank { font-family: var(--font-display); color: var(--ink-faint); width: 22px; text-align: center; }
.score-row .name { flex: 1; font-weight: 600; }
.score-row .delta { font-size: 0.85rem; color: var(--success); }
.score-row .delta.zero { color: var(--ink-faint); }
.score-row .total { font-family: var(--font-display); color: var(--amber-soft); font-size: 1.1rem; }

.score-row.first { border: 1px solid rgba(231,169,61,0.45); }

/* ---------- النتائج النهائية ---------- */

.winner-hero {
  text-align: center;
  padding: 20px 10px 6px;
}

.winner-hero .label { color: var(--ink-muted); font-size: 0.9rem; }

.winner-names {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  color: var(--amber-soft);
  margin-top: 8px;
  filter: drop-shadow(0 6px 24px rgba(231,169,61,0.35));
}


.link-btn { background: none; border: none; color: var(--ink-faint); text-decoration: underline; font-size: 0.85rem; padding: 6px; }

/* ---------- شريط الحساب (فوق يمين) ---------- */

.account-bar {
  position: fixed;
  top: calc(14px + var(--safe-top));
  right: 14px;
  z-index: 60;
}

.account-cluster {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.6);
}

.account-btn.login { color: var(--amber-soft); border-color: rgba(231,169,61,0.4); }

.account-btn:hover { border-color: var(--amber); color: var(--amber-soft); }

.account-btn .avatar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 auto;
}

/* ---------- حالة الاشتراك (مجاني/مفعل) ---------- */

.status-pill {
  display: flex;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.6);
  color: var(--ink-muted);
}

.status-pill.active { color: var(--success); border-color: rgba(111,174,127,0.45); }
.status-pill.free { color: var(--ink-faint); }

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 61;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  min-width: 170px;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.7);
  animation: bw-fade-up 0.15s ease both;
}

.account-menu .who-email { color: var(--ink-faint); font-size: 0.76rem; padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; word-break: break-all; }

.account-menu-item {
  width: 100%;
  text-align: right;
  background: none;
  border: none;
  color: var(--crimson-soft);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px;
  border-radius: 10px;
}

.account-menu-item:hover { background: var(--bg-panel-raised); }

.status-menu {
  min-width: 220px;
  padding: 14px;
}

.status-detail-title { font-weight: 800; color: var(--amber-soft); font-size: 0.95rem; }
.status-detail-title.muted { color: var(--ink-faint); font-weight: 600; font-size: 0.88rem; }

.status-detail-dates {
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.status-detail-dates .date-activated { color: var(--success); }
.status-detail-dates .date-expires { color: var(--crimson-soft); }

/* ---------- نافذة تسجيل الدخول / إنشاء حساب ---------- */

.auth-switch-note { text-align: center; font-size: 0.85rem; color: var(--ink-muted); }
.auth-switch-note button {
  background: none;
  border: none;
  color: var(--amber-soft);
  font-weight: 700;
  text-decoration: underline;
  font-size: inherit;
  padding: 0 2px;
}

/* ---------- قفل خيارات اللعب التجريبي (عدد الجولات) ---------- */

.locked-option { opacity: 0.4; }

/* لا نضيف أنيميشن opacity/دخول هنا عمدًا — هذا العنصر يُعاد إنشاؤه
   بكل إعادة رسم للشاشة طول ما الاتصال منقطع (أي تحديث ثاني بأي مكان
   بالتطبيق يعيد بناء الصفحة كاملة)، وأي أنيميشن opacity كان بيرجع
   يشتغل من الصفر كل مرة فيبان "يرمش" بدل ما يثبت ظاهر بهدوء. */
.reconnect-banner {
  position: fixed;
  top: calc(12px + var(--safe-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg-panel);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  padding: 8px 18px;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.7);
  max-width: calc(100vw - 32px);
}

.global-toast {
  position: fixed;
  bottom: calc(24px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--amber-soft);
  background: var(--bg-panel);
  border: 1px solid rgba(231,169,61,0.4);
  border-radius: 100px;
  padding: 10px 20px;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.7);
  animation: bw-fade-up 0.2s ease both;
  max-width: calc(100vw - 32px);
}

/* ---------- رقم إصدار اللعبة + سجل التحديثات ---------- */

.version-badge-wrap {
  position: fixed;
  bottom: calc(8px + var(--safe-bottom));
  left: 10px;
  z-index: 55;
}

.version-badge {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 0.62rem;
  opacity: 0.55;
  padding: 4px 6px;
  font-family: var(--font-body);
}

.version-badge:hover { opacity: 1; color: var(--amber-soft); }

.changelog-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 56;
  width: min(300px, calc(100vw - 32px));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.7);
  animation: bw-fade-up 0.15s ease both;
}

.changelog-entry + .changelog-entry {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.changelog-version {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--amber-soft);
  margin-bottom: 6px;
}

.changelog-items {
  margin: 0;
  padding-inline-start: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.5;
}

.changelog-items .changelog-bold { font-weight: 800; color: var(--amber-soft); }
.changelog-items .changelog-red { color: var(--crimson-soft); }

.home-btn {
  position: fixed; top: calc(14px + var(--safe-top)); left: 14px; z-index: 60;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel, #1e1730); border: 1px solid var(--line, #362a4f); color: var(--ink-muted, #9c90b3);
  text-decoration: none;
}
.home-btn svg { width: 20px; height: 20px; }
.home-btn:hover { color: var(--accent-soft, #ffb3d6); border-color: var(--accent, #ff8fc0); }

/* علامة X موحّدة (shared/icons.js) — بالنص تمامًا داخل أي زر */
.x-ico { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; flex: 0 0 auto; }
.x-ico.inline { display: inline-block; width: 0.8em; height: 0.8em; vertical-align: -0.08em; }
.icon-btn, .back-x-btn, .kick-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }