:root {
  --main-color: #6a0dad;
  --main-gradient: linear-gradient(135deg, #6a0dad, #a166cc);
  --bg-color: #f5f3f9;
  --card-bg: #ffffff;
  --text-color: #333;
  --border-radius: 16px;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

body {
  font-family: 'Lalezar', 'Cairo', sans-serif;
  direction: rtl;
  text-align: center;
  background: url('https://i.postimg.cc/DzsjJhRZ/632.png') no-repeat center center fixed;
  background-size: cover;
    color: var(--text-color);
  margin: 0;
  padding: 40px 20px;
  
}


#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);

  /* المهمين */
  min-height: 100vh; /* يملأ الشاشة بالكامل */
  height: auto;       /* لكن يسمح له يطول لو فيه محتوى أكتر */
  display: flex;
  flex-direction: column;
  justify-content: start;
}


h2 {
  color: white;
  font-family: 'Amiri', serif; /* أضف هذا السطر هنا */
  font-size: 16px; /* تصغير الحجم شوي */
}

textarea {
  width: min(90vw, 800px); /* يأخذ 90% من عرض الشاشة، أو 700px كحد أقصى */
  height: min(60vh, 400px); /* يأخذ 60% من ارتفاع الشاشة، أو 400px كحد أقصى */
  border: 3px solid #9f60b8;
  border-radius: var(--border-radius);
  padding: 15px;
  font-size: 18px;
  resize: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255,0.2);
  margin: 0 auto; /* يوسّطه في الشاشة */
  display: block;

}



button {
  background: var(--main-gradient);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  padding: 12px 30px;
  font-family: 'Amiri', serif;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  /*margin-top: 15px;*/
  transition: all 0.3s ease;
  outline: none;
  box-shadow: 0 4px 0 #4b0b8a; /* ظل مبدئي صغير */
  position: relative;
  top: 0;
}

/* عند المرور بالماوس */
button:hover {
  background: #5a0ca8;
  transform: translateY(-4px); /* يطلع لفوق */
  box-shadow: 0 8px 16px rgba(106, 13, 173, 0.4); /* ظل 3D */
}

/* منع السواد عند الضغط */
button:active,
button:focus {
  background: #5a0ca8;
  outline: none;
  box-shadow: 0 4px 8px rgba(106, 13, 173, 0.3); /* ظل أخف عند الضغط */
  transform: translateY(0); /* يرجع مكانه عند الضغط */
}


#error-msg {
  color: red;
  margin-top: 10px;
}

#remaining-count {
  margin-top: 20px;
  font-family: 'Amiri', serif; /* أضف هذا السطر هنا */
  font-size: 16px; /* تصغير الحجم شوي */
  font-weight: bold;
  color: white;
}

#flags-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* استخدم auto-fill بدلاً من auto-fit */
  gap: 20px;  /* المسافة بين الأعمدة */
  padding: 20px;
  justify-content: space-between; /* توزيع الأعلام مع مسافة ثابتة بينهما */
  direction: rtl;  /* الترتيب من اليمين لليسار */
}




.flag-card {
  width: 100px;
  text-align: center;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: transform 0.3s ease;

}



.flag-card:hover {
  transform: scale(1.05);
}

.flag-card img {
  width: 100px;
  height: 100px;
  object-fit: cover; /* يملأ الدائرة بدون تشويه */
  border-radius: 50%;
  border: 3px solid #a055e9;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: block;
  margin: 0 auto;

}



.flag-card div {
  margin-top: 8px;
  font-weight: bold;
  font-family: 'Amiri', serif; /* أضف هذا السطر هنا */
  font-size: 20px; /* تصغير الحجم شوي */
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}


.flag-card.hidden {
  visibility: hidden;
}


/* نافذة البوب أب العامة */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* محتوى نافذة الإقصاء والفائز */
.popup-content {
  background-color: rgba(160, 85, 233,0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(4px);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  border: 4px solid #a055e9;
  max-width: 300px;
  width: 90%;
  animation: fadeIn 0.3s ease-in-out;
}

.popup-content img {
  width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 12px;
 /* border: 2px solid #a055e9;*/
}

.popup-content p {
  font-size: 18px;
  color: #444;
  margin: 0;
}

.popup-content h2 {
color: white;
  font-size: 22px;
  margin-bottom: 10px;
}

/* تخصيص نافذة الفائز */


/* أنيميشن لظهور النافذة مع تأثير احتفالي */
@keyframes celebration {
  0% { transform: scale(1); }
  25% { transform: scale(1.05); }
  50% { transform: scale(1); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}





/* أنيميشن لتأثير النص */
@keyframes textPop {
  0% { transform: scale(1); color: white; }
  50% { transform: scale(1.1); color: #ffdc00; }
  100% { transform: scale(1); color: white; }
}

#winner-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.15);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  flex-direction: column;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: center;
  
}


#winner-popup img {
  width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 12px;
}






.player-name-tag {
  font-size: 22px;
  font-weight: bold;
  padding: 6px 14px;
  color: white;
  background-color: rgba(0, 0, 0, 0.8); /* خلفية شبه شفافة */
  border: 2px solid #ffd700; /* إطار ذهبي */
  border-radius: 12px;
  margin-top: 10px;
  display: inline-block;
  box-shadow: 0 0 10px #ffd700aa; /* توهج خفيف */
  text-shadow: 1px 1px 3px black;
  font-family: 'Cairo', sans-serif;
  user-select: none;
  transition: transform 0.2s ease;
}

.player-name-tag:hover {
  transform: scale(1.05);
}

#game-logo {
 /* width: 200px;*/
  max-width: 50%;
  margin-bottom: 40px;
  margin-top: 24px;

  border-radius: 20px;
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);*/
}

#players-input {
  height: 60vh; /* اجعل المربع يأخذ أغلب الشاشة */
  font-size: 18px;
  margin-bottom: 24px;
  color: white;
}

#players-input::placeholder{
  color: white;
  font-size: 18px;
}


#game-area {
  width: 90%;
  max-width: 1000px;
  margin: 40px auto; /* 40px من فوق وتحت، وتوسيط أفقي */
 /* height: calc(100vh - 80px); /* طول الشاشة ناقص المسافتين من فوق وتحت */
  /*background: #f9f9f9; /* مثال لتوضيح */
  border-radius: 12px;
  /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
  padding: 20px;
  overflow-y: auto; /* لو المحتوى أكبر من الطول */
}

#elimination-popup img {
  /*width: 280px;*/
  height: auto;
  border-radius: 0;
  border: none;
}

/* الخلفية السوداء الشفافة اللي تغطي كل الشاشة */
#elimination-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3); /* 15% فقط */
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999; /* أعلى رقم ممكن علشان تكون فوق الكل */
  flex-direction: column;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: center;
}


/* اسم اللاعب */
#popup-player {
  font-family: 'Amiri', sans-serif; /* مؤقتًا لحين استخدام خط مشابه */
  font-size: 3rem;
  color: white;
  padding: 10px;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    0 0 10px #ffe600;
  font-weight: bold;
}






#popup-name-wrapper {
  position: relative;
  width: 100%;
  height: 100px; /* زودنا الارتفاع */
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}




.textNameStyle,
.textNameStyle2,
.textNameStyle3 {
  position: absolute;
  font-family: 'Lalezar', cursive;
  font-size: clamp(22px, 4vw, 42px); /* تصغير الحجم شوي */
padding-bottom: 60px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  line-height: normal;
}

.textNameStyle {
  color: black;
  -webkit-text-stroke: 14px #ffe85d;
  pointer-events: none;
  z-index: 1;
}

.textNameStyle2 {
  color: black;
  -webkit-text-stroke: 8px black;
  pointer-events: none;
  z-index: 2;
}

.textNameStyle3 {
  color: white;
  -webkit-text-stroke: 0 transparent;
  transition: transform 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
}

.textNameStyle3:hover {
  transform: scale(1.07);
}


#elimination-box {
  position: relative; /* مهم علشان عناصره المطلقة تتوسّط جوه */
  background: rgba(255, 255, 255, 0.2);
  padding: 30px 20px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; /* يمنع أي عنصر يطلع خارج المربع */
}


@font-face {
  font-family: 'myFirstFont';
  src: url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap'); /* غيّر المسار حسب الملف */
}

#add-player-btn {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 50px;
}

#add-player-popup input {
  padding: 10px;
  color: white;
  font-size: 16px;
  width: 90%;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: rgba(221, 57, 202, 0);
}

#add-player-popup input::placeholder{color: rgba(255, 255, 255, 0.622);}

/* شكل الخانة الفاضية */
.flag-card.hidden-slot {
  visibility: hidden;
}

.winner-style {
  background-image: url('https://cdn.pixabay.com/animation/2024/12/15/18/36/18-36-43-625_512.gif'); /* صورة الخلفية */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 4px solid gold; /* لمسة ذهبية للفوز */
  box-shadow: 0 0 30px gold;
}


#winner-box {
  position: relative;
  background: url('https://cdn.pixabay.com/animation/2024/12/15/18/36/18-36-43-625_512.gif') center center / cover no-repeat;
  padding: 40px 20px;
  border-radius: 24px;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
  border: 3px solid gold;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  max-width: 400px;
  width: 90%;
  height: 60%;
  margin-bottom: 24px;
}

#winner-title {
  font-family: 'Lalezar', cursive;
  font-size: 36px;
  color: gold;
  text-shadow: 2px 2px 8px black;
  margin-bottom: 20px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); color: gold; }
  50% { transform: scale(1.1); color: #fff176; }
}

#winner-popup #restart-btn {
  margin-top: 30px;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 28px;
  background: linear-gradient(135deg, #ff9800, #ffc107);
  border: none;
  border-radius: 14px;
  color: white;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  animation: fadeIn 0.5s ease-in-out;
}

#winner-popup #restart-btn:hover {
  background: #ffb300;
  transform: scale(1.05);
}

#confetti-canvas {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100000;
}



#restore-player-btn {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 50px;
}

#restore-player-popup select {
  border-radius: 8px;
  border: 1px solid #ccc;
background-color: #5e2a84; /* بنفسجي */
color: white;
}


.buttons-row {
  display: flex;
  justify-content: center;
  gap: 32px; /* ممكن تزود المسافة */
  flex-wrap: wrap;
  margin-top: 20px;
}

.add-player-buttons{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.restore-player-buttons{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

#music-toggle {
  position: fixed;
  top: 24px;
  left: 60px;
  z-index: 9999;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
 /* font-size: 24px;*/
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
  user-select: none;
}


#music-toggle:hover {
  background: rgba(255, 255, 255, 0.4);
}

#music-toggle {
  transition: transform 0.2s ease;
  
}

#music-toggle:active {
  transform: scale(1.2);
}

#volume-slider {
  width: 100px;
  accent-color: #a055e9; /* اللون البنفسجي */
  cursor: pointer;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  height: 6px;  /* تقشير الشريط ليكون أكثر سمكاً */
  transition: background-color 0.3s ease;
}


  /* تعديل تنسيق شريط الصوت وزر الموسيقى */
  #volume-container {
    position: fixed;
    top: 60px; /* زيادة المسافة بين زر الموسيقى وشريط الصوت */
    left: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #volume-slider:hover {
    background-color: rgba(255, 255, 255, 0.3); /* تأثير عند التمرير على الشريط */
  }

  #volume-label {
    font-size: 16px;
    color: white;
    margin-top: 10px;
  }

  /* أنيميشن الظهور من الأسفل */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeSlideUp 0.6s ease-out;
}


@keyframes zoomIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.name-zoom {
  animation: zoomIn 0.6s ease-out;
}