@font-face {
  font-family: 'Press Start 2P';
  src: url('./PressStart2P-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/*
 * RS-MET / check IT out Würfel, für TippWerk gekapselt.
 * Grundlage: interactive_cube.zip / Originalwürfel:
 * 200er Shell, 160er Flächen, 80px Tiefe, Press Start 2P.
 *
 * v14: gleiche Grundgeometrie wie v13, aber mit etwas lebendigerer,
 * kontrollierter Pendelbewegung. Die erste automatische Bewegung geht nach
 * rechts, danach ruhig nach links und zurück.
 */
.rsmet-cube-slot {
  --rsmet-shell-size: 136px;
  --rsmet-face-size: 108px;
  --rsmet-half-face: 54px;
  --rsmet-face-bg: #414141;
  --rsmet-edge: #8bb92e;
  --rsmet-edge-opacity: .64;
  width: min(252px, 100%);
  height: 210px;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
  transform: translate3d(4px, 0, 0);
  contain: layout;
}

.rsmet-cube-container {
  width: var(--rsmet-shell-size);
  height: var(--rsmet-shell-size);
  perspective: 500px;
  margin: 0;
  overflow: visible;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.rsmet-cube-shell {
  width: var(--rsmet-shell-size);
  height: var(--rsmet-shell-size);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  cursor: grab;
  touch-action: none;
  overflow: visible;
  transform: translate3d(0, 0, 0);
}

.rsmet-cube-shell.is-dragging { cursor: grabbing; }

.rsmet-cube {
  position: relative;
  width: var(--rsmet-shell-size);
  height: var(--rsmet-shell-size);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  animation: rsmetCubeCalmTurn 9.5s ease-in-out infinite;
}

.rsmet-face {
  width: var(--rsmet-face-size);
  height: var(--rsmet-face-size);
  position: absolute;
  left: calc((var(--rsmet-shell-size) - var(--rsmet-face-size)) / 2);
  top: calc((var(--rsmet-shell-size) - var(--rsmet-face-size)) / 2);
  display: block;
  overflow: hidden;
  background: var(--rsmet-face-bg);
  border: 0;
  opacity: 1;
  transform-origin: center center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: paint;
}

.rsmet-face-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.rsmet-face-bg { fill: var(--rsmet-face-bg); }

.rsmet-face-outline {
  fill: none;
  stroke: var(--rsmet-edge);
  stroke-opacity: var(--rsmet-edge-opacity);
  stroke-width: .9;
  shape-rendering: geometricPrecision;
}

.rsmet-face-label {
  fill: var(--rsmet-edge);
  font-family: 'Press Start 2P', cursive;
  font-size: 25.6px;
  line-height: 1;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0;
}

.rsmet-face-svg-qr image {
  image-rendering: auto;
}

.rsmet-front { transform: translate3d(0, 0, var(--rsmet-half-face)); }
.rsmet-back { transform: translate3d(0, 0, calc(-1 * var(--rsmet-half-face))) rotateY(180deg); }
.rsmet-left { transform: translate3d(calc(-1 * var(--rsmet-half-face)), 0, 0) rotateY(-90deg); }
.rsmet-right { transform: translate3d(var(--rsmet-half-face), 0, 0) rotateY(90deg); }
.rsmet-top { transform: translate3d(0, calc(-1 * var(--rsmet-half-face)), 0) rotateX(90deg); }
.rsmet-bottom { transform: translate3d(0, var(--rsmet-half-face), 0) rotateX(-90deg); }

.rsmet-cube-shell .rsmet-cube,
.rsmet-cube-shell .rsmet-face,
.rsmet-cube-shell svg,
.rsmet-cube-shell image { pointer-events: none; }

.rsmet-cube-shell:hover .rsmet-cube,
.rsmet-cube-shell.is-dragging .rsmet-cube { animation-play-state: paused; }

@keyframes rsmetCubeCalmTurn {
  0%, 100% { transform: rotateX(-18deg) rotateY(-28deg) rotateZ(.45deg); }
  26% { transform: rotateX(-16.9deg) rotateY(-22.3deg) rotateZ(.95deg); }
  58% { transform: rotateX(-18.7deg) rotateY(-32.1deg) rotateZ(-.22deg); }
  82% { transform: rotateX(-17.4deg) rotateY(-25.5deg) rotateZ(.62deg); }
}

@media (min-width: 1440px) and (min-height: 820px) {
  .rsmet-cube-slot {
    --rsmet-shell-size: 140px;
    --rsmet-face-size: 112px;
    --rsmet-half-face: 56px;
    height: 216px;
    transform: translate3d(4px, 0, 0);
  }
}

@media (min-width: 900px) and (max-height: 780px) {
  .rsmet-cube-slot {
    --rsmet-shell-size: 132px;
    --rsmet-face-size: 106px;
    --rsmet-half-face: 53px;
    height: 204px;
    transform: translate3d(4px, 0, 0);
  }
}

@media (min-width: 900px) and (max-height: 730px) {
  .rsmet-cube-slot {
    --rsmet-shell-size: 126px;
    --rsmet-face-size: 100px;
    --rsmet-half-face: 50px;
    height: 192px;
    transform: translate3d(3px, 0, 0);
  }
}

@media (min-width: 900px) and (max-height: 690px) {
  .rsmet-cube-slot {
    --rsmet-shell-size: 118px;
    --rsmet-face-size: 94px;
    --rsmet-half-face: 47px;
    height: 174px;
    transform: translate3d(2px, 0, 0);
  }
}

@media (max-width: 860px) {
  .rsmet-cube-slot {
    --rsmet-shell-size: 128px;
    --rsmet-face-size: 102px;
    --rsmet-half-face: 51px;
    height: 196px;
    transform: translate3d(3px, 0, 0);
  }
}

@media (max-width: 460px) {
  .rsmet-cube-slot {
    --rsmet-shell-size: 114px;
    --rsmet-face-size: 90px;
    --rsmet-half-face: 45px;
    height: 166px;
    transform: translate3d(2px, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rsmet-cube { animation: none; transform: rotateX(-18deg) rotateY(-28deg) rotateZ(.5deg); }
}