/* ---------- خلفية المشهد ---------- */
#phase-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#phase-bg.on { opacity: 1; }
/* طبقة تعتيم فوق الصورة — بدونها يختفي النص الأبيض على الخلفيات المضيئة */
#phase-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* كان تعتيمًا علويًا بقوة ٠٫٥٥ لأجل الشريط العلوي، وقد اختفى الشريط داخل
       الجولة فلم يبقَ منه إلا بقعة داكنة فوق اللوحة بلا سبب */
    linear-gradient(180deg, rgba(24,24,24,0.1) 0%, transparent 12%, transparent 74%, rgba(24,24,24,0.7) 100%),
    rgba(24, 24, 24, var(--veil, 0.6));
  transition: background 1.2s ease;
}
/* عند وجود صورة نُخفي قماش الصفحة كي تظهر */
body.has-bg { background: transparent; }
body.has-bg #phase-tint { z-index: -1; }

/*
 * فوق الصور تختلف الخلفية تحت كل حرف، فالتباين وحده لا يكفي —
 * ظلٌّ خفيف يضمن قراءة الأسماء على الجدران الفاتحة والسماء معًا.
 */
body.has-bg .seat .sname,
body.has-bg .seat .srole,
body.has-bg .seat .smeta,
body.has-bg #action-hint,
body.has-bg .sc-headline,
body.has-bg .sc-body,
body.has-bg .sc-phase,
body.has-bg .sc-brand {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.55);
}

/* الطاولة الدائرية — الجميع جالسون حولها كما في المجلس الحقيقي */

.mafia-table {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto var(--sp-xs);
  aspect-ratio: 1;
  transition: filter 1.2s ease;
}

/* سطح الطاولة */
.table-felt {
  position: absolute;
  inset: var(--felt-inset, 23%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, #33322f 0%, #211f1d 55%, #131211 100%);
  border: 1px solid #46433d;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.85),
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    0 18px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6%;
  overflow: hidden;
  transition: background 1.4s ease, box-shadow 1.4s ease;
}
/* حلقة ضوء فوق الطاولة */
.table-felt::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.table-center-icon { font-size: clamp(1.6rem, 7vw, 2.6rem); line-height: 1.1; }
.table-center-text {
  font-size: clamp(0.7rem, 2.6vw, 0.95rem);
  color: var(--body);
  line-height: 1.5;
  margin-top: 6px;
  max-width: 16ch;
}
.table-center-text b { color: var(--ink); }

/* خطوط التصويت */
.vote-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.vote-lines line {
  stroke: var(--primary);
  stroke-width: 0.5;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 2 1.6;
  animation: voteFlow 1.2s linear infinite;
}
@keyframes voteFlow { to { stroke-dashoffset: -7.2; } }

/* المقاعد */
.seat {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  /* العرض يأتي من JS حسب عدد اللاعبين كي لا يتزاحم ١٦ مقعدًا */
  width: clamp(42px, var(--seat-w, 17%), 96px);
  text-align: center;
  transition: opacity 0.5s ease, transform 0.25s ease;
}
.seat .chair {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--canvas-elevated);
  border: 2px solid #43413c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.3rem, 5vw, 2.1rem);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* بورتريه الشخصية يملأ المقعد الدائري كاملًا */
.seat .chair img.av {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: opacity 0.4s ease, filter 0.4s ease;
}
/*
 * شريط الاسم أوسع من الكرسي ومتوسّط عليه، بسطر واحد. الالتفاف على سطرين
 * كان يمدّ الاسم عرضًا فيصطدم بجاره حين يكتمل العدد.
 */
.seat .sname {
  font-size: calc(clamp(0.62rem, 2.2vw, 0.82rem) * var(--name-fs, 1));
  font-weight: 700;
  margin-top: 5px;
  line-height: 1.25;
  width: calc(var(--label-scale, 1) * 100%);
  /* الهامش السالب يوزّع الزيادة على الجهتين، فيبقى الشريط متوسّطًا على المقعد */
  margin-inline-start: calc((100% - var(--label-scale, 1) * 100%) / 2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat .srole, .seat .smeta {
  width: calc(var(--label-scale, 1) * 100%);
  margin-inline-start: calc((100% - var(--label-scale, 1) * 100%) / 2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * السطران يحملان أحسم ما على المقعد: دور الميت المكشوف، واسم زميل المافيا،
 * وحالة «غير متصل». كانا ٨ إلى ١١٫٥px — أصغر من أن يُقرأ على جوال. الحدّ
 * الأدنى للـ clamp هو ما يحكم على الشاشات الضيقة، فرُفع هو قبل الأعلى.
 * وحدّان يمنعان من الزيادة أكثر: شريط الاسم ضيّق فتُقصّ أسماء الأدوار
 * الطويلة («صاحب البارودة») بالنقاط، ونصف كل زيادة رأسية ينزل تحت مركز
 * المقعد السفلي وما بينه وبين حافة الشاشة عند ١١ لاعبًا وارتفاع ٧٠٠px
 * لا يتجاوز ٦px. القيمتان هنا مقيستان على الحدّين معًا.
 */
.seat .srole {
  /*
   * أسماء الأدوار في السيناريوهات المخصّصة تطول («صاحب البارودة»، «المرشد
   * الطلابي»)، وعرض المقعد على ٣٢٠px لا يسعها عند هذا المقاس فتُقصّ بالنقاط.
   * الأرضية أدنى قليلًا في أضيق الشاشات وحدها: ١٠٫٥px تسع أكثرها وتبقى أوضح
   * من ٨٫٨px التي كانت. وإطالتها سطرين ممنوعة هنا لأنها تدفع الصفّ السفلي
   * تحت حافة الشاشة، وذاك خلل أُصلح للتوّ.
   */
  font-size: clamp(0.7rem, 2.1vw, 0.82rem);
  /* الأحمر الأساسي لخلفيات وحدود لا لنصّ بهذا الصغر — ونظيره الفاتح يقرأ */
  color: var(--primary-ink);
  font-weight: 700;
  line-height: 1.2;
}
.seat .smeta {
  /* بحجم سطر الدور على الجوال — يفرّق بينهما الوزن واللون لا المقاس */
  font-size: clamp(0.7rem, 2vw, 0.78rem);
  color: var(--muted);
  line-height: 1.25;
}

/* أنا */
.seat.me .chair { border-style: dashed; border-color: var(--muted); }
.seat.me .sname::after { content: " (أنت)"; color: var(--muted); font-weight: 400; }

/* قابل للاختيار */
.seat.selectable { cursor: pointer; }
.seat.selectable .chair { border-color: var(--ink); }
.seat.selectable:hover { transform: translate(-50%, -50%) scale(1.07); }
/*
 * الكرسي هو زرّ الاختيار (role=button في client.js)، فحلقة تركيزه يجب أن
 * تُرى فوق قماش داكن وفوق بورتريه فاتح معًا: ذهب الفانوس بثلاثة بكسل وبفراغ
 * يفصلها عن حدّ الكرسي. outline لا box-shadow كي لا تُبطلها هالة المقعد المختار.
 */
.seat .chair:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
}
.seat.selected .chair {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.35);
  background: #3c2320;
}

/* ميت — المقعد يميل، والصورة تبهت، وشاهدة صغيرة في الزاوية */
.seat.dead { opacity: 0.45; }
.seat.dead .chair { transform: rotate(-14deg); border-color: #3a3532; background: #262322; }
.seat.dead .av { filter: grayscale(1); opacity: 0.5; }
.seat.dead .sname { text-decoration: line-through; }
/* الشارات على المقعد لا على الكرسي — الكرسي يقصّ ما يخرج عنه */
/* شاهدة الموت: أيقونة البكسل آرت بدل الإيموجي — تتماشى مع فن اللعبة */
.seat.dead::after {
  content: "";
  position: absolute;
  bottom: 34%; left: -4px;
  width: clamp(14px, 2.8vw, 22px);
  height: clamp(14px, 2.8vw, 22px);
  background: url("/icons/dead@sm.webp") center/contain no-repeat;
  image-rendering: pixelated;
  z-index: 4;
}
/*
 * لحظة السقوط على المقعد: ارتجافة قصيرة، ثم يشحب اللون ويميل الكرسي.
 * التسلسل متعمَّد — الارتجافة تلفت النظر، والشحوب يقول «انتهى» بلا كلمة.
 */
.seat.just-died .chair { animation: seatFall 1.15s var(--ease-out) both; }
@keyframes seatFall {
  0%   { transform: none; background: rgba(218, 41, 28, 0.6); box-shadow: 0 0 0 0 rgba(218, 41, 28, 0.55); }
  8%   { transform: translateX(-3px) rotate(-2deg); }
  16%  { transform: translateX(3px) rotate(2deg); }
  24%  { transform: translateX(-2px) rotate(-1deg); }
  32%  { transform: translateX(2px) rotate(1deg); box-shadow: 0 0 0 14px rgba(218, 41, 28, 0); }
  45%  { transform: rotate(7deg) translateY(-5px); }
  100% { transform: rotate(-14deg); }
}
.seat.just-died .av { animation: fadeToGrey 1.15s var(--ease-out) both; }
@keyframes fadeToGrey {
  0%   { filter: none; opacity: 1; }
  35%  { filter: brightness(1.5) saturate(0.6); }
  100% { filter: grayscale(1); opacity: 0.5; }
}
/* حلقة تتمدّد وتتلاشى من المقعد — الصدى البصري للسقوط */
.seat.just-died::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 2px solid rgba(218, 41, 28, 0.7);
  animation: deathRipple 1.1s var(--ease-out) forwards;
  pointer-events: none;
  z-index: 3;
}
@keyframes deathRipple {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* غير متصل */
.seat.away .chair { opacity: 0.5; border-style: dotted; }

/* عدّاد الأصوات */
.seat .vbadge {
  position: absolute;
  top: -6px; left: -6px;
  background: var(--primary);
  color: var(--ink);
  border-radius: 9999px;
  min-width: 22px;
  padding: 1px 7px;
  font-size: 0.75rem;
  font-weight: 800;
  animation: vbPop 0.25s ease;
  z-index: 3;
}
@keyframes vbPop { from { transform: scale(0.3); } 70% { transform: scale(1.25); } }

/* الليل: الجميع نائمون */
.mafia-table.phase-night .table-felt {
  background: radial-gradient(circle at 50% 32%, #1e2338 0%, #141728 55%, #0b0d18 100%);
}
.mafia-table.phase-night .seat:not(.dead) .av { opacity: 0.42; filter: brightness(0.7); }
.mafia-table.phase-night .seat:not(.dead)::before {
  content: "😴";
  position: absolute;
  top: -4px; right: -4px;
  font-size: clamp(0.75rem, 2.2vw, 1.15rem);
  line-height: 1;
  z-index: 4;
}
.mafia-table.phase-night .seat.selectable .av { opacity: 1; filter: none; }

/* التصويت: توتر أحمر */
.mafia-table.phase-voting .table-felt {
  background: radial-gradient(circle at 50% 32%, #3a2321 0%, #241615 55%, #150d0d 100%);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.85), 0 0 44px rgba(218, 41, 28, 0.16);
}

/* النهاية: كشف */
.mafia-table.phase-ended .seat .chair { filter: none; }

/* رقاقة الإيموجي الطائرة فوق المقعد */
.seat .float-emoji { top: -6px; right: 50%; transform: translateX(50%); }

/* الجلوس حول الطاولة عند بداية اللعبة — يتقدّم كل واحد لمقعده */
.mafia-table.seating .seat { animation: takeSeat 0.75s var(--ease-out) backwards; }
.mafia-table.seating .seat:nth-of-type(1) { animation-delay: 0.05s; }
.mafia-table.seating .seat:nth-of-type(2) { animation-delay: 0.13s; }
.mafia-table.seating .seat:nth-of-type(3) { animation-delay: 0.21s; }
.mafia-table.seating .seat:nth-of-type(4) { animation-delay: 0.29s; }
.mafia-table.seating .seat:nth-of-type(5) { animation-delay: 0.37s; }
.mafia-table.seating .seat:nth-of-type(6) { animation-delay: 0.45s; }
.mafia-table.seating .seat:nth-of-type(7) { animation-delay: 0.53s; }
.mafia-table.seating .seat:nth-of-type(8) { animation-delay: 0.61s; }
.mafia-table.seating .seat:nth-of-type(n+9) { animation-delay: 0.69s; }
/* الجلوس: يهبط اللاعب إلى مقعده من فوق مع دورة خفيفة — لا مجرد ظهور */
@keyframes takeSeat {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% - 26px)) scale(0.45) rotate(-8deg); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

/* سطح الطاولة يضيء مع بداية الجولة كأن أحدهم أشعل الفانوس */
.mafia-table.seating .table-felt { animation: feltWake 1.5s var(--ease-out); }
@keyframes feltWake {
  0%   { opacity: 0.25; box-shadow: inset 0 0 0 0 rgba(224, 169, 59, 0); }
  40%  { box-shadow: inset 0 0 70px 10px rgba(224, 169, 59, 0.22); }
  100% { opacity: 1; box-shadow: inset 0 0 0 0 rgba(224, 169, 59, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .vote-lines line,
  .seat.just-died .chair,
  .seat.just-died .av,
  .seat.just-died::before,
  .mafia-table.seating .seat,
  .mafia-table.seating .table-felt { animation: none !important; }
  .seat.just-died::before { display: none; }
}

/*
 * قلب الطاولة لحظة السقوط. المركز خالٍ من المقاعد بحكم توزيعها على الدائرة،
 * فهو المكان الوحيد المضمون ألّا يحجب لاعبًا مهما كان عددهم.
 */
.table-felt.spotlight {
  background: radial-gradient(circle at 50% 40%, #4a1512 0%, #2a0d0b 55%, #150706 100%);
  border-color: rgba(218, 41, 28, 0.55);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.85),
    0 0 46px rgba(218, 41, 28, 0.28),
    0 18px 50px rgba(0, 0, 0, 0.6);
  animation: spotWake 0.5s var(--ease-out);
}
@keyframes spotWake { from { transform: scale(0.94); } }

.fallen-name {
  font-size: clamp(0.95rem, 3.4vw, 1.5rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 4px;
  text-shadow: 0 0 26px rgba(218, 41, 28, 0.6);
  animation: fallenIn 0.5s var(--ease-out) 0.08s backwards;
  max-width: 14ch;
}
.fallen-note {
  font-size: clamp(0.62rem, 2.2vw, 0.82rem);
  color: #e0a4a0;
  margin-top: 3px;
  animation: fallenIn 0.5s var(--ease-out) 0.18s backwards;
}
@keyframes fallenIn { from { opacity: 0; transform: translateY(9px); } }

@media (prefers-reduced-motion: reduce) {
  .table-felt.spotlight, .fallen-name, .fallen-note { animation: none !important; }
}

/*
 * أضيق الشاشات (آيفون SE وما دونه): عرض المقعد لا يسع أطول أسماء الأدوار
 * عند الأرضية العامة، فتُقصّ بالنقاط. أرضية أدنى قليلًا تسع أكثرها، وتبقى
 * أوضح كثيرًا من ٨٫٨px التي كانت قبل رفع المقاس.
 */
@media (max-width: 360px) {
  .seat .srole { font-size: 0.66rem; }
  .seat .smeta { font-size: 0.66rem; }
}