@media screen and (orientation: landscape) and (min-height: 480px) {
  :root {
    --cardSize: min(var(--cardSizeDeskLand), var(--CardMaxSizeDeskLand));

    --smCardSize: calc(36vh);
    --smCardTop: calc(5.5vh);
    --smCardLeft: calc(40vw + 22vh);
    --zoomCardSize: calc(72vh * 0.8);
    --zoomCardLeft: calc(50vw - 28.8vh);
    --zoomCardTop: 6.5vh;
    --pushCardTop: 50vh;
    --pushCardLeft: calc(50vw - var(--cardSize) * 0.5);
  }

  .bgFiller {
    display: block;
    z-index: -1;
    background-size: 8vh;
    background-position: 0 -14vh;
  }

  .fillZoom {
    background-size: 12.8vh;
    background-position: 0 -25vh;
  }

  .play {
    background-size: 80vh;
    background-position: calc(40vw) -14vh;
    background-repeat: no-repeat;
  }
  .statusArea {
    left: calc(40vw - 15vh);
    width: 30vh;
    top: 20vh;
  }

  .statusEnde {
    width: 60vw;
    left: 20vw;
    top: 70vh;
  }
  .startScreen {
    background-size: 128vh;
    background-position: calc(50vw - 64vh) -25vh;
  }
  .menuItem {
    font-size: calc(min(var(--baseFontSize) * 1.5, 14pt));
  }
}

@media screen and (orientation: portrait) and (min-width: 480px) {
  :root {
    --cardSize: min(var(--cardSizeDeskPort), var(--cardMaxSizeDeskPort));

    --smCardSize: calc(36vw);
    --smCardTop: calc(1.5vw);
    --smCardLeft: calc(41vw);
    --zoomCardSize: calc(72vw * 0.8);
    --zoomCardLeft: 21.2vw;
    --zoomCardTop: 6.5vw;
    --pushCardTop: calc(50vh);
    --pushCardLeft: calc(50vw - var(--cardSize) * 0.5);
  }

  .statusEnde {
    width: 60vw;
    left: 20vw;
    top: 60vh;
  }

  .play {
    background-size: 80vw;
    background-position: 19vw -18vw;
    background-repeat: no-repeat;
  }

  .bgFiller {
    display: block;
    background-size: 8vw;
    background-position: 0 -18vw;
  }

  .fillZoom {
    background-size: 12.8vw;
    background-position: 0 -25vw;
  }
  .startScreen {
    background-size: 128vw;
    background-position: -14vw -25vw;
  }
  .menuItem {
    font-size: calc(min(var(--baseFontSize) * 1.5, 14pt));
  }
}

@media all and (display-mode: standalone) {
  .play {
    background-position: 17vw 0px;
  }
  .startScreen {
    background-position: -30vw 0px;
  }

  .bgFiller {
    display: block;
    background-size: 10vw;
    background-position: 0 0px;
  }

  .fillZoom {
    background-size: 16vw;
    background-position: 0px 0px;
  }
  :root {
    --cardSize: min(var(--cardSizeMobile), var(--cardMaxSizeMobile));

    --smCardTop: calc(24.5vw);

    --zoomCardTop: 39vw;
    --pushCardTop: 50vh;
  }

  .statusArea {
    top: 50vw;
  }

  .statusEnde {
    background-color: #00000099;

    width: 60vw;
    left: 20vw;
    top: 63vh;
  }
  .testButton {
    top: 100px;
  }
}

.rotate {
  background-color: #888;
  min-width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

#handy {
  animation: handyrot 4s linear infinite;
  position: absolute;
  top: calc(50vh - 70px);
  opacity: 1;
  width: 140px;
  z-index: -1;
}

@media screen and (orientation: landscape) and (max-height: 480px) {
  .rotate {
    display: flex;
    transform: translateZ(300px);
  }

  #3dpacker {
    opacity: 0;
  }
}

@keyframes handyrot {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-90deg);
  }

  80% {
    transform: rotate(-90deg);

    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-90deg);
  }
}