/* Pixel-Spiel (Easter Egg, siehe „Pixel-Modus“ in CLAUDE.md). Gilt für den Fuß der Hauptseite (Mario) und das Seitenende der Discworld-Seite (Rincewind).
   Farben kommen aus den Variablen der Seite, die Rückfallwerte gelten für Seiten ohne diese Variablen. */
.spiel-platz, .spiel { --sp-linie: var(--linie, #d3d7ce); --sp-weich: var(--tinte-weich, #5b625d); --sp-schrift: var(--sans, system-ui, sans-serif); }
.fuss.mit-spiel .rechts { margin-left: 0; }
.spiel-platz { position: relative; flex: none; width: 20px; height: 24px; margin-inline: auto; align-self: center; }
.spiel-figur {
  position: absolute; left: -12px; top: -10px; z-index: 3; margin: 0; padding: 10px 12px; border: 0; background: none;
  line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.spiel canvas, .spiel-figur canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
/* die Spielfläche wächst unter dem Fuß; Kisten und Rohr laufen von rechts herein */
.spiel { position: relative; height: 0; overflow: hidden; max-width: 640px; margin-inline: auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.spiel .spiel-figur.im-spiel { left: calc(50% - 12px - var(--fig-halb, 10px)); top: auto; bottom: calc(var(--boden) - 10px); z-index: 2; }
.spiel { --boden: 84px; }
/* Boden: oben die laufenden Steine, darunter Erde. Die Erde hält Figur und Boden über der Leiste des Handy-Browsers
   (die Adressleiste verdeckt sonst die untersten gut 70 Pixel der Seite). */
.spiel-boden {
  position: absolute; left: 0; right: 0; bottom: calc(var(--boden) - 6px); height: 6px;
  background: repeating-linear-gradient(90deg, var(--sp-weich) 0 8px, var(--sp-linie) 8px 16px);
}
.spiel-erde { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--boden) - 6px); background: var(--sp-linie); opacity: .55; }
.spiel-ding { position: absolute; left: 0; bottom: var(--ding-unten, calc(var(--boden) + 46px)); z-index: 1; will-change: transform; }
.spiel-ding canvas { position: relative; z-index: 2; }
.spiel-ding.ziel-rohr { top: 0; bottom: auto; z-index: 4; }
/* Unseen University (Rincewind): steht auf dem Boden, hinter der Figur */
.spiel-ding.ziel-uni { bottom: var(--boden); z-index: 1; }
.spiel-ding.ziel-uni canvas { z-index: 1; }
.spiel-muenze { position: absolute; left: 4px; bottom: 8px; z-index: 1; display: none; }
.spiel-zaehler { position: absolute; left: 14px; top: 10px; display: flex; align-items: center; gap: 6px; font: .8125rem var(--sp-schrift); color: var(--sp-weich); font-variant-numeric: tabular-nums; }