:root {
     --container-height: calc(100dvh - 171px);
     --margin: 10px;
 }

 * {
     box-sizing: inherit;
 }

 html {
     height: 100%;
     box-sizing: border-box;
     font-family: Segoe UI;
 }

 body {
     height: 100%;
     min-height: 100vh;
     margin: 0px;
     margin: auto;
 }

 #app {
     margin: var(--margin);
     overflow: scroll;
     height: calc(var(--container-height) - 20px);
 }

 header {
     background: linear-gradient(180deg, #5d90be, #9edffb);
     text-align: center;
     position: sticky;
     top: 0;
 }

 .wrapper {
     min-height: 100%;
     display: grid;
     grid-template-rows: auto 1fr;
 }

 .buttonWrapper {
     height: 100%;
     background-color: #00FB46;
 }

 .textContainerButtons {
     height: 10%;
     min-height: 45px;
     text-align: center;
     font-size: 31px;
 }

 .nameInputContainer {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr auto;
 }

 .nameInputRight {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .playerInputButtonContainer {
     grid-column: span 2;
     height: 50px;
 }

 .playerInputPreviousButton {
     position: absolute;
     top: 0;
     right: 0;
 }

 .playerInputNextButton {
     display: flex;
     right: 0px;
     position: absolute;
     bottom: 0;
 }

 .buttonContainer {
     height: 45%;
     display: flex;
     flex-direction: row;
     gap: 30px;
     padding: 30px;
     justify-content: space-evenly;
 }

 .turnOrderPlayerWrapper {
     height: 80%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .numberButton {
     height: 180px;
     width: 180px;
     border-radius: 30px;
     border: 7px solid black;
     font-size: 90px;
     font-weight: 600;
 }

 .button2 {
     background-color: #007DFE;
 }

 .button3 {
     background-color: #FF0000;
 }

 .button4 {
     background-color: #8900FA;
 }

 .gamePlayContainer {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: auto 1fr;
     gap: 8px;
     height: 100%;
 }

 .playGameTopContainer {
     grid-column: span 4 / span 4;
 }
.winnerButton{
    float:right;
}
 .gamePlayLeftFirst {
     grid-row-start: 2;
 }

 .gamePlayLeftSecond {
     grid-row-start: 2;
 }

 .gamePlayLeftThird {
     grid-column: span 2 / span 2;
     grid-row-start: 2;
 }

 .brickContainer {
    position: absolute;
    top: 171px;
    display: flex;
    flex-direction: column;
    right: 0;
    /* height: 100dvh; */
    justify-content: space-evenly;
    background: burlywood;
    padding: 25px;
    bottom: 0px;
 }
 .brickShowHideButton {
    width: 120px;
    display: flex;
    height: 50px;
    justify-content: center;
    rotate: -90deg;
    position: absolute;
    bottom: 50%;
    right: -40px;
    background: burlywood;
 }