body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* height: 100vh; */
  }
  
  
  #canvas {
    background: url('cbg.jpg') no-repeat center center;
    background-size: 60% 80%;
  
    background-color: rgba(255, 255, 255, 0.5); /* White tint */
    background-blend-mode: overlay;
  }

#start-game-button{
  width: 300px;
  height: 100px;
  font-size: 30px;
}

  .bg_img {
    position: absolute;
    top: 0;
    left: 0;

    height: 100%; /* Use viewport height for consistent full-screen sizing */
    width: 100%; /* Use viewport width */

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Cover maintains aspect ratio and ensures no distortion */

    margin: 0; /* Shorthand for all sides */
}


  
  #game {
    position: relative;
    width: 50%;
    margin: 20px;
  }
  
/* Container for the canvas and slots */
.game-container {
    position: relative;
    width: 100%; /* Or any percentage you'd like */
    margin: 0 auto;
    height: 70vh; /* Adjust this to fit the canvas height */
  }


  /* #canvas {
    position: relative;
    height: 300px;
    border: 2px solid black;
    background-color: #f0f0f0;
  } */


  
  /* #canvas {
    width: 100%;
    height: 80%; 
    position: relative;
    background-color: lightgray;
  } */
  

  

  .slot-container {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 100px; /* Move slots below the canvas */
    width: 100%;
    background-color: black;
    z-index: 10;
  }
  #slots {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin-left: 100px;
    margin-top: 16%;
  }

  .slot {
    width: 60px;
    height: 60px;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  

  




  

  .game-image:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    /* transition: transform 0.02s ease;  */
    
  }



  #game-over {
    font-size: 30px;
    color: red;
    text-align: center;
    margin-top: 20px;
  }





  /* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: absolute;
    top: 0;
    left: 0;
    width: 104%;
    height: 100%;
    background-color:#55b047; 
    /* rgb(255, 0, 0); Semi-transparent background */
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    z-index: 1000; /* Ensure it's on top of everything */

 
  }

  
/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}


  .modal-content {
    background-color: #333;
    padding: 20px;
    border-radius: 8px;
    max-width: 600px;
    width: 80%;
  }
  
  #restart-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  #restart-button:hover {
    background-color: #45a049;
  }
  


  button {
    padding: 10px 20px;
    background-color: #4CAF50; /* Green color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
  
  button:hover {
    background-color: #45a049; /* Darker green on hover */
  }


  
  /* .conmo{
    display: flex;
 
    top:0px;
    height: 150px;
    width: 80%;
    border: 2px solid rgb(211, 153, 36);
    background-color: #d41c1c;
    border-radius: 5px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  } */






  .matched {
    animation: highlight 1s ease-in-out;
  }
  
  @keyframes highlight {
    0% {
      transform: scale(1);
      box-shadow: 0 0 10px gold;
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 0 20px gold;
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 10px gold;
    }
  }
  
  #canvas {
    top: 150px;
    width: 100%;
    height: 80%; 
    /* max-width: 100%;  */
    aspect-ratio: 4 / 3;
    border: 2px solid rgb(211, 153, 36);
    /* background-color: #d41c1c; */
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
  }




  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
                /* .example {background: red;} */
              body{
                background-color: red;
              }

              /* .splash
              {
                max-width: 300px;
                border-radius:10px"
              } */

              .splash
              {
                position: absolute;
                top: 50%; /* Center vertically */
                left: 50%; /* Center horizontally */
                transform: translate(-50%, -50%); /* Offset to center */
                max-width: 80%;
                border-radius:10px;
              }

                  .logo{
                    position: absolute;
                    max-width: 130px;
                    top: 0px;
                    left: 10px;
                  }

                
                #game {
                  position: relative;
                  width: 300px;
                
                }

                  #canvas {
                    /* position: absolute; */
                    margin-top: 30px;
                    width: 130%;
                     /* Use more screen space on small devices */
                    height: 100%; /* Adjust height for better fit */
                    /* left: -70px; */
                  
                    left: 50%; 
                    transform: translate( -50%); 
                  }

                  .slot {
                    width: 50px; /* Smaller slots */
                    height: 50px;
                    border-radius: 5px;
                    border-color: white;
                  }

                  /* .game-image {
                    width: 40px;
                    height: 40px;
                  } */

                  #slots {
                      display: flex;
                      justify-content: space-between;
                      width: 80%;
                      margin-left: 30px;
                      margin-top: 202px;
                      background-color: #096e0b;
                      padding: 5px 5px 5px 5px;
                      border-radius: 5px;
                    }

                    #score {
                      margin-top: 20px;
                      font-size: 40px;
                      position: absolute;
                      font-weight: bold; /* Bold font */
                      color: rgb(0, 0, 0);
                      top: 10%; /* Center vertically */
                      left: 20%; /* Center horizontally */
                      transform: translate(-50%, -50%); 
                  
                    }

                    #timer-text {
                      position: absolute;
                      top: 50%; /* Center vertically */
                      left: 50%; /* Center horizontally */
                      transform: translate(-50%, -50%); /* Offset to center */
                      font-size: 50px; /* Adjust font size */
                      font-weight: bold; /* Bold font */
                      color: rgb(17, 117, 11);
                    }
                    
                    #timer-text1 {
                      position: absolute;
                      top: 105%; /* Center vertically */
                      left: 50%; /* Center horizontally */
                      transform: translate(-50%, -50%); /* Offset to center */
                      font-size: 35px; /* Adjust font size */
                      font-weight: bold; /* Bold font */
                      color: rgb(0, 0, 0);
                    }
                  

                    /* Timer Container */
                    #timer-container {
                      position: absolute;
                      /* margin: 0; */
                      top: 0px;
                      right: -10px !important;
                      font-size: 24px;
                      color: rgb(11, 11, 11);
                      text-align: center;
                      z-index: 10;
                    }
                    
                    /* Circular Timer Styling */
                    #timer-progress {
                      transform: rotate(-90deg); /* Rotate to make the progress start from top */
                      /* width: 100px; */
                      /* height: 100px; */
                        margin: 0 auto;
                    }
                    
                    #timer-background {
                      stroke: #00ff3c; /* Light gray background */
                    }
                    
                    #timer-foreground {
                      stroke: rgb(255, 0, 0);
                      transition: stroke-dashoffset 1s linear;
                    }
                    
                    /* Animation for Circular Progress Bar */
                    @keyframes countdownAnimation {
                      0% {
                        stroke-dashoffset: 0;
                      }
                      100% {
                        stroke-dashoffset: 314; /* Full circle circumference */
                      }
                    }

                    /* New CSS for game images */
                    .game-image {
                      width: 55px; /* Adjust to your desired size */
                      height: 55px; /* Keep consistent with the width for proportional scaling */
                      cursor: pointer; /* Makes the image clickable */
                      transition: transform 0.2s ease; /* Smooth scaling effect on hover */
                      /* filter: drop-shadow(6px 5px 7px #000000); */
                    }
                    



}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) {
                      /* .example {background: green;} */
                      body{
                        background-color: green;
                      }
                      
                      .splash
                      {
                        position: absolute;
                        top: 50%; /* Center vertically */
                        left: 50%; /* Center horizontally */
                        transform: translate(-50%, -50%); /* Offset to center */
                        max-width: 80%;
                        border-radius:10px;
                      }

                      .logo{
                        position: absolute;
                        max-width: 150px;
                        top: 50px ;
                        left: 10px;
                      }

                        #game {
                          position: relative;
                          width: 350px;
                          /* margin: 20px; */
                        }

                        #canvas {
                          /* position: absolute; */
                          margin-top: 30px;
                          width: 170%;
                           /* Use more screen space on small devices */
                          height: 100%; /* Adjust height for better fit */
                          /* left: -70px; */
                        
                          left: 50%; 
                          transform: translate( -50%); 
                        }


         /* New CSS for game images */
         .game-image {
          width:60px; /* Adjust to your desired size */
          height: 60px; /* Keep consistent with the width for proportional scaling */
          cursor: pointer; /* Makes the image clickable */
          transition: transform 0.2s ease; /* Smooth scaling effect on hover */
          /* filter: drop-shadow(6px 5px 7px #000000); */
        }
        

                        .slot {
                          width: 50px; /* Smaller slots */
                          height: 50px;
                          border-radius: 5px;
                          border-color: white;
                        }

                        /* .game-image {
                          width: 40px;
                          height: 40px;
                        } */

                        #slots {
                            display: flex;
                            justify-content: space-between;
                            width: 80%;
                            margin-left: 30px;
                            margin-top: 202px;
                            background-color: #096e0b;
                            padding: 5px 5px 5px 5px;
                            border-radius: 5px;
                          }

                          #score {
                            margin-top: 10px;
                            font-size: 40px;
                            position: absolute;
                            font-weight: bold; /* Bold font */
                            color: rgb(0, 0, 0);
                            top: 10%; /* Center vertically */
                            left: 50%; /* Center horizontally */
                            transform: translate(-50%, -50%); 
                        
                          }

                          #timer-text {
                            position: absolute;
                            top: 50%; /* Center vertically */
                            left: 50%; /* Center horizontally */
                            transform: translate(-50%, -50%); /* Offset to center */
                            font-size: 50px; /* Adjust font size */
                            font-weight: bold; /* Bold font */
                            color: rgb(17, 117, 11);
                          }
                          
                          #timer-text1 {
                            position: absolute;
                            top: 105%; /* Center vertically */
                            left: 50%; /* Center horizontally */
                            transform: translate(-50%, -50%); /* Offset to center */
                            font-size: 35px; /* Adjust font size */
                            font-weight: bold; /* Bold font */
                            color: rgb(0, 0, 0);
                          }
                        

                          /* Timer Container */
                          #timer-container {
                            position: absolute;
                            /* margin: 0; */
                            top: 0px;
                            right: -70px !important;
                            font-size: 24px;
                            color: rgb(11, 11, 11);
                            text-align: center;
                            z-index: 10;
                          }
                          
                          /* Circular Timer Styling */
                          #timer-progress {
                            transform: rotate(-90deg); /* Rotate to make the progress start from top */
                            /* width: 100px; */
                            /* height: 100px; */
                              margin: 0 auto;
                          }
                          
                          #timer-background {
                            stroke: #00ff3c; /* Light gray background */
                          }
                          
                          #timer-foreground {
                            stroke: rgb(255, 0, 0);
                            transition: stroke-dashoffset 1s linear;
                          }
                          
                          /* Animation for Circular Progress Bar */
                          @keyframes countdownAnimation {
                            0% {
                              stroke-dashoffset: 0;
                            }
                            100% {
                              stroke-dashoffset: 314; /* Full circle circumference */
                            }
                          }



                      


}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
              /* .example {background: blue;} */
              body{
                background-color: blue;
              }

              .logo{
                position: absolute;
                max-width: 150px;
                top: 50px ;
                left: 10px;
              }

              #game {
                position: relative;
                width: 350px;
                /* margin: 20px; */
              }

              #canvas {
                margin-top: 10px;
                width: 210%; /* Use more screen space on small devices */
                height: 100%; /* Adjust height for better fit */
                /* left: -195px; */

                left: 50%; 
                transform: translate( -50%); 

              }

              /* New CSS for game images */
              .game-image {
                width:80px; /* Adjust to your desired size */
                height: 80px; /* Keep consistent with the width for proportional scaling */
                cursor: pointer; /* Makes the image clickable */
                transition: transform 0.2s ease; /* Smooth scaling effect on hover */
                /* filter: drop-shadow(6px 5px 7px #000000); */
              }



              .slot {
                width: 50px; /* Smaller slots */
                height: 50px;
                border-radius: 5px;
                border-color: white;
              }





              #slots {
                  display: flex;
                  justify-content: space-between;
                  width: 80%;
                  margin-left: 30px;
                  margin-top: 190px;
                  background-color: #096e0b;
                  padding: 5px 5px 5px 5px;
                  border-radius: 5px;
                }

                #score {
                  margin-top: 10px;
                  font-size: 40px;
                  position: absolute;
                  font-weight: bold; /* Bold font */
                  color: rgb(0, 0, 0);
                  top: 10%; /* Center vertically */
                  left: 50%; /* Center horizontally */
                  transform: translate(-50%, -50%); 
              
                }

                #timer-text {
                  position: absolute;
                  top: 50%; /* Center vertically */
                  left: 50%; /* Center horizontally */
                  transform: translate(-50%, -50%); /* Offset to center */
                  font-size: 50px; /* Adjust font size */
                  font-weight: bold; /* Bold font */
                  color: rgb(17, 117, 11);
                }
                
                #timer-text1 {
                  position: absolute;
                  top: 105%; /* Center vertically */
                  left: 50%; /* Center horizontally */
                  transform: translate(-50%, -50%); /* Offset to center */
                  font-size: 35px; /* Adjust font size */
                  font-weight: bold; /* Bold font */
                  color: rgb(0, 0, 0);
                }
              

                /* Timer Container */
                #timer-container {
                  position: absolute;
                  /* margin: 0; */
                  top: 0px;
                  right: -70px !important;
                  font-size: 24px;
                  color: rgb(255, 0, 0);
                  text-align: center;
                  z-index: 10;
                }
                
                /* Circular Timer Styling */
                #timer-progress {
                  transform: rotate(-90deg); /* Rotate to make the progress start from top */
                  /* width: 100px; */
                  /* height: 100px; */
                    margin: 0 auto;
                }
                
                #timer-background {
                  stroke: #00ff3c; /* Light gray background */
                }
                
                #timer-foreground {
                  stroke: rgb(255, 0, 0);
                  transition: stroke-dashoffset 1s linear;
                }
                
                /* Animation for Circular Progress Bar */
                @keyframes countdownAnimation {
                  0% {
                    stroke-dashoffset: 0;
                  }
                  100% {
                    stroke-dashoffset: 314; /* Full circle circumference */
                  }
                }

            

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
                /* .example {background: orange;} */
                body{
                  background-color: orange;
                }

                .splash
                {
                  position: absolute;
                  top: 50%; /* Center vertically */
                  left: 50%; /* Center horizontally */
                  transform: translate(-50%, -50%); /* Offset to center */
                  max-width: 80%;
                  border-radius:10px;
                }
                


                #game {
                  position: relative;
                  width: 350px;
                  /* margin: 20px; */
                }

                #canvas {
                  margin-top: 0px;
                  width: 250%; /* Use more screen space on small devices */
                  height: 100%; /* Adjust height for better fit */
                  /* left: -195px; */

                  left: 50%; 
                  transform: translate( -50%); 

                }

                .slot {
                  width: 50px; /* Smaller slots */
                  height: 50px;
                  border-radius: 5px;
                  border-color: white;
                }

                /* .game-image {
                  width: 60px; 
                  height: 60px;
                } */

                #slots {
                  display: flex;
                  justify-content: space-between;
                  width: 80%;
                  margin-left: 30px;
                  margin-top: 160px;
                  background-color: #096e0b;
                  padding: 5px 5px 5px 5px;
                  border-radius: 5px;
                }

             

                  #score {
                    margin-top: 0px;
                    font-size: 40px;
                    position: absolute;
                    font-weight: bold; /* Bold font */
                    color: rgb(0, 0, 0);
                    top: 10%; /* Center vertically */
                    left: 40%; /* Center horizontally */
                    transform: translate(-50%, -50%); 
                
                  }

                  #timer-text {
                    position: absolute;
                    top: 50%; /* Center vertically */
                    left: 50%; /* Center horizontally */
                    transform: translate(-50%, -50%); /* Offset to center */
                    font-size: 50px; /* Adjust font size */
                    font-weight: bold; /* Bold font */
                    color: rgb(17, 117, 11);
                  }
                  
                  #timer-text1 {
                    position: absolute;
                    top: 105%; /* Center vertically */
                    left: 50%; /* Center horizontally */
                    transform: translate(-50%, -50%); /* Offset to center */
                    font-size: 35px; /* Adjust font size */
                    font-weight: bold; /* Bold font */
                    color: rgb(0, 0, 0);
                  }
                

                  /* Timer Container */
                  #timer-container {
                    position: absolute;
                    /* margin: 0; */
                    top: 0px;
                    right: -70px !important;
                    font-size: 24px;
                    color: rgb(11, 11, 11);
                    text-align: center;
                    z-index: 10;
                  }
                  
                  /* Circular Timer Styling */
                  #timer-progress {
                    transform: rotate(-90deg); /* Rotate to make the progress start from top */
                    /* width: 100px; */
                    /* height: 100px; */
                      margin: 0 auto;
                  }
                  
                  #timer-background {
                    stroke: #00ff3c; /* Light gray background */
                  }
                  
                  #timer-foreground {
                    stroke: rgb(255, 0, 0);
                    transition: stroke-dashoffset 1s linear;
                  }
                  
                  /* Animation for Circular Progress Bar */
                  @keyframes countdownAnimation {
                    0% {
                      stroke-dashoffset: 0;
                    }
                    100% {
                      stroke-dashoffset: 314; /* Full circle circumference */
                    }
                  }

                /* New CSS for game images */
                .game-image {
                  width:80px; /* Adjust to your desired size */
                  height: 80px; /* Keep consistent with the width for proportional scaling */
                  cursor: pointer; /* Makes the image clickable */
                  transition: transform 0.2s ease; /* Smooth scaling effect on hover */
                  /* filter: drop-shadow(6px 5px 7px #000000); */
                }


              


} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
              /* .example {background: pink;} */
              body{
                background-color: pink;
              }

              #canvas {
                margin-top: 0px;
                width: 250%; /* Use more screen space on small devices */
                height: 50%; /* Adjust height for better fit */
                /* left: -195px; */

                left: 50%; 
                transform: translate( -50%); 

              }


              /* New CSS for game images */
              .game-image {
                width:80px; /* Adjust to your desired size */
                height: 80px; /* Keep consistent with the width for proportional scaling */
                cursor: pointer; /* Makes the image clickable */
                transition: transform 0.2s ease; /* Smooth scaling effect on hover */
                /* filter: drop-shadow(6px 5px 7px #000000); */
              }

              #slots {
                display: flex;
                justify-content: space-between;
                width: 80%;
                margin-left: 30px;
                margin-top: 160px;
                background-color: #096e0b;
                padding: 5px 5px 5px 5px;
                border-radius: 5px;
              }

              #timer-background {
               
     stroke: rgb(255, 0, 0);

              }
              
              #timer-foreground {
            stroke: #00ff3c; /* Light gray background */
                transition: stroke-dashoffset 1s linear;
              }
}


/* Portrait-specific styles */
@media screen and (orientation: portrait) and (min-width: 992px) {
  .bg_img {
      background-size: contain; /* Example adjustment for portrait */
  }


  /* .splash
  {
     max-width: 400px;
     border-radius:10px;
  } */
  .splash
  {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset to center */
     max-width: 80%;
     border-radius:10px;
  }

  #canvas {
    margin-top: 200px;
  }



  #score {
    margin-top: 150px;
    font-size: 40px;
    position: absolute;
    font-weight: bold; /* Bold font */
    color: rgb(0, 0, 0);
    top: 10%; /* Center vertically */
    left: 40%; /* Center horizontally */
    transform: translate(-50%, -50%); 

  }



     /* Timer Container */
     #timer-container {
      position: absolute;
      /* margin: 0; */
      top: 150px;
      right: -70px !important;
      font-size: 24px;
      color: rgb(11, 11, 11);
      text-align: center;
      z-index: 10;
    
    }
    
    /* Circular Timer Styling */
    #timer-progress {
      transform: rotate(-90deg); /* Rotate to make the progress start from top */
 
        margin: 0 auto;
    }


    #timer-background {
      stroke: #00ff3c; /* Light gray background */
    }
    
    #timer-foreground {
      stroke: rgb(255, 0, 0);
      transition: stroke-dashoffset 1s linear;
    }
}


/* From Uiverse.io by Ashon-G */ 
.loader {
  --hue: 210;
  --size: 100px;
  --border: 10px;
  --speed: 1s;
  --blur: var(--border);
}

.loader {
  width: var(--border);
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
  position: absolute;
  --y: calc((var(--size) * -0.5) + (var(--border) * 0.5));
  transform: rotate(0deg) translateY(var(--y));
  animation: spin var(--speed) infinite linear;
}

.loader::before {
  content: "";
  position: absolute;
  inset: calc(var(--border) * -0.5);
  border-radius: 50%;
  background: white;
  filter: blur(var(--blur));
  z-index: -1;
}

.loader::after {
  content: "";
  width: var(--size);
  aspect-ratio: 1;
  position: absolute;
  top: 0%;
  left: 50%;
  translate: -50% 0;
  background: conic-gradient(
    white,
    hsl(var(--hue), 100%, 70%),
    hsl(var(--hue), 100%, 10%),
    transparent 65%
  );
  border-radius: 50%;
  mask: radial-gradient(
    transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),
    white calc((var(--size) * 0.5) - var(--border))
  );
}

@keyframes spin {
  to {
    transform: rotate(-360deg) translateY(var(--y));
  }
}