/* ========== إعداد عام ومتغيرات CSS ========== */
:root {
  /* ... (نفس المتغيرات - لم تتغير) ... */
  --color-primary-bg: #1A1A2E; 
  --color-secondary-bg: #16213E;
  --color-panel-bg: rgba(255, 255, 255, 0.05);
  --color-border-light: rgba(255, 255, 255, 0.1);
  --color-border-highlight: rgba(255, 255, 255, 0.2);
  --color-text-primary: #E0E0E0;
  --color-text-secondary: #B0B0B0;
  --color-text-highlight: #FFD700;
  --color-text-accent: #8A2BE2;
  --color-red-team: #E74C3C;
  --color-blue-team: #3498DB;
  --color-neutral: #c389db;
  --color-assassin: #000000;
  --color-online: #2ECC71;
  --color-offline: #7F8C8D;
  --font-primary: 'Cairo', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  --border-radius-main: 14px; /* [تعديل] أبسط */
  --border-radius-card: 10px;
}
/*
body {
  margin: 0;
  font-family: var(--font-primary);
  background: linear-gradient(135deg, var(--color-primary-bg) 0%, #0F0F1A 100%); 
  color: var(--color-text-primary);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  direction: rtl; 
}
*/
::selection {
  background: var(--color-text-highlight);
  color: var(--color-primary-bg);
}

/* ... (Glassmorphism - لم يتغير) ... */
.glass-panel {
  background: rgba(255, 255, 255, 0.08); 
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-main);
}
button {
  background: linear-gradient(90deg, #6A00FF, #8E2DE2);
  border: none;
  border-radius: 8px;
  padding: 8px 16px; /* [تعديل] أبسط */
  color: white;
  font-weight: 600;
  font-family: var(--font-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px; /* [تعديل] خط أصغر */
}
button:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 15px rgba(106, 0, 255, 0.4);
}
button:active {
  transform: scale(0.95);
  box-shadow: none;
}
.icon-button {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  padding: 6px 10px; /* [تعديل] أصغر */
  border-radius: 8px;
  font-size: 13px; /* [تعديل] أصغر */
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-button:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
#players-count-display {
  background: rgba(106, 0, 255, 0.3);
  border-radius: 12px;
  padding: 2px 8px;
  font-weight: 600;
  color: #FFD700;
  min-width: 20px;
  text-align: center;
}

/* ========== الشريط العلوي ========== */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px; /* [تعديل] ارتفاع أقل */
  background: var(--color-secondary-bg);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  position: relative;
  z-index: 10;
  flex-direction: row-reverse;
  flex-shrink: 0;
}
.left-section, .right-section { display: flex; align-items: center; gap: 15px; }
.player-avatar {
  width: 40px; /* [تعديل] أصغر */
  height: 40px; /* [تعديل] أصغر */
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-text-highlight);
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255,215,0,0.3);
  transition: 0.3s transform;
}
.player-avatar:hover { transform: scale(1.1); }
.player-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* قوائم منبثقة أبسط */

.player-item {
  display: flex;
  align-items: center;
  gap: 8px; /* [تعديل] أقرب */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 6px 10px; /* [تعديل] أصغر */
  font-size: 14px; /* [تعديل] أصغر */
  color: var(--color-text-primary);
  transition: 0.2s background;
  cursor: pointer;
  flex-shrink: 0;
}
.player-item:hover { background: rgba(255, 255, 255, 0.1); }
.status {
  width: 9px; /* [تعديل] أصغر */
  height: 9px; /* [تعديل] أصغر */
  border-radius: 50%;
  box-shadow: 0 0 5px currentColor;
}
.online { background-color: var(--color-online); }
.offline { background-color: var(--color-offline); }
.player-actions {
  display: none;
  margin-right: auto; 
  gap: 8px;
}
.player-item.active .player-actions { display: flex; }
.player-actions button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  padding: 5px 8px; /* [تعديل] أصغر */
  font-size: 12px; /* [تعديل] أصغر */
  border-radius: 6px;
  transition: 0.2s;
  flex-shrink: 0;
}
.player-actions button:hover {
  background: var(--color-text-highlight);
  color: var(--color-primary-bg);
}
.player-menu {
  position: absolute;
  top: 60px; /* [تعديل] أقرب */
  right: 20px;
  width: 260px; /* [تعديل] أضيق */
  padding: 15px; /* [تعديل] أبسط */
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  color: var(--color-text-primary);
  z-index: 50;
}
.player-menu.active { display: flex; }
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.avatar-section img {
  width: 80px; /* [تعديل] أصغر */
  height: 80px; /* [تعديل] أصغر */
  border-radius: 50%;
  border: 3px solid var(--color-text-highlight);
  object-fit: cover;
  cursor: pointer;
  transition: 0.3s transform;
}
.avatar-section img:hover { transform: scale(1.05); }
#player-name {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  border-radius: 8px;
  padding: 8px; /* [تعديل] أبسط */
  font-size: 15px; /* [تعديل] أصغر */
  text-align: center;
  outline: none;
  transition: 0.3s;
  font-family: var(--font-primary);
}
#player-name::placeholder { color: var(--color-text-secondary); }
#player-name:focus {
  border-color: var(--color-text-highlight);
  box-shadow: 0 0 10px rgba(255,215,0,0.3);
}
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.menu-buttons button {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  font-size: 13px; /* [تعديل] أصغر */
}
.menu-buttons button:hover { background: rgba(255, 255, 255, 0.15); }
#change-avatar {
  background: none;
  border: none;
  color: var(--color-text-highlight);
  font-size: 13px; /* [تعديل] أصغر */
  text-decoration: underline;
  padding: 0;
}
#change-avatar:hover {
  color: var(--color-text-accent);
  transform: none;
  box-shadow: none;
}


/* ========== المحتوى الرئيسي ========== */
main {
  flex: 1; 
  display: flex;
  flex-direction: row; 
  justify-content: space-between;
  padding: 15px; /* [تعديل] تقليل الحشو */
  box-sizing: border-box;
  gap: 15px; /* [تعديل] تقليل المسافات */
  overflow: hidden; 
}

/* العمود الجانبي (للفريق) */
.side-column {
  width: 22%;
  display: flex;
  flex-direction: column;
  gap: 15px; /* [تعديل] تقليل المسافات */
  height: 100%; 
}



/* لوحة معلومات الفريق */
.team-info-box {
  flex-shrink: 0; 
  padding: 15px; /* [تعديل] أبسط */
  display: flex;
  flex-direction: column;
  gap: 10px; /* [تعديل] أقرب */
  transition: all 0.4s ease;
  opacity: 0.7; 
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* مؤشر الدور النشط *//*
.team-info-box.active-turn {
  opacity: 1;
  transform: scale(1.02);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4), 0 0 25px var(--color-glow);
}
.team-blue.active-turn { --color-glow: rgba(52, 152, 219, 0.6); }
.team-red.active-turn { --color-glow: rgba(231, 76, 60, 0.6); }
*/
.team-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* [تعديل] أقرب */
  margin-bottom: 5px; /* [تعديل] أقل */
}
.team-logo {
  width: 50px; /* [تعديل] أصغر */
  height: 50px; /* [تعديل] أصغر */
  border-radius: 50%;
  border: 2px solid var(--color-text-highlight);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 15px rgba(255,215,0,0.2);
}
.team-name {
  font-family: var(--font-secondary);
  font-size: 22px; /* [تعديل] أصغر */
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.team-blue .team-name { color: var(--color-blue-team); }
.team-red .team-name { color: var(--color-red-team); }
.team-blue { border-left: 4px solid var(--color-blue-team); } /* [تعديل] أنحف */
.team-red { border-right: 4px solid var(--color-red-team); } /* [تعديل] أنحف */

.players {
  font-size: 13px; /* [تعديل] أصغر */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px; /* [تعديل] أقرب */
  color: var(--color-text-primary);
}
.players span {
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px; /* [تعديل] أصغر */
  border-radius: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.spy-master {
  text-align: center;
  font-size: 14px; /* [تعديل] أصغر */
  color: var(--color-text-secondary);
  margin-top: 5px; /* [تعديل] أقرب */
}
.spy-master strong {
  color: var(--color-text-highlight);
  font-size: 15px; /* [تعديل] أصغر */
}

/* ستايل عداد النقاط */
.team-score {
  font-family: var(--font-secondary);
  font-size: 20px; /* [تعديل] أصغر */
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-light);
}
.team-score span {
  color: var(--color-text-highlight);
  font-size: 22px; /* [تعديل] أصغر */
}


/* لوحة سجل الفريق (اللوج) */
.team-log-box {
  background: #ffffff30;
  flex-grow: 1; 
  overflow-y: auto; 
  font-size: 10px; /* [تعديل] أصغر */
  line-height: 1.7; /* [تعديل] أقرب */
  padding: 15px; /* [تعديل] أبسط */
  color: var(--color-text-secondary);
}
/* ... (ستايل اللوج والسكرول بار - لم يتغير) ... */
.team-log-box .log-entry {
  display: block;
  margin-bottom: 5px;
}
.team-log-box .chosen-word {
  color: var(--color-text-primary);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 7px;
  border-radius: 5px;
}
.team-log-box::-webkit-scrollbar { width: 8px; }
.team-log-box::-webkit-scrollbar-track { background: var(--color-secondary-bg); border-radius: 10px; }
.team-log-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-text-highlight), var(--color-text-accent));
  border-radius: 10px;
  border: 2px solid var(--color-secondary-bg);
}
.team-log-box::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--color-text-highlight), #a862f7); }


/* ========== لوحة البطاقات (Board) ========== */
.board {
  width: 100%; 
  flex-grow: 1; 
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  grid-template-rows: repeat(5, 1fr); /* [مهم] هذا هو ما يضبط الارتفاع */
  grid-gap: 12px; /* [تعديل] مسافة أقل */
  padding: 10px;
  box-sizing: border-box; 
  /*overflow: hidden; */
}

/* تصميم البطاقة */

/* ... (باقي ستايلات البطاقات - لم تتغير) ... */
/* ✅ تأثير hover على الكروت - لا يتطبق في وضع الخفة */
body.card:hover {
  background: rgba(255, 255, 255, 0.15);
 /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 0 20px rgba(0,0,0,0.1);*/
   box-shadow: none;

}
.word { z-index: 2; }
.hand-icon {
  position: absolute;
  top: 6px; /* [تعديل] أقرب */
  right: 6px; /* [تعديل] أقرب */
  width: 18px; /* [تعديل] أصغر */
  height: 18px; /* [تعديل] أصغر */
  color: var(--color-text-highlight);
  opacity: 0.7;
  transition: 0.2s;
  cursor: pointer;
  z-index: 3;
}
.hand-icon:hover {
  transform: scale(1.2);
  opacity: 1;
  filter: drop-shadow(0 0 5px var(--color-text-highlight));
}
.player-name {
  position: absolute;
  bottom: 5px; /* [تعديل] أقرب */
  left: 5px; /* [تعديل] أقرب */
  display: none;
  font-family: var(--font-primary);
  font-size: 0.7em;
  color: var(--color-text-highlight);
  font-weight: 600;
  text-shadow: 0 0 5px rgba(255,215,0,0.4);
  padding: 2px 6px; /* [تعديل] أصغر */
  border-radius: 5px;
  z-index: 3;
  max-width: calc(100% - 10px); /* [تعديل] */
  white-space: nowrap;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
}
.card.selected {
  background: linear-gradient(135deg, var(--color-text-highlight) 0%, #E6B800 100%);
  color: var(--color-primary-bg);
  border-color: var(--color-text-highlight);
  box-shadow: 0 0 25px rgba(255,215,0,0.5);
  animation: pulse 0.6s ease-in-out;
}
.card.highlighted {
  box-shadow: 0 0 15px var(--color-text-accent);
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.card[data-role="red"]:not(.revealed) { border-right: 4px solid rgba(var(--color-red-team-rgb), 0.5); }
.card[data-role="blue"]:not(.revealed) { border-left: 4px solid rgba(var(--color-blue-team-rgb), 0.5); }
.card[data-role="assassin"]:not(.revealed) { border: 4px solid rgba(var(--color-assassin-rgb), 0.6); }

/* ... (ألوان البطاقات المكشوفة - لم تتغير) ... */
.card.revealed[data-role="red"] {
  background: linear-gradient(145deg, #924747, #D32F2F);
  border-color: #A01C1C;
  color: #FFEBEE;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.card.revealed[data-role="blue"] {
  background: linear-gradient(145deg, #2e5694, #1976D2);
  border-color: #0B3A8B;
  color: #E3F2FD;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.card.revealed[data-role="neutral"] {
  background: linear-gradient(145deg, #ffffffaf, #ffffff);
  border-color: #6D7B7C;
  color: #ECF0F1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.card.revealed[data-role="assassin"] {
  background: linear-gradient(145deg, #000000, #000000);
  border-color: #1F2B39;
  color: #ECF0F1;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}


/* ========== الشريط السفلي (Footer) ========== */
footer {
  width: 100%; 
  flex-shrink: 0; 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* [تعديل] أقرب */
  padding: 12px; /* [تعديل] أقل */
  box-sizing: border-box;
}

.action-button {
  min-width: 140px; /* [تعديل] أصغر */
  padding: 10px 16px; /* [تعديل] أصغر */
  font-size: 14px; /* [تعديل] أصغر */
  font-family: var(--font-secondary);
}
.action-button svg {
  stroke: white;
  width: 18px; /* [تعديل] أصغر */
  height: 18px; /* [تعديل] أصغر */
}

/* ========== لوحة البطاقات (Board) ========== */
.board {
  /* ... (الخصائص الموجودة) ... */
  perspective: 1500px; /* [إضافة] لإعطاء عمق ثلاثي الأبعاد للقلب */
}

/* style.css */
:root {
  --color-primary-bg: #0f0b16;
  --color-secondary-bg: #1a1530;
  --color-panel-bg: rgba(255,255,255,0.03);
  --color-border-light: rgba(255,255,255,0.06);
  --color-text-primary: #EAE6F5;
  --color-text-secondary: #CFCBE2;
  --color-text-highlight: #FFD97D;
  --color-text-accent: #b88cff;
  --color-red-team: #E74C3C;
  --color-blue-team: #3498DB;
  --color-neutral: #ffffff;
  --color-assassin: #000000;
  --font-primary: 'Cairo', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  --border-radius-main: 14px;
  --border-radius-card: 12px;
  --card-flip-duration: 0.6s;
}

* { box-sizing: border-box; }
/*
body {
  margin: 0;
  font-family: var(--font-primary);
  background: radial-gradient(1200px 600px at 10% 10%, rgba(138,43,226,0.08), transparent 8%),
              radial-gradient(900px 400px at 90% 90%, rgba(255,215,0,0.04), transparent 8%),
              linear-gradient(135deg, var(--color-primary-bg) 0%, #07060a 100%);
  color: var(--color-text-primary);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  direction: rtl;
}*/

.glass-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(4px) saturate(120%);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-main);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

/* Top bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(190, 106, 255, 0), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--color-border-light);
  z-index: 10;
  flex-direction: row-reverse;
}
.icon-button { background: rgba(255,255,255,0.04); padding: 8px 12px; border-radius: 10px; color: var(--color-text-primary); border: 1px solid rgba(255,255,255,0.03); }
.icon-button:hover { transform: scale(1.02); box-shadow: 0 8px 20px rgba(88,24,163,0.15); }

/* Layout */
main { flex: 1; display: flex; gap: 14px; padding: 14px; }
.side-column { width: 22%; display:flex; flex-direction:column; gap:14px; height: calc(100vh - 120px); }

/* Team boxes */
.team-info-box { padding: 12px; display:flex; flex-direction:column; gap:8px; opacity:0.9; transition: all 0.5s ease; }
.team-info-box .team-logo { width:44px; height:44px; border-radius: 50%; background-size:cover; border:2px solid var(--color-text-highlight); box-shadow: 0 6px 18px rgba(168,98,247,0.08); }
.team-name { font-family: var(--font-secondary); font-size:18px; font-weight:700; }
.team-score { margin-top:8px; font-weight:700; color:var(--color-text-secondary); }
.team-score span { color:var(--color-text-highlight); font-size:18px; }

/* Active turn effect *//*
.team-info-box.active-turn { transform: translateY(-4px) scale(1.01); box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 30px rgba(168,98,247,0.06); animation: teamPulse 1s ease; }
@keyframes teamPulse { 0% { box-shadow: 0 8px 20px rgba(0,0,0,0.35); } 50% { box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 28px rgba(168,98,247,0.08);} 100% { box-shadow: 0 8px 20px rgba(0,0,0,0.35);} }
*/
/* Logs */
.team-log-box {  background: #ffffff30;
 padding:12px; overflow:auto; font-size:10px; color:var(--color-text-secondary); border-radius:12px; }
.team-log-box .log-entry { display:block; margin-bottom:6px; }
.chosen-word { background: rgba(255,255,255,0.03); padding:2px 6px; border-radius:6px; color:var(--color-text-primary); }

/* Board */
.board {
  width:100%;
  flex-grow:1;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap:12px;
  padding:12px;
  perspective: 1200px;
}

/* Card structure for flip animation */


/* inner faces */
.card-inner {


  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-card);
  transition: transform var(--card-flip-duration) cubic-bezier(.2,.8,.2,1);
}

/* front/back */
.card-front,
.card-back {
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--border-radius-card);
  padding:10px;
  text-align:center;
  font-weight:700;
  font-family: var(--font-secondary);
 /* font-size: clamp(12px, 2vh, 20px);*/
  color: var(--color-text-primary);
}

/* Front face (word) */
.card-front {
  z-index:2;
  transform: rotateY(0deg);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* Back face (revealed role) */


/* small UI elements on front */
.hand-icon {
  position:absolute;
  top:8px;
  left:8px;
  width:18px;
  height:18px;
  z-index:6;
  color: var(--color-text-highlight);
  opacity:0.85;
  cursor:pointer;
}
.player-name {
  position:absolute;
  bottom:6px;
  right:6px;
  color: var(--color-text-highlight);
  padding:4px 8px;
  border-radius:8px;
  font-size:12px;
  display:none;
}
/*
.card.flipped .card-inner {
  transform: rotateY(180deg);
}*/

/*
.card.flipped {
  transform: rotateY(180deg);
}*/


/* when flipped but not yet revealed (for animation clarity) */
/*
.card.flipped { box-shadow: 0 20px 50px rgba(9,6,20,0.6); transform: translateY(-6px); }
*/
/* footer */
footer { display:flex; gap:12px; padding:10px; justify-content:center; align-items:center; border-radius:10px; }
.action-button { min-width:140px; padding:10px 16px; font-family:var(--font-secondary); background: linear-gradient(90deg, rgba(138,43,226,0.12), rgba(168,98,247,0.08)); border:1px solid rgba(255,255,255,0.03); color:var(--color-text-primary); border-radius:10px; transition: transform 220ms ease, box-shadow 220ms ease; }
.action-button:hover { transform: scale(1.02); box-shadow: 0 10px 28px rgba(168,98,247,0.06); }

/* small responsive tweaks */
/*@media (max-width: 900px) {
  .side-column { display:none; }
  .center-column { width: 100%; }
  .board { grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(64px, 1fr); }
}
*/

/* ========== تعديل عرض الكلمة واسم اللاعب عند التحديد ========== */
.card .word.highlighted-word {
  background: rgba(0,0,0,0.45);
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--color-text-highlight);
  box-shadow: 0 0 8px rgba(255,215,0,0.25);
  transition: all 0.3s ease;
}

/* جعل اسم اللاعب أعلى يسار البطاقة */
.player-name {
  top: 6px;
  right: auto;
  left: 6px;
  bottom: auto;
  color: var(--color-text-highlight);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 600;
  text-shadow: 0 0 4px rgba(255,215,0,0.4);
  display: none;
  z-index: 5;
}

.word {
 
  border-radius: 8px;
  font-weight: 600;
  text-shadow: 0 0 1.5px rgba(0,0,0,0.6);
  transition: all 0.3s ease;
  z-index: 2;
}

/* 🌌 الخلفية الأساسية */
body {
  margin: 0;
  font-family: 'Cairo', sans-serif;
  background: url('img/bg.png') no-repeat center center fixed;
  background-size: cover;
  position: relative;
  /*overflow: hidden;*/
}

/* ✨ طبقة التدرج اللوني فوق الصورة (بنفس التدرج اللي عجبك) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /*background:
    radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--color-secondary-glow) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 70%, color-mix(in srgb, var(--color-primary-glow) 20%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-bg-deep) 70%, transparent) 0%, color-mix(in srgb, var(--color-bg-space) 25%, transparent) 100%);
  */z-index: 0;
  pointer-events: none;
}

/* 🌫️ البلور والسطوع */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(5px) brightness(0.9);
  z-index: 1;
  pointer-events: none;
}


.board {
  perspective: 1200px;
}


/* إعداد البطاقة */
.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
  border-radius: var(--border-radius-card);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.05);
 /* border: 1px solid rgba(255,255,255,0.1);*/
  
  /* ✅ تحسين الأداء: استخدام GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* وجه أمامي وخلفي */
.card-front,
.card-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-weight: 700;
 /* font-size: clamp(12px, 2vh, 20px);*/
  border-radius: var(--border-radius-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: all 0.3s ease;
}




/*
.card.flipped {
  transform: rotateY(180deg);
}/*
.card.revealed .card-back.role-red {
  background: linear-gradient(145deg, #B71C1C, #D32F2F);
}
.card.revealed .card-back.role-blue {
  background: linear-gradient(145deg, #0D47A1, #1976D2);
}
.card.revealed .card-back.role-neutral {
  background: linear-gradient(145deg, #ffffff, #ffffff);
  color: #0f0f12;
}
.card.revealed .card-back.role-assassin {
  background: linear-gradient(145deg, #2C3E50, #40556B);
}
*/
/* عمق للمشهد */
.board {
  perspective: 1200px;
}


.card-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}
/*
.card.flipped .card-inner {
  transform: rotateY(180deg);
}*/

/* الوجوه */
.card-front, .card-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  border-radius: var(--border-radius-card);
}

.card-front {
  background: rgba(255,255,255,0.05);
}



.card-back * {
  transform: rotateY(180deg);
}


.card-front,
.card-back {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;   /* توسيط أفقي */
  align-items: flex-end;     /* الكلمة أسفل البطاقة */
  padding-bottom: 12px;      /* مسافة بسيطة من الحافة */
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(12px, 2vh, 20px);
  border-radius: var(--border-radius-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: all 0.3s ease;
  text-align: center;
}


.card-front,
.card-back {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  backface-visibility: hidden;
  border-radius: var(--border-radius-card);
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(12px, 2vh, 20px);
  color: var(--color-text-primary);
}

.card-front .word,
.card-back .word {
      color: #322041;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  font-weight: 700;
  font-size: 12px;
}


.card-back .word {
  transform: rotateY(180deg) translateX(-50%);
}

.card-front {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card-front {
  filter: brightness(0.95); /* لمسة جمالية بسيطة */
}


.team-red {

  border-right: 4px solid var(--color-red-team);

}
.team-blue {

  border-left: 4px solid var(--color-blue-team);

}

.hint-area {
  
      height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#hint-word {
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  color: var(--color-text-primary);
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--font-primary);
  outline: none;
  transition: 0.3s;
  min-width: 200px;
  flex: 1;
  max-width: 300px;
}

#hint-word:focus {
  border-color: var(--color-text-highlight);
  box-shadow: 0 0 10px rgba(255,215,0,0.3);
}

/* Dropdown container */
.hint-count-dropdown-container {
  position: relative;
  flex-shrink: 0;
}

/* Dropdown button (circular) */
.hint-count-dropdown-btn {
  background: #1a1a1a;
  border: 1px solid var(--color-border-light);
  border-radius: 50%;
  color: var(--color-text-primary);
  padding: 0;
  font-size: 14px;
  font-family: var(--font-primary);
  outline: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.hint-count-dropdown-btn::before,
.hint-count-dropdown-btn::after {
  display: none !important;
  content: none !important;
}

.hint-count-dropdown-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text-primary) !important;
}

.hint-count-dropdown-btn:active {
  transform: none !important;
  box-shadow: none !important;
}






/* Dropdown menu */
.hint-count-dropdown-menu {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 11, 22, 0.95);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(10px);
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  width: auto;
  min-width: fit-content;
  max-width: none;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

.hint-count-dropdown-menu[style*="block"] {
  display: flex !important;
}

.hint-count-dropdown-menu > * {
  display: inline-block;
  flex-shrink: 0;
}

.hint-count-option {
  padding: 8px 12px;
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: var(--font-primary);
  cursor: pointer;
  border-radius: 8px;
  text-align: center;
  transition: 0.2s;
  min-width: 35px;
  flex-shrink: 0;
  display: inline-block !important;
  width: auto;
}

.hint-count-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-highlight);
}

.hint-count-option.hint-count-end {
  color: #4d8dff;
  font-weight: 600;
  background: rgba(77, 141, 255, 0.15);
}

.hint-count-option.hint-count-end:hover {
  background: rgba(77, 141, 255, 0.25);
}

.hint-count-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  display: inline-block !important;
}

#hint-count {
  display: none;
}

#endturn-btn {
  min-width: auto;
  width: auto;
  padding: 8px 16px;
  font-size: 14px;
  height: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 🎨 تصميم جديد للسجل */
.log-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  animation: fadeIn 0.4s ease;
}

.log-header {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.player-name {
  color: var(--color-text-highlight);
  font-weight: 700;
  font-size: 8px;
}

.hint-card {
  background: linear-gradient(90deg, rgba(255,215,0,0.15), rgba(255,165,0,0.1));
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #FFD700;
  font-weight: 600;
}

.hint-card .hint-word {
  font-size: 16px;
}

.choice-card {
  background: linear-gradient(90deg, rgba(138,43,226,0.15), rgba(75,0,130,0.1));
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 15px;
  color: #b18fff;
  font-weight: 600;
}

.choice-card .chosen-word {
  font-size: 16px;
  color: #cdb5ff;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 🎨 تصميم اللوج الجديد */
.log-card {
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 10px;
  animation: fadeIn 0.4s ease;
  font-family: var(--font-primary);
}

.log-header {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.log-body {
  font-size: 15px;
  font-weight: 500;
}

/* 💡 لوج التلميح */
.hint-log {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.1));
  border: 1px solid rgba(255,215,0,0.3);
  box-shadow: 0 0 12px rgba(255,215,0,0.3);
}
.hint-log .player-name {
  color: #FFD700;
}
.hint-text {
  display: flex;
  gap: 8px;
  justify-content: center;
  font-size: 17px;
  color: #FFE066;
  font-weight: 700;
}

/* 🎮 لوج الاختيار */
.choice-log {
  background: linear-gradient(135deg, rgba(147,112,219,0.2), rgba(138,43,226,0.1));
  border: 1px solid rgba(147,112,219,0.3);
  box-shadow: 0 0 12px rgba(147,112,219,0.3);
}
.choice-log .player-name {
  color: #b08cff;
}
.choice-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  color: #d5caff;
}
.choice-text .chosen-word {
  color: #fff;
  background: rgba(147,112,219,0.25);
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 700;
}

/* ✨ حركة بسيطة */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}



.log-player {
  color: #FFD97D;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
  text-shadow: 0 0 6px rgba(255,215,0,0.25);
}

.log-hint,
.log-word {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.5px;
  text-shadow: 0 0 5px rgba(255,255,255,0.1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* 🌟 تصميم لوج التلميح داخل اللوج */




@keyframes fadeInHint {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* 🌟 نافذة التلميح في منتصف الشاشة */


/* 🎯 تصغير خطوط لوج التلميحات والاختيارات */
.hint-log,
.choice-log,
.log-hint-box {
  font-size: 13px !important;
  padding: 6px 10px !important;
}

.hint-log .hint-text,
.choice-log .choice-text,
.log-hint-box .hint-word {
  font-size: 12px !important;
}

.log-hint-box .hint-player {
  font-size: 12px !important;
}

.choice-log .chosen-word {
  font-size: 12px !important;
}
.log-player {
  font-size: 10px;
}

.log-word{
    font-size: 10px;

}


/* 🎨 خلفيات مميزة للفريقين */
.team-info-box.team-red {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.25), rgba(192, 57, 43, 0.15));
  border: 1px solid rgba(231, 76, 60, 0.25);
  box-shadow: 0 0 20px rgba(231, 76, 60, 0.15);
  backdrop-filter: blur(10px);
}

.team-info-box.team-blue {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.25), rgba(41, 128, 185, 0.15));
  border: 1px solid rgba(52, 152, 219, 0.25);
  box-shadow: 0 0 20px rgba(52, 152, 219, 0.15);
  backdrop-filter: blur(10px);
}

/* ✨ تحسين النصوص داخل الصندوق */
.team-info-box .team-name {
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.team-info-box .spy-master strong {
  color: #FFD700;
  text-shadow: 0 0 6px rgba(255,215,0,0.3);
}

/*
.team-info-box.active-turn {
  position: relative;
  transform: scale(1.03);
  animation: turnPulse 1.5s infinite ease-in-out;
  z-index: 2;
}*/

/* 💫 حركة النبض المستمرة */
@keyframes turnPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.25);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* 🔵 الفريق الأزرق أثناء الدور */
.team-info-box.team-blue.active-turn {
  box-shadow: 0 0 25px rgba(52, 152, 219, 0.7);
  border: 1px solid rgba(52, 152, 219, 0.8);
}

/* 🔴 الفريق الأحمر أثناء الدور */
.team-info-box.team-red.active-turn {
  box-shadow: 0 0 25px rgba(231, 76, 60, 0.7);
  border: 1px solid rgba(231, 76, 60, 0.8);
}

/* 🟣 طبقة اللون فوق الخلفية */
/* 🟣 طبقة اللون فوق الخلفية */
.team-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent; /* سيبدأ شفافاً */
  transition: background-color 0.6s ease; /* حركة ناعمة لتغير اللون */
  
  /* هذا هو التعديل الأهم:
    z-index: 1 سيجعله خلف اللعبة (z-index: 2) 
    وفوق الخلفية (z-index: 0)
  */
  z-index: -1; 
  
  pointer-events: none; /* لمنع الطبقة من اعتراض ضغطات الماوس */
}

/* ألوان الفرق (الكود الخاص بك وهو سليم) */
.team-overlay.blue-active {
  background-color: rgba(0, 42, 255, 0.09);
}

.team-overlay.red-active {
  background-color: rgba(119, 0, 0, 0.09);
}

.floating-player-menu {
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid #666;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeIn 0.15s ease;
}




.floating-player-menu .menu-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  text-align: left;
  transition: 0.2s;
}

.floating-player-menu .menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.floating-player-menu .kick-btn:hover {
  background: rgba(255, 0, 0, 0.2);
  color: #ff6b6b;
}

.floating-player-menu .admin-btn:hover {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ✅ عرض اللاعبين جنب بعض بمرونة */
.players-section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 10px;
}

/* شكل اللاعب */
.player-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.player-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.03);
}

/* النقطة الخضراء / الحمراء للحالة */
.player-item .status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.player-item .status.online {
  background: #3cff84;
}

.player-item .status.offline {
  background: #ff4d4d;
}

/* 🔧 قسم الإعدادات */
.settings-section {
  width: -webkit-fill-available;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #eee;
}

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #666;
  transition: 0.3s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

input:checked + .slider {
  background-color: #944bbb;
}

input:checked + .slider:before {
  transform: translateX(22px);
}

.join-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.5;
}


/* 🎨 تنسيق سجل الفريق بشكل محادثة */
.team-log-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  /*max-height: 300px;*/
  overflow-y: auto;
  font-family: 'Cairo', sans-serif;
}

.log-hint-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px;
  position: relative;
 /* flex-direction: row-reverse;*/
}

.log-hint-box .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.log-hint-box .hint-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.log-hint-box .hint-player {
  font-weight: 600;
  font-size: 14px;
  color: #FFD700;
}

.log-hint-box .hint-word {
  background: rgba(255,255,255,0.1);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  max-width: 240px;
}

/* الردود (اختيارات اللاعبين) */
.reply-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-left: 40px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  font-size: 13px;
  position: relative;
}

.reply-box .reply-name {
  font-weight: 600;
  margin-left: 5px;
}

.reply-box .reply-word {
  font-weight: 500;
}

.reply-box.red { border-right: 3px solid #FF4444; }
.reply-box.blue { border-right: 3px solid #448AFF; }
.reply-box.neutral { border-right: 3px solid #CCCCCC; }
.reply-box.assassin { border-right: 3px solid #000; }

.reply-box .reply-text {
  color: #E0E0E0;
}

.log-hint-box.blue .avatar {
  background-image: url('img/bluebg2.png');
}

.log-hint-box.red .avatar {
  background-image: url('img/redbg.png');
}


/* ====== تصميم فقاعات الهينت والرقم ====== */
.hint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.hint-bubble {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 8px;
  border-radius: 12px;
/*  font-size: 14px;*/
  color: #fff;
  max-width: 180px;
  word-break: break-word;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
}

.count-bubble {
  /*background: #FFD700;*/
  color: #000;
  font-weight: 700;
  /*font-size: 14px;*/
  border-radius: 10px;
  padding: 6px 10px;
  /*box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);*/
  min-width: 28px;
  text-align: center;
}

/* يمكن لاحقاً تلوينها حسب الفريق */
.log-hint-box.red .count-bubble {
  background: #ff5555;
  color: #fff;
}

.log-hint-box.blue .count-bubble {
  background: #448aff;
  color: #fff;
}


#player-name-display {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #FFD700;
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  text-align: center;
  padding: 10px;
  outline: none;
  transition: all 0.25s ease;
  box-shadow: 0 0 8px rgba(106, 0, 255, 0.15);
}

#player-name-display::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

#player-name-display:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 12px rgba(142, 45, 226, 0.4);
}

#player-name-display:focus {
  border-color: rgba(142, 45, 226, 0.6);
  box-shadow: 0 0 14px rgba(142, 45, 226, 0.6);
}

#player-name-display:focus {
  background: rgba(142, 45, 226, 0.15);
  border-color: rgba(142, 45, 226, 0.6);
  box-shadow: 0 0 10px rgba(142, 45, 226, 0.6);
}


.player-name {
  display: block;
  color: #fff;
  font-size: 8px;
  text-align: center;
  margin-top: 4px;
  line-height: 1.2;
  max-height: 2.5em;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}


.card .player-name {
  position: absolute;
  top: 4px;
  left: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 3px;
  max-height: 5em; /* سطرين فقط */
 /* overflow: hidden;*/
  width: 80%;
  z-index: 3;
  direction: ltr; /* ✅ يخلي الترتيب من الشمال لليمين */
  text-align: left; /* ✅ يتأكد إنهم يبدأوا من الشمال */
}

/*
.card .player-name.overflow::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 2px;        
  left: auto;       
  background: rgba(0,0,0,0.6);
  font-weight: bold;
  padding: 0 2px;
  border-radius: 3px;
  color: #ccc;
  z-index: 6;
}
*/

.overflow-indicator {
  position: absolute;
  bottom: 4px;
  right: -6px;
  /*font-size: 10px;*/
  font-weight: bold;
  color: #ddd;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  padding: 0 3px;
  pointer-events: none;
}



/* 💬 شكل كل فقاعة */
.voter-bubble {
  font-size: 9.5px;
  line-height: 1.1;
  border-radius: 5px;
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,0.3);
  user-select: none;
  white-space: nowrap;
  font-weight: 600;
  backdrop-filter: blur(2px);
}

#board {
  display: none;
}
/* تصميم عرض التلميح الجديد */
.clue-display-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* المستطيل العريض للتلميح */
.clue-hint-box {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.clue-word {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  font-family: var(--font-primary);
}

/* الدائرة للرقم */
.clue-number-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(106, 0, 255, 0.3);
  border: 2px solid rgba(106, 0, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(106, 0, 255, 0.3);
}

.clue-number {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-primary);
}

/* المستطيل الصغير لزر إنهاء */
.clue-end-btn {
  min-width: 80px;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 10px;
  flex-shrink: 0;
}

#current-clue-text {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

#board-placeholder {
      height: -webkit-fill-available;
  width: 100%;
  max-width: 800px;       /* نفس عرض البورد تقريبًا */
  aspect-ratio: 5 / 3;    /* أو أي نسبة تناسب شكل البورد */
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
  display: block;
  margin: 0 auto;
}

#hint-count::-webkit-inner-spin-button,
#hint-count::-webkit-outer-spin-button {
  filter: invert(1) sepia(1) hue-rotate(200deg) saturate(3); /* يغير لون الأسهم */
  transform: scale(1.2); /* يكبّر الأسهم */
}

#name-entry-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.4);
}

/* صندوق المودال نفسه */
#name-entry-modal .modal-box {
  background: rgba(25, 25, 50, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 25px 40px;
  text-align: center;
  color: #fff;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

#name-entry-modal h2 {
  margin: 0 0 10px;
  color: #FFD700;
  font-family: 'Cairo', sans-serif;
}

#name-entry-modal input {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  border: none;
  outline: none;
  width: 100%;
  font-size: 16px;
  background: rgba(255,255,255,0.1);
  color: #fff;
}

#name-entry-modal .modal-buttons {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
  margin-top: 10px;
}

#name-entry-modal .modal-buttons .action-button {
  background: linear-gradient(90deg, #6A00FF, #8E2DE2);
  border: none;
  border-radius: 8px;
  padding: 10px;
  color: white;
  font-weight: 600;
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

#name-entry-modal .modal-buttons .action-button:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 15px rgba(106, 0, 255, 0.4);
}

#name-entry-modal .modal-buttons .cancel {
  background: rgba(255, 0, 0, 0.3);
  color: #ffaaaa;
}


/* =========================== */
/* == شاشة التحميل (Loading) == */
/* =========================== */
/*
#loading-overlay {
  position: fixed;
  inset: 0; 
  background-image: url(img/bg.png);
    background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  color: #FFD700;
  font-size: 20px;
  font-family: 'Cairo', sans-serif;
  transition: opacity 0.4s ease;
}
*/
/*
#loading-overlay::before{

  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(20px) brightness(0.8);
  z-index: -1;
}

*/
/* حركة الدوران 
.loader-spinner {
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

*/




/* 🎨 تصميم أساسي مع تأثير حركة الماوس */
#board-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #ccc;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* ✨ طبقة إضاءة متحركة حسب الماوس */
#board-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255,255,255,0.15),
    rgba(255,255,255,0) 60%
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

#board-placeholder:hover::before {
  opacity: 1;
}

#board-placeholder img {
      margin-bottom: 14px;
    place-self: anchor-center;
  max-height: 90%;
  opacity: 0.6;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#board-placeholder:hover img {
  transform: scale(1.02);
}

.waiting-text {
  font-size: 18px;
  color: #e0e0e0;
  letter-spacing: 0.5px;
}



/*
 * ========================================
 * STYLE.CSS - 3D VISION REWORK
 * (تم إعادة كتابته بواسطة Gemini)
 * ========================================
 */

/* ========== 1. إعداد عام ومتغيرات (تصميم 3D) ========== */
:root {
  /* لوحة ألوان جديدة أكثر عمقاً وإشراقاً */
  --color-bg-deep: #05040a; /* خلفية شبه سوداء */
  --color-bg-space: #100d1c; /* لون فضاء عميق */
  --color-primary-glow: #6A00FF; /* بنفسجي ساطع */
  --color-secondary-glow: #8E2DE2;
  
  --color-panel-bg: rgba(26, 20, 40, 0.75); /* زجاج أغمق مع شفافية */
  --color-border-light: rgba(142, 45, 226, 0.3); /* حدود مضيئة */
  --color-border-highlight: rgba(177, 140, 255, 0.6);

  --color-text-primary: #E0E0E0;
  --color-text-secondary: #B0B0B0;
  --color-text-highlight: #FFD97D; /* الذهبي كما هو */

  --color-red-team: #E74C3C;
  --color-red-glow: rgba(231, 76, 60, 0.5);
  --color-blue-team: #3498DB;
  --color-blue-glow: rgba(52, 152, 219, 0.5);
  
  /* ألوان البطاقات الخلفية (أكثر إشراقاً) */
  --color-neutral-card: #bdc3c7;
  --color-assassin-card: #2c3e50;
  
  --font-primary: 'Cairo', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  
  --border-radius-main: 16px;
  --border-radius-card: 12px;
  --card-flip-duration: 0.7s; /* مدة أطول قليلاً لتناسب الـ 3D */
}

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



/* ========== 2. الألواح الزجاجية العائمة (Floating Glass) ========== */
/* ستايل مشترك لكل الألواح العائمة (اللوبي، القوائم، صناديق الفرق) */
/*#lobby-container, */
.glass-panel,
.floating-player-menu,
.players-list {
  background: var(--color-panel-bg);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-main);
  /* ظل عميق لإعطاء إحساس بالطفو */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--color-border-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* شريط علوي عائم */
/* ======= TOP BAR FIXED BLUR (SAFE) ======= */
.top-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  flex-direction: row-reverse;
  border-radius: 0;
  overflow: visible;             /* 🔹 لا نقطع القوائم المنبثقة */
  background: transparent;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
  isolation: isolate;            /* 🔹 عزل التأثير البصري */
  z-index: 10;                   /* تحت القوائم */
}

/* ✨ البلور في طبقة خلفية منفصلة كلياً */
.top-bar::before {
  content: "";
  position: fixed;               /* 🔹 بدلاً من absolute */
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;                  /* نفس ارتفاع التوب بار */
  background: var(--color-panel-bg);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--color-border-light);
  pointer-events: none;          /* 🔹 يسمح بالكليك */
  z-index: -1;                   /* خلف كل عناصر الصفحة */
}

.left-section, .right-section { display: flex; align-items: center; gap: 15px; }


/* ========== 3. تصميم الأزرار 3D (الطلب الأساسي) ========== */
/* ستايل مشترك لكل الأزرار (action-button, icon-button, lobby-button) */
button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary);
  
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  
  cursor: pointer;
  outline: none;
  overflow: hidden; /* لإخفاء اللمعان الزائد */
  
  /* إعداد للمساحة ثلاثية الأبعاد */
  transform-style: preserve-3d;
  transform: translateZ(0); /* تفعيل تسريع الـ GPU */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0,0,0,0.2);
}

.btn-content {
  z-index: 2; /* المحتوى فوق اللمعان */
  display: contents; /* لجعل الأيقونة والنص داخل الـ wrapper */
}

/* 🌟 الأنيميشن الداخلي: طبقة اللمعان عند الـ Hover */
button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* يبدأ من خارج الزر تماماً */
  width: 70%;
  height: 100%;
  z-index: 1;
  
  /* شكل اللمعان (خط مائل) */
  background: linear-gradient(
    45deg,
    transparent,
    rgba(177, 140, 255, 0.5), /* لون اللمعان */
    transparent
  );
  
  transform: skewX(-25deg); /* إمالة اللمعان */
  transition: left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

button:hover::before {
  left: 150%; /* يمر عبر الزر ويخرج من الناحية الأخرى */
}

/* 🌟 تأثير الـ Hover الخارجي: بروز 3D */
button:hover {
  transform: translateZ(10px) scale(1.02); /* بروز للأمام */
  border-color: var(--color-border-highlight);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 10px var(--color-primary-glow), 0 0 0 1px var(--color-border-highlight);
}

/* 🌟 تأثير الضغط 3D */
button:active {
  transform: translateZ(2px) scale(0.95); /* ضغط للداخل */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--color-border-highlight);
}

/* تخصيص الأزرار المختلفة (لأنها كانت بكلاسات مختلفة) */
.action-button { min-width: 140px; }
.lobby-button { width: 100%; font-size: 16px; padding: 12px 20px; }
.icon-button { padding: 8px 12px; }

/* زر الإلغاء */
.action-button.cancel {
  background: linear-gradient(145deg, rgba(231, 76, 60, 0.2), rgba(231, 76, 60, 0.1));
  border-color: rgba(231, 76, 60, 0.4);
}
.action-button.cancel:hover {
  border-color: var(--color-red-team);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 10px var(--color-red-glow), 0 0 0 1px var(--color-red-team);
}
.action-button.cancel::before {
  /* لمعان أحمر لزر الإلغاء */
  background: linear-gradient(45deg, transparent, var(--color-red-glow), transparent);
}


/* ========== 4. لوحة اللعبة (Board) - تصميم 3D ========== */
main {
  flex: 1; 
  display: flex;
  gap: 15px;
  padding: 20px;
  overflow: hidden; 
  /* تفعيل المنظور للوحة الوسطى */
  perspective: 2000px;
}

.center-column {
  width: 56%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  /* الحفاظ على المنظور للأبناء */
  transform-style: preserve-3d;
}

.board {
  width: 100%; 
  flex-grow: 1; 
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  grid-template-rows: repeat(5, 1fr);
  /*grid-gap: 15px;*/
  padding: 10px;
  box-sizing: border-box; 
  
  /* أهم جزء: تطبيق المنظور ثلاثي الأبعاد */
  transform-style: preserve-3d;
  /* ميلان خفيف للوحة لزيادة العمق */
  /*transform: rotateX(8deg) translateZ(-20px);*/
  /* خلفية اللوحة (شفافة) */
  /*background: rgba(0,0,0,0.1);*/
 /* border-radius: var(--border-radius-main);*/
 /* border: 1px solid rgba(255,255,255,0.05);*/
}

/* شاشة الانتظار (تأخذ نفس العمق) */
#board-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  overflow: hidden;
  /* تطبيق نفس الميلان والعمق */
 /* transform: rotateX(8deg) translateZ(-20px);*/
  /* (باقي الستايل الخاص بالـ hover من ملفك الأصلي ويعمل جيداً) */
}


/* ========== 5. البطاقات (Cards) - تصميم 3D ========== */

/* الـ container الخاص بالبطاقة داخل الشبكة */
/*
.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;

  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}*/

/* 🌟 تأثير الـ Hover على البطاقة (ميلان 3D) - لا يتطبق في وضع الخفة */
body:not(.low-gfx) .card:not(.flipped):hover {
  z-index: 10;
}

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--card-flip-duration) cubic-bezier(.2,.8,.2,1);
  border-radius: var(--border-radius-card);
  
  /* ظل خفيف لإضافة عمق */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  
  /* ✅ تحسين الأداء: استخدام GPU acceleration */
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */
}

/* حالة الكشف (القلب) */
.card.flipped .card-inner {
  transform: rotateY(180deg);
  /* ظل لإعطاء إحساس بالسُمك */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}



/* الوجوه (الأمامي والخلفي) */
.card-front,
.card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  border-radius: var(--border-radius-card);
  font-family: var(--font-secondary);
  font-weight: 700;
  /*font-size: clamp(14px, 2vh, 20px);*/
  color: var(--color-text-primary);
  text-align: center;
  padding: 10px;
  word-break: break-word;
  border: 1px solid rgba(255, 255, 255, 0.08);
/*
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  */
  background-color: rgba(255, 255, 255, 0.05);  

  /* تأثير الزجاج */
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
}



/*
.card-front .hand-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  color: var(--color-text-highlight);
  opacity: 0.7;
  transition: 0.3s;
}
.card-front:hover .hand-icon { opacity: 1; transform: scale(1.1); }*/


/* الأيقونات والفقاعات على الوجه الأمامي */
.card-front .hand-icon {
  position: absolute;
  top: 5px;   /* 👈 اتعدلت من 10px عشان نظبط المكان */
  left: 5px;  /* 👈 اتعدلت من 10px */
  color: var(--color-text-highlight);
  opacity: 0.7;
  transition: 0.3s;

  /* === 🚀 الإضافات الجديدة لحل مشكلة الضغط === */
  width: 28px;  /* (مساحة أكبر لصد الضغطة) */
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; /* (ده الحل السحري لصد الضغطة) */
  border-radius: 50%;
  z-index: 5; 
}

/* تأثير الـ Hover (اتعدل عشان يضيف خلفية) */
.card-front .hand-icon:hover { 
  background-color: rgba(255, 255, 255, 0.15); /* خلفية خفيفة */
  opacity: 1; 
  transform: scale(1.1); 
}

.card-front .player-name {
  position: absolute;
  top: 4px;
  left: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 3px;
  max-height: 5em;
  width: 80%;
  z-index: 3;
  direction: ltr;
}
.voter-bubble { 
  font-size: 9.5px;
  line-height: 1.1;
  border-radius: 5px;
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,0.3);
  user-select: none;
  white-space: nowrap;
  font-weight: 600;
  backdrop-filter: blur(2px);
}
.overflow-indicator {
    position: absolute;
    bottom: 4px;
    right: -6px;
    font-weight: bold;
    color: #ddd;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 0 3px;
    pointer-events: none;
}


/* الوجه الخلفي (اللون) */
.card-back {
transform: rotateY(180deg) translateZ(1px);  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
  /*background-image: url('img/d.png');*/
  background-size: cover;
  background-position: center;
  /*background-blend-mode: overlay;*/
  /* إعطاء سُمك 3D وهمي */
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
  z-index: 5;
}

.card-back .role-word {
  font-weight: 600;
  font-size: 0.9em;
  opacity: 0.9;
}


/*
.card-back.role-red {
  background-image: linear-gradient(145deg, rgba(183, 28, 28, 0.8), rgba(211, 47, 47, 0.8)), url('img/d.png');
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 25px var(--color-red-glow);
}

.card-back.role-blue {
  background-image: linear-gradient(145deg, rgba(13, 71, 161, 0.8), rgba(25, 118, 210, 0.8)), url('img/d.png');
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 25px var(--color-blue-glow);
}

.card-back.role-neutral {
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('img/d.png');
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
  color: #333;
}

.card-back.role-assassin {
  background-image: linear-gradient(145deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('img/d.png');
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 15px rgba(255,255,255,0.2);
  border-color: #fff;
}*/



/* تطبيق الألوان على الوجه الخلفي (الترتيب الصحيح) */
.card-back.role-red {
  /* 3 طبقات: لون شفاف، ثم d.png، ثم 1.png في الخلفية */
  background-image: 
    linear-gradient(145deg, rgba(183, 28, 28, 0.8), rgba(211, 47, 47, 0.4)),
    url('img/d.png'),
    url('img/1.png');
  
  /* الدمج: اللون عادي، والنقشة عادية، والصورة الخلفية عادية */
  background-blend-mode: normal, normal, normal;
  
  /* تطبيق الحجم والتوسيط على كل الطبقات */
  background-size: cover, cover, cover;
  background-position: center, center, center;
  
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 25px var(--color-red-glow);
}

.card-back.role-blue {
  background-image: 
    linear-gradient(145deg, rgba(13, 71, 161, 0.8), rgba(25, 118, 210, 0.4)),
    url('img/d.png'),
    url('img/1.png');
  
  background-blend-mode: normal, normal, normal;
  background-size: cover, cover, cover;
  background-position: center, center, center;
  
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 25px var(--color-blue-glow);
}

.card-back.role-neutral {
  background-image: 
    linear-gradient(145deg, rgba(151, 151, 151, 0.65), rgba(191, 191, 191, 0.85)),
    url('img/d.png'),
    url('img/3.png');
  
  background-blend-mode: normal, normal, normal;
  background-size: cover, cover, cover;
  background-position: center, center, center;
  
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
  color: #333;
}

.card-back.role-assassin {
  background-image: 
    linear-gradient(145deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.85)),
    url('img/2.jpg'),
    url('img/1.png');
  
  background-blend-mode: normal, normal, normal;
  background-size: cover, cover, cover;
  background-position: center, center, center;
  
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 15px rgba(255,255,255,0.2);
  border-color: #fff;
}

/*
.card.revealed .card-back.role-red { background: linear-gradient(145deg, #B71C1C, #D32F2F); box-shadow: 0 8px 24px rgba(183,28,28,0.18); }
.card.revealed .card-back.role-blue { background: linear-gradient(145deg, #0D47A1, #1976D2); box-shadow: 0 8px 24px rgba(13,71,161,0.18); }
.card.revealed .card-back.role-neutral { background: linear-gradient(145deg, #ffffff, #ffffff); box-shadow: 0 8px 24px rgba(127,140,141,0.12); color:#0f0f12; }
.card.revealed .card-back.role-assassin { background: linear-gradient(145deg, #000000, #000000); box-shadow: 0 8px 24px rgba(44,62,80,0.2); }
*/


/* ========== 6. بقية الواجهة (تعديلات العمق) ========== */

/* الأعمدة الجانبية */
.side-column {
  width: 22%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.team-info-box {
  /* (الستايل القديم كان ممتاز، فقط نزيد العمق) */
  flex-shrink: 0;
  transition: all 0.4s ease;
  /* (يرث ستايل .glass-panel) */
  
  /* (باقي الستايل البصري من ملفك الأصلي) */
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-info-box.team-red {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.3), rgba(192, 57, 43, 0.2));
  border-color: rgba(231, 76, 60, 0.4);
}
.team-info-box.team-blue {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.3), rgba(41, 128, 185, 0.2));
  border-color: rgba(52, 152, 219, 0.4);
}
.team-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 5px; }
.team-logo { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--color-text-highlight); background-size: cover; background-position: center; box-shadow: 0 0 15px rgba(255,215,0,0.2); }
.team-name { font-family: var(--font-secondary); font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 0 8px rgba(0,0,0,0.3); }
.team-details { font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.players { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; color: var(--color-text-primary); }
.players span { background: rgba(255, 255, 255, 0.1); padding: 4px 10px; border-radius: 20px; font-weight: 600; color: var(--color-text-primary); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.spy-master { text-align: center; font-size: 14px; color: var(--color-text-secondary); margin-top: 5px; }
.spy-master strong { color: var(--color-text-highlight); font-size: 15px; text-shadow: 0 0 6px rgba(255,215,0,0.3); }
.team-score { font-family: var(--font-secondary); font-size: 20px; font-weight: 700; color: var(--color-text-primary); text-align: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-light); }
.team-score span { color: var(--color-text-highlight); font-size: 22px; }


.team-log-box {
  flex-grow: 1; 
  overflow-y: auto; 
 /* font-size: 13px;*/
  padding: 15px;
  /* (ستايل السجل الجديد "المحادثة" من ملفك الأصلي ممتاز جداً) */
}

/* تأثير الدور النشط (نبض مضيء) */
@keyframes turnPulse3D {
  0% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25), 0 0 10px var(--color-border-light);
  }
  50% {
    transform: scale(1.03); /* بروز خفيف */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 25px var(--glow-color), 0 0 0 1px var(--glow-color);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25), 0 0 10px var(--color-border-light);
  }
}
.team-info-box.active-turn {
  /* ... نفس خصائص الزجاج والأنيميشن من الحل الأول ... */

  /* ضروري جداً عشان نقدر نحط اللمعة جواه */
  position: relative; 
  /* عشان اللمعة متطلعش بره حدود الكارت */
  overflow: hidden;   
}

/* إضافة عنصر اللمعة */
.team-info-box.active-turn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  
  /* ⏱️ نفس سرعة الحركة لكن فيها وقت راحة */
  animation: glassShimmer 5s linear infinite; 
}

/* ⚙️ اللمعة تعدي بسرعة ثم تنتظر */
@keyframes glassShimmer {
  0% {
    left: -75%;
  }
  60% {
    left: 125%;  /* الحركة الفعلية للّمعان */
  }
  100% {
    left: 125%;  /* توقف لمدة 40٪ من الزمن */
  }
}




/* منطقة التلميح */
.hint-area {
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#hint-word {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  color: var(--color-text-primary);
  padding: 10px 14px;
  font-size: 15px;
  font-family: var(--font-primary);
  outline: none;
  transition: 0.3s;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
  min-width: 200px;
  flex: 1;
  max-width: 300px;
}
#hint-word:focus {
  border-color: var(--color-text-highlight);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.2), 0 0 10px var(--color-text-highlight);
}
/* Dropdown styles for hint count */
.hint-count-dropdown-container {
  position: relative;
  flex-shrink: 0;
}

.hint-count-dropdown-btn {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border-light);
  border-radius: 50%;
  color: var(--color-text-primary);
  padding: 0;
  font-size: 15px;
  font-family: var(--font-primary);
  outline: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.hint-count-dropdown-btn::before,
.hint-count-dropdown-btn::after {
  display: none !important;
  content: none !important;
}

.hint-count-dropdown-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--color-border-light) !important;
  color: var(--color-text-primary) !important;
}

.hint-count-dropdown-btn:active {
  transform: none !important;
  box-shadow: none !important;
}





.hint-count-dropdown-menu {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 11, 22, 0.95);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(10px);
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  width: auto;
  min-width: fit-content;
  max-width: none;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

.hint-count-dropdown-menu[style*="block"] {
  display: flex !important;
}

.hint-count-dropdown-menu > * {
  display: inline-block;
  flex-shrink: 0;
}

.hint-count-option {
  padding: 8px 12px;
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: var(--font-primary);
  cursor: pointer;
  border-radius: 8px;
  text-align: center;
  transition: 0.2s;
  min-width: 35px;
  flex-shrink: 0;
  display: inline-block !important;
  width: auto;
}

.hint-count-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-highlight);
}

.hint-count-option.hint-count-end {
  color: #4d8dff;
  font-weight: 600;
  background: rgba(77, 141, 255, 0.15);
}

.hint-count-option.hint-count-end:hover {
  background: rgba(77, 141, 255, 0.25);
}

.hint-count-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  display: inline-block !important;
}

#hint-count {
  display: none;
}

#current-clue-text {
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 0 10px var(--color-text-highlight);
}

/* شاشة التحميل الحديثة */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 20, 0.4); /* 🔹 شفافية 40% */
  backdrop-filter: blur(8px);       /* 🔹 يعطي لمسة زجاجية ناعمة */
  -webkit-backdrop-filter: blur(8px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  color: #FFD700;
  font-size: 20px;
  font-family: 'Cairo', sans-serif;
  transition: opacity 0.4s ease;
  overflow: hidden;
}

/* ✨ تأثير إضاءة ناعمة خلفية */
#loading-overlay::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(138,43,226,0.25) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse-glow 3s infinite ease-in-out;
  z-index: 0;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* 🎵 اللودر العصري */
.loader-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: 60px;
  z-index: 2;
}

.loader-bars span {
  width: 8px;
  height: 20px;
  background: linear-gradient(180deg, #FFD700, #B8860B);
  border-radius: 4px;
  animation: bars-wave 1s ease-in-out infinite;
}

.loader-bars span:nth-child(1) { animation-delay: 0s; }
.loader-bars span:nth-child(2) { animation-delay: 0.2s; }
.loader-bars span:nth-child(3) { animation-delay: 0.4s; }
.loader-bars span:nth-child(4) { animation-delay: 0.6s; }

@keyframes bars-wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50% { transform: scaleY(1.4); opacity: 1; }
}

/* 💫 النص */
#loading-overlay p {
  z-index: 2;
  margin-top: 25px;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255,215,0,0.4);
  font-weight: 600;
}

/* (جميع الستايلات الأخرى مثل اللوبي، المودال، قوائم اللاعبين، إلخ، ستستفيد من .glass-panel و <button> تلقائياً) */
/* (يتم نسخ بقية الستايلات المتبقية من ملفك الأصلي التي لم يتم المساس بها) */

/* ستايلات اللوبي */
/*
#lobby-container {
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  padding: 30px 40px;
  gap: 15px;
}
#lobby-container h2 {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  color: #FFD700;
}
  */
.lobby-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border-light);
  color: #fff;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  font-family: 'Cairo', sans-serif;
  text-align: center;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}
.lobby-input::placeholder { color: #aaa; }
.lobby-divider {
  margin: 10px 0;
  width: 100%;
  height: 1px;
  background: var(--color-border-light);
}

/* (باقي الستايلات من ملفك الأصلي مثل .players-list, .player-menu, .team-log-box, .floating-player-menu, #name-entry-modal ... إلخ) */
/* يتم الاحتفاظ بها كما هي لأنها تعتمد على كلاسات لم نغيرها وهي تعمل بشكل جيد مع التصميم الزجاجي الجديد */
.players-list {
  
  display: none;
  position: absolute;
  top: 70px; /* (تعديل طفيف للمسافة) */
  left: 20px;
  width: 360px;
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  gap: 8px;
  z-index: 50;
  /* (يرث .glass-panel) */
}
.players-list.active { display: flex; flex-direction: column; }
.players-section { 
  display: none; 
  flex-wrap: wrap; 
  gap: 8px 12px; 
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.players-list.show-players .players-section { 
  display: flex; 
  animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
}
.player-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 6px 12px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #fff; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.player-item:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.03); }
.player-item .status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.player-item .status.online { background: #3cff84; }
.settings-section { width: -webkit-fill-available; padding: 8px 10px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
.setting-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #eee; }
.toggle-players-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.3s ease;
}
.toggle-players-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.02);
}
.toggle-arrow {
  transition: transform 0.3s ease;
}
.players-list.show-players .toggle-arrow {
  transform: rotate(180deg);
}
.toggle-text {
  font-weight: 500;
}
.switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #666; transition: 0.3s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; }
input:checked + .slider { background-color: #944bbb; }
input:checked + .slider:before { transform: translateX(22px); }

.player-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--color-text-highlight); cursor: pointer; box-shadow: 0 0 12px rgba(255,215,0,0.3); transition: 0.3s transform; }
.player-avatar:hover { transform: scale(1.1); }
.player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-menu { position: absolute; top: 70px; right: 20px; width: 280px; padding: 15px; display: none; flex-direction: column; align-items: center; gap: 15px; z-index: 50; /* (يرث .glass-panel) */ }
.player-menu.active { display: flex; }
.avatar-section { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.avatar-section img { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--color-text-highlight); }
#player-name-display { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--color-border-light); border-radius: 10px; color: #FFD700; font-family: 'Cairo', sans-serif; font-size: 15px; text-align: center; padding: 10px; outline: none; transition: all 0.25s ease; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); }
#player-name-display:focus { border-color: var(--color-text-highlight); box-shadow: inset 0 2px 5px rgba(0,0,0,0.2), 0 0 10px var(--color-text-highlight); }
.menu-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* (ستايل اللوج المنسوخ من ملفك الأصلي لأنه ممتاز) */
.team-log-box { display: flex; flex-direction: column; gap: 10px; padding: 10px; overflow-y: auto; font-family: 'Cairo', sans-serif; }
.log-hint-box { display: flex; align-items: flex-start; gap: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px; position: relative; }
.log-hint-box .avatar { width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; }
.log-hint-box .hint-content { display: flex; flex-direction: column; gap: 5px; }
.log-hint-box .hint-player { font-weight: 600; font-size: 14px; color: #FFD700; }
.hint-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.hint-bubble { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); padding: 6px 8px; border-radius: 12px; color: #fff; max-width: 180px; word-break: break-word; box-shadow: 0 0 8px rgba(0,0,0,0.25); }
.count-bubble { color: #fff; font-weight: 700; border-radius: 10px; padding: 6px 10px; min-width: 28px; text-align: center; }
.log-hint-box.red .count-bubble { background: #ff5555; }
.log-hint-box.blue .count-bubble { background: #448aff; }
.reply-box { display: flex; align-items: flex-start; gap: 10px; margin-left: 40px; padding: 6px 10px; background: rgba(255,255,255,0.05); border-radius: 10px; font-size: 13px; position: relative; }
.reply-box .reply-name { font-weight: 600; margin-left: 5px; }
.reply-box .reply-word { font-weight: 500; }
.reply-box.red { border-right: 3px solid #FF4444; }
.reply-box.blue { border-right: 3px solid #448AFF; }
.reply-box.neutral { border-right: 3px solid #CCCCCC; }
.reply-box.assassin { border-right: 3px solid #000; }
.reply-box .reply-text { color: #E0E0E0; }
.log-hint-box.blue .avatar { background-image: url('img/bluebg2.png'); }
.log-hint-box.red .avatar { background-image: url('img/redbg.png'); }

/* (باقي الستايلات) */
/*
.floating-player-menu { background: rgba(30, 30, 30, 0.95); border: 1px solid #666; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
*/
.floating-player-menu .menu-btn { background: transparent; border: none; color: #fff; font-size: 15px; cursor: pointer; padding: 4px 10px; border-radius: 6px; text-align: left; transition: 0.2s; }
.floating-player-menu .menu-btn:hover { background: rgba(255, 255, 255, 0.1); }
.floating-player-menu .kick-btn:hover { background: rgba(255, 0, 0, 0.2); color: #ff6b6b; }
.floating-player-menu .admin-btn:hover { background: rgba(255, 215, 0, 0.2); color: #ffd700; }

#name-entry-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); /* (يرث .glass-panel) */ }
#name-entry-modal .modal-box { background: rgba(25, 25, 50, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 25px 40px; text-align: center; color: #fff; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; gap: 15px; }
#name-entry-modal h2 { margin: 0 0 10px; color: #FFD700; font-family: 'Cairo', sans-serif; }
#name-entry-modal input { text-align: center; padding: 10px; border-radius: 8px; border: none; outline: none; width: 100%; font-size: 16px; background: rgba(255,255,255,0.1); color: #fff; }
#name-entry-modal .modal-buttons { display: flex; flex-direction: column; width: 100%; gap: 8px; margin-top: 10px; }
/* (الأزرار داخل المودال ستستخدم ستايل <button> العام) */


/* 📱 تصميم الموبايل - تم حذف النسخة القديمة */
#lobby-container {
  z-index: 2;
  background: var(--color-panel-bg);
  backdrop-filter: blur(15px);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--border-radius-main);
  padding: 30px 40px;
  width: 400px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
  transition: all var(--transition-speed-med) var(--transition-curve);
}
#lobby-container:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7), 0 0 30px var(--color-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#lobby-container h2 {
  font-family: var(--font-secondary);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 25px;
  color: var(--color-text-highlight);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.spy-name {
  font-style: italic;
  color: #e0e0ff; /* بنفسجي فاتح مائل للأبيض */
  font-weight: 1000;
  letter-spacing: 0.4px;
  text-shadow: 0 0 6px rgba(255, 255, 200, 0.2);
  transition: 0.3s ease;
  text-transform: capitalize;
}

.spy-name:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 230, 100, 0.6);
}

.spy-name.red {
  color: #ffb3b3; /* وردي فاتح */
}

.spy-name.blue {
  color: #b3d9ff; /* أزرق فاتح */
}

/* الكلمة اللي تحت في البطاقات المقلوبة */
.card-back .word-bottom {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* لو البطاقة بيضاء نخلي الكلمة غامقة */
.card-back.role-neutral .word-bottom {
  color: #222;
 /* text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);*/
}


.card.revealed .word-bottom,
.card.flipped .word-bottom {
  opacity: 0;
  transition: none; 
  /*
  1. ننزلها 35
  2. نعدلها 180
  3. نخليها "أعلى" من الباترن (بـ 2 بكسل)
  */
  /*transform: translateY(35px) rotateY(180deg) translateZ(2px); */

  transform: translateY(35px) translateZ(2px);
  pointer-events: none;
}

/* الحالة عند النقر (ظاهرة) - تعتمد على كلاس .visible الذي يضيفه script.js */
.card.revealed .word-bottom.visible,
.card.flipped .word-bottom.visible {
  opacity: 1; /* إظهار فوري */
  pointer-events: auto;
  /* (مش محتاجين نكرر الـ transform لأنه بقى موجود في القاعدة فوق) */
}

.card.revealed.lifted .card-inner,
.card.flipped.lifted .card-inner {
transform: translateY(-30px) rotateY(180deg);
  transition: transform 0.3s ease;
/*  box-shadow: 0 12px 20px rgba(0,0,0,0.4);*/
}


/* تم حذف النسخة القديمة من media queries */


/* 🎯 النسخة النهائية لتصميم الموبايل - بدون تعديل HTML */
@media (max-width: 768px) {

  html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
  }

  body {
    display: block !important;
  }

  
  #game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto !important;
    overflow-y: visible !important;
  }

  main {
    z-index: 2;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100%;
    gap: 12px;
    padding: 10px;
    box-sizing: border-box;
    height: auto !important;
    overflow: visible !important;
  }

  /* ✅ البورد أول حاجة فوق - نخليها تأخذ الصف الأول كامل */
  .center-column {
    order: 1 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    max-width: 100% !important;
    min-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .board {
    width: 100%;
    max-width: 95vw;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .card {
    aspect-ratio: 1.2 / 1;
    font-size: 11px;
  }

  .card .word {
    font-size: 10px;
  }

  /* ✅ نخلي الفريقين جنب بعض */
  .side-column {
    width: 48% !important;
    flex: 0 0 48% !important;
    max-width: 48% !important;
    flex-shrink: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* الفريق الأزرق - في الصف الثاني على الشمال */
  .side-column:first-of-type {
    order: 2 !important;
  }

  /* الفريق الأحمر - في الصف الثاني على اليمين */
  .side-column:last-of-type {
    order: 3 !important;
  }


  /* ترتيب محتوى الفريق: الاسم أولاً ثم اللوجو تحته */
  .team-info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .team-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* الاسم أولاً - في HTML موجود بعد اللوجو، لكن نضبطه بالـ order */
  .team-header .team-name {
    order: 1 !important;
    margin-bottom: 8px !important;
  }

  /* اللوجو تحت الاسم - في HTML موجود قبل الاسم، لكن نضبطه بالـ order */
  .team-header .team-logo {
    order: 2 !important;
    margin-top: 0 !important;
  }

  footer.hint-area {
    order: 4;
    width: 100%;
  }

  .team-info-box,
  .team-log-box {
    width: 100%;
  }

  .team-log-box {
    max-height: 180px;
    overflow-y: auto;
    background: rgba(0,0,0,0.2);
  }

  .team-logo {
    width: 36px;
    height: 36px;
  }

  .team-name {
    font-size: 15px;
  }

  /* ✅ شريط علوي ثابت */
  .top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    width: 100%;
  }

.card.revealed .word-bottom.visible, .card.flipped .word-bottom.visible {
font-size: 0.6rem;
}


}

/* 🚫 تعطيل البلور */
/*
.team-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  backdrop-filter: none !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: -1 !important;
}*/


/* ✨ كويري إضافي لتصغير الأزرار وأماكن الكتابة في نفس مقاس الموبايل */
@media (max-width: 768px) {

  /* 🔘 الأزرار */
  .action-button {
    font-size: 13px;
    padding: 8px 10px;
    max-width: 200px;
  }

  footer.hint-area .action-button {
    margin-top: 4px;
  }

  /* ✏️ أماكن الكتابة (التلميح والعدد) */
  .hint-area #hint-word {
    font-size: 13px;
    padding: 8px;
    min-width: 150px;
    flex: 1;
    max-width: 250px;
    border-radius: 8px;
  }
  .hint-area #hint-count {
    font-size: 13px;
    padding: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  #hint-word::placeholder,
  #hint-count::placeholder {
    font-size: 12px;
    opacity: 0.8;
  }

  /* 🧠 النصوص داخل التلميح الحالي */
  #current-clue-text {
    font-size: 14px !important;
  }

  /* 🪄 لو فيه حقول كتابة تانية */
  input[type="text"],
  input[type="number"] {
    font-size: 13px;
    padding: 8px;
  }

  /* 💬 تكبير بسيط للمسافات */
  footer.hint-area {
    gap: 6px;
  }
}

/* ✨ كويري لتصغير الأزرار وأماكن الكتابة في نفس مقاس الموبايل */
@media (max-width: 768px) {

  /* 🔘 الأزرار */
  .action-button {
    font-size: 13px;
    padding: 7px 10px;
    max-width: 200px;
    border-radius: 10px;
  }

  footer.hint-area .action-button {
    margin-top: 4px;
  }

  /* ✏️ أماكن الكتابة (التلميح والعدد) */
  #hint-word {
    font-size: 13px;
    padding: 7px 8px;
    min-width: 150px;
    flex: 1;
    max-width: 250px;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
  }
  .hint-count-dropdown-btn {
    font-size: 13px;
    padding: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .hint-count-dropdown-btn::before,
  .hint-count-dropdown-btn::after {
    display: none !important;
    content: none !important;
  }

  .hint-count-dropdown-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-border-light) !important;
    color: var(--color-text-primary) !important;
  }

  .hint-count-dropdown-btn:active {
    transform: none !important;
    box-shadow: none !important;
  }
  
 
  
  /* 🔢 تحسين قائمة الأرقام على الموبايل: عمودية وبأزرار عريضة لسهولة اللمس */
  .hint-count-dropdown-menu {
    bottom: 55px;
    padding: 6px;
    display: none;
    flex-direction: column;       /* عمودي بدل أفقي */
    flex-wrap: nowrap;
    gap: 4px;
    width: 120px;                 /* عرض ثابت مريح */
    min-width: 120px;
    justify-content: flex-start;
    align-items: stretch;         /* كل خيار ياخد عرض القائمة */
    white-space: nowrap;
    overflow-x: hidden;           /* منع سكرول أفقي يلغبط اللمس */

    /* ✅ تموضع أدق على الموبايل: ملتصقة بزر الاختيار بدون إزاحة نصفية */
    right: 0;
    left: auto;
    transform: none;
  }
  
  .hint-count-dropdown-menu[style*="block"] {
    display: flex !important;
  }
  
  .hint-count-option {
    font-size: 14px;
    padding: 8px 12px;
    min-width: 100%;
    text-align: center;
  }
  
  .hint-count-divider {
    width: 100%;
    height: 1px;
  }

  #hint-word::placeholder,
  #hint-count::placeholder {
    font-size: 12px;
    opacity: 0.8;
  }

  /* 🧠 النص اللي بيظهر أثناء التلميح */
  #current-clue-text {
    font-size: 14px !important;
  }

  /* تصميم عرض التلميح على الموبايل */
  .clue-display-container {
    gap: 8px;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .clue-hint-box {
    min-width: 150px;
    max-width: 100%;
    padding: 10px 12px;
    flex: 1 1 auto;
  }

  .clue-word {
    font-size: 16px !important;
  }

  .clue-number-circle {
    width: 45px;
    height: 45px;
  }

  .clue-number {
    font-size: 18px;
  }

  .clue-end-btn {
    min-width: 70px;
    padding: 8px 12px;
    font-size: 13px;
    flex: 0 0 auto;
  }

  /* 🪄 أي حقول إدخال تانية (زي الأسماء أو الأكواد) */
  input[type="text"],
  input[type="number"] {
    font-size: 13px;
    padding: 7px 8px;
    border-radius: 8px;
  }

  /* 💬 مسافات متوازنة بين العناصر */
  footer.hint-area {
    gap: 6px;
  }

  /* ⚙️ شريط الأزرار العام */
  .top-bar span {
    font-size: 13px;
  }
}


/* 🚫 إزالة أي طبقة بلور فوق اللوبي بالكامل على الموبايل */
@media (max-width: 768px) {

  /* تأكيد أن اللوبي فوق أي طبقة */
  #lobby-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999 !important;
    width: 90% !important;  /* مناسب للموبايل */
    max-width: 400px !important;
  }

  /* نخلي الـ body ما يخربش التمركز */
  body {
    display: block !important;
    justify-content: unset !important;
    align-items: unset !important;
  }
}


/* ======================================= */
/* == 🎨 تصميم البوب-اب البلوري (Glass) == */
/* ======================================= */

.hint-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 9999;
  opacity: 1;
  /* استخدام نفس حركة الدخول */
  animation: popup-appear 0.3s ease; 
  /* التأكد من أن الخلفية لا تمنع الضغط */
  pointer-events: none; 
}

/* 🌟 هذا هو الصندوق البلوري الأساسي */
.hint-popup-content {
  /* 1. الشكل والأبعاد */
  color: #ffffff;
  padding: 25px 40px;
  border-radius: 16px;
  text-align: center;
  min-width: 300px; /* حد أدنى للعرض */

  /* 2. التأثير البلوري (Glassmorphism) */
  background: rgba(35, 30, 50, 0.85); /* خلفية زجاجية داكنة */
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  
  /* 3. الحدود والظل (لإعطاء عمق) */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-width: 4px; /* حد علوي سميك للون الفريق */
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5); /* ظل عميق */
  
  /* 4. الخطوط */
  font-family: var(--font-primary, 'Cairo', sans-serif);
  font-weight: 600;
  font-size: 22px; /* حجم الخط الأساسي للنافذة */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* 🔴 لون الفريق الأحمر */
.hint-popup-content.red {
  border-top-color: var(--color-red-team, #ff4d4d);
  /* ظل مضيء بلون الفريق */
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 25px var(--color-red-glow, rgba(255, 77, 77, 0.3));
}

/* 🔵 لون الفريق الأزرق */
.hint-popup-content.blue {
  border-top-color: var(--color-blue-team, #4d7fff);
  /* ظل مضيء بلون الفريق */
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 25px var(--color-blue-glow, rgba(77, 127, 255, 0.3));
}

/* 🖋️ تنسيق النصوص داخل النافذة */

/* (H3 - يُستخدم لاسم اللاعب أو رسالة "حان دور...") */
.hint-popup-content h3 {
  font-size: 1.2em;  /* أكبر قليلاً من الخط الأساسي */
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

/* (يُستخدم لكلمة التلميح فقط) */
.hint-popup-content .hint-text {
  font-size: 1.5em; /* 33px~ - اجعل كلمة التلميح كبيرة */
  font-weight: 800;
  color: var(--color-text-highlight, #FFD700); /* لون ذهبي مميز */
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  margin-top: 8px;
}

/* (يُستخدم لعدد التلميح فقط) */
.hint-popup-content .hint-count {
  font-size: 1.1em; /* 24px~ */
  opacity: 0.8;
  margin-top: 5px;
}

/* 💨 حركة الاختفاء (Fade Out) */
.fade-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 💨 حركة الدخول (Fade In) */
@keyframes popup-appear {
  from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}






.hand-icon {
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
}
.hand-icon * {
  pointer-events: none; /* عشان الضغط يوصل للـ span نفسه */
}


/* الوجه الأمامي */
/* 🎨 تصميم الكارت قبل القلب (Purple Neo Style) */
.card-front {
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  color: #eae6ff;
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  
  /* الإطار الخارجي المتدرج */
  background: linear-gradient(180deg, rgba(164,108,255,0.25), rgba(107,33,255,0.25));
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* الطبقة الداخلية الداكنة */
.card-front::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--border-radius-card) - 6px);
  background: radial-gradient(circle at 60% 40%, rgba(150,80,255,0.15), rgba(0,0,0,0.85));
  z-index: 0;
}

/* البلور السفلي للكلمة */
.card-front .word {
  bottom: 2px;
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  padding: 6px 16px;
  border-radius: 10px;
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-align: center;
}
/*
.card-front:hover {
  box-shadow: 0 0 25px rgba(164,108,255,0.4), inset 0 0 10px rgba(107,33,255,0.3);
  transform: translateY(-3px);
  transition: all 0.3s ease;
}
*/







/* 🔌 أيقونة انقطاع الاتصال (نسخة Bootstrap) */
.wifi-off-icon {
  width: 14px;
  height: 14px;
  color: #ff6b6b;
  display: inline-block;
  opacity: 0.9;
  flex-shrink: 0; /* تمنع الأيقونة من الانضغاط */
}

/* 🔌 إصلاح محاذاة أيقونة انقطاع الاتصال */

/* 1. للاعبين العاديين في قوائم الفرق */
#blue-players-list > span,
#red-players-list > span {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* مسافة بين الاسم والأيقونة */
}

/* 2. للـ Spymaster */
.spy-name {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* مسافة بين الاسم والأيقونة */
}

/* 3. لقائمة اللاعبين في الإعدادات */
.player-item > span:last-of-type {
   display: inline-flex;
   align-items: center;
   gap: 4px; /* مسافة بين الاسم والأيقونة */
}


/* ======================================= */
/* == 🎨 تلوين الكلمات المختارة في السجل == */
/* ======================================= */

/* 🔴 الكلمة الحمراء */
.reply-box.red .reply-word {
  color: #ff7272; /* لون نص فاتح */
  font-weight: 700;

}

/* 🔵 الكلمة الزرقاء */
.reply-box.blue .reply-word {
    font-weight: bold;
    color: #4086d0;
}

/* ⚪ الكلمة المحايدة */
.reply-box.neutral .reply-word {
  color: #E0E0E0;
    font-weight: bold;

}

/* ⚫ الكلمة القاتل */
.reply-box.assassin .reply-word {
  color: #000000;
  font-weight: bold;
  background: #cdcdcd; /* خلفية سوداء */
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #555;
}




/* [داخل ملف style.css] */

:root {
  /* ... (المتغيرات الموجودة) ... */
  --card-flip-duration: 0.7s;
  --card-scale-duration: 0.4s; /* 🚀 [إضافة جديدة] مدة النمو/الانكماش */
}

.card {
  /* ... (الستايلات الموجودة) ... */
  transform-style: preserve-3d;
  
  /* 🚀 [تعديل] هذا الترانزيشن سيُستخدم لحركة "الانكماش" في النهاية */
  transition: transform var(--card-scale-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🚀 [إضافة جديدة] كلاس التشويق (النمو) */
.card.suspense-scale {
  transform: scale(1.1); /* يكبر بنسبة 10% */
  z-index: 20; /* يطفو فوق الكروت الأخرى */

  /* 🚀 هذا الترانزيشن سيُستخدم لحركة "النمو" في البداية */
  transition: transform var(--card-scale-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-inner {
  /* ... (الستايلات الموجودة) ... */
  /* 🚀 [تعديل] نتأكد أن حركة القلب (transform) فقط هي التي تأخذ مدة القلب */
  transition: transform var(--card-flip-duration) cubic-bezier(.2,.8,.2,1);
  /* ... (باقي الستايلات) ... */
}

/* 🚀 [تعديل] كلاس القلب سيتسبب فقط في قلب الـ inner */
.card.flipped .card-inner {
  transform: rotateY(180deg);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* 🚫 [تم الحذف] 
   سنقوم بحذف أي خصائص transform من .card.flipped 
   لأن .suspense-scale هو من يتحكم بالحجم
*/
/*
.card.flipped {
  transform: scale(1.05); 
  z-index: 20;
}
*/


/* ======================================= */
/* == 👻 تنسيق الرعب (Jumpscare) == */
/* ======================================= */

.jumpscare-container {
  position: fixed;
  inset: 0;
  z-index: 99999; /* فوق كل شيء */
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 1. ابدأ مخفيًا */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  /* 2. حركة سريعة للظهور والاختفاء */
  transition: opacity 0.1s ease, visibility 0.1s ease;
}

.jumpscare-container.show {
  /* 3. الظهور الفوري */
  opacity: 1;
  visibility: visible;
}

.jumpscare-container img {
  width: 100%;
  height: 100%;
  /* استخدم 'contain' للتأكد من ظهور الوجه كاملاً */
  object-fit: contain; 
}


@media (max-width: 600px) {

  .board {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .card {
    min-height: 75px !important; /* علشان النص ياخد مساحته */
    padding: 6px !important;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card .word,
  .card span {
    font-size: 0.4rem; /* حجم واضح ومقروء */
    font-weight: 600 !important;
    text-align: center;
    line-height: 1.25;
    white-space: normal !important; /* يسمح بسطرين */
  }

  .card-front .word {
    position: absolute;
  }

  .card-front .word, .card-back .word {
    bottom: auto;
  }
  .card-front .hand-icon {
position: absolute;
    top: 5px;
    left: 5px;
    color: var(--color-text-highlight);
    opacity: 0.7;
    transition: 0.3s;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 50%;
    z-index: 5;
  }


  .hint-row {
        display: inline-grid;
  }

  .hint-bubble {
    word-break: auto-phrase;
    font-size: 0.5rem;
  }
  .log-hint-box {
    width: fit-content;
  }

}



@media (max-width: 600px) {
  .top-bar button span {
    display: none !important;
  }

  .top-bar button {
    padding: 10px !important; /* يخلي الزر أصغر */
    min-width: auto !important;
    justify-content: center;
  }
    #spectator-btn span,
  #switch-team-btn span {
    display: inline !important;
  }
}

@media (max-width: 600px) {
  .top-bar button svg {
    width: 20px;
    height: 20px;
  }
}




@media (max-width: 600px) {
  .glass-panel {
    backdrop-filter: none !important;
    background: rgba(255,255,255,0.08) !important;
  }
}


.card-inner {
  will-change: transform;
}




body.low-gfx .glass-panel,
body.low-gfx .team-info-box,
body.low-gfx .team-overlay,
body.low-gfx #players-list,
body.low-gfx #player-menu {
  backdrop-filter: none !important;
  background: rgba(0,0,0,0.25) !important;
}

body.low-gfx .card {
  box-shadow: none !important;
}

/* ✅ منع أي تأثيرات hover على الكروت في وضع الخفة - الكارت يبقى نفس الشكل الطبيعي */
body.low-gfx .card:hover {
  /* منع أي تغييرات - الكارت يبقى زي ما هو تماماً */
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  z-index: auto !important;
  background: unset !important;
  background-color: unset !important;
  /* لا نغير أي خصائص - الكارت يبقى نفس الشكل الطبيعي */
}

body.low-gfx .card .card-inner {
  transition: transform 0.25s linear !important;
}

body.low-gfx .hint-popup,
body.low-gfx .log-hint-box,
body.low-gfx .reply-box {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

body.low-gfx * {
  animation-duration: 0ms !important;
  transition-duration: 0ms !important;
}



/* ===============================
   ⚡ تعطيل جميع الأنيميشنات نهائيًا في وضع الخفّة
   =============================== */

body.low-gfx *,
body.low-gfx *::before,
body.low-gfx *::after {
  animation: none !important;
  animation-name: none !important;
  animation-delay: 0s !important;
  animation-duration: 0s !important;
  animation-iteration-count: 0 !important;
  animation-play-state: paused !important;
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* تعطيل أنيميشن الفريق اللي عليه الدور كمان (لو عايز توقفه برضو) */
/*
body.low-gfx .team-turn,
body.low-gfx [class*="team-turn"] {
  animation: none !important;
}
*/

/* إزالة أي حركة أو وميض */
body.low-gfx *:hover {
  transform: none !important;
  filter: none !important;
}

/* ✅ منع أي تأثيرات hover على الكروت في وضع الخفة - الكارت يبقى نفس الشكل الطبيعي تماماً */
body.low-gfx .card:hover,
body.low-gfx .card-front:hover,
body.low-gfx .card-back:hover,
body.low-gfx .card-inner:hover {
  /* منع أي تغييرات في الشكل - الكارت يبقى زي ما هو */
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  z-index: auto !important;
  /* لا نغير background, position, display, أو أي خصائص أساسية */
}

/* منع تأثيرات hover على الطبقات الداخلية - لا تغيير في الـ background */
body.low-gfx .card-front:hover::before,
body.low-gfx .card:hover .card-front::before {
  opacity: 1 !important;
  filter: none !important;
  /* لا نغير background - نتركه كما هو */
}

/* بلور الواجهات الملغى */
body.low-gfx .glass-panel,
body.low-gfx .team-info-box,
body.low-gfx .team-overlay,
body.low-gfx #players-list,
body.low-gfx #player-menu,
body.low-gfx .hint-popup,
body.low-gfx .log-hint-box,
body.low-gfx .reply-box {
  filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  background: rgba(0,0,0,0.25) !important;
}


/* ===============================
   🎯 منع الكروت من اللف عند hover فقط في وضع الخفّة
   =============================== */

/* لما يكون الماوس فوق الكارت، ما يعملش دوران جديد */
body.low-gfx .card:not(.flipped):hover .card-inner {
  transform: none !important;
}

/* لو الكارت متقلب بالفعل (flipped)، سيبه زي ما هو */
body.low-gfx .card.flipped:hover .card-inner {
  transform: rotateY(180deg) !important;
}

/* نحافظ على التفاعل العادي (click) */
body.low-gfx .card {
  cursor: pointer !important;
}

/* نوقف فقط تأثيرات الزخرفة وقت hover - لا تغيير في الـ background */
body.low-gfx .card:hover {
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  /* لا نغير background - نتركه كما هو */
}

/* ✅ منع تأثير hover على الكروت غير المقلوبة في وضع الخفة - لا تغيير في الـ background */
body.low-gfx .card:not(.flipped):hover {
  opacity: 1 !important;
  filter: none !important;
  /* لا نغير background - نتركه كما هو */
}


/* ===============================
   🧊 تعطيل أي تفاعل hover للكروت في وضع الخفّة
   =============================== */

/* نوقف استجابة hover على الكروت تمامًا */
body.low-gfx .card {
  pointer-events: auto !important;   /* عشان click يفضل شغال */
}

body.low-gfx * {
  transition: none !important;
  animation: none !important;
}
body.low-gfx .card-inner {
  transition: none !important;
}
body.low-gfx .hand-icon,
body.low-gfx .player-avatar {
  filter: none !important;
  box-shadow: none !important;
}



body.low-gfx .card {
  transform: none !important;
  box-shadow: none !important;
}



body.low-gfx .card {
  transition: none !important;
  box-shadow: none !important;
}

body.low-gfx .card-inner {
  transition: none !important;
}

body.low-gfx .hand-icon svg {
  filter: none !important;
}

body.low-gfx .voter-bubble {
  transition: none !important;
}



/* ===============================
   ✨ تحسين تمييز الفريق في الوضع الخفيف
   =============================== */
body.low-gfx .team-info-box.active-turn {
  outline: 3px solid currentColor !important;
  filter: brightness(1.3) contrast(1.1) !important;
  box-shadow: 0 0 15px currentColor !important;
  animation: pulseActive 1.5s infinite alternate;
}

body.low-gfx .team-red.active-turn {
  color: #ff5555 !important;
  background: rgba(255, 0, 0, 0.15) !important;
}

body.low-gfx .team-blue.active-turn {
  color: #5590ff !important;
  background: rgba(0, 80, 255, 0.15) !important;
}

@keyframes pulseActive {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(1.05); opacity: 0.8; }
}

/* ✅ إصلاح نهائي لرعشة الكروت في وضع الخفّة */
body.low-gfx .card:active {
  transform: translate3d(0, -4px, 0) !important; /* حركة خفيفة وثابتة */
  transition: none !important; /* بدون أي حركة متذبذبة */
  z-index: 10 !important;
}

body.low-gfx .card.flipped:active .card-inner {
  transform: rotateY(180deg) translateZ(0) !important; /* يمنع إعادة القلب */
}



.team-red.active-turn {
  outline: 3px solid #ff4d4d !important;
  box-shadow: 0 0 20px rgba(255, 70, 70, 0.8) !important;
}

.team-blue.active-turn {
  outline: 3px solid #4d8dff !important;
  box-shadow: 0 0 20px rgba(70, 120, 255, 0.8) !important;
}


/* =======================================
   🎯 إصلاح رؤية الكلمة عند رفع البطاقة
   ======================================= */

/* نمنع hover من التأثير - لا تغيير في الـ background */
body.low-gfx .card:hover,
body.low-gfx .card-inner:hover,
body.low-gfx .card-front:hover,
body.low-gfx .card-back:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  /* لا نغير background - نتركه كما هو */
}

/* ✅ منع حركة الكلمة عند hover في وضع الخفة */
body.low-gfx .card-front .word:hover,
body.low-gfx .card-front:hover .word,
body.low-gfx .card:hover .card-front .word {
  transform: translateX(-50%) !important;

}

/* نحافظ على رفع البطاقة فعلياً */
body.low-gfx .card.lifted {
  transform: translateY(-10px) !important;
  z-index: 25 !important;
  transition: transform 0.15s ease-out !important;
}

/* 👁️ عرض الكلمة أسفل البطاقة المرفوعة */
body.low-gfx .card.lifted .card-back .word-bottom {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* ✅ في وضع الخفة: إظهار الكلمة بدون رفع الكارت */
body.low-gfx .card.revealed .word-bottom.visible,
body.low-gfx .card.flipped .word-bottom.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* نخلي الـ .card-back فوق الكارت شوية */
body.low-gfx .card-back {
  z-index: 10 !important;
  transform-style: preserve-3d !important;
  perspective: 1000px !important;
}

/* تفعيل الرؤية ثلاثية الأبعاد علشان الكلمة تبان بوضوح */
body.low-gfx .card-inner {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* ========== تخطيط قبل بدء اللعبة ========== */
/* جعل المستطيلات في المنتصف قبل بدء اللعبة */
body:not(.game-started) main {
  justify-content: center !important;
  align-items: center !important;
  min-height: calc(100vh - 120px) !important;
}

body:not(.game-started) .side-column {
  width: 25% !important;
  max-width: 300px !important;
  height: auto !important;
}

body:not(.game-started) .center-column {
  width: 50% !important;
  max-width: 500px !important;
  height: auto !important;
}

/* الأزرق (team-blue) في الشمال (يسار) - order: 1 */
body:not(.game-started) .side-column:has(.team-blue) {
  order: 1 !important;
}

/* الصورة في المنتصف - order: 2 */
body:not(.game-started) .center-column {
  order: 2 !important;
}

/* الأحمر (team-red) في الجنوب (يمين) - order: 3 */
body:not(.game-started) .side-column:has(.team-red) {
  order: 3 !important;
}

/* ========== التخطيط الطبيعي بعد بدء اللعبة ========== */
/* إعادة التخطيط الطبيعي بعد بدء اللعبة */
body.game-started main {
  justify-content: space-between !important;
  align-items: stretch !important;
}

body.game-started .side-column {
  width: 22% !important;
  max-width: none !important;
  order: 0 !important;
}

body.game-started .center-column {
  width: 56% !important;
  max-width: none !important;
  order: 0 !important;
}

/* على الموبايل: نخلي الترتيب صحيح حتى بعد بدء اللعبة */
@media (max-width: 768px) {
  body.game-started .center-column {
    order: 1 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  body.game-started .side-column:first-of-type {
    order: 2 !important;
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
  }

  body.game-started .side-column:last-of-type {
    order: 3 !important;
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
  }
}