/* google font */

          /* .dancing-script-<uniquifier> {
             font-family: "Dancing Script", cursive;
              font-optical-sizing: auto;
               font-weight: <weight>;
                font-style: normal;
        } */


.banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;

}
.banner .slider {
    position:absolute;
    width: 200px;
    height: 210px;
    top: 10%;
    left: calc(50% - 100px);
   transform-style: preserve-3d;   /*  תשמור על המימד השלישי (Z-axis), אל תשטח אותו. */
    transform: perspective(1000px);
    animation: autoRun 20s linear infinite;
}

@keyframes autoRun{
    from{
         transform: perspective(1000px) rotateX(-6deg) rotateY(0deg);
     }
     to {
         transform: perspective(1100px) rotateX(-6deg) rotateY(360deg);
     }
 }

.banner .slider .item {
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360/var(--quantity)) * 1deg))
        translateZ(500px);/* מגדיר את המרחק של הפריט מהמרכז של הקרוסלה */
                                   /*--position (variable) */ /* המיקום של האלמנט הנוכחי (1, 2, 3 וכו').*/
                                  /*--quantity (variable) */ /*כמה אלמנטים יש בקרוסלה - במקרה שלנו 10*/
                                 /*var(--position) - 1 */ /*מתחילים את הספירה מאפס מעלות */
                                /* 360/var(--quantity)*/ /*חישוב של כמה מעלות במקרה הזה 360 לחלק ל10 */
                               /*  1deg *//*מגדיר את היחידות במעלות */
                              /* translateZ *//*ציר ה"זד" יהיה תמיד 500 פקסלים מהמרכז */
                             /* :ככה נראה החישוב*/
                            /*((3 - 1) * (360 / 10)) * 1deg = (2 * 36) * 1deg = 72deg */
    opacity: 0.7 /* שקיפות */
    transition all 0.5s ease-in-out;    /* לגרום לאנימציה לעבוד חלק*/
}

.banner .slider .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
 /* אנימציה של הכיתוב בקרוסלה */
@keyframes slide {                      /* ההגדרה של תנועה על ציר איקס משמאל עד לנקודת האפס*/ 
    from {
        transform: translateX(-1200px);
    }
    to {
        transform: translateX(0);
    }
}

 .instructions {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);    
}


#text{
    animation-name: slide;                         /* שם האנימציה  */
    animation-duration: 15s;                      /* מגדיר את משך הזמן שיקח לאנימציה לסיים מחזור אחד */
    animation-timing-function: ease-linear;      /* מגדיר את התנועה של האנימציה כלינארית - במקרה הזה  */
    animation-delay: 1ms;                       /*  זמן ההשהיה לפני תחילת האנימציה */
    animation-iteration-count: 1;              /* מגדיר את ספר הפעמים שהאנימציה תחזור על עצמה  */
    animation-direction: normal;              /*  מגדיר את כיוון התנוע קדימה בלבד */
    animation-fill-mode: forwards;           /*   */
    color: aqua;/* צבע הכיתוב  */
    
}
     /* הגדרה כללית של כפתורי הפתיחה */
.buttons {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
   
    /* הגדרת עיצוב ותמונה של כל כפתור פתיחה */
}
.btnDinosaur {
    background-image: url('dinosaur2.jpg');
    image-resolution: from-image;
    background-size: cover;
    padding: 90px 90px;
    border: 3px solid #e02222;
    border-radius: 150px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #e9f148;
    box-shadow:3px 3px 6px rgba(0, 0, 0, 0.5); 
}
.btnLion {
    background-image: url('lion2.jpg');
    image-resolution: from-image;
    background-size: cover;
    padding: 90px 90px;
    border: 3px solid #e02222;
    border-radius: 150px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #e9f148;
    box-shadow:3px 3px 6px rgba(0, 0, 0, 0.5); 
}
.btnSnake {
    background-image: url('snake2.jpg');
    image-resolution: from-image;
    background-size: cover;
    padding: 90px 90px;
    border: 3px solid #e02222;
    border-radius: 150px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #e9f148;
    box-shadow:3px 3px 6px rgba(0, 0, 0, 0.5); 
}
.btnDragon {
    background-image: url('dragon2.jpg');
    image-resolution: from-image;
    background-size: cover;
    padding: 90px 90px;
    border: 3px solid #e02222;
    border-radius: 150px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #e9f148;
    box-shadow:3px 3px 6px rgba(0, 0, 0, 0.5); 
}
     /* עיצוב לוח המשחק  */
  body {
    font-family: 'Dancing Script', cursive;
    background-color: #f0f0f0;
    color: #333;
  }
  
  
  
  
  .memory-game {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
           /* הגדרת לוח המשחק */
  #game-board {
    width: auto;
    max-width: 640px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    perspective: 1000px;
     
  }
  
           /* הגדרת הקלפים */
  .memory-card {
    width: 120px;
  height: 120px;
    margin: 5px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s;
    cursor: pointer;
  }

   /* היפוך הקלף */
  .memory-card.flip {
    transform: rotateY(180deg);
  }
  
  .front-face,
  .back-face {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 5px;
    backface-visibility: hidden;
    object-fit: cover;
  }
  
  .front-face {
    transform: rotateY(180deg);
  }

   /* התאמת שני קלפים */
  .matched {
    opacity: 0.2;
    filter: grayscale(100%);
    transform: scale(0.95);
    transition: all 0.4s ease-in-out;
    pointer-events: none;
  }
  @media screen and (max-width: 600px) {
  .banner .slider {
    width: 130px;
    height: 140px;
    top: 6%;
    left: calc(50% - 65px);
    transform: perspective(600px);
  }

  .banner .slider .item {
    transform:
      rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg))
      translateZ(250px); /* מקרב את הפריטים למרכז */
  }

  .buttons {
    flex-direction: column;
    gap: 20px;
    bottom: 20px;
  }

  .buttons button {
    padding: 60px 60px;
    font-size: 1.2rem;
    border-radius: 100px;
  }

  .instructions {
    font-size: 2rem;
    text-align: center;
  }

  #game-board {
    max-width: 95vw;
    gap: 5px;
  }

  .memory-card {
    width: 80px;
    height: 80px;
  }
}
#timer {
  position: fixed;
  top: 10px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 1.3rem;
  font-weight: bold;
  z-index: 999;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#name {
  position: fixed;
  top: 85%;
  left: 28%;
  font-size: 2.2rem;
  color: #281dc8;
  z-index: 999;
 
}

#sendName {
  position: fixed;
  top: 85%;
  left: 74%;
  background-color: rgba(219, 30, 30, 0.85);
  padding: 16px;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  z-index: 999;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#yourtName {
  position: fixed;
  top: 90%;
  left: 57%;
  transform: translate(-50%, -50%);
  background-color: rgba(214, 98, 98, 0.85);
  padding: 16px;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  z-index: 999;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.choosNext {
  position: fixed;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px;
  font-size: 2rem;
  z-index: 999;
  
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
display: none; /* Hide the table by default */
}

/* Header row style */
thead {
  background-color: #4a90e2;
  color: white;
}

/* Row styles */
tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:nth-child(even) {
  background-color: #e0e0e0;
}
tbody tr:nth-child(1) {
    background-color: #d22323;
  }
  tbody tr:nth-child(2) {
    background-color: #df3d3d;
  }
  tbody tr:nth-child(3) {
    background-color: #ea6464;
  }

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

/* @keyframes yodaRaiseHand {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.05) rotate(-3deg); }
} */

#yoda-battle {
  position: fixed;
  left: 45%;
  top: 40%;
  z-index: 1001;
  height: 180px;
  animation: yodaRaiseHand 1s ease-in-out 1.5s forwards;
  transition: opacity 2s ease;
  opacity: 1;
}

#yoda-quote {
  position: fixed;
  top: 5%;
  left: 26%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  opacity: 0;
  color: #640c0c;
  transition: font-size 2s ease, top 2s ease, opacity 1s ease;
  z-index: 1002;
  padding: 20px;
  border-radius: 20px;
  font-family: 'Poetsen One', sans-serif;
  text-align: center;
}

#yoda-quote.active {
  font-size: 2.5rem;
  font-weight: bold;
  top: 48%;
  opacity: 1;
}