/* Mobile and Responsive Styles */

/* Breakpoints */
@media screen and (max-width: 1024px) {
  /* Existing styles */
  #bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 12px 0;
  }

  .menu-button {
    font-size: 18px;
    padding: 5px 10px;
  }

  body {
    padding-bottom: 60px;
  }


/* Results page container */
.results-splash-panel {
  width: 95%;
  padding: clamp(15px, 3vw, 25px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vh, 15px);
  max-height: 90vh;
  overflow-y: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body.results-shown {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Level Complete - made significantly larger */
.level-complete-title {
  font-size: clamp(3.5em, 12vw, 9.5em);
  margin-bottom: 0.1em;
  text-align: center;
  line-height: 1;
  font-weight: bold;
}

/* Song info - kept clear but secondary */
.results-splash-song-info {
  font-size: clamp(1em, 3vw, 1.em);
  margin-bottom: 0.4em;
  text-align: center;
  font-style: italic;
}

/* Score/Rank container */
.results-splash-result-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0.5em 0;
}

/* Score/Rank values */
.results-splash-value {
  font-size: clamp(2em, 6vw, 2.8em);
}

/* Stars */
.results-splash-star-rating {
  margin: 0.6em 0;
}

.star-wrapper {
  width: clamp(2em, 6vw, 2.8em);
  height: clamp(2em, 6vw, 2.8em);
  margin: 0 clamp(3px, 1vw, 5px);
}

/* Stats container */
.results-splash-stats-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.8em;
  gap: clamp(15px, 4vw, 30px);
}

/* Stat items */
.results-splash-stat-item {
  text-align: center;
}

.results-splash-stat-label {
  font-size: clamp(0.9em, 2.5vw, 1.1em);
  margin-bottom: 0.2em;
}

.results-splash-stat-value {
  font-size: clamp(1.6em, 4.5vw, 2em);
  font-weight: bold;
}

/* Next Level Unlocked button */
.next-level-button {
  font-size: clamp(1.4em, 4vw, 1.8em);
  padding: clamp(10px, 2vw, 15px) clamp(20px, 4vw, 30px);
  margin: 0.8em 0;
}

/* Button container */
.results-splash-button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: clamp(1em, 3vh, 1.5em);
  gap: clamp(15px, 4vw, 30px);
}

/* Regular buttons */
.level-select-button,
.try-again-button {
  padding: clamp(8px, 2.5vw, 12px) clamp(20px, 5vw, 30px);
  font-size: clamp(1em, 3vw, 1.2em);
  white-space: nowrap;
}

/* Small screen adjustments */
@media screen and (max-width: 380px) {
  .level-complete-title {
    font-size: clamp(3em, 10vw, 3.5em);
  }
  
  .results-splash-panel {
    padding: 12px;
    gap: 10px;
  }
  
  .results-splash-stats-container {
    gap: 10px;
  }
}








 /* Modal adjustments */
 .cumulative-score-modal-content {
  padding: 15px;
  width: 95%;
  max-height: 85vh;
}

.cumulative-score-list {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px;
  font-size: 16px;
}

.cumulative-score-list li {
  font-size: 16px;
  padding: 6px;
}

.total-high-score {
  font-size: 20px;
  margin: 15px 0;
}

.next-stage-button {
  font-size: 1.1em;
  padding: 10px 25px;
}

/* Updated button ordering with !important */
.results-splash-button-container {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between !important;
  width: 100%;
  margin-top: 1em;
}

.level-select-button {
  order: 1 !important;
}

.try-again-button {
  order: 2 !important;
}




}

/* Tablet breakpoint */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .results-splash-panel {
    width: 90%;
    max-width: 600px;
  }

  .level-complete-title {
    font-size: 2.5em;
  }

  .results-splash-result-container {
    flex-direction: row;
    justify-content: space-around;
  }

  .results-splash-button-container {
    flex-direction: row;
    justify-content: space-around;
  }

  .level-select-button,
  .try-again-button,
  .next-level-button {
    width: auto;
  }
}

/* Vertical orientation */
@media screen and (max-height: 600px) {
  .results-splash-panel {
    padding: 10px;
  }

  .level-complete-title {
    font-size: 1.8em;
    margin-top: 10px;
  }

  .results-splash-song-info {
    margin: 5px 0 10px;
  }

  .results-splash-star-rating {
    margin: 10px 0;
  }

  .results-splash-button-container {
    margin-top: 10px;
  }

  .level-select-button,
  .try-again-button,
  .next-level-button {
    padding: 8px 30px;
    font-size: 16px;
  }
}

/* Small mobile devices */
@media screen and (max-width: 380px) {
  .level-complete-title {
    font-size: 1.5em;
  }

  .results-splash-value {
    font-size: 1.8em;
  }

  .results-splash-label {
    font-size: 0.9em;
  }

  .star-wrapper {
    width: 30px;
    height: 30px;
  }
}


  /* PLEASE ROTATE ONLY */
  
  /* PLEASE ROTATE ONLY */
  #pleaserotate-backdrop {
    display: none;
}

@media only screen and (orientation: portrait) {
    #pleaserotate-backdrop {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: white;
        z-index: 9999;
    }

    #pleaserotate-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    #pleaserotate-message {
      color: #000 !important;
      font-weight: bold !important;
      font-size: 24px !important;
      z-index: 10000 !important;
      position: relative !important;
  }
  
  #pleaserotate-message small {
      font-size: 18px !important;
      opacity: 0.8 !important;
  }
}

@media screen and (max-width: 1024px) {
  .nav-arrow {
      display: none;
  }
}


  /* Prevents page moving?  */

/* Prevent the body from scrolling */
body {
  overflow: hidden;
}

/* Allow the song list to scroll */
.songSelectList {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS */
}






/* Achievement PANEL MENU BAR Mobile-specific adjustments */
/* Mobile-specific adjustments */
@media (max-width: 767px) {
  .achievements-grid {
      grid-template-columns: 1fr 1fr; /* Two smaller boxes side by side */
      gap: 8px;
      padding: 8px;
      overflow-y: auto;
      max-height: 80%;
  }

  .achievement-item {
      display: flex;
      flex-direction: row; /* Align icon and text horizontally */
      align-items: center;
      padding: 6px; /* Smaller padding for compact layout */
      border-radius: 6px;
      font-size: 0.85em; /* Increased slightly for legibility */
      text-align: left;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.08); /* Subtle background to improve contrast */
  }

  .trophy-icon, .achievementlock-icon {
      width: 20px; /* Smaller icon size */
      height: 20px;
      margin-right: 8px; /* Space between icon and text */
  }

  .achievement-title {
      font-weight: bold;
      font-size: 1.1em; /* Slightly larger for readability */
      color: #FFD700;
  }

  .achievement-description {
      font-size: 0.85em; /* Smaller font for description text */
      color: #ccc;
  }



  
}