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

.ludo-modal{
  display:none; position:fixed; inset:0; z-index:3000;
  background:rgba(6,16,26,.88); backdrop-filter:blur(6px);
  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:linear-gradient(160deg,#13283a,#0a1622);
  border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.6); color:#fff;
}
.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; gap:10px; margin-bottom:12px; }
.ludo-pcard{ display:flex; align-items:center; gap:7px; flex:1; justify-content:center;
  background:rgba(255,255,255,.06); border:2px solid transparent; padding:7px;
  border-radius:12px; font-weight:700; font-size:13px; transition:.2s; }
.ludo-pcard.active{ border-color:#f4a826; background:rgba(244,168,38,.18); transform:scale(1.05);
  box-shadow:0 0 14px rgba(244,168,38,.4); }
.ludo-pcard.active::before{ content:"▶"; color:#f4a826; font-size:11px; margin-left:2px; }
.ludo-pcard .dot{ width:13px; height:13px; border-radius:50%; }
.ludo-pcard .dot.red{ background:#e63946; box-shadow:0 0 6px #e63946; }
.ludo-pcard .dot.green{ background:#2a9d4a; box-shadow:0 0 6px #2a9d4a; }

.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:.5px solid rgba(13,27,42,.12); position:relative; }
/* ممر العبور (خط المشاة) — خلفية مميزة عن مناطق القواعد */
.ludo-cell.walk{
  background:
    repeating-linear-gradient(45deg, #ffffff 0 6px, #f3ece0 6px 12px);
  box-shadow:inset 0 0 0 .5px rgba(13,27,42,.08);
}
.ludo-cell.safe::after{ content:"★"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:rgba(13,27,42,.4); font-size:13px; z-index:1; }
.ludo-cell.safe{ background:#fff7e0 !important; }
.cr{ background:#e63946; } .cg{ background:#2a9d4a; } .cy{ background:#f4c430; } .cb{ background:#3a7bd5; }

.ludo-base{ display:flex; align-items:center; justify-content:center; }
.ludo-base.br{ background:#e63946; } .ludo-base.bg{ background:#2a9d4a; }
.ludo-base.by{ background:#f4c430; } .ludo-base.bb{ background:#3a7bd5; }
.yard{ width:74%; height:74%; background:#fff; border-radius:14px; display:grid;
  grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:8%; padding:10%;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18); }
.slot{ border-radius:50%; background:rgba(0,0,0,.06); position:relative; }

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

.ludo-pawn{ position:absolute; width:68%; height:68%; left:16%; top:16%; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.95); box-shadow:0 3px 5px rgba(0,0,0,.4), inset 0 -3px 4px rgba(0,0,0,.25);
  cursor:pointer; z-index:5; touch-action:manipulation; transition:box-shadow .18s; }
.slot .ludo-pawn{ position:absolute; inset:0; width:100%; height:100%; left:0; top:0; }
.ludo-pawn.red{ background:radial-gradient(circle at 35% 30%, #ff6b75, #b42c38); }
.ludo-pawn.green{ background:radial-gradient(circle at 35% 30%, #6bdc8a, #1f7637); }
.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-controls{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:14px; }
.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; }