html {
  height: 100%;
}

body {
  background: #232323;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none; }

/*
Adjust variables to change the size of the box
*/
.wrap {
  perspective: 3000px;
  perspective-origin: 50% 50% 0;
  width: 655px;
  height: 455px;
  margin: 0;
  flex-shrink: 0;
}

#diamond-frame {
  display: none; }

#diamond, #diamond-frame {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 15px;
  height: 15px;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 0;
  transform: rotateY(0deg) rotateX(45deg) rotateZ(45deg);
  animation: spinz 1s linear infinite;
  animation-name: spinz; }
  #diamond > div, #diamond-frame > div {
    position: absolute;
    color: rgba(255, 255, 255, 0.2);
    background: rgba(35, 35, 35, 0.75);
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.2) inset;
    text-align: center; }
  #diamond .inner, #diamond-frame .inner {
    background-color: #E4C44A;
    border: 1px solid white;
    box-sizing: border-box;
    position: relative;
    height: 100%; }
  #diamond .front,
  #diamond .back,
  #diamond .top,
  #diamond .bottom, #diamond-frame .front,
  #diamond-frame .back,
  #diamond-frame .top,
  #diamond-frame .bottom {
    transform-origin: top center; }
  #diamond .right,
  #diamond .left, #diamond-frame .right,
  #diamond-frame .left {
    transform-origin: top left;
    width: 15px;
    height: 15px; }
  #diamond .front,
  #diamond .back, #diamond-frame .front,
  #diamond-frame .back {
    color: transparent;
    width: 15px;
    height: 15px; }
  #diamond .bottom,
  #diamond .top, #diamond-frame .bottom,
  #diamond-frame .top {
    height: 15px;
    width: 15px; }
  #diamond .back, #diamond-frame .back {
    transform: rotateY(180deg) translateZ(7.5px); }
  #diamond .right, #diamond-frame .right {
    color: transparent;
    transform: rotateY(90deg) translateZ(15px) translateX(-7.5px); }
  #diamond .left, #diamond-frame .left {
    transform: rotateY(270deg) translateX(-7.5px);
    perspective: 3000px; }
  #diamond .bottom, #diamond-frame .bottom {
    transform: rotateX(270deg) translateY(-7.5px) translateZ(15px); }
  #diamond .top, #diamond-frame .top {
    transform: rotateX(90deg) translateY(-7.5px); }
  #diamond .front, #diamond-frame .front {
    transform: translateZ(7.5px); }

.box {
  position: relative;
  width: 655px;
  height: 455px;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 0;
  animation: spin1 1s 1 ease-out forwards;
  animation-name: spin1; }
  .box > div {
    position: absolute;
    color: rgba(255, 255, 255, 0.2);
    background: rgba(35, 35, 35, 0.75);
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.2) inset;
    text-align: center; }
  .box .inner {
    color: transparent;
    position: relative;
    height: 100%; }
  .box .front,
  .box .back,
  .box .top,
  .box .bottom {
    transform-origin: top center; }
  .box .right,
  .box .left {
    transform-origin: top left;
    width: 655px;
    height: 455px; }
  .box .front,
  .box .back {
    color: transparent;
    width: 655px;
    height: 455px; }
  .box .bottom,
  .box .top {
    height: 655px;
    width: 655px; }
  .box .back {
    transform: rotateY(180deg) translateZ(327.5px); }
  .box .right {
    color: transparent;
    transform: rotateY(90deg) translateZ(655px) translateX(-327.5px); }
  .box .left {
    transform: rotateY(270deg) translateX(-327.5px); }
  .box .bottom {
    transform: rotateX(270deg) translateY(-327.5px) translateZ(455px); }
  .box .top {
    transform: rotateX(90deg) translateY(-327.5px); }
  .box .front {
    transform: translateZ(327.5px); }

.player, .bullet {
  position: absolute;
  left: 0;
  bottom: 0;
  transform-style: preserve-3d; }

#player_0:before, #player_1:before {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  top: -5px;
  left: 0; }

#player_0:before {
  background: red; }

#player_1:before {
  background: blue; }

.rect {
  position: absolute;
  left: 100px;
  bottom: 0;
  width: 100px;
  height: 40px;
  border: 1px solid white; }

.step {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 10px;
  border: 1px solid white; }

.bad {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5px;
  height: 8px;
  border: 2px solid white; }

.score-board {
  position: absolute;
  width: 100%;
  bottom: 0px;
}
.score-board > div {
  color: blue;
  font-size: 32px;
  width: 50%;
  float: left;
  text-align: center; }

.score-board div:first-of-type {
  color: red; }

@keyframes spinz {
  from {
    transform: rotateY(0deg) rotateX(45deg) rotateZ(45deg); }
  to {
    transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg); } }

/* Mobile / Touch Controls */
.touch-controls {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.touch-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.touch-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}

.touch-btn.touch-btn-sm {
  width: 44px;
  height: 44px;
  font-size: 18px;
  background: rgba(255, 220, 0, 0.15);
  border-color: rgba(255, 220, 0, 0.4);
}

.touch-btn.touch-btn-jump {
  width: 68px;
  height: 68px;
  background: rgba(0, 200, 0, 0.2);
  border-color: rgba(0, 200, 0, 0.5);
}

.touch-btn.touch-btn-shoot {
  background: rgba(220, 0, 0, 0.2);
  border-color: rgba(220, 0, 0, 0.5);
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  html, body {
    overflow: hidden;
    height: 100%;
    touch-action: none;
  }

  body {
    /* shift center up to account for the fixed touch-controls bar (~100px) */
    padding-bottom: 100px;
  }

  .touch-controls {
    display: flex;
  }

  .score-board div {
    font-size: 28px;
  }
}