body {
 display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
			font-family: "Buixots", sans-serif;
			background-color: #7d8fec;
    }

	      @font-face {
        font-family: 'Buixots';
        src: url('fonts/Buixots.eot');
        src: url('fonts/Buixots.eot?#iefix') format('embedded-opentype'),
             url('fonts/Buixots.woff') format('woff'),
             url('fonts/Buixots.ttf') format('truetype'),
             url('fonts/Buixots.svg#Buixots') format('svg');
        font-weight: normal;
        font-style: normal;
    }
	  
#success-message {
  position: fixed;
  bottom: 8%;   /* 👈 clau */
  left: 50%;
  transform: translateX(-50%);
  
  min-width: 260px;
  max-width: 80vw;
  padding: 24px 32px;

  background: rgba(251, 255, 168, 0.9);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);

  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 3rem;
  font-weight: bold;
  color: #000;
  z-index: 99999;
}



    #puzzle-container {
      width: 300px;
      height: 300px;
      border: 10px solid white;
      position: relative;
	  top:30%;
	      border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
    }

 .puzzle-piece {
        width: 100px; /* Original size */
        height: 100px; /* Original size */
        position: absolute;
        border: 1px solid white;
        background-size: 300px 300px; /* Size of the full image */
        cursor: pointer;
        transition: transform 0.3s ease; /* Smooth transition for the transform */
    }

    /* Hover effect */
    .puzzle-piece:hover {
        transform: scale(1.1); /* Scale up by 10% */
        z-index: 2; /* Ensure the hovered piece is above others */
    }

    /* Adjust background positions for each piece as necessary */
    .puzzle-piece-1 { background-position: 0 0; }
    .puzzle-piece-2 { background-position: -100px 0; }
    .puzzle-piece-3 { background-position: -200px 0; }
    .puzzle-piece-4 { background-position: 0 -100px; }
    .puzzle-piece-5 { background-position: -100px -100px; }
    .puzzle-piece-6 { background-position: -200px -100px; }
    .puzzle-piece-7 { background-position: 0 -200px; }
    .puzzle-piece-8 { background-position: -100px -200px; }
    .puzzle-piece-9 { background-position: -200px -200px; }
	.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
.master-container {
position: relative;
    margin: 30px; /* Fixed margin around the container */
    padding: 20px; /* Padding inside the container */
    border-radius: 10px; /* Rounded corners */
    background-color: rgba(255, 255, 255, 0.5); /* Background color of the container */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */

    /* These will make the container cover the available area minus margins */
    width: calc(100% - 60px); /* Full width minus the horizontal margin */
    height: calc(100vh - 60px); /* Full height minus the vertical margin */
    box-sizing: border-box; /* Includes padding and border in the width and height */
    position: absolute;
    top: 0;
    left: 0;
	    background-size: auto; /* Adjust as needed to scale the pattern */

}

@media (max-width: 800px) {
    .master-container {
        margin: 10px; /* Smaller margin for smaller screens */
        width: calc(100% - 20px); /* Adjust width for smaller screens */
        height: calc(100vh - 20px); /* Adjust height for smaller screens */
    }
}
.master-container-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

@media (max-width: 800px) {
    .master-container-home {
        margin: 10px; /* Smaller margin for smaller screens */
        width: calc(100% - 20px); /* Adjust width for smaller screens */
        height: calc(100vh - 20px); /* Adjust height for smaller screens */
    }
}


#mister-puzzle-logo-home {
  /* No need for absolute positioning, top, or left properties */
  width: 320px; /* Adjust based on your logo's size */
  max-width: 80%; /* Prevents the logo from being too large on smaller devices */
  height: auto; /* Maintain aspect ratio */
  z-index: 2;
}

#mister-puzzle-logo {
  position: absolute;
  bottom: 6%; /* 10% from the bottom of the master-container */
  left: 50%; /* Centering horizontally */
  transform: translateX(-50%); /* Adjusts for the width of the image to ensure it's truly centered */
  width: 150px; /* Adjust based on your logo's size */
  height: auto; /* Maintain aspect ratio */
  z-index:-5;
}
.game-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 20%;
}


#hint-circle {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 60px;
    height: 60px;
    background-color: #7746FF;
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    cursor: pointer;
}

#hint-image-container {
    position: fixed;
    bottom: 120px;
    right: 60px;
    width: 150px; /* Adjust based on your needs */
    height: 150px; /* Adjust based on your needs */
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid lightgrey;
    box-shadow: 0 2px 4px grey;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
  .selected {
        border: 4px solid #A9EF95; /* Fluorescent green color with increased border width */
        box-shadow: 0 0 10px #A9EF95; /* Optional: Adds a glow effect for better visibility */
    }

    /* Styles to remove the default outline on focus for clickable elements */
    .puzzle-piece:focus {
        outline: none;
    }



/* Start Game button styling */
.button {
  display: block;
  width: fit-content; /* Adjust width to fit content */
  margin: 20px auto; /* Center the button */
  padding: 10px 20px;
  background-color: #4FC6FF;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: 'Buixots', sans-serif;
  cursor: pointer;
}


#logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Ensures the container spans the full width */
}
/* Instruction box styling */
.instruction-box {
  width: 30%; /* Adjust width as desired */
  margin: 0 auto 20px; /* Centering and spacing */
  background-color: white;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Thin shadow */
  border-radius: 12px; /* Rounded corners */
  margin-top: -30px;
  padding: 10px 20px; /* Smaller padding */
  font-family: 'Buixots', sans-serif;
  font-size: 28px; /* Adjusted font size */
  text-transform:uppercase;
  text-align: center;
}
@media (max-width: 800px) {
    .instruction-box {
		 width: 80%;
    }
}


/* Logo style with z-index adjustment */
.heartbeat {
  animation: customLogoAnimation 10s ease-in-out infinite;
  display: block;
  margin: 20px auto;
  z-index: 100; /* Ensure the logo stays on top */
}

/* Adjusted button style */
#start-game {
  display: block;
  margin: 8px auto;
  padding: 10px 20px; /* Smaller padding */
  background-color: #7746FF;
  color: white;
  text-decoration: none;
  border: 2px solid transparent; /* Add a border if you like */
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: 'Buixots', sans-serif;
  font-size: 36px; /* Adjusted font size */
  cursor: pointer;
  width: auto; /* Adjust width as necessary, or remove for auto width based on content */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  text-align: center;
}