/* ✅ تحميل خط Winky Sans */
@font-face {
  font-family: 'Winky Sans';
  src: url('https://imad.click/fonts/winky-sans-medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ✅ إعداد عام */
body {
  margin: 0; /* إزالة الهوامش الخارجية للصفحة */
  background-color: #ffffff; /* لون خلفية الصفحة */
  color: #6799c8; /* اللون الأساسي للنص */
  font-family: 'Winky Sans', sans-serif; /* ✅ استخدام الخط الجديد */
}

/* ✅ تخطيط الصفحة */
main {
  display: flex; /* استخدام Flexbox لتقسيم الصفحة */
  flex-direction: row; /* الاتجاه أفقي (الأعمدة بجانب بعض) */
  justify-content: center; /* محاذاة المحتوى في المنتصف أفقيًا */
  align-items: flex-start; /* المحاذاة العمودية عند أعلى العناصر */
  padding: 20px; /* مسافة داخلية حول المحتوى */
  gap: 75px; /* فراغ بين الأعمدة */
}


/* ✅ قسم اللعبة الرئيسي */
.game-section {
  flex: 1; /* يأخذ المساحة المتبقية من العمودين */
  max-width: 900px; /* حد أقصى للعرض */
  display: flex;
  flex-direction: column;
  gap: 20px; /* فراغ بين iframe والمعلومات */
}

/* ✅ نافذة اللعبة */
iframe {
  border: none; /* بدون حدود */
  border-radius: 8px; /* زوايا ناعمة */
  background: #6799c8; /* خلفية سوداء للعبة */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* ظل أنيق */
}

/* ✅ الشريط التفاعلي أسفل اللعبة */
.info-bar {
  display: flex; /* ترتيب العناصر أفقياً */
  align-items: center; /* محاذاة عمودية وسطية */
  justify-content: space-between; /* توزيع العناصر بين الطرفين */
  background: rgb(255, 255, 255); /* لون خلفية الشريط */
  padding: 10px 25px; /* مسافة داخلية من الجوانب */
  border-radius: 8px; /* زوايا الشريط ناعمة */
  margin-top: 6px; /* فراغ بسيط من الأعلى */
}

/* ✅ جزء أيقونة واسم اللعبة */
.game-identity {
  display: flex;
  align-items: center;
  gap: 15px; /* فراغ بين الأيقونة والاسم */

  color: #0a78e0; /* اللون الأساسي للنص */
}


/* ✅ حاوية التصويتات لتقريب الأزرار داخلها من بعض */
.vote-group {
  display: flex;
  gap: 8px; /* مسافة بسيطة بين like/dislike فقط */
  margin-right: 15px;
}

/* ✅ نترك المسافات العامة في .interaction-container كما هي */
.interaction-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 25px 75px; /* مسافة واضحة بين views / votes / fullscreen */
  flex-wrap: nowrap;
  margin-left: auto;
}



/* ✅ حاوية كل زر تصويت (like/dislike) */
.vote-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #528ec6;
  gap: 4px; /* فراغ بين الأيقونة والرقم */
}

.vote-box img {
  width: 20px;
  height: 20px;
  cursor: pointer; /* تظهر يد عند التحويم */
}

.vote-box img:hover {
  transform: scale(1.1); /* تكبير الصورة قليلًا عند التحويم */
}


/* ✅ زر ملء الشاشة */
.fullscreen-box img {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.fullscreen-box img:hover {
  transform: scale(1.1); /* تكبير الصورة قليلًا عند التحويم */
}

/* ✅ تصميم الأزرار داخل الشريط (في حال وجودها) */
.info-bar button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 10px;
  transition: transform 0.2s;
}

.info-bar button:hover {
  transform: scale(1.2);
}

/* ✅ تنسيق النصوص داخل الشريط */
.info-bar span {
  font-weight: bold;
  font-size: 14px;
}

/* ✅ حجم الأيقونات العامة (like/dislike/fullscreen) */
.info-bar img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

/* ✅ وصف اللعبة */
article {
  background: rgb(223, 249, 255); /* خلفية ناعمة */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);

  margin-top: -10px;
}

/* ✅ عدد المشاهدات - تصميم بجانب الأيقونة */
.views-box {
  display: flex;
  align-items: center;
  gap: 4px; /* فراغ بين الأيقونة والرقم */
  font-size: 14px;
  font-weight: bold;
  color: #528ec6;
}

.views-box img {
  width: 30px;
  height: 30px;
}

/* ✅ عنوان ووصف المقال */
article h2,
article h3 {
  margin-top: 0px;
  color: #528ec6;
}

article p {
  line-height: 1.6; /* تحسين قابلية القراءة */
}

/*-----------------------*/


/* ✅ عندما نكون في وضع fullscreen */

/* ✅ أنيميشن ناعم عند الظهور */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ✅ الوضع العادي: iframe بارتفاع 500 */
#game-frame {
  width: 100%;
  height: 70vh;
  border: none;
}

/* ✅ الوضع fullscreen: تمدد اللعبة + الشريط */
:fullscreen #game-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #fff;
}

:fullscreen #game-frame {
  flex: 1;
  width: 100%;
  height: 85%;

  margin-top: 10px;
}

:fullscreen .info-bar {
  position: relative;
  z-index: 1000;
  background: white;
  border-radius: 0px; /* زوايا الشريط ناعمة */

  animation: slideUp 0.6s ease-in-out;
}


:fullscreen .interaction-container {
  justify-content: flex-end;
  margin-right: 25px;
  align-items: center; /* محاذاة عمودية وسطية */
}

/*----------Fix Bar------------*/

.vote-box,
.views-box,
.fullscreen-box {
  padding: 4px 10px; /* ✅ مسافة خفيفة حول كل زر لتقليل التلاصق */
}


/*-----------------------*/

/* ✅ الوضع الافتراضي (كمبيوتر): أسفل الشريط */
.add-to-home-banner {
  display: none;
  background: #ffffff;
  color: #2d75a1;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  margin-bottom: 12px;

  width: 100%; /* ✅ يأخذ عرض القسم فقط */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-to-home-banner.show {
  display: flex;
  animation: slideUp 0.4s ease-in-out;
}


.add-to-home-banner button {
  background-color: #75ed6f;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
}

.add-to-home-banner button:hover {
  transform: scale(1.075); /* تكبير الصورة قليلًا عند التحويم */
}


:fullscreen #game-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between; /* ✅ توزيع الثلاث طبقات */
}

:fullscreen .add-to-home-banner {
  display: flex !important;
  position: relative;
  z-index: 1000;
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 2px 5px rgba(3, 50, 83, 0.495);
}




/*-----------------------*/

/* ✅ استجابة للموبايل */
@media (max-width: 768px) {
  main {
    flex-direction: column;
    align-items: center;
  }


/* ✅ في الموبايل، جعل الحاوية تأخذ العرض كاملاً وتبدأ من اليسار */
.interaction-container {
  width: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0px;
  margin-right: 15px;
}

.vote-box,
.views-box,
.fullscreen-box {
  padding: 2px 6px; /* ✅ مسافة خفيفة حول كل زر لتقليل التلاصق */
}

.info-bar img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

.views-box {
 /* لإبعادها قليلاً عن العناصر الأخرى */
  margin-right: 15px 25px;
}

.views-box img {
  width: 20px;
  height: 20px;
}

/* ✅ جزء أيقونة واسم اللعبة */
.game-identity {
  display: flex;
  align-items: center;
  gap: 15px; /* فراغ بين الأيقونة والاسم */
}

.info-bar span {
  font-weight: normal;
  font-size: 10px;
}

/*-----Full Screen--------*/


:fullscreen #game-frame {
  flex: 1;
  width: 100%;
  height: 70%;

  margin: 50px auto;
}

:fullscreen .info-bar {
  border-radius: 0px; /* زوايا الشريط ناعمة */

  width: 100%;
  margin:15px 0 auto;
  margin-right: 25px;
}

/*----------- Install Like App-------*/


}


/* ✅ استجابة لأجهزة التابلت (حجم متوسط بين الهاتف والكمبيوتر) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* ✅ تصغير الأيقونات قليلاً عن الديسكتوب */
  .interaction-container img,
  .info-bar img,
  .vote-box img,
  .views-box img,
  .fullscreen-box img {
    width: 20px;
    height: 20px;
  }

  /* ✅ تقليل الهوامش قليلاً */
  .vote-box,
  .views-box,
  .fullscreen-box {
    padding: 2px 4px;
  }

  /* ✅ تحسين حجم النص في الأرقام */
  .vote-box div,
  .views-box div {
    font-size: 14px;
  }

  /* ✅ أيقونة واسم اللعبة */
  .game-identity img {
    width: 40px;
    height: 40px;
  }

  .game-identity span,
  #game-title-bar {
    font-size: 14px; /* ✅ تصغير حجم اسم اللعبة */
  }


  /*-----Full Screen--------*/

:fullscreen #game-frame {
  flex: 1;
  width: 100%;
  height: 70%;

  margin: 10px 0 auto;
}

:fullscreen .info-bar {
  border-radius: 0px; /* زوايا الشريط ناعمة */

  width: 95%;
  margin: 5px 0 auto;
}

}