/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Bungee+Hairline&family=Bungee+Inline&family=Bungee+Outline&family=Bungee+Shade&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import 'login-modal.css';
@import 'stats-overlay.css';
@import 'settings-modal.css';

/*variables*/
:root{
      --white: #F0EDD1;
      --yellow: #ffd700;
      --yellow-opacity: rgba(255, 215, 0, 0.9);
      --yellow-opacity-2: rgba(255, 215, 0, 0.8);
      --yellow-opacity-3: rgba(255, 215, 0, 0.7);
      --red: #b21d00;
      
      /* Media paths - these will be set dynamically via JavaScript */
      --img-main-bg: '';
      --img-rhea: '';
      --img-stone-cold: '';
      --img-wrestler-mode-bg: '';
      --img-entry-number-mode-bg: '';
      --img-mystery-mode-bg: '';
      --img-daredevil-mode-bg: '';
      --img-wrestler-mode-white: '';
      --img-wrestler-mode-white-opacity: '';
      --img-hashtag-white: '';
      --img-hashtag-white-opacity: '';
      --img-question-mark-white: '';
      --img-question-mark-white-opacity: '';
      --img-daredevil-white: '';
      --img-daredevil-white-opacity: '';
      --img-fire-particles: '';
      --img-ready-to-rumble: '';
}  

::-webkit-scrollbar {
      width: 0px;
      background: transparent;
      /* make scrollbar transparent */
}

body {
      overflow: hidden;
}

/* Show/Hide Classes */
.displayNone {
      display: none!important;
} 


/* Global CSS */ 
h1 {
      font-family: 'Bungee', cursive;
      font-size: 140px;
      color: var(--yellow);
}

h2 {
      font-family: 'Bungee', sans-serif;
      font-size: 75px;
      color: var(--yellow);
      letter-spacing: 2px;
}
h3 {
      font-family: 'Bungee', sans-serif;
      font-size: 45px;
      color: var(--yellow);
      letter-spacing: 2px;
}
h4 {
      font-family: 'Bungee', sans-serif;
      font-size: 28px;
      line-height: 1.5;
      color: var(--yellow);
      letter-spacing: 2px;
} 

button {
      font-family: 'Bungee', sans-serif;
      border: none;
}
button:hover, button:focus {
      outline: none;
      background: var(--yellow);
      cursor: pointer;
      transition: background .5s;
}

.buttonSmall {
      background:  var(--white);
      padding: 20px;
      width: 100%;
      color: #000;
      transition: background .5s; 
      border-radius: 0 20px;
      font-size: 22px;
      letter-spacing: 1.5px;
}
.buttonSmall:nth-child(1) {
      border-radius: 20px 0;
} 

.bgVid {
      position: fixed;
      height: 100vh;
      width: 100vw;
      object-fit: cover;
      z-index: -1;
}

.bgImg {
      position: fixed;
      height: 100vh;
      width: 100vw;
      z-index: 0;
      backdrop-filter: brightness(30%);
}

/* Setup Screens */
main {
      background-image: var(--img-main-bg);
      background-position: 0%;
      background-repeat: no-repeat; 
      background-size: 100vw 100vh; 
      position: fixed; 
      width: 100%;
      height: 100%;
      transition: background-size .5s, background-position .5s;
}
main.defaultBg .bgImg{
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      transition: all .5s;
}
main.wrestlerModeBg .bgImg{ 
      width: 130vw;
      height: 130vh;
      transition: all .5s
}
main.entryNumberModeBg .bgImg{ 
      width: 140vw;
      height: 140vh;
      transition: all .5s
}

main.mysteryModeBg .bgImg{ 
      width: 110vw;
      height: 110vh;
      transition: all .5s
}
main.daredevilModeBg .bgImg{ 
      width: 150vw;
      height: 150vh;
      transition: all .5s
}


main > * {
      height: 100%;
      width: 100%;
}
 
/* Choose Game Mode Screen */

#chooseGameMode {
      background-image: var(--img-rhea), var(--img-ready-to-rumble), var(--img-stone-cold);
      background-position: 0%, 60px 50px, 0%;
      background-repeat: no-repeat; 
      background-size: cover, 45vw 45vh, cover; 
      display: grid;
      grid-template-columns: 5fr 3fr; 
      position: relative;
      top: 0;
      left: 0; 
      transform: translateY(0);
      transition: all 0.5s;
      backdrop-filter: blur(3px);
}
#chooseGameMode.defaultBg {
      background-image: var(--img-rhea), var(--img-ready-to-rumble), var(--img-stone-cold);
      background-position: 0%, 60px 50px, 0%;
      background-repeat: no-repeat; 
      background-size: cover, 45vw 45vh, cover; 
      transition: background-position .5s, background-size .5s;
}
#chooseGameMode.wrestlerModeBg {
      background-image: var(--img-wrestler-mode-bg), url(), url(); 
      background-position: 0%, 0%, 0%; 
      background-size: cover, 0, cover; 
      transition: background-position .5s, background-size .5s;
} 
#chooseGameMode.entryNumberModeBg {
      background-image: var(--img-entry-number-mode-bg), url(), url(); 
      background-position: 0%, 0%, 0%; 
      background-size: cover, 0, 0; 
      transition: background-position .5s, background-size .5s;
}
#chooseGameMode.mysteryModeBg {
      background-image: var(--img-mystery-mode-bg), url(), url(); 
      background-position: 0%, 0%, 0%; 
      background-size: cover, 0, 0; 
      transition: background-position .5s, background-size .5s;
}
#chooseGameMode.daredevilModeBg {
      background-image: var(--img-daredevil-mode-bg), url(), url(); 
      background-position: 0%, 0%, 0%; 
      background-size: cover, 0, 0; 
      transition: background-position .5s, background-size .5s;
}
#chooseGameMode.bgSlideOut {
      background-position: 0 70vh, 0 -70vh, 0 75vh;
      background-size: cover, 50vw 50vh, cover; 
      transition: background-position .5s, background-size .5s;
} 
#chooseGameMode.slideOutDown {
      transform: translateY(100%);
      transition: transform 0.5s;
}

.modeInfo {
      transform: translateX(-100%);
      transition: transform 0.5s;
      background: rgba(240,237,209, 0.6);
      backdrop-filter: blur(10px);
      max-width: 50%;
      padding: 50px 50px 50px 100px;
      margin-top: 80px;
      border-bottom-right-radius: 40px;
      position: absolute;
}
.modeInfo.slideInLeft {
      transform: translateX(0);
      transition: transform 0.5s;
} 
.modeInfo h2 {
      margin: 0 0 20px 0;
} 
.modeInfo p {
      font-family: 'Noto Sans', sans-serif;
      font-size: 36px;
      line-height: 1.5;
      color: #000;
      margin: 0;
}

#chooseGameModeRight {
      padding: 30px 60px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
}

#gameModeContainer {
      display: flex;
      flex-direction: column;
      gap: 30px;
      justify-content: center;
} 
 
.modeButtons {
      display: block;
      text-align: right;
      transition: all .5s;
      backdrop-filter: blur(10px); 
      font-family: 'Bungee', sans-serif;
      font-size: 36px;
      border-radius: 40px 0;
      padding: 0 40px;
      color: var(--white);
} 

.modeButtons:hover, .modeButtons:focus {
      cursor: pointer;
      transition: all .5s;
      outline: none;
      color: #000;
      font-size: 44px;
}


.modeButtons:nth-child(1) {
      background: var(--img-wrestler-mode-white), #000;
      background-position: 30px 12px ; 
      background-size: 90px 90px ;
      background-repeat: no-repeat;
}
.modeButtons:nth-child(1):hover, .modeButtons:nth-child(1):focus {
      background: var(--img-wrestler-mode-white-opacity), var(--yellow);
      background-position: center;
      background-size: cover;
}


.modeButtons:nth-child(2) {
      background: var(--img-hashtag-white),  #000;
      background-position: 30px 12px ; 
      background-size: 90px 90px ;
      background-repeat: no-repeat;
}
.modeButtons:nth-child(2):hover, .modeButtons:nth-child(2):focus {
      background: var(--img-hashtag-white-opacity),  var(--yellow);
      background-position: center;
      background-size: cover; 
}

.modeButtons:nth-child(3) {
      background: var(--img-question-mark-white),  #000;
      background-position: 30px 14px ; 
      background-size: 90px 80px ;
      background-repeat: no-repeat;
}

.modeButtons:nth-child(3):hover, .modeButtons:nth-child(3):focus {
      background: var(--img-question-mark-white-opacity), var(--yellow);
      background-position: center;
      background-size: cover; 
}
.modeButtons:nth-child(4) {
      background: var(--img-daredevil-white),  #000;
      background-position: 30px 10px ; 
      background-size: 90px 90px ;
      background-repeat: no-repeat;
}
.modeButtons:nth-child(4):hover, .modeButtons:nth-child(4):focus {
      background: var(--img-daredevil-white-opacity), var(--yellow);
      background-position: center;
      background-size: cover; 
}

#rulesInstructionsButtonsContainer {
      margin-top: 40px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 20px;
}

.modal {
      position: absolute;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.5s;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
}
.modal.fadeIn {
      opacity: 1;
      z-index: 9999;
      transition: opacity 0.5s;
}

.modalContent {
      display: grid;
      grid-template-columns: 2fr 3fr;
      grid-gap: 40px;
      height: 90vh;
      width: 90vw;
      border-radius: 40px;
}

.modalContentLeft {
      background: var(--img-fire-particles), var(--img-main-bg);
      border-radius: 40px;
}
.modalContentLeft div {
      background: rgba(0,0,0,.2);
      backdrop-filter: blur(4px);
      height: 100%;
      width: 100%;
      display: inline-block;
      border-radius: 40px;
      border: 3px solid var(--white);
}
.modalContentLeft p {
      color: var(--white);
      font-size: 36px;
      line-height: 1.5;
      margin: 30px 40px;
      letter-spacing: 1px;
}
.modalContentLeft h2 {
      margin: 60px 40px;
      letter-spacing: 1px;
} 

.modalContentRight {
      backdrop-filter: blur(10px);
      padding: 20px 40px;
      border-radius: 40px;
      border: 3px solid var(--white);
      text-align: left;
      letter-spacing: 1px;

}
.modalContentRight p {
      color: var(--white);
      font-size: 30px;
      line-height: 1.3;
      letter-spacing: 1px;
      letter-spacing: 1px;

}

.modalClose {
      text-align: center;
      color: black;
      line-height: 1;
      font-size: 35px;
      position: absolute;
      display: flex;
      right: 40px;
      top: 40px;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      background: var(--white);
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 10000;
      border: none;
      transition: all 0.3s ease;
}

.modalClose:hover, .modalClose:focus {
      background: var(--yellow);
      transform: scale(1.1);
      outline: none;
}

.modalSteps {
      opacity: 0;
      z-index: -1;
      transition: opacity 0.5s;
}
.modalSteps.fadeIn {
      opacity: 1;
      z-index: 9999;
      transition: opacity 0.5s;
}

.modalNextButton, .modalDoneButton {
      position: absolute;
      bottom: 30px;
      right: 40px;
      width: 200px;
      border-radius: 20px 0 20px 0;
}

.disclaimer {
      color: var(--white);
      font-family: 'Noto Sans', sans-serif;
      font-size: 14px;
      margin: 20px 0;
      position: absolute;
      bottom: 0;
      right: 20px;
      text-align: right;
}



/* Choose Year Screen */
#chooseYear {
      transform: translateX(100%);
      transition: transform 0.5s;
      backdrop-filter: blur(3px);
}
#chooseYear.slideInRight {
      transform: translateX(0);
      transition: transform 0.5s; 
}
#chooseYear.slideOutLeft {
      transform: translateX(-100%);
      transition: transform 0.5s; 
}

#chooseYearTop {
      overflow: hidden;
      text-align: center;
}

#chooseYearBottom {
      background: rgba(0, 0, 0, .7);
      overflow-x: scroll;
}
  
#yearButtonContainer {
      display: flex;
      flex-direction: row;
      overflow-x: visible; 
      margin-left: 50%;
      transform: translateX(-50%);
      padding: 20px 0;
}

.yearButton {
      font-family: 'Bungee Outline', cursive;
      background: none;
      border: none;
      font-size: 15vw;
      color: rgba(255, 214, 0, .4);
      text-shadow: 4px 4px 30px var(--yellow);
      margin-right: 100px;
      position: relative;
}

.yearButton[data-automated]::after {
      content: "Automated";
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 2.5rem;
      font-family: sans-serif;
      color: rgba(255, 214, 0, .4);
      text-shadow: none;
      padding: 5px 10px;
      border-radius: 4px;
      transition: color 0.3s;
}

.yearButton:focus, .yearButton:hover {
      outline: none;
      color: var(--yellow);
      cursor: pointer;
      text-shadow: none;
      background: none;
}

.yearButton:focus[data-automated]::after, .yearButton:hover[data-automated]::after {
      color: var(--yellow);
      text-shadow: none;
}

#retryButton {
      position: fixed;
      top: 0%;
      left: 0%;
      z-index: 9999;
}
 

/* Choose WPP Screen */
#chooseWPP {
      transform: translateX(100%);
      transition: transform 0.5s;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 40px;
      backdrop-filter: blur(3px);
}
#chooseWPP.slideInRight {
      transform: translateX(0);
      transition: transform 0.5s; 
}
#chooseWPP.slideOutLeft {
      transform: translateX(-100%);
      transition: transform 0.5s; 
}

#chooseWPP h1 {
      font-size: 110px;
      margin: 20px 0;
}

.setupYearH1 {
      font-family: 'Bungee Outline', cursive;
      margin: 0;
      font-size: 110px;
}

#chooseWPPLeft {
      padding-left: 80px;
      display: flex;
      flex-direction: column ;
      justify-content: center;
}

#chooseWPPRight {
      display: flex;
      flex-direction: column ;
      justify-content: center;
      align-items: center;
}

.wppButton {
      background: #000;
      border: none;
      font-size: 60px;
      color: var(--white);
      width: 400px;
      height: 110px;
      border-radius: 0 40px 0 0;
      margin: 20px 0;
}

/* Choose Players Screen */
#choosePlayers {
      transform: translateX(100%);
      transition: transform 0.5s;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 40px;
      backdrop-filter: blur(3px);
}
#choosePlayers.slideInRight {
      transform: translateX(0);
      transition: transform 0.5s; 
}
#choosePlayers.slideOutLeft {
      transform: translateX(-100%);
      transition: transform 0.5s; 
}

#choosePlayersLeft {
      padding-left: 80px;
      display: flex;
      flex-direction: column ;
      justify-content: center;
}

#choosePlayersLeft h1 {
      margin: 20px 0;
}

#choosePlayersRight {
      display: flex;
      flex-direction: column ;
      justify-content: center;
      align-items: center;
      padding: 20px 200px;
}

#choosePlayersRight h4 {
      margin: 40px 0 20px 20px;
}

.choosePlayersRightSpan {
      font-size: 24px;
      font-weight: 500;
      color: #fff;
      font-family: 'Noto Sans', sans-serif;
}



#choosePlayersRight textarea {
      overflow: auto;
      height: 80%;
      width: 90%;
      color: var(--white);
      background: rgba(0,0,0,.7);
      font-size: 50px;
      font-family: 'Bungee', sans-serif;
      outline: none;
      border: 2px inset #333;
      resize: none;
      padding: 30px;
      border-radius: 40px;
      transition: box-shadow .5s;
      line-height: 1.5;
      letter-spacing: 2px;
}

#choosePlayersRight textarea:focus {
      box-shadow: 0 0 30px var(--yellow);
      transition: box-shadow .5s;
}

#choosePlayersButton {
      width: 350px;
      font-size: 30px;
}



/* Loader animation */  
#loader {
      position: fixed;
      top: 0;
      z-index: 9999;
      backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      background-color: rgba(0,0,0,.6); 
      align-items: center;
      justify-content: center;
}
#loader h2 {
      color: var(--white);
      font-size: 55px;
}


.brokenCircle {
      margin-top: 50px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: var(--yellow);
      clip-path: polygon(50% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%, 50% 0%);
    }
    
    
    /* define the animation */
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    /* apply the animation to an element */
    .spinner {
      /* other styles */
      animation: spin 1s linear infinite;
    }

/* Review Screen */
#reviewScreen {
      transform: translateX(100%);
      transition: transform 0.5s;
      display: flex;
      flex-direction: column;
      backdrop-filter: blur(3px);
      height: 100vh;
      overflow: hidden;
}

#reviewScreen.slideInRight {
      transform: translateX(0);
      transition: transform 0.5s; 
}
#reviewScreen.slideOutLeft {
      transform: translateX(-100%);
      transition: transform 0.5s; 
}

#reviewScreenTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 40px 80px;
}


#buttonFrame {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

#buttonFrame .buttonSmall {
      font-size: 24px;
    padding: 20px 40px;
    letter-spacing: 2px;
}

#reviewScreenBottom {
      padding: 0 80px 100px;
      overflow-y: auto;
      flex: 1;
      height: calc(100vh - 200px);
}

.playerGrid {
      grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
      display: grid;
      grid-gap: 30px;
}

.playerSection, .extraWrestlers {
      display: flex;
      flex-direction: column;
      background: #000;
      border-radius: 40px;
      align-self: flex-start;
}

.playerSection h2, .extraWrestlers h2 {
      font-size: 36px;
      background: var(--white);
      color: #000;
      text-align: center;
      border-radius: 40px 40px 0 0;
      padding: 20px 0 40px;
      margin: 0;
      letter-spacing: 2px;
}

.listOfWrestlers {
      background: #000;
      color: var(--white);
      font-size: 24px;
      font-family: 'Bungee' , sans-serif;
      border-radius: 40px;
      margin-top: -30px;
      padding: 30px 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px 15px;
}

.wrestlerCard p {
      margin: 0;
      font-family: 'Noto Sans', sans-serif;
      font-weight: 600;
      font-size: 30px;
      letter-spacing: 1.5px;
}

.addExtra.buttonSmall {
      width: 60%;
      text-align: center;
      margin: 0 auto 20px;
      padding: 15px;
      font-size: 20px;
      letter-spacing: 1.5px;
}

/* National Anthem Screen */  
#nationalAnthemScreen {
      transform: translateX(100%);
      transition: transform 0.5s;
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
}

#nationalAnthemScreen.slideInRight {
      transform: translateX(0);
      transition: transform 0.5s; 
}
#nationalAnthemScreen.slideOutLeft {
      transform: translateX(-100%);
      transition: transform 0.5s; 
}
  
  #nationalAnthemVideo {
      width: 100vw;
      height: 100vh;
      object-fit: cover;
  }
  
  #skipIntro {
      position: absolute;
      bottom: 100px;
      right: 100px; 
      z-index: 9999;  
      width: 200px;
      height: 100px;
  }


/* Game Screen */ 
#gameScreen {
      display: flex;
      transform: translateY(100%);
      transition: transform 0.5s;
      background: rgba(255,255,255,.1);
      backdrop-filter: blur(4px);
  }

  #gameScreen.slideInUp {
      transform: translateY(0);
      transition: transform 0.5s; 
  }

  #gameScreen.slideOutLeft {
      transform: translateX(-100%);
      transition: transform 0.5s; 
  }
  
  #gameScreenLeft {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      top: 0;
      z-index: 9999;
      width: 85vw;
      height: 100vh;
      overflow: hidden;
      padding: 0 0 0 10px;
  }
  
  #plexVideo {
      width: 100%;
      height: 85%;
      border-radius: 40px;
      object-fit: cover;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(5px);
  }

  #scoreboard {
      background: #000;
      border-radius: 0 0 40px 40px;
      display: grid;
      grid-template-columns: 1fr 4fr 1fr;
      grid-gap: 10px;
      padding: 8px 20px;
      align-items: center;
      text-align: center;
      font-family: 'Noto Sans', sans-serif;
      margin-bottom: 10px;
  }
  
  #scoreboard h5 {
      color: var(--yellow);
      font-family: 'Bungee Hairline', sans-serif;
      font-size: 40px;
      text-shadow: 4px 4px 30px var(--yellow);
      margin: 0;
  }

  #scoreboardEntryTracker {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
  }

  #scoreboardEntryCount, #scoreboardEntryTotal {
      color: var(--yellow);
      font-family: 'Bungee Hairline', sans-serif;
      font-size: 40px;
      text-shadow: 4px 4px 30px var(--yellow);
  }

  #nextWrestler {
      background: none;
      padding: 0;
      color: var(--white);
      font-size: 28px;
      margin: 0 auto;
      font-family: 'Noto Sans';
      letter-spacing: 1.1px;
      line-height: 2;
  }
  #nextWrestler:hover {
      color: var(--yellow);
      transition: all .5s;
  }

  #gameScreenLeft .playerGrid {
      height: 100%;
      background: #000;
      border-radius: 40px 40px 0 0;
      overflow-y: hidden;
      overflow-x: hidden;
      padding: 0;
      flex-direction: row;
      flex-wrap: nowrap;
      padding: 0 20px;
      display: flex;
      overflow-x: auto;
      align-items: center;
      margin-top: 10px;
      max-height: 90px;
  }

  #gameScreenLeft .playerSection {
      display: flex;
      flex-direction: row;
      flex-shrink: 0;
      flex-grow: 0;
      white-space: nowrap;
      background: none;
      border-radius: 0;
  }
   
  #gameScreenLeft .listOfWrestlers {
      color: var(--white);
      font-size: 24px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      background: none;
  }
  
  
  #gameScreenLeft .wrestlerCard p, #gameScreenLeft .wrestlerCard {
      font-size: 32px;
      letter-spacing: 2px;
      margin: 0 10px 0 0;
      font-family: 'Noto Sans', sans-serif;
      font-weight: 600;
      line-height: 2.7;
      letter-spacing: 3px;
  } 

  #gameScreenLeft .wrestlerCard p {
      opacity: .8;
  }
  
  #gameScreenLeft .playerSection h2 {
      font-size: 38px;
    display: inline-block;
    text-align: center;
    margin: 0 10px;
    letter-spacing: 5px;
    background: none;
    color: var(--yellow);
  }

  .fade-in {
      opacity: 1;
      transition: opacity .5s;
    }
    

  .wrestlerCard.active p {
      opacity: 1;
      color: var(--yellow);
  }

  .wrestlerCard.dead {
      color: var(--red);
  }
   
  #gameScreenRight {
      width: 15%;
      height: 100vh;
      overflow: hidden;
      z-index: 9999;
      display: block;
      padding: 10px 10px 0;
  }

  #gameScreenRight h4 {
      margin: 0 0 20px;
      letter-spacing: 2px;
      text-align: center;
  }

  #notificationContainer {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      justify-content: flex-start;
      align-items: center;
      overflow-y: scroll;
  }

  .notification {
      background: var(--white);
      border-radius: 40px 40px 0 40px;
      width: 100%;
      height: fit-content;
      text-align: center;
      transform: translateY(-150%);
      transition: all .5s;
      margin-bottom: 10px;
  }

  .notification h3 {
      font-family: 'Noto Sans', sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 30px;
  }

  .notification h3 span {
      font-family: 'Bungee', sans-serif;
      font-size: 32px;
      margin-top: 5px;
      display: block;
      letter-spacing: 2px;
  }

  .notification.reveal {
    transform: translateY(0);
    transition: all .5s;
  }

  .notificationWrestlerName {
      color: var(--yellow);
      background: black;
      border-radius: 40px 40px 40px 0;
      padding: 25px 20px 20px 20px;
      margin: 0;
      font-size: 28px;
  }

  .userName {
      color: #000;
      font-size: 28px;
      margin: 20px;
  }


.notification.dead .notificationWrestlerName {
      color: red;
}

  /* Resize player grid depending on amount of players */

  /* Grid Large */
  #playerGrid.gridLarge {
      grid-template-columns: 1fr 1fr;
  }
 
  #playerGrid.gridLarge .playerSection h2 {
      font-size: 26px;
  }
  
  #playerGrid.gridLarge .listOfWrestlers {
      grid-template-columns: 1fr;
      grid-gap: 20px;
 }


 /* Grid Small */
 #playerGrid.gridSmall {
      grid-template-columns: 1fr 1fr;
  }
 
  #playerGrid.gridSmall .playerSection h2 {
      font-size: 24px;
  } 
  
  #playerGrid.gridSmall .listOfWrestlers {
      grid-template-columns: 1fr;
      grid-gap: 15px;
 }


/* Award Screen */  

#showAwards {
      width: 100%;
}

#awardsScreen {
      transform: translateX(100%);
      transition: transform 0.5s;
      position: fixed;
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
      background: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(10px);
}

#awardsScreen .modalClose {
      position: fixed;
      right: 40px;
      top: 40px;
      z-index: 10000;
}

#awardsScreen.slideInRight {
      transform: translateX(0);
      transition: transform 0.5s; 
}

#awardsScreenTop {
      text-align: center;
      padding: 40px 0;
}

#awardsScreenTop h1 {
      margin: 0;
      color: var(--yellow);
      font-size: 60px;
}

#awardsScreenBottom {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      position: relative;
}

.award {
      text-align: center;
      max-width: 800px;
      padding: 0 20px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
}

.award.fadeIn {
      animation: fadeIn 0.5s ease-in forwards;
}

.award.fadeOut {
      opacity: 0;
      transition: opacity 0.5s;
}

.awardInfo {
      margin-bottom: 40px;
}

.awardDescription {
      color: var(--yellow);
      font-family: 'Bungee', sans-serif;
      font-size: 48px;
      margin: 0 0 20px 0;
}

.awardWhite {
      color: var(--white);
      font-size: 34px;
      margin: 10px 0;
}

.awardYellow {
      color: var(--yellow);
      font-family: 'Bungee', sans-serif;
      font-size: 40px;
      margin: 20px 0;
}

.awardWhite.fadeIn, .awardYellow.fadeIn {
      animation: fadeIn 0.5s ease-in forwards;
}

.awardWinner {
      margin: 40px 0;
}

.awardButtons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      position: relative;
      margin-top: 40px;
}

.revealWinner, .awardNext {
      width: 300px;
}

.revealWinner.fadeIn, .awardNext.fadeIn {
      animation: fadeIn 0.5s ease-in forwards;
}

.revealWinner.fadeOut, .awardNext.fadeOut {
      opacity: 0;
      transition: opacity 0.5s;
}

.displayNone {
      display: none !important;
}

@keyframes fadeIn {
      from {
            opacity: 0;
      }
      to {
            opacity: 1;
      }
}

/* Media Queries */
/* Laptop CSS */
@media (max-width: 1900px) and (min-width: 1201px) {
     
      h1 {
            font-size: 100px;
      }

      h2 {
           font-size: 45px;
      }

      h3 {
            font-size: 30px;
      }
      


      .buttonSmall {
            font-size: 18px;
            padding: 10px;
      }

      .modeInfo {
            max-width: 40%;
      }
      .modeInfo p {
            font-size: 26px;
      }

      .modeButtons {
            font-size: 26px;
            border-radius: 40px 0;
            padding: 0 30px;
            color: var(--white);
      } 

      .modeButtons:hover, .modeButtons:focus {
            font-size: 32px;
      }

      .modeButtons:nth-child(1) {
            background-position: 20px 5px ; 
            background-size: 70px  70px ;
      }

      .modeButtons:nth-child(2) {
            background-position: 20px 5px ; 
            background-size: 70px  70px ;
      }

      .modeButtons:nth-child(3) {
            background-position: 20px 10px ; 
            background-size: 70px 60px ;
      }

      .modeButtons:nth-child(4) {
            background-position: 20px 5px ; 
            background-size: 70px  70px ;
      }

      #loader h2 {
            font-size: 40px;
      }
      
      .brokenCircle {
            width: 150px;
            height: 150px;
      }

      #chooseWPP h1 {
            font-size: 90px;
            margin: 0;
      }

      #chooseWPP h1.setupYearH1 {
            font-size: 75px;
      }

      .wppButton {
            width: 300px;
            height: 100px;
            font-size: 45px;
      }

      .setupYearH1 {
            font-size: 75px;
      }

      #choosePlayersLeft h1 {
            margin: 0;
      }

      #choosePlayersRight {
            padding: 20px 100px;
      }

      #choosePlayersButton {
            width: 250px;
            font-size: 24px;
        }

        #choosePlayersRight textarea {
            font-size: 30px;
        }


      #buttonFrame .buttonSmall {
            font-size: 20px;
            padding: 15px 20px;
            letter-spacing: 1.5px;
      }

      #reviewScreenBottom {
            padding: 0 40px 80px;
      }

      .playerGrid {
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      }

      .playerSection h2, .extraWrestlers h2 { 
            font-size: 26px;
            padding: 15px 0 50px;
      }

      .listOfWrestlers {
            font-size: 20px;
            padding: 30px 15px;
            grid-gap: 10px;
            margin-top: -40px;
      }

      .wrestlerCard p {
            font-size: 20px;
            letter-spacing: normal;
      }

      .addExtra.buttonSmall {
            width: 70%;
            font-size: 14px;
            margin: 0 auto 15px;
      }

      #skipIntro {
            bottom: 70px;
            right: 70px;
            width: 150px;
            height: 60px;
            font-size: 16px;
        }

        #scoreboard {
            padding: 5px;
        }

        #scoreboard h5 {
            font-size: 30px;
        }
        #nextWrestler {
            font-size: 18px;
            letter-spacing: 0.5px;
        }

        #gameScreenRight h4 {
            margin: 0 0 10px;
            font-size: 22px;
            letter-spacing: .5px;
        }

        .notification h3 {
            font-size: 20px;
            letter-spacing: .5px;
        }

        .notification h3 span {
            font-size: 24px;
            letter-spacing: .5px;
        }

        .notificationWrestlerName {
            padding: 15px 10px;
        }

        .userName {
            margin: 15px 10px;
        }

        #gameScreenLeft .wrestlerCard p, #gameScreenLeft .wrestlerCard {
            font-size: 22px;
            letter-spacing: 1px;
            margin: 0 5px 0 0;
            line-height: 4;
        }


      #gameScreenLeft .playerSection h2 {
          font-size: 30px;
          letter-spacing: 1px;
      }

} /* End Laptop CSS */

/* Tablet CSS */
@media (max-width: 1200px) and (min-width: 901px) {
      h1 {
            font-size: 80px;
      }

      h3 {
            font-size: 30px;
      }

      h4 {
            font-size: 24px;
      }

      #chooseGameMode {
            grid-template-columns: 1fr 1fr;
      }

      #chooseGameModeRight {
            padding: 30px 30px 30px 100px;
      }

      #gameModeContainer {
            grid-gap: 15px;
      }

      .modeButtons {
            font-size: 26px;
            border-radius: 40px 0;
            padding: 0 30px;
            color: var(--white);
      } 

      .modeButtons:hover, .modeButtons:focus {
            font-size: 32px;
      }

      .modeButtons:nth-child(1) {
            background-position: 20px 5px ; 
            background-size: 70px  70px ;
      }

      .modeButtons:nth-child(2) {
            background-position: 20px 5px ; 
            background-size: 70px  70px ;
      }

      .modeButtons:nth-child(3) {
            background-position: 20px 10px ; 
            background-size: 70px 60px ;
      }

      .modeButtons:nth-child(4) {
            background-position: 20px 5px ; 
            background-size: 70px  70px ;
      }

      .buttonSmall {
            font-size: 16px;
            padding: 10px;
      }

      #chooseYearTop {
            padding: 50px 200px;
      }

      #loader h2 {
            font-size: 40px;
            text-align: center;
      }
      .brokenCircle {
            width: 100px;
            height: 100px;
      }

      #chooseWPP h1 {
            font-size: 80px;
      }

      .wppButton {
            font-size: 40px;
            width: 300px;
            height: 100px;
            margin: 10px 0;
      }

      #choosePlayersRight {
            padding: 20px 50px;
      }

      #choosePlayersRight textarea {
            width: 90%;
            font-size: 40px;
      }

      #reviewScreenTop {
            padding: 20px 30px;
      }

      #buttonFrame .buttonSmall {
            font-size: 18px;
            padding: 15px 20px;
            letter-spacing: 1.5px;
      }

      #reviewScreenBottom {
            padding: 0 30px 40px;
      }

      .setupYearH1 {
            font-size: 60px;
      }

      .playerGrid {
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      }

      .playerSection h2, .extraWrestlers h2 { 
            font-size: 26px;
            padding: 15px 0 50px;
      }

      .listOfWrestlers {
            font-size: 20px;
            padding: 30px 15px;
            grid-gap: 10px;
            margin-top: -40px;
      }

      .wrestlerCard p {
            font-size: 20px;
            letter-spacing: normal;
      }

      .addExtra.buttonSmall {
            width: 70%;
            font-size: 14px;
            margin: 0 auto 15px;
      }

      #skipIntro {
            bottom: 70px;
            right: 70px;
            width: 150px;
            height: 60px;
            font-size: 16px;
        }

        #scoreboard {
            padding: 5px;
        }

        #scoreboard h5 {
            font-size: 30px;
        }
        #nextWrestler {
            font-size: 18px;
            letter-spacing: 0.5px;
        }

        #gameScreenRight h4 {
            margin: 0 0 10px;
            font-size: 22px;
            letter-spacing: .5px;
        }

        #gameScreenRight .playerGrid {
            max-height: 60px;
        }

        .notification h3 {
            font-size: 20px;
            letter-spacing: .5px;
        }

        .notification h3 span {
            font-size: 24px;
            letter-spacing: .5px;
        }

        .notificationWrestlerName {
            padding: 15px 10px;
        }

        .userName {
            margin: 15px 10px;
        }

        #gameScreenLeft .wrestlerCard p, #gameScreenLeft .wrestlerCard {
            font-size: 22px;
            letter-spacing: 1px;
            margin: 0 5px 0 0;
            line-height: 4;
        }


      #gameScreenLeft .playerSection h2 {
          font-size: 30px;
          letter-spacing: 1px;
      }


} /* End Tablet CSS */


/* Mobile CSS */
@media (max-width: 900px) {
      h1 {
            font-size: 40px;
      }
      h3 {
            font-size: 30px;
      }

      h4 {
            font-size: 24px;
      }

      main.defaultBg, main.wrestlerModeBg, main.entryNumberModeBg, main.mysteryModeBg, main.daredevilModeBg {
            background-size: cover, cover;
      }
      #chooseGameMode {
            display: flex;
            justify-content: center;
            overflow-y: scroll;
            backdrop-filter: blur(1px);
      }
      #chooseGameMode.defaultBg {
            background-image: none;
            background-position: center 30px;
            background-repeat: no-repeat;
            background-size: 70%;
      }
      #chooseGameModeLeft {
            display: none;
      }
      #chooseGameModeRight {
            padding: 20px;
      }

      .buttonSmall {
            font-size: 16px;
            padding: 10px;
      }

      .modeButtons {
            font-size: 20px;
            border-radius: 40px 0;
            padding: 0 30px;
            color: var(--white);
      } 

      .modeButtons:hover, .modeButtons:focus {
            font-size: 26px;
      }

      .modeButtons:nth-child(1) {
            background-position: 20px 5px ; 
            background-size: 70px  70px ;
      }

      .modeButtons:nth-child(2) {
            background-position: 20px 5px ; 
            background-size: 70px  70px ;
      }

      .modeButtons:nth-child(3) {
            background-position: 20px 10px ; 
            background-size: 70px 60px ;
      }

      .modeButtons:nth-child(4) {
            background-position: 20px 5px ; 
            background-size: 70px  70px ;
      }

      .modal {
            width: 100vw;
            height: 100vh;
      }

      .modalContent {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            height: 100vh;
            width: 100vw;
            border-radius: 0;
      }
      .modalContentLeft div, .modalContentRight {
            border-radius: 0;
            border: none;
      }

      .modalContentLeft p, .modalContentRight p {
            font-size: 22px;
            margin: 20px;
      }
      .modal h2 {
            margin: 20px;
            font-size: 30px;
        }

        .modalContentRight {
            padding: 0;
        }

        .modalSteps h3, .modalSteps h4 {
            margin: 20px;
        }

        .modalClose {
            display: none;
        }

        .modalNextButton, .modalDoneButton {
            position: relative;
            border-radius: 0px;
            right: auto;
            bottom: auto;
            width: 100%;
            margin-bottom: 40px;
        }

        #chooseYear {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .yearButton {
            font-size: 100px;
        }

        #loader h2 {
            font-size: 30px;
            text-align: center;
      }
      .brokenCircle {
            width: 60px;
            height: 60px;
      }

      #chooseWPP {
            grid-template-columns: 1fr;
            padding: 0;
            grid-gap: 10px;
            overflow-y: scroll;
      }

      #chooseWPPLeft {
            padding: 0 20px;
      }

      #chooseWPP h1 {
            font-size: 50px;
            text-align: center;
      }

      #chooseWPP h3 {
            text-align: center;
      }

      #chooseWPPRight {
            margin-bottom: 40px;
      }

      .wppButton {
            background: rgb(0, 0, 0);
            border: none;
            font-size: 30px;
            color: var(--white);
            width: 70%;
            height: 70px;
            border-radius: 0px 40px 0px 0px;
            margin: 10px auto;
        }

        #choosePlayers {
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow-y: scroll;
        }

        #choosePlayersLeft {
            padding: 0 20px;
        }

        #choosePlayersRight {
            padding: 0 20px;
        }
        .setupYearH1 {
            font-size: 50px;
        }

        #choosePlayersRight textarea {
            font-size: 20px;
            width: 90%;
            height: 200px;
        }

        #choosePlayersButton {
            width: 250px;
            font-size: 20px;
        }


        #reviewScreenTop {
            padding: 20px;
            flex-direction: column;

        }

        #buttonFrame {
            display: flex;
            flex-direction: column;
            margin: 20px auto;
            gap:  10px;
        }

        #buttonFrame .buttonSmall {
            font-size: 18px;
            padding: 20px;
            letter-spacing: 1px;
        }

        #reviewScreenBottom {
            display: flex;
            justify-content: center;
            padding: 0;
        }

        #reviewScreenBottom .playerGrid {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

        #reviewScreenBottom .playerGrid .playerSection, #reviewScreenBottom .playerGrid .extraWrestlers {
            width: 97%;
            margin: 0 auto;
        }

        .playerSection h2, .extraWrestlers h2 {
            font-size: 30px;
        }

        .wrestlerCard p {
            font-size: 18px;
        }

        .addExtra.buttonSmall {
            width: 80%;
            padding: 10px;
            font-size: 16px;
        }

        #skipIntro {
            position: absolute;
            bottom: 80px;
            width: 200px;
            height: 50px;
            margin-left: 50%;
            transform: translateX(-50%);
        }

        #nationalAnthemVideo {
            width: 100%;
            height: 80%;
            object-fit: cover;
        }

        #gameScreen {
            display: flex;
            flex-direction: column;
        }

        #gameScreenLeft {
            width: 100vw;
            height: fit-content;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

        }

        #scoreboard {
            display: flex;
            flex-direction: column;
        }

        #nextWrestler {
            font-size: 20px;
            letter-spacing: 1px;
            line-height: 1.5;
        }

        #scoreboard h5 {
           display: none;
        }
        #gameScreenLeft .wrestlerCard p, #gameScreenLeft .wrestlerCard {
            font-size: 22px;
            line-height: 3;
        }
        #gameScreenLeft .playerSection h2 {
            font-size: 26px;
        }

        #gameScreenLeft .playerGrid {
            max-height: 65px;
            border-radius: 0;
        }

        #gameScreenRight {
            width: 100%;
            padding: 15px 0;
            overflow-y: scroll;
        }

        .notification h3 {
            font-size: 20px;
            letter-spacing: .5px;
        }

        .notification h3 span {
            font-size: 22px;
            letter-spacing: 1px;
        }

        .notificationWrestlerName {
            padding: 15px;
            border-radius: 0;
        }

        .userName {
            margin: 15px;
        }
} /* End Mobile CSS */

#videoUploadFallback {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    text-align: center;
}

#videoUploadFallback p {
    margin-bottom: 1rem;
    color: #fff;
}

#videoUpload {
    display: block;
    margin: 0 auto;
    padding: 0.5rem;
    background: #333;
    border: 1px solid #666;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

#videoUpload:hover {
    background: #444;
}

.auth-header {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 10000;
  padding: 10px;
  border-radius: 6px;
  transition: background 0.3s;
}

/* Only show background when welcome message is visible (user is logged in) */
.auth-header:has(.welcome-message:not(.hide)) {
  background: rgba(0, 0, 0, 0.8);
}

.welcome-message {
  color: #ffd700;
  font-size: 18px;
  font-family: 'Noto Sans', sans-serif;
  opacity: 1;
  transition: opacity 0.3s;
}

.welcome-message.hide {
  opacity: 0;
  display: none;
}

#loginButton {
  position: relative;
  margin: 0;
  padding: 10px 20px;
  border-radius: 6px;
  border: 2px solid #ffd700;
  background: rgba(0, 0, 0, 0.8);
  color: #ffd700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

#loginButton .fa-cog {
  font-size: 20px;
  transition: transform 0.3s ease;
}

#loginButton:hover .fa-cog {
  transform: rotate(90deg);
}

#loginButton:hover {
  background: rgba(255, 215, 0, 0.2);
}

#loginButton.hide {
  opacity: 0;
  pointer-events: none;
}

/* Media Queries */
@media (max-width: 900px) {
  .auth-header {
    top: 10px;
    right: 10px;
    gap: 10px;
    padding: 8px;
  }

  .welcome-message {
    font-size: 16px;
  }

  #loginButton {
    padding: 8px 16px;
    font-size: 14px;
  }
}

.auth-header.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#settingsModal .modalContent {
  max-width: 400px;
  margin: 0 auto;
}

#settingsModal .modalContentRight {
  background: rgba(0, 0, 0, 0.9);
  padding: 40px;
  border-radius: 12px;
  border: 2px solid #ffd700;
  width: 500px;
}

#settingsModal h2 {
  color: #ffd700;
  text-align: center;
  margin: 0 0 30px 0;
  font-size: 36px;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

#logoutButton {
  width: 200px;
  background: rgba(255, 0, 0, 0.2);
  color: #ff6b6b;
  border: 2px solid #ff6b6b;
  transition: all 0.2s;
}

#logoutButton:hover {
  background: rgba(255, 0, 0, 0.4);
  transform: scale(1.05);
}