/* GLAD-O-POLIS 2.0 — Die Würfel in der Zugleiste.
   Gehört zu js/ui/wuerfelbild.js. Flach: keine Verläufe, keine Schatten.
   Farben nur über die Werte aus tokens.css. */

.wuerfelbild {
  --wurf-richtung: -1;   /* Drehsinn: der erste Würfel kippt nach links */
  --wurf-hub: 1;         /* Sprunghöhe als Anteil */
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  margin: 0 3px;
  line-height: 0;
  color: var(--blau);
  transform-origin: 50% 55%;
}

.wuerfelbild--zwei {
  --wurf-richtung: 1;
  --wurf-hub: .7;
}

.wuerfelbild-stein {
  display: block;
  overflow: visible;
}

.wuerfelbild-flaeche {
  fill: var(--papier-hell);
  stroke: var(--kontur);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.wuerfelbild-auge { fill: var(--blau); }

/* ---------- Der Wurf: kippen, springen, liegen ---------- */

.wuerfelbild--wurf {
  animation: wuerfelbild-wurf var(--wurf-dauer, 700ms) linear 1 both;
}

@keyframes wuerfelbild-wurf {
  0% {
    transform: translateY(calc(var(--wurf-hub) * -12px)) rotate(calc(var(--wurf-richtung) * 220deg)) scale(.82);
    animation-timing-function: ease-in;
  }
  30% {
    transform: translateY(0) rotate(calc(var(--wurf-richtung) * 96deg)) scale(1.04);
    animation-timing-function: ease-out;
  }
  52% {
    transform: translateY(calc(var(--wurf-hub) * -7px)) rotate(calc(var(--wurf-richtung) * 38deg)) scale(1);
    animation-timing-function: ease-in;
  }
  74% {
    transform: translateY(0) rotate(calc(var(--wurf-richtung) * 10deg)) scale(1);
    animation-timing-function: ease-out;
  }
  87% {
    transform: translateY(calc(var(--wurf-hub) * -2px)) rotate(calc(var(--wurf-richtung) * -4deg)) scale(1);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

/* ---------- Pasch: ein kurzer Hüpfer und ein Ring in Messing ---------- */

.wuerfelbild--pasch {
  animation: wuerfelbild-pasch 420ms ease-out 1 both;
}

.wuerfelbild--pasch::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--messing);
  border-radius: var(--radius-m);
  opacity: 0;
  pointer-events: none;
  animation: wuerfelbild-pasch-ring 420ms ease-out 1 both;
}

@keyframes wuerfelbild-pasch {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-5px) scale(1.08); }
  70%  { transform: translateY(0) scale(.97); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes wuerfelbild-pasch-ring {
  0%   { opacity: .9; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* ---------- Telefon: Die Zugleiste ist eng, die Würfel springen flacher ---------- */

@media (max-width: 560px) {
  .wuerfelbild { --wurf-hub: .5; }
  .wuerfelbild--zwei { --wurf-hub: .35; }
}

/* ---------- Ruhe: nichts bewegt sich ----------
   Steht am Ende der Datei, damit es bei gleichem Gewicht gewinnt. */

.bewegung-aus .wuerfelbild,
.bewegung-aus .wuerfelbild::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .wuerfelbild,
  .wuerfelbild::after { animation: none; }
}