main.css

html {
  --cadet-blue: hsla(184, 29%, 63%, 1);
  --sage: hsla(69, 28%, 74%, 1);
  --tan: hsla(32, 31%, 87%, 1);
  --light-coral: hsla(359, 39%, 93%, 1);
  --cinnamon-satin: hsla(345, 62%, 86%, 1);
  --charcoal: hsla(187, 23%, 31%, 1);
  --tumbleweed: hsla(23, 48%, 95%, 1);
  --nickel: hsla(114, 9%, 46%, 1);
  --baby-blue: hsla(211, 39%, 97%, 1);
}

main {
  background: #f0f;
}

body {
  overflow: hidden;
}

sidebar {
  height: 100vh;
  background: #f0f;
}

sidebar #statuses {
  position: absolute;
  bottom: 0;
  font-size: 64px;
}

#scores {
  color: #fff;
  font-weight: bold;
  list-style-type: none;
  margin-left: -12px;
  margin-right: 12px;
}

#scores li.active::marker {
  content: "👉";
}

#scores .player-score {
  float: right
}

#actions {
  list-style-type: none;
}

#actions li {
  display: inline-block;
}
.player-turn.inactive {
  visibility: hidden;
}

wof-container {
  position: relative;
  text-align: center;
  overflow: hidden;
}

wof-container .peg {
  position: absolute;
  left: 50%;
  z-index: 100;
}


wof {
  position: relative;
  top: 24px;
}

wof #circle {
  height: 100%;
  width: 100%;
}

category {
  display: block;
  text-align: center;
  font-size: 40px;
  background: white;
}

mods {
  position: absolute;
  bottom: 0px;
  margin-bottom: 12px;
}

mods span {
  font-size: 36px;
}

mods .chart-up::after {
  content: "📈";
}

mods .chart-down::after {
  content: "📉";
}

mods .updown::after {
  content: "🌀";
}

mods .malfunction::after {
  content:  "👺";
}

mods .bomb::after {
  content: "💣";
}


letter-grid {
  display: grid !important;
  height: 320px;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto;
  gap: 5px 5px;
  background: #f0f;
  padding: 20px 10px;
}

.box {
  display: block;
  width: 64px;
  height: 64px;
  perspective: 480px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.face {
  position: absolute;
  width: 64px;
  height: 64px;
}

.face-front { transform: rotateY(0deg) translateZ(32px);}
.face-right { transform: rotateY(90deg) translateZ(32px); }
.face-back { transform: rotateY(180deg) translateZ(32px);}
.face-left { transform: rotateY(-90deg) translateZ(32px); }
.face-top { transform: rotateX(90deg) translateZ(32px);}
.face-bottom { transform: rotateX(-90deg) translateZ(32px);}


.face-front {
  border: 2px solid black;
  background: white;
}

.face-right {
  border: 2px solid black;
  background: white;
  text-align: center;
}

.face-right * {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 54px;
  font-weight: bold;
  transform: translate(-50%, -50%)
}

.face-right .flipped {
  transform:  translateX(-50%) translateY(-50%) rotateZ(180deg);
}

.face-back, .face-left, .face-top, .face-bottom {
  border: 2px solid black;
  background: var(--cadet-blue);
}


.cube.show-front  { transform:  rotateY(   0deg); }
.cube.show-right  { transform:  rotateY( -90deg); }
.cube.show-back   { transform:  rotateY(-180deg); }
.cube.show-left   { transform:  rotateY(  90deg); }
.cube.show-top    { transform:  rotateX( -90deg); }
.cube.show-bottom { transform:  rotateX(  90deg); }

/* Must be set on each element individually, to apply stagger
 * .cube.rotating { animation: rotate-vert-left 1.0s linear infinite both; } */

@keyframes rotate-vert-left {
  0%   { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}