/* ملف ludo-client.css — ضعه في public/css/ */

.ludo-modal{
  display:none; position:fixed; inset:0; z-index:2147483000;
  background:transparent; backdrop-filter:none;
  align-items:center; justify-content:center; direction:rtl;
  font-family:"Tahoma","Segoe UI",sans-serif;
}
.ludo-modal.show{ display:flex; }
.ludo-box{
  width:min(94vw,440px); background:rgba(19,40,58,.55);
  border:1px solid rgba(255,255,255,.22); border-radius:18px; padding:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.35); color:#fff; position:relative;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.ludo-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
#ludoTurn{ font-size:18px; font-weight:800; color:#f4a826; }
.ludo-x{ background:rgba(255,255,255,.1); color:#fff; border:none; width:34px; height:34px;
  border-radius:50%; font-size:16px; cursor:pointer; }

.ludo-players{ display:flex; flex-direction:row; justify-content:space-between; align-items:stretch; gap:8px; margin-bottom:12px; }
.ludo-pcard{ display:flex; flex-direction:row; align-items:center; gap:8px; flex:1 1 0; min-width:0;
  position:relative; background:rgba(255,255,255,.06); border:2px solid transparent; padding:8px 10px;
  border-radius:14px; font-weight:700; font-size:13px; transition:.2s; box-sizing:border-box; }
.ludo-pcard.active{ border-color:#f4a826; background:rgba(244,168,38,.18); transform:scale(1.03); z-index:5;
  box-shadow:0 0 14px rgba(244,168,38,.4); }
.ludo-pcard.active .ludo-avatar-frame{ box-shadow:0 0 0 3px #f4a826, 0 2px 6px rgba(0,0,0,.4); }

/* صورة اللاعب واسمه جنب بعض بشكل أفقي — بطاقة مستطيلة عريضة بدل العمودية */
.ludo-avatar-col{ display:flex; flex-direction:row; align-items:center; gap:8px; position:relative; min-width:0; width:100%; }
.ludo-avatar-frame{ width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid rgba(255,255,255,.55); box-shadow:0 2px 6px rgba(0,0,0,.35); background:#334; }
.ludo-avatar{ width:100%; height:100%; object-fit:cover; display:block; }
.ludo-pname{ font-size:12px; font-weight:700; flex:1; min-width:0; text-align:center; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ludo-wrap{ width:100%; aspect-ratio:1/1; background:linear-gradient(145deg,#fff,#e9dfc4);
  border-radius:14px; padding:8px; box-shadow:inset 0 0 0 3px rgba(0,0,0,.15); }
.ludo-board{ width:100%; height:100%; direction:ltr; display:grid;
  grid-template-columns:repeat(15,1fr); grid-template-rows:repeat(15,1fr);
  background:#fdf6e3; border:2px solid #0d1b2a; border-radius:8px; overflow:hidden; position:relative; }
.ludo-cell{ border:.75px solid rgba(0,0,0,.55); position:relative; }
/* ممر العبور (خط المشاة) — لون مسطّح هادئ يطابق تصميم الصور المرجعية (بدون تخطيط قطري) */
.ludo-cell.walk{ background:#fdf8ec; }
.ludo-cell.safe::after{ content:"★"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:rgba(13,27,42,.35); font-size:13px; z-index:1; }
.ludo-cell.safe{ background:#fdf1cf !important; }
/* نقاط الانطلاق: خلفية الخلية بلون اللاعب صاحب نقطة الانطلاق (أحمر/أخضر/أصفر/أزرق كل واحد بلونه) */
.ludo-cell.start-point.start-red{ background:#c9302f !important; }
.ludo-cell.start-point.start-green{ background:#1f8a57 !important; }
.ludo-cell.start-point.start-yellow{ background:#e0a815 !important; }
.ludo-cell.start-point.start-blue{ background:#255cc7 !important; }
/* نقاط الانطلاق آمنة أيضاً: نفس النجمة العامة، فقط بلون أفتح ليتباين فوق خلفيتها الملوّنة الغامقة */
.ludo-cell.start-point.safe::after{ color:rgba(255,255,255,.8); }
.ludo-pc-red{ background:#c9302f !important; } .ludo-pc-green{ background:#1f8a57 !important; }
.ludo-pc-yellow{ background:#e0a815 !important; } .ludo-pc-blue{ background:#255cc7 !important; }

.ludo-base{ display:flex; align-items:center; justify-content:center; }
.ludo-base.ludo-base-red{ background:#c9302f !important; } .ludo-base.ludo-base-green{ background:#1f8a57 !important; }
.ludo-base.ludo-base-yellow{ background:#e0a815 !important; } .ludo-base.ludo-base-blue{ background:#255cc7 !important; }
.yard{ width:70%; height:70%; background:rgba(255,255,255,.22); border-radius:14px; display:grid;
  grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10%; padding:10%;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.15); }
.slot{ border-radius:50%; background:rgba(0,0,0,.18); position:relative; }

.ludo-center{ grid-area:7/7/10/10; position:relative; background:#fff;
  border:1.5px solid #0d1b2a; overflow:visible; display:flex; align-items:center; justify-content:center; }
.ludo-center svg{ width:100%; height:100%; display:block; }

/* صندوق الفوز: مكان ثابت وسط اللوحة يبقى فيه كل حجر وصل لبيته النهائي ويظل ظاهراً هناك */
.ludo-center-slots{ position:absolute; display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr; gap:6%; z-index:6; }
.ludo-center-slots .slot{ border-radius:50%; position:relative; }
.ludo-center-slots.slots-yellow{ left:32%; top:2%; width:36%; height:26%; }
.ludo-center-slots.slots-green{ left:72%; top:32%; width:26%; height:36%; }
.ludo-center-slots.slots-blue{ left:32%; top:72%; width:36%; height:26%; }
.ludo-center-slots.slots-red{ left:2%; top:32%; width:26%; height:36%; }
.ludo-center-slots .ludo-pawn{ position:absolute; inset:0; width:100%; height:100%; left:0; top:0; }

.ludo-pawn{ position:absolute; width:64%; height:64%; left:18%; top:18%; border-radius:50%;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 3px 5px rgba(0,0,0,.4), inset 0 -4px 5px rgba(0,0,0,.3), inset 0 3px 4px rgba(255,255,255,.4);
  cursor:pointer; z-index:5; touch-action:manipulation; transition:box-shadow .18s; }
.ludo-pawn::before{ content:""; position:absolute; top:14%; left:22%; width:34%; height:26%;
  border-radius:50%; background:rgba(255,255,255,.65); filter:blur(.5px); pointer-events:none; }
.slot .ludo-pawn{ position:absolute; inset:0; width:100%; height:100%; left:0; top:0; }
.ludo-pawn.red{ background:radial-gradient(circle at 35% 28%, #ff8a8f, #d81f28 65%, #9c151c); }
.ludo-pawn.green{ background:radial-gradient(circle at 35% 28%, #7cf0a3, #1a9c58 65%, #0f6b3c); }
.ludo-pawn.movable{ animation:ludobob .7s infinite ease-in-out;
  box-shadow:0 0 0 4px #f4a826, 0 3px 6px rgba(0,0,0,.5); z-index:20; }
@keyframes ludobob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12%)} }
.ludo-pawn.vanish{ animation:ludovanish .26s ease-in forwards; z-index:30; }
@keyframes ludovanish{ 0%{ transform:scale(1); opacity:1; } 60%{ transform:scale(1.35); opacity:.8; }
  100%{ transform:scale(0); opacity:0; } }

.ludo-controls{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:14px;
  background:rgba(255,255,255,.07); border-radius:14px; padding:12px 8px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1); }
.ludo-dice{ width:66px; height:66px; border-radius:14px; background:#fff; padding:10px;
  display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr; gap:3px;
  border:none; cursor:pointer; box-shadow:0 7px 0 #b9b094, 0 9px 16px rgba(0,0,0,.4); }
.ludo-dice:active{ transform:translateY(4px); box-shadow:0 3px 0 #b9b094; }
.ludo-dice[disabled]{ opacity:.45; cursor:not-allowed; }
.ludo-dice:not([disabled]){ animation:ludodice 1.1s infinite ease-in-out; }
@keyframes ludodice{ 0%,100%{ box-shadow:0 7px 0 #b9b094, 0 9px 16px rgba(0,0,0,.4); }
  50%{ box-shadow:0 7px 0 #b9b094, 0 9px 16px rgba(0,0,0,.4), 0 0 0 5px rgba(244,168,38,.5); } }
.ludo-dice .pip{ border-radius:50%; background:#0d1b2a; align-self:center; justify-self:center; width:11px; height:11px; }
.ludo-hint{ font-size:14px; color:#cdd6df; min-height:20px; text-align:center; }

/* إصلاح أزرار العنوان */
.ludo-x {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ludo-bot-tag{ margin-right:4px; font-size:13px; vertical-align:middle; filter:drop-shadow(0 0 3px rgba(244,168,38,.6));
  cursor:pointer; display:inline-block; }
.ludo-bot-tag[style*="inline"]{ animation:ludoSeatPulse 1.4s ease-in-out infinite; }
@keyframes ludoSeatPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.22); } }

.ludo-top-btns {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

/* ===== زر العين + قائمة المشاهدين ===== */
.ludo-eye-wrap{ position:relative; }
.ludo-eye{ width:auto !important; min-width:46px; padding:0 8px !important; gap:3px;
  display:inline-flex !important; align-items:center; justify-content:center;
  font-size:13px !important; font-weight:800; }
#ludoEyeCount{ color:#f4a826; font-size:12px; }
.ludo-spec-panel{ position:absolute; top:42px; left:0; min-width:170px; max-width:220px;
  background:rgba(15,30,45,.96); border:1px solid rgba(255,255,255,.2); border-radius:12px;
  padding:8px; box-shadow:0 10px 26px rgba(0,0,0,.45); z-index:50;
  opacity:0; transform:translateY(-6px) scale(.96); pointer-events:none; transition:.18s ease; }
.ludo-spec-panel.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.ludo-spec-title{ font-size:12px; font-weight:800; color:#f4a826; margin-bottom:6px;
  padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.12); }
.ludo-spec-list{ max-height:160px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.ludo-spec-row{ font-size:12.5px; color:#e8eef3; background:rgba(255,255,255,.06);
  border-radius:8px; padding:4px 7px; display:flex; align-items:center; gap:5px; }
.ludo-spec-empty{ font-size:12px; color:#9fb0bd; text-align:center; padding:6px 0; }

/* ===== شريط دخول/خروج المشاهدين فوق اللوحة ===== */
.ludo-spec-banner{ position:relative; min-height:0; display:flex; flex-direction:column; gap:4px;
  margin-bottom:6px; pointer-events:none; }
.ludo-spec-banner-row{ font-size:12.5px; font-weight:700; color:#dff3ff;
  background:rgba(38,72,98,.65); border:1px solid rgba(255,255,255,.15); border-radius:10px;
  padding:5px 10px; align-self:flex-start; max-width:90%;
  transform:translateX(-130%); opacity:0; transition:transform .35s ease, opacity .35s ease; }
.ludo-spec-banner-row.in{ transform:translateX(0); opacity:1; }
.ludo-spec-banner-row.out{ transform:translateX(130%); opacity:0; }
.ludo-spec-banner-row.out-anim{ color:#ffd0d0; }

/* ===== إشعارات المباريات الجارية (للمشاهدة) ===== */
.ludo-live-notices{ position:fixed; top:72px; left:14px; z-index:4500; display:flex;
  flex-direction:column; gap:8px; direction:rtl; font-family:"Tahoma","Segoe UI",sans-serif; }
.ludo-live-chip{ background:rgba(19,40,58,.95); border:1px solid rgba(244,168,38,.5);
  border-radius:12px; padding:10px 14px; display:flex; flex-direction:column;
  align-items:center; gap:6px; width:150px;
  box-shadow:0 8px 22px rgba(0,0,0,.4); backdrop-filter:blur(10px);
  transform:translateX(-130%); opacity:0; transition:transform .3s ease, opacity .3s ease; }
.ludo-live-chip.in{ transform:translateX(0); opacity:1; }
.ludo-live-chip.out{ transform:translateX(-130%); opacity:0; }
.ludo-live-player{ display:flex; align-items:center; gap:7px; min-width:0; }
.ludo-live-avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:2px solid rgba(255,255,255,.5); }
.ludo-live-player.red .ludo-live-avatar{ border-color:#e04b4b; }
.ludo-live-player.green .ludo-live-avatar{ border-color:#3fb56c; }
.ludo-live-name{ font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:95px; }
.ludo-live-player.red .ludo-live-name{ color:#ff7a7a; }
.ludo-live-player.green .ludo-live-name{ color:#6be396; }
.ludo-live-vs{ color:#f4a826; font-size:11px; font-weight:900; letter-spacing:1px; }
.ludo-live-actions{ display:flex; gap:6px; margin-top:4px; width:100%; }
.ludo-live-watch{ flex:1; background:#f4a826; color:#1a2733; border:none; border-radius:8px;
  padding:6px; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; }
.ludo-live-watch:hover{ background:#ffbc4d; }
.ludo-live-dismiss{ background:rgba(255,255,255,.12); color:#fff; border:none;
  border-radius:50%; width:22px; height:22px; font-size:11px; cursor:pointer; flex-shrink:0; }

/* ===== لوحة الرسائل السريعة (كلمات + إيموجي + كتابة رسالة) — نافذة عائمة مركزية ثابتة ===== */
.ludo-quick-overlay{ position:fixed; inset:0; z-index:2147483000; display:none;
  align-items:center; justify-content:center; background:rgba(0,0,0,.5); direction:rtl;
  pointer-events:auto !important; }
.ludo-quick-overlay.show{ display:flex; }
.ludo-quick-overlay, .ludo-quick-overlay *{ pointer-events:auto !important; }
.ludo-quick-panel{ width:min(88vw,290px); max-height:78vh; overflow-y:auto;
  background:#16303f; border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.5); position:relative; }
.ludo-quick-close{ position:absolute; top:8px; left:8px; width:28px; height:28px;
  border-radius:50%; background:rgba(255,255,255,.14); border:none; color:#fff;
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:2; transition:background .15s; }
.ludo-quick-close:hover{ background:rgba(229,72,77,.6); }
.ludo-quick-title{ text-align:center; font-size:13.5px; font-weight:800; color:#eaf1f6;
  margin-bottom:10px; padding-left:26px; }
.ludo-quick-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
.ludo-quick-phrase{ background:rgba(255,255,255,.1); color:#eaf1f6; border:1px solid rgba(255,255,255,.14);
  border-radius:9px; padding:8px 4px; font-size:11.5px; font-weight:700; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.15s; }
.ludo-quick-phrase:hover{ background:rgba(244,168,38,.3); }
.ludo-quick-emoji{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
  border-radius:9px; padding:7px 0; font-size:20px; cursor:pointer; transition:.15s; }
.ludo-quick-emoji:hover{ background:rgba(244,168,38,.3); transform:scale(1.08); }
.ludo-quick-write{ width:100%; margin-top:10px; background:#f4a826; color:#1a2733; border:none;
  border-radius:10px; padding:10px 0; font-size:13px; font-weight:800; cursor:pointer; }
.ludo-quick-write:hover{ background:#ffbc4d; }

/* ===== فقاعة كلام تظهر تحت صورة/اسم اللاعب المُرسِل ===== */
.ludo-chat-bubble{ position:absolute; top:100%; left:50%; margin-top:8px;
  transform:translateX(-50%) translateY(-6px) scale(.85); opacity:0;
  background:#fdfdfd; color:#12222f; font-size:14px; font-weight:800;
  padding:7px 12px; border-radius:12px; white-space:nowrap; max-width:160px;
  overflow:hidden; text-overflow:ellipsis; box-shadow:0 6px 16px rgba(0,0,0,.4);
  z-index:70; transition:transform .22s ease, opacity .22s ease; }
.ludo-chat-bubble::after{ content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:#fdfdfd; }
.ludo-chat-bubble.emoji{ font-size:28px; padding:4px 8px; background:transparent; box-shadow:none; }
.ludo-chat-bubble.emoji::after{ display:none; }
.ludo-chat-bubble.in{ transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
.ludo-chat-bubble.out{ transform:translateX(-50%) translateY(6px) scale(.85); opacity:0; }

/* ===== نافذة كتابة رسالة نصية حرة ===== */
.ludo-textprompt-overlay{ position:fixed; inset:0; z-index:2147483000; display:none;
  align-items:center; justify-content:center; background:rgba(0,0,0,.5); direction:rtl;
  pointer-events:auto !important; }
.ludo-textprompt-overlay.show{ display:flex; }
.ludo-textprompt-overlay, .ludo-textprompt-overlay *{ pointer-events:auto !important; }
.ludo-textprompt-box{ width:min(88vw,320px); background:#fbfbf7; color:#1a2733;
  border-radius:16px; padding:20px 18px; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.ludo-textprompt-title{ font-size:16.5px; font-weight:700; margin-bottom:16px; text-align:center; }
.ludo-textprompt-input{ width:100%; border:none; border-bottom:2px solid #2a9d4a; background:transparent;
  font-size:15px; padding:6px 2px; color:#1a2733; outline:none; box-sizing:border-box; margin-bottom:18px; }
.ludo-textprompt-btns{ display:flex; justify-content:space-between; }
.ludo-textprompt-ok, .ludo-textprompt-cancel{ background:none; border:none; cursor:pointer;
  font-size:14.5px; font-weight:700; color:#2a9d4a; padding:6px 10px; }
.ludo-textprompt-cancel{ color:#666; }
.ludo-textprompt-ok:hover, .ludo-textprompt-cancel:hover{ opacity:.75; }

/* ===== شعار "فلان يلعب ضد فلان" عند البدء، و"فلان فاز على فلان" عند الفوز ===== */
.ludo-match-banner{ position:absolute; inset:0; z-index:200; display:flex;
  align-items:center; justify-content:center; pointer-events:none; }
.ludo-match-banner-card{ background:linear-gradient(160deg,#1c3a4d,#0d1f2b);
  border:2px solid rgba(244,168,38,.75); border-radius:16px; padding:16px 22px;
  text-align:center; box-shadow:0 18px 46px rgba(0,0,0,.55), 0 0 30px rgba(244,168,38,.25);
  opacity:0; transform:scale(.8) translateY(10px); transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }
.ludo-match-banner-card.in{ opacity:1; transform:scale(1) translateY(0); }
.ludo-match-banner-card.out{ opacity:0; transform:scale(.85) translateY(-8px); }
.ludo-match-banner-icon{ font-size:30px; margin-bottom:4px; }
.ludo-match-banner-line{ font-size:15px; font-weight:800; color:#fff; white-space:nowrap; }
.ludo-match-banner-line .vs{ color:#f4a826; margin:0 6px; font-size:13px; }

/* صف النرد + زر الرسائل السريعة بجانبه (يسار النرد) */
.ludo-dice-row{ display:flex; align-items:center; justify-content:center; gap:14px; }
.ludo-msg-btn{ width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff;
  font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.3); transition:transform .15s, background .15s; }
.ludo-msg-btn:hover{ background:rgba(244,168,38,.4); }
.ludo-msg-btn:active{ transform:scale(.88); }

/* حلقة عدّاد الدور حول صورة اللاعب الحالي — تتحول من أخضر لأصفر لأحمر مع اقتراب انتهاء المهلة
   (SVG بدل conic-gradient لأن الأخير غير مدعوم على متصفحات/WebView قديمة كثيرة يستخدمها الأعضاء عبر الجوال،
   وهذا كان سبب عدم ظهور اللون إطلاقاً) */
.ludo-turn-ring{ width:40px; height:40px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ludo-turn-ring .ludo-avatar-frame{ width:34px; height:34px; }
.ludo-ring-svg{ position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .2s ease; pointer-events:none; transform:rotate(-90deg); }
.ludo-turn-ring.on .ludo-ring-svg{ opacity:1; }
.ludo-ring-track{ stroke:rgba(255,255,255,.18); }
.ludo-ring-progress{ transition:stroke-dashoffset .22s linear, stroke .25s linear; stroke-linecap:round; }

/* حركة الحجر المأكول: اختفاء دوّار من مكانه القديم، ثم ظهور مرن داخل بيته */
.ludo-pawn.captured-out{ animation:ludoCapturedOut .24s ease-in forwards; z-index:25; }
@keyframes ludoCapturedOut{
  0%{ transform:scale(1) rotate(0deg); opacity:1; }
  100%{ transform:scale(.15) rotate(240deg); opacity:0; }
}
.ludo-pawn.captured-in{ animation:ludoCapturedIn .34s cubic-bezier(.34,1.56,.64,1); z-index:25; }
@keyframes ludoCapturedIn{
  0%{ transform:scale(0) rotate(-90deg); opacity:0; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}