/* Universal cursor rule */
*,
.left-image,
.horus-eye,
.icon-button-play,
.icon-button-play-event,
.devotion-button {
  cursor: url("../Egyptian-cursor-SweezyCursors.png/04cb26aba4e24358e5d6105fd903d611kaakUPMhgRF4x4aW-3.png"),
    auto;
}

/* Specific rules for interactive elements */
a,
button,
img,
select,
option,
.player-amount-chooser,
.left-title {
  cursor: url("../Egyptian-pointer-SweezyCursors.png/5a3d424e967e40098595a6a5cdc9b766BEqENKlgsV0DJKcP-3.png"),
    pointer;
}

textarea,
input,
[contenteditable="true"] {
  cursor: url("../Egyptian-pointer-SweezyCursors.png/5a3d424e967e40098595a6a5cdc9b766BEqENKlgsV0DJKcP-3.png"),
    text;
}

body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.main {
  flex: 1;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgb(10, 10, 10), rgb(146, 144, 142));
}

.options-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  margin-bottom: 80px;
}

.header-container {
  height: 60px;
  padding-left: 35px;
  padding-right: 35px;
  display: flex;
  background-color: rgb(0, 0, 0);
  justify-content: center;
  border-bottom: 1px solid rgba(255, 217, 0, 0.265);
  box-shadow: rgba(255, 188, 3, 0.37) 0px 50px 100px -20px,
    rgba(244, 167, 34, 0.208) 0px 30px 60px -30px;
  z-index: 1;
}

.header-left {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 30px;
  width: 30px;
  text-decoration: none;
}

.left-image {
  justify-content: start;
}

.left-title,
.left-title-footer {
  display: flex;
  flex-direction: row;
  color: gray;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  align-items: center;
  margin-left: 5px;

  text-decoration: none;
  white-space: nowrap;
}

.header-middle {
  margin-top: 2px;
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 50px;
  margin-left: 40%;
  margin-right: 40%;
  border-radius: 20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.header-right {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: end;
  height: 40px;
}

.horus-eye {
  width: 30px;
  height: 20px;
  margin-right: -50px;
}

.options-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4%;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 20px;
  height: 290px;
  width: 75%;
  border-radius: 200px;
  background-color: rgb(122, 111, 95);
  background-image: url("../images/pngtree-vintage-egyptian-hieroglyph-seamless-pattern-retro-vector-illustration-of-ancient-egypt-symbols-repeated-vector-png-image_39381462.jpg");
  box-shadow: rgba(230, 176, 62, 0.25) 0px 30px 60px -12px inset,
    rgba(243, 202, 127, 0.3) 0px 18px 36px -18px inset;
  transition: 0.7s;
  opacity: 0.2;
  z-index: 1;
}

.options-box-active {
  background-image: url("../images/ancient-egypt-egyptian-hieroglyphs-seamless-pattern-antique-elements-symbols-papyrus-historical-traditional-background-pyramids-graphic-decor-textile-wrapping-paper-wallpaper-vector-texture.avif");
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 0.4;
  transition: 0.7s;
}

.footer-container {
  background-color: black;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  box-shadow: rgba(150, 127, 71, 0.17) 0px -23px 25px 0px inset,
    rgba(67, 55, 26, 0.15) 0px -36px 30px 0px inset,
    rgba(36, 30, 20, 0.1) 0px -79px 40px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.left-title-footer {
  width: 250px;
  height: 7px;
  margin-left: 20px;
}

.option-action-board {
  margin: 30px 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.action-board-button,
.action-board-icon {
  width: 150px;
  height: 150px;
  background-color: transparent;
  border-radius: 100%;
  border: none;

  z-index: 10000;
}

.hover-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.button-title {
  font-family: "Macondo", cursive;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 50px;
  margin-top: 15px;
  margin-left: 10px;

  color: rgb(138, 65, 20); /* Default color for button titles */
  opacity: 1;
  border-radius: 20px;
  border: 1.5px solid rgb(95, 82, 10);
  background-color: rgb(255, 229, 195);
  transition: color 0.8s, opacity 0.8s;
  z-index: 2;
}

.button-title.non-hovered-text {
  color: rgb(100, 100, 100); /* Color for non-hovered titles */
  opacity: 0.3;
  transition: color 0.8s, opacity 0.8s;
}

/*this is for button icons*/
.non-hovered {
  opacity: 0.3;
  transition: 0.8s;
}

.scenarios {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Macondo", cursive;
  font-size: 25px;
  background-image: linear-gradient(rgb(162, 130, 72), rgb(59, 51, 42));
  height: 30px;
  width: 145px;
  border-radius: 10px;
  border: none;
  color: wheat;
  z-index: 5;

  transition: 0.5s;
  margin: 5px;
  padding: 10px;
  text-decoration: none;
  opacity: 0.7;
}

.scenarios:active {
  height: 35px;
  width: 150px;
  background-image: linear-gradient(rgb(59, 51, 42), rgb(162, 130, 72));
  color: rgb(254, 221, 184);
  box-shadow: rgba(247, 196, 120, 0.25) 0px 25px 50px -12px;
  transition: 0.5s;
  text-decoration: none;
  opacity: 1;
}

/*media queries*/

@media (max-width: 575.98px) {
  .options-container {
    display: flex;
    flex-direction: column;
    position: absolute;
  }

  .header-right,
  .header-left {
    visibility: hidden;
  }

  .options-box {
    height: 500px;
  }

  .option-action-board {
    margin: 5px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 20px;
  }

  .action-board-button,
  .action-board-icon {
    width: 60px;
    height: 60px;
    background-color: transparent;
    border-radius: 100%;
    border: none;

    z-index: 10000;
  }

  .scenarios {
    height: 20px;
    width: 200px;
  }
}

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) and (max-width: 1000px) {
  .option-action-board {
    margin: 5px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 20px;
  }

  .options-container {
    display: flex;
    flex-direction: column;
    position: absolute;
  }

  .options-box {
    height: 450px;
    width: 300px;
  }

  .option-action-board {
    margin: 5px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }

  .action-board-button,
  .action-board-icon {
    width: 70px;
    height: 70px;
    background-color: transparent;
    border-radius: 100%;
    border: none;

    z-index: 10000;
  }

  .scenarios {
    height: 10px;
    width: 200px;
  }
}

.screen-rotate {
  width: 40px;
  height: 40px;
  padding: 20px;
}

button,
img,
div {
  -webkit-tap-highlight-color: transparent; /* Remove blue background on tap */
  outline: none; /* Remove focus outline */
}

.development {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(58, 53, 53);
  color: white;
  font-family: "Macondo", cursive;
  font-size: 16px;
  padding: 7px;
  margin: 7px;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.active {
  opacity: 1;
}

.inactive {
  opacity: 0.3;
}

.sound-button {
  border: none;
  background-color: transparent;
  transition: 0.5s;
}
.sound-img,
.sound-img-pause {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: rgb(237, 183, 108);
  width: auto;
  max-width: 20px;
  margin-top: 8px;
  padding: 5px;
  border-radius: 30px;
  border: 1px solid rgb(0, 0, 0);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: 0.5s;
}