:root {
  --site-navbar-height-desktop: 60px;
  --site-navbar-height-mobile: 60px;
  --color-dark-blue: #4a5d6b;
  --color-gray: #c3cdd2;
  --color-light-blue: #8bb7db;
}

:root {
  --loading-progress: 20%;
  --loading-progress-text: "20%";
}

:root {
  --accumulator: 0deg;
  --pos-x: 0%;
  --pos-y: 0%;
  --rot-z: 0deg;
  --dice-up: 0.05s;
  --dice-down: 0.25s;
  --dice-rot: 0.35s;
  --dynamic-width: 5vmin;
}

#multibrandMainContainer .diceGameContainer {
  width: 100%;
  min-width: 300px;
  height: 100%;
  display: flex;
  padding: 20px !important;
  background-color: var(--game-primary-color);
  box-shadow: inset 0 0 15px 0 black, inset 0px 0 0 20px var(--game-secondary-color), inset -10px 0 15px 10px black;
  border-radius: 20px;
  flex-direction: row !important;
}
#multibrandMainContainer .diceGameContainer #rollBtn {
  position: absolute;
  bottom: 0px;
  left: 10px;
  width: calc(100% - 40px);
  height: 40px;
  padding: 5px 15px;
  cursor: pointer;
  outline: none;
  border: none;
  background-color: var(--game-prize-highlight);
  color: var(--game-prize-highlight-text);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  filter: brightness(0.98);
  transition: all 0.2s ease;
  border-radius: 15px;
  z-index: 3;
}
#multibrandMainContainer .diceGameContainer #rollBtn:hover {
  translate: 0 -3px;
  filter: brightness(1.05);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
#multibrandMainContainer .diceGameContainer #rollBtn:active {
  translate: 0 0px;
  filter: brightness(0.85);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
#multibrandMainContainer .diceGameContainer #rollBtn:disabled {
  filter: grayscale(1);
  pointer-events: none;
}
#multibrandMainContainer .diceGameContainer .prizesContainer {
  height: 100%;
  min-width: 150px;
  width: 50%;
  max-width: 400px;
  background-color: var(--game-secondary-color);
  box-shadow: 20px 0px 15px -15px rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: relative;
  overflow: hidden;
  padding-right: 20px;
}
#multibrandMainContainer .diceGameContainer .prizesContainer .prizesTable {
  width: 100%;
  height: calc(100% - 70px);
  position: relative;
  font-size: calc(clamp(0.5rem, 0.6vmax + 0.6vmin + 0.6vw, 1.5rem) * var(--prize-text-size));
  overflow-y: auto;
}
#multibrandMainContainer .diceGameContainer .prizesContainer .prizesTable .tableRow {
  display: flex;
  width: 100%;
  background-color: var(--game-prize-primary);
  color: var(--game-prize-primary-text);
}
#multibrandMainContainer .diceGameContainer .prizesContainer .prizesTable .tableRow:last-child {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
#multibrandMainContainer .diceGameContainer .prizesContainer .prizesTable .tableRow:nth-child(odd) {
  background-color: var(--game-prize-secondary);
  color: var(--game-prize-secondary-text);
}
#multibrandMainContainer .diceGameContainer .prizesContainer .prizesTable .tableRow.winnerRow {
  position: relative;
  transition: all 0.3s ease 0.5s;
  background-color: var(--game-prize-winner);
  color: var(--game-prize-winner-text);
  box-shadow: 0 0 5px black;
  z-index: 1;
}
#multibrandMainContainer .diceGameContainer .prizesContainer .prizesTable .tableRow .tableColumn {
  width: 100%;
  text-align: center;
  padding: 3px 5px;
}
#multibrandMainContainer .diceGameContainer .prizesContainer .prizesTable .tableRow .tableColumn:first-child {
  border-right: 1px solid var(--game-prize-primary);
  width: 40%;
  flex-shrink: 0;
}
#multibrandMainContainer .diceGameContainer .prizesContainer .prizesTable .tableRow.tableHead {
  background-color: var(--game-prize-highlight);
  color: var(--game-prize-highlight-text);
}
#multibrandMainContainer .diceArea {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 60%;
  height: 100%;
  position: relative;
}
#multibrandMainContainer .diceArea .dieArea {
  width: 100%;
  height: 33%;
  position: relative;
  perspective: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
#multibrandMainContainer .die {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: var(--dynamic-width);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  translate: var(--pos-x) var(--pos-y) 200px;
  transition: transform var(--dice-rot) linear, translate var(--dice-down) ease-out;
}
#multibrandMainContainer .die.diceUp {
  translate: var(--pos-x) var(--pos-y) 250px;
  transition: transform var(--dice-rot) linear, translate var(--dice-up) ease-out;
}
#multibrandMainContainer .die.faceUp1 {
  transform: rotateY(calc(var(--accumulator) + 0deg)) rotateZ(var(--rot-z));
}
#multibrandMainContainer .die.faceUp2 {
  transform: rotateY(calc(var(--accumulator) - 90deg)) rotateX(var(--rot-z));
}
#multibrandMainContainer .die.faceUp3 {
  transform: rotateY(calc(var(--accumulator) - 180deg)) rotateZ(var(--rot-z));
}
#multibrandMainContainer .die.faceUp4 {
  transform: rotateY(calc(var(--accumulator) + 90deg)) rotateX(var(--rot-z));
}
#multibrandMainContainer .die.faceUp5 {
  transform: rotateX(calc(var(--accumulator) - 90deg)) rotateY(var(--rot-z));
}
#multibrandMainContainer .die.faceUp6 {
  transform: rotateX(calc(var(--accumulator) + 90deg)) rotateY(var(--rot-z));
}
#multibrandMainContainer .dieFace {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: clamp(0px, 1vw - 5px, 5px);
  border: 2px solid var(--game-text-color);
  background-color: var(--game-extra-color);
}
#multibrandMainContainer .dieFace:after {
  content: "";
  width: calc(var(--dynamic-width) * 0.2 * var(--game-text-size));
  aspect-ratio: 1;
  translate: -50% -50%;
  background-color: var(--game-text-color);
  position: absolute;
  top: calc(var(--dynamic-width) * 0.5 - 2px) !important;
  left: calc(var(--dynamic-width) * 0.5 - 2px) !important;
  border-radius: 50%;
}
#multibrandMainContainer .dieFace:nth-child(1) {
  transform: rotateY(0deg) translateZ(calc(var(--dynamic-width) / 2));
}
#multibrandMainContainer .dieFace:nth-child(2) {
  transform: rotateY(90deg) translateZ(calc(var(--dynamic-width) / 2));
}
#multibrandMainContainer .dieFace:nth-child(2):after {
  background-color: transparent;
  box-shadow: calc(var(--dynamic-width) * 0.3 - 2px) calc(var(--dynamic-width) * 0.3 - 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * -0.3 + 2px) calc(var(--dynamic-width) * -0.3 + 2px) 0 0 var(--game-text-color);
}
#multibrandMainContainer .dieFace:nth-child(3) {
  transform: rotateY(180deg) translateZ(calc(var(--dynamic-width) / 2));
}
#multibrandMainContainer .dieFace:nth-child(3):after {
  box-shadow: calc(var(--dynamic-width) * 0.3 - 2px) calc(var(--dynamic-width) * 0.3 - 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * -0.3 + 2px) calc(var(--dynamic-width) * -0.3 + 2px) 0 0 var(--game-text-color);
}
#multibrandMainContainer .dieFace:nth-child(4) {
  transform: rotateY(-90deg) translateZ(calc(var(--dynamic-width) / 2));
}
#multibrandMainContainer .dieFace:nth-child(4):after {
  background-color: transparent;
  box-shadow: calc(var(--dynamic-width) * 0.3 - 2px) calc(var(--dynamic-width) * 0.3 - 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * -0.3 + 2px) calc(var(--dynamic-width) * -0.3 + 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * 0.3 - 2px) calc(var(--dynamic-width) * -0.3 + 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * -0.3 + 2px) calc(var(--dynamic-width) * 0.3 - 2px) 0 0 var(--game-text-color);
}
#multibrandMainContainer .dieFace:nth-child(5) {
  transform: rotateX(90deg) translateZ(calc(var(--dynamic-width) / 2));
}
#multibrandMainContainer .dieFace:nth-child(5):after {
  box-shadow: calc(var(--dynamic-width) * 0.3 - 2px) calc(var(--dynamic-width) * 0.3 - 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * -0.3 + 2px) calc(var(--dynamic-width) * -0.3 + 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * 0.3 - 2px) calc(var(--dynamic-width) * -0.3 + 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * -0.3 + 2px) calc(var(--dynamic-width) * 0.3 - 2px) 0 0 var(--game-text-color);
}
#multibrandMainContainer .dieFace:nth-child(6) {
  transform: rotateX(-90deg) translateZ(calc(var(--dynamic-width) / 2));
}
#multibrandMainContainer .dieFace:nth-child(6):after {
  background-color: transparent;
  box-shadow: calc(var(--dynamic-width) * 0.3 - 2px) calc(var(--dynamic-width) * 0.3 - 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * -0.3 + 2px) calc(var(--dynamic-width) * -0.3 + 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * 0.3 - 2px) calc(var(--dynamic-width) * -0.3 + 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * -0.3 + 2px) calc(var(--dynamic-width) * 0.3 - 2px) 0 0 var(--game-text-color), calc(var(--dynamic-width) * 0.3 - 2px) 0 0 0 var(--game-text-color), calc(var(--dynamic-width) * -0.3 + 2px) 0 0 0 var(--game-text-color);
}