#leftMenuBtn {
  position: relative;
  width: 64px;
  height: 58px;
  flex: 0 0 64px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 1;
}

#leftMenuBtn #diecontainer {
  width: 64px;
  height: 58px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}

#leftMenuBtn #diecontainer,
#leftMenuBtn #diecontainer * {
  box-sizing: border-box;
}

#leftMenuBtn #diecontainer figure {
  margin: 0;
  padding: 0;
}

#leftMenuBtn .cube-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  transform: scale(0.176);
  transform-origin: center center;
  pointer-events: none;
  perspective: 1000;
}

#leftMenuBtn .cube-container::after {
  display: none;
}

#leftMenuBtn #cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
  -webkit-transform: translateZ(-60px) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
      transform: translateZ(-60px) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  -webkit-transition: -webkit-transform 1s ease-in-out;
      transition: transform 1s ease-in-out;
  transform-origin: 50% 50% 0;
}

#leftMenuBtn #cube figure {
  width: 189px;
  height: 188px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--menu-die-image) top center no-repeat;
  font-size: 70px;
  line-height: 190px;
  text-align: center;
  text-shadow: #000 -1px -1px 0, #fff 1px 1px 0;
  color: #f1f1f1;
  -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
}

#leftMenuBtn .dieFont {
  font-size: 64px !important;
  text-align: center !important;
}

#leftMenuBtn #cube .face01 { -webkit-transform: rotateY(36deg) rotateX(53deg) rotateZ(0deg) translateZ(120px); transform: rotateY(36deg) rotateX(53deg) rotateZ(0deg) translateZ(120px); }
#leftMenuBtn #cube .face06 { -webkit-transform: rotateY(108deg) rotateX(53deg) rotateZ(240deg) translateZ(120px); transform: rotateY(108deg) rotateX(53deg) rotateZ(240deg) translateZ(120px); }
#leftMenuBtn #cube .face08 { -webkit-transform: rotateY(180deg) rotateX(53deg) rotateZ(240deg) translateZ(120px); transform: rotateY(180deg) rotateX(53deg) rotateZ(240deg) translateZ(120px); }
#leftMenuBtn #cube .face04 { -webkit-transform: rotateY(253deg) rotateX(53deg) rotateZ(120deg) translateZ(120px); transform: rotateY(253deg) rotateX(53deg) rotateZ(120deg) translateZ(120px); }
#leftMenuBtn #cube .face10 { -webkit-transform: rotateY(324deg) rotateX(53deg) rotateZ(0deg) translateZ(120px); transform: rotateY(324deg) rotateX(53deg) rotateZ(0deg) translateZ(120px); }
#leftMenuBtn #cube .face18 { -webkit-transform: rotateY(0deg) rotateX(-53deg) rotateZ(60deg) translateZ(120px); transform: rotateY(0deg) rotateX(-53deg) rotateZ(60deg) translateZ(120px); }
#leftMenuBtn #cube .face16 { -webkit-transform: rotateY(72deg) rotateX(-53deg) rotateZ(60deg) translateZ(120px); transform: rotateY(72deg) rotateX(-53deg) rotateZ(60deg) translateZ(120px); }
#leftMenuBtn #cube .face11 { -webkit-transform: rotateY(144deg) rotateX(-53deg) rotateZ(180deg) translateZ(120px); transform: rotateY(144deg) rotateX(-53deg) rotateZ(180deg) translateZ(120px); }
#leftMenuBtn #cube .face20 { -webkit-transform: rotateY(216deg) rotateX(-53deg) rotateZ(180deg) translateZ(120px); transform: rotateY(216deg) rotateX(-53deg) rotateZ(180deg) translateZ(120px); }
#leftMenuBtn #cube .face14 { -webkit-transform: rotateY(288deg) rotateX(-53deg) rotateZ(60deg) translateZ(120px); transform: rotateY(288deg) rotateX(-53deg) rotateZ(60deg) translateZ(120px); }
#leftMenuBtn #cube .face13 { -webkit-transform: rotateY(36deg) rotateX(11deg) rotateZ(180deg) translateZ(120px); transform: rotateY(36deg) rotateX(11deg) rotateZ(180deg) translateZ(120px); }
#leftMenuBtn #cube .face09 { -webkit-transform: rotateY(108deg) rotateX(11deg) rotateZ(180deg) translateZ(120px); transform: rotateY(108deg) rotateX(11deg) rotateZ(180deg) translateZ(120px); }
#leftMenuBtn #cube .face02 { -webkit-transform: rotateY(180deg) rotateX(11deg) rotateZ(300deg) translateZ(120px); transform: rotateY(180deg) rotateX(11deg) rotateZ(300deg) translateZ(120px); }
#leftMenuBtn #cube .face05 { -webkit-transform: rotateY(253deg) rotateX(11deg) rotateZ(300deg) translateZ(120px); transform: rotateY(253deg) rotateX(11deg) rotateZ(300deg) translateZ(120px); }
#leftMenuBtn #cube .face17 { -webkit-transform: rotateY(324deg) rotateX(11deg) rotateZ(180deg) translateZ(120px); transform: rotateY(324deg) rotateX(11deg) rotateZ(180deg) translateZ(120px); }
#leftMenuBtn #cube .face12 { -webkit-transform: rotateY(0deg) rotateX(-11deg) rotateZ(120deg) translateZ(120px); transform: rotateY(0deg) rotateX(-11deg) rotateZ(120deg) translateZ(120px); }
#leftMenuBtn #cube .face19 { -webkit-transform: rotateY(72deg) rotateX(-11deg) rotateZ(0deg) translateZ(120px); transform: rotateY(72deg) rotateX(-11deg) rotateZ(0deg) translateZ(120px); }
#leftMenuBtn #cube .face03 { -webkit-transform: rotateY(144deg) rotateX(-11deg) rotateZ(0deg) translateZ(120px); transform: rotateY(144deg) rotateX(-11deg) rotateZ(0deg) translateZ(120px); }
#leftMenuBtn #cube .face07 { -webkit-transform: rotateY(216deg) rotateX(-11deg) rotateZ(0deg) translateZ(120px); transform: rotateY(216deg) rotateX(-11deg) rotateZ(0deg) translateZ(120px); }
#leftMenuBtn #cube .face15 { -webkit-transform: rotateY(288deg) rotateX(-11deg) rotateZ(120deg) translateZ(120px); transform: rotateY(288deg) rotateX(-11deg) rotateZ(120deg) translateZ(120px); }

#leftMenuBtn #cube.show-1  { -webkit-transform: translateZ(-60px) rotateY(-50deg) rotateX(-38deg) rotateZ(35deg); transform: translateZ(-60px) rotateY(-50deg) rotateX(-38deg) rotateZ(35deg); }
#leftMenuBtn #cube.show-2  { -webkit-transform: translateZ(-60px) rotateY(170deg) rotateX(5deg) rotateZ(-60deg); transform: translateZ(-60px) rotateY(170deg) rotateX(5deg) rotateZ(-60deg); }
#leftMenuBtn #cube.show-3  { -webkit-transform: translateZ(-60px) rotateY(-144deg) rotateX(-8deg) rotateZ(-6deg); transform: translateZ(-60px) rotateY(-144deg) rotateX(-8deg) rotateZ(-6deg); }
#leftMenuBtn #cube.show-4  { -webkit-transform: translateZ(-60px) rotateY(76deg) rotateX(135deg) rotateZ(-62deg); transform: translateZ(-60px) rotateY(76deg) rotateX(135deg) rotateZ(-62deg); }
#leftMenuBtn #cube.show-5  { -webkit-transform: translateZ(-60px) rotateY(118deg) rotateX(-53deg) rotateZ(-35deg); transform: translateZ(-60px) rotateY(118deg) rotateX(-53deg) rotateZ(-35deg); }
#leftMenuBtn #cube.show-6  { -webkit-transform: translateZ(-60px) rotateY(-75deg) rotateX(135deg) rotateZ(65deg); transform: translateZ(-60px) rotateY(-75deg) rotateX(135deg) rotateZ(65deg); }
#leftMenuBtn #cube.show-7  { -webkit-transform: translateZ(-60px) rotateY(-37deg) rotateX(187deg) rotateZ(185deg); transform: translateZ(-60px) rotateY(-37deg) rotateX(187deg) rotateZ(185deg); }
#leftMenuBtn #cube.show-8  { -webkit-transform: translateZ(-60px) rotateY(-50deg) rotateX(-153deg) rotateZ(75deg); transform: translateZ(-60px) rotateY(-50deg) rotateX(-153deg) rotateZ(75deg); }
#leftMenuBtn #cube.show-9  { -webkit-transform: translateZ(-60px) rotateY(-73deg) rotateX(-175deg) rotateZ(15deg); transform: translateZ(-60px) rotateY(-73deg) rotateX(-175deg) rotateZ(15deg); }
#leftMenuBtn #cube.show-10 { -webkit-transform: translateZ(-60px) rotateY(51deg) rotateX(-42deg) rotateZ(-41deg); transform: translateZ(-60px) rotateY(51deg) rotateX(-42deg) rotateZ(-41deg); }
#leftMenuBtn #cube.show-11 { -webkit-transform: translateZ(-60px) rotateY(-50deg) rotateX(-220deg) rotateZ(-37deg); transform: translateZ(-60px) rotateY(-50deg) rotateX(-220deg) rotateZ(-37deg); }
#leftMenuBtn #cube.show-12 { -webkit-transform: translateZ(-60px) rotateY(-10deg) rotateX(-4deg) rotateZ(-120deg); transform: translateZ(-60px) rotateY(-10deg) rotateX(-4deg) rotateZ(-120deg); }
#leftMenuBtn #cube.show-13 { -webkit-transform: translateZ(-60px) rotateY(35deg) rotateX(4deg) rotateZ(-177deg); transform: translateZ(-60px) rotateY(35deg) rotateX(4deg) rotateZ(-177deg); }
#leftMenuBtn #cube.show-14 { -webkit-transform: translateZ(-60px) rotateY(-296deg) rotateX(72deg) rotateZ(30deg); transform: translateZ(-60px) rotateY(-296deg) rotateX(72deg) rotateZ(30deg); }
#leftMenuBtn #cube.show-15 { -webkit-transform: translateZ(-60px) rotateY(-238deg) rotateX(129deg) rotateZ(40deg); transform: translateZ(-60px) rotateY(-238deg) rotateX(129deg) rotateZ(40deg); }
#leftMenuBtn #cube.show-16 { -webkit-transform: translateZ(-60px) rotateY(-254deg) rotateX(-136deg) rotateZ(113deg); transform: translateZ(-60px) rotateY(-254deg) rotateX(-136deg) rotateZ(113deg); }
#leftMenuBtn #cube.show-17 { -webkit-transform: translateZ(-60px) rotateY(-37deg) rotateX(8deg) rotateZ(175deg); transform: translateZ(-60px) rotateY(-37deg) rotateX(8deg) rotateZ(175deg); }
#leftMenuBtn #cube.show-18 { -webkit-transform: translateZ(-60px) rotateY(-50deg) rotateX(25deg) rotateZ(288deg); transform: translateZ(-60px) rotateY(-50deg) rotateX(25deg) rotateZ(288deg); }
#leftMenuBtn #cube.show-19 { -webkit-transform: translateZ(-60px) rotateY(-72deg) rotateX(4deg) rotateZ(352deg); transform: translateZ(-60px) rotateY(-72deg) rotateX(4deg) rotateZ(352deg); }
#leftMenuBtn #cube.show-20 { -webkit-transform: translateZ(-60px) rotateY(50deg) rotateX(-220deg) rotateZ(38deg); transform: translateZ(-60px) rotateY(50deg) rotateX(-220deg) rotateZ(38deg); }

#dice-crit-toast {
  position: absolute;
  left: 70px;
  top: 10px;
  z-index: 12;
  min-width: 128px;
  max-width: 180px;
  padding: 0.34rem 0.6rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
  background: rgba(26, 26, 26, 0.88);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

#dice-crit-toast.crit-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#dice-crit-toast.is-success {
  background: rgba(28, 126, 58, 0.94);
}

#dice-crit-toast.is-danger {
  background: rgba(161, 34, 34, 0.94);
}

#dice-crit-toast.shake {
  animation: crit-toast-shake 620ms cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes crit-toast-shake {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(-3px, 0, 0) scale(1.02); }
  40% { transform: translate3d(3px, 0, 0) scale(0.98); }
  60% { transform: translate3d(-2px, 0, 0) scale(1.01); }
  80% { transform: translate3d(2px, 0, 0) scale(0.99); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}