@import url('https://fonts.googleapis.com/css2?family=Nova+Square&display=swap');

*, *::after {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-image: linear-gradient(
90deg, #000, #2f2f2f, #bdbdbd, #b9b9b9);
  border-radius: 1em;
}

::-webkit-scrollbar-thumb {
  background-image: linear-gradient(
90deg, #6d6d6d, white, #5c5c5c, black);
  border-left: 1px solid #000;
  border-radius: 1em;
}

body {
  margin: 0;
  font-family: 'Nova Square', cursive;
  font-size: 40px;
  background: #000;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 576px) {
  body {
    font-size: 32px;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.game-body {
  perspective: 15em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 1024px;
  height: 100vh;
  animation: fade-in 1s ease backwards;
}

.settings-wrapper {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  transform: translateZ(1px);
  width: 100vw;
  height: 100vh;
  color: #ffff;
  background-color: #000f;
  border-right: 1px solid #fff5;
  animation: fade-in 1s ease backwards 2.5s;
}

.settings {
  position: absolute;
  display: grid;
  width: 100%;
  height: 100%;
  font-size: 18px;
  overflow: auto;
}

.setting {
  display: grid;
  padding: 12px;
}

.subsettings-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: .5em;
  margin-top: 8px;
}

.toggle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border: 2px solid #888;
  border-radius: 1em;
  cursor: pointer;
}

.toggle-trigger:checked + .toggle-btn {
  color: #000;
  background-color: #fff;
}

.toggle-trigger:disabled + .toggle-btn {
  opacity: .25;
}

.setting input[type="text"] {
  padding: 8px;
  border: 0;
  border-bottom: 3px solid #ffff;
  font-family: inherit;
  font-size: inherit;
  text-align: right;
  color: #ffff;
  background-color: #0000;
}

.settings-wrapper label[for="settings-open"] {
  position: absolute;
  top: 4.5em;
  left: 100%;
  transform-origin: bottom left;
  transform: rotateZ(90deg);
  padding: .3em .15em;
  font-size: 32px;
  white-space: nowrap;
  background: #000;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #ddd;
  border-radius: 1em 1em 0 0;
}

@media (max-width: 576px) {
  .settings-wrapper label[for="settings-open"] {
    font-size: 24px;
  }
}

#settings-open:not(:checked) ~ .settings-wrapper {
  max-width: 0;
  transition: max-width .3s ease-in .3s;
}

#settings-open:checked ~ .settings-wrapper {
  max-width: 313px;
  transition: max-width .3s ease-out;
}

#settings-open:not(:checked) ~ .settings-wrapper .settings {
  opacity: 0;
  transition: opacity .3s ease-in;
}

#settings-open:checked ~ .settings-wrapper .settings {
  opacity: 1;
  transition: opacity .3s ease-out .3s;
}

#settings-open:not(:checked) ~ .settings-wrapper label[for="settings-open"]::after {
  content: "🔧";
}

#settings-open:checked ~ .settings-wrapper label[for="settings-open"]::after {
  content: "✖️";
}

.scene-wrapper {
  position: absolute;
  perspective: 15em;
  transform: scale(.7);
}

.scene {
  transform-style: preserve-3d;
  transform: rotateX(-40deg) rotateY(-45deg);
  transition: transform 2s ease;
}

.floor {
  position: absolute;
  top: 2em;
  width: 54em;
  height: 54em;
  background-size: 100%, 100%, 6em 6em;
}

/* .floor::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(3px);
} */

.floor.floor-bottom {
  transform: translate3d(
      6em,
      -26.5em,
      31em
    )
    rotateX(90deg);
  opacity: 0;
  animation: slidefloorbottom 1s ease forwards 1s;
}

@keyframes slidefloorbottom {
  to {
    opacity: 1;
    transform: translate3d(
        -4em,
        -26.5em,
        23em
      )
      rotateX(90deg);
  }
}

.floor.floor-left {
  transform: translate3d(
      -31em,
      -53.5em,
      36em
    )
    rotateY(90deg);
  opacity: 0;
  animation: slidefloorleft 1s ease forwards 1.5s;
}

@keyframes slidefloorleft {
  to {
    opacity: 1;
    transform: translate3d(
        -31em,
        -53.5em,
        23em
      )
      rotateY(90deg);
  }
}

.floor.floor-right {
  transform: translate3d(
    14em,
    -53.5em,
    -4em
  );
  opacity: 0;
  animation: slidefloorright 1s ease forwards 2s;
}

@keyframes slidefloorright {
  to {
    opacity: 1;
    transform: translate3d(
      -4em,
      -53.5em,
      -4em
    );
  }
}

.cube {
  position: absolute;
  transform-style: preserve-3d;
  transform: translate3d(-0.5em, -3em, 0.5em);
  width: 2em;
  height: 2em;
  transition: transform 2s ease;
}

.cube > .top,
.cube > .bottom,
.cube > .left,
.cube > .right,
.cube > .front,
.cube > .back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff1;
  outline: 1px solid #ffff;
  box-shadow: inset 0 0 2px #ffff;
  transition: background-color .2s ease;
  animation: fade-in 1s ease backwards 2.5s;
}

.col-a {
  background-color: #f008!important;
}

.col-b {
  background-color: #0f08!important;
}

.col-c {
  background-color: #00f8!important;
}

.col-d {
  background-color: #ff08!important;
}

.col-e {
  background-color: #0ff8!important;
}

.col-f {
  background-color: #f0f8!important;
}

.cube > .top {
  transform: 
    translateY(-1em)
    rotateX(-90deg);
}

.cube > .bottom {
  transform:
    translateY(1em)
    rotateX(90deg);
}

.cube > .left {
  transform:
    translateX(-1em)
    rotateY(90deg);
}

.cube > .right {
  transform:
    translateX(1em)
    rotateY(-90deg);
}

.cube > .front {
  transform: translateZ(1em);
}

.cube > .back {
  transform: translateZ(-1em);
}

.inner-cube {
  position: absolute;
  transform-style: preserve-3d;
  transform: translate3d(.5em, .5em, 0);
  width: 1em;
  height: 1em;
  transition: transform 2s ease;
}

.inner-cube > .top,
.inner-cube > .bottom,
.inner-cube > .left,
.inner-cube > .right,
.inner-cube > .front,
.inner-cube > .back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff2;
  outline: 1px solid #ffff;
  box-shadow: inset 0 0 2px #ffff;
  animation: fade-in 1s ease backwards 3s;
}

.inner-cube > .top {
  transform: 
    translateY(-.5em)
    rotateX(-90deg);
}

.inner-cube > .bottom {
  transform:
    translateY(.5em)
    rotateX(90deg);
}

.inner-cube > .left {
  transform:
    translateX(-.5em)
    rotateY(90deg);
}

.inner-cube > .right {
  transform:
    translateX(.5em)
    rotateY(-90deg);
}

.inner-cube > .front {
  transform: translateZ(.5em);
}

.inner-cube > .back {
  transform: translateZ(-.5em);
}

.shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(45deg) rotateX(40deg);
  width: 0;
  height: 0;
  border: 1px solid #0000;
  background-color: #0000;
  transition: all .3s ease,
              transform 2s ease;
}

.triangle {
  width: 0;
  height: 0;
  border-left: .4em solid transparent;
  border-right: .4em solid transparent;
  border-bottom: .8em solid #fff;
}

.square {
  width: .8em;
  height: .8em;
  background-color: #fff;
}

.circle {
  width: .8em;
  height: .8em;
  background-color: #fff;
  border-radius: 50%;
}

.wall-bottom-word,
.wall-left-word,
.wall-right-word {
  position: absolute;
  width: 4.5em;
  height: 4.5em;
  font-size: 2em;
  color: #fff0;
  text-align: center;
  line-height: 4.5em;
  text-transform: uppercase;
  transition: all .3s ease;
}

.wall-bottom-word {
  top: 0;
  left: 0;
  transform: rotateZ(-45deg);
}

.wall-left-word {
  bottom: 0;
  right: 0;
}

.wall-right-word {
  bottom: 0;
  left: 0;
}

.text-white {
  color: #fffff1;
}

.btn {
  width: 5.5em;
  height: 3em;
  padding: 0;
  font-family: inherit;
  font-size: 50%;
  border: 0;
  border-radius: .75em;
  background-color: #fff6;
  cursor: pointer;
  transition:
    background-color .3s ease,
    box-shadow 1.2s ease;
  animation: fade-in 1s ease backwards 2.5s;
}

.btn.right {
  background-color: #0f0;
  box-shadow: 0 0 1em #0f04;
}

.btn.wrong {
  background-color: #f00;
  box-shadow: 0 0 1em #f004;
}

.play, .stop {
  position: absolute;
  z-index: 100;
  top: 3em;
}

.play.active {
  box-shadow:
    inset 0 0 .5em #0f08,
    0 0 1em #0f04;
}

.stop.active {
  box-shadow:
    inset 0 0 .5em #f008,
    0 0 1em #f004;
}

@media (max-width: 576px) {
  .btn.right {
    background-color: #0f08;
  }

  .btn.wrong {
    background-color: #f008;
  }
  
  .play, .stop {
    top: 1em;
  }
}

.play {
  left: 1em;
  transform:
    rotateX(7.5deg)
    rotateY(-5deg);
  background-image:
    linear-gradient(
      135deg,
      #0004,
      #fff8
    );
}

.stop {
  right: 1em;
  transform:
    rotateX(7.5deg)
    rotateY(5deg);
  background-image:
    linear-gradient(
      -135deg,
      #0004,
      #fff8
    );
}

.check-word {
  position: absolute;
  z-index: 100;
  bottom: 19em;
}

.check-walls, .check-shape {
  position: absolute;
  z-index: 100;
  bottom: 15em;
}

.check-camera, .check-corner {
  position: absolute;
  z-index: 100;
  bottom: 11em;
}

.check-face, .check-sound {
  position: absolute;
  z-index: 100;
  bottom: 7em;
}

.check-position, .check-color {
  position: absolute;
  z-index: 100;
  bottom: 3em;
}

.check-walls, .check-camera, .check-face, .check-position {
  left: 1em;
  transform:
    rotateX(-7.5deg)
    rotateY(-5deg);
  background-image:
    linear-gradient(
      45deg,
      #0004,
      #fff8
    );
}

.check-word, .check-shape, .check-corner, .check-sound, .check-color {
  right: 1em;
  transform:
    rotateX(-7.5deg)
    rotateY(5deg);
  background-image:
    linear-gradient(
      -45deg,
      #0004,
      #fff8
    );
}

@media (max-width: 576px) {
  .check-word {
    bottom: 14.5em;
  }
  
  .check-walls, .check-shape {
    bottom: 11em;
  }
  
  .check-camera, .check-corner {
    bottom: 7.5em;
  }
  
  .check-face, .check-sound {
    bottom: 4em;
  }
  
  .check-position, .check-color {
    bottom: .5em;
  }
  
  .check-walls, .check-camera, .check-face, .check-position {
    left: .5em;
    background-image:
    linear-gradient(
      -45deg,
      #0002,
      #fff4
    );
  }

  .check-word, .check-shape, .check-corner, .check-sound, .check-color {
    right: .5em;
    background-image:
    linear-gradient(
      -45deg,
      #0002,
      #fff4
    );
  }
}

.n-back {
  position: absolute;
  top: 1.5em;
  transform: translateZ(1em);
  color: #ffff;
  animation: fade-in 1s ease backwards .5s;
}

#n-back {
  width: 1em;
  border: 0;
  font-family: inherit;
  font-size: 100%;
  color: #fff;
  background-color: transparent;
}

#n-back:focus {
  outline: 0;
}

@media (max-width: 576px) {
  .n-back {
    top: 2.5em;
  }
}

.sign {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateZ(1em);
  font-size: 18px;
  color: #fff;
  text-decoration: none;
}