@font-face {
  font-family: 'GE Dinar Two';
  src: url('fonts/GEDinarTwoMedium.woff2') format('woff2'),
      url('fonts/GEDinarTwoMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GE Dinar Two';
  src: url('fonts/GEDinarTwo-Light.woff2') format('woff2'),
      url('fonts/GEDinarTwo-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}



body {
  font-family: GE Dinar Two;
  background-image: url("img/bg.png ");
  /*background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),*/
  /*url('img/bg.png') no-repeat center center fixed;*/
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 20px;
  color: #ecf0f1;
}

.victory-modal {
  display: none;
  position: fixed;
  inset: 0; /* top:0, right:0, bottom:0, left:0 */
  z-index: 9999;
}

/* الخلفية السوداء الخفيفة */
.victory-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7); /* أسود شفاف */
  backdrop-filter: blur(4px);
  z-index: 1;
}

/* محتوى النافذة نفسه */
.victory-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(30, 30, 60, 0.95);
  backdrop-filter: blur(10px);
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  color: white;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  z-index: 2;
  max-width: 90%;
  width: 400px;
}

.victory-content h2 {
  font-size: 30px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.victory-content button {
  padding: 12px 24px;
  background-color: #9b59b6;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
}

.victory-content button:hover {
  background-color: #8e44ad;
}



.social-media-icons {
  display: flex; /* وضع الأيقونات في صف واحد */
  justify-content: center; /* محاذاة الأيقونات في المنتصف */
  align-items: center; /* محاذاة الأيقونات عموديًا في المنتصف */
  gap: 20px; /* المسافة بين الأيقونات */
  position: relative;
  bottom: 0;
  width: 100%;
  padding: 10px;
  gap: 40px;
  scale: 70%;
  margin-top: 20px;
}


.card.used-by-red {
  background: linear-gradient(145deg, rgba(231, 76, 60, 0.3), rgba(192, 57, 43, 0.3)) !important;
  box-shadow: inset 0 0 0 3px rgba(192, 57, 43, 1);
}

.card.used-by-blue {
  background: linear-gradient(145deg, rgba(52, 152, 219, 0.3), rgba(41, 128, 185, 0.3)) !important;
  box-shadow: inset 0 0 0 3px rgba(41, 128, 185, 1);
}

.about-icon {
  position: absolute; /* وضع الأيقونة بشكل مطلق داخل الـ game-container */
  bottom: 20px; /* المسافة من الأسفل */
  right: 20px;  /* المسافة من اليمين */
  display: flex;
  align-items: center;
  justify-content: center;
}

#about-image {
  display: none;
  position: fixed;
  bottom: 70px; /* يمكنك تعديل هذه القيمة حسب احتياجك */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

#about-image img {
  max-width: 300px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  
}
.about-icon img {
  width: 30px; /* الحجم المناسب */
  height: 30px; /* الحجم المناسب */
  transition: transform 0.3s ease;
}

.about-icon img:hover {
  transform: scale(1.2); /* تأثير تكبير الأيقونة عند المرور بالماوس */
}




/* حركة خفيفة للسهم */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}



.social-icon img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.social-icon img:hover {
  transform: scale(1.2); /* تأثير تكبير الأيقونة عند المرور عليها */
}






/* نافذة تعديل التيمات */
.edit-teams-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.edit-teams-container {
  background-color: rgba(60, 40, 60, 0.7);
    padding: 20px;
  border-radius: 10px;
  width: 70%;
  max-width: 600px;
  color: white;
  text-align: center;
}



.team-edit-section {
  display: flex;
  flex-direction: column;
}



button:hover {
  background-color: #27ae60;
}



.save-teams-btn {
  background-color: #9b59b6;
}


/* شاشة البداية */
.setup-screen {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  overflow-y: auto;
  z-index: 1000;
}

.setup-container {
  background-color: rgba(60, 40, 60, 0.7);
    padding: 50px;
  border-radius: 15px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  
}

.points-input {
  width: 60px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  border: none;
  background: transparent;
  color: white;
  outline: none;
}

.setup-teams-row {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.setup-team {
  flex: 1;
}

.setup-team h3 {
  color: #ffffff;
  margin-bottom: 10px;
}

.setup-team input,
.setup-team textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #7f8c8d;
  background-color: rgba(255, 255, 255, 0.1); /* لون شفاف */
  color: white;
  font-size: 24px;
}

.setup-team textarea {
  resize: vertical;
  min-height:100px;
  border: 2px solid rgb(92, 115, 208);
  background-color: rgba(0, 26, 255, 0.1);
}

.setup-team:not(:last-child) {
  margin-bottom: 30px;
}

.points-section {
  margin: 25px 0;
}

.points-section h4 {
  color: #ffffff;
  margin-bottom: 15px;
  text-align: center;
}



#red-players {
  resize: vertical;
  min-height: 70px;
}

.team-players {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}

/* تخصيص لعرض أسماء لاعبي الفريق الأحمر على أقصى اليمين */
#red-team .team-players {
  position: absolute;
  top: 130%;
 /* right: 0%;*/
  width: 80%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* تخصيص لعرض أسماء لاعبي الفريق الأزرق على أقصى اليسار */

.turn-arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #9b59b6;
  position: absolute;
  right: -20px; /* يطلع السهم خارج المستطيل لليمين */
  transform: translateY(-50%);
  animation: bounce 1s infinite;
  z-index: 10;
  top: 30%;
}


.turn-arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #9b59b6; /* ← بنفسجي */
  position: absolute;
  left: -20px; /* يطلع السهم خارج المستطيل لليسار */
  transform: translateY(-50%);
  animation: bounce 1s infinite;
  z-index: 10;
  top: 30%;
}


.player-box {
  position: relative; /* ضروري عشان السهم يبقى نسبي ليه */
  /*display: flex;*/
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 24px;
  transition: box-shadow 0.3s ease-in-out; /* إضافة تأثير الانتقال عند التوهج */
}


/* تأثير التوهج */

.player-box.active-player {
  border: 2px solid #9b59b6;
  background-color: rgba(155, 89, 182, 0.15);
  box-shadow: 0 0 12px rgba(144, 0, 255, 0.7);
  transform: scale(1.05);
  transition: all 0.3s ease;
}



#edit-red-players {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #7f8c8d;
  background-color: rgba(255, 0, 0, 0.1);
  color: white;
  font-size: 20px;  /* حجم الخط */
  font-family: 'Arial', sans-serif; /* نوع الخط */
  border: 2px solid rgb(208, 92, 92); /* حدود حمراء */

}

#edit-blue-players {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #7f8c8d;
  background-color: rgba(0, 26, 255, 0.1);  color: white;
  font-size: 20px;  /* حجم الخط */
  font-family: 'Arial', sans-serif; /* نوع الخط */
  border: 2px solid rgb(92, 115, 208); /* حدود حمراء */

}


/* تخصيص لاحتواء العناصر داخل الشاشة */
.setup-team input,
#red-players {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #7f8c8d;
  /*background-color: #2c3e50;*/
  color: white;
}

#red-players {
  resize: vertical;
  min-height: 100px;
  border: 2px solid rgb(208, 92, 92);
  background-color: rgba(255, 0, 0, 0.1);
}

.team-players {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}





.team-players .player-box {
  font-family: 'El Messiri', sans-serif;

  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 16px;
  word-wrap: break-word; /* يسمح بانتقال النص إلى السطر التالي إذا كان طويلاً */
  white-space: normal; /* يضمن أن النص سينكسر إذا كان طويلاً */
  height: auto; /* ارتفاع البوكس يتكيف مع النص */
  width: auto; /* عرض البوكس يتكيف مع النص */
}

@media (max-width: 768px) {
  .main-area {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .cards-columns {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .selected-card {
    width: 220px;
    height: 300px;
  }
}






#blue-team .team-players {
 position: absolute;
  top: 130%;
  /*left: 0%;*/
  width: 80%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.points-section {
  margin: 25px 0;
}

.points-section h4 {
  color: #ffffff;
  margin-bottom: 15px;
  text-align: center;
}




.points-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.points-option {
  background: linear-gradient(135deg, #6a0dad, #a166cc);
  padding: 18px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 60px;
  text-align: center;
  color: white;
}

.points-option:hover {
  background: linear-gradient(75deg, #8e44ad, #c39bd3);
}

.points-option.selected {
  background: #ffffff;
  color: #2c3e50;
  font-weight: bold;
}

.custom-points-container {
  display: none;
  margin-top: 15px;
  text-align: center;
}

.custom-points-container.show {
  display: block;
}

#custom-points {
  width: 80px;
  padding: 18px;
  border-radius: 5px;
  border: 1px solid #7f8c8d;
  background-color: rgba(0,0,0,0);
  color: white;
  text-align: center;
  margin-left: 10px;
}


#start-game {
  background: linear-gradient(135deg, #6a0dad, #a166cc);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  margin: 20px auto 0;
  width: 65%;
  transition: all 0.3s;
  padding: 16px;
  display: block;
  box-shadow: 0 4px 0 #4b0b8a;
}

#start-game:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(106, 13, 173, 0.3);}

/* اللعبة */
.game-container {
  position: relative; /* يجعل الحاوية مرجعية لوضع العناصر المطلوب داخلها */
  /*max-width: 1400px;*/
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}



.main-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
}

.cards-columns {
  
  display: flex;
  gap: 5px;
}

.cards-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.game-area {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.horizontal-cards {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.team {
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  min-width: 200px;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: box-shadow 0.3s, border 0.3s;
  
}

input {
  font-family:GE Dinar Two; 
  font-style:normal;
}



#red-players::placeholder {
  color: #c9c9c9; /* اختر اللون البنفسجي الذي تفضله */
  font-size: 18px;
}

#blue-players::placeholder {
  color: #c9c9c9; /* اختر اللون البنفسجي الذي تفضله */
  font-size: 18px;
}

#hidden-card-name, #hidden-card-damage {
  opacity: 0; /* 0 يعني شفاف تمامًا، و 1 يعني غير شفاف تمامًا */
}

img {
  object-fit: cover; /* أو يمكن استخدام contain لو عايز تحافظ على نسبة الأبعاد */
  width: 100%; /* عرض الصورة 100% من الكارت */
  height: 100%; /* ارتفاع الصورة 100% من الكارت */
}

#edit-red-players::placeholder {
  color: #c9c9c9; /* اختر اللون البنفسجي الذي تفضله */
  font-size: 20px;
}

#edit-blue-players::placeholder {
  color: #c9c9c9; /* اختر اللون البنفسجي الذي تفضله */
  font-size: 20px;
}

#red-team {
  background: rgba(231, 76, 60, 0.3); /* خلفية شفافة */
  /*backdrop-filter: blur(10px);*/
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(231, 76, 60, 0.3);
  box-shadow: 0 0 12px rgba(231, 76, 60, 0.2);
  border-radius: 16px;
  z-index: 1000;
}




#blue-team {
  background: rgba(52, 152, 219, 0.3);
 /* backdrop-filter: blur(10px);*/
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(52, 152, 219, 0.3);
  box-shadow: 0 0 12px rgba(52, 152, 219, 0.2);
  border-radius: 16px;
  z-index: 1000;
}





#red-team.turn-active {
  box-shadow: 0 0 15px 2px rgb(255 0 0 );
  
}

#blue-team.turn-active {
  box-shadow: 0 0 15px 2px #007bff;
}

.team-name {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
  border: none;
  background: transparent;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding: 5px;
}

.selected-card {
  background: transparent;
  border-radius: 12px;
  width: 260px;
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
 /* overflow: hidden;*/
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 will-change: transform;
 /*cursor: pointer;*/
 box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

#hidden-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid #9b59b6;
box-shadow: 0 0 20px 5px rgba(144, 0, 255, 0.5);
background-image: url('https://example.com/your-image.jpg');

}


#hidden-card-name {
  position: absolute;
  bottom: 60px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  background-color: rgba(0,0,0,0.7);
  padding: 5px 15px;
  border-radius: 20px;
}

#hidden-card-damage {
  position: absolute;
  bottom: 20px;
  font-size: 36px;
  font-weight: bold;
  color: #e74c3c;
  background-color: rgba(0,0,0,0.7);
  padding: 5px 15px;
  border-radius: 20px;
}

.card {
  color: white;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
  position: relative;


    /* 🆕 الخلفية التكستشر */
    background-image: url('https://www.transparenttextures.com/patterns/brushed-alum.png'); /* غيّرها حسب اختيارك */
    background-size: cover;
    background-blend-mode: overlay; /* يخلي الألوان تظهر مع الخامة */
}

.card img {
  position: relative;
  z-index: 2;
}


.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/rocky-wall.png'); /* ضع رابط التكستشر هنا */
  background-size: cover;
  opacity: 0.2; /* خفيفة علشان تبان تحت الصورة */
  z-index: 1;
  pointer-events: none;
}

#save-teams-btn {
  background: linear-gradient(135deg, #6a0dad, #a166cc);

  position: relative;
  z-index: 10;
}

#save-teams-btn:hover {
  background: linear-gradient(75deg, #8e44ad, #c39bd3);
}

.card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255,255,255,0.1);
  transform: rotate(45deg);
  pointer-events: none;
}

.card:hover:not(.disabled) {
  transform: translateY(-0px) scale(1.05);
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.card.disabled {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2); /* أو لونك المفضل */
  animation: none !important;

}

.card.used-by-red.disabled:hover {
  box-shadow: inset 0 0 0 3px rgba(231, 76, 60, 0.3) !important;
  transform: none !important;
}

.card.used-by-blue.disabled:hover {
  box-shadow: inset 0 0 0 3px rgba(52, 152, 219, 0.3) !important;
  transform: none !important;
}


.card.disabled {
  cursor: not-allowed;
  opacity: 0.2;
  /*background: linear-gradient(145deg, rgba(127, 140, 141, 0.1), rgba(149, 165, 166, 0.1)) !important;*/
  filter: grayscale(20%);

}

.card.disabled:hover {
  transform: none;
  box-shadow: none;
}


.points-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}


/* نافذة تعديل التيمات */
.edit-teams-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none; /* نافذة مخفية بشكل افتراضي */
  justify-content: center;
  align-items: center;
  z-index: 2000;
}



.edit-teams-content {
  display: flex;
  gap: 60px;
  /*justify-content: space-between;*/

}

.team-edit-section {
  display: flex;
  flex-direction: column;
}

.team-list {
  list-style-type: none;
  padding: 0;
}

.team-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}


.button-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 120px;
  flex-wrap: wrap;
}

.button-row button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  background-color: #9b59b6;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-row button:hover {
  background-color: #8e44ad;
  transform: scale(1.05);
}



/* تصميم النافذة المنبثقة */
.about-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 500px;
  background: rgba(30, 30, 50, 0.95);
  /*padding: 20px;*/
  border-radius: 10px;
  text-align: center;
  color: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.about-content {
  position: relative;
}

.about-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: white;
  transition: 0.3s;
}

.close-btn:hover {
  color: red;
}

/* تأثير ظهور النافذة */
.about-modal.show {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -55%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}


button {
  padding: 12px 32px;
  background-color: #9b59b6;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 18px;
  
}

button:hover {
  background-color: #7e4794;
}

.close-edit-btn {
  background-color: #e74c3c;
  margin-top: 20px;
}

.close-edit-btn:hover {
  background-color: #c54436;
}




#edit-teams-btn {
/*  padding: 12px 30px;*/
  background-color: transparent;
  border: 2px solid #9b59b6;
  color: white;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  
}

#edit-teams-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}


.points-controls button {
  width: 40px;
  height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  font-weight: bold;
  color: white;
  background-color: rgba(142, 68, 173, 0.6);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center; /* هذا لتوسيط المحتوى عموديًا */
  justify-content: center; /* هذا لتوسيط المحتوى أفقيًا */
}

.points-controls button:hover {
  background-color: #732d91;
}

#reset-btn {
  background: linear-gradient(135deg, #6a0dad, #a166cc);

  padding: 12px 30px;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 0 #4b0b8a;
    transition: all 0.3s ease;
}


#reset-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(106, 13, 173, 0.4);}

.turn-indicator {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #2c3e50;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.turn-indicator.active {
  background-color: #2ecc71;
  box-shadow: 0 0 10px #2ecc71;
}

.turn-indicator:hover {
  transform: scale(1.1);
}

.teams-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 20px;
}

.vs-logo {
  /*width: 100px;*/
  height: 100px;
  object-fit: contain;
  scale: 150%;
  z-index: 1;
}



@media (max-width: 900px) {
  .main-area {
    flex-direction: column;
    gap: 20px;
  }

 

  .team {
    min-width: 150px;
  }

  .teams-container {
    flex-direction: column;
  }

  .vs-logo {
    transform: rotate(90deg);
    margin: 20px 0;
  }
}

@media (max-width: 600px) {

  
  /* تخصيص أماكن ظهور الأسماء في منتصف كل جزء */
#red-team .team-name {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: white;
}

#blue-team .team-name {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: white;
}





/* تخصيص أماكن ظهور اللاعبين في الفريق الأزرق في الجزء السفلي الأيسر */


 

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

  .points {
    font-size: 24px;
  }
}
/* لون الخلفية في حالة فوز الفريق الأحمر */
.victory-modal.red-win .victory-content {
  background: linear-gradient(180deg, rgba(192, 57, 43, 0.3), rgba(39, 20, 53, 0.5));
}

/* لون الخلفية في حالة فوز الفريق الأزرق */
.victory-modal.blue-win .victory-content {
  background: linear-gradient(180deg, rgba(41, 128, 185, 0.3), rgba(39, 20, 53, 0.95));
}


.card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-color: transparent; /* لو بتحدد اللون من JS */

}

.card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: rotate(180deg);
 /* animation: shine 20s infinite;*/
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(100%) rotate(25deg);
  }
}
.card {
  position: relative;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.3s ease;
  box-sizing: border-box;

}


.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%; /* ظاهر جزء من التأثير دائمًا */
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.519) 0%,
    rgba(255, 255, 255, 0.023) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 3;
  transition: none;
  opacity: 1;
}





@keyframes shineAnimation {
  0% {
    opacity: 0;
    transform: rotate(25deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg); /* Rotate back to normal for a shine effect */
  }
}

.gold-card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -210%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    180deg,
    120deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.2) 100%
    transparent 100%
  );
  transform: rotate(25deg);
  z-index: 2;
  pointer-events: none;
}


.gold-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 3;
  transition: none;
  opacity: 0;
}


@keyframes glass-shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}


.gold-card {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.gold-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%; /* ظاهر جزء من التأثير دائمًا */
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgb(255, 255, 255) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 3;
  transition: none;
  opacity: 1;
}



.gold-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30%; /* ظاهر جزء من التأثير دائمًا */
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgb(255, 255, 255, ) 0%,
    rgba(255, 255, 255, 0.101) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 3;
  transition: none;
  opacity: 1;
}

.card {
  position: relative;
  overflow: hidden;
  z-index: 1;
}


.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30%; /* ظاهر جزء من التأثير دائمًا */
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
   rgba(255, 255, 255, 0.323) 0%,
    rgba(255, 255, 255, 0.059) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 3;
  transition: none;
  opacity: 1;
}



.card.gold-card {
  border-radius: 12px;  /* منح الكارت الزوايا المدورة */
  overflow: hidden;  /* تأكد من أن الصورة لا تخرج عن الكارت */
}

.gold-card img {
  transform: scale(0.6);
  transition: transform 0.3s ease;
  display: block;
  margin: auto;
}

/* عنصر الضباب */
.fog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 1;
  background: url("img/smoke.png"); /* صورة ضباب شفافة */
  /*background-repeat: repeat;*/
 /* animation: moveFog 60s linear infinite;*/
  opacity: 0.2;
  filter: blur(4px);
}

.fog-overlay {
  inset: 0;
  /*background-size: cover;*/
  /*opacity: 0.3; /* شفافية الدخان */
  animation: fogMove 240s linear infinite;
}

@keyframes fogMove {
  0% {
    background-position: 1000px 1000px; /* تحرك أفقي - غير الرقم حسب قوة التحريك */

  }
  100% {
    background-position: -1000px -1000px;

  }
}

#intro-logo {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  animation: fadeInOut 4s ease-in-out forwards;
  text-align: center;
}

#intro-logo img {
  max-width: 400px;
  width: 80%;
  animation: pulse 2s infinite;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; display: none; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

#setup-screen {
  display: none;
}

#logo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85); /* السواد المطلوب */
  z-index: 9999; /* تحت اللوجو */
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

#logo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85); /* خلفية سوداء شفافة */
  z-index: 99998; /* أقل من اللوجو، لكن أعلى من كل شيء آخر */
  opacity: 1;
  transition: opacity 1s ease-in-out;
  pointer-events: none; /* ما تمنع التفاعل */
}

#game-container {
  display: none;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#game-container {
  display: block;
  height: auto;
  min-height: 100vh;
  overflow: visible;
}




#game-container.show {
  display: block;
  opacity: 1;
  transform: scale(1);
}

.points-input::-webkit-inner-spin-button,
.points-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.points-input {
  -moz-appearance: textfield; /* Firefox */
  appearance: none;
}

.points-input {
  -moz-appearance: textfield; /* Firefox */
  -webkit-appearance: none;  /* Chrome */
  appearance: none;
  background-color: rgba(255,255,255,0.1);
  border: 2px solid #9b59b6;
  color: white;
  font-size: 24px;
  text-align: center;
  border-radius: 8px;
  padding: 8px;
}


.sound-toggle {
  position: absolute;
  bottom: 20px;
  left: 20px;  /* 👈 يحطها في أقصى اليسار */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.sound-toggle img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease;
}

.sound-toggle img:hover {
  transform: scale(1.2);
}


.music-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  /* ✅ الفريم */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
  backdrop-filter: blur(4px); /* لمعان بسيط */
}

#music-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#music-icon:hover {
  transform: scale(1.2);
}

#toggle-fog-icon:hover{
  transform: scale(1.2);
}

/* ✅ تغليفهم مع بعض كحاوية واحدة */
.audio-controls-container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  z-index: 9999;
  scale: 85%;
}

/* ✅ شكل أيقونة الكارت */
#sound-toggle img {
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#sound-toggle img:hover {
  transform: scale(1.2);
}

/* ✅ شكل الموسيقى تحت أيقونة الكارت */
#music-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

#music-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#music-icon:hover {
  transform: scale(1.2);
}

#music-volume {
  width: 100px;
  accent-color: #9b59b6; /* أو أي لون تحبه */
  cursor: pointer;
}





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



#audio-toggle-panel {
  position: fixed;
  bottom: 20px;
  left: 30px;
  z-index: 9999;
}



#audio-toggle-button {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(142, 68, 173, 0.3)); /* بنفسجي شفاف */
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(3px); /* ✨ يعطي تأثير زجاجي */
}


#audio-toggle-button:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.9), rgba(142, 68, 173, 0.9));
}


#audio-popup {
  position: absolute;
  left: 55px;
  bottom: 55px;
  background: rgba(30, 30, 60, 0.1); /* لون غامق شفاف */
  backdrop-filter: blur(10px);       /* ✨ بلور */
  -webkit-backdrop-filter: blur(10px); /* دعم سفاري */
  padding: 15px;
  border-radius: 10px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  z-index: 10000;
  min-width: 120px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


#audio-popup.show {
  display: flex;
}




#audio-popup {
  display: none;
}

#toggle-fog-btn{
  padding: 0px,0px;
}


#fog-toggle img {
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#fog-toggle img:hover {
  transform: scale(1.1);
}


.fog-overlay {
  transition: opacity 0.5s ease;
}

.fog-overlay.hidden {
  opacity: 0;
  pointer-events: none; /* عشان ما يمنع الكلكات */
}

.fog-overlay.visible {
  opacity: 0.15; /* أو الرقم اللي يناسبك */
}


.fog-overlay.hidden {
  opacity: 0; /* يخفيه تدريجياً */
}


/* ✨ انيميشن فتح */
@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ✨ انيميشن قفل */
@keyframes slideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

#audio-popup {
  transition: all 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

/* لما يفتح */
#audio-popup.show {
  animation: slideIn 0.5s forwards;
  opacity: 1;
  pointer-events: auto;
}

/* لما يقفل */
#audio-popup.hide {
  animation: slideOut 0.5s forwards;
  opacity: 0;
  pointer-events: none;
}


/* ✨ انيميشن فتح الخلفية */
@keyframes modalBackgroundFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ✨ انيميشن قفل الخلفية */
@keyframes modalBackgroundFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* المودال كخلفية */
.edit-teams-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
}

/* ✨ لما تفتح */
.edit-teams-modal.show {
  display: flex;
  animation: modalBackgroundFadeIn 0.4s forwards;
}

/* ✨ لما تقفل */
.edit-teams-modal.hide {
  animation: modalBackgroundFadeOut 0.4s forwards;
}

/* النافذة الداخلية */
.edit-teams-container {
  background: rgba(60, 40, 60, 0.95);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  width: 80%;
  max-width: 600px;
  opacity: 0;
  animation: none; /* نتحكم فيها يدوي */
}

/* نافذة تظهر مع فتح */
.edit-teams-modal.show .edit-teams-container {
  animation: modalFadeIn 0.4s forwards;
}

/* نافذة تختفي مع قفل */
.edit-teams-modal.hide .edit-teams-container {
  animation: modalFadeOut 0.4s forwards;
}

/* ✨ انيميشن فتح النافذة */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ✨ انيميشن قفل النافذة */
@keyframes modalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


/* ✨ انيميشن فتح شاشة الإعداد */
@keyframes setupFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ✨ انيميشن قفل شاشة الإعداد */
@keyframes setupFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* شاشة الإعداد */
#setup-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.8); /* الخلفية ثابتة */
  display: none;
  justify-content: center;
 /* align-items: center;*/
  z-index: 1000;
  opacity: 0;
}

/* فتح شاشة الإعداد */
#setup-screen.show {
  display: flex;
  animation: setupFadeIn 0.4s forwards;
}

/* قفل شاشة الإعداد */
#setup-screen.hide {
  animation: setupFadeOut 0.4s forwards;
}


/* في ملف style.css */

/* بالبداية يكون مخفي وشفاف */
.game-container {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* لما نضيف له كلاس show يبدأ يظهر */
.game-container.show {
  opacity: 1;
  transform: scale(1);
}


@keyframes cardOpenAnimation {
  0% {
    transform: scale(0.0);
    opacity: 0;
  }
  60% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-card {
  animation: cardOpenAnimation 0.6s ease;
}



.fixed-points-display {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
  display: none; /* مخفية افتراضيًا */
  justify-content: space-between;
  align-items: center;
  z-index: 3000;
  pointer-events: none;
}

.fixed-points-display.show {
  display: flex;
}



.red-side, .blue-side {
  font-size: 24px;
  font-weight: bold;
  color: white;
  background: rgba(155, 89, 182, 0.7);
  padding: 10px 20px;
  border-radius: 10px;
}

.red-side {
  justify-content: flex-end;
}

.blue-side {
  justify-content: flex-start;
}


#toggle-points-btn {
  font-size: 30px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 50%;
  backdrop-filter: blur(5px);
  transition: transform 0.3s, background 0.3s;
}

#toggle-points-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}


.fixed-points-display {
  display: none;
}

.fixed-points-display.show-fixed-points {
  display: flex;
}



#setup-screen::-webkit-scrollbar {
  width: 10px;
}

#setup-screen::-webkit-scrollbar-track {
  background: #ffffff5f; /* خلفية داكنة */
}

#setup-screen::-webkit-scrollbar-thumb {
  background: linear-gradient(#6a0dad, #a166cc); /* تدرج لوني */
  border-radius: 5px;
}

#setup-screen::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#a166cc, #6a0dad); /* عكس التدرج عند الهوفر */
}




/* شكل السكرول الأساسي للصفحة كلها */
html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); /* أسود شفاف خفيف جداً */

}

html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: linear-gradient(#6a0dad, #a166cc); /* تدرج لوني جميل */
  border-radius: 5px;
  
}

html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#a166cc, #6a0dad); /* انعكاس التدرج لما تمرر عليه */
}