/* Base Layout and Common Styles
-------------------------------------------------- */
.highlight {
  font-weight: bold;
}

/* Control Highlight Base Styles
-------------------------------------------------- */
.control-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-highlight.left {
  left: 0;
}

.control-highlight.right {
  right: 0;
}

/* Control Highlight States
-------------------------------------------------- */
.control-highlight.success::after {
  /* content: "✓"; */
  animation: none;
  color: var(--green);
}

.control-highlight.wrong {
  opacity: 1;
  background: rgba(255, 0, 0, 0.2);
  animation: wrongFlash 0.3s;
}

/* Message Box Styles
-------------------------------------------------- */
#pregame-msg-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  max-width: 60%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10000;
  gap: 20px;
  text-align: center;
  background-color: var(--dark-grey);
  font-size: 1.7rem;
  z-index: 1;
}

#pregame-msg-box.show-message {
  opacity: 1;
  transform: scale(1);
}

#pregame-msg-box.hide-message {
  opacity: 0;
  transform: scale(0.8);
}



/* Only style the box when it's showing a death message */
#pregame-msg-box.death-message {
  border: 3px solid var(--hot-pink);
  padding: 20px;
}

#pregame-msg-box.death-message p {
  font-size: 1.2rem;
}

@media (min-width: 600px) {
  #pregame-msg-box.death-message p {
    font-size: 1.5rem;
  }
}

#pregame-msg-box .game-title-text {
  color: var(--green);
}

#pregame-msg-box.death-message .death-reason {
  font-size: 0.9rem;
  color: var(--green);
  margin-bottom: 10px;
}

@media (min-width: 600px) {
  #pregame-msg-box.death-message .death-reason {
    font-size: 1.1rem;
  }
}

/* Title Box Styles
-------------------------------------------------- */
.title-box-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem; /* Fixed spacing below title */
}

#pregame-msg-title {
  font-size: clamp(1rem, 3.5rem, 5rem);
  color: var(--hot-pink);
  font-weight: bolder;
  letter-spacing: 16px;
  text-align: center;
}

#tutorial-text{
  /* text-transform: capitalize; */
}

/* Tutorial Text States
-------------------------------------------------- */
#tutorial-text {
  transition: opacity 0.5s ease-in-out, color 0.3s ease-in-out;
  margin-bottom: 1rem;
}

#tutorial-text.success {
  color: var(--green);
}

#tutorial-text.error {
  color: var(--hot-pink);
}

#title-bike {
  font-size: 1.7rem;
  line-height: 31px;
  margin: 1rem 0;
}

.tutorial-content {
  position: absolute;
  width: 100%;
  left: 0;
  /* Position it a fixed distance below the title */
  top: calc(100% - 8rem); /* Adjust this value as needed */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tutorial-element-container {
  position: relative;
  height: 3rem;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#tutorial-bike,
#start-button {
  position: absolute;
  transition: opacity 0.5s ease-in-out;
}

#tutorial-text {
  transition: opacity 0.5s ease-in-out;
  font-size: 2rem;
  margin-bottom: 1rem;
}

#tutorial-bike {
  font-size: 1.6rem;
  line-height: 20px;
  margin: 0;
}

#start-button {
  opacity: 0;
  pointer-events: none;
  animation: buttonPulse 2s infinite;
  z-index: 200;
  margin: 0;
}

#start-button.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Animations
-------------------------------------------------- */
@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes buttonPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes wrongFlash {
  0%, 100% {
    background: transparent;
  }
  50% {
    background: rgba(255, 0, 0, 0.2);
  }
}

/* Media Queries
-------------------------------------------------- */
/* Desktop styles (≥600px) */
@media (min-width: 600px) {
  .control-highlight.active {
    opacity: 1;
    font-size: 5rem;
    color: var(--green);
    margin-top: 5rem;
  }

  .control-highlight.active::after {
    /* content: "<-";
    animation: pulse 2s infinite;
    position: absolute;
    top: calc(6C5% + 10px);  
    right: 2rem;            */
  }
  
  .control-highlight.right.active::after {
    /* content: "->";
    right: auto;
    left: -20px;            */
  }
  

  #pregame-msg-box {
    max-width: 50%;
  }

  #pregame-msg-title {
    font-size: clamp(1rem, 3.5rem, 5rem);
  }
}

/* Mobile styles (<600px) */
@media (max-width: 599px) {
  .control-highlight.active {
    /* background: var(--green); */
    opacity: 1;
    background-image: radial-gradient(var(--light-purp) 0.8px, rgba(0, 0, 0, 0) 0.8px);
    background-size: 2rem 2rem;
  }

  #pregame-msg-box {
    width: 100%;
    max-width: 100%;
  }
}

/* Height-based adjustments */
@media (max-height: 600px) {
  #pregame-msg-title {
    font-size: 2.7rem;
    color: var(--med-purp);
  }
}



.control-area {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  z-index: 100;
}


.bike-direction-arrow {
    position: absolute;
    font-size: 1.7rem;
    color: var(--green);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    animation: arrowBounce 1s infinite;
    font-weight: bold;
}

.bike-direction-arrow.left {
    left: -40px;
}

.bike-direction-arrow.right {
    right: -40px;
}

.bike-direction-arrow.show {
    display: block;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(5px); }
}

.bike-direction-arrow.right {
    animation: arrowBounceRight 1s infinite;
}

@keyframes arrowBounceRight {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-5px); }
}

@media (max-width: 599px) {
  .bike-direction-arrow.left {
    left: -35px; /* Slightly closer on mobile */
  }
  
  .bike-direction-arrow.right {
    right: -35px; /* Slightly closer on mobile */
  }
  
  .bike-direction-arrow {
    font-size: 2rem; /* Slightly smaller on mobile */
  }
}


.bike-direction-arrow.success {
    color: var(--green);
    animation: none; /* Stop bouncing */
    font-size: 2.5rem;
    font-weight: bold;
}