/* Basic reset to remove margins and padding from body */
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    overflow: hidden;
}

/* Full-Screen Image Container */
.image-container {
    position: relative; /* Needed for absolute positioning of the play button */
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
}

.image-container2 {
    position: absolute; /* Needed for absolute positioning of the play button */
    width: 23vw; /* Full width of the viewport */
    height: 22vh; /* Full height of the viewport */
}

.image-text {
    /* Positions the text relative to the .image-container2 */
    position: absolute;
    /* Example positioning: Bottom left corner */
    bottom: 10px;
    left: 10px;
    /* Add styling for readability over an image */
    color: white;
    background-color: rgba(0, 0, 0, 1);
    padding: 5px;
    font-size: 14px;
}

/* Full-Screen Image Styling */
.image {
    width: 100%; /* Make the image fill the full width */
    height: 100%; /* Make the image fill the full height */
    object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}

.smallimage {
    width: 23%; /* Make the image fill the full width */
    height: 22%; /* Make the image fill the full height */
    object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}

/* Play button styling */
.play-button {
    position: absolute; /* Position the button absolutely over the image */
    top: 60%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #9582b2; /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 5vw; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.shop-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -400%; /* Center vertically */
    left: 390%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.help-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -400%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.back-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -70%; /* Center vertically */
    left: 153%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.back-button2 {
    position: absolute; /* Position the button absolutely over the image */
    top: -60%; /* Center vertically */
    left: 225%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.replay-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -70%; /* Center vertically */
    left: 263%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.coin-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -410%; /* Center vertically */
    left: 400%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: rgba(1,1,1,0); /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.trophy-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -175%; /* Center vertically */
    left: 155%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.mute-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -85%; /* Center vertically */
    left: 215%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.st1-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -205%; /* Center vertically */
    left: 105%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 5%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.st2-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -205%; /* Center vertically */
    left: 225%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 5%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.st3-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -205%; /* Center vertically */
    left: 345%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 5%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* Play button icon color */
.play-button svg {
    fill: none;
    stroke: #211921; /* Set the icon color to white */
}

.shop-icon {
    width: 14vw;
    height: 14vw;
    pointer-events: none; /* prevents click issues */
}

.help-icon {
    width: 14vw;
    height: 14vw;
    pointer-events: none; /* prevents click issues */
}
.mute-icon {
    width: 14vw;
    height: 14vw;
    pointer-events: none; /* prevents click issues */
}

.st1-icon {
    width: 20vw;
    height: 20vw;
    pointer-events: none; /* prevents click issues */
}

.coin-icon {
    width: 14vw;
    height: 14vw;
    pointer-events: none; /* prevents click issues */
}

.trophy-icon {
    width: 10vw;
    height: 10vw;
    pointer-events: none; /* prevents click issues */
}

.back-icon {
    width: 14vw;
    height: 14vw;
    pointer-events: none; /* prevents click issues */
}

.replay-icon {
    width: 14vw;
    height: 14vw;
    pointer-events: none; /* prevents click issues */
}


/* Hover effect */
.play-button:hover {
    background-color: #6e6087; /* Darker blue on hover */
}

/* Focus effect for accessibility */
.play-button:focus {
    outline: none;
    box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.8); /* Blue focus */
}
.text-overlay {
  position: absolute; /* Position the text relative to its parent container */
  top: 62%; /* Start the text from the vertical center */
  left: 50%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: rgba(250,195,33,1); /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 9vw;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay2 {
  position: absolute; /* Position the text relative to its parent container */
  top: 48%; /* Start the text from the vertical center */
  left: 50%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: rgba(250,195,33,1); /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 9vw;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay3 {
  position: absolute; /* Position the text relative to its parent container */
  top: 10%; /* Start the text from the vertical center */
  left: 80%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: rgba(250,195,33,1); /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 11vw;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay4 {
  position: absolute; /* Position the text relative to its parent container */
  top: 65%; /* Start the text from the vertical center */
  left: 24%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: rgba(250,195,33,1); /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0.2); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 2vw;
  width: 200px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay5 {
  position: absolute; /* Position the text relative to its parent container */
  top: 65%; /* Start the text from the vertical center */
  left: 52%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: rgba(250,195,33,1); /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0.2); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 2vw;
  width: 200px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay6 {
  position: absolute; /* Position the text relative to its parent container */
  top: 65%; /* Start the text from the vertical center */
  left: 79%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: rgba(250,195,33,1); /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0.2); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 2vw;
  width: 200px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay7 {
  position: absolute; /* Position the text relative to its parent container */
  top: 30%; /* Start the text from the vertical center */
  left: 50%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: rgba(250,195,33,1); /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0.0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 5vw;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.small-button {
  position: absolute;
  top: 91%;
  left: 30%;
  font-size: 5vw;      /* Smaller text */
  padding: 2px 4px;     /* Less internal spacing */
  width: auto;          /* Fit width to content */
  color: rgba(255, 215, 0, 1);
  background-color: rgba(144, 85, 144, 1);
  font-family: Impact, Arial, sans-serif;
  /* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button:hover {
    color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.small-button2 {
  position: absolute;
  top: 91%;
  left: 40%;
  font-size: 5vw;      /* Smaller text */
  padding: 2px 4px;     /* Less internal spacing */
  width: auto;          /* Fit width to content */
  color: rgba(255, 215, 0, 1);
  background-color: rgba(144, 85, 144, 1);
  font-family: Impact, Arial, sans-serif;
  /* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button2:hover {
       color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.small-button3 {
  position: absolute;
  top: 91%;
  left: 50%;
  font-size: 5vw;      /* Smaller text */
  padding: 2px 4px;     /* Less internal spacing */
  width: auto;          /* Fit width to content */
  color: rgba(255, 215, 0, 1);
  background-color: rgba(144, 85, 144, 1);
  font-family: Impact, Arial, sans-serif;
  /* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button3:hover {
       color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.small-button4 {
  position: absolute;
  top: 91%;
  left: 60%;
  font-size: 5vw;      /* Smaller text */
  padding: 2px 4px;     /* Less internal spacing */
  width: auto;          /* Fit width to content */
  color: rgba(255, 215, 0, 1);
  background-color: rgba(144, 85, 144, 1);
  font-family: Impact, Arial, sans-serif;
  /* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button4:hover {
       color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}

 
#game-container {
  position: relative; /* anchor for absolute children */
  width: 85vw;
  height: 85vw;
}

#myCanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100vw;
  pointer-events: none
}

#controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 9999; /* ABOVE canvas */
  pointer-events: auto;
}

.btn {
  width: 60px;
  height: 60px;
  font-size: 24px;
  border-radius: 12px;
  border: none;
  margin: 6px;
  background: rgba(74, 74, 82, 0.85);
  color: white;
}

.btn:active {
  background: #7a3ab5;
}

}
.big-rectangular-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 200px;
  height: 60px;
  font-size: 20px;
  background: red;
  color: white;
  border: none;
  z-index: 9999;
}


/* Optional: Add hover effect for better user experience */
.big-rectangular-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}