/* Main container for both hands */
.hands-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Ensures spacing */
    width: 100%;
    min-height: 75vh; /* Ensures hands and buttons are properly spaced */
    margin-top: 5vh;
}

/* Dealer Hand + Sum */
.dealer-hand {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffd277
}

/* Player Hand + Sum */
.player-hand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10vh;
    color: #ffd277
}

/* Sum values positioned right below the hands */
.dSum, .uSum {
    margin-top: 1.5vh; /* Space between cards and sum */
    font-size: (1.2vw+0.5rem);
    font-weight: bold;
    color: yellow;
}

/* Game buttons (Start, Hit, Stay) at the top left */
.GameButtons {
    position: absolute;
    top: 100px;
    left: 10px;
    display: flex;
    gap: 10px;
}

.output{
    position: absolute;
    bottom: 50vh;
    font-size: 20px;
}

/* Score (Jyske dollars) at the top right */
.score {
    position: absolute;
    top: 0;
    right: 20px;
    color: #ffd277;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Bet amount at the bottom left */
.bet {
    position: absolute;
    bottom: 6vh;
    left: 20px;
    color: #ffd277;
    font-weight: bold;
}

/* Betting chips (bet buttons) centered at the bottom */
.betButtons {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 5vh; /* Keeps it near the bottom, adjust as needed */
    left: 50%;
    transform: translateX(-50%); /* Ensures it's centered */
    width: max-content; /* Adjust width based on content */
}

#endMenu {
  display: none;  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: coloumn;
  justify-content: center;
  align-items: center;
}

.end-menu-content {
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  color: #ffd277
}

#playerName{
  font-size: 1.2vh;
  background-color: black ;
  color: #ffd277;
}

#continue{
  color: red;
  border-color: red;
  background: rgba(0,0,0,0.5);
  float: right;
}

#leaderboard{
  color: #ffd277;
  position: absolute;
  top: 40%;
  left: 5%;
}


/* From Uiverse.io by vinodjangid07 */ 
.startGame {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
  }
  
  .startGame::before {
    position: absolute;
    content: "Start Game";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  .startGame:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  .startGame:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  .startGame:active {
    transform: scale(0.95);
  }

  .Hit {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
  }
  
  .Hit::before {
    position: absolute;
    content: "Hit";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  .Hit:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Hit:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Hit:active {
    transform: scale(0.95);
  }

  .Stay {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
  }
  
  .Stay::before {
    position: absolute;
    content: "Stay";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  .Stay:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Stay:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Stay:active {
    transform: scale(0.95);
  }

  .Split {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
  }
  
  .Split::before {
    position: absolute;
    content: "Split";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  .Split:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Split:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  .Split:active {
    transform: scale(0.95);
  }

  .ResetBet {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: absolute;
    left: 1vh;
    bottom: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
    position: absolute;
    bottom: 1;
    right: 10px;
  }
  
  .ResetBet::before {
    position: absolute;
    content: "Reset Bet";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  .ResetBet:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  .ResetBet:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  .ResetBet:active {
    transform: scale(0.95);
  }

  .Yes{
    background-color: #ffd277;
    border-radius: 5vh;
    font-size: 1.2vh;
    position: absolute;
    bottom: 48vh;
  }

  .No{
    background-color: #ffd277;
    border-radius: 5vh;
    font-size: 1.2vh;
    position: absolute;
    bottom: 48vh;
    left: 4vh;
  }


#saveScore {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: absolute;
    right: 1vh;
    top: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
    position: absolute;
    top: 100px;
    right: 10px;
    display: flex;
    gap: 10px;
  }
  
  #saveScore::before {
    position: absolute;
    content: "Save Score";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  #saveScore:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  #saveScore:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  #saveScore:active {
    transform: scale(0.95);
  }


  #submitScore {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 1vh;
  }
  
  #submitScore::before {
    position: absolute;
    content: "Submit";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  #submitScore:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  #submitScore:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  #submitScore:active {
    transform: scale(0.95);
  }

  #again {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
    margin: 0 auto;
  }
  
  #again::before {
    position: absolute;
    content: "Play again";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  #again:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  #again:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  #again:active {
    transform: scale(0.95);
  }

  #backToMenu {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 1vh;
  }
  
  #backToMenu::before {
    position: absolute;
    content: "Back to Menu";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
  }
  
  #backToMenu:hover {
    background-position: right;
    transition-duration: 1s;
  }
  
  #backToMenu:hover::before {
    background-position: right;
    transition-duration: 1s;
  }
  
  #backToMenu:active {
    transform: scale(0.95);
  }



/*Mobil-support */
@media(max-width: 768px){
  .score{
    top: 0;
  }
  .hands-container{
    margin-top: 10vh;
    font-size: 1.5vh;
    gap: 1vh;
  }
  .player-hand{
    margin-top: 0;
    margin-bottom: 15vh;
  }
  img{
    max-width: 40%;
  }
  .betButtons{
    height: 50px;
  }
  #bt1{
    max-height: 70px;
  }
  #bt2{
    max-height: 70px;
  }
  #bt3{
    max-height: 70px;
  }
  #bt4{
    max-height: 70px;
  }
  .bet{
    font-size: 1.7vh;
    bottom: 10px;
  }
  .startGame{
    width: 100px;
    height: 30px;
    font-size: 2vh;
  }
  .Hit{
    width: 100px;
    height: 30px;
    font-size: 2vh;
  }
  .Stay{
    width: 100px;
    height: 30px;
    font-size: 2vh;
  }
  .Split{
    width: 100px;
    height: 30px;
    font-size: 2vh;
  }
  .ResetBet{
    width: 100px;
    height: 30px;
    font-size: 2vh;
    bottom: 70px;
  }
  #saveScore{
    width: 100px;
    height: 30px;
    font-size: 2vh;
    position: absolute;
    top: 100px;
    right: 10px;
    display: flex;
    gap: 10px;
  }
  .uSum{
    font-size: 2vh;
  }
  .dSum{
    font-size: 2vh;
  }
}

@media(min-width: 769px) and (max-width: 1500px){
  .hands-container{
    margin-top: 8vh;
  }
  .player-hand{
    top: 0;
    margin-bottom: 15vh;
  }
  img{
    height: 150px;
    width: 120px;
  }
  #bt1{
    max-height: 90px;
  }
  #bt2{
    max-height: 90px;
  }
  #bt3{
    max-height: 90px;
  }
  #bt4{
    max-height: 90px;
  }
  .ResetBet{
    bottom: 110px;
  }
}

@media(min-width: 1501px) and (max-width: 1749px){
  img{
    height: 200px;
    width: 150px;
  }

}

@media(min-width: 1750px){
  img{
    height: 250px;
    width: 200px;
  }
  #bt1{
    max-height: 150px;
  }
  #bt2{
    max-height: 150px;
  }
  #bt3{
    max-height: 150px;
  }
  #bt4{
    max-height: 150px;
  }
}