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

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* منع التمرير الأفقي */
}

body {
  font-family: 'Cairo', sans-serif;
  background-color: white;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow-y: auto; /* تمكين التمرير العمودي */
}

#preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white; /* لون الخلفية يمكن تعديله حسب الرغبة */
  z-index: 9999; /* تأكد من أن البريلودر أعلى العناصر الأخرى */
}

#preloader img {
  width: 100; /* حجم الصورة */
  height: 100; /* يحافظ على النسبة */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: gold;
}

/* تنسيق الرسائل */
.message {
  margin-top: 20px;
  font-size: 1rem;
  color: #333;
}

/* تنسيق النوافذ المنبثقة */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  display: none;
  flex-direction: column;
  align-items: center;
}

.closePopupBtn {
  background-color: #f44336;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.closePopupBtn:hover {
  background-color: #c62828;
}



/* تنسيق العنوان */
.headerTitle {
  font-size: 4vw; /* حجم الخط بناءً على عرض الشاشة */
  margin-bottom: 20px;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.4), 3px 3px 6px rgba(0, 0, 0, 0.3);
}
/* التنسيق الأساسي */
.inputContainer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.inputField {
  width: 10vw;
  height: 10vw;
  font-size: 4vw;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  background-color: rgba(158, 187, 159, 0.685);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 0 5px;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-content: center;
  align-content: center;
  width: 80vw;
  margin: auto;
  margin-bottom: 20px;
}

.item {
  width: 8vw;
  height: 8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(22, 105, 64, 0.476);
  font-size: 3vw;
  color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.item:hover {
  background-color: rgba(139, 174, 133, 0.4);
}

/* Media Queries لتحسين التوافق */
@media (max-width: 768px) {
  .inputField {
    width: 20vw;
    height: 20vw;
    font-size: 5vw;
  }

  .keypad {
    width: 90vw;
  }

  .item {
    width: 15vw;
    height: 15vw;
    font-size: 4vw;
  }
}

@media (min-width: 1200px) {
  .inputField {
    width: 8vw;
    height: 8vw;
    font-size: 3vw;
  }

  .keypad {
    width: 70vw;
  }

  .item {
    width: 6vw;
    height: 6vw;
    font-size: 2vw;
  }
}



/* تنسيق النافذة المنبثقة */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 90vw; /* عرض بناءً على عرض الشاشة */
    height: 90vh; /* ارتفاع بناءً على ارتفاع الشاشة */
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow-y: auto; /* السماح بالتمرير داخل النافذة المنبثقة */
}

.popupContent {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.popupImage {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.closePopupBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

.closePopupBtn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* تنسيق الشعار */
.logoContainer {
    text-align: center;
    margin-bottom: 20px;
}

.logo {
  max-width: 25vw; /* عرض بناءً على عرض الشاشة */
  height: auto;
}

/* تنسيق الخلفية */
body {
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow-x: hidden; /* منع التمرير الأفقي */
}

/* تنسيق زر التبديل */
body, input[type=checkbox]:before {
  background-repeat: repeat;
  background-size: 0.75em 0.375em;
}

body, input {
  font: 40px/1.5 sans-serif;
}

input[type=checkbox] {
  --off: #c7cad1;
  --mid: #c4d682b7;
  --on: #c4d682b7;
  position: relative;
  --transDur: 0.5s;
  --timing: cubic-bezier(0.6, 0, 0.4, 1);
  animation: bgOff var(--transDur) var(--timing);
  background-color: var(--off);
  border-radius: 0.67em / 0.5em;
  box-shadow: 0 0.05em 0.1em #00000007 inset, 0 -0.25em 0.25em #0001 inset, 0 -0.5em 0 #0001 inset, 0 0.1em 0.1em #0001;
  cursor: pointer;
  padding: 15px 30px;
  width: 2.25em;
  height: 1.5em;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* توسيط الزر في المنتصف */
  display: block;
  margin: 0 auto;
}

/* شكل المؤشر قبل التبديل */
input[type=checkbox]:before {
  animation: handleOff var(--transDur) var(--timing);
  background-attachment: fixed;
  background-position: 50% calc(50% - 0.1875em);
  border-radius: 0.5em / 0.375em;
  box-shadow: 0 0.175em 0.175em 0 #0001 inset, 0 0.375em 0 #0002 inset, 0 0.375em 0 var(--off) inset, 0 0.475em 0.1em #0001 inset;
  content: "";
  display: block;
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 1em;
  height: 0.75em;
}

/* حالة التبديل عند التشغيل */
input[type=checkbox]:checked {
  animation: bgOn var(--transDur) var(--timing) forwards;
}

/* شكل المؤشر عند التشغيل */
input[type=checkbox]:checked:before {
  animation: handleOn var(--transDur) var(--timing) forwards;
}

/* إزالة التركيز من الزر */
input[type=checkbox]:focus {
  outline: none;
}

/* حالة الزر النظيف (الذي لم يتم تغييره) */
input[type=checkbox].pristine, input[type=checkbox].pristine:before {
  animation: none;
}

/* دعم وضعية الوضع الداكن */
@media (prefers-color-scheme: dark) {
  body, input[type=checkbox]:before {
      background-image: linear-gradient(90deg, #3a3d46 2px, #3a3d4600 2px), linear-gradient(#3a3d46 2px, #2e3138 2px);
  }

  input[type=checkbox] {
      --off: #5c6270;
      --mid: #3d5fb6;
  }
}

/* الرسوم المتحركة */
@keyframes bgOff {
  from {
      background-color: var(--on);
  }
  50% {
      background-color: var(--mid);
  }
  to {
      background-color: var(--off);
  }
}

@keyframes bgOn {
  from {
      background-color: var(--off);
  }
  50% {
      background-color: var(--mid);
  }
  to {
      background-color: var(--on);
  }
}

@keyframes handleOff {
  from {
      box-shadow: 0 0.175em 0.175em 0 #0001 inset, 0 0.375em 0 #0002 inset, 0 0.375em 0 var(--on) inset, 0 0.475em 0.1em #0001 inset;
      left: 1.125em;
      width: 1em;
  }
  50% {
      box-shadow: 0 0.175em 0.175em 0 #0001 inset, 0 0.375em 0 #0002 inset, 0 0.375em 0 var(--mid) inset, 0 0.475em 0.1em #0001 inset;
      left: 0.125em;
      width: 2em;
  }
  to {
      box-shadow: 0 0.175em 0.175em 0 #0001 inset, 0 0.375em 0 #0002 inset, 0 0.375em 0 var(--off) inset, 0 0.475em 0.1em #0001 inset;
      left: 0.125em;
      width: 1em;
  }
}

@keyframes handleOn {
  from {
      box-shadow: 0 0.175em 0.175em 0 #0001 inset, 0 0.375em 0 #0002 inset, 0 0.375em 0 var(--off) inset, 0 0.475em 0.1em #0001 inset;
      left: 0.125em;
      width: 1em;
  }
  50% {
      box-shadow: 0 0.175em 0.175em 0 #0001 inset, 0 0.375em 0 #0002 inset, 0 0.375em 0 var(--mid) inset, 0 0.475em 0.1em #0001 inset;
      left: 0.125em;
      width: 2em;
  }
  to {
      box-shadow: 0 0.175em 0.175em 0 #0001 inset, 0 0.375em 0 #0002 inset, 0 0.375em 0 var(--on) inset, 0 0.475em 0.1em #0001 inset;
      left: 1.125em;
      width: 1em;
  }
}


/*   cube.................................... */
/* Container for the 3D cube */
.scene {
  width: 300px;
  height: 300px;
  perspective: 800px;
  margin: 50px auto;
}

/* 3D cube setup */
.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotateCube 8s infinite linear;
  transition: transform 1s ease;
}

/* Transparent faces for the cube with gray edges */
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1); /* Transparent faces */
  border: 2px solid gray; /* Gray borders to highlight edges */
  transition: transform 1s ease, box-shadow 0.5s ease;
  box-shadow: inset 0 0 20px rgba(187, 169, 66, 0.7); /* Royal gold shadow inside */
  display: flex;
  align-items: center;
  justify-content: center; /* Center items inside each face */
}




/* Effect on cube click */
.cube.open .face {
  box-shadow: inset 0 0 30px rgba(187, 170, 75, 0.685); /* Stronger gold shadow when opened */
}


/* Cube faces positions */
.front  { transform: translateZ(150px); }
.back   { transform: rotateY(180deg) translateZ(150px); }
.left   { transform: rotateY(-90deg) translateZ(150px); }
.right  { transform: rotateY(90deg) translateZ(150px); }
.top    { transform: rotateX(90deg) translateZ(150px); }
.bottom { transform: rotateX(-90deg) translateZ(150px); }

/* Prize inside the cube */
.prize {
  display: flex;
  flex-wrap: wrap; /* Allow images to wrap within the cube */
  align-items: center;
  justify-content: center;
  width: 100%; /* Full size of the cube face */
  height: 100%; /* Full size of the cube face */
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0); /* Ensure prizes are centered properly */
  opacity: 1;
}

.prize img {
  width: 50%; /* Adjust size as needed */
  height: auto;
  border-radius: 3px;
  object-fit: contain; /* Ensure images fit within their container */
  margin: 5px; /* Add some spacing between images */
}




/* Cube rotation animation */
@keyframes rotateCube {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  25% { transform: rotateX(0deg) rotateY(90deg); }
  50% { transform: rotateX(0deg) rotateY(180deg); }
  75% { transform: rotateX(0deg) rotateY(270deg); }
  100% { transform: rotateX(0deg) rotateY(360deg); }
}

/* Effect on cube click */
.cube.open .face.front { transform: translateZ(300px); }
.cube.open .face.back { transform: translateZ(-300px) rotateY(180deg); }
.cube.open .face.left { transform: translateX(-300px) rotateY(-90deg); }
.cube.open .face.right { transform: translateX(300px) rotateY(90deg); }
.cube.open .face.top { transform: translateY(-300px) rotateX(90deg); }
.cube.open .face.bottom { transform: translateY(300px) rotateX(-90deg); }

/* Prize appears larger and more opaque when the cube is opened */
/* Prize appears larger and more centered when the cube is opened */
.cube.open .prize {
  transform: translate(-50%, -50%) scale(1.5); /* Increase size to 1.5 times */
  opacity: 1; /* Fully opaque */
  width: 100%; /* Full width of the face */
  height: 100%; /* Full height of the face */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  position: absolute; /* Ensure absolute positioning */
  margin: 0; /* Reset margin */
}
 

@keyframes blink-eyes {
  0%,35% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  36%,39% {
    opacity: 0;
    transform: translate(-70%, 0%);
  }
  40% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  50%,65% {
    transform: translate(-140%, 0%);
  }
  66% {
    transform: translate(-70%, 0%);
  }
}
@keyframes expand-body {
  0%,40% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  45%,55% {
    transform: scale(1.1, 1.1) translate(60%, -28%);
  }
  60% {
    transform: scale(0.89, 0.89) translate(60%, -25%);
  }
  65% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  70% {
    transform: scale(0.95, 0.95) translate(60%, -25%);
  }
  75% {
    transform: scale(1, 1) translate(60%, -25%);
  }
}
@keyframes uff {
  0%,40% {
    width: 0px;
    height: 0px;
  }
  50%,54% {
    width: 15px;
    height: 15px;
    left: 30%;
  }
  59% {
    width: 5px;
    height: 5px;
    left: 20%;
  }
  62% {
    width: 2px;
    height: 2px;
    left: 20%;
  }
  67% {
    width: 0px;
    height: 0px;
    left: 30%;
  }
}
@keyframes change-background {
  0%,59%,98%,100% {
    background: #FFF;
  }
  61%,97% {
    background: #ffffffcc;
  }
}
@keyframes move-left {
  0%,59%,100% {
    width: 0px;
    left: 40%;
  }
  60% {
    width: 30px;
    left: 30%;
  }
  68% {
    width: 0px;
    left: 20%;
  }
}
@keyframes move-top {
  0%,64%,100% {
    width: 0px;
    height: 0px;
    top: 0%;
  }
  65% {
    width: 10px;
    height: 10px;
    top: 40%;
    left: 40%;
  }
  80% {
    width: 0px;
    height: 0px;
    top: 20%;
  }
}
@keyframes shake-left {
  0%,40% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  50%,54% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  59% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  62% {
    left: 18%;
    transform: translate(60%, -15%);
  }
  65% {
    left: 21%;
    transform: translate(60%, -15%);
  }
  67% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  75% {
    left: 20%;
    transform: scale(1.15, 0.85) translate(60%, -15%);
    background: #fff;
    border-color: #673C63;
  }
  91% {
    left: 20%;
    transform: scale(1.18, 0.82) translate(60%, -10%);
    background: #F44336;
    border-color: #F44336;
    box-shadow: -2px 0px 0px #F44336 inset;
  }
  92% {
    left: 20%;
    transform: scale(0.85, 1.15) translate(60%, -15%);
  }
  95% {
    left: 20%;
    transform: scale(1.05, 0.95) translate(60%, -15%);
  }
  97% {
    left: 20%;
    transform: scale(1, 1) translate(60%, -15%);
  }
}
@keyframes stick-animation {
  0%,40% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  50%,54% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  59% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  62% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-15deg) translate(-50%, -100%);
  }
  65% {
    left: 50%;
    top: 0%;
    transform: rotateZ(15deg) translate(-50%, -100%);
  }
  70% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-5deg) translate(-50%, -100%);
  }
  72% {
    left: 50%;
    top: 0%;
    transform: rotateZ(5deg) translate(-50%, -100%);
  }
  74%,84% {
    left: 50%;
    top: 0%;
    transform: rotateZ(0deg) translate(-50%, -100%);
  }
  85% {
    transform: rotateZ(180deg) translate(0%, 120%);
  }
  92% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
}
@keyframes expand-light {
  10%,29%,59%,89% {
    transform: translate(-25%, -50%) scale(0, 0);
    border: 2px solid rgba(255, 255, 255, 0);
  }
  90%,20%,50% {
    transform: translate(-25%, -50%) scale(1, 1);
  }
  95%,96%,26%,27%,56%,57% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid rgba(255, 255, 255, 0.5);
  }
  0%,28%,58%,100% {
    transform: translate(-25%, -50%) scale(2.5, 2.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
  }
}
@keyframes dance-fire {
  59%,89% {
    left: 40%;
    width: 0px;
    height: 0px;
  }
  90%,0%,7%,15%,23%,31%,39%,47%,55% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background: #FFC107;
  }
  94%,3%,11%,19%,27%,35%,43%,51%,58% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background: #FF9800;
  }
}
@keyframes changeto-lower {
  0%,70%,90% {
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-90%, 0%);
  }
  71%,89% {
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(-45deg) translate(-50%, -65%);
    -webkit-transform: rotate(-45deg) translate(-50%, -65%);
  }
}
@keyframes changeto-greater {
  0%,70%,90% {
    top: 50%;
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-80%, 0%);
  }
  71%,89% {
    top: 30%;
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(135deg) translate(-80%, 20%);
    -webkit-transform: rotate(135deg) translate(-80%, 20%);
  }


  /*cupe................................................................*/

  
}


@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }

  .popup {
    max-width: 90%;
    padding: 1rem;
  }

  .popup h2 {
    font-size: 1.25rem;
  }

  .popup p {
    font-size: 0.875rem;
  }

  button {
    padding: 0.5rem 1rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem;
  }

  .popup {
    max-width: 600px;
  }

  .popup h2 {
    font-size: 2rem;
  }

  .popup p {
    font-size: 1.25rem;
  }

  button {
    padding: 1rem 2rem;
  }
}