: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;
     border-radius: 15px;
 }

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

 .btn {
     height: 60px;
     width: 200px;
     font-size: xx-large;
     border-radius: 10px;
     background: skyblue;
     border: none;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
     -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
 }

 .btnStats {
     height: 30px;
     width: 100px;
     font-size: large;
     border-radius: 10px;
     background: ghostwhite;
     border: none;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
     -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
 }

 .btnGame {
     height: 50px;
     width: 240px;
     font-size: x-large;
     border-radius: 10px;
     background: ivory;
     border: none;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
     -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
 }

 .nameInputContainer {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto 1fr auto;
     border-radius: 15px;
 }

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

 .playerInputPreviousButtonContainer {
     grid-column: span 2;
 }

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

 .playerInputPreviousButton {
     position: absolute;
     top: 5px;
     left: 5px;
 }

 .playerInputNextButton {
     right: 5px;
     position: absolute;
     bottom: 5px;
 }

 .playerInputInput {
     width: 300px;
     height: 40px;
     font-size: xx-large;
 }

 .playerInputContainer {
     gap: 10px;
     display: flex;
     flex-direction: column;
 }

 label {
     font-size: xx-large;
     width: 150px;
     display: inline-block;
 }

 select {
     height: 40px;
     font-size: x-large;
     width: 200px;
 }

 .playerInputSelectRandomButtom {
     font-size: x-large;
     padding: 5px 25px;
     border-radius: 10px;
     margin-left: 15px;
 }

 .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;
     box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.5);
 }

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

 .button3 {
     background-color: #FF0000;
 }

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

 .winnerButton {
     width: 200px;
     height: 50px;
     font-size: xx-large;
     border-radius: 15px;
 }

 .gamePlayTitle {
     font-size: xx-large;
     padding-left: 10%;
 }

 .gamePlayContainer {
     display: grid;
     grid-template-columns: 1fr auto 1fr 1fr;
     grid-template-rows: auto 1fr;
     gap: 8px;
     height: 100%;
     position: relative;
 }

 .playGameTopContainer {
     grid-column: span 4 / span 4;
 }

 .winnerButton {
     float: right;
 }

 .gamePlayLeftFirst {
     grid-row-start: 2;
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .gamePlayActivePlayer {
     font-size: xx-large !important;
     font-weight: 500;
 }

 .playerName {
     display: flex;
     align-items: center;
 }

 .diamondIcon {
     font-size: xx-large;
     color: blue;
     position: absolute;
     right: 0;
 }

 .gamePlayAbortButton {
     position: absolute;
     bottom: 5px;
     width: 50px;
     font-size: x-small;
 }

 .gamePlayAbortButton:hover {
     position: absolute;
     bottom: 5px;
     width: 200px;
     font-size: x-large;
 }

 .gamePlayLeftSecond {
     grid-row-start: 2;
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

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

 .gamePlaythrowDice {
     display: grid;
     align-content: center;
     justify-content: center;
     font-size: 290px;
 }

 .gamePlayButtonsWrapper {
     display: flex;
     flex-wrap: balance;
     justify-content: space-evenly;
     align-items: center;
 }

 .firstToCapetownButton {
     font-size: large;
     bottom: 2px;
     position: absolute;
     height: 40px;
 }

 .playerInputNameContainer {
     align-items: center;
     display: flex;
 }

 .playerInputSelectColor {
     width: 50px;
 }

 .playerStats {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
     align-items: center;
 }

 .playerMoney {
     font-size: xx-large;
     text-align: center;
     grid-column: span 2;
 }

 .brickContainer {
     position: absolute;
     top: 0;
     display: grid;
     left: 0;
     justify-content: space-evenly;
     background: burlywood;
     padding: 25px;
     bottom: 0px;
     /* box-shadow: -7px 0px 0px 0px rgba(0, 0, 0, 0.5); */
     box-shadow: 25px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     align-items: center;
     grid-template-columns: auto auto auto;
     gap: 20px;
 }

 .brickShowHideButton {
     width: 120px;
     display: flex;
     height: 50px;
     justify-content: center;
     rotate: -90deg;
     position: absolute;
     bottom: 50%;
     right: -40px;
     background: burlywood;
     /* right: 110px; */
     font-size: xx-large;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
     box-shadow: 5px -7px 0px 0px rgba(0, 0, 0, 0.5);
 }

 .bricksButton {
     height: 150px;
     width: 150px;
     /* clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); */
     /* background: #46e546;
     border: 1px solid #46e546;
     box-shadow: 5px -7px 0px 0px rgba(0, 0, 0, 0.5); */
     white-space: break-spaces;
     font-size: x-large;
     background: burlywood;
     border: none;
 }

 .previousDiceThrowsMove {
     grid-column: span 2;
     font-size: large;
 }

 .hexagon {
     width: 100px;
     height: 55px;
     position: relative;
 }

 .hexagon,
 .hexagon:before,
 .hexagon:after {
     background: red;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
 }

 .hexagon:before,
 .hexagon:after {
     content: "";
     position: absolute;
     left: 22px;
     width: 57px;
     height: 57px;
     transform: rotate(145deg) skew(22.5deg);
 }

 .hexagon:before {
     top: -29px;
 }

 .hexagon:after {
     top: 27px;
 }

 .hexagon span {
     position: absolute;
     top: 0;
     left: 0;
     width: 100px;
     height: 55px;
     background: red;
     z-index: 1;
 }


 .modal-overlay {
     background: rgba(0, 0, 0, 0.7);
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 }

 .modal-wrapper {
     width: stretch;
     height: 300px;
     background: ghostwhite;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .modal-overlay-new-round {
     background: rgba(0, 0, 0, 0.7);
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 }

 .modal-wrapper-new-round {
     width: 200px;
     height: 300px;
     background: ghostwhite;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 30px;
 }

 .modal-overlay-next-player {
     background: rgba(255, 255, 255, 0.9);
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 }

 .modal-wrapper-next-player {
     width: 400px;
     /* height: 100px; */
     background: #fdf9ba;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 40px;
     border-radius: 30px;
 }

 .close-modal-btn,
 .open-modal-btn {
     padding: 8px;
     background: slateblue;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     font-size: 15px;
     color: ghostwhite;
     font-weight: 5px;
     margin-left: auto;
     margin-top: 10px;
     margin-right: 10px;
     cursor: pointer;
 }

 .close-btn-wrapper {
     display: flex;
     flex-wrap: wrap-reverse;
     justify-content: space-evenly;
     width: 100%;
 }

 .modal-content {
     margin: 20px auto 40px;
     max-width: 210px;
     width: 100%;
 }

 .modal-content-new-round {
     margin: 20px auto;
     max-width: 210px;
     width: 100%;
     font-size: 160px;
 }

 .statisticsBtnContent {
     display: flex;
     justify-content: center;
     padding-bottom: 30px;

 }

 .hide {
     display: none;
 }

 h1 {
     text-align: center;
 }

 .full-screen-button {
     position: fixed;
     top: 10px;
     right: 10px;
     z-index: 9999;
 }

 .exit-fullscreen-button {
     position: fixed;
     top: 10px;
     right: 10px;
     z-index: 9999;
     display: none;
 }

 .toggle {
     cursor: pointer;
     display: inline-block;
     text-align: center;
     position: absolute;
     right: 30px;
     bottom: 70px;
 }

 .toggle-switch {
     display: inline-block;
     background: #ccc;
     border-radius: 16px;
     width: 58px;
     height: 32px;
     position: relative;
     vertical-align: middle;
     transition: background 0.25s;
 }

 .toggle-switch:before,
 .toggle-switch:after {
     content: "";
 }

 .toggle-switch:before {
     display: block;
     background: linear-gradient(to bottom, #fff 0%, #eee 100%);
     border-radius: 50%;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
     width: 24px;
     height: 24px;
     position: absolute;
     top: 4px;
     left: 4px;
     transition: left 0.25s;
 }

 .toggle:hover .toggle-switch:before {
     background: linear-gradient(to bottom, #fff 0%, #fff 100%);
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
 }

 .toggle-checkbox:checked+.toggle-switch {
     background: #56c080;
 }

 .toggle-checkbox:checked+.toggle-switch:before {
     left: 30px;
 }

 .toggle-checkbox {
     position: absolute;
     visibility: hidden;
 }

 .toggle-label {
     margin-left: 5px;
     position: relative;
     top: 2px;
 }




 .dr-stage {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 26px;
     scale: 2;
 }

 .dr-scene {
     width: 96px;
     height: 96px;
     perspective: 600px
 }

 .dr-cube {
     position: relative;
     width: 96px;
     height: 96px;
     transform-style: preserve-3d;
     transition: transform 1s cubic-bezier(.34, 1.4, .5, 1);
     transform: rotateX(-20deg) rotateY(-20deg)
 }

 .dr-face {
     position: absolute;
     width: 96px;
     height: 96px;
     background: linear-gradient(145deg, #fff, #e2e8f0);
     border-radius: 14px;
     box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
     display: grid;
     padding: 14px;
     gap: 6px
 }

 .dr-face span {
     align-self: center;
     justify-self: center;
     width: 17px;
     height: 17px;
     border-radius: 50%;
     background: radial-gradient(circle at 35% 30%, #475569, #0f172a)
 }

 .dr-f1 {
     transform: translateZ(48px);
     grid-template-areas: '. . .' '. a .' '. . .'
 }

 .dr-f1 span {
     grid-area: a
 }

 .dr-f2 {
     transform: rotateY(180deg) translateZ(48px);
     grid-template-areas: 'a . .' '. . .' '. . b'
 }

 .dr-f2 span:nth-child(1) {
     grid-area: a
 }

 .dr-f2 span:nth-child(2) {
     grid-area: b
 }

 .dr-f3 {
     transform: rotateY(90deg) translateZ(48px);
     grid-template-areas: 'a . .' '. b .' '. . c'
 }

 .dr-f3 span:nth-child(1) {
     grid-area: a
 }

 .dr-f3 span:nth-child(2) {
     grid-area: b
 }

 .dr-f3 span:nth-child(3) {
     grid-area: c
 }

 .dr-f4 {
     transform: rotateY(-90deg) translateZ(48px);
     grid-template-areas: 'a . b' '. . .' 'c . d'
 }

 .dr-f4 span:nth-child(1) {
     grid-area: a
 }

 .dr-f4 span:nth-child(2) {
     grid-area: b
 }

 .dr-f4 span:nth-child(3) {
     grid-area: c
 }

 .dr-f4 span:nth-child(4) {
     grid-area: d
 }

 .dr-f5 {
     transform: rotateX(90deg) translateZ(48px);
     grid-template-areas: 'a . b' '. e .' 'c . d'
 }

 .dr-f5 span:nth-child(1) {
     grid-area: a
 }

 .dr-f5 span:nth-child(2) {
     grid-area: b
 }

 .dr-f5 span:nth-child(3) {
     grid-area: c
 }

 .dr-f5 span:nth-child(4) {
     grid-area: d
 }

 .dr-f5 span:nth-child(5) {
     grid-area: e
 }

 .dr-f6 {
     transform: rotateX(-90deg) translateZ(48px);
     grid-template-areas: 'a . b' 'c . d' 'e . f'
 }

 .dr-f6 span:nth-child(1) {
     grid-area: a
 }

 .dr-f6 span:nth-child(2) {
     grid-area: b
 }

 .dr-f6 span:nth-child(3) {
     grid-area: c
 }

 .dr-f6 span:nth-child(4) {
     grid-area: d
 }

 .dr-f6 span:nth-child(5) {
     grid-area: e
 }

 .dr-f6 span:nth-child(6) {
     grid-area: f
 }

 .dr-btn {
     background: #6366f1;
     color: #fff;
     border: none;
     border-radius: 11px;
     padding: 12px 30px;
     font-size: 15px;
     font-weight: 800;
     cursor: pointer;
     font-family: inherit;
     transition: background .15s, transform .1s
 }

 .dr-btn:hover {
     background: #4f46e5
 }

 .dr-btn:active {
     transform: scale(.95)
 }

 .dr-btn:disabled {
     opacity: .6;
     cursor: default
 }

 .dr-result {
     color: #94a3b8;
     font-size: 13px;
     font-weight: 600;
     min-height: 18px
 }

 .statisticsTitle {
    font-size: xx-large;
 }
 .statistics {
     height: 90%;
     position: relative;
 }

 .statistics div {
     margin: 10px;
 }

 .statistics p {
     margin: 0px;
 }

 .topOuterWrapper {
     display: flex;
     justify-content: space-evenly;
 }

 .playerOuterWrapper {
     display: flex;
     justify-content: space-evenly;
 }
 .buttonWrapperStatistics{
        position: absolute;
    bottom: 10px;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
 }
 .winnerStatistics {
    font-size: x-large;
 }