/* ═══════════ كمين ═══════════ */
:root {
  --navy-0: #0a0e22;
  --navy-1: #111631;
  --navy-2: #1b2247;
  --gold: #f2b134;
  --gold-soft: #ffd57a;
  --gold-deep: #c98a12;
  --cream: #fdf6e3;
  --clay: #e0603c;
  --clay-deep: #a53a1d;
  --ok: #34d399;
  --muted: #8b96b8;
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  font-family: "Tajawal", system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% -20%, var(--navy-2), var(--navy-0) 70%);
  color: var(--cream);
  min-height: 100dvh;
  display: flex; flex-direction: column;
  overflow-x: hidden;
}

/* حشوة علوية موحّدة تحجز مكان عنقود الأزرار الثابت — ما يركب على البطل أبداً */
.screen { display: none; flex: 1; position: relative; padding: 64px 16px calc(16px + var(--sahra-bar-h, 0px)); }
.screen.active { display: flex; flex-direction: column; }

/* نجوم الخلفية */
.stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stars::before, .stars::after {
  content: "✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦";
  position: absolute; inset: 0;
  color: rgba(242, 177, 52, 0.12);
  font-size: 22px; letter-spacing: 48px; line-height: 120px;
  white-space: pre-wrap;
}
.stars::after { transform: translate(60px, 60px) scale(1.4); opacity: 0.5; }

/* ═══════════ البداية ═══════════ */
.start-inner {
  margin: auto; width: min(1240px, 100%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative; z-index: 1;
}
/* لوحة البطل الكبيرة — نجمة الشاشة: نسبة المصدر بالضبط 1024×585، بلا قص */
.hero-art {
  position: relative;
  width: min(1150px, 92vw, calc(64dvh * (1024 / 585)));
  aspect-ratio: 1024 / 585;
  border-radius: 22px; overflow: hidden;
  border: 4px solid var(--gold);
  box-shadow: 0 0 60px rgba(242, 177, 52, 0.3), 0 18px 50px rgba(0,0,0,0.5);
  animation: bob 6s ease-in-out infinite;
}
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-0.15deg);} 50% { transform: translateY(-6px) rotate(0.15deg);} }

/* الاسم والسطر التعريفي فوق اللوحة — سكرين خفيف تحت النص فقط */
.hero-overlay {
  position: absolute; right: 0; left: 0; bottom: 0;
  padding: clamp(30px, 7vw, 90px) clamp(12px, 3vw, 40px) clamp(10px, 2.2vw, 26px);
  background: linear-gradient(180deg, rgba(10,14,34,0) 0%, rgba(10,14,34,0.55) 45%, rgba(10,14,34,0.92) 100%);
}
.logo { font-size: clamp(30px, 6vw, 86px); font-weight: 900; line-height: 1.1; }
.logo-kameen { color: var(--clay); text-shadow: 0 0 26px rgba(224, 96, 60, 0.5), 0 4px 0 var(--clay-deep); }
.tagline { margin-top: 4px; font-size: clamp(11.5px, 1.6vw, 21px); color: #e8ddcd; font-weight: 500; text-shadow: 0 2px 8px rgba(0,0,0,.7); }

/* الزر الرئيسي الوحيد تحت اللوحة مباشرة */
.btn-hero {
  width: auto; min-width: min(440px, 92vw);
  margin-top: clamp(16px, 3vh, 28px);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  padding: 0.85em 3em;
}

.setup-card {
  margin-top: clamp(30px, 7vh, 70px); width: min(720px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(242,177,52,0.25);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(6px);
}
.how-row { display: flex; gap: clamp(6px, 1.2vw, 10px); }
.how-step {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--navy-1); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: clamp(10px, 1.8vw, 14px) 8px;
  font-size: clamp(11.5px, 1.7vw, 14px); font-weight: 700; color: #b9c3e0; line-height: 1.5;
}
.how-step span { color: var(--gold-soft); display: block; }
.how-step span svg { width: clamp(24px, 3.2vw, 32px); height: auto; }

/* زر سهرة الموحّد: حبّة (pill) بتدرج ذهبي وظل ناعم — لغة فهيم */
.btn-big {
  margin-top: 22px; width: 100%;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  color: var(--navy-0);
  border: none; border-radius: 999px;
  padding: 0.85em 2.2em; font-family: inherit;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(242,177,52,0.35);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.btn-big:hover { filter: brightness(1.06); }
.btn-big:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(242,177,52,0.3); }
.btn-big:disabled { filter: grayscale(0.75) brightness(0.7); cursor: default; box-shadow: none; }
.hint { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* وصف اللعبة تحت البطل */
.intro-desc {
  margin: clamp(16px, 3vh, 26px) auto 0; max-width: min(760px, 92vw);
  font-size: clamp(14px, 2vw, 18px); font-weight: 600; line-height: 1.9; color: #d9e0f2;
}
.intro-desc b { color: var(--gold-soft); }

/* عنوان قسم */
.section-label {
  margin: clamp(30px, 6vh, 56px) auto clamp(14px, 2vh, 20px);
  font-size: clamp(16px, 2.4vw, 22px); font-weight: 900; color: var(--gold-soft);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
}
.section-label::before, .section-label::after {
  content: ""; width: clamp(24px, 6vw, 60px); height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold)); border-radius: 2px;
}
.section-label::before { background: linear-gradient(90deg, var(--gold), transparent); }

/* بطاقات الأدوار الكبيرة — شريط منزلق */
.roles-showcase {
  display: flex; gap: clamp(12px, 1.8vw, 18px); width: min(1100px, 100%);
  overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: none;
}
.roles-showcase::-webkit-scrollbar { height: 8px; }
.roles-showcase::-webkit-scrollbar-thumb { background: rgba(242,177,52,0.3); border-radius: 999px; }
.roles-showcase .rc-big { flex: 0 0 clamp(255px, 80vw, 320px); scroll-snap-align: center; }
.rc-big {
  display: flex; gap: 0; text-align: right; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12); border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.rc-big:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,0.5); }
.rc-big.rc-town { border-color: rgba(242,177,52,0.4); }
.rc-big.rc-threat { border-color: rgba(224,96,60,0.45); }
.rc-art { flex: 0 0 clamp(96px, 26%, 140px); position: relative; }
.rc-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rc-art::after { content: ""; position: absolute; inset: 0; box-shadow: inset -18px 0 24px -12px rgba(17,22,49,0.9); }
.rc-body { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.rc-team {
  font-size: 11px; font-weight: 900; letter-spacing: .5px; align-self: flex-start;
  border-radius: 999px; padding: 2px 10px;
  background: rgba(242,177,52,0.14); color: var(--gold-soft); border: 1px solid rgba(242,177,52,0.4);
}
.rc-threat .rc-team { background: rgba(224,96,60,0.16); color: #ff9a7a; border-color: rgba(224,96,60,0.5); }
.rc-name { font-size: clamp(18px, 2.6vw, 23px); font-weight: 900; color: var(--cream); }
.rc-threat .rc-name { color: #ff9a7a; }
.rc-desc { font-size: clamp(12px, 1.7vw, 14px); font-weight: 600; line-height: 1.7; color: #b9c3e0; }

/* أوراق اللعب — شريط منزلق */
.cards-showcase {
  display: flex; gap: clamp(10px, 1.5vw, 14px); width: min(1100px, 100%);
  overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: none;
}
.cards-showcase::-webkit-scrollbar { height: 8px; }
.cards-showcase::-webkit-scrollbar-thumb { background: rgba(242,177,52,0.3); border-radius: 999px; }
.pc {
  flex: 0 0 clamp(148px, 42vw, 186px); scroll-snap-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(242,177,52,0.28); border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35); display: flex; flex-direction: column;
  transition: transform 0.15s, border-color 0.15s;
}
.pc:hover { transform: translateY(-4px); border-color: var(--gold); }
.pc img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--navy-1); }
.pc-b { padding: 10px 12px 12px; text-align: right; }
.pc-b h4 { font-size: clamp(15px, 2.1vw, 18px); font-weight: 900; color: var(--gold-soft); }
.pc-b p { margin-top: 3px; font-size: clamp(11px, 1.5vw, 13px); font-weight: 600; line-height: 1.6; color: #b9c3e0; }
.slide-hint { margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 700; }

/* شريط لقطات اللعبة */
.shots-strip {
  display: flex; gap: clamp(10px, 1.5vw, 16px); width: min(1100px, 100%);
  overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: none;
  margin-top: clamp(14px, 2vh, 22px);
}
.shots-strip::-webkit-scrollbar { height: 8px; }
.shots-strip::-webkit-scrollbar-thumb { background: rgba(242,177,52,0.3); border-radius: 999px; }
.shot {
  flex: 0 0 clamp(220px, 40vw, 320px); scroll-snap-align: center;
  border-radius: 14px; overflow: hidden; position: relative;
  border: 2px solid rgba(242,177,52,0.3); background: var(--navy-1);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.shot figcaption {
  position: absolute; right: 0; left: 0; bottom: 0; padding: 8px 12px;
  background: linear-gradient(0deg, rgba(10,14,34,0.92), transparent);
  font-size: 13px; font-weight: 800; color: var(--cream); text-align: right;
}
/* لقطة بلا صورة بعد — إطار فيلم أنيق يُستبدل تلقائياً لمّا نضيف webp */
.shot.empty { aspect-ratio: 16 / 10; }
.shot.empty img { display: none; }
.shot.empty::before {
  content: "📷"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; opacity: .5;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px), var(--navy-1);
}

/* ═══════════ الصالة ═══════════ */
.lobby-inner {
  margin: auto; width: min(980px, 100%);
  position: relative; z-index: 1; text-align: center;
}
.lobby-title { font-size: clamp(24px, 5vw, 36px); font-weight: 900; margin-bottom: 18px; }
/* نفس التركيب بكل المقاسات — عمود التلميح + عمود اللاعبين جنب بعض دائماً */
.lobby-cols { display: flex; gap: clamp(12px, 2.2vw, 22px); align-items: flex-start; justify-content: center; }
.qr-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 1 clamp(120px, 26vw, 260px); }
.join-cue { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 18px 8px; animation: cue 1.6s infinite; text-align: center; }
.join-cue .cue-arrow { width: clamp(24px, 3.4vw, 34px); height: auto; color: var(--gold); }
.join-cue div { font-size: clamp(.88rem, 1.6vw, 1.05rem); font-weight: 800; line-height: 1.7; color: #b9c3e0; }
.join-cue small { font-weight: 700; font-size: clamp(.68rem, 1.2vw, .8rem); opacity: .75; }
.join-cue b { color: var(--gold-soft); }
@keyframes cue { 50% { transform: translateY(5px); } }

.roster-col { flex: 1; min-width: 0; max-width: 460px; text-align: right; }
.roster-head { font-size: 18px; font-weight: 900; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.count-pill { background: var(--gold); color: var(--navy-0); border-radius: 999px; padding: 1px 12px; font-size: 15px; }

.roster { display: flex; flex-wrap: wrap; gap: 8px; }
.p-chip {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.16);
  border-radius: 999px; padding: 6px 12px;
  font-size: 15px; font-weight: 800;
  animation: pop-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.p-chip .av { font-size: 20px; }
.p-chip.off { opacity: 0.45; border-style: dashed; }
.p-chip .kick {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; font-family: inherit; padding: 0 2px;
}
.p-chip .kick:hover { color: var(--clay); }
@keyframes pop-in { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* شرح الأدوار في الصالة */
.roles-brief {
  margin-top: 18px;
  background: var(--navy-1); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 8px 14px;
}
.rb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-size: 15px; font-weight: 800; text-align: right;
}
.rb-row:last-child { border-bottom: none; }
.rb-ico {
  width: clamp(38px, 5.4vw, 52px); height: clamp(38px, 5.4vw, 52px); border-radius: 12px; object-fit: cover; object-position: top;
  border: 2px solid rgba(242,177,52,0.45); flex-shrink: 0;
}
.rb-name { color: var(--gold-soft); white-space: nowrap; }
.rb-hint { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.55); line-height: 1.5; }
.cfg-warn {
  margin-top: 10px; font-size: 14px; font-weight: 800; color: var(--clay);
  background: rgba(224, 96, 60, 0.1); border: 1px dashed var(--clay);
  border-radius: 10px; padding: 8px 12px;
}
.roster-col .btn-big { margin-top: 14px; font-size: 19px; }

/* ═══════════ الطاولة ═══════════ */
.game-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  width: min(1200px, 100%); margin: 0 auto;
}
.phase-chip {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--navy-0); font-weight: 900; font-size: clamp(15px, 2.6vw, 20px);
  border-radius: 999px; padding: 8px 20px;
  box-shadow: 0 0 24px rgba(242,177,52,0.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.deck-info { flex: 1; font-size: clamp(12px, 2vw, 15px); font-weight: 700; color: #b9c3e0; }
.btn-mini {
  background: none; border: 1px solid rgba(255,255,255,0.25); color: var(--muted);
  border-radius: 10px; padding: 6px 12px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn-mini:hover { color: var(--clay); border-color: var(--clay); }

.narration {
  position: relative; z-index: 1;
  text-align: center; margin: 12px auto 4px;
  font-size: clamp(17px, 3.4vw, 27px); font-weight: 900;
  width: min(1000px, 100%); line-height: 1.5;
  min-height: 1.5em;
}
.narration b { color: var(--gold-soft); }

.seats { position: absolute; inset: 0; z-index: 3; }
.seat {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(114px, 12.5vw, 156px);
  background: linear-gradient(180deg, rgba(20,20,27,0.82), rgba(12,12,18,0.72));
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  padding: 10px 7px 8px;
  text-align: center;
  transition: opacity 0.4s, filter 0.4s, border-color 0.25s, box-shadow 0.25s;
}
.seat .av { font-size: clamp(34px, 5vw, 50px); display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); }
.seat .nm { margin-top: 4px; font-size: clamp(13px, 1.9vw, 16px); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat.turn {
  border-color: var(--gold); box-shadow: 0 0 30px rgba(242,177,52,0.5);
  transform: translate(-50%, calc(-50% - 4px)); z-index: 5;
}
.seat.turn::before {
  content: "دوره"; position: absolute; top: -12px; right: 50%; transform: translateX(50%);
  background: var(--gold); color: var(--navy-0); font-weight: 900; font-size: 12px;
  border-radius: 999px; padding: 2px 12px; white-space: nowrap;
}
.seat.awaited { border-color: var(--clay); box-shadow: 0 0 26px rgba(224,96,60,0.4); animation: throbCenter 1.1s ease-in-out infinite; z-index: 5; }
@keyframes throbCenter { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.04); } }
.seat.awaited::before {
  content: "ننتظره…"; position: absolute; top: -12px; right: 50%; transform: translateX(50%);
  background: var(--clay); color: #fff; font-weight: 900; font-size: 12px;
  border-radius: 999px; padding: 2px 12px; white-space: nowrap;
}
@keyframes throb { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.seat.dead { opacity: 0.5; filter: grayscale(1); }
.seat.dead::after { content: "☠️"; position: absolute; top: 6px; left: 8px; font-size: 22px; filter: none; }
.seat.off { border-style: dashed; }

/* الأرواح: قلوب ممتلئة + فاضية، والرقم جنبها (ما نعتمد على اللون وحده) */
.hearts { margin-top: 4px; font-size: clamp(12px, 1.8vw, 15px); font-weight: 900; letter-spacing: 1px; }
.hearts .full { color: var(--clay); }
.hearts .lost { color: rgba(255,255,255,0.22); }
.hearts .num { color: var(--muted); font-size: 0.85em; margin-right: 4px; }

.seat .role-badge {
  margin-top: 4px; display: inline-block;
  font-size: clamp(10px, 1.5vw, 12px); font-weight: 900;
  border-radius: 999px; padding: 2px 10px;
  background: rgba(242,177,52,0.16); color: var(--gold-soft);
  border: 1px solid rgba(242,177,52,0.4);
}
.seat .role-badge.threat { background: rgba(224,96,60,0.16); color: #ff9a7a; border-color: rgba(224,96,60,0.5); }
/* «على الأرض» — عدّة اللاعب مكشوفة كأوراق لعب حقيقية قدّامه (بانق ستايل) */
.seat .ground-lbl {
  margin-top: 8px; font-size: 10px; font-weight: 900; letter-spacing: 1px;
  color: var(--gold-soft); opacity: .85; text-transform: uppercase;
}
/* رفّ الأرض: خلفية سجّاد خفيفة تحت الأوراق ليبان إنها «على الأرض» */
.seat .tableau {
  margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  min-height: 6px; padding: 6px 4px; border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(242,177,52,0.05) 0 10px, rgba(224,96,60,0.05) 10px 20px);
}
.seat .tableau:empty { display: none; }
/* بطاقة أرضية طولية: الرسمة المربّعة فوق + شريط الاسم تحت */
.pcard { position: relative; width: 58px; height: 82px; animation: groundIn .34s cubic-bezier(0.2, 1.4, 0.4, 1); }
.pc-face {
  width: 100%; height: 100%; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #3a2c1a, #241a10); border: 2px solid #6b5535;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5); transition: transform .16s ease, box-shadow .16s;
}
/* لوح الرسمة مربّع = نفس نسبة المصدر (400×400) → بلا تشويه ولا قص */
.pc-face img { width: 100%; height: 58px; object-fit: cover; display: block; flex: 0 0 auto; }
.pc-face .pc-lbl {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; line-height: 1.05; text-align: center; color: #ffe6b0;
  background: rgba(0,0,0,0.35); padding: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard.noimg .pc-face img { display: none; }
.pcard.wpn .pc-face { border-color: var(--gold-soft, #f2b134); box-shadow: 0 3px 10px rgba(242,177,52,0.4); }
.pcard.jail .pc-face { border-color: #e0603c; }
.pcard.jail::after {
  content: "⛓️"; position: absolute; top: 2px; right: 3px; font-size: 15px; z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
/* تكبير عند مرور الماوس */
.pcard:hover .pc-face { transform: scale(1.15) translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.6); }
.seat:has(.pcard:hover) { z-index: 60; }
/* شرح البطاقة يطلع فوق (يستغل الفراغ فوق المقاعد) */
.pc-pop {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px) scale(.96);
  width: 208px; background: #14141b; border: 2px solid var(--gold-soft, #f2b134); border-radius: 14px;
  box-shadow: 0 22px 55px rgba(0,0,0,0.75); padding: 12px; z-index: 90; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s, transform .16s;
}
.pcard:hover .pc-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); }
.pc-pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: var(--gold-soft, #f2b134);
}
.pcp-img { width: 128px; height: 128px; border-radius: 10px; object-fit: cover; display: block; margin: 0 auto 8px; border: 1px solid rgba(255,255,255,0.16); }
.pcp-name { font-weight: 900; font-size: 16px; color: #ffe6b0; margin-bottom: 5px; }
.pcp-desc { font-size: 12.5px; line-height: 1.55; color: #e6ecff; }
.pcp-cnt { font-size: 11.5px; color: #ffb38a; margin-top: 7px; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 6px; }

/* ═══════════ المجلس: حلقة اللاعبين + خلفية صحراوية + الرصّة + المسافات ═══════════ */
.majlis { position: relative; flex: 1 1 auto; min-height: 440px; margin-top: 6px; border-radius: 24px; }
/* خلفية المجلس = رسمة صحراوية (لا تدرّج) */
.desert { position: absolute; inset: 0; overflow: hidden; z-index: 0; border-radius: 24px;
  background: #0d0b16 url("assets/bg_majlis.webp?v=3") center 60% / cover no-repeat; transition: filter 1.4s; }
.desert .dune, .desert .fire-glow { display: none; }
/* المواجهة الأخيرة (باقي لاعبان) — يتوتّر الجو */
.majlis.showdown .desert { filter: saturate(1.3) hue-rotate(-18deg) brightness(0.86); }

/* الوسط: الرصّة + المرمية جنب بعض */
.center-field { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); z-index: 2; }

/* الرصّة — كومة سحب يبين عمقها */
.deck { position: relative; width: clamp(72px, 8.6vw, 104px); height: clamp(100px, 12vw, 146px); }
.deck-card { position: absolute; inset: 0; border-radius: 11px;
  background:
    repeating-linear-gradient(45deg, rgba(242,177,52,0.15) 0 5px, transparent 5px 11px),
    linear-gradient(160deg, #3a2c1a, #241a10);
  border: 2px solid #6b5535;
  box-shadow: 0 2px 5px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  transform: translate(calc(var(--i) * -2px), calc(var(--i) * -2.6px)); }
.deck-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: clamp(17px, 2vw, 25px); color: #ffe6b0; z-index: 5; text-shadow: 0 2px 7px rgba(0,0,0,0.85); }
.deck-lbl { position: absolute; left: 0; right: 0; bottom: -21px; text-align: center; z-index: 5;
  font-weight: 800; font-size: 12px; letter-spacing: 1px; color: var(--gold-soft, #ffd57a); }
.deck.empty .deck-card { opacity: .3; }

/* خطوط المسافة في الحلقة */
/* أطراف الحلقة: المسافة تُعدّ حولها، والأخضر يبيّن مدى سلاح صاحب الدور */
.dist-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ring-edge { stroke: rgba(242,177,52,0.22); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; transition: stroke .3s; }
.ring-edge.in { stroke: #5bd07a; stroke-width: 4.5; stroke-dasharray: none; filter: drop-shadow(0 0 5px rgba(91,208,122,0.65)); }

/* شارة المسافة على المقعد (رقم الخطوات من صاحب الدور) */
.dist-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 6;
  min-width: 26px; height: 26px; line-height: 23px; padding: 0 6px; border-radius: 14px;
  background: #14141b; border: 2px solid rgba(255,255,255,0.35); color: #fff;
  font-weight: 900; font-size: 14px; text-align: center; white-space: nowrap; }
.dist-badge.in { border-color: #5bd07a; color: #8ff2ac; box-shadow: 0 0 12px rgba(91,208,122,0.5); }
.dist-badge.scope { left: auto; right: -8px; transform: none; border-color: var(--gold-soft); color: var(--gold-soft); }
.dist-badge .dm { font-style: normal; font-size: 12px; margin-right: 1px; }

/* اليد = أوراق مقلوبة مروّحة (٣ أوراق تبين ٣ كروت) */
.hand-fan { position: relative; height: 36px; margin-top: 9px; display: flex; justify-content: center; align-items: flex-end; }
.hand-fan.empty { height: auto; color: var(--muted); font-size: 11px; font-weight: 800; }
.hc-back { width: 20px; height: 30px; border-radius: 4px; margin: 0 -6px;
  background: repeating-linear-gradient(45deg, #4a3820 0 3px, #2a1f12 3px 6px), #33261544;
  border: 1.5px solid #6b5535; box-shadow: 0 1px 3px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
  transform-origin: bottom center; transform: rotate(calc((var(--k) - (var(--tot) - 1) / 2) * 8deg)); }
.hc-more { align-self: center; font-size: 12px; font-weight: 900; color: var(--gold-soft); margin-right: 5px; }

/* كشف الدور عند الموت — بطاقة تنقلب */
.reveal-card { width: clamp(150px, 21vw, 210px); aspect-ratio: 1 / 1; margin: 0 auto 16px; perspective: 1000px; }
.rc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateY(180deg); animation: revealFlip .95s cubic-bezier(0.34, 1.3, 0.4, 1) .7s forwards; }
@keyframes revealFlip { to { transform: rotateY(0deg); } }
.rc-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; overflow: hidden;
  border: 3px solid var(--gold-soft, #ffd57a); box-shadow: 0 14px 34px rgba(0,0,0,0.6); }
.rc-back { display: flex; align-items: center; justify-content: center; transform: rotateY(180deg);
  background: repeating-linear-gradient(45deg, #4a3820 0 9px, #2a1f12 9px 18px); }
.rc-back span { font-size: clamp(46px, 8vw, 74px); font-weight: 900; color: #7a6238; }
.rc-front { background: #14141b; }
.rc-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-front .rc-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 6px;
  font-weight: 900; font-size: clamp(17px, 2.4vw, 24px); text-align: center;
  background: linear-gradient(transparent, rgba(0,0,0,0.92)); }
.rc-front.good .rc-name { color: #8ff2ac; }
.rc-front.bad .rc-name { color: #ff8a66; }
.rc-front.good { border-color: #5bd07a; }
.rc-front.bad { border-color: #e0603c; }

/* أوراق منحوتة أكثر (emboss) */
.seat .pc-face { box-shadow: 0 3px 9px rgba(0,0,0,0.55), inset 0 1.5px 0 rgba(255,255,255,0.3), inset 0 -4px 8px rgba(0,0,0,0.5); }
.seat .pcard:hover .pc-face { transform: scale(1.22) translateY(-4px); }

/* popover ينقلب للأسفل للمقاعد العلوية */
.seat.flipPop .pc-pop { bottom: auto; top: calc(100% + 10px); transform: translateX(-50%) translateY(-8px) scale(.96); }
.seat.flipPop .pcard:hover .pc-pop { transform: translateX(-50%) translateY(0) scale(1); }
.seat.flipPop .pc-pop::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--gold-soft, #f2b134); }
@keyframes groundIn { from { transform: translateY(-12px) scale(.6) rotate(-6deg); opacity: 0; } }
.seat .handcount { margin-top: 4px; font-size: clamp(11px, 1.6vw, 13px); color: var(--muted); font-weight: 800; }
.seat .kick {
  position: absolute; top: 4px; right: 6px;
  background: none; border: none; color: rgba(255,255,255,0.25);
  font-size: 13px; cursor: pointer; font-family: inherit;
}
.seat .kick:hover { color: var(--clay); }

/* سجل الطاولة */
.table-log {
  position: relative; z-index: 1;
  width: min(900px, 100%); margin: 8px auto 0;
  background: rgba(10, 14, 34, 0.55); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 10px 16px;
  font-size: clamp(12px, 1.9vw, 15px); font-weight: 700; color: #b9c3e0;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 20dvh; overflow: hidden; justify-content: flex-end;
}
.table-log div:last-child { color: var(--cream); font-weight: 900; }

/* ═══════════ الإعلانات ═══════════ */
.announce-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(27,34,71,0.55), rgba(5,6,15,0.94) 75%);
  animation: pop-in 0.3s;
  padding: 20px;
}
.announce-box {
  width: min(680px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(242,177,52,0.35);
  border-radius: 24px;
  padding: 30px 26px;
  text-align: center;
  animation: an-zoom 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
  max-height: 92dvh; overflow-y: auto;
}
@keyframes an-zoom { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.an-art {
  display: block; width: 100%; max-width: 420px; margin: 0 auto;
  border-radius: 16px; border: 2px solid rgba(242,177,52,0.4);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}
.an-art.portrait { max-width: 240px; }
.an-art.wide { max-width: 560px; }
.an-title { margin-top: 10px; font-size: clamp(24px, 6vw, 40px); font-weight: 900; line-height: 1.4; }
.an-title b { color: var(--gold-soft); }
.an-title .bad { color: var(--clay); }
.an-title .good { color: var(--ok); }
.an-sub { margin-top: 8px; font-size: clamp(15px, 3.4vw, 20px); color: #b9c3e0; font-weight: 700; }

.reveal-list { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.rv-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy-1); border-radius: 12px; padding: 8px 14px;
  font-size: 16px; font-weight: 800; text-align: right;
}
.rv-row .av { font-size: 22px; }
.rv-ico { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; object-position: top; border: 2px solid rgba(242,177,52,0.4); }
.rv-row .who { flex: 1; }
.rv-row .role-tag { font-size: 14px; font-weight: 900; color: var(--gold-soft); }
.rv-row.is-threat .role-tag { color: #ff9a7a; }
.rv-row .out { font-size: 13px; color: var(--muted); }

.sc-head { margin: 18px 0 6px; font-size: 13px; font-weight: 900; letter-spacing: 2px; color: var(--muted); }
.sc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px; font-size: 16px; font-weight: 800;
}
.sc-row b { color: var(--gold-soft); }

.an-actions { display: flex; gap: 12px; margin-top: 20px; }
.an-actions .btn-big { margin-top: 0; flex: 2; font-size: 19px; }
.btn-ghost {
  flex: 1; background: none; border: 2px solid rgba(255,255,255,0.3);
  color: var(--cream); border-radius: 999px; font-family: inherit;
  font-size: clamp(14px, 1.9vw, 16px); font-weight: 700; cursor: pointer; padding: 12px;
}

/* ═══════════ «؟» القوانين على السريع ═══════════ */
/* عنقود الأزرار الموحّد — حاوية فلكس وحدة أعلى يمين، بلا إزاحات يدوية (ART-STYLE §9) */
.sahra-chips {
  position: fixed; top: 12px; right: 12px; z-index: 220;
  display: flex; align-items: center; gap: 10px;
}
.sahra-chips .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; min-width: 40px; padding: 0 15px;
  background: #14141be0; color: var(--gold-soft); border: 1.5px solid rgba(242,177,52,0.4);
  border-radius: 999px; font-family: Tajawal, sans-serif; font-weight: 800; font-size: .95rem;
  cursor: pointer; text-decoration: none; backdrop-filter: blur(4px); transition: transform .12s;
}
.sahra-chips .chip:hover { border-color: var(--gold); }
.sahra-chips .chip:active { transform: scale(.97); }
.sahra-chips .chip-icon { width: 40px; padding: 0; }
.sahra-chips .chip svg { width: 18px; height: 18px; }
.rules-box { text-align: right; }
.rules-box .an-title { text-align: center; font-size: clamp(22px, 4.5vw, 32px); }
.rules-goals { display: flex; flex-direction: column; gap: 5px; }
.rg-row {
  background: var(--navy-1); border-radius: 10px; padding: 8px 12px;
  font-size: 15px; font-weight: 700; color: #b9c3e0; line-height: 1.6;
}
.rg-row b { color: var(--gold-soft); }
.rg-row.is-threat b { color: #ff9a7a; }
.rules-turn {
  background: var(--navy-1); border-radius: 10px; padding: 10px 12px;
  font-size: 16px; font-weight: 900; text-align: center; color: var(--cream);
}
.cnt-table { display: flex; flex-direction: column; gap: 5px; }
.cnt-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy-1); border-radius: 10px; padding: 8px 12px;
  font-size: 14px; font-weight: 700;
}
.cnt-row .c-atk { color: #ff9a7a; font-weight: 900; white-space: nowrap; }
.cnt-row .c-arrow { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cnt-row .c-def { color: var(--ok); flex: 1; }

/* «بانتظار: فلان» — بارز وينبض */
.await-line {
  position: relative; z-index: 1;
  margin: 4px auto 0; width: fit-content; max-width: min(900px, 94%);
  background: rgba(224,96,60,0.14); border: 2px solid var(--clay);
  border-radius: 999px; padding: 6px 22px;
  font-size: clamp(15px, 2.6vw, 21px); font-weight: 900; text-align: center;
  animation: throb 1.1s ease-in-out infinite;
}
.await-line b { color: #ff9a7a; }

/* لافتة المبارزة */
.duel-banner {
  position: relative; z-index: 1;
  margin: 6px auto 0; width: min(760px, 96%);
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(224,96,60,0.22), rgba(10,14,34,0.6), rgba(224,96,60,0.22));
  border: 2px solid var(--clay); border-radius: 16px; padding: 10px 18px;
  box-shadow: 0 0 30px rgba(224,96,60,0.3);
}
.duel-banner .dl-name { font-size: clamp(17px, 3vw, 26px); font-weight: 900; color: var(--cream); }
.duel-banner .dl-vs { font-size: clamp(20px, 3.6vw, 32px); animation: throb 0.9s ease-in-out infinite; }
.duel-banner .dl-await { width: 100%; text-align: center; font-size: clamp(12px, 2vw, 15px); font-weight: 800; color: #b9c3e0; }
.duel-banner .dl-await b { color: #ff9a7a; }

/* تلميح المدى على المقعد (عن صاحب الدور) */
.seat .dist-hint {
  position: absolute; top: 4px; left: 8px;
  font-size: 10px; font-weight: 900; color: var(--muted);
  background: rgba(10,14,34,0.7); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px; padding: 1px 8px;
}
.seat.dead .dist-hint { display: none; }

/* مشاهد الدراما وسقوط الشيخ */
.scene-lines {
  margin-top: 14px; display: flex; flex-direction: column; gap: 5px;
  font-size: clamp(14px, 2.6vw, 18px); font-weight: 800; color: #b9c3e0; text-align: right;
}
.scene-lines div { background: var(--navy-1); border-radius: 10px; padding: 7px 12px; }
.an-title.sheikh-fall {
  color: var(--clay); font-size: clamp(30px, 7vw, 52px);
  text-shadow: 0 0 30px rgba(224,96,60,0.55);
  animation: throb 1s ease-in-out infinite;
}

/* شهيد المهمة — ميت من الفريق الفائز */
.rv-row .martyr {
  font-size: 12px; font-weight: 900; color: var(--gold-soft);
  background: rgba(242,177,52,0.14); border: 1px solid rgba(242,177,52,0.5);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}

.site-footer {
  text-align: center; font-size: 12px; color: #6b7694;
  padding: 10px 16px 14px; position: relative; z-index: 1;
}
.site-footer a { color: var(--gold-soft); text-decoration: none; font-weight: 800; }
.site-footer b { color: var(--gold-soft); letter-spacing: 2px; }

/* لا نسخة «جوال» — نفس التركيب يتمدد بـ clamp() من ٣٩٠px حتى ١٩٢٠px */

/* ═══════════ كشف تدريجي عند النزول + شرائط أنظف ═══════════ */
.has-js #screen-start .intro-desc,
.has-js #screen-start .section-label,
.has-js #screen-start .slide-hint,
.has-js #screen-start .roles-showcase,
.has-js #screen-start .cards-showcase,
.has-js #screen-start .shots-strip,
.has-js #screen-start .setup-card {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.has-js #screen-start .is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-js #screen-start .intro-desc,
  .has-js #screen-start .section-label,
  .has-js #screen-start .slide-hint,
  .has-js #screen-start .roles-showcase,
  .has-js #screen-start .cards-showcase,
  .has-js #screen-start .shots-strip,
  .has-js #screen-start .setup-card { opacity: 1; transform: none; transition: none; }
}
/* بلا شريط تمرير ظاهر — الحركة التلقائية والسحب تكفي */
.roles-showcase, .cards-showcase, .shots-strip { scrollbar-width: none; -ms-overflow-style: none; }
.roles-showcase::-webkit-scrollbar,
.cards-showcase::-webkit-scrollbar,
.shots-strip::-webkit-scrollbar { display: none; }

/* ═══════════ طاولة السهرة: السجّادة + كومة الأوراق المرمية + VFX ═══════════ */
.playtable {
  position: relative; z-index: 2; width: clamp(200px, 22vw, 300px);
  margin: 0; height: clamp(140px, 15vw, 195px);
  border-radius: 18px; overflow: visible;
  border: 2px dashed rgba(255,255,255,0.16); background: rgba(8,6,14,0.28);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}
.pt-felt { display: none; }
/* سجّادة مجلس دافئة (سدو): معينات ذهبية على أحمر طوبي */
.pt-felt {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(242,177,52,0.10) 38px 40px),
    repeating-linear-gradient(45deg, rgba(224,96,60,0.18) 0 16px, transparent 16px 32px),
    radial-gradient(ellipse at 50% 42%, #9a4327 0%, #6d2f1a 62%, #4a2012 100%);
}
.pt-felt::before, .pt-felt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
  background: repeating-linear-gradient(90deg, #ffd23e 0 9px, #14141b 9px 12px, #e0603c 12px 21px, #14141b 21px 24px);
  opacity: 0.55;
}
.pt-felt::before { top: 6px; } .pt-felt::after { bottom: 6px; }
.pt-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(253,246,227,0.5); font-weight: 800; font-size: clamp(13px, 2vw, 17px); pointer-events: none;
}
.pile:not(:empty) ~ .pt-hint, .playtable.has-cards .pt-hint { display: none; }

.pile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* الورقة المرمية = طولية يبين اسمها (والدوران على الغلاف الداخلي عشان الشرح يبقى معتدل) */
.pile-card {
  position: absolute; overflow: visible;
  transform: translate(var(--dx,0px), var(--dy,0px));
  transition: transform 0.3s;
}
.pile-card .pc-rot {
  position: relative; width: clamp(64px, 7.6vw, 92px); display: flex; flex-direction: column;
  border-radius: 9px; overflow: hidden; border: 2px solid #fdf6e3; background: #241a10;
  box-shadow: 0 8px 20px rgba(0,0,0,0.55); transform: rotate(var(--rot,0deg));
}
.pile-card .pc-rot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pile-card .pc-name {
  display: block; font-size: clamp(9px, 1.1vw, 12px); font-weight: 900; color: #ffe6b0;
  background: rgba(0,0,0,0.5); padding: 3px 2px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pile-card .pc-suit {
  position: absolute; top: 3px; left: 5px; font-size: 12px; font-weight: 900; z-index: 2;
  background: rgba(10,14,34,0.82); color: #ffd57a; border-radius: 6px; padding: 0 5px;
}
.pile-card .pc-suit.red { color: #ff8a66; }
.pile-card:hover { z-index: 60; }
.pile-card:hover .pc-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); }
.pile-card.fresh { animation: cardFly 0.55s cubic-bezier(0.2, 0.9, 0.3, 1); z-index: 50; }
@keyframes cardFly {
  0% { transform: translate(var(--fromX, 0px), var(--fromY, -170px)) scale(0.7); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translate(var(--dx,0px), calc(var(--dy,0px) - 14px)) scale(1.12); opacity: 1; }
  100% { transform: translate(var(--dx,0px), var(--dy,0px)) scale(1); opacity: 1; }
}
/* وميض فوّهة على مقعد الرامي + خط الطلقة للهدف */
.seat.muzzle::after {
  content: ""; position: absolute; inset: -6px; border-radius: 20px; z-index: 6; pointer-events: none;
  box-shadow: 0 0 34px 10px rgba(255, 190, 70, 0.95), inset 0 0 20px rgba(255, 140, 40, 0.6);
  animation: muzzleFx 0.5s ease-out;
}
@keyframes muzzleFx { 0% { opacity: 1; } 100% { opacity: 0; } }
.tracer {
  position: fixed; height: 3px; transform-origin: 0 50%; z-index: 80; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,210,62,0), #ffd23e 35%, #fff 55%, rgba(255,210,62,0));
  box-shadow: 0 0 10px #ffd23e; animation: tracerFx 0.44s ease-out forwards;
}
@keyframes tracerFx { 0% { opacity: 0; filter: brightness(2.2); } 18% { opacity: 1; } 100% { opacity: 0; } }
/* من لعب على من */
.pt-last {
  position: absolute; top: 10px; right: 50%; transform: translateX(50%); z-index: 60;
  background: rgba(10,14,34,0.85); border: 1.5px solid rgba(242,177,52,0.5); color: var(--cream);
  border-radius: 999px; padding: 5px 15px; font-weight: 900; font-size: clamp(12px, 1.9vw, 16px);
  white-space: nowrap; animation: ptPop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.pt-last b { color: var(--gold-soft); }
.pt-last .arrow { color: var(--clay); margin: 0 5px; }
@keyframes ptPop { from { transform: translateX(50%) scale(0.6); opacity: 0; } }
/* دم/إصابة */
.pt-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background:
  radial-gradient(ellipse at 50% 55%, rgba(200,20,20,0.55), transparent 70%); }
.pt-flash.hit { animation: blood 0.6s ease-out; }
@keyframes blood { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* زر السجل + السجل كلوحة جانبية */
.btn-log {
  position: fixed; bottom: calc(14px + var(--sahra-bar-h, 0px)); left: 14px; z-index: 60;
  background: #14141be0; color: var(--gold-soft); border: 1.5px solid rgba(242,177,52,0.5);
  border-radius: 999px; width: 42px; height: 42px; font-size: 1.1rem; cursor: pointer;
  font-family: inherit; backdrop-filter: blur(4px);
}
.table-log:not([hidden]) {
  position: fixed; bottom: calc(64px + var(--sahra-bar-h, 0px)); left: 14px; z-index: 60;
  width: min(340px, 80vw); max-height: 44dvh;
}

/* أفاتار الشخصيات (صور موحّدة على مستوى المنصّة) */
.av-pic { display: inline-block; width: 1.5em; height: 1.5em; border-radius: 50%; object-fit: cover; vertical-align: middle; box-shadow: 0 2px 8px rgba(0,0,0,0.45); }

/* لحظة الطرد: أفاتار ضخم جنب بطاقة الكشف */
.an-duo { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px); }
.an-bigav { display: flex; justify-content: center; margin: 4px 0; }
.an-bigav .av-pic { width: clamp(110px, 16vw, 170px); height: clamp(110px, 16vw, 170px); border: 5px solid #fdf6e3; box-shadow: 0 12px 36px rgba(0,0,0,.55); }