/* General styles */
body {
  font-family: 'Orbitron', sans-serif;
  /* font-family: Arial, sans-serif; */
  text-transform: uppercase;
  background-color: #e9dfd9;
  margin: 0;
  user-select: none;
  /* CSS rule to disable selection */
  overflow: hidden;
  /* Disable page scrolling for mobile */
  -webkit-touch-callout: none;
  /* Disable callout */
  -webkit-user-select: none;
  /* Disable user selection */
  -moz-user-select: none;
  /* Disable user selection */
  -ms-user-select: none;
  /* Disable user selection */
  user-select: none;
  /* Disable user selection */
  touch-action: manipulation;
  /* Disable long tap behavior on Chrome for Android */
  -webkit-touch-callout: none;
  /* Disable context menu on Chrome for iOS */
  -webkit-user-select: none;
  /* Disable text selection on Chrome for iOS */
  user-select: none;
  /* Disable text selection on other browsers */
}


h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
}

/* Disable touch actions for draggable elements */
.draggable {
  touch-action: none;
  /* Disable touch actions */
}


/* Container to center the content */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 35px;
  /* or adjust this value to your preference */
}

/* Wrapper for the chessboard */
.chessboard-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  /* Adjust the margin to reduce the spacing */
}

/* Popup container */
.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}

/* Popup message for overall game completion */
.popup-message {
  background-color: #fceee2;
  color: #73000d;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  height: 330px;
  position: fixed;
  top: calc(50% - 38px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  justify-content: center;
  /* position: relative; */
}

/* just the paragraph, not the title, inside game completion popup */
.popup-message p {
  color: #000000;
}

#board {
  display: flex;
  justify-content: center;
  width: auto;
  height: 0;
  padding-bottom: 100%;
  max-width: 100%;
  max-height: 100vh;
}

/* OLD: remove this one. Displaying the level */
/* #level {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 14px;
  text-align: center;
  display: none;
} */

#score-timer-container {
  margin-top: -6px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 14px;
  position: relative;
}

#num-moves,
#timer {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

#num-moves {
  margin-left: 10px;
  margin-right: 50px;
  order: 2;
  /* Add this line to change the order */
}

.mute-icon {
  width: 24px;
  height: 24px;
  background-image: url('../img/audio-on.png');
  background-size: cover;
  cursor: pointer;
  left: calc(3% + 0px);
  /* add to calc to move more to the right */
  order: 3;
  position: relative;
  top: -1px;
}

/* Centered content for timer moves and mute */
.centered-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  /* margin-bottom: -10px; */
}

/* Displaying the running score */
#running-score {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 14px;
  text-align: center;
  display: block;
}

/* Displaying the level bonus points */
#bonus-points {
  margin-top: 13px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  display: block;
}

/* Heading for win state message */
#congratsMessage {
  text-transform: none;
  margin: -4px;
  margin-top: -8px;
  display: block;
  max-width: 370px;
  background-color: #fed3b9;
  color: #73000d;
  padding: 10px;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}

/* Restart Game and Save Score buttons */
.restartGameBtn,
.save-score {
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  background-color: #73000d;
  color: #ffffff;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

@media (hover: hover) {

  .restartGameBtn:hover,
  .save-score:hover {
    background-color: #8c0015;
  }
}

.restartGameBtn:active,
.save-score:active {
  background-color: #a7001c;
}

/* only show the Restart Game button after the player saves their score */
.restartGameBtn {
  margin-top: 112px;
  display: none;
}

/* Label to ask for player name */
.name-label {
  font-size: 16px;
  font-weight: bold;
  color: #73000d;
  margin-bottom: 10px;
}

/* Player name input text box */
#name-input,
#name-input-midgame {
  font-family: 'Orbitron', sans-serif;
  max-width: 75px;
  padding-bottom: 5px;
  border: none;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  outline: none;
  background-color: transparent;
  text-transform: uppercase;
  border-bottom: 6px dashed #73000d;
  justify-content: center;
}

/* Smirk emoji p */
#smirk {
  font-size: 200%;
  width: 50px;
  height: 50px;
  display: none;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* cheer-emoji p */
#cheer-emoji {
  font-size: 200%;
  width: 50px;
  height: 50px;
  display: none;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Button group */
.button-group {
  display: flex;
  margin-bottom: 10px;
  /* Adjust the margin to reduce the spacing */
}

/* Buttons */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Add this line to center the content horizontally */
  padding: 10px 15px;
  font-size: 14px;
  font-weight: bold;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: #73000d;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin-right: 2.5px;
  margin-left: 2.5px;
  margin-bottom: 10px;
  transition: background-color 0.3s ease;

  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
  height: 40px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

@media (hover: hover) {
  button:hover {
    background-color: #8c0015;
  }
}

button:active {
  background-color: #a7001c;
}


/* Making the Next Level button flicker after completion */
#nextLevelBtn {
  animation: flicker 1s infinite;
}

/* Defining the flickering color for the Next Level and Restart Game buttons */
@keyframes flicker {
  0% {
    background-color: #73000d;
    /* Original color */
  }

  50% {
    background-color: #a7001c;
    /* Lighter shade of green */
  }

  100% {
    background-color: #73000d;
    /* Original color */
  }
}

/* Disabled state for Next Level button */
#nextLevelBtn[disabled] {
  animation: none;
  /* Remove the animation */
  opacity: 0.5;
  /* Dim the button */
  cursor: not-allowed;
  /* Remove hover/click cursor */
  pointer-events: none;
  /* Disable pointer events */
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-20vh) rotate(0deg);
  }

  100% {
    transform: translateY(calc(100vh + 100%)) rotate(360deg);
  }
}

.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Make the container non-interactable */
  z-index: 999999;
  background: transparent;
  /* Set the container background to transparent */
}

.confetti {
  position: absolute;
  width: 20px;
  /* Adjust the size of the confetti */
  height: 20px;
  /* Adjust the size of the confetti */
  background-color: #FFCC00;
  /* Update the confetti color */
  border-radius: 50%;
  animation: confetti-fall 5s linear infinite;
  mix-blend-mode: screen;
  /* Make the confetti more vibrant */
}

.confetti:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* make sure audio elements never get shown visually */
audio {
  display: none;
}


/* Styling for the levels dropdown */
.level-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 14px;
  /* Adjust the value as needed */
}

/* Styling for the current level selected in dropdown */
.level {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 14px;
  text-align: center;
  cursor: pointer;
}

/* Styling for the levels dropdown options */
.level-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  list-style-type: none;
  background-color: #fceee2;
  border: 1px solid #e9dfd9;
  border-top: none;
  display: none;
  padding: 0;
  margin: 0;
  z-index: 1;
  /* making the dropdown options fit+scrollable on all screen sizes */
  max-height: 100vh;
  overflow-y: auto;
  min-width: 90px;
}

/* Styling for the levels dropdown option */
.level-options li {
  padding: 6px 16px;
  cursor: pointer;
}

/* Styling for the levels dropdown option on hover */
.level-options li:hover {
  background-color: #fed3b9;
}

/* disabling long presses on imgs for mobile */
img {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  pointer-events: none;
}

#copyright {
  text-transform: none;
  text-align: center;
  font-size: 12px;
  text-align: center;
  margin-top: -20px;
  color: #777777;
  text-decoration: none;
}

/* Style for the link */
#copyright a {
  color: #777777;
  text-decoration: none;
}

/* Hover style for the link */
#copyright:hover {
  opacity: 0.7;
  /* Adjust the opacity as desired */
}


/* Logo */
#logo-about-me {
  position: absolute;
  top: -10px;
  /* Adjust the value to move the logo higher */
  left: 0;
  margin: 13px;
  z-index: 9990;
  cursor: pointer;
  opacity: 0.5;
}

#wrapper-logo {
  position: relative;
}

/* Popup container */
#about-me-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

/* Popup message */
#about-me-popup-message {
  text-transform: none;
  line-height: 2;
  background-color: #fceee2;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
  font-size: 16px;
}

/* Style for the link within the popup */
#about-me-popup-message a {
  color: #73000d;
  /* Adjust the color to a middle shade */
  text-decoration: none;
  line-height: 1;
}

/* Hover style for the link */
#about-me-popup-message a:hover {
  opacity: 0.7;
}

/* trophy emoji for opening leaderboard */
#trophy-icon {
  position: absolute;
  top: -8px;
  right: 0;
  margin: 13px;
  z-index: 9997;
  cursor: pointer;
  opacity: 0.5;
}


/* Leaderboard Popup */
#leader-popup {
  position: fixed;
  top: calc(50% - 30px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  overflow-y: auto;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/* Styling for the text of the leaderboard */
#leader-popup-message {
  background-color: #fceee2;
  padding: 20px;
  padding-bottom: 25px;
  max-height: 370px;
  text-align: center;
  font-size: 16px;
  overflow-y: auto;
}

#leader-popup-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: none;
}

.leaderboard-column {
  display: inline-block;
  width: 30%;
  text-align: center;
}

.leaderboard-row {
  margin-bottom: 10px;
}

/* changing background of all white tiles */
.white-1e1d7 {
  /* background-image: url('/img/tiles/light-neon-tile.png'); */
  background-color: #fceee2;
}

/* changing background of all black tiles */
.black-3c85d {
  /* background-image: url('/img/tiles/neon-tile.png'); */
  background-color: #dca685;
}