/* ==========================================================================
   public/css/style.css
   هوية بصرية لمنصة ألعاب لوحية — أجواء "ليلة ألعاب" دافئة وحيوية.
   تصميم RTL عربي متجاوب.
   ========================================================================== */

/* ----- الخطوط ----- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Tajawal:wght@400;500;700&display=swap');

/* ----- نظام الألوان ----- */
:root {
  --ink:        #1a1530;   /* خلفية داكنة بنفسجية مزرقّة (لباد طاولة) */
  --ink-soft:   #251f44;
  --surface:    #2e2754;   /* بطاقات */
  --surface-2:  #383066;
  --cream:      #f7f3e8;   /* نص فاتح */
  --muted:      #b3aad6;   /* نص ثانوي */
  --gold:       #f5c451;   /* ذهبي (نرد/كوينز) */
  --coral:      #ff6b6b;   /* مرجاني (أزرار أساسية) */
  --teal:       #2dd4bf;   /* فيروزي (نجاح) */
  --violet:     #8b7cf6;   /* بنفسجي مساعد */
  --danger:     #ff5a76;
  --line:       rgba(179,170,214,0.18);

  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 12px 40px rgba(0,0,0,0.35);
  --shadow-sm:  0 4px 14px rgba(0,0,0,0.25);

  --font-display: 'Cairo', system-ui, sans-serif;
  --font-body:    'Tajawal', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,124,246,0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(45,212,191,0.12), transparent 60%),
    var(--ink);
  color: var(--cream);
  min-height: 100vh;
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- التخطيط ----- */
.app-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ----- الشريط العلوي ----- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--cream);
}
.brand .dice {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  border-radius: 12px;
  color: var(--ink);
  font-size: 1.4rem;
  box-shadow: var(--shadow-sm);
  transform: rotate(-6deg);
}
.topbar-actions { display: flex; align-items: center; gap: 12px; }

/* ----- البطاقات ----- */
.card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}

/* ----- شاشة المصادقة ----- */
.auth-wrap {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  padding: 20px 0 60px;
}
.auth-card { width: 100%; max-width: 440px; }
.auth-card h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.8rem;
  margin-bottom: 6px;
}
.auth-card .subtitle { color: var(--muted); margin-bottom: 26px; }

/* ----- التبويبات ----- */
.tabs {
  display: flex;
  background: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 5px;
  margin-bottom: 26px;
  gap: 5px;
}
.tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.tab.active {
  background: linear-gradient(135deg, var(--coral), #ff8a5c);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ----- النماذج ----- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 7px;
  color: var(--cream);
}
.field input,
.field select {
  width: 100%;
  background: var(--ink-soft);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input::placeholder { color: #7a7099; }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(139,124,246,0.22);
}
.field select { cursor: pointer; }
.field option { background: var(--ink-soft); color: var(--cream); }

/* صف مزدوج (رمز الدولة + الرقم) */
.row-phone { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }

.field-error {
  display: block;
  color: var(--danger);
  font-size: 0.8rem;
  margin-top: 5px;
  min-height: 1em;
}

/* ----- الأزرار ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 20px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--coral), #ff8a5c);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(255,107,107,0.4); }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover { color: var(--cream); border-color: var(--violet); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ----- التنبيهات ----- */
.alert {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.92rem;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.alert-error  { background: rgba(255,90,118,0.12); border-color: rgba(255,90,118,0.4); color: #ffb3c0; }
.alert-success{ background: rgba(45,212,191,0.12); border-color: rgba(45,212,191,0.4); color: #9af0e4; }
.hidden { display: none !important; }

/* ----- لوحة الحساب ----- */
.dashboard { padding: 10px 0 60px; }
.welcome {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  margin-bottom: 4px;
}
.welcome-sub { color: var(--muted); margin-bottom: 28px; }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }

.profile-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.profile-row:last-child { border-bottom: none; }
.profile-row .k { color: var(--muted); }
.profile-row .v { font-weight: 700; }

/* شارة الاشتراك */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 5px 12px;
  border-radius: 999px;
}
.badge-on  { background: rgba(45,212,191,0.15); color: var(--teal); }
.badge-off { background: rgba(255,90,118,0.15); color: var(--danger); }
.badge-admin { background: rgba(245,196,81,0.18); color: var(--gold); }

/* بطاقة حالة الاشتراك */
.sub-card { text-align: center; }
.sub-card .coins {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  color: var(--gold);
  margin: 8px 0 2px;
}
.sub-card .coins-label { color: var(--muted); font-size: 0.9rem; margin-bottom: 20px; }
.sub-note {
  background: rgba(245,196,81,0.08);
  border: 1px solid rgba(245,196,81,0.25);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--gold);
  font-size: 0.9rem;
  margin-top: 16px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* أزرار اللعب (تظهر معطّلة بدون اشتراك) */
.play-actions { display: flex; gap: 12px; margin-top: 8px; }
.play-actions .btn { flex: 1; }

/* ----- مؤشر التحميل ----- */
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-loader {
  display: grid;
  place-items: center;
  min-height: 50vh;
  color: var(--muted);
  gap: 14px;
}
.center-loader .spinner {
  width: 36px; height: 36px;
  border-color: rgba(139,124,246,0.25);
  border-top-color: var(--violet);
}

/* ----- التذييل ----- */
.foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}

/* ----- متجاوب ----- */
@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .auth-card h1 { font-size: 1.5rem; }
  .play-actions { flex-direction: column; }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   المرحلة 2: إنشاء الغرف، الانضمام، واللوبي
   ========================================================================== */

.field-hint {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 6px;
}

/* ----- شبكة الاختيارات (اللعبة / عدد اللاعبين) ----- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-grid-3 { grid-template-columns: repeat(3, 1fr); }
.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--ink-soft);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.16s ease;
}
.choice:hover { border-color: var(--violet); }
.choice.active {
  border-color: var(--coral);
  background: linear-gradient(135deg, rgba(255,107,107,0.18), rgba(255,138,92,0.12));
  box-shadow: 0 0 0 3px rgba(255,107,107,0.16);
}
.choice-emoji { font-size: 1.7rem; }

/* ----- إدخال رمز الغرفة ----- */
.code-input {
  width: 100%;
  background: var(--ink-soft);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.4rem;
  text-align: center;
  padding: 16px;
  text-transform: uppercase;
}
.code-input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(139,124,246,0.22);
}

/* ----- ترويسة اللوبي ----- */
.lobby-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.lobby-grid { align-items: start; }

/* ----- عدّاد اللاعبين ----- */
.player-count {
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold);
  background: rgba(245,196,81,0.14);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ----- قائمة اللاعبين ----- */
.player-list { list-style: none; }
.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  animation: slideIn 0.25s ease;
}
.player-row:last-child { border-bottom: none; }
.player-avatar {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--ink);
  flex-shrink: 0;
}
.player-info { flex: 1; min-width: 0; }
.player-name {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.player-meta { font-size: 0.8rem; color: var(--muted); }
.tag {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.tag-host  { background: rgba(245,196,81,0.18); color: var(--gold); }
.tag-you   { background: rgba(139,124,246,0.2);  color: var(--violet); }
.dot-online {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.18);
}
.dot-offline { background: #6b6390; box-shadow: none; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ----- منطقة النرد ----- */
.dice-zone {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.dice-title { font-size: 0.9rem; color: var(--muted); margin-bottom: 12px; }
.dice-results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.dice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.85rem;
}
.dice-chip b { color: var(--gold); font-family: var(--font-display); }
.starter-banner {
  margin-top: 14px;
  background: rgba(45,212,191,0.12);
  border: 1px solid rgba(45,212,191,0.4);
  color: var(--teal);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
}

/* ----- بطاقة المشاركة و QR ----- */
.lobby-share { text-align: center; }
.room-code-box {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 18px;
}
.room-code-label { display: block; color: var(--muted); font-size: 0.82rem; margin-bottom: 6px; }
.room-code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  letter-spacing: 0.35rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.btn-sm { padding: 8px 16px; font-size: 0.88rem; }
.qr-wrap {
  display: inline-block;
  padding: 12px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  line-height: 0;
}
.qr-wrap img { width: 220px; height: 220px; display: block; }
.qr-hint { color: var(--muted); font-size: 0.82rem; margin: 14px 0 18px; }
.host-hint { color: var(--muted); font-size: 0.9rem; margin-top: 8px; }

@media (max-width: 720px) {
  .lobby-head { flex-direction: column; }
  .qr-wrap img { width: 180px; height: 180px; }
  .room-code { font-size: 1.8rem; }
}

/* ==========================================================================
   المرحلة 3: شاشة لعب مونوبولي
   ========================================================================== */
#gameView { max-width: 1200px; margin: 0 auto; padding: 16px 16px 120px; }

.game-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}

.game-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.game-side { position: sticky; top: 12px; }
.side-card { padding: 16px; }

/* لوحات اللاعبين */
.gp-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); margin-bottom: 8px;
  transition: all 0.2s ease;
}
.gp-card.gp-turn { border-color: var(--gold); background: rgba(245,196,81,0.08); }
.gp-card.gp-bankrupt { opacity: 0.45; filter: grayscale(0.8); }
.gp-token {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--ink);
  font-family: var(--font-display); font-weight: 900;
}
.gp-info { flex: 1; min-width: 0; }
.gp-name { font-weight: 700; font-size: 0.92rem; }
.gp-you { font-size: 0.7rem; color: var(--violet); background: rgba(139,124,246,0.2); padding: 1px 6px; border-radius: 6px; }
.gp-coins { font-size: 0.85rem; color: var(--gold); font-family: var(--font-display); }
.gp-jail { font-size: 1.1rem; }
.gp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(245,196,81,0.25); }

/* ===== اللوحة ===== */
.board-wrap { width: 100%; }
.board {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(11, 1fr);
  gap: 3px;
  aspect-ratio: 1 / 1;
  background: var(--ink-soft);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  /* لا تتجاوز عرض العمود ولا ارتفاع الشاشة (مع ترك مكان لشريط الأزرار) */
  width: 100%;
  max-width: min(760px, calc(100vh - 200px));
  margin: 0 auto;
}

.tile {
  position: relative;
  background: linear-gradient(160deg, #2a2450, #221d42);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  min-height: 0;
  display: flex;
}
.tile:hover { border-color: var(--violet); }
.tile-corner { background: linear-gradient(160deg, #322a5e, #261f48); }

.tile-color { position: absolute; }
.tile-color-bottom { top: 0; left: 0; right: 0; height: 18%; }
.tile-color-top    { bottom: 0; left: 0; right: 0; height: 18%; }
.tile-color-left   { top: 0; bottom: 0; right: 0; width: 18%; }
.tile-color-right  { top: 0; bottom: 0; left: 0; width: 18%; }

.tile-body {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2px; text-align: center; gap: 1px;
}
.tile-icon { font-size: clamp(0.7rem, 1.5vw, 1.1rem); line-height: 1; }
.tile-name {
  font-size: clamp(0.32rem, 0.85vw, 0.56rem);
  line-height: 1.15; color: var(--cream); font-weight: 600;
  max-width: 100%; word-break: break-word;
}
.tile-price { font-size: clamp(0.3rem, 0.8vw, 0.5rem); color: var(--gold); font-family: var(--font-display); }

.tile-houses {
  position: absolute; top: 1px; left: 1px; right: 1px;
  font-size: 0.42rem; text-align: center; line-height: 1;
}
.tile-houses .hotel { font-size: 0.7rem; }
.tile-owner { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; }
.tile-tokens {
  position: absolute; bottom: 5px; left: 0; right: 0;
  display: flex; flex-wrap: wrap; gap: 1px; justify-content: center;
}
.ptoken {
  width: clamp(9px, 1.6vw, 14px); height: clamp(9px, 1.6vw, 14px);
  border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.4);
  display: grid; place-items: center;
  font-size: clamp(5px, 1vw, 8px); font-weight: 900; color: rgba(0,0,0,0.7);
}

/* وسط اللوحة */
.board-center {
  grid-row: 2 / 11; grid-column: 2 / 11;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 12px; text-align: center;
}
.center-logo { font-family: var(--font-display); font-weight: 900; font-size: clamp(1rem, 3vw, 2rem); color: var(--gold); transform: rotate(-8deg); }
.center-dice { display: flex; gap: 10px; }
.center-dice .die { font-size: clamp(1.6rem, 5vw, 3rem); color: var(--cream); }
.center-log { width: 90%; max-height: 30%; overflow: hidden; font-size: 0.72rem; color: var(--muted); }
.log-line { padding: 1px 0; }

/* شريط الأزرار */
.action-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, var(--ink), rgba(26,21,48,0.95));
  border-top: 1px solid var(--line);
  padding: 14px 20px; display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; justify-content: center; z-index: 50;
}
.action-hint { color: var(--muted); font-weight: 600; align-self: center; }
.action-hint.danger { color: var(--danger); }
.btn-danger { background: linear-gradient(135deg, var(--danger), #ff7a90); color: #fff; }

/* نافذة منبثقة */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,8,22,0.7);
  display: grid; place-items: center; z-index: 100; padding: 20px;
}
.modal-box {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px; max-width: 460px; width: 100%;
}
.modal-box h3 { font-family: var(--font-display); margin-bottom: 12px; }
.auction-controls { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.auction-controls input { flex: 1; min-width: 100px; background: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 8px; color: var(--cream); padding: 10px; font-size: 1rem; }
.auction-status { margin-top: 12px; color: var(--muted); font-size: 0.85rem; }

/* إدارة العقارات */
.manage-coins { color: var(--gold); font-family: var(--font-display); margin-bottom: 12px; }
.manage-list { max-height: 50vh; overflow-y: auto; margin-bottom: 14px; }
.manage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.manage-name { font-size: 0.88rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mdot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.m-tag { font-size: 0.68rem; color: var(--danger); background: rgba(255,90,118,0.15); padding: 1px 6px; border-radius: 6px; }
.manage-actions { display: flex; gap: 5px; }
.mini { background: var(--ink-soft); border: 1px solid var(--line); color: var(--cream); border-radius: 7px; padding: 5px 9px; font-size: 0.78rem; cursor: pointer; font-family: var(--font-body); }
.mini:hover { border-color: var(--violet); }

/* نهاية اللعبة */
.gameover { text-align: center; }
.gameover-emoji { font-size: 3.5rem; }
.gameover-winner { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); margin: 8px 0 20px; }

/* توست */
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--cream); padding: 10px 18px; border-radius: 999px;
  font-size: 0.9rem; box-shadow: var(--shadow-sm);
  animation: toastIn 0.25s ease; max-width: 90vw; text-align: center;
}
.toast-error { border-color: rgba(255,90,118,0.5); color: #ffb3c0; }
.toast-card { border-color: rgba(245,196,81,0.5); color: var(--gold); }
.toast-out { opacity: 0; transform: translateY(-8px); transition: all 0.3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 820px) {
  .game-layout { grid-template-columns: 1fr; }
  .game-side { position: static; }
  #playersPanel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .gp-card { margin-bottom: 0; }
}

/* ==========================================================================
   المرحلة 4: لوحة تحكّم الأدمن
   ========================================================================== */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.admin-tab {
  background: transparent; border: none; color: var(--muted);
  padding: 10px 16px; font-family: var(--font-body); font-size: 0.95rem;
  font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.admin-tab:hover { color: var(--cream); }
.admin-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.admin-pane { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* بطاقات الإحصائيات */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat-card {
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px; text-align: center;
}
.stat-icon { font-size: 2rem; margin-bottom: 6px; }
.stat-value { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--cream); }
.stat-label { color: var(--muted); font-size: 0.88rem; margin-top: 4px; }

/* قوائم الأدمن */
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.9rem;
}
.log-row .log-action { color: var(--cream); }

/* شريط أدوات */
.admin-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-toolbar input, .admin-toolbar select {
  background: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 8px;
  color: var(--cream); padding: 10px 12px; font-family: var(--font-body); font-size: 0.92rem;
}
.admin-toolbar input { flex: 1; min-width: 180px; }

/* جدول المستخدمين */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th, .admin-table td { padding: 10px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table th { color: var(--muted); font-weight: 700; font-size: 0.82rem; }
.admin-table td.ltr, .ltr { direction: ltr; unicode-bidi: plaintext; }
.row-actions { display: flex; gap: 5px; }

.toggle {
  background: rgba(255,90,118,0.12); border: 1px solid rgba(255,90,118,0.4);
  color: #ffb3c0; border-radius: 999px; padding: 4px 12px; font-size: 0.8rem;
  cursor: pointer; font-family: var(--font-body);
}
.toggle.on { background: rgba(45,212,191,0.14); border-color: rgba(45,212,191,0.5); color: var(--teal); }

.mini {
  background: var(--ink-soft); border: 1px solid var(--line); color: var(--cream);
  border-radius: 7px; padding: 5px 10px; font-size: 0.8rem; cursor: pointer; font-family: var(--font-body);
}
.mini:hover { border-color: var(--violet); }
.mini.danger { color: #ffb3c0; border-color: rgba(255,90,118,0.4); }
.mini:disabled { opacity: 0.4; cursor: not-allowed; }

.admin-pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 16px; }

/* بطاقات */
.admin-deck-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.deck-tab {
  background: var(--ink-soft); border: 1px solid var(--line); color: var(--muted);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: var(--font-body); font-weight: 600;
}
.deck-tab.is-active { background: rgba(245,196,81,0.14); border-color: var(--gold); color: var(--gold); }

.card-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.card-row.inactive { opacity: 0.5; }
.card-row-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.card-action-tag {
  background: rgba(139,124,246,0.16); color: var(--violet); border-radius: 6px;
  padding: 3px 8px; font-size: 0.74rem; white-space: nowrap;
}
.card-text { color: var(--cream); font-size: 0.9rem; }
.card-row-actions { display: flex; gap: 6px; align-items: center; }

/* محرّر البطاقات (نافذة) */
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 0.85rem; color: var(--muted); }
.fld textarea, .fld input, .fld select {
  background: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 8px;
  color: var(--cream); padding: 10px; font-family: var(--font-body); font-size: 0.95rem;
}
.fld-row { display: flex; gap: 10px; }
.fld-row .fld { flex: 1; }
.hint-sm { font-size: 0.78rem; color: var(--muted); margin: 6px 0 14px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; margin-top: 6px; }
.error-text { color: #ffb3c0; padding: 12px; }

@media (max-width: 600px) {
  .fld-row { flex-direction: column; }
  .admin-table { font-size: 0.8rem; }
}

/* ==========================================================================
   المرحلة 5: الكوبونات (صندوق الاسترداد + إدارة الأدمن)
   ========================================================================== */
/* صندوق الاسترداد في لوحة الحساب */
.redeem-box { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.redeem-label { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 8px; }
.redeem-row { display: flex; gap: 8px; }
.redeem-row input {
  flex: 1; background: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 8px;
  color: var(--cream); padding: 10px 12px; font-size: 0.95rem; letter-spacing: 1px;
}
.redeem-row input:focus { outline: none; border-color: var(--violet); }
.redeem-msg { margin-top: 10px; font-size: 0.88rem; padding: 8px 10px; border-radius: 8px; }
.redeem-msg.ok { color: var(--teal); background: rgba(45,212,191,0.1); }
.redeem-msg.err { color: #ffb3c0; background: rgba(255,90,118,0.1); }
.sub-until { font-size: 0.8rem; color: var(--muted); }

/* صفوف الكوبونات في لوحة الأدمن */
.coupon-main { flex-direction: column; align-items: flex-start; gap: 4px; }
.coupon-code {
  font-family: var(--font-display); font-weight: 900; font-size: 1.05rem;
  color: var(--gold); letter-spacing: 1.5px;
}
.coupon-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.82rem; }
.coupon-tag {
  background: rgba(139,124,246,0.16); color: var(--violet);
  border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}

/* ==========================================================================
   المرحلة 6: لوحة «الثعبان والسلّم»
   ========================================================================== */
#snakesView { max-width: 1200px; margin: 0 auto; padding: 16px 16px 120px; }

.snakes-board {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 0;
  aspect-ratio: 1 / 1;
  background: var(--ink-soft);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  width: 100%;
  max-width: min(720px, calc(100vh - 200px));
  margin: 0 auto;
}

.sq {
  position: relative;
  background: linear-gradient(160deg, #2a2450, #221d42);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px;
  min-height: 0;
  overflow: hidden;
}
/* تلوين تبادلي خفيف للمربّعات */
.sq:nth-child(odd) { background: linear-gradient(160deg, #2d2657, #241f49); }
.sq-snake { background: linear-gradient(160deg, #5a2540, #3d1f33) !important; }
.sq-ladder { background: linear-gradient(160deg, #2a5040, #1f3d33) !important; }
.sq-finish { background: linear-gradient(160deg, var(--gold), #c79a3a) !important; }
.sq-finish .sq-num { color: var(--ink); }
.sq-start { background: linear-gradient(160deg, #3a3470, #2a2456) !important; }

.sq-num {
  font-size: clamp(0.45rem, 1.1vw, 0.8rem);
  font-weight: 700; color: var(--muted);
  position: absolute; top: 2px; right: 4px;
}
.sq-mark { font-size: clamp(0.4rem, 1vw, 0.7rem); color: var(--cream); margin-top: 6px; text-align: center; }
.sq-tokens {
  position: absolute; bottom: 2px; left: 0; right: 0;
  display: flex; flex-wrap: wrap; gap: 1px; justify-content: center;
}

.snakes-dice-zone { display: flex; justify-content: center; margin: 14px 0; }
.snakes-dice-zone .center-dice .die { font-size: clamp(2rem, 6vw, 3.2rem); color: var(--cream); }

.gp-card.gp-done { opacity: 0.6; border-color: var(--gold); }

/* الترتيب النهائي */
.rank-list { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.rank-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
.rank-row span:first-child { color: var(--gold); font-family: var(--font-display); font-weight: 900; }

@media (max-width: 820px) {
  #snakesView .game-layout { grid-template-columns: 1fr; }
  #snakesView .game-side { position: static; }
  #snakesPlayers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ==========================================================================
   المرحلة 7: لمسات أخيرة (إتاحة، تركيز لوحة المفاتيح، تحسينات)
   ========================================================================== */
/* حلقة تركيز واضحة لمستخدمي لوحة المفاتيح فقط (لا تظهر عند النقر بالفأرة) */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}
/* حقول الإدخال: حلقة تركيز عبر الحدّ */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(139, 124, 246, 0.25);
}

/* تحسين منطقة النقر على الأزرار الصغيرة في اللمس */
@media (pointer: coarse) {
  .mini, .toggle { min-height: 36px; }
}

/* شريط التمرير (اتساق مع الثيم الداكن) */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* منع تحديد نص أزرار اللعبة عند النقر المتكرر */
.btn, .mini, .toggle, .tile, .sq, .admin-tab, .deck-tab { user-select: none; -webkit-user-select: none; }

/* حالة فارغة عامة */
.empty-state { text-align: center; color: var(--muted); padding: 32px 16px; }
.empty-state .emoji { font-size: 2.4rem; display: block; margin-bottom: 10px; }

/* ==========================================================================
   لعبة «إكس-أو» (XO)
   ========================================================================== */
#xoView { max-width: 760px; margin: 0 auto; padding: 16px 16px 120px; }
.xo-layout { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 10px; }

/* لوحة النتيجة */
.xo-score-wrap { width: 100%; max-width: 460px; }
.xo-score { display: flex; gap: 12px; }
.xo-player {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; transition: all .2s;
}
.xo-player.xo-turn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,196,81,.2); }
.xo-sym {
  width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.5rem;
  border: 2.5px solid; border-radius: 10px;
}
.xo-pinfo { flex: 1; min-width: 0; }
.xo-pname { font-weight: 700; font-size: .95rem; }
.xo-pwins { color: var(--muted); font-size: .82rem; }

.xo-status { text-align: center; margin-top: 14px; min-height: 32px; }
.xo-turn-msg { font-size: 1.05rem; }
.xo-result { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; }
.xo-result.win { color: var(--teal); }
.xo-result.lose { color: var(--coral); }
.xo-result.draw { color: var(--gold); }

/* اللوحة 3×3 */
.xo-board-wrap { width: 100%; display: flex; justify-content: center; }
.xo-board {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 10px; width: min(380px, 88vw); aspect-ratio: 1/1;
}
.xo-cell {
  background: linear-gradient(160deg, #2a2450, #221d42);
  border: 2px solid var(--line); border-radius: 16px;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 14vw, 4.2rem); line-height: 1;
  display: grid; place-items: center; cursor: default; color: var(--cream);
  transition: transform .1s, border-color .2s, background .2s;
}
.xo-cell.xo-clickable { cursor: pointer; }
.xo-cell.xo-clickable:hover { border-color: var(--violet); background: linear-gradient(160deg, #322a5e, #29234f); transform: translateY(-2px); }
.xo-cell.xo-x { color: var(--teal); }
.xo-cell.xo-o { color: var(--coral); }
.xo-cell.xo-win {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(245,196,81,.22), rgba(245,196,81,.08));
  box-shadow: 0 0 16px rgba(245,196,81,.35);
}
.xo-cell:disabled { cursor: default; }

/* قفل اختيار عدد اللاعبين (عند XO) */
.field.locked #maxChoice { opacity: .55; pointer-events: none; }

@media (max-width: 480px) {
  .xo-score { flex-direction: column; gap: 8px; }
}

/* ==========================================================================
   لعبة «لودو» (Ludo)
   ========================================================================== */
.choice-grid-2 { grid-template-columns: 1fr 1fr; }

#ludoView { max-width: 1200px; margin: 0 auto; padding: 16px 16px 120px; }

.ludo-board {
  position: relative;
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  gap: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: min(620px, calc(100vh - 200px));
  margin: 0 auto;
  background: var(--ink-soft);
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.ludo-yard { border: 3px solid; border-radius: 12px; }
.ludo-cell {
  border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: center;
  font-size: clamp(0.4rem, 1.1vw, 0.7rem);
  min-width: 0; min-height: 0;
}
.ludo-track { background: #2a2450; }
.ludo-safe { background: #322a5e; }
.ludo-star { color: var(--gold); font-size: clamp(0.5rem, 1.4vw, 0.9rem); opacity: 0.7; }
.ludo-homepath { }
.ludo-center {
  grid-row: 7 / span 3; grid-column: 7 / span 3;
  background: radial-gradient(circle, #3d3470, #241f49);
  border-radius: 50%; font-size: clamp(0.9rem, 3vw, 1.5rem);
  display: grid; place-items: center;
  margin: 22%;
}
.ludo-yardspot { background: rgba(0,0,0,0.25); border: 2px solid; border-radius: 50%; margin: 18%; }

/* طبقة القطع فوق اللوحة */
.ludo-pieces { position: absolute; inset: 0; pointer-events: none; }
.ludo-piece {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(15px, 3.5vw, 25px); height: clamp(15px, 3.5vw, 25px);
  border-radius: 50%; border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5); padding: 0; cursor: default;
  pointer-events: auto; transition: transform .12s;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(8px, 1.8vw, 12px); color: rgba(0,0,0,0.7);
  line-height: 1;
}
/* RTL: نضبط الإزاحة بالـ right لأن left يُحسب من اليسار */
.ludo-piece { right: auto; }
.ludo-piece.ludo-movable {
  cursor: pointer; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,196,81,0.5), 0 2px 5px rgba(0,0,0,0.5);
  animation: ludoPulse 1.2s ease-in-out infinite;
}
.ludo-piece.ludo-movable:hover { transform: translate(-50%, -50%) scale(1.18); }
.ludo-piece.ludo-done { opacity: 0.6; }
@keyframes ludoPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(245,196,81,0.5), 0 2px 5px rgba(0,0,0,0.5);} 50% { box-shadow: 0 0 0 6px rgba(245,196,81,0.2), 0 2px 5px rgba(0,0,0,0.5);} }

@media (max-width: 820px) {
  #ludoView .game-layout { grid-template-columns: 1fr; }
  #ludoView .game-side { position: static; }
  #ludoPlayers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ==========================================================================
   الدردشة الصوتية + تحسين إدخال رمز الغرفة
   ========================================================================== */
/* حقل رمز الغرفة الكبير */
.code-input-lg {
  font-size: 2rem; letter-spacing: 0.5em; text-align: center;
  padding: 16px 12px; font-weight: 800; text-indent: 0.5em;
}

/* بطاقة الصوت في اللوبي */
.voice-card { margin-top: 4px; }
.voice-hint { color: var(--muted); font-size: 0.88rem; margin: 0 0 12px; line-height: 1.7; }
.voice-controls { }

/* زرّ/شريط الصوت */
.voice-btn {
  background: var(--surface); border: 1.5px solid var(--line); color: var(--cream);
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font-family: var(--sans);
  font-size: 0.92rem; font-weight: 600; transition: all 0.15s;
}
.voice-btn:hover { border-color: var(--violet); }
.voice-join {
  background: linear-gradient(135deg, var(--teal), #1fa896); border: none; color: #06251f;
  font-weight: 800; width: 100%;
}
.voice-btn.is-muted { background: rgba(255,107,107,0.15); border-color: var(--coral); color: #ffb3b3; }
.voice-leave { background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.4); color: #ffb3b3; }

.voice-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.voice-status { font-weight: 700; color: var(--teal); font-size: 0.92rem; }
.voice-peers { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px; }
.voice-chip {
  font-size: 0.82rem; padding: 4px 10px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--line); color: var(--cream);
}
.voice-chip.is-live { border-color: rgba(45,212,191,0.5); }
.voice-chip.is-pending { opacity: 0.6; }
.voice-chip.is-muted { color: #ffb3b3; border-color: rgba(255,107,107,0.4); }
.voice-empty { color: var(--muted); font-size: 0.82rem; }

/* شريط الصوت المصغّر داخل شاشات اللعب (في الترويسة) */
.game-voice { display: flex; align-items: center; margin-inline-start: auto; margin-inline-end: 10px; }
.game-voice .voice-bar { gap: 6px; }
.game-voice .voice-peers { width: auto; margin-top: 0; max-width: 280px; overflow: hidden; }
.game-voice .voice-btn { padding: 6px 12px; font-size: 0.82rem; }
.game-voice .voice-join { width: auto; }
.game-voice .voice-status { font-size: 0.82rem; }
@media (max-width: 720px) {
  .game-voice .voice-peers { display: none; }  /* توفير مساحة على الجوال */
}

/* ==========================================================================
   خانة إعدادات الغرفة (نافذة + مفاتيح تبديل)
   ========================================================================== */
.btn-icon { padding: 8px 12px; font-size: 1.1rem; line-height: 1; }
.lobby-head-actions { display: flex; gap: 8px; align-items: center; }

.settings-panel { width: min(440px, 92vw); }
.settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.settings-head h3 { margin: 0; font-size: 1.2rem; }
.settings-x {
  background: var(--surface2); border: 1px solid var(--line); color: var(--cream);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 1rem;
}
.settings-x:hover { border-color: var(--coral); color: var(--coral); }

.settings-section { background: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.settings-section-title { font-weight: 800; color: var(--gold); margin-bottom: 12px; font-size: 0.95rem; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.settings-row:last-of-type { border-bottom: none; }
.settings-label { display: flex; flex-direction: column; gap: 2px; }
.settings-name { font-weight: 600; font-size: 0.95rem; }
.settings-sub { color: var(--muted); font-size: 0.8rem; }
.settings-leave { margin-top: 12px; color: #ffb3b3; border-color: rgba(255,107,107,0.4); }

/* مفتاح تبديل (toggle switch) */
.switch {
  position: relative; width: 50px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface2); border: 1.5px solid var(--line); cursor: pointer; transition: all 0.2s; padding: 0;
}
.switch .switch-knob {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--muted); transition: all 0.2s;
}
.switch.on { background: rgba(45,212,191,0.25); border-color: var(--teal); }
.switch.on .switch-knob { right: calc(100% - 24px); background: var(--teal); }

/* ==========================================================================
   الأنيميشن العام للموقع (حركات سلسة واحترافية)
   ========================================================================== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.7); } 60% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,196,81,0.0); } 50% { box-shadow: 0 0 18px 2px rgba(245,196,81,0.35); } }

/* ظهور الشاشة عند التبديل: أي main يصبح ظاهرًا (ليس hidden) يتحرّك للداخل */
main:not(.hidden) { animation: fadeInUp 0.4s ease both; }

/* ظهور البطاقات بتتابع لطيف */
.dashboard:not(.hidden) .card { animation: fadeInUp 0.45s ease both; }
.grid-2 > .card:nth-child(1), .lobby-grid > .card:nth-child(1) { animation-delay: 0.05s; }
.grid-2 > .card:nth-child(2), .lobby-grid > .card:nth-child(2) { animation-delay: 0.14s; }
.voice-card { animation-delay: 0.22s; }

/* الأزرار: حركة دقيقة عند التمرير والضغط */
.btn { transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.2s ease, border-color 0.2s ease; }
.btn-primary:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.99); }

/* اختيارات اللعبة/العدد: نبض خفيف عند التحديد */
.choice { transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease; }
.choice:hover { transform: translateY(-3px); }
.choice.active { animation: popIn 0.3s ease; }

/* عناصر القوائم تدخل بتتابع */
.player-row { animation: slideInRight 0.35s ease both; }
.player-row:nth-child(2) { animation-delay: 0.06s; }
.player-row:nth-child(3) { animation-delay: 0.12s; }
.player-row:nth-child(4) { animation-delay: 0.18s; }

/* النوافذ المنبثقة: ظهور بتكبير لطيف */
.modal-overlay:not(.hidden) { animation: fadeIn 0.2s ease both; }
.modal-overlay:not(.hidden) .modal-box { animation: scaleIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both; }

/* التوست: يدخل من الأسفل */
.toast { animation: popIn 0.3s ease both; }

/* شعار/أيقونة النرد في الترويسة: طفو خفيف */
.brand .dice, .app-logo { display: inline-block; animation: floaty 3s ease-in-out infinite; }

/* رصيد الكوينز يلمع */
.coins { background: linear-gradient(90deg, var(--gold), #fff6d8, var(--gold)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; animation: shimmer 3.5s linear infinite; }

/* بانر البادئ ينبض */
.starter-banner:not(.hidden) { animation: popIn 0.4s ease both, glowPulse 2s ease-in-out 0.4s infinite; }

/* احترام تفضيل تقليل الحركة: نُلغي كل الأنيميشن */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   أنيميشن داخل الألعاب
   ========================================================================== */
/* النرد: ارتجاف عند الرمي */
@keyframes diceRoll {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-18deg) scale(1.15); }
  50% { transform: rotate(14deg) scale(1.2); }
  75% { transform: rotate(-8deg) scale(1.1); }
  100% { transform: rotate(0) scale(1); }
}
.die.is-rolling { animation: diceRoll 0.5s ease; }
.center-dice .die { display: inline-block; transition: transform 0.2s ease; }

/* قطع مونوبولي/الثعبان: نبض عند الحركة + هبوط */
@keyframes tokenDrop { 0% { transform: translateY(-10px) scale(1.3); opacity: 0.6; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.ptoken { animation: tokenDrop 0.35s ease; }
@keyframes tokenMovePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.ptoken.is-moving { animation: tokenMovePulse 0.4s ease; }

/* لودو: ظهور القطعة بنبض + توهّج القطع القابلة للتحريك (موجود) */
.ludo-piece { transition: top 0.4s cubic-bezier(0.4,0,0.2,1), left 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.12s; }
@keyframes capturePop { 0% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(0.4); opacity: 0.3; } 100% { transform: translate(-50%,-50%) scale(1); } }
.ludo-piece.is-captured { animation: capturePop 0.5s ease; }

/* XO: ظهور العلامة بنبض */
@keyframes xoMarkPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
.xo-cell.xo-x, .xo-cell.xo-o { animation: xoMarkPop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes xoWinFlash { 0%,100% { box-shadow: 0 0 16px rgba(245,196,81,0.35); } 50% { box-shadow: 0 0 26px 6px rgba(245,196,81,0.7); } }
.xo-cell.xo-win { animation: xoWinFlash 0.9s ease-in-out infinite; }

/* خانة لاعب الدور الحالي: توهّج لطيف */
@keyframes turnGlow { 0%,100% { border-color: var(--gold); } 50% { border-color: rgba(245,196,81,0.4); } }
.gp-card.gp-turn, .xo-player.xo-turn { animation: turnGlow 1.8s ease-in-out infinite; }

/* شاشة الفوز: احتفال */
@keyframes celebrateEmoji { 0% { transform: scale(0) rotate(-20deg); } 50% { transform: scale(1.3) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
.gameover-emoji { animation: celebrateEmoji 0.7s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes rankSlide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.rank-row { animation: rankSlide 0.4s ease both; }
.rank-row:nth-child(2) { animation-delay: 0.1s; }
.rank-row:nth-child(3) { animation-delay: 0.2s; }
.rank-row:nth-child(4) { animation-delay: 0.3s; }

/* النرد المركزي يطفو بانتظار الرمي */
.center-dice .die-empty { display: inline-block; animation: floaty 2.5s ease-in-out infinite; opacity: 0.7; }

/* ==========================================================================
   ترقية بصرية ثلاثية الأبعاد: لوحات أوضح + أحجار مجسّمة + نرد 3D
   ========================================================================== */

/* ----- النرد ثلاثي الأبعاد (بنقاط CSS بدل الرموز) ----- */
.dice3d {
  --sz: clamp(44px, 9vw, 64px);
  width: var(--sz); height: var(--sz);
  border-radius: calc(var(--sz) * 0.2);
  background: linear-gradient(145deg, #ffffff, #d9d4e0);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: calc(var(--sz) * 0.14); gap: calc(var(--sz) * 0.05);
  box-shadow:
    inset 0 calc(var(--sz) * 0.08) calc(var(--sz) * 0.12) rgba(255,255,255,0.9),
    inset 0 calc(var(--sz) * -0.1) calc(var(--sz) * 0.14) rgba(120,110,140,0.55),
    0 calc(var(--sz) * 0.12) calc(var(--sz) * 0.2) rgba(0,0,0,0.45);
  position: relative;
}
.dice3d .pip {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4458, #1a1626);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6), inset 0 -1px 1px rgba(255,255,255,0.15);
  align-self: center; justify-self: center;
}
/* مواضع النقاط في شبكة 3×3 */
.dice3d .pip.p1 { grid-area: 1 / 1; } .dice3d .pip.p2 { grid-area: 1 / 2; } .dice3d .pip.p3 { grid-area: 1 / 3; }
.dice3d .pip.p4 { grid-area: 2 / 1; } .dice3d .pip.p5 { grid-area: 2 / 2; } .dice3d .pip.p6 { grid-area: 2 / 3; }
.dice3d .pip.p7 { grid-area: 3 / 1; } .dice3d .pip.p8 { grid-area: 3 / 2; } .dice3d .pip.p9 { grid-area: 3 / 3; }
/* رمية: تدحرج ثلاثي الأبعاد */
@keyframes dice3dRoll {
  0%   { transform: rotateX(0) rotateY(0) scale(1); }
  25%  { transform: rotateX(180deg) rotateY(90deg) scale(1.12); }
  50%  { transform: rotateX(360deg) rotateY(180deg) scale(1.18); }
  75%  { transform: rotateX(180deg) rotateY(270deg) scale(1.12); }
  100% { transform: rotateX(0) rotateY(0) scale(1); }
}
.dice3d.is-rolling { animation: dice3dRoll 0.6s cubic-bezier(0.4,0,0.2,1); }
.center-dice { display: flex; gap: 12px; justify-content: center; align-items: center; perspective: 500px; }
.dice-empty3d {
  --sz: clamp(44px, 9vw, 64px);
  width: var(--sz); height: var(--sz); border-radius: calc(var(--sz)*0.2);
  border: 2px dashed var(--line); display: grid; place-items: center;
  font-size: calc(var(--sz) * 0.5); opacity: 0.55; animation: floaty 2.5s ease-in-out infinite;
}

/* ----- أحجار/قطع مجسّمة (كرات لامعة) ----- */
.gp-token {
  background-image: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85), rgba(255,255,255,0) 42%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.4), 0 3px 6px rgba(0,0,0,0.4);
  border: 1px solid rgba(0,0,0,0.15);
}
/* قطع لودو: كرات ثلاثية الأبعاد بارزة */
.ludo-piece {
  background-image: radial-gradient(circle at 33% 27%, rgba(255,255,255,0.9), rgba(255,255,255,0) 45%);
  box-shadow: inset 0 -3px 5px rgba(0,0,0,0.4), inset 0 2px 3px rgba(255,255,255,0.5), 0 3px 7px rgba(0,0,0,0.55);
  border: 2px solid rgba(255,255,255,0.5);
}
.ludo-piece.ludo-movable {
  box-shadow: inset 0 -3px 5px rgba(0,0,0,0.4), inset 0 2px 3px rgba(255,255,255,0.5),
    0 0 0 3px rgba(245,196,81,0.6), 0 3px 8px rgba(0,0,0,0.55);
}
/* أحجار مونوبولي/الثعبان على المربّعات */
.ptoken, .sq-token {
  background-image: radial-gradient(circle at 33% 27%, rgba(255,255,255,0.85), rgba(255,255,255,0) 45%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.5);
  border: 1.5px solid rgba(255,255,255,0.45);
}

/* ----- مربّعات أوضح وأبرز ----- */
/* مونوبولي */
.tile {
  background: linear-gradient(155deg, #322a5e, #241d44);
  border: 1.5px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.25);
}
.tile:hover { border-color: var(--gold); box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), 0 0 0 2px rgba(245,196,81,0.4); }

/* الثعبان والسلّم: مربّعات أوضح بتباين ألوان */
.snakes-board {
  border: 3px solid var(--line);
  background: linear-gradient(135deg, #1f1a38, #15122a);
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.4);
}
.snakes-sq {
  border: 1.5px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.07);
  font-weight: 700;
}
.snakes-sq .sq-num { opacity: 0.9; font-weight: 800; }
.snakes-sq.sq-snake { background: linear-gradient(150deg, #5e2740, #3d1a2c); border-color: rgba(255,107,107,0.4); }
.snakes-sq.sq-ladder { background: linear-gradient(150deg, #1f5e3a, #14402a); border-color: rgba(45,212,191,0.4); }
.snakes-sq .sq-ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

/* لودو: مسار أوضح */
.ludo-board {
  border: 4px solid var(--line);
  background: linear-gradient(135deg, #1f1a38, #14122a);
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.45);
}
.ludo-track {
  background: linear-gradient(155deg, #322a5e, #251e47);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
}
.ludo-safe { background: linear-gradient(155deg, #3d3470, #2a2352); }
.ludo-yard { box-shadow: inset 0 2px 10px rgba(0,0,0,0.35); border-width: 4px; }
.ludo-yardspot {
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.15);
  border-width: 2.5px;
}
.ludo-center { box-shadow: inset 0 0 14px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4); border: 2px solid rgba(245,196,81,0.4); }

/* XO: خلايا أبرز وأوضح */
.xo-board { gap: 12px; }
.xo-cell {
  background: linear-gradient(160deg, #322a5e, #241d44);
  border: 2.5px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.08), inset 0 -3px 6px rgba(0,0,0,0.3), 0 3px 6px rgba(0,0,0,0.3);
}
.xo-cell.xo-x, .xo-cell.xo-o { text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.xo-cell.xo-clickable:hover {
  border-color: var(--gold);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.1), 0 0 0 2px rgba(245,196,81,0.4), 0 4px 10px rgba(0,0,0,0.4);
}

/* ==========================================================================
   نرد صغير ثلاثي الأبعاد (للوبي) + طبقة قطع الثعبان المتحرّكة + قفز
   ========================================================================== */
/* النرد الصغير في اللوبي (رمي تحديد البادئ) */
.dice3d-sm { --sz: clamp(26px, 5vw, 34px); vertical-align: middle; }
.dice-chip { display: inline-flex; align-items: center; gap: 8px; }
.dice-chip-name { font-weight: 600; }
.dice-results { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }

/* جعل لوحة الثعبان سياق تموضع لطبقة القطع */
.snakes-board { position: relative; }
.snakes-token-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.sn-token {
  position: absolute;
  width: clamp(16px, 3.2vw, 26px); height: clamp(16px, 3.2vw, 26px);
  border-radius: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  font-size: clamp(7px, 1.4vw, 11px); font-weight: 900; color: rgba(0,0,0,0.75);
  /* القفز: انتقال سلس بين المربّعات */
  transition: top 0.55s cubic-bezier(0.45, 0, 0.25, 1.3), left 0.55s cubic-bezier(0.45, 0, 0.25, 1.3), opacity 0.3s;
  z-index: 6;
}
/* أثناء الانتقال نرفع القطعة قليلًا لإيحاء القفز */
@keyframes hopArc { 0% { margin-top: 0; } 50% { margin-top: -10px; } 100% { margin-top: 0; } }
.sn-token.hopping { animation: hopArc 0.55s ease; }

/* ==========================================================================
   لودو: وسائل المساعدة والتعطيل على المسار + أنيميشن
   ========================================================================== */
.ludo-powers { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ludo-power {
  position: absolute; transform: translate(-50%, -50%);
  font-size: clamp(11px, 2.4vw, 17px); line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  animation: powerFloat 2.2s ease-in-out infinite;
}
@keyframes powerFloat { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-55%) scale(1.12); } }
/* توهّج خلف الوسيلة حسب نوعها */
.ludo-power::after {
  content: ''; position: absolute; inset: -40%; border-radius: 50%; z-index: -1;
  animation: powerGlow 2.2s ease-in-out infinite;
}
.ludo-power-boost::after { background: radial-gradient(circle, rgba(45,212,191,0.5), transparent 70%); }
.ludo-power-hazard::after { background: radial-gradient(circle, rgba(255,107,107,0.5), transparent 70%); }
@keyframes powerGlow { 0%,100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 0.9; transform: scale(1.2); } }
/* عند التفعيل: وميض وتكبير ثم اختفاء */
.ludo-power.power-trigger { animation: powerTrigger 0.55s ease forwards; }
@keyframes powerTrigger {
  0% { transform: translate(-50%,-50%) scale(1); }
  40% { transform: translate(-50%,-50%) scale(1.8); filter: drop-shadow(0 0 8px #fff); }
  100% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
}
/* القطعة عند إصابتها بوسيلة: ارتجاج/وميض */
@keyframes powerHit { 0%,100% { box-shadow: inset 0 -3px 5px rgba(0,0,0,0.4), 0 3px 7px rgba(0,0,0,0.55); } 50% { box-shadow: 0 0 0 5px rgba(255,255,255,0.7), 0 3px 10px rgba(0,0,0,0.6); transform: translate(-50%,-50%) scale(1.25); } }
.ludo-piece.power-hit { animation: powerHit 0.5s ease; }

/* وسيلة النجمة الآمنة السادسة: تمييز إضافي */
.ludo-safe .ludo-star { animation: safeStarPulse 2s ease-in-out infinite; }
@keyframes safeStarPulse { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); color: var(--gold); } }

/* مفتاح الوسائل في اللوحة الجانبية */
.power-legend { margin-top: 12px; padding: 10px 12px; background: var(--ink-soft); border: 1px solid var(--line); border-radius: 10px; }
.power-legend-title { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
.pl-item { display: inline-block; font-size: 0.78rem; margin: 2px 6px 2px 0; color: var(--cream); }

/* ==========================================================================
   لودو: الخانات الأربع الوسطية المحيطة بالمركز (خانات وقوف مشتركة)
   ========================================================================== */
.ludo-hub {
  position: relative;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.25), inset 0 0 0 2px rgba(255,255,255,0.3);
  z-index: 2;
}
.ludo-hub-star {
  font-size: clamp(0.5rem, 1.5vw, 0.95rem);
  color: #fff; opacity: 0.9; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  display: grid; place-items: center; width: 100%; height: 100%;
  animation: hubPulse 1.8s ease-in-out infinite;
}
@keyframes hubPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.3); opacity: 1; text-shadow: 0 0 8px rgba(255,255,255,0.8); }
}

/* ==========================================================================
   لعبة الشطرنج
   ========================================================================== */
.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: min(600px, calc(100vh - 200px));
  margin: 0 auto;
  border: 4px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  direction: ltr; /* اللوحة بإحداثيات LTR */
}
.chess-sq {
  position: relative;
  border: none; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  font-size: clamp(1.6rem, 6vw, 3rem);
  transition: background 0.15s;
}
.chess-sq.light { background: #e9e2cf; }
.chess-sq.dark  { background: #6b5b8a; }
.chess-sq:hover { filter: brightness(1.08); }
/* القطع — مجسّمة بظل */
.chess-piece {
  line-height: 1; user-select: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45));
  transition: transform 0.12s;
}
.chess-piece.cp-white { color: #fbfaf6; text-shadow: 0 1px 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.4); }
.chess-piece.cp-black { color: #241f30; text-shadow: 0 1px 1px rgba(255,255,255,0.25); }
.chess-sq:hover .chess-piece { transform: scale(1.08); }
/* الإبرازات */
.chess-sq.cs-selected { background: #f5c451 !important; box-shadow: inset 0 0 0 3px rgba(245,196,81,0.9); }
.chess-sq.cs-last { box-shadow: inset 0 0 0 3px rgba(45,212,191,0.55); }
.chess-sq.cs-target::after {
  content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%;
  background: rgba(45,212,191,0.55); box-shadow: 0 0 8px rgba(45,212,191,0.6);
  animation: chessDot 1.2s ease-in-out infinite;
}
.chess-sq.cs-capture::after {
  width: 84%; height: 84%; background: transparent; border-radius: 50%;
  border: 4px solid rgba(255,107,107,0.7); box-shadow: 0 0 10px rgba(255,107,107,0.5);
}
@keyframes chessDot { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 1; } }
.chess-sq.cs-check { background: #ff6b6b !important; animation: chessCheck 0.8s ease-in-out infinite; }
@keyframes chessCheck { 0%,100% { box-shadow: inset 0 0 0 3px rgba(255,107,107,0.6); } 50% { box-shadow: inset 0 0 14px 4px rgba(255,107,107,0.85); } }

/* الحالة والنتيجة */
.chess-status { margin-top: 12px; text-align: center; min-height: 28px; }
.chess-turn { font-weight: 700; color: var(--muted); }
.chess-turn.mine { color: var(--gold); }
.chess-result { font-family: var(--font-display); font-size: 1.05rem; }
.chess-result.win { color: var(--gold); }
.chess-result.draw { color: var(--teal); }

/* اختيار الترقية */
.promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.promo-btn {
  font-size: 2.4rem; padding: 10px; border-radius: 12px;
  background: linear-gradient(160deg, #322a5e, #241d44); border: 2px solid var(--line);
  color: #fbfaf6; cursor: pointer; transition: transform 0.12s, border-color 0.2s;
}
.promo-btn:hover { transform: translateY(-3px); border-color: var(--gold); }

/* ==========================================================================
   مونوبولي — النسخة التجريبية (لوحة 11×11)
   ========================================================================== */
.mono-board {
  position: relative; direction: ltr;
  display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr);
  gap: 0; aspect-ratio: 1 / 1; width: 100%; max-width: min(640px, calc(100vh - 200px));
  margin: 0 auto; background: #13351f; border: 3px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.45);
}
.mono-cell {
  position: relative; border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(160deg, #1f5e3a, #16482c);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 2px 1px; overflow: hidden; min-width: 0;
}
.mono-corner { background: linear-gradient(160deg, #267045, #1a5232); }
.mono-bar { display: block; width: 100%; height: 18%; min-height: 5px; border-radius: 2px; margin-bottom: 1px; }
.mono-name { font-size: clamp(4px, 1vw, 8px); line-height: 1.05; text-align: center; color: var(--cream); font-weight: 600; word-break: break-word; }
.mono-price { font-size: clamp(4px, 0.9vw, 7px); color: var(--gold); font-weight: 700; }
.mono-owner { position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; font-size: 7px; display: grid; place-items: center; }
.mono-center {
  grid-row: 2 / span 9; grid-column: 2 / span 9;
  display: grid; place-items: center; gap: 6px;
  background: radial-gradient(circle, #1a5232, #133b24);
  border: 1px solid rgba(255,255,255,0.08);
}
.mono-center-logo { font-size: clamp(2rem, 8vw, 4rem); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }
.mono-center-title { font-family: var(--font-display); font-size: clamp(1rem, 4vw, 2rem); color: var(--gold); letter-spacing: 2px; }
/* طبقة القطع */
.mono-token-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.mono-token {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(14px, 3vw, 22px); height: clamp(14px, 3vw, 22px); border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(7px, 1.5vw, 11px); font-weight: 900; color: rgba(0,0,0,0.7);
  border: 2px solid rgba(255,255,255,0.5);
  background-image: radial-gradient(circle at 33% 27%, rgba(255,255,255,0.85), rgba(255,255,255,0) 45%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.5);
  transition: top 0.2s ease, left 0.2s ease;
}
/* إدارة العقارات */
.manage-list { max-height: 50vh; overflow-y: auto; }
.manage-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.manage-btns { display: flex; gap: 6px; flex-shrink: 0; }
.btn-sm { padding: 4px 10px; font-size: 0.78rem; }

/* ==========================================================================
   لعبة الدومينو
   ========================================================================== */
.domino-board {
  min-height: clamp(120px, 22vh, 200px);
  background: linear-gradient(135deg, #1f5e3a, #16482c);
  border: 3px solid var(--line); border-radius: 12px;
  padding: 14px; overflow-x: auto; display: flex; align-items: center;
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.4);
}
.dom-empty { color: var(--muted); margin: auto; font-size: 0.95rem; }
.dom-chain { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
/* حجر دومينو */
.dom-tile {
  display: inline-flex; background: linear-gradient(160deg, #fbfaf6, #e6e1d4);
  border: 1px solid rgba(0,0,0,0.25); border-radius: 6px; padding: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.8);
}
.dom-tile.horiz { flex-direction: row; }
.dom-tile.vert { flex-direction: column; }
.dom-divider { background: rgba(0,0,0,0.3); }
.dom-tile.horiz .dom-divider { width: 2px; align-self: stretch; margin: 2px 1px; }
.dom-tile.vert .dom-divider { height: 2px; align-self: stretch; margin: 1px 2px; }
/* نصف الحجر = شبكة 3×3 نقاط */
.dom-half {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: clamp(26px, 6vw, 38px); height: clamp(26px, 6vw, 38px); gap: 1px; padding: 2px;
}
.dpip { border-radius: 50%; background: transparent; align-self: center; justify-self: center; width: 70%; height: 70%; }
.dpip.on { background: radial-gradient(circle at 35% 30%, #4a4458, #1a1626); box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); }
/* يد اللاعب */
.domino-hand {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px; padding: 12px; background: var(--ink-soft);
  border: 2px solid var(--line); border-radius: 12px; min-height: 60px;
}
.domino-hand .dom-tile { cursor: default; transition: transform 0.12s, box-shadow 0.2s; }
.domino-hand .dom-tile.dom-playable { cursor: pointer; box-shadow: 0 0 0 2px rgba(45,212,191,0.6), 0 2px 6px rgba(0,0,0,0.4); }
.domino-hand .dom-tile.dom-playable:hover { transform: translateY(-5px); }
.domino-hand .dom-tile.dom-picked { box-shadow: 0 0 0 3px var(--gold), 0 4px 10px rgba(0,0,0,0.5); transform: translateY(-5px); }
/* الحالة */
.domino-status { margin-top: 12px; text-align: center; }
.dom-turn { font-weight: 700; color: var(--muted); }
.dom-turn.mine { color: var(--gold); }
.dom-ends { font-size: 0.8rem; color: var(--muted); margin-top: 3px; }
.dom-result { font-family: var(--font-display); font-size: 1.05rem; }
.dom-result.win { color: var(--gold); }

/* الدومينو — تسمية اليد في النسخة التجريبية */
.dom-hand-label { width: 100%; text-align: center; font-size: 0.82rem; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.dom-hand-tiles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   مونوبولي — بطاقات فرصة/صندوق الحظ المتحرّكة
   ========================================================================== */
.mono-card-overlay { display: grid; place-items: center; animation: fadeIn 0.25s ease; }
.mono-card-overlay.closing { animation: fadeOut 0.25s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.mono-card {
  width: min(340px, 86vw); border-radius: 18px; padding: 4px;
  animation: cardDeal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.mono-card-chance { background: linear-gradient(150deg, #f5a623, #e07b00); }
.mono-card-chest { background: linear-gradient(150deg, #4ec3e0, #2d8fae); }
@keyframes cardDeal {
  0% { transform: translateY(-40px) rotateZ(-8deg) scale(0.6); opacity: 0; }
  100% { transform: translateY(0) rotateZ(0) scale(1); opacity: 1; }
}
.mono-card-inner {
  background: #1a1530; border-radius: 15px; padding: 26px 22px; text-align: center;
}
.mono-card-icon { font-size: 3.4rem; line-height: 1; margin-bottom: 8px; animation: cardIconPop 0.6s ease 0.2s both; }
@keyframes cardIconPop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.mono-card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; margin-bottom: 12px; color: var(--gold); }
.mono-card-chest .mono-card-title { color: var(--teal); }
.mono-card-text { color: var(--cream); font-size: 1.02rem; line-height: 1.5; margin-bottom: 18px; }

/* حركة القطعة عند الحطّ */
.mono-token.hopping { animation: monoHop 0.2s ease; }
@keyframes monoHop { 50% { transform: translate(-50%, -50%) scale(1.3) translateY(-4px); } }
/* وميض البطاقة على الخانة عند الحطّ */
.mono-cell.cell-land { animation: cellLand 0.6s ease; }
@keyframes cellLand { 0%,100% { box-shadow: none; } 50% { box-shadow: inset 0 0 0 3px var(--gold), 0 0 12px rgba(245,196,81,0.5); } }

/* ==========================================================================
   تحسينات عامة للأنيميشن (كل الألعاب)
   ========================================================================== */
/* تغيّر الكوينز/الأرقام بنبضة */
.gp-coins.coin-up { animation: coinUp 0.6s ease; }
.gp-coins.coin-down { animation: coinDown 0.6s ease; }
@keyframes coinUp { 0% { color: var(--teal); transform: scale(1.2); } 100% { color: inherit; transform: scale(1); } }
@keyframes coinDown { 0% { color: var(--coral); transform: scale(1.2); } 100% { color: inherit; transform: scale(1); } }
/* دخول بطاقات اللاعبين */
.gp-card { animation: gpIn 0.3s ease backwards; }
.gp-card:nth-child(2) { animation-delay: 0.05s; }
.gp-card:nth-child(3) { animation-delay: 0.1s; }
.gp-card:nth-child(4) { animation-delay: 0.15s; }
@keyframes gpIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
/* توهّج دور اللاعب الحالي */
.gp-card.gp-turn { animation: turnGlow 2s ease-in-out infinite; }
@keyframes turnGlow { 0%,100% { box-shadow: 0 0 0 2px rgba(245,196,81,0.3); } 50% { box-shadow: 0 0 0 2px rgba(245,196,81,0.7), 0 0 14px rgba(245,196,81,0.3); } }

/* ==========================================================================
   تحسينات الجوال — كل الألعاب تعمل على شاشات الهاتف
   ========================================================================== */
@media (max-width: 760px) {
  /* تخطيط اللعبة عمودي: اللوحة فوق، اللوحة الجانبية تحت */
  .game-layout { flex-direction: column; gap: 12px; }
  .game-side { width: 100%; order: 2; }
  .board-wrap { order: 1; width: 100%; }
  .side-card { padding: 12px; }
  /* اللوحات تملأ العرض */
  .mono-board, .ludo-board, .snakes-board, .chess-board { max-width: 96vw; }
  /* لوحة اللاعبين أفقية موفّرة للمساحة */
  #monoPlayers, #domPlayers, #chessPlayers, #ludoPlayers, #xoPlayers, #snakesPlayers,
  #monoPlayers ~ *, .game-side #dominoPlayers {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .game-side .gp-card { flex: 1 1 45%; min-width: 130px; }
  /* شريط الإجراءات ثابت أسفل الشاشة لسهولة الوصول */
  .action-bar {
    position: sticky; bottom: 0; z-index: 30;
    background: rgba(20,16,38,0.96); backdrop-filter: blur(8px);
    padding: 10px; margin: 0 -8px; border-top: 1px solid var(--line);
    flex-wrap: wrap; gap: 8px;
  }
  .action-bar .btn { flex: 1 1 auto; min-width: 120px; }
  /* الدومينو: اليد قابلة للتمرير أفقيًا */
  .domino-hand, .dom-hand-tiles { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  .dom-tile.vert .dom-half { width: clamp(22px, 8vw, 32px); height: clamp(22px, 8vw, 32px); }
  /* مونوبولي: أسماء أصغر لتتسع */
  .mono-name { font-size: clamp(3px, 1.4vw, 7px); }
  /* الشطرنج: قطع أوضح */
  .chess-piece { font-size: clamp(1.4rem, 8vw, 2.6rem); }
  /* عناوين اللعبة أصغر */
  .demo-top .brand span:last-child { font-size: 1.1rem; }
  .demo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 420px) {
  .demo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .demo-card { padding: 14px 8px; }
  .demo-card .ico { font-size: 2rem; }
  .demo-card h3 { font-size: 0.95rem; }
  .demo-card p { font-size: 0.72rem; }
  .game-side .gp-card { flex: 1 1 100%; }
}

/* الدومينو على الجوال: منع تجاوز عرض الصفحة */
@media (max-width: 760px) {
  .domino-board { max-width: 96vw; overflow-x: auto; }
  .domino-hand { max-width: 96vw; }
  .board-wrap { max-width: 100%; overflow: hidden; }
}

/* ==========================================================================
   ✦ تحديث الثيم ٢.٠ — زجاجي/مائي + دارك/لايت مود + ألوان أجمل
   ========================================================================== */
:root {
  /* لوحة ألوان محدّثة أكثر حيوية */
  --brand-1: #8b7cf6;   /* بنفسجي */
  --brand-2: #ff6b9d;   /* وردي مرجاني */
  --brand-3: #2dd4bf;   /* فيروزي */
  --brand-grad: linear-gradient(135deg, #8b7cf6 0%, #ff6b9d 50%, #ffa45b 100%);
  --gold-grad: linear-gradient(135deg, #ffd86b, #f5a623);
  /* متغيّرات الزجاج */
  --glass-bg: rgba(46, 39, 84, 0.55);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: 16px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  --glass-highlight: rgba(255, 255, 255, 0.08);
}

/* ===== الوضع الداكن (الافتراضي) ===== */
:root, [data-theme="dark"] {
  --ink:        #14102a;
  --ink-soft:   #1e1840;
  --surface:    #2a2350;
  --surface-2:  #352c63;
  --cream:      #f7f3e8;
  --muted:      #b3aad6;
  --line:       rgba(179,170,214,0.18);
  --glass-bg:   rgba(42, 35, 80, 0.5);
  --glass-border: rgba(255, 255, 255, 0.12);
  --body-grad-1: rgba(139,124,246,0.22);
  --body-grad-2: rgba(255,107,157,0.12);
  --body-grad-3: rgba(45,212,191,0.12);
}

/* ===== الوضع الفاتح ===== */
[data-theme="light"] {
  --ink:        #eef0f8;
  --ink-soft:   #ffffff;
  --surface:    #ffffff;
  --surface-2:  #f4f5fb;
  --cream:      #20203a;       /* النص الأساسي صار داكنًا */
  --muted:      #5b5878;
  --gold:       #d99a1f;
  --coral:      #e8537f;
  --teal:       #14a892;
  --violet:     #6b5be0;
  --line:       rgba(40,36,80,0.14);
  --glass-bg:   rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 8px 32px rgba(80, 70, 160, 0.15);
  --glass-highlight: rgba(255, 255, 255, 0.7);
  --body-grad-1: rgba(139,124,246,0.18);
  --body-grad-2: rgba(255,107,157,0.12);
  --body-grad-3: rgba(45,212,191,0.10);
  --shadow:     0 12px 40px rgba(80,70,160,0.16);
  --shadow-sm:  0 4px 14px rgba(80,70,160,0.12);
}

/* خلفية الجسم بتدرّجات ناعمة متحرّكة */
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--body-grad-1), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--body-grad-3), transparent 60%),
    radial-gradient(700px 700px at 50% 50%, var(--body-grad-2), transparent 70%),
    var(--ink);
  background-attachment: fixed;
  transition: background 0.5s ease, color 0.3s ease;
}

/* ===== فئات الزجاج (Glassmorphism) ===== */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}

/* طبّق الزجاج على البطاقات والأسطح الرئيسية */
.card, .side-card, .demo-card, .choice, .modal-box,
.dashboard .stat-card, .lobby-card, .player-row {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, border-color 0.25s ease;
}

/* الأزرار الأساسية بتدرّج جذّاب */
.btn-primary {
  background: var(--brand-grad);
  background-size: 200% 200%;
  border: none; color: #fff;
  box-shadow: 0 4px 16px rgba(139,124,246,0.4);
  animation: gradShift 6s ease infinite;
}
.btn-primary:hover { box-shadow: 0 6px 22px rgba(255,107,157,0.5); transform: translateY(-2px); }
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* العناوين بتدرّج */
.brand span:last-child, .auth-title, .dash-title {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== زرّ تبديل الوضع ===== */
.theme-toggle {
  position: relative; width: 52px; height: 28px; border-radius: 20px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  cursor: pointer; display: inline-flex; align-items: center; padding: 0 4px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.3s;
}
.theme-toggle .tt-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold-grad); display: grid; place-items: center; font-size: 11px;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  transform: translateX(0);
}
[data-theme="light"] .theme-toggle .tt-thumb { transform: translateX(24px); }

/* ===== أنيميشن إضافية للموقع ===== */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(139,124,246,0.4); } 50% { box-shadow: 0 0 0 8px rgba(139,124,246,0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* البطاقات تطفو قليلًا عند المرور */
.demo-card:hover, .choice:hover { transform: translateY(-6px) scale(1.02); border-color: var(--brand-1); }
.card:hover { box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 0 0 1px rgba(139,124,246,0.2); }
/* شعار الدخول يطفو */
.brand .dice, .auth-logo, .demo-header .dice { animation: floatY 3s ease-in-out infinite; display: inline-block; }
/* دخول العناصر */
.view-anim { animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1); }

/* ==========================================================================
   صندوق المحفظة في لوحة المستخدم
   ========================================================================== */
.wallet-box {
  margin: 14px 0; padding: 14px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.wallet-row { display: flex; align-items: center; gap: 10px; }
.wallet-icon { font-size: 1.8rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.wallet-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--gold); line-height: 1; }
.wallet-label { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.wallet-value.coin-pulse { animation: coinUp 0.6s ease; }

/* جدول الأدمن: عمود المحفظة */
.admin-table .toggle.on { background: rgba(45,212,191,0.2); border-color: var(--teal); color: var(--teal); }