body {
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  background-color: rgb(214, 224, 238); /* Match the puzzle background */
  margin: 0;
  padding: 0;
  border-width: 0;
  cursor: pointer;
}

#menu {
  display: none;
}

#topBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgb(94, 52, 237); /* Primary color */
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

#forPuzzle {
  position: absolute;
  width: 95vw;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100px; 
  background-color: rgb(214, 224, 238); /* Light background for puzzle */
  overflow: hidden;
}

@media (max-width: 720px) {
  #forPuzzle {
    bottom: 54px; 
  }
}

.polypiece {
  display: block;
  overflow: hidden;
  position: absolute;
}

.moving {
  transition-property: top, left;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.gameCanvas {
  display: none;
  overflow: hidden;
  position: absolute;
}

#homeButton, #leaderboardButton, #rotatePieceButton, #showEdgesOnlyButton, #showJigsawButton, #timer {
  font-size: clamp(12px, 3vw, 20px);
  font-weight: bold;
  background-color: rgb(94, 52, 237); /* Primary color */
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 1000;
  white-space: nowrap;
  text-align: center;
  border: none;
  text-decoration: none;
}

#homeButton {
  position: static;
  order: 0; 
}

#leaderboardButton {
  position: static;
  order: 1;
}

#rotatePieceButton {
  position: static;
  order: 2;
  font-size: clamp(12px, 3vw, 20px);
  font-weight: bold;
  background-color: rgb(94, 52, 237); /* Primary color */
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 1000;
  white-space: nowrap;
  text-align: center;
  border: none;
  cursor: pointer;
}

#showEdgesOnlyButton {
  position: static;
  order: 3;
  display: none;
}

#showJigsawButton {
  position: static;
  order: 4;
}

#timer {
  position: static;
  order: 5;
  background-color: rgba(255, 50, 50, 0.8); /* Timer remains red */
  display: none;
}



#tryAgainButton {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: bold;
  background-color: rgb(94, 52, 237); /* Primary color */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  z-index: 1000; /* Ensure this is high enough */
  cursor: pointer;
}

@media (max-width: 480px) {
  #tryAgainButton {
      bottom: 60px; /* Adjust as needed */
      font-size: 16px;
      padding: 8px 16px;
  }
}

.option-btn {
  padding: 10px;
  margin: 5px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  background: #ddd;
  border-radius: 5px;
}

.option-btn.selected {
  background: rgb(249, 216, 99); /* Secondary color */
  font-weight: bold;
}

#startPuzzle {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  background-color: rgb(94, 52, 237); /* Primary color */
  color: white;
  border-radius: 5px;
  border: none;
}

#completionCount {
  display: none;
}

#panelCompletionCount {
  display: block;
}

@media (max-width: 480px) {
  #topBar {
    height: 40px;
    padding: 0 5px;
  }

  #homeButton, #leaderboardButton, #rotatePieceButton, #showEdgesOnlyButton, #showJigsawButton, #timer {
    font-size: clamp(10px, 2.5vw, 16px);
    padding: 3px 6px;
  }



  #tryAgainButton {
    font-size: 16px;
    padding: 8px 16px;
  }
}

#rotatePieceButton {
  font-size: clamp(12px, 3vw, 20px);
  font-weight: bold;
  background-color: rgb(94, 52, 237); /* Primary color */
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 1000;
  white-space: nowrap;
  text-align: center;
  border: none;
  cursor: pointer;
}



/* Modal background */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Modal content box */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 80%;
  max-width: 400px;
}

h2 {
  font-size: 18px;
  margin-bottom: 20px;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 80%;
  margin-bottom: 10px;
}

.modal button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: rgb(94, 52, 237); /* Primary color */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px;
}

.modal button:hover {
  background-color: rgb(82, 40, 198); /* Darker shade of primary color */
}

#cancelNameButton {
  background-color: rgb(224, 124, 76); /* Additional color */
}

#cancelNameButton:hover {
  background-color: rgb(201, 110, 68);
}

.error-message {
  color: rgb(224, 124, 76); /* Additional color */
  font-size: 14px;
  margin-top: 10px;
}





/* Base styles for topBar elements */
#topBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgb(94, 52, 237);
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

#homeButton, #leaderboardButton, #rotatePieceButton, #showEdgesOnlyButton, #showJigsawButton, #timer {
  font-size: clamp(12px, 3vw, 20px);
  font-weight: bold;
  background-color: rgb(94, 52, 237);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 1000;
  white-space: nowrap;
  text-align: center;
  border: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px; /* Space between icon and text */
}

/* Ensure buttons/divs are clickable */
#leaderboardButton, #rotatePieceButton, #showEdgesOnlyButton {
  cursor: pointer;
}

/* Icon and text styling */
.icon {
  display: inline-block;
}

.text {
  display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 720px) {
  #topBar {
    height: 60px; /* Slightly taller for bigger icons */
    padding: 0 5px;
  }

  #homeButton, #leaderboardButton, #rotatePieceButton, #showEdgesOnlyButton, #showJigsawButton, #timer {
    font-size: 24px; /* Larger base size for icons */
    padding: 8px; /* Adjust padding */
  }

  /* Hide text, show only icons */
  #leaderboardButton .text, #rotatePieceButton .text, #showEdgesOnlyButton .text, #showJigsawButton .text {
    display: none;
  }

  /* Ensure icons scale up */
  #homeButton i, #leaderboardButton .icon i, #rotatePieceButton i, #showEdgesOnlyButton .icon i, #showJigsawButton .icon i {
    font-size: 24px;
  }

  #timer {
    font-size: 28px; /* Bigger timer */
    padding: 8px 12px;
    background-color: rgba(255, 50, 50, 0.8);
  }
}

@media (max-width: 480px) {
  #topBar {
    height: 50px; /* Adjust back if too tall */
  }

  #homeButton, #leaderboardButton, #rotatePieceButton, #showEdgesOnlyButton, #showJigsawButton, #timer {
    font-size: 20px; /* Slightly smaller for very small screens */
    padding: 6px;
  }

  #homeButton i, #leaderboardButton .icon i, #rotatePieceButton i, #showEdgesOnlyButton .icon i, #showJigsawButton .icon i {
    font-size: 20px;
  }

  #timer {
    font-size: 24px; /* Still larger than original */
    padding: 6px 10px;
  }
}

/* Ensure timer visibility */
#timer {
  display: none; /* Hidden initially per your JS logic */
}

#timer {
  position: static;
  order: 5;
  background-color: rgba(255, 50, 50, 0.8); /* Moved here for consistency */
  display: none; /* Hidden until game starts */
}

@media (max-width: 720px) {
  /* ... other styles ... */
  #timer {
    font-size: 28px; /* Bigger timer */
    padding: 8px 12px;
    /* Removed background-color from here */
  }
}

@media (max-width: 480px) {
  /* ... other styles ... */
  #timer {
    font-size: 24px;
    padding: 6px 10px;
    /* No background-color needed here */
  }
}

#showEdgesOnlyButton {
  position: static;
  order: 3;
  display: none; /* Hidden until game starts */
}

#rotatePieceButton {
  position: static;
  order: 2;
  font-size: clamp(12px, 3vw, 20px);
  font-weight: bold;
  background-color: rgb(94, 52, 237);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 1000;
  white-space: nowrap;
  text-align: center;
  border: none;
  cursor: pointer;
  display: none; /* Add this to hide initially */
}

#adContainer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 1000;
}

#adImage {
  max-width: 100%;
  height: auto;
}
/* Show the larger ad for wider screens */
@media (min-width: 728px) {
  #adImage {
      content: url('images/728_90.png');
      width: 728px;
      height: 90px;
  }
}

/* Show the smaller ad for narrow screens */
@media (max-width: 720px) {
  #adImage {
      content: url('images/300_50.png');
      width: 300px;
      height: 50px;
  }
}

/* Ensure the link wraps around the image */
#adContainer a {
  display: inline-block;
}

/* To be removed after testing 
.moving {
  transition-property: top, left;
  transition-duration: 1s;
  transition-timing-function: linear;
  outline: 2px solid red; /* Temporary for debugging 
} */

.red-clock {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
  color: red;
  z-index: 1000;
}

.red-clock {
  font-size: clamp(12px, 3vw, 20px);
  font-weight: bold;
  background-color: rgba(255, 50, 50, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 1000;
}

#replayTimer {
  min-width: 70px;
  text-align: right;
}

table button {
  padding: 4px 8px;
  font-size: 0.9em;
  border-radius: 4px;
  background: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}
table button:hover {
  background: #388e3c;
}