@font-face {
  font-family: "TEXAS"; /* The name you will use in your CSS */
  src: url("./fonts/SHADSER.TTF") format("opentype"); /* Path to the OTF file */
  font-weight: 200;
  font-style: normal;
}

/* Prevent user select or menu or context popup  */
html,
body {
  -webkit-user-select: none; /* Chrome/Safari */
  -ms-user-select: none; /* IE */
  user-select: none; /* Standard */
  touch-action: none; /* Prevent touch interactions */
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "TEXAS", sans-serif;
  font-size: 24px;
  color: #000000;
  background-image: url("./img/backgroundImageDalle.webp");
  background-size: cover; /* Cover the entire background while maintaining aspect ratio */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-attachment: fixed; /* Keep the background fixed during scroll */
  margin: 0;
}

.gradient-text {
  text-align: center;
  font-family: "TEXAS";
  font-size: clamp(2rem, 5vw + 1rem, 6rem);
  font-weight: bold;
  background: linear-gradient(
    180deg,
    #58b7d5,
    #e8b43a,
    #994409,
    #58b7d5,
    #e8b43a,
    #994409
  ); /* Vertical looping gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% 250%; /* Ensure the background size is large vertically */
  animation: gradient-animation 5s infinite linear;
  cursor: pointer;
}
.gradient-text:hover {
  filter: invert(0.8);
}

.gradient-textGameOver {
  text-align: center;
  font-family: "TEXAS";
  font-size: clamp(2rem, 5vw + 1rem, 6rem);
  font-weight: bold;
  background: linear-gradient(
    180deg,
    #000000,
    #e7200e,
    #ffffff,
    #000000,
    #e7200e,
    #ffffff
  ); /* Vertical looping gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% 250%; /* Ensure the background size is large vertically */
  animation: gradient-animation 5s infinite linear;
  cursor: pointer;
}

.gradient-textParent {
  position: absolute;
  top: 40%;
  background-color: #000000d2;
  border-radius: 16px;
  animation: pulse 2s infinite ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 16px 8px 16px;
}

@keyframes gradient-animation {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* Slightly enlarges the text */
  }
}

#titleHeaderId {
  color: #15a2ca;
  -webkit-text-stroke: 1px #000000;
  margin: 24px;
}

#mainInfoOverlayId {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  border-radius: 16px;
  background-image: url("img/5_background/layers/air.png");
  background-size: cover;
  background-position: center;
  gap: 8px;
  padding: 32px;
  border: 2px solid black;

  opacity: 0;
  transition: opacity 0.5s ease;

  width: 50%;
  height: 50%;
  overflow-y: auto;
}

#mainInfoOverlayId img {
  width: 24px;
  height: 24px;
}

.infoOverlayChild1 {
  font-size: 16px;
  gap: 8px;
  align-items: center;
}

td {
  padding: 8px;
}

.action-cell {
  display: flex;
  align-items: center;
  gap: 8px; /* Adjust this to change the spacing between the images and the "or" */
}

.action-cell span {
  display: inline-block;
  margin: 0 4px; /* Adjust this for spacing around the "or" text */
}

#closeInfoOverlayId {
  position: absolute;
  z-index: 200;
  right: 5%;
  top: 5%;
  cursor: pointer;
}
#closeInfoOverlayId:hover {
  filter: invert(0.3);
}

canvas {
  position: relative;
  background-color: black;
  border-radius: 16px;
  display: block;
  width: 100%;
  height: 100%;
}

.canvas-container {
  position: relative;
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.lifeDivClass {
  position: absolute;
  top: 6%;
  left: 5%;
  width: 30%;
  height: 4%;
  background-color: #add3e3;
  border-radius: 16px;
  border: 1px solid #c3dae6;
  overflow: hidden;
}
.lifePercentDivClass {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: #e13412;
  transition: width 100ms ease;
}

.lifeDivClass2 {
  position: absolute;
  top: 18%;
  right: 5%;
  width: 30%;
  height: 4%;
  background-color: #add3e3;
  border-radius: 16px;
  border: 1px solid #c3dae6;
  overflow: hidden;
}
.lifePercentDivClass2 {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: #f40000;
  transition: width 100ms ease;
}

.startScreenMainDivClass {
  position: absolute;
  z-index: 11;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("./img/5_background/layers/startScreen.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  display: flex;
  justify-content: center;
}
.startScreenMainDivClass button {
  width: 50%;
  height: 16%;
  margin: 28px 0px 0px 0px;
  border-radius: 16px;
  background-color: #00000023;
  font-size: 24px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  -webkit-text-stroke: 1px #f8c568;
  font-size: 24px;
  color: #0d9fc9;
  border: 2px solid #f8c568;
  cursor: pointer;
}

.endScreenDivClass {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.688);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.endScreenContentDivClass {
  position: relative;
  z-index: 10;
  width: 85%;
  height: 85%;
  background-color: #994509;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 64px;
  font-weight: 900;
  color: #ffffff;
}

.endScreenContentDivClass button {
  width: 50%;
  height: 20%;
  position: relative;
  top: -20px;
  background-color: #000000ae;
  font-size: 32px;
  color: #ffffff;
  -webkit-text-stroke: 1px #000000;
  border-radius: 12px;
  border: 4px solid rgb(255, 255, 255);
  cursor: pointer;
}
.endScreenContentDivClass span {
  position: relative;
  bottom: 22%;
  font-size: 40px;
  -webkit-text-stroke: 1px #000000;
}

.endScreenContentDivClass button:hover {
  background-color: #a1a1a1ae;
}

#gameWonOverlayDivId {
  border: 16px dotted #ffffff;
  background-image: url("./img/endScreenWon.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#gameLostOverlayDivId {
  border: 8px solid #000000;

  background-image: url("./img/endScreenLost.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#fullscreenImgId {
  position: absolute;
  z-index: 11;
  bottom: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  filter: invert(0.8);
}
#fullscreenImgId:hover {
  filter: invert(0.3);
}

#toggleAudioImgId {
  position: absolute;
  z-index: 11;
  top: 14px;
  right: 41%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  filter: invert(0.8);
}
#toggleAudioImgId img {
  width: 32px;
  height: 32px;
  opacity: 0.6;
}
#toggleAudioImgId:hover {
  filter: invert(0.3);
}

#toggleInfoOverlayId {
  position: absolute;
  z-index: 11;
  top: 14px;
  right: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  filter: invert(0.8);
}
#toggleInfoOverlayId img {
  width: 32px;
  height: 32px;
  opacity: 0.6;
}

.mobileControlsMainDivClass {
  position: absolute;
  z-index: 100;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.mobileControlsMainDivClass img {
  width: 14%;
  height: 14%;
  filter: invert(1);
  opacity: 0.6;
}

.mobileChildContainer1Class {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  gap: 48px;
}

#turnMessageOverlayId {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent background */
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  font-size: 2em;
  z-index: 9999; /* Make sure it’s on top of everything */
}

@media only screen and (min-width: 1201px) {
  .canvas-container {
    width: 65%;
  }
}

@media only screen and (max-width: 1200px) {
  .canvas-container {
    width: 80%;
  }

  #mainInfoOverlayId {
  
    width: 75%;
    height: 75%;
  }
  #closeInfoOverlayId {
    /* right: 46%;
    bottom: 12%; */
  }
}

@media only screen and (max-width: 820px) {
  .endScreenContentDivClass {
    font-size: 54px;
    -webkit-text-stroke: 1px #000000;
  }

  .endScreenContentDivClass button {
    width: 70%;
  }

  
}

@media only screen and (max-width: 720px) {
  .canvas-container {
    width: 100%;
  }


}

@media only screen and (max-width: 600px) {
  .endScreenContentDivClass {
    font-size: 40px;
    -webkit-text-stroke: 1px #000000;
  }

  .endScreenContentDivClass button {
    width: 80%;
    height: 30%;
  }

 
}

@media only screen and (max-height: 600px) {
  #titleHeaderId {
    display: none;
  }
}

@media only screen and (max-height: 480px) {
  .canvas-container {
    height: 100vh;
  }
}

@media only screen and (max-width: 400px) {
  .endScreenContentDivClass button {
    width: 80%;
    height: 40%;
    font-size: 24px;
  }
}

@media only screen and (max-width: 360px) {
  .endScreenContentDivClass {
    font-size: 32px;
    -webkit-text-stroke: 1px #000000;
  }

  .endScreenContentDivClass button {
    width: 70%;
  }
}