.ScoreTrackerBackgroundImage {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    height: auto;
    z-index: 0;
}

.ScoreTrackerMainContainer {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
.ScoreTrackerTopMenu {
    height:58px;
    width:100%;
}
.ScoreTrackerBottomMenu {
    height: 64px;
    width: 100%;
}
.TitleContainer {
    display: flex;
    height: 10%;
    width: 78%;
    color: white;
    font-size: 36px;
    /* margin-top: 68px; */
    flex-direction: column;
    align-content: space-around;
}

/*.RoundTitleImageContainer {
    position: relative;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}*/
.RoundTitleImage {
    width: 60%;
}
.CurrentRoundText {
    position: absolute;
    width: auto;
    /* height: 100px; */
    /* top: 18%; */
    text-align: center;
    color: black;
    font-size: 35px;
   
}
.TotalBoxContainer {
    position: relative;
  /*  height: 200px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.TotalBox {
   /* width: 283px;*/
}
.TotalBoxText {
    position: absolute;
    width: auto;
    /* height: 100px; */
    top: 0;
    bottom: 0;
    text-align: center;
    color: black;
    font-size: 51px;
    padding-top: 22%;
}




.BottomHalfContainer {
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}

.money {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
     
    max-width: 500px;
}
.Controls {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
    /*.Controls > :last-child {
        margin-top: auto;
    }*/


.money1, .money3, .money5, .money7, .money10 {
   /* width: 80px;*/
}

.moneyRow1 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
}
.moneyRow2 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 65%;
}
.money1 {
}
.money3 {
   
}
.money5 {
    
}
.money7 {
    
}
.money10 {
   
}

.minusbutton {
    width:60%;
}

.plusbutton {
    width: 60%;
    margin-top: 10px;
}
.nextroundbutton {
    width: 40%;
}

.coinContainer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* center */
    width: 80vw; /* responsive width */
    max-width: 800px; /* cap width for large screens */
    aspect-ratio: 1 / 1; /* keep it square */
    z-index: 2;
}
.coinContainerImage {
    width: 100%;
    display: block;
}

.FinalRound {
    position: absolute;
    width: 177px;
    bottom: 10px;
    right: -9px;
}
 
.coins {
    position: absolute;
    bottom: 42px;
    left: 0;
    width: 100%;
    height: 52%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 10%;
    pointer-events: none;
}

    .coins img {
        width: 95%;
        height: auto;
        margin: auto;
        cursor: pointer;
        pointer-events: auto;
        display: block;
    }

.undo {
    position: absolute;
   
    right: -8px;
    top: 86%;
}
.BonusQuestionNav {
    position: absolute;
    top: 5px;
    right:80px;
    width: 50px;
    
}
.Info {
    position: absolute;
    top: 5px;
    right: 20px;
    width: 50px;
    
}

.scoreTrackerInfoText {
    position: absolute;
    top: 50%;
    /* bottom: 0; */
    left: 50%;
    /* right: 0; */
    z-index: 5;
    width: 100%;
    transform: translate(-50%, -50%);
}


.ResetScore {
    position: absolute;
    bottom:20px;
    left:20px;
    z-index:3;
}