/* ═══════════════════════════════════════════════════════════════════════════
   BUEHNEN 1 (v3.59) — Coin Flip, Dice, Limbo, Plinko, Crash, Slots, Blackjack
   ───────────────────────────────────────────────────────────────────────────
   Liegt NACH design.css, battles.css, spiele.css und angeln.css. Kopf,
   Einsatzkarte und Play-Knopf kommen weiter aus spiele.css; hier steht nur,
   was die sieben Buehnen auf das Niveau der Cases- und der Fishing-Buehne
   hebt. spiele.css und design.css bleiben unberuehrt — ein Rueckbau ist das
   Loeschen dieser Datei und der Markup-Aenderungen in index.html.

   Gemeinsame Sprache (wie .cs-buehne / .an-buehne):
   · aussen 14 px Rand, Radius 20, --ink-950; innen Radius 10, 420 px hoch
     (Handy 300), dunkler Grund mit radialem Glow in der Spielfarbe
     (--bh-rgb), Gitterboden ab 55 % Hoehe (nach oben ausgeblendet),
     Vignette am Rand.
   · Jede Buehne traegt .bh-buehne[data-spiel]; innen .bh-innen[data-zustand]
     — das Skript setzt nur Zustaende und Klassen, das Aussehen steht hier.
   · Ergebnis als Overlay-Karte (.bh-overlay) wie „YOU UNBOXED" bei Cases.
   · Bewegung nur auf transform/opacity; will-change nur auf dem einen
     Element, das sich wirklich lange bewegt (Muenze, Wuerfel, Streifen).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 Rahmen ─────────────────────────────────────────────────────────────── */
.bh-buehne {
  --bh-rgb: 124,92,255;
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--ink-950);
  overflow: hidden;
}
/* Ein Ton je Spiel: Gold, Violett, Cyan, Violett/Rosa, Orange, Gold, Gruen. */
.bh-buehne[data-spiel="coinflip"]  { --bh-rgb: 245,196,106 }
.bh-buehne[data-spiel="dice"]      { --bh-rgb: 155,125,255 }
.bh-buehne[data-spiel="limbo"]     { --bh-rgb: 76,201,240 }
.bh-buehne[data-spiel="plinko"]    { --bh-rgb: 200,110,255 }
.bh-buehne[data-spiel="crash"]     { --bh-rgb: 255,138,74 }
.bh-buehne[data-spiel="slots"]     { --bh-rgb: 245,196,106 }
.bh-buehne[data-spiel="blackjack"] { --bh-rgb: 62,194,122 }

.bh-innen {
  position: relative;
  height: 420px;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  background:
    radial-gradient(60% 55% at 50% 100%, rgba(var(--bh-rgb), .16), transparent 70%),
    radial-gradient(45% 50% at 50% 42%, rgba(var(--bh-rgb), .07), transparent 70%),
    var(--ink-900);
}
/* Gitterboden ab 55 % — nach oben ausgeblendet, damit er ein Boden bleibt
   und keine Tapete wird. */
.bh-innen::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 55%; bottom: 0; z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(var(--bh-rgb), .07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(var(--bh-rgb), .07) 0 1px, transparent 1px 20px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 60%);
          mask: linear-gradient(180deg, transparent, #000 60%);
}
/* Vignette: ueber allem, aber ohne Klicks zu fangen. */
.bh-innen::after {
  content: "";
  position: absolute; inset: 0; z-index: 6;
  border-radius: 10px;
  box-shadow: inset 0 0 90px rgba(0,0,0,.55);
  pointer-events: none;
}

/* Die alte Buehne (.spiel-buehne aus index.html/spiele.css) bleibt als
   Spalte im Raster, gibt aber Rahmen, Raster und Vignette an .bh-buehne ab —
   sonst laege ein Rahmen im Rahmen. Nur fuer die sieben Spiele hier. */
.spiel-layout .spiel-buehne:is([data-g="coinflip"], [data-g="dice"], [data-g="limbo"], [data-g="plinko"], [data-g="crash"], [data-g="slots"], [data-g="blackjack"]) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 0;
  gap: 12px;
  overflow: visible;
  justify-content: flex-start;
}
.spiel-layout .spiel-buehne:is([data-g="coinflip"], [data-g="dice"], [data-g="limbo"], [data-g="plinko"], [data-g="crash"], [data-g="slots"], [data-g="blackjack"])::before,
.spiel-layout .spiel-buehne:is([data-g="coinflip"], [data-g="dice"], [data-g="limbo"], [data-g="plinko"], [data-g="crash"], [data-g="slots"], [data-g="blackjack"])::after,
.spiel-layout .spiel-buehne:is([data-g="coinflip"], [data-g="dice"], [data-g="limbo"], [data-g="plinko"], [data-g="crash"], [data-g="slots"], [data-g="blackjack"]) .buehne-ergebnis,
.spiel-layout .spiel-buehne:is([data-g="coinflip"], [data-g="dice"], [data-g="limbo"], [data-g="plinko"], [data-g="crash"], [data-g="slots"], [data-g="blackjack"]) .feier {
  display: none;
}
/* Der Ergebnisblock bleibt im DOM (Klang, Feed und Beobachter haengen an
   ihm) und fuer Screenreader lesbar — sichtbar ist die Overlay-Karte. */
.spiel-layout .spiel-buehne:is([data-g="coinflip"], [data-g="dice"], [data-g="limbo"], [data-g="plinko"], [data-g="crash"], [data-g="slots"], [data-g="blackjack"]) .game-result {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 0 Overlay-Karte (wie „YOU UNBOXED" bei Cases) ────────────────────────── */
/* v3.89: Die Karte lag mittig ueber dem Feld, mit dunklem Schleier und
   Weichzeichner. Damit sah man genau das nicht, worum es geht: in welchem
   Eimer die Plinko-Kugel liegt, welches Blatt beim Blackjack steht, welche
   Augenzahl der Wuerfel zeigt. Sie sitzt jetzt als Banner OBEN in der Buehne,
   ohne Schleier — das Ergebnis liest man, das Feld sieht man. */
.bh-overlay {
  --bh-k-rgb: 245,196,106;
  position: absolute; inset: 0; z-index: 8;
  display: grid; align-items: start; justify-items: center;
  padding: 14px 16px;
  pointer-events: none;
  animation: bh-einblenden .25s var(--ease-out) both;
}
/* Buehnen mit Verlauf-Chips oben (Crash, Limbo, Plinko): Karte darunter. */
.bh-innen:has(> .bh-verlauf) .bh-overlay { padding-top: 46px }
.bh-overlay--weg { animation: bh-ausblenden .25s var(--ease-out) both }
.bh-overlay--verlust { --bh-k-rgb: 255,92,92 }
.bh-overlay--neutral { --bh-k-rgb: 170,176,190 }
.bh-overlay--gold    { --bh-k-rgb: 253,176,34 }
@keyframes bh-einblenden { from { opacity: 0 } to { opacity: 1 } }
@keyframes bh-ausblenden { to { opacity: 0 } }
.bh-karte {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 1px solid rgba(var(--bh-k-rgb), .4);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  box-shadow: inset 0 -30px 40px -30px rgba(var(--bh-k-rgb), .6), 0 24px 50px -20px rgba(0,0,0,.85);
  text-align: center;
  animation: bh-pop .35s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes bh-pop { from { transform: scale(.85); opacity: 0 } to { transform: none; opacity: 1 } }
.bh-karte__titel {
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
}
.bh-overlay--gold .bh-karte__titel { color: var(--gold) }
.bh-karte__mult {
  font-family: var(--font-disp);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(245,196,106,.4);
}
.bh-karte__mult--text { font-size: 1.6rem; letter-spacing: -.02em }
.bh-overlay--verlust .bh-karte__mult { color: #ff6b6b; text-shadow: 0 0 26px rgba(255,92,92,.35) }
.bh-overlay--neutral .bh-karte__mult { color: var(--text-2); text-shadow: none }
.bh-karte__betrag {
  font: var(--t-zahl);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.bh-overlay--verlust .bh-karte__betrag, .bh-overlay--neutral .bh-karte__betrag { color: var(--text-2) }

/* Gewinn-Partikel: 8–12 kleine Muenzpunkte, nur ab 2×. */
.bh-partikel { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden }
.bh-partikel i {
  position: absolute; left: 50%; top: 50%;
  width: var(--g, 7px); height: var(--g, 7px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2c2, #f5c46a 55%, #b8873a);
  box-shadow: 0 0 8px rgba(245,196,106,.7);
  animation: bh-muenze .95s cubic-bezier(.2,.6,.4,1) both;
}
@keyframes bh-muenze {
  0%   { transform: translate(-50%, -50%) scale(.6); opacity: 0 }
  12%  { opacity: 1 }
  70%  { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 1 }
  100% { transform: translate(calc(-50% + var(--dx) * 1.1), calc(-50% + var(--dy) + 30px)) scale(.5); opacity: 0 }
}

/* Verlauf-Chips oben in der Buehne (Limbo, Plinko, Crash). */
.bh-verlauf {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 5;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px;
  height: 26px;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, #000 85%, transparent);
          mask: linear-gradient(90deg, #000 85%, transparent);
  pointer-events: auto;
}
.bh-verlauf .limbo-pille {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,92,92,.4);
  background: rgba(15,18,22,.85);
  color: #ff8a8a;
  font: var(--t-zahl-klein);
  font-variant-numeric: tabular-nums;
}
.bh-verlauf .limbo-pille--sieg { border-color: rgba(61,220,132,.45); background: rgba(61,220,132,.12); color: var(--play-ink) }
.bh-verlauf .limbo-pille--gold, .bh-verlauf .crash-pille--hoch { border-color: rgba(245,196,106,.5); background: rgba(245,196,106,.12); color: var(--gold) }

/* ── 0 Bedienfeld: gleich breite Pillen, aktiver Modus violett, Fokusringe ── */
/* v3.89: feste vier Spalten. Mit auto-fill passten in die schmalere Spalte
   nur noch drei, und acht Werte standen als 3+3+2 da. */
.spiel-steuer .quick-bets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.spiel-steuer .quick-bets .quick-bet {
  width: 100%;
  min-height: 34px;
  padding: 0 6px;
  border-radius: 999px;
  text-align: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.spiel-steuer .modus-reiter__knopf.active {
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 var(--line-top);
  color: var(--accent-ink);
}
.spiel-layout :is(button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.spiel-layout .btn-play:focus-visible { outline-color: var(--play-ink) }
/* Etiketten in Versalien mit .04em Luft, Inter. */
.bh-etikett {
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
}

/* ── 1 Coin Flip ──────────────────────────────────────────────────────────────
   Muenze 220 px als 3D-Karte: zwei Flaechen Ruecken an Ruecken, die Bilder
   muenze-kopf.svg / muenze-zahl.svg obenauf, die gezeichnete Muenze aus
   index.html darunter als Rueckfallebene (fehlt ein Bild, entfernt es sich
   selbst). Leerlauf kippt sanft, der Wurf hebt den Koerper 1,6 s an, waehrend
   die Muenze 5–7 Umdrehungen macht und auf der Serverseite landet. */
.cf-raum {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding-bottom: 46px;
  perspective: 1100px;
}
/* v3.89: 220 px Muenze in einer 860-px-Buehne sahen verloren aus. */
.cf-koerper {
  position: relative;
  width: 280px; height: 280px;
  transform-style: preserve-3d;
  transition: transform .35s var(--ease-out);
}
.bh-innen[data-zustand="leerlauf"] .cf-koerper { animation: cf-kippen 3.6s ease-in-out infinite }
@keyframes cf-kippen {
  0%, 100% { transform: rotateX(10deg) rotateZ(-4deg) translateY(0) }
  50%      { transform: rotateX(-4deg) rotateZ(4deg) translateY(-8px) }
}
.bh-innen[data-zustand="wartet"] .cf-koerper { animation: cf-zittern .3s ease-in-out infinite }
@keyframes cf-zittern { 0%, 100% { transform: rotateZ(-3deg) } 50% { transform: rotateZ(3deg) } }
/* Flug: hoch und wieder herunter, gleiche Kurve wie die Drehung. */
.bh-innen[data-zustand="laeuft"] .cf-koerper { animation: cf-flug 1.6s cubic-bezier(.2,.8,.2,1) both }
@keyframes cf-flug {
  0%   { transform: translateY(0) scale(1) }
  40%  { transform: translateY(-78px) scale(1.08) }
  100% { transform: translateY(0) scale(1) }
}
.bh-innen[data-zustand="gelandet"] .cf-koerper { animation: cf-setzen .3s var(--ease-out) }
.bh-innen .cf-koerper .cf-muenze {
  position: relative;
  width: 280px; height: 280px;
  transform-style: preserve-3d;
  transition: transform 1.6s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.bh-innen .cf-flaeche {
  position: absolute; inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.5));
}
.bh-innen .cf-flaeche--zahl { transform: rotateY(180deg) }
.cf-zeichnung, .cf-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.cf-bild { object-fit: contain }
/* Schattenellipse am Boden — schrumpft, solange die Muenze oben ist. */
.cf-schatten {
  position: absolute; left: 50%; bottom: 15%; z-index: 1;
  width: 190px; height: 26px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent);
}
.bh-innen[data-zustand="laeuft"] .cf-schatten { animation: cf-schatten-flug 1.6s cubic-bezier(.2,.8,.2,1) both }
@keyframes cf-schatten-flug {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1 }
  40%      { transform: translateX(-50%) scale(.55); opacity: .45 }
}
/* Aufblitzen in Gold (Kopf) oder Blau (Zahl), wenn sie liegt. */
.cf-blitz { position: absolute; inset: 0; z-index: 5; border-radius: 10px; opacity: 0; pointer-events: none }
.bh-innen[data-ton="gold"] .cf-blitz { background: radial-gradient(circle at 50% 44%, rgba(245,196,106,.55), transparent 62%); animation: cf-aufblitzen .6s var(--ease-out) both }
.bh-innen[data-ton="blau"] .cf-blitz { background: radial-gradient(circle at 50% 44%, rgba(79,127,234,.55), transparent 62%); animation: cf-aufblitzen .6s var(--ease-out) both }
@keyframes cf-aufblitzen { 0% { opacity: 0 } 20% { opacity: 1 } 100% { opacity: 0 } }
.bh-innen .cf-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 5;
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}
/* Seitenwahl: grosse Chips mit Muenzbild. */
.cf-wahl .cf-opt__mark { position: relative; width: 76px; height: 76px; overflow: hidden }
.cf-wahl .cf-opt__mark img { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.cf-wahl .cf-opt.selected .cf-opt__mark { box-shadow: 0 0 0 3px var(--ink-850), 0 0 0 5px var(--accent), 0 8px 18px -6px rgba(0,0,0,.7) }

/* ── 2 Dice ───────────────────────────────────────────────────────────────────
   Wuerfel 200 px als CSS-3D-Wuerfel: sechs Flaechen um translateZ(--wf-h)
   nach aussen gedreht. Die Rotation je Augenzahl steht im Skript
   (WF_DREHUNG); der Wuerfel rollt 1,2 s mit Zufalls-Umdrehungen und endet
   exakt dort. Die Huelle traegt den Leerlauf (Schweben) und die Schraeglage,
   der Wuerfel selbst nur die Rotation. */
.wf-raum {
  --wf-h: 100px;
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding-bottom: 54px;
  perspective: 1200px;
}
.wf-huelle {
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(12deg);
  transition: transform .35s var(--ease-out);
}
.bh-innen[data-zustand="leerlauf"] .wf-huelle { animation: wf-schweben 4s ease-in-out infinite }
@keyframes wf-schweben {
  0%, 100% { transform: translateY(0) rotateX(-18deg) rotateY(24deg) }
  50%      { transform: translateY(-10px) rotateX(-24deg) rotateY(36deg) }
}
.bh-innen[data-zustand="wartet"] .wf-huelle { animation: wf-zittern .3s ease-in-out infinite }
@keyframes wf-zittern {
  0%, 100% { transform: rotateX(-12deg) rotateY(8deg) }
  50%      { transform: rotateX(-12deg) rotateY(16deg) }
}
.bh-innen[data-zustand="gelandet"] .wf-huelle { animation: cf-setzen .3s var(--ease-out) }
.wf-wuerfel {
  position: relative;
  width: calc(var(--wf-h) * 2); height: calc(var(--wf-h) * 2);
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
/* Flaeche wie ein echter Wuerfel: Elfenbein, runde Ecken, eingelassene Augen.
   Vorher lag hier das Bild wuerfel-N.svg — eine isometrische Gesamtansicht,
   die auf jeder Flaeche als kleiner schraeger Wuerfel im weissen Quadrat
   erschien. Die Augen (.wf-auge) setzt wfSeite() ins 3x3-Raster. */
.wf-seite {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  box-sizing: border-box;
  padding: 14%;
  border-radius: 18%;
  /* Oben links ein weicher Lichtfleck, zur Kante hin etwas dunkler —
     das liest sich als leicht gewoelbte Kunststoffflaeche. */
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%),
    linear-gradient(155deg, #fdf8ec 0%, #f1e8d5 55%, #e2d5b9 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120,96,58,.3),
    inset 0 0 16px 1px rgba(150,120,72,.3),
    inset 0 -10px 18px rgba(96,74,40,.14);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Ein Auge: dunkel, rund, gebohrt. Der innere Schatten oben und der helle
   Rand unten lassen es wie eine Vertiefung im Material wirken. */
.wf-auge {
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #141210 0%, #26211c 58%, #3e372f 100%);
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.8),
    inset 0 -1px 1px rgba(255,255,255,.14),
    0 1px 0 rgba(255,255,255,.75);
}
/* Die Eins allein wirkt mit Normalgroesse verloren — wie bei echten
   Wuerfeln etwas groesser. */
.wf-seite[data-n="1"] .wf-auge { width: 76% }
/* Kern aus zwei Kreuzflaechen in Kantenfarbe: durch die runden Ecken der
   sechs Flaechen saehe man sonst an jeder Wuerfelecke hindurch. */
.wf-wuerfel::before, .wf-wuerfel::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 18%;
  background: #d9cbab;
}
.wf-wuerfel::before { transform: rotateY(90deg) }
.wf-wuerfel::after  { transform: rotateX(90deg) }
.wf-seite[data-n="1"] { transform: rotateY(0deg)   translateZ(var(--wf-h)) }
.wf-seite[data-n="6"] { transform: rotateY(180deg) translateZ(var(--wf-h)) }
.wf-seite[data-n="2"] { transform: rotateY(90deg)  translateZ(var(--wf-h)) }
.wf-seite[data-n="5"] { transform: rotateY(-90deg) translateZ(var(--wf-h)) }
.wf-seite[data-n="3"] { transform: rotateX(90deg)  translateZ(var(--wf-h)) }
.wf-seite[data-n="4"] { transform: rotateX(-90deg) translateZ(var(--wf-h)) }
.wf-schatten {
  position: absolute; left: 50%; bottom: 13%; z-index: 1;
  width: 210px; height: 30px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent);
}
.bh-innen[data-zustand="laeuft"] .wf-schatten { animation: wf-schatten-roll 1.2s cubic-bezier(.2,.8,.2,1) both }
@keyframes wf-schatten-roll {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1 }
  45%      { transform: translateX(-50%) scale(.7); opacity: .5 }
}
.wf-zahl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 5;
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}
/* Wettoptionen als Karten, Quote in Gold; die gewaehlte violett, nach dem
   Wurf leuchtet sie gruen (getroffen) oder rot (verfehlt). */
.dice-karte .label { margin-bottom: 6px }
.dice-karte .dice-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 10px }
.dice-karte .dice-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 62px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-900);
  color: var(--text-2);
  font: var(--t-knopf);
  letter-spacing: var(--ls-knopf);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s, box-shadow .18s, color .18s, transform .16s var(--ease-out);
}
.dice-karte .dice-opt .payout-tag { font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--gold) }
.dice-karte .dice-opt.selected {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent), 0 8px 18px -10px var(--accent-glow);
}
.dice-karte .dice-opt.wf-treffer { border-color: var(--play); box-shadow: inset 0 0 0 1px var(--play), 0 0 24px -6px rgba(61,220,132,.8); color: var(--play-ink) }
.dice-karte .dice-opt.wf-fehl { border-color: rgba(255,92,92,.6); box-shadow: inset 0 0 0 1px rgba(255,92,92,.5) }

/* ── 3 Limbo ──────────────────────────────────────────────────────────────────
   Weltraum: Himmelbild, zwei Sternenebenen, die langsam nach links driften
   (nur transform), Rakete 140 px, Zielmarke als gestrichelte Linie mit
   Beschriftung. Zustaende: leerlauf | wartet | laeuft | treffer | verfehlt. */
.lb-himmel { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; pointer-events: none }
.lb-sterne {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 1;
  width: 200%;
  pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 38% 64%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.4px 1.4px at 61% 18%, #dff4ff, transparent),
    radial-gradient(1px 1px at 79% 48%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 91% 76%, #fff, transparent),
    radial-gradient(1px 1px at 24% 84%, rgba(255,255,255,.7), transparent);
  background-size: 420px 300px;
  opacity: .7;
  will-change: transform;
  animation: lb-drift 90s linear infinite;
}
.lb-sterne--2 { background-size: 260px 220px; opacity: .4; animation-duration: 50s }
@keyframes lb-drift { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.lb-rakete {
  position: absolute; left: 50%; bottom: 7%; z-index: 3;
  width: 140px; height: 140px;
  transform: translate(-50%, 0);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.5));
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1), opacity .4s;
  pointer-events: none;
}
.lb-rakete img { width: 100%; height: 100%; display: block; object-fit: contain }
.bh-innen[data-zustand="leerlauf"] .lb-rakete { animation: lb-schweben 3.4s ease-in-out infinite }
@keyframes lb-schweben {
  0%, 100% { transform: translate(-50%, 0) rotate(-2deg) }
  50%      { transform: translate(-50%, -10px) rotate(2deg) }
}
.bh-innen[data-zustand="wartet"] .lb-rakete { animation: lb-ruetteln .12s linear infinite }
@keyframes lb-ruetteln { 0%, 100% { transform: translate(-50%, 0) } 50% { transform: translate(calc(-50% + 2px), -1px) } }
.bh-innen[data-zustand="laeuft"] .lb-rakete { transform: translate(-50%, -150px) }
.bh-innen[data-zustand="treffer"] .lb-rakete { transform: translate(-50%, -236px) scale(1.06); transition-duration: .5s }
.bh-innen[data-zustand="verfehlt"] .lb-rakete {
  transform: translate(-50%, -60px) rotate(38deg);
  opacity: .7;
  transition: transform .8s cubic-bezier(.4,0,.6,1), opacity .8s;
}
/* Flamme: drei Zungen unter der Rakete, flackern nur im Flug. */
.lb-flamme { position: absolute; left: 50%; bottom: 2px; width: 0; height: 0; z-index: -1 }
.lb-flamme i {
  position: absolute; left: -7px; top: 0;
  width: 14px; height: 36px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: linear-gradient(180deg, #fff, #ffd166 30%, #ff7a45 65%, transparent);
  transform-origin: 50% 0;
  opacity: 0;
}
.lb-flamme i:nth-child(2) { left: -16px; height: 26px; transform: rotate(14deg) }
.lb-flamme i:nth-child(3) { left: 2px; height: 26px; transform: rotate(-14deg) }
.bh-innen[data-zustand="laeuft"] .lb-flamme i, .bh-innen[data-zustand="treffer"] .lb-flamme i {
  opacity: 1;
  animation: lb-flackern .16s ease-in-out infinite alternate;
}
.bh-innen[data-zustand="laeuft"] .lb-flamme i:nth-child(2), .bh-innen[data-zustand="treffer"] .lb-flamme i:nth-child(2) { animation-delay: .05s }
.bh-innen[data-zustand="laeuft"] .lb-flamme i:nth-child(3), .bh-innen[data-zustand="treffer"] .lb-flamme i:nth-child(3) { animation-delay: .1s }
@keyframes lb-flackern { from { transform: scaleY(1) } to { transform: scaleY(1.35) scaleX(.85) } }
/* Zielmarke: Linie mit Beschriftung, die Rakete durchbricht sie beim Treffer. */
.lb-marke { position: absolute; left: 8%; right: 8%; top: 40%; z-index: 2; border-top: 2px dashed rgba(76,201,240,.55); pointer-events: none }
.lb-marke__text {
  position: absolute;
  right: 0;
  top: -28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(76,201,240,.45);
  background: rgba(10,16,30,.85);
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: #bfefff;
  white-space: nowrap;
}
.lb-marke__text b { color: #fff; font-variant-numeric: tabular-nums }
.bh-innen .lb-zahl {
  position: absolute; left: 50%; top: 22%; z-index: 4;
  transform: translateX(-50%);
  font-family: var(--font-disp);
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 4px 14px rgba(0,0,0,.6);
  transition: color .2s, text-shadow .3s;
  pointer-events: none;
}
.bh-innen .lb-zahl--sieg { color: var(--play-ink); text-shadow: 0 0 28px rgba(61,220,132,.45), 0 4px 12px rgba(0,0,0,.6) }
.bh-innen .lb-zahl--verloren { color: #ff6b6b; text-shadow: 0 0 28px rgba(255,107,107,.4), 0 4px 12px rgba(0,0,0,.6) }
.lb-blitz { position: absolute; inset: 0; z-index: 5; border-radius: 10px; opacity: 0; pointer-events: none }
.bh-innen[data-zustand="treffer"] .lb-blitz { background: radial-gradient(circle at 50% 40%, rgba(76,201,240,.5), transparent 60%); animation: cf-aufblitzen .6s var(--ease-out) both }
/* Rauch beim Verfehlen: fuenf Wolken, die aus der Rakete aufsteigen. */
.lb-rauch { position: absolute; left: 50%; bottom: 26%; z-index: 2; width: 0; height: 0; pointer-events: none }
.lb-rauch i {
  position: absolute; left: -10px; top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,200,212,.55), transparent 70%);
  opacity: 0;
}
.bh-innen[data-zustand="verfehlt"] .lb-rauch i { animation: lb-qualm 1.3s ease-out both }
.lb-rauch i:nth-child(1) { --dx: -30px; --dy: -70px }
.lb-rauch i:nth-child(2) { --dx: 22px; --dy: -90px; animation-delay: .08s }
.lb-rauch i:nth-child(3) { --dx: -8px; --dy: -110px; animation-delay: .16s }
.lb-rauch i:nth-child(4) { --dx: 36px; --dy: -60px; animation-delay: .24s }
.lb-rauch i:nth-child(5) { --dx: -40px; --dy: -120px; animation-delay: .32s }
@keyframes lb-qualm {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0 }
  20%  { opacity: .9 }
  100% { transform: translate(var(--dx), var(--dy)) scale(2.4); opacity: 0 }
}

/* ── 4 Plinko ─────────────────────────────────────────────────────────────────
   Das Brett bleibt ein Canvas (Stifte, Becher, Kugel, Schweif zeichnet das
   Skript); hier nur der Platz in der Buehne und der Verlauf oben. */
.pk-raum { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end center; padding: 46px 10px 12px }
/* v3.89: Plinko ist von Natur aus hoch — 16 Reihen in 420 px liessen nur ein
   schmales Brett zu. Mehr Hoehe hier heisst mehr Breite dort. */
.bh-buehne[data-spiel="plinko"] .bh-innen { height: 700px }   /* v4.25: hoeher → breiteres Brett, lesbare Becher */
.bh-innen .plinko-brett { display: block; max-width: 100%; max-height: 100%; touch-action: manipulation }

/* ── 5 Crash ──────────────────────────────────────────────────────────────────
   Nachthimmel als Bild hinter dem Canvas; Sterne, Kurve, Glow-Punkt und
   Raketen-Sprite zeichnet das Skript. Multiplikator gross, Farbe nach Hoehe;
   Countdown als Ringbalken; Crash mit rotem Blitz und Zittern. */
.crash-buehne { width: 100%; display: flex; flex-direction: column; gap: 12px }
/* v3.89: Die Spielerliste stand UNTER der Kurve; rechts neben der Karte lagen
   ueber 260 px brach, und wer mitspielte, sah beim Steigen nicht, wer schon
   ausgestiegen ist. Ab 1100 px steht sie daneben — wie bei DonutFlip. */
@media (min-width: 1100px) {
  .crash-buehne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    grid-template-areas: "buehne spieler" "ergebnis spieler";
    align-items: start;
    gap: 12px;
  }
  .crash-buehne > .bh-buehne { grid-area: buehne }
  .crash-buehne > #crash-result { grid-area: ergebnis }
  .crash-buehne .crash-spieler { grid-area: spieler; align-self: stretch }
  .crash-buehne .crash-spieler__liste { max-height: 420px }
}
.cr-himmel { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; pointer-events: none }
.bh-innen .crash-flaeche { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: 0; background: none; overflow: hidden }
.bh-innen .crash-brett { display: block; width: 100%; height: 100% }
.bh-innen .crash-anzeige { z-index: 3 }
.bh-innen .crash-zahl {
  position: relative;
  font-family: var(--font-disp);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--play-ink);
  text-shadow: 0 0 28px rgba(61,220,132,.4), 0 4px 14px rgba(0,0,0,.7);
  transition: color .3s, text-shadow .3s;
}
.bh-innen .crash-zahl[data-ton="gold"] { color: var(--gold); text-shadow: 0 0 28px rgba(245,196,106,.45), 0 4px 14px rgba(0,0,0,.7) }
.bh-innen .crash-zahl[data-ton="rot"]  { color: #ff8a6b; text-shadow: 0 0 28px rgba(255,138,74,.5), 0 4px 14px rgba(0,0,0,.7) }
.bh-innen .crash-zahl--warten { color: var(--text); text-shadow: 0 4px 14px rgba(0,0,0,.7); font-size: clamp(2rem, 4.5vw, 3rem) }
/* v3.91: „Crashed @ 16.43×" ist dreimal so lang wie „16.43×" und brach auf
   dem Handy zweizeilig ueber die Achsenbeschriftung. Eine Zeile, kleiner. */
.bh-innen .crash-zahl--crash { color: #ff6b6b; text-shadow: 0 0 28px rgba(255,92,92,.5), 0 4px 14px rgba(0,0,0,.7); animation: cr-zittern .5s linear both; font-size: clamp(1.5rem, 3.6vw, 3.2rem); white-space: nowrap }
@keyframes cr-zittern {
  0%, 100% { transform: translate(0, 0) }
  20% { transform: translate(-5px, 2px) }
  40% { transform: translate(5px, -2px) }
  60% { transform: translate(-3px, -1px) }
  80% { transform: translate(3px, 1px) }
}
.bh-innen .crash-unter {
  margin-top: 8px;
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--text-2);
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
/* Ringbalken um den Countdown: pathLength 100, das Skript setzt den Versatz. */
.cr-ring { position: absolute; left: 50%; top: 50%; z-index: 2; width: 168px; height: 168px; transform: translate(-50%, -50%) rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .25s }
.bh-innen[data-zustand="warten"] .cr-ring { opacity: 1 }
.cr-ring__grund { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 5 }
.cr-ring__lauf { fill: none; stroke: var(--play); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(61,220,132,.6)); transition: stroke-dashoffset .1s linear }
.cr-blitz { position: absolute; inset: 0; z-index: 5; border-radius: 10px; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(255,80,80,0) }
.bh-innen[data-zustand="gecrasht"] .cr-blitz { animation: cr-rotblitz .7s var(--ease-out) both }
@keyframes cr-rotblitz {
  0%   { box-shadow: inset 0 0 0 0 rgba(255,80,80,0) }
  18%  { box-shadow: inset 0 0 90px 12px rgba(255,80,80,.6) }
  100% { box-shadow: inset 0 0 0 0 rgba(255,80,80,0) }
}
/* Spielerliste: aufgeraeumt — Avatar, Name, Einsatz, Auszahlung gruen. */
.crash-buehne .crash-spieler { border-radius: 14px; background: var(--ink-850) }
.crash-buehne .crash-spieler__kopf {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.crash-buehne .crash-zeile {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font: var(--t-klein);
  border-bottom: 1px solid var(--line);
}
.crash-buehne .crash-zeile .race-av { width: 26px; height: 26px; border-radius: 50% }
.crash-buehne .crash-einsatz { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text-2) }
.crash-buehne .crash-raus { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--play-ink) }
.crash-buehne .crash-profit { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--play-ink) }
.crash-buehne .crash-zeile--raus { background: rgba(61,220,132,.06) }
.crash-buehne .crash-zeile--ich { background: var(--accent-dim) }
/* Auf breiten Fenstern liegt die Liste rechts neben der Buehne. */
@media (min-width: 1400px) {
  .crash-buehne { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: start }
  .crash-buehne .crash-spieler__liste { max-height: 420px }
  .crash-buehne #crash-result { grid-column: 1 / -1 }
}

/* ── 6 Slots ──────────────────────────────────────────────────────────────────
   Drei Walzen als echte Streifen: je Symbol --sl-h (96 px) hoch, drei sichtbar,
   die mittlere Reihe ist die Gewinnlinie. Im Lauf faehrt der Streifen acht
   Symbole weit in Schleife (die zweite Haelfte gleicht der ersten, deshalb
   ohne Sprung) — Unschaerfe nur auf den bewegten Symbolen. Der Stopp faehrt
   zwei Reihen mit Nachfedern auf das Serversymbol. */
.sl-raum {
  --sl-h: 96px;
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 12px;
}
.sl-walze {
  position: relative;
  width: 124px; height: calc(var(--sl-h) * 3);
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #0a0b10, #1a1c24 50%, #0a0b10);
  box-shadow: inset 0 2px 14px rgba(0,0,0,.75), 0 10px 30px -14px rgba(0,0,0,.8);
  overflow: hidden;
}
.sl-walze::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.7), transparent 28%, transparent 72%, rgba(0,0,0,.7));
}
.sl-streifen { position: absolute; left: 0; right: 0; top: 0; will-change: transform; transform: translateY(0) }
.sl-sym { height: var(--sl-h); display: grid; place-items: center }
.sl-sym img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); pointer-events: none }
.sl-walze--laeuft .sl-streifen { animation: sl-lauf .42s linear infinite; filter: blur(2.5px) }
@keyframes sl-lauf { from { transform: translateY(0) } to { transform: translateY(calc(var(--sl-h) * -8)) } }
.sl-walze--stopp .sl-streifen { transition: transform .45s cubic-bezier(.34,1.56,.64,1) }
/* v3.89: Die Linie lief ueber die GANZE Buehne (855 → 1900 px), die Walzen
   stehen aber nur in der Mitte — sie zeigte auf nichts. */
.sl-linie {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  /* Genau ueber die drei Walzen: 3 x 124 px + 2 x 14 px Luecke = 400 px,
     am Handy 3 x 90 + 2 x 8 = 286 px. */
  width: 400px;
  max-width: 76%;
  height: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(245,196,106,.75) 20%, rgba(245,196,106,.75) 80%, transparent);
  opacity: .5;
  pointer-events: none;
  transition: opacity .3s;
}
/* v3.65: Die Glut pulst ueber opacity eines fertig gemalten Scheins
   (::after) statt ueber eine box-shadow-Animation – kein Neumalen je Bild. */
.bh-innen[data-zustand="sieg"] .sl-linie { opacity: 1; box-shadow: 0 0 10px rgba(245,196,106,.5) }
.bh-innen[data-zustand="sieg"] .sl-linie::after { content: ""; position: absolute; inset: 0; box-shadow: 0 0 22px rgba(245,196,106,.95); opacity: 0; pointer-events: none; animation: sl-linie-glut 1s ease-in-out infinite alternate }
@keyframes sl-linie-glut { from { opacity: 0 } to { opacity: 1 } }
.sl-sym--treffer img { animation: sl-puls .55s ease-in-out infinite alternate; filter: drop-shadow(0 0 14px rgba(245,196,106,.8)) }
@keyframes sl-puls { from { transform: scale(1) } to { transform: scale(1.14) } }
.bh-innen .payline-info { display: none }
.spiel-buehne[data-g="slots"] .payline-info { width: 100%; max-width: 560px; margin: 0 auto }

/* ── 7 Blackjack ──────────────────────────────────────────────────────────────
   Tischbild (kartentisch.svg) unter dem Filz; Karten mit Ecken-Wert, Rueckseite
   mit Muster; Austeilen 260 ms vom Schuh (oben rechts), Umdrehen als echter
   3D-Flip (Rueckseite → Vorderseite); Handwerte als Chips. */
.bh-buehne[data-spiel="blackjack"] .bh-innen { height: auto; min-height: 420px }
.bj-filz { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; pointer-events: none }
/* v3.63: kartentisch.svg traegt im Bild unten links Chip-Stapel und unten
   rechts einen Kartenschuh (ab y 224 von 420). Bei object-fit: cover waren
   beide riesig und lagen ueber Tisch und "Place your bet". Das Bild ist nur
   noch Filz: auf die obere, ruhige Haelfte gezoomt (2.2-fach von oben Mitte,
   sichtbar bleibt y 0 bis ca. 190). Chips und Schuh kommen klein als eigene
   Elemente (.bj-deko, .bj-schuh). */
.bj-filz { object-position: 50% 0; transform: scale(2.2); transform-origin: 50% 0 }
.bh-innen .bj-tisch {
  position: relative; z-index: 2;
  min-height: 420px;
  --bj-w: clamp(56px, 5.6vw, 80px);
  padding: 18px 16px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 10px;
}
/* v3.63: Kartenschuh ca. 110 px oben rechts, ungedreht und mit Abstand zum
   Rand — die alte, um 8 Grad gedrehte Rueckseite wurde oben rechts
   abgeschnitten. Stapel ragt oben heraus, die naechste Karte vorne links. */
.bh-innen .bj-schuh {
  top: 24px; right: 20px; z-index: -1;
  width: 110px; height: 68px;
  aspect-ratio: auto;
  border: 1px solid rgba(245,196,106,.4);
  border-radius: 8px 8px 10px 10px;
  background: linear-gradient(170deg, #4a3522, #2b1e12 55%, #1d140b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 12px -6px rgba(0,0,0,.6), 0 14px 24px -12px rgba(0,0,0,.9);
  transform: none;
  opacity: 1;
}
.bh-innen .bj-schuh::before {
  content: ""; position: absolute; left: 12px; right: 22px; top: -10px; height: 22px;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(45deg, #5a3fd4 0 5px, #6c50f2 5px 10px);
  box-shadow: inset 0 0 0 2px #f4f1ea;
}
.bh-innen .bj-schuh::after {
  content: ""; position: absolute; left: -12px; bottom: 8px; width: 40px; height: 28px;
  border-radius: 4px;
  background: repeating-linear-gradient(45deg, #5a3fd4 0 4px, #6c50f2 4px 8px);
  box-shadow: inset 0 0 0 2px #f4f1ea, 0 4px 8px -4px rgba(0,0,0,.8);
  transform: rotate(-12deg);
}
/* Deko-Chips unten links, hoechstens 70 px hoch: drei kleine Stapel aus
   chip-1/2/3.svg (34 px, je 10 px versetzt). Die Mitte bleibt frei;
   z-index -1 (in .bj-tisch, isolation) legt sie unter Karten und Knoepfe. */
.bj-deko {
  position: absolute; left: 20px; bottom: 16px; z-index: -1;
  display: flex; align-items: flex-end; gap: 4px;
  max-height: 70px;
  pointer-events: none;
}
.bj-stapel { display: flex; flex-direction: column-reverse }
.bj-stapel img { width: 34px; height: 34px; display: block; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.55)) }
.bj-stapel img + img { margin-bottom: -24px }
.bj-stapel:nth-child(2) { margin-bottom: -6px }
@media (max-width: 600px) {
  .bh-innen .bj-schuh { top: 18px; right: 12px; width: 72px; height: 44px }
  .bh-innen .bj-schuh::before { left: 8px; right: 14px; top: -7px; height: 15px }
  .bh-innen .bj-schuh::after { width: 26px; height: 18px; left: -8px; bottom: 5px }
  /* Handy: unten liegen die Zug-Knoepfe (.bj-mobil) — dort keine Deko. */
  .bj-deko { display: none }
}
.bh-innen .bj-hand { perspective: 900px }
.bh-innen .bj-karte {
  transform-style: preserve-3d;
  border-radius: calc(var(--bj-w) * .1);
  background: linear-gradient(160deg, #ffffff, #eef0f5);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(0,0,0,.12), 0 10px 22px -10px rgba(0,0,0,.8);
}
.bh-innen .bj-karte .bj-ecke, .bh-innen .bj-karte .bj-mitte { backface-visibility: hidden; -webkit-backface-visibility: hidden }
.bj-rueckseite {
  position: absolute; inset: 0;
  border-radius: inherit;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: repeating-linear-gradient(45deg, #5a3fd4 0 5px, #6c50f2 5px 10px);
  box-shadow: inset 0 0 0 3px #f4f1ea, inset 0 0 0 5px #4a32b3;
}
.bj-rueckseite::after {
  content: ""; position: absolute; inset: 30% 26%;
  border-radius: 50%;
  background: radial-gradient(circle, #f5c46a 0 22%, transparent 23%), radial-gradient(circle, transparent 0 48%, #ff7eb6 49% 70%, transparent 71%);
  opacity: .9;
}
/* v3.89: .bh-innen .bj-karte faerbt JEDE Karte weiss — auch die verdeckte.
   Neben den violett gestreiften Rueckseiten im Schlitten lag beim Geber eine
   weisse Karte mit rosa Kreis. Dieselbe Rueckseite fuer beide. */
.bh-innen .bj-karte--rueck {
  background: repeating-linear-gradient(45deg, #5a3fd4 0 5px, #6c50f2 5px 10px);
  box-shadow: inset 0 0 0 3px #f4f1ea, inset 0 0 0 5px #4a32b3, 0 12px 24px -10px rgba(0,0,0,.75);
}
.bh-innen .bj-karte--rueck .bj-rueckseite { display: none }
/* Austeilen: 260 ms vom Schuh; das Skript staffelt die Karten. */
.bh-innen .bj-karte--neu { animation: bj-flug .26s cubic-bezier(.2,.8,.2,1) both }
@keyframes bj-flug {
  from { transform: translate(calc(var(--bj-w) * 3.6), calc(var(--bj-w) * -2.2)) rotate(-12deg) scale(.92); opacity: 0 }
  50%  { opacity: 1 }
  to   { transform: none; opacity: 1 }
}
.bh-innen .bj-karte--dreh { animation: bj-flip .42s cubic-bezier(.2,.8,.2,1) both }
@keyframes bj-flip { from { transform: rotateY(180deg) } to { transform: rotateY(0) } }
/* Handwert als Chip: runder Rand wie ein Jeton. */
.bh-innen .bj-wert {
  min-width: 46px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px dashed rgba(255,255,255,.38);
  background: radial-gradient(circle at 50% 50%, rgba(20,26,24,.95), rgba(8,12,10,.95));
  box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 6px 14px -8px rgba(0,0,0,.9);
  font: var(--t-zahl-klein);
  font-variant-numeric: tabular-nums;
}
.bh-innen .bj-wert--bj { border-color: rgba(245,196,106,.85); color: var(--gold) }
.bh-innen .bj-wert--bust { border-color: rgba(255,92,92,.75); color: #ff8a8a }
.bh-innen .bj-einsatz { gap: 6px }
.bj-chip { width: 18px; height: 18px; display: block; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)) }
.bh-innen .bj-leer img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)) }
.bh-innen .bj-label { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: rgba(214,255,232,.5) }
.bh-innen .bj-bogen { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase }
/* Aktionen mit Tastenkuerzeln, gut lesbar. */
.bj-karte-steuer .bj-aktion { min-height: 44px; font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums }
.bj-karte-steuer .bj-aktion kbd {
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  font: var(--t-etikett-klein);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--text-2);
}

/* ── Turbo (Auto-Modus): das Skript rechnet mit autoTempo (30 %), die
   Uebergaenge hier ziehen mit — sonst stuende die Kugel frueher als das Bild. */
body.auto-turbo .bh-innen .cf-koerper .cf-muenze { transition-duration: .5s }
body.auto-turbo .bh-innen[data-zustand="laeuft"] .cf-koerper, body.auto-turbo .bh-innen[data-zustand="laeuft"] .cf-schatten { animation-duration: .5s }
body.auto-turbo .wf-wuerfel { transition-duration: .4s }
body.auto-turbo .bh-innen[data-zustand="laeuft"] .wf-schatten { animation-duration: .4s }
body.auto-turbo .lb-rakete { transition-duration: .45s }
body.auto-turbo .sl-walze--stopp .sl-streifen { transition-duration: .2s }
body.auto-turbo .bh-overlay, body.auto-turbo .bh-karte { animation-duration: .15s }

/* ── 8 Handy und schmale Fenster ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .bh-buehne { padding: 10px; border-radius: 14px }
  .bh-innen { height: 300px }
  .bh-karte { min-width: 180px; padding: 14px 20px 12px }
  .bh-karte__mult { font-size: 2.2rem }
  .cf-raum { padding-bottom: 36px }
  .cf-koerper, .bh-innen .cf-koerper .cf-muenze { width: 150px; height: 150px }
  .cf-schatten { width: 130px; height: 20px; bottom: 14% }
  .wf-raum { --wf-h: 70px; padding-bottom: 40px }
  .wf-schatten { width: 150px; height: 22px }
  .lb-rakete { width: 96px; height: 96px }
  .bh-innen[data-zustand="laeuft"] .lb-rakete { transform: translate(-50%, -100px) }
  .bh-innen[data-zustand="treffer"] .lb-rakete { transform: translate(-50%, -160px) scale(1.06) }
  .bh-innen .lb-zahl { font-size: 2.4rem; top: 20% }
  .lb-marke__text { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase }
  .pk-raum { padding: 40px 6px 8px }
  .sl-raum { --sl-h: 72px; gap: 8px; padding: 0 8px }
  .sl-walze { width: 90px }
  .sl-linie { width: 286px }
  .sl-sym img { width: 54px; height: 54px }
  .bh-buehne[data-spiel="blackjack"] .bh-innen { min-height: 300px }
  .bh-innen .bj-tisch { min-height: 300px; --bj-w: clamp(46px, 14vw, 62px); padding: 12px 8px 8px }
  .bh-innen .crash-zahl { font-size: 2.4rem }
  .cr-ring { width: 130px; height: 130px }
  .bh-verlauf { left: 8px; right: 8px; top: 8px }
}

/* ── 9 Reduzierte Bewegung: harte Wechsel, keine Schleifen ─────────────────────
   html.reduziert kuerzt in design.css schon jede Animation und jeden Uebergang
   auf .01 ms; hier zusaetzlich die Unschaerfe der Walzen und die Endlos-
   Schleifen, die auch mit .01 ms noch Bilder kosten wuerden. */
html.reduziert .sl-walze--laeuft .sl-streifen,
html.reduziert .lb-sterne,
html.reduziert .lb-flamme i,
html.reduziert .sl-sym--treffer img,
html.reduziert .bh-innen[data-zustand] .cf-koerper,
html.reduziert .bh-innen[data-zustand] .wf-huelle,
html.reduziert .bh-innen[data-zustand] .lb-rakete { animation: none; filter: none }
@media (prefers-reduced-motion: reduce) {
  .bh-innen[data-zustand] .cf-koerper, .bh-innen[data-zustand] .cf-schatten, .bh-innen[data-ton] .cf-blitz,
  .bh-innen[data-zustand] .wf-huelle, .bh-innen[data-zustand] .wf-schatten,
  .lb-sterne, .bh-innen[data-zustand] .lb-rakete, .bh-innen[data-zustand] .lb-flamme i, .bh-innen[data-zustand] .lb-blitz, .bh-innen[data-zustand] .lb-rauch i,
  .sl-walze--laeuft .sl-streifen, .sl-sym--treffer img, .bh-innen[data-zustand="sieg"] .sl-linie, .bh-innen[data-zustand="sieg"] .sl-linie::after,
  .bh-innen .crash-zahl--crash, .bh-innen[data-zustand="gecrasht"] .cr-blitz,
  .bh-innen .bj-karte--neu, .bh-innen .bj-karte--dreh,
  .bh-overlay, .bh-karte, .bh-partikel i { animation: none }
  .bh-innen .cf-koerper .cf-muenze, .cf-koerper, .wf-wuerfel, .wf-huelle, .lb-rakete, .sl-walze--stopp .sl-streifen, .cr-ring__lauf, .bh-innen .crash-zahl { transition: none }
  .sl-walze--laeuft .sl-streifen { filter: none }
  .bh-partikel { display: none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUEHNEN 2 (v3.60) — Mines, Tower, Chicken Road, Roulette, Jackpot, Duels
   ───────────────────────────────────────────────────────────────────────────
   Dieselbe Sprache wie oben: .bh-buehne[data-spiel] aussen, .bh-innen mit
   data-zustand innen, Overlay-Karte, Muenzpunkte. Neu fuer diese Gruppe:
   · .bh-chip — der Multiplikator-Chip oben in der Buehne (zaehlt hoch),
   · .bh-rotblitz + bh-wackeln — Explosion, Lava, Ueberfahren (nur transform
     und opacity, 200 ms),
   · .bh-partikel--glut / --federn — Partikel in Orange und Weiss aus einem
     Element heraus (bhPartikelAn im Skript).
   Jackpot und Duels sind eigene Seiten und tragen die Buehne ohne
   .spiel-layout. Bilder liegen unter /img/buehne/ und fehlen still.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 10 Rahmen der vier Spiele im Spielbereich ───────────────────────────── */
.bh-buehne[data-spiel="mines"]    { --bh-rgb: 62,194,122 }
.bh-buehne[data-spiel="tower"]    { --bh-rgb: 87,160,220 }
.bh-buehne[data-spiel="chicken"]  { --bh-rgb: 245,170,60 }
.bh-buehne[data-spiel="roulette"] { --bh-rgb: 224,90,90 }
.bh-buehne[data-spiel="jackpot"]  { --bh-rgb: 245,196,106 }
.bh-buehne[data-spiel="duell"]    { --bh-rgb: 155,125,255 }

.spiel-layout .spiel-buehne:is([data-g="mines"], [data-g="tower"], [data-g="chicken"], [data-g="roulette"]) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 0;
  gap: 12px;
  overflow: visible;
  justify-content: flex-start;
}
.spiel-layout .spiel-buehne:is([data-g="mines"], [data-g="tower"], [data-g="chicken"], [data-g="roulette"])::before,
.spiel-layout .spiel-buehne:is([data-g="mines"], [data-g="tower"], [data-g="chicken"], [data-g="roulette"])::after,
.spiel-layout .spiel-buehne:is([data-g="mines"], [data-g="tower"], [data-g="chicken"], [data-g="roulette"]) .buehne-ergebnis,
.spiel-layout .spiel-buehne:is([data-g="mines"], [data-g="tower"], [data-g="chicken"], [data-g="roulette"]) .feier {
  display: none;
}
/* Ergebnisblock bleibt im DOM (Klang, Feed, Beobachter), sichtbar ist die Karte. */
.spiel-layout .spiel-buehne:is([data-g="mines"], [data-g="tower"], [data-g="chicken"], [data-g="roulette"]) .game-result {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Die alte Statuszeile (tower-info, mines-info, road-multiplier) wird zur
   ruhigen Zeile unten in der Buehne — wie cf-status. */
.bh-innen :is(.mines-info, .tower-info, .road-multiplier) {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  margin: 0;
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  pointer-events: none;
}
.bh-innen :is(.mines-info, .tower-info, .road-multiplier) strong { color: var(--gold) }

/* Multiplikator-Chip oben: zaehlt hoch (bhChipZaehlen), federt beim Sprung. */
.bh-chip {
  position: absolute;
  left: 50%;
  top: 12px;
  z-index: 5;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--bh-rgb), .5);
  background: rgba(10,14,20,.88);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  font: var(--t-zahl);
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
.bh-chip--pulst { animation: bh-chip-puls .4s cubic-bezier(.2,1.4,.4,1) both }
@keyframes bh-chip-puls {
  0%   { transform: translateX(-50%) scale(1) }
  35%  { transform: translateX(-50%) scale(1.18) }
  100% { transform: translateX(-50%) scale(1) }
}
/* Roter Blitz und Wackeln bei Bombe, Lava, Auto — 200 ms, nur transform. */
.bh-rotblitz { position: absolute; inset: 0; z-index: 5; border-radius: 10px; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255,80,80,.6), rgba(255,80,80,.15) 60%, transparent 80%) }
.bh-innen:is([data-zustand="explodiert"], [data-zustand="gefallen"], [data-zustand="ueberfahren"]) .bh-rotblitz { animation: bh-rot .5s var(--ease-out) both }
@keyframes bh-rot { 0% { opacity: 0 } 15% { opacity: 1 } 100% { opacity: 0 } }
/* v3.89: Nach einer Bombe sah die Buehne aus wie nach einem Gewinn — der Chip
   blieb weiss, die Statuszeile grau, die aufgedeckten Minen fast unsichtbar.
   Der verlorene Zustand traegt jetzt Rot, bis die naechste Runde beginnt. */
.bh-innen:is([data-zustand="explodiert"], [data-zustand="gefallen"], [data-zustand="ueberfahren"]) .bh-chip {
  border-color: rgba(255,92,92,.6);
  background: rgba(38,12,12,.92);
  color: #ff8a8a;
}
.bh-innen:is([data-zustand="explodiert"], [data-zustand="gefallen"], [data-zustand="ueberfahren"]) :is(.mines-info, .tower-info, .road-multiplier) { color: #ff8a8a }
.bh-innen:is([data-zustand="explodiert"], [data-zustand="gefallen"], [data-zustand="ueberfahren"])::after {
  box-shadow: inset 0 0 90px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,92,92,.32);
}
.bh-innen[data-zustand="explodiert"] .mn-raum,
.bh-innen[data-zustand="gefallen"] .tw-raum,
.bh-innen[data-zustand="ueberfahren"] .ch-raum { animation: bh-wackeln .2s linear both }
@keyframes bh-wackeln {
  0%, 100% { transform: translate(0, 0) }
  25% { transform: translate(-6px, 3px) }
  50% { transform: translate(5px, -3px) }
  75% { transform: translate(-3px, 2px) }
}
/* Partikel aus einem Element heraus: Glut (Tower) und Federn (Chicken). */
.bh-partikel--glut i { background: radial-gradient(circle at 35% 35%, #fff1c2, #ff9a3c 50%, #c2410c); box-shadow: 0 0 8px rgba(255,138,74,.8) }
.bh-partikel--federn i { border-radius: 40% 60% 50% 50%; background: radial-gradient(circle at 40% 40%, #fff, #e6ecf5 70%); box-shadow: 0 0 6px rgba(255,255,255,.6) }

/* ── 11 Mines: 3D-Kacheln auf Grasboden ───────────────────────────────────────
   Das Raster kippt 8° nach hinten (perspective am Raum), jede Kachel ist
   ein Grasblock-Deckel (mines-kachel.svg, Kante unten dunkler) ueber dem
   Inhalt (Gem oder Bombe). Klick: der Deckel klappt 320 ms um die X-Achse
   auf und verschwindet durch backface-visibility, der Inhalt blendet ein.
   Groesse je Raster: 3×3 94 px, 4×4 78 px, 5×5 62 px (Handy kleiner). */
.mn-boden {
  position: absolute; inset: 0; z-index: 0;
  background: url(/img/buehne/mines-boden.svg) center / 64px 64px repeat;
  opacity: .2;
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg, rgba(0,0,0,.35), #000 55%);
          mask: linear-gradient(180deg, rgba(0,0,0,.35), #000 55%);
}
.mn-raum {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: 44px 12px 34px;
  perspective: 900px;
}
.bh-innen .mines-board {
  --mn-k: 64px;
  display: grid;
  gap: 6px;
  margin: 0;
  max-width: none;
  transform: rotateX(8deg);
  transform-style: preserve-3d;
  transition: none;
}
/* v3.89: groessere Kacheln — das Brett nutzte nur ein Drittel der Buehne. */
.bh-innen .mines-board[data-n="3"] { --mn-k: 112px }
.bh-innen .mines-board[data-n="4"] { --mn-k: 96px }
.bh-innen .mines-board[data-n="5"] { --mn-k: 78px }
.bh-innen .mine-cell {
  position: relative;
  display: block;
  width: var(--mn-k); height: var(--mn-k);
  aspect-ratio: auto;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .18s var(--ease-out);
  animation: none;
}
.bh-innen .mine-cell:hover:not(.gem):not(.mine-hit):not(.revealed-mine) {
  border: 0;
  background: none;
  box-shadow: none;
  transform: translateY(-3px) translateZ(4px);
}
.bh-innen .mine-cell:is(.gem, .mine-hit, .revealed-mine) { cursor: default; animation: none }
/* v4.23 (C20): die angeklickte Kachel hebt sich, bis die Antwort da ist — wie tw-block--dran bei Tower. */
.bh-innen .mine-cell.mn-dran { transform: translateY(-5px) translateZ(6px); filter: brightness(1.25); cursor: default }   /* v4.25: kein Warte-Zeiger */
.mn-deckel {
  position: absolute; inset: 0; z-index: 2;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #5cb85c, #3e8f42 70%, #2f6b33);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18), 0 6px 10px -4px rgba(0,0,0,.7);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.mn-deckel img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover }
/* Kante unten dunkler — die Kachel steht als Block auf dem Boden. */
.mn-deckel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)) }
.mn-inhalt {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, #172219, #0d1410);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);
  opacity: 0;
  transition: opacity .16s .16s;
}
.mn-inhalt img { width: 72%; height: 72%; display: block; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)) }
.mine-cell.mn-auf .mn-deckel { transform: rotateX(180deg) }
.mine-cell.mn-auf .mn-inhalt { opacity: 1 }
/* Gem: Aufblitzen (Skala + weisser Schein), Rahmen gruen. */
.bh-innen .mine-cell.gem .mn-inhalt { box-shadow: inset 0 0 0 1px rgba(61,220,132,.55), 0 0 22px -4px rgba(61,220,132,.75) }
.bh-innen .mine-cell.gem .mn-inhalt img { animation: mn-aufblitzen .5s .16s cubic-bezier(.2,1.4,.4,1) both }
@keyframes mn-aufblitzen {
  0%   { transform: scale(.4); opacity: 0; filter: drop-shadow(0 0 0 rgba(255,255,255,0)) }
  50%  { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 14px rgba(255,255,255,.9)) }
  100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)) }
}
/* Bombe: der getroffene Block rot, die Explosion springt auf. */
.bh-innen .mine-cell.mine-hit .mn-inhalt { background: linear-gradient(180deg, #3a1212, #1a0808); box-shadow: inset 0 0 0 1px rgba(255,92,92,.6), 0 0 26px -2px rgba(255,92,92,.7) }
.bh-innen .mine-cell.mine-hit .mn-inhalt img { animation: mn-knall .45s .16s cubic-bezier(.2,1.4,.4,1) both }
@keyframes mn-knall { 0% { transform: scale(.3) } 60% { transform: scale(1.35) } 100% { transform: scale(1) } }
/* Die uebrigen Bomben: versetzt nacheinander (--reveal-delay aus dem Skript), gedimmt. */
.bh-innen .mine-cell.revealed-mine .mn-deckel { transition-delay: var(--reveal-delay, 0ms) }
/* v3.89: .72 auf dunklem Grund war neben den gruenen Kacheln kaum zu sehen —
   man erfuhr nicht, wo die Minen lagen. Heller und mit rotem Rand. */
.bh-innen .mine-cell.revealed-mine .mn-inhalt { opacity: .88; transition-delay: calc(var(--reveal-delay, 0ms) + .16s); background: linear-gradient(180deg, #2e1212, #160909); box-shadow: inset 0 0 0 1px rgba(255,92,92,.38) }
/* Cash-out: alle Gems gluehen. */
/* v3.65: Nur noch transform pulst; der Schein ist ein fester Filter in der
   Mitte zwischen alt-Start und alt-Ende. Ein animierter drop-shadow hiesse
   jedes Bild alle Gems neu filtern. */
.bh-innen[data-zustand="kassiert"] .mine-cell.gem .mn-inhalt img { animation: mn-gluehen .9s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px rgba(61,220,132,.8)) }
@keyframes mn-gluehen {
  from { transform: scale(1) }
  to   { transform: scale(1.1) }
}
/* Auto-Modus: gewaehlte Kacheln mit violettem Rand und Punkt ueber dem Deckel. */
.bh-innen .mine-cell--gewaehlt { background: none !important; box-shadow: none }
.bh-innen .mine-cell--gewaehlt .mn-deckel { box-shadow: inset 0 0 0 2px rgba(155,125,255,.9), inset 0 -5px 0 rgba(0,0,0,.35), 0 0 16px -4px rgba(124,92,255,.9) }
.bh-innen .mine-cell--gewaehlt::after { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%) translateZ(1px) }
/* Knoepfe in der Saeule: Start/Cash-out links, „Next tile"-Vorschau daneben. */
.mn-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch }
.mn-naechste {
  display: grid; align-content: center; gap: 3px;
  min-width: 82px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-900);
  text-align: center;
}
.mn-naechste b { font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--gold) }

/* ── 12 Tower: Steinblock-Stufen mit Truhe ────────────────────────────────────
   Der Turm steht unten in der Buehne und faehrt per --tw-kamera (Skript)
   nach unten, sobald die aktive Reihe ueber der Mitte liegt. Blocks sind
   tower-block.svg als Hintergrund, Reihe und Quote rechts als Spalte. */
.tw-raum { position: absolute; inset: 0; z-index: 2; overflow: hidden }
/* v3.63: Acht Reihen a 54 px plus Truhe passen nicht in 420 px — die oberste
   Reihe wurde hart abgeschnitten und sah kaputt aus. Die Tower-Buehne ist
   deshalb hoeher, und der obere Rand blendet weich aus statt zu schneiden. */
.bh-buehne[data-spiel="mines"] .bh-innen { height: 520px }
.bh-buehne[data-spiel="tower"] .bh-innen { height: 540px }
.bh-buehne[data-spiel="tower"] .tw-raum { -webkit-mask: linear-gradient(180deg, transparent 0, #000 36px); mask: linear-gradient(180deg, transparent 0, #000 36px) }
.tw-turm {
  /* v3.63: Bloecke 126 x 48 (vorher 118 x 44) — Reihe = Block + 6 px Luecke. */
  --tw-h: 54px;
  position: absolute; left: 50%; bottom: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translateX(-50%) translateY(var(--tw-kamera, 0px));
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.bh-innen .tower-grid { display: flex; flex-direction: column; gap: 6px; margin: 0 }
.bh-innen .tower-row { position: relative; display: flex; align-items: center; gap: 6px; padding-right: 0 }
.bh-innen .tower-cell {
  position: relative;
  width: 126px; height: 48px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #4a5566, #2c3440);
  background-image: none;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.35), 0 4px 8px -4px rgba(0,0,0,.7);
  overflow: hidden;
  cursor: default;
  transition: transform .18s var(--ease-out), box-shadow .2s, filter .2s;
  animation: none;
}
.tw-block__bild { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; pointer-events: none }
/* v3.63: Die Quote steht nicht mehr als Text auf dem Stein (unlesbar auf dem
   Muster), sondern rechts in der Spalte. Nur beim Hover der aktiven Reihe
   erscheint sie klein unten im Block — aus data-mult, ohne eigenen Knoten. */
.bh-innen .tower-cell::after {
  content: attr(data-mult);
  position: absolute; left: 50%; bottom: 3px; z-index: 1;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(10,14,20,.82);
  font: 700 .6rem/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.bh-innen .tower-cell.current-row:hover::after { opacity: 1 }
.bh-innen .tower-cell .sym { display: none }
/* Aktive Reihe leuchtet, ist klickbar, hebt sich beim Hover. v3.63: deutlicher
   (2 px Ring, heller) plus ein Band hinter der ganzen Reihe und die Spalte
   rechts in Weiss/Gold — man sieht sofort, wo es weitergeht. */
.bh-innen .tower-cell.current-row { cursor: pointer; animation: none; filter: brightness(1.28); box-shadow: 0 0 0 2px rgba(87,160,220,.95), 0 0 22px 0 rgba(87,160,220,.7), inset 0 -4px 0 rgba(0,0,0,.35) }
.bh-innen .tower-row:has(.current-row)::before {
  content: "";
  position: absolute; inset: -4px -8px; z-index: -1;
  border-radius: 10px;
  border: 1px solid rgba(87,160,220,.5);
  background: rgba(87,160,220,.14);
  pointer-events: none;
}
.bh-innen .tower-row:has(.current-row) .tower-nr b { color: #fff }
.bh-innen .tower-row:has(.current-row) .tower-nr i { color: var(--gold) }
.bh-innen .tower-cell.current-row:hover { transform: translateY(-3px) }
.bh-innen .tower-cell.tw-block--dran { transform: translateY(-5px); filter: brightness(1.3) }
/* Geschafft: Gold-Rand; die ungewaehlten sicheren Blocks der Reihe bleiben grau. */
.bh-innen .tower-cell.revealed { cursor: default; animation: none; background-image: none }
.bh-innen .tower-cell.tw-block--gold { box-shadow: 0 0 0 2px var(--gold), 0 0 18px -4px rgba(245,196,106,.8), inset 0 -4px 0 rgba(0,0,0,.35) }
.bh-innen .tower-cell.revealed.safe:not(.tw-block--gold) { filter: saturate(.6) brightness(.85) }
/* v3.89: Ein genommener Stein unterschied sich nur durch einen goldenen Rand
   von einem ungenommenen — beim Blick auf den Turm sah man nicht, welchen Weg
   man genommen hat. Jetzt traegt er sein Zeichen, und die uebrigen Steine der
   fertigen Reihe treten zurueck. */
.bh-innen .tower-cell.tw-block--gold .sym {
  display: block;
  position: relative;
  z-index: 2;
  width: 26px; height: 26px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
.bh-innen .tower-row:has(.tw-block--gold) .tower-cell:not(.tw-block--gold) { opacity: .4 }
/* Falle: Lava bricht durch, Block rot. */
.bh-innen .tower-cell.bomb { box-shadow: 0 0 0 2px rgba(255,92,92,.7), 0 0 22px -2px rgba(255,92,92,.8), inset 0 -4px 0 rgba(0,0,0,.35) }
.tw-lava { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; animation: tw-durchbruch .5s cubic-bezier(.2,1.2,.4,1) both; pointer-events: none }
@keyframes tw-durchbruch { 0% { transform: scale(.4); opacity: 0 } 60% { transform: scale(1.12); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
/* Reihen-Nummer und Quote rechts als ruhige Spalte. */
.bh-innen .tower-nr {
  position: static;
  transform: none;
  display: grid; gap: 2px;
  width: 60px;
  text-align: left;
}
.bh-innen .tower-nr b { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.bh-innen .tower-nr i { font: 700 .72rem/1 var(--font-num); font-style: normal; font-variant-numeric: tabular-nums; color: var(--text-2) }
/* Truhe oben als Ziel — schwebt, leuchtet, jubelt beim Cash-out. */
.tw-schatz { width: 72px; height: 72px; margin-bottom: 2px; filter: drop-shadow(0 0 14px rgba(245,196,106,.5)); animation: tw-schweben 3s ease-in-out infinite }
.tw-schatz img { width: 100%; height: 100%; display: block; object-fit: contain }
@keyframes tw-schweben { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.bh-innen[data-zustand="kassiert"] .tw-schatz { animation: tw-jubel .6s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 0 24px rgba(245,196,106,.95)) }
@keyframes tw-jubel { 0% { transform: scale(1) } 50% { transform: scale(1.25) rotate(-6deg) } 100% { transform: scale(1.1) } }
.tw-knoepfe { display: flex; gap: 8px }
.tw-knoepfe .btn { flex: 1 }
/* v3.63: Chip ueber der Buehne, Statuszeile darunter — in der Buehne deckten
   sie die oberste bzw. unterste Blockreihe zu. Der Puls ohne translateX,
   weil der Chip hier im Fluss steht und nicht mittig absolut. */
/* v4.14: als Plakette auf der oberen Kante der Buehne — gehoert sichtbar dazu,
   ohne die oberste Reihe zu verdecken (darum stand es seit v3.63 darueber). */
.tw-kopf { display: flex; justify-content: center; width: 100%; position: relative; z-index: 6; margin-bottom: -19px }
.tw-kopf .bh-chip { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 4px var(--ink-900) }
.tw-kopf .bh-chip { position: static; transform: none }
.tw-kopf .bh-chip--pulst { animation-name: tw-chip-puls }
@keyframes tw-chip-puls { 0% { transform: scale(1) } 35% { transform: scale(1.18) } 100% { transform: scale(1) } }
html.reduziert .tw-kopf .bh-chip--pulst { animation: none }
@media (prefers-reduced-motion: reduce) { .tw-kopf .bh-chip--pulst { animation: none } }
.tower-info.tw-status {
  width: 100%;
  margin: 0;
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.tower-info.tw-status strong { color: var(--gold) }

/* ── 13 Chicken Road: Strasse bei Nacht ─────────────────────────────────────
   Die Spuren sind Fahrbahnen ueber die volle Hoehe, das Huhn steht in einer
   Spur-Huelle (Breite = eine Spur) und wandert per translateX(--ch-pos ·
   100 %). Autos fahren im Leerlauf 8–14 s laengs der Spur (nur transform). */
.ch-strasse { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; pointer-events: none }
.ch-laterne { position: absolute; top: -40px; z-index: 1; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,120,.28), transparent 65%); pointer-events: none; animation: ch-flackern 4s ease-in-out infinite }
.ch-laterne--links { left: -60px }
.ch-laterne--rechts { right: -60px; animation-delay: -2s }
@keyframes ch-flackern { 0%, 100% { opacity: .9 } 50% { opacity: .65 } }
.ch-raum { position: absolute; inset: 0; z-index: 2 }
.bh-innen .road {
  position: absolute; inset: 0;
  display: flex;
  gap: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none;
  flex-wrap: nowrap;
}
.ch-bordstein { flex: 1; min-width: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); border-right: 3px solid rgba(255,255,255,.18) }
.ch-bordstein--rechts { border-right: 0; border-left: 3px solid rgba(255,255,255,.18); background: linear-gradient(270deg, rgba(0,0,0,.35), rgba(0,0,0,.15)) }
.bh-innen .lane {
  position: relative;
  flex: 1; min-width: 0;
  width: auto; height: auto;
  display: block;
  border: 0;
  border-left: 2px dashed rgba(255,255,255,.14);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background .18s;
}
.bh-innen .lane:first-of-type { border-left: 0 }
.bh-innen .lane:hover:not(.crossed):not(.car-hit) { border-color: rgba(255,255,255,.14); background: rgba(245,170,60,.1); transform: none }
.bh-innen .lane.crossed { background: rgba(61,220,132,.09); cursor: default }
.bh-innen .lane.car-hit { background: rgba(255,92,92,.16); cursor: default }
/* Schilder ueber der Strasse: Quote je Spur. */
.bh-innen .lane .ch-schild {
  position: absolute; left: 50%; top: 44px;
  transform: translateX(-50%);
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,24,32,.9);
  font: 700 .64rem/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.8);
}
.bh-innen .lane.crossed .ch-schild { border-color: rgba(61,220,132,.6); color: var(--play-ink) }
.bh-innen .lane.car-hit .ch-schild { border-color: rgba(255,92,92,.6); color: #ff8a8a }
.ch-autos { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden }
.ch-auto { position: absolute; top: 0; width: calc(100% / (var(--ch-n) + 2)); height: 64px; display: grid; place-items: center; animation: ch-fahrt var(--ch-dauer, 10s) linear infinite; animation-delay: var(--ch-versatz, 0s) }
.ch-auto img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.7)) }
.ch-auto--rauf { animation-name: ch-fahrt-rauf }
.ch-auto--rauf img { transform: rotate(180deg) }
@keyframes ch-fahrt { from { transform: translateY(-110px) } to { transform: translateY(520px) } }
@keyframes ch-fahrt-rauf { from { transform: translateY(520px) } to { transform: translateY(-110px) } }
/* Treffer: das Auto rast 500 ms heran und bleibt in der Spur stehen. */
.ch-auto--treffer { top: auto; bottom: 30%; animation: ch-anrasen .5s cubic-bezier(.4,0,.8,1) both }
@keyframes ch-anrasen { from { transform: translateY(-380px) } to { transform: translateY(0) } }
.ch-huhn-spur {
  position: absolute; left: 0; bottom: 36%; z-index: 4;
  width: calc(100% / (var(--ch-n) + 2)); height: 64px;
  display: grid; place-items: center;
  transform: translateX(calc(var(--ch-pos, 0) * 100%));
  transition: transform .38s cubic-bezier(.3,.7,.3,1);
  pointer-events: none;
}
.ch-huhn { display: block; width: 56px; height: 56px }
.ch-huhn__bild { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)); transform-origin: 50% 100% }
.bh-innen[data-zustand="leerlauf"] .ch-huhn__bild { animation: ch-wippen 1.6s ease-in-out infinite }
@keyframes ch-wippen { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.04, .96) } }
/* Sprung-Bogen 380 ms mit Squash (Absprung) und Stretch (Flug). */
.ch-huhn--hopst .ch-huhn__bild { animation: ch-hops .38s cubic-bezier(.3,.7,.3,1) both }
@keyframes ch-hops {
  0%   { transform: scale(1.15, .8) translateY(0) }
  40%  { transform: scale(.88, 1.16) translateY(-28px) }
  75%  { transform: scale(1, 1) translateY(-8px) }
  100% { transform: scale(1.08, .92) translateY(0) }
}
/* Ueberfahren: das Huhn fliegt weg (Federn kommen aus dem Skript). */
.ch-huhn-spur.tot .ch-huhn__bild { animation: ch-flug .7s cubic-bezier(.2,.6,.6,1) both; filter: grayscale(.4) drop-shadow(0 8px 10px rgba(0,0,0,.7)) }
@keyframes ch-flug { 0% { transform: translate(0, 0) rotate(0) } 100% { transform: translate(46px, -150px) rotate(220deg); opacity: .15 } }
.bh-innen .ch-status { bottom: 10px }
.ch-knoepfe { display: flex; gap: 8px }
.ch-knoepfe .btn { flex: 1 }

/* ── 14 Roulette: Rad 300 px, Kugel, Ring, Filztisch ─────────────────────────
   Das Rad (roulette-rad.svg) und der Zahlenkranz drehen zusammen in
   #rl-rad-drehung; die Kugel laeuft in einer eigenen Bahn gegenlaeufig und
   endet oben am Zeiger, wo auch das Fach der Server-Zahl ankommt (Winkel
   je Zahl: rlWinkel im Skript). Auslauf cubic-bezier(.12,.8,.2,1). */
.rl-radraum { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 30px 12px 30px }
.bh-innen .rl-rad-feld { position: relative; width: 300px; height: 300px }
.rl-rad3 {
  position: absolute; inset: 0;
  border-radius: 50%;
  transform-origin: 50% 50%;
  background: radial-gradient(circle, #2a2a34 0 26%, #1a1a22 27% 100%);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.9), 0 0 0 2px rgba(245,196,106,.35);
}
.rl-rad3__bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; pointer-events: none }
/* v3.63: Das Voxel-Bild zeigt nur noch Holzrand (aussen, ab r 46 von 50) und
   Nabe (innen, bis r 26) — unter dem Zahlenkranz (r 26 bis 46) war es als
   Rauschen zu sehen. closest-side: 100 % = Radius, also 52 % = r 26, 92 % = r 46. */
.rl-rad3__bild {
  -webkit-mask: radial-gradient(circle closest-side, #000 0 51%, transparent 52% 92%, #000 93%);
          mask: radial-gradient(circle closest-side, #000 0 51%, transparent 52% 92%, #000 93%);
}
.bh-innen .rl-rad { position: absolute; inset: 0; width: 100%; height: 100%; filter: none }
/* Zahlenkranz: Ziffern radial gedreht (Skript), fein goldene Trenner und Ringe. */
.rl-rad__zahl { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; pointer-events: none }
.rl-rad__trenner { stroke: rgba(245,196,106,.8); stroke-width: .3; stroke-linecap: butt }
.rl-rad__ring { fill: none; stroke: rgba(245,196,106,.85); stroke-width: .4 }
.rl-kugelbahn { position: absolute; inset: 0; transform-origin: 50% 50%; pointer-events: none }
.rl-kugel {
  position: absolute; left: 50%; top: 7%;
  width: 13px; height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #cfd3dc 55%, #6f7787);
  box-shadow: 0 2px 5px rgba(0,0,0,.8);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.rl-kugel--drin { transform: translateY(22px) scale(.85) }
.rl-zeiger {
  position: absolute; left: 50%; top: -6px; z-index: 3;
  width: 0; height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid var(--gold);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.8));
}
/* Ergebnis-Chip in der Nabe: Zahl gross, Rand in der Farbe. */
.bh-innen .rl-zahl {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 96px; height: 96px;
  transform: translate(-50%, -50%);
  display: grid; align-content: center; justify-items: center; gap: 2px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 50% 40%, #1c1e28, #0d0f16);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.9);
  pointer-events: none;
}
.bh-innen .rl-zahl[data-farbe="rot"] { border-color: #e05a5a; box-shadow: 0 0 26px -4px rgba(224,90,90,.8) }
.bh-innen .rl-zahl[data-farbe="schwarz"] { border-color: #c9ccd6; box-shadow: 0 0 22px -6px rgba(255,255,255,.5) }
.bh-innen .rl-zahl[data-farbe="gruen"] { border-color: #3ec27a; box-shadow: 0 0 26px -4px rgba(62,194,122,.8) }
.bh-innen .rl-zahl--neu { animation: rl-zahl-pop .35s cubic-bezier(.2,1.4,.4,1) both }
@keyframes rl-zahl-pop { from { transform: translate(-50%, -50%) scale(.7); opacity: 0 } to { transform: translate(-50%, -50%) scale(1); opacity: 1 } }
.bh-innen .rl-zahl__wert { font: 800 2.2rem/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); text-shadow: 0 2px 10px rgba(0,0,0,.7) }
.bh-innen .rl-zahl__farbe { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
/* Countdown-Ring um das Rad — nur in der Setzphase, pathLength 100. */
.rl-ring { position: absolute; inset: -14px; z-index: 1; width: calc(100% + 28px); height: calc(100% + 28px); transform: rotate(-90deg); opacity: 0; transition: opacity .25s; pointer-events: none }
.bh-innen[data-zustand="setzen"] .rl-ring { opacity: 1 }
.rl-ring__grund { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 2.5 }
.rl-ring__lauf { fill: none; stroke: var(--play); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .1s linear }
.bh-innen[data-zustand="dreht"] .rl-ring__lauf { stroke: var(--gold) }
.bh-innen .rl-status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 5;
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* Verlauf der letzten zwoelf Zahlen oben in der Buehne. */
.bh-innen .rl-verlauf { flex-wrap: nowrap; min-width: 0 }
.bh-innen .rl-verlauf .rl-pille { flex-shrink: 0; min-width: 28px; padding: 4px 8px; border-radius: 999px; border: 1px solid transparent; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; cursor: pointer }
.bh-innen .rl-verlauf .rl-pille--rot { border-color: rgba(224,90,90,.5); background: rgba(224,90,90,.18); color: #ff8a8a }
.bh-innen .rl-verlauf .rl-pille--schwarz { border-color: rgba(255,255,255,.2); background: rgba(15,18,22,.85); color: var(--text-2) }
.bh-innen .rl-verlauf .rl-pille--gruen { border-color: rgba(62,194,122,.5); background: rgba(62,194,122,.15); color: var(--play-ink) }
.bh-innen .rl-verlauf .rl-leer { font: var(--t-klein); color: var(--muted) }
/* Tableau als Filz mit Bild, Chips als Bilder; Gewinnfelder gluehen,
   verlorene Chips rutschen weg (transform am inneren g). */
.rl-buehne .rl-tisch-feld {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(62,194,122,.25);
  background: radial-gradient(70% 90% at 50% 45%, #1f6b45, #185538 58%, #123f2a);
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
}
/* v3.89: halbdurchsichtiges Schwarz auf gruenem Filz ergab DUNKELGRUEN —
   direkt neben dem Feld „BLACK". Jetzt deckend. */
.rl-buehne .rl-grund--schwarz { fill: #12161d }
.rl-buehne .rl-grund--rot { fill: rgba(200,60,60,.75) }
/* v3.89: Rad, Tisch und Knopf passten nie zusammen auf einen Bildschirm:
   das Rad stand allein in einer breiten Buehne (rechts daneben ueber 700 px
   leer), der Tisch weit darunter. Ab 1100 px steht die Spielerliste neben dem
   Rad, der Tisch direkt darunter ueber die ganze Breite. */
@media (min-width: 1100px) {
  .rl-buehne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    grid-template-areas: "rad spieler" "tisch tisch" "leiste leiste" "ergebnis ergebnis";
    align-items: start;
  }
  .rl-buehne > .bh-buehne { grid-area: rad }
  .rl-buehne > .rl-tisch-feld { grid-area: tisch }
  .rl-buehne > .rl-leiste { grid-area: leiste }
  .rl-buehne > #rl-result { grid-area: ergebnis }
  .rl-buehne > .rl-spieler { grid-area: spieler; align-self: stretch }
  .rl-buehne > .rl-spieler .rl-spieler__liste { max-height: 330px }
  .bh-buehne[data-spiel="roulette"] .bh-innen { height: 400px }
  .bh-innen .rl-rad-feld { width: 340px; height: 340px }
}
.rl-buehne .rl-grund--gruen { fill: rgba(62,194,122,.55) }
.rl-buehne .rl-grund--aussen { fill: rgba(0,0,0,.28) }
.rl-buehne .rl-rahmen { stroke: rgba(255,255,255,.3) }
.rl-buehne .rl-treffer rect.rl-grund { fill: rgba(245,196,106,.45) }
.rl-buehne .rl-treffer .rl-rahmen { stroke: var(--gold); stroke-width: 3; animation: rl-gluehen .8s ease-in-out infinite alternate }
@keyframes rl-gluehen { from { opacity: .55 } to { opacity: 1 } }
.rl-jeton__koerper { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.4,0,.8,1), opacity .5s }
.rl-jeton__koerper--weg { transform: translate(6px, 70px) rotate(20deg); opacity: 0 }
.rl-jeton__bild { pointer-events: none }
.rl-jeton__text { paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 2px }

/* ── 15 Jackpot (Seite): Kessel, Anteils-Ring, Ziehung ──────────────────────
   Der Kessel (jackpot-topf.svg) steht in der Mitte des Rings; die Segmente
   je Spieler zeichnet das Skript in Spielerfarbe (--jp-farbe), der
   Countdown liegt als zweiter Ring aussen. Zur Ziehung dreht der Zeiger
   4 s mit Auslauf und bleibt beim Gewinner. */
/* v3.89: Die Spielerkarte war 320 px breit und nur 130 px hoch gefuellt,
   daneben stand die Buehne 450 px hoch — rechts klaffte ein Loch. Die Karte
   reicht jetzt so weit wie die Buehne und traegt ihre Liste darin. */
.jp-seite { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch }
.jp-seite > .card.jp-karte { align-self: stretch; display: flex; flex-direction: column }
.jp-seite > .card.jp-karte .jackpot-entries { flex: 1; overflow-y: auto }
.jp-links { display: grid; gap: 12px; min-width: 0 }
.jp-karte { min-width: 0 }
.jp-raum { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px 12px 96px }
.jp-rad { position: relative; width: 280px; height: 280px }
.jp-ring, .jp-uhr { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) }
/* v3.89: Ohne Mitspieler war der Ring ein grauer Donut ohne jedes Leben.
   Ein ruhiger goldener Schimmer zeigt: hier passiert gleich etwas. */
.jp-ring__grund { fill: none; stroke: rgba(245,196,106,.14); stroke-width: 9 }
/* Der Schimmer laeuft ueber opacity, nicht ueber stroke: eine Endlos-
   Animation auf einer Farbe malt jedes Bild neu (tools/animationen-pruefen.js). */
.bh-innen[data-zustand="leer"] .jp-ring__grund { animation: jp-warten 2.8s ease-in-out infinite }
@keyframes jp-warten { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
html.reduziert .bh-innen[data-zustand="leer"] .jp-ring__grund { animation: none }
@media (prefers-reduced-motion: reduce) { .bh-innen[data-zustand="leer"] .jp-ring__grund { animation: none } }
.jp-ring path, .jp-ring circle.jp-ring__voll { fill: none; stroke: var(--jp-farbe, var(--gold)); stroke-width: 9; transition: opacity .3s }
.jp-uhr__grund { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 2 }
.jp-uhr__lauf { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .9s linear }
.bh-innen:not([data-zustand="laeuft"]) .jp-uhr { opacity: 0 }
.jp-zeiger { position: absolute; inset: 0; z-index: 3; transform-origin: 50% 50%; pointer-events: none }
.jp-zeiger i {
  position: absolute; left: 50%; top: 3px;
  width: 0; height: 0;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 18px solid #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.8));
  opacity: 0;
  transition: opacity .3s;
}
.bh-innen:is([data-zustand="laeuft"], [data-zustand="zieht"]) .jp-zeiger i { opacity: 1 }
.jp-kessel { position: absolute; left: 50%; top: 50%; z-index: 2; width: 150px; height: 150px; transform: translate(-50%, -50%); filter: drop-shadow(0 16px 24px rgba(0,0,0,.7)) }
.jp-kessel img { width: 100%; height: 100%; display: block; object-fit: contain }
.bh-innen[data-zustand="leer"] .jp-kessel { animation: jp-schweben 3.4s ease-in-out infinite }
@keyframes jp-schweben { 0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) } 50% { transform: translate(-50%, calc(-50% - 10px)) rotate(2deg) } }
.bh-innen[data-zustand="zieht"] .jp-kessel { animation: jp-brodeln .5s ease-in-out infinite alternate }
@keyframes jp-brodeln { from { transform: translate(-50%, -50%) scale(1) } to { transform: translate(-50%, -50%) scale(1.05) } }
/* Muenzen fallen beim Einzahlen in den Kessel. */
.jp-muenzen { position: absolute; inset: 0; z-index: 4; pointer-events: none }
.jp-muenzen i {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2c2, #f5c46a 55%, #b8873a);
  box-shadow: 0 0 8px rgba(245,196,106,.7);
  animation: jp-fall .9s cubic-bezier(.4,0,.8,1) both;
  animation-delay: var(--dt, 0ms);
}
@keyframes jp-fall {
  0%   { transform: translate(var(--dx), -170px) scale(.7); opacity: 0 }
  20%  { opacity: 1 }
  85%  { transform: translate(calc(var(--dx) * .3), -10px) scale(1); opacity: 1 }
  100% { transform: translate(0, 4px) scale(.4); opacity: 0 }
}
.jp-topf { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5; display: grid; gap: 2px; justify-items: center; text-align: center; pointer-events: none; transition: opacity .3s }
/* Ohne Runde gibt es keinen Topf zu zeigen — nur der schwebende Kessel und der Hinweis. */
.bh-innen[data-zustand="leer"] .jp-topf { opacity: 0 }
.jp-topf .jackpot-amount { font-size: clamp(1.8rem, 4vw, 2.6rem) }
.jp-topf .jackpot-timer { margin: 0; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums }
.jp-leer { position: absolute; left: 50%; top: 50%; z-index: 6; display: grid; gap: 10px; justify-items: center; transform: translate(-50%, 70px); text-align: center; padding: 0 }
.jp-leer b { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2); text-shadow: 0 2px 8px rgba(0,0,0,.8) }
.jp-leer .btn { pointer-events: auto }
/* Legende: Punkt in Spielerfarbe, Avatar, Name, Betrag, Prozent. */
.jp-legende { gap: 4px }
.jp-legende__zeile {
  display: grid; grid-template-columns: 10px 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.jp-legende__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--jp-farbe, var(--gold)); box-shadow: 0 0 8px var(--jp-farbe, var(--gold)) }
.jp-legende__zeile .race-av { width: 26px; height: 26px; border-radius: 50% }
.jp-legende__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-zeile) }
.jp-legende__betrag { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap }
.jp-legende__anteil { min-width: 44px; text-align: right; font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--jp-farbe, var(--gold)) }
.jp-legende__leer { padding: 14px; text-align: center; font: var(--t-klein); color: var(--muted) }
/* Gewinner-Aufloesung: Avatar gross mit Krone, Betrag zaehlt im Topf hoch. */
.jp-gewinner .bh-karte { min-width: 260px }
.jp-gewinner__av { position: relative; width: 72px; height: 72px; margin: 0 auto 10px }
/* v4.14: Schnellwahl im Jackpot — vier je Reihe wie bei den anderen Spielen. */
.jp-schnell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 10px }
.jp-schnell:empty { display: none }
.jp-schnell .quick-bet { min-height: 34px; width: 100% }
.jp-gewinner__bild { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 3px var(--ink-900), 0 0 0 5px var(--gold), 0 0 30px rgba(245,196,106,.6) }
.jp-gewinner__bild--txt { display: grid; place-items: center; background: var(--ink-650); font: 800 1.6rem var(--font-disp); color: var(--text) }
.jp-krone { position: absolute; left: 50%; top: -22px; width: 30px; height: 30px; transform: translateX(-50%) rotate(-8deg); color: var(--gold); filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); animation: jp-krone .6s cubic-bezier(.2,1.4,.4,1) .2s both }
@keyframes jp-krone { from { transform: translateX(-50%) translateY(-20px) rotate(-30deg); opacity: 0 } to { transform: translateX(-50%) rotate(-8deg); opacity: 1 } }
.jp-historie { overflow-x: auto }
.jp-historie .tbl td, .jp-historie .tbl th { white-space: nowrap }
.jp-historie .tbl td:nth-child(3) { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700 }

/* ── 16 Duels (Seite): Karten, Muenzwahl, 3D-Aufloesung ──────────────────────
   Offene Flips als Karten (Avatar gegen „?"), die eigene Muenzwahl mit
   den Muenzbildern aus Coin Flip, die Aufloesung als 3D-Muenze (1,6 s, wie
   Coin Flip) in einem Overlay ueber der Liste. */
.du-seite { flex-direction: column; gap: 6px; padding: 10px 8px }
.du-seite__bild { width: 60px; height: 60px; display: block; border-radius: 50%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); transition: transform .18s var(--ease-out), box-shadow .2s }
.du-seite.aktiv .du-seite__bild { transform: scale(1.08); box-shadow: 0 0 0 3px var(--ink-850), 0 0 0 5px var(--play), 0 8px 18px -6px rgba(0,0,0,.7) }
.du-muenze--bild { width: 28px; height: 28px; display: block; background: none; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)) }
.du-flips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.du-flip {
  display: grid; gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  transition: border-color .18s, transform .18s var(--ease-out);
}
.du-flip:hover { border-color: rgba(155,125,255,.45); transform: translateY(-2px) }
.du-flip--eigen { border-style: dashed }
.du-flip__vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px }
.du-flip__wer { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center }
.du-flip__wer b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-zeile) }
.du-flip__wer small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.du-flip__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; image-rendering: pixelated }
.du-flip__av--txt { display: grid; place-items: center; background: var(--ink-650); font: 800 .9rem var(--font-disp); color: var(--text) }
.du-flip__frage { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.25); font: var(--t-karte); color: var(--muted) }
.du-flip__muenze { width: 36px; height: 36px; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)) }
.du-flip__fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.du-flip__fuss .du-betrag { color: var(--gold) }
.du-leer--bild { display: grid; justify-items: center; gap: 8px }
.du-leer--bild img { width: 64px; height: 64px; opacity: .8; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)) }
/* Overlay ueber der Liste: Muenze 160 px als 3D-Karte, danach die Spieler. */
.du-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(10,14,20,.7);
  animation: bh-einblenden .25s var(--ease-out) both;
}
.du-overlay[hidden] { display: none }
.du-overlay__karte { --bh-k-rgb: 245,196,106; min-width: 280px; max-width: 92vw }
.du-overlay__karte--weg { --bh-k-rgb: 170,176,190 }
.du-wurf3d { display: grid; place-items: center; height: 180px; perspective: 900px }
.du-muenze3d { position: relative; width: 160px; height: 160px; transform-style: preserve-3d; transition: transform 1.6s cubic-bezier(.2,.8,.2,1) }
.du-flaeche { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) }
.du-flaeche img { width: 100%; height: 100%; display: block; object-fit: contain }
.du-flaeche--zahl { transform: rotateY(180deg) }
.du-overlay__spieler { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 12px }
.du-overlay__wer { display: grid; justify-items: center; gap: 4px; min-width: 0 }
.du-overlay__wer b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-zeile); color: var(--text-2) }
.du-overlay__wer .du-flip__av { width: 48px; height: 48px; transition: box-shadow .4s, transform .4s }
.du-overlay--fertig .du-sieger .du-flip__av { box-shadow: 0 0 0 3px var(--ink-900), 0 0 0 5px var(--gold), 0 0 28px rgba(245,196,106,.8); transform: scale(1.1) }
.du-overlay--fertig .du-sieger b { color: var(--gold) }
.du-overlay__betrag { min-height: 1.2em }
.du-overlay__zu { margin-top: 12px }

/* ── Turbo (Auto-Modus, Mines) ────────────────────────────────────────────── */
body.auto-turbo .mn-deckel { transition-duration: .12s }
body.auto-turbo .mn-inhalt { transition-delay: .06s }

/* ── 17 Handy und schmale Fenster ─────────────────────────────────────────── */
@media (max-width: 600px) {
  /* v3.89: 40 px lagen unter der Tippgrenze von 44 px — daneben tippen war
     haeufiger als treffen. Die Buehne waechst entsprechend mit. */
  .bh-innen .mines-board[data-n="3"] { --mn-k: 86px }
  .bh-innen .mines-board[data-n="4"] { --mn-k: 66px }
  .bh-innen .mines-board[data-n="5"] { --mn-k: 52px }
  .bh-buehne[data-spiel="mines"] .bh-innen { height: 380px }
  /* v3.91: 420 px liessen ueber dem Brett ein grosses Loch — auf dem Handy
     begrenzt die BREITE den Stiftabstand, nicht die Hoehe. */
  .bh-buehne[data-spiel="plinko"] .bh-innen { height: 340px }
  .mn-raum { padding: 40px 8px 28px }
  .bh-chip { top: 8px; padding: 6px 12px; font: var(--t-zahl); font-variant-numeric: tabular-nums }
  /* Tower: sechs Reihen sichtbar (6 × 44 = 264 von 300 px). */
  .tw-turm { --tw-h: 44px; gap: 4px }
  .bh-innen .tower-grid { gap: 4px }
  .bh-innen .tower-cell { width: 76px; height: 40px }
  .bh-innen .tower-nr { width: 48px }
  .tw-schatz { width: 56px; height: 56px }
  .ch-huhn { width: 40px; height: 40px }
  .ch-huhn-spur, .ch-auto { height: 48px }
  .ch-auto img { width: 38px; height: 38px }
  .bh-innen .lane .ch-schild { top: 40px; padding: 3px 5px; font-size: .56rem }
  .bh-innen .rl-rad-feld { width: 220px; height: 220px }
  .bh-innen .rl-zahl { width: 74px; height: 74px }
  .bh-innen .rl-zahl__wert { font-size: 1.6rem }
  .rl-radraum { padding: 34px 8px 26px }
  .jp-seite { grid-template-columns: minmax(0, 1fr) }
  .jp-rad { width: 200px; height: 200px }
  .jp-kessel { width: 104px; height: 104px }
  .jp-raum { padding-bottom: 80px }
  .du-muenze3d { width: 120px; height: 120px }
  .du-wurf3d { height: 140px }
}
@media (max-width: 900px) and (min-width: 601px) {
  .jp-seite { grid-template-columns: minmax(0, 1fr) }
}

/* ── 18 Reduzierte Bewegung: harte Wechsel, keine Schleifen ─────────────────── */
html.reduziert .ch-auto,
html.reduziert .ch-laterne,
html.reduziert .tw-schatz,
html.reduziert .bh-innen[data-zustand] .ch-huhn__bild,
html.reduziert .bh-innen[data-zustand] .jp-kessel,
html.reduziert .bh-innen[data-zustand="kassiert"] .mine-cell.gem .mn-inhalt img,
html.reduziert .rl-buehne .rl-treffer .rl-rahmen { animation: none }
html.reduziert .mn-deckel, html.reduziert .mn-inhalt, html.reduziert .tw-turm, html.reduziert .ch-huhn-spur, html.reduziert .rl-jeton__koerper, html.reduziert .du-muenze3d, html.reduziert .jp-zeiger { transition: none }
@media (prefers-reduced-motion: reduce) {
  .bh-chip--pulst, .bh-innen[data-zustand] .bh-rotblitz, .bh-innen[data-zustand] .mn-raum, .bh-innen[data-zustand] .tw-raum, .bh-innen[data-zustand] .ch-raum,
  .bh-innen .mine-cell.gem .mn-inhalt img, .bh-innen .mine-cell.mine-hit .mn-inhalt img, .bh-innen[data-zustand="kassiert"] .mine-cell.gem .mn-inhalt img,
  .tw-lava, .tw-schatz, .bh-innen[data-zustand="kassiert"] .tw-schatz,
  .ch-laterne, .ch-auto, .ch-auto--treffer, .bh-innen[data-zustand] .ch-huhn__bild, .ch-huhn--hopst .ch-huhn__bild, .ch-huhn-spur.tot .ch-huhn__bild,
  .bh-innen .rl-zahl--neu, .rl-buehne .rl-treffer .rl-rahmen,
  .bh-innen[data-zustand] .jp-kessel, .jp-muenzen i, .jp-krone,
  .du-overlay { animation: none }
  .mn-deckel, .mn-inhalt, .bh-innen .mine-cell, .tw-turm, .bh-innen .tower-cell, .ch-huhn-spur, .rl-kugel, .rl-ring__lauf, .rl-jeton__koerper, .jp-uhr__lauf, .jp-zeiger, .du-muenze3d, .du-flip, .du-overlay__wer .du-flip__av { transition: none }
  .ch-auto:not(.ch-auto--treffer) { display: none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JACKPOT 2 (v3.62) — lange Ziehung
   ───────────────────────────────────────────────────────────────────────────
   Das Rad waechst auf 300 px (Handy 240) mit duennem Aussenrand, der in der
   Farbe des gerade ueberstrichenen Segments glueht (--jp-glut, setzt das
   Skript). Waehrend der Ziehung (.bh-innen.jp-ziehung) weicht der Kessel
   der dunklen Mitte (.jp-mitte): Topf in Gold, ueberstrichener Spieler,
   am Ende der Gewinner mit Krone. Phasen am Rad: --vorlauf (Puls),
   --herz (Herzschlag 1 → 1.02 im Takt der Ziehung), --ende (Verlierer
   dimmen). Alles nur transform/opacity, damit es auch auf dem Handy
   fluessig bleibt; das Nachfedern des Zeigers rechnet das Skript.
   ═══════════════════════════════════════════════════════════════════════════ */
/* v3.89: 300 px Ring in einer 450 px hohen Buehne — ringsum tote Flaeche. */
.jp-rad { --jp-glut: transparent; width: 360px; height: 360px }
.jp-rad::before {
  content: '';
  position: absolute; inset: -7px; z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 30px var(--jp-glut, transparent), inset 0 0 22px rgba(0,0,0,.45);
  pointer-events: none;
  transition: box-shadow .25s;
}
.jp-zeiger i {
  margin-left: -7px;
  border-left-width: 7px;
  border-right-width: 7px;
  border-top-width: 22px;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.85));
}
/* Waehrend der Ziehung: Kessel, unterer Topf und Countdown-Ring weichen der Mitte. */
.jp-kessel { transition: opacity .35s, transform .35s }
.bh-innen.jp-ziehung .jp-kessel { opacity: 0; transform: translate(-50%, -50%) scale(.6); animation: none }
.bh-innen.jp-ziehung .jp-topf, .bh-innen.jp-ziehung .jp-uhr { opacity: 0 }
.jp-mitte {
  --jp-farbe: var(--gold);
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 212px; height: 212px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 14px;
  text-align: center;
  background: radial-gradient(circle at 50% 38%, #1b2231, #0a0e15 72%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 0 0 5px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.6);
  transition: opacity .3s;
}
.jp-mitte--zieht, .jp-mitte--sieg { display: flex; animation: jp-mitte-auf .3s var(--ease-out) both }
.jp-mitte--weg { opacity: 0 }
@keyframes jp-mitte-auf { from { opacity: 0; transform: translate(-50%, -50%) scale(.9) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } }
.jp-mitte__etikett { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.jp-mitte__topf {
  font: 800 clamp(1.5rem, 4vw, 2rem)/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(245,196,106,.45);
}
.jp-mitte__spieler { display: grid; justify-items: center; gap: 4px; min-height: 30px }
.jp-mitte__zeile { display: flex; align-items: center; gap: 8px; max-width: 176px }
.jp-mitte__zeile .race-av { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--jp-farbe) }
.jp-mitte__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-karte); color: var(--jp-farbe) }
.jp-mitte__chance { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2) }
/* Gewinner: Etikett und Avatar oben, Topf zaehlt darunter, Chance zuletzt. */
.jp-mitte--sieg .jp-mitte__etikett { order: -2; color: var(--gold) }
.jp-mitte--sieg .jp-mitte__spieler { order: -1; gap: 2px }
.jp-mitte--sieg .jp-mitte__name { color: var(--text); font-size: 1rem }
.jp-mitte--sieg .jp-mitte__topf { font-size: clamp(1.3rem, 3.4vw, 1.7rem) }
.jp-mitte--sieg .jp-gewinner__av { width: 60px; height: 60px; margin: 8px auto 2px }
.jp-mitte--sieg .jp-gewinner__bild { width: 60px; height: 60px }
.jp-mitte--sieg .jp-krone { top: -20px; width: 26px; height: 26px }
/* Ring: ueberstrichenes Segment leuchtet staerker, Blitz im Gewinner-Segment, Verlierer dimmen. */
.jp-ring path, .jp-ring circle.jp-ring__voll { transition: opacity .3s, stroke-width .12s }
.jp-ring .jp-ring__aktiv { stroke-width: 12; filter: drop-shadow(0 0 4px var(--jp-farbe, var(--gold))) }
.jp-ring .jp-ring__blitz { animation: jp-blitz .45s ease-out 2 }
@keyframes jp-blitz { from { opacity: .15 } 40% { opacity: 1 } to { opacity: 1 } }
.jp-rad--ende .jp-ring path:not(.jp-ring__aktiv), .jp-rad--ende .jp-ring circle.jp-ring__voll:not(.jp-ring__aktiv) { opacity: .22 }
/* Vorlauf: der Ring pulsiert zweimal; Auslauf: Herzschlag 1 → 1.02 (600 ms Takt wie der Klang). */
.jp-rad--vorlauf .jp-ring { animation: jp-puls .4s ease-in-out 2 alternate }
@keyframes jp-puls { from { transform: rotate(-90deg) scale(1) } to { transform: rotate(-90deg) scale(1.03) } }
.jp-rad--herz .jp-ring { animation: jp-herz .6s ease-in-out infinite }
@keyframes jp-herz {
  0%, 100% { transform: rotate(-90deg) scale(1) }
  28%      { transform: rotate(-90deg) scale(1.02) }
  42%      { transform: rotate(-90deg) scale(1.004) }
  56%      { transform: rotate(-90deg) scale(1.02) }
}
/* Konfetti: 40 Plaettchen aus der Mitte, Segment- und Goldfarben, nur transform/opacity. */
.jp-konfetti { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden }
.jp-konfetti i {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 11px;
  margin: -5px 0 0 -3px;
  border-radius: 2px;
  background: var(--farbe, var(--gold));
  opacity: 0;
  animation: jp-konfetti 1.7s cubic-bezier(.2,.6,.3,1) both;
  animation-delay: var(--dt, 0ms);
}
@keyframes jp-konfetti {
  0%   { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0 }
  10%  { opacity: 1 }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0 }
}
/* Handy: Rad 240 px, Mitte 168 px, Legende bleibt darunter (jp-seite einspaltig, s. o.). */
@media (max-width: 600px) {
  .jp-rad { width: 240px; height: 240px }
  .jp-mitte { width: 168px; height: 168px; padding: 10px }
  .jp-mitte__topf { font-size: 1.3rem }
  .jp-mitte--sieg .jp-mitte__topf { font-size: 1.15rem }
  .jp-mitte__zeile { max-width: 140px }
  .jp-mitte__name { font: var(--t-karte) }
  .jp-mitte--sieg .jp-gewinner__av, .jp-mitte--sieg .jp-gewinner__bild { width: 48px; height: 48px }
  .jp-raum { padding-bottom: 84px }
}
/* Reduzierte Bewegung: kein Puls, kein Herzschlag, kein Blitz, kein Konfetti — das Skript dreht 1,5 s und zeigt direkt das Ergebnis. */
html.reduziert .jp-rad--vorlauf .jp-ring, html.reduziert .jp-rad--herz .jp-ring, html.reduziert .jp-ring__blitz, html.reduziert .jp-konfetti i, html.reduziert .jp-mitte--zieht, html.reduziert .jp-mitte--sieg { animation: none }
html.reduziert .jp-kessel, html.reduziert .jp-mitte, html.reduziert .jp-rad::before { transition: none }
@media (prefers-reduced-motion: reduce) {
  .jp-rad--vorlauf .jp-ring, .jp-rad--herz .jp-ring, .jp-ring__blitz, .jp-konfetti i, .jp-mitte--zieht, .jp-mitte--sieg { animation: none }
  .jp-kessel, .jp-mitte, .jp-rad::before { transition: none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JACKPOT 3 (v3.63) — Runden laufen von selbst
   ───────────────────────────────────────────────────────────────────────────
   Zwei neue Buehnen-Zustaende: „wartet" (Runde offen, noch kein zweiter
   Spieler) und „pause" (15 s nach der Auslosung). In beiden steht die
   Statusbox (#jp-status) in der Mitte des Rings — fuer Neulinge die
   wichtigste Zeile: was fehlt und wann es losgeht. Der Kessel tritt
   dahinter zurueck. Dazu die „How it works"-Zeile unter der Buehne und
   die Einsatzkarte mit ½ / 2× / Max, gruenem „Join game" und der eigenen
   Chance. Die Auslosung (.jp-ziehung) blendet die Statusbox aus, damit an
   der 9-s-Drehung nichts dazwischenliegt.
   ═══════════════════════════════════════════════════════════════════════════ */
.jp-status {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 200px;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  text-align: center;
  background: rgba(10,14,21,.86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.55);
  pointer-events: none;
}
.jp-status--an { display: flex; animation: jp-status-auf .3s var(--ease-out) both }
@keyframes jp-status-auf { from { opacity: 0; transform: translate(-50%, -50%) scale(.94) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } }
.jp-status__etikett { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.jp-status__zahl {
  font: var(--t-zahl);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.jp-status__satz { font: var(--t-klein); color: var(--text-2) }
/* Warten und Pause: Kessel tritt zurueck, die Statusbox liest sich darauf. */
.bh-innen:is([data-zustand="wartet"], [data-zustand="pause"]) .jp-kessel { opacity: .22 }
.bh-innen[data-zustand="pause"] .jp-topf { opacity: 0 }
.bh-innen.jp-ziehung .jp-status { display: none }
/* How it works: drei nummerierte Punkte in einer Zeile, auf dem Handy untereinander. */
.jp-so { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 2px 4px; font: var(--t-text); color: var(--text-2) }
.jp-so__titel { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.jp-so__punkt { display: inline-flex; align-items: center; gap: 6px }
.jp-so__punkt b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font: var(--t-zahl-klein);
  font-variant-numeric: tabular-nums;
  color: #04220f;
  background: var(--gold);
}
/* Einsatzkarte: Kopf mit Min | Max, gruener Knopf ueber die ganze Breite, Chance darunter. */
.jp-einsatz { display: grid; gap: 10px }
.jp-einsatz__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.jp-grenzen { font-variant-numeric: tabular-nums; color: var(--muted) }
.jp-beitreten { min-height: 44px }
.jp-chance { font: var(--t-klein); font-variant-numeric: tabular-nums; color: var(--text-2); text-align: center }
@media (max-width: 600px) {
  .jp-status { width: 164px; padding: 10px 12px }
  .jp-status__zahl { font: var(--t-zahl); font-variant-numeric: tabular-nums }
  .jp-so { flex-direction: column; align-items: flex-start; gap: 6px }
}
html.reduziert .jp-status--an { animation: none }
@media (prefers-reduced-motion: reduce) {
  .jp-status--an { animation: none }
}

/* ═══ LEISTUNG (v3.64) ═══════════════════════════════════════════════════════
   Schwebende Buehnen-Bilder ohne CSS-drop-shadow: der Filter wurde in jedem
   Animationsbild neu gerechnet; der Schatten steckt schon im Voxel-SVG. */
.bh-innen .wf-huelle, .bh-innen .lb-rakete, .tw-schatz { filter: none }

/* ═══ ROULETTE-JETONS (v3.67) ════════════════════════════════════════════════
   Eigene Ebene ueber dem Tisch (siehe rlTischSvg): der Tisch wird einmal
   gezeichnet, nur die Jeton-Ebene aendert sich. Chips sind Vektor-Kreise mit
   gestricheltem Rand wie echte Casino-Chips — keine eingebetteten Bilder. */
.rl-tisch-huelle { position: relative; width: 100%; min-width: 620px }
.rl-tisch-huelle .rl-tisch { min-width: 0 }
.rl-jeton-ebene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; transform: translateZ(0); contain: layout style }
.rl-jeton-ebene .rl-jeton__kreis { fill: url(#rl-chip-eigen); stroke: rgba(255,255,255,.9); stroke-width: 1.4 }
.rl-jeton-ebene .rl-jeton--offen .rl-jeton__kreis { fill: url(#rl-chip-offen); stroke-dasharray: none }
.rl-jeton-ebene .rl-jeton--andere .rl-jeton__kreis { fill: url(#rl-chip-andere); stroke: rgba(255,255,255,.8); stroke-width: 1.2 }
.rl-jeton__ring { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.2; stroke-dasharray: 3.2 2.6 }
.rl-jeton--andere .rl-jeton__ring { stroke-width: 1.6; stroke-dasharray: 2.2 1.9 }
.rl-jeton-ebene .rl-jeton__text { paint-order: stroke; stroke: rgba(20,12,60,.55); stroke-width: 2.4px }
/* Statuszeile unter dem Tisch brach in vier Zeilen um ("Place / your / bets · / 3s"): der Text bekommt eine feste Mindestbreite und bleibt einzeilig. */
.rl-leiste__phase { flex: 0 0 auto; min-width: 170px; white-space: nowrap }

/* ═══════════════════════════════════════════════════════════════════════════
   CHICKEN ROAD 2 (v3.68) — volle Strassenszene statt leerem Nachthimmel
   ───────────────────────────────────────────────────────────────────────────
   Kian: „Chicken Road wirkt leer". Vorher lag ein duenner waagrechter
   Strassenstreifen (strasse.webp) mitten im Bild, die Autos fuhren senkrecht
   durch den Himmel. Jetzt wie beim Vorbild von InOut: jede Spur ist eine
   senkrechte Fahrbahn, das Huhn laeuft nach rechts — genau das, was Skript
   und Spielregel (Spur fuer Spur, --ch-pos) schon taten. Die Fahrbahn nimmt
   60 % der Hoehe ein (--ch-oben 30 % bis --ch-unten 10 %), darueber Himmel,
   Skyline (stadt.webp) und Nebel, darunter Bordstein und Gras.
   · Asphalt, Leitlinien, Risse und Gully sind Verlaeufe auf .lane::before/
     ::after — keine Bilder, kein Knoten je Riss.
   · Autos: Draufsicht-Bilder (tools/voxel.js, Block v3.68), je Spur eins bis
     zwei, Dauer und Versatz zufaellig aus dem Skript — bewegt wird nur
     transform, die Scheinwerfer haengen als fester Verlauf am Auto.
   · Handy: die Welt ist breiter als die Buehne (--ch-sicht Spalten sichtbar),
     .ch-kamera faehrt per translateX mit dem Huhn mit. Die Kamera ist eine
     eigene Huelle, weil .ch-raum beim Treffer selbst wackelt (bh-wackeln
     setzt transform — auf demselben Element saesse die Kamera kurz auf 0).
   Alle Endlos-Animationen hier bewegen nur transform oder opacity.
   ═══════════════════════════════════════════════════════════════════════════ */
.bh-buehne[data-spiel="chicken"] .bh-innen {
  --ch-oben: 30%;
  --ch-unten: 10%;
  --ch-mitte: 60%;
  --ch-sicht: calc(var(--ch-n) + 2);
  background: linear-gradient(180deg, #04060f 0%, #0a1024 22%, #121a33 30%, #1b2130 31%, #1b2130 100%);
}
/* Der Gitterboden der anderen Buehnen gehoert nicht auf Asphalt. */
.bh-buehne[data-spiel="chicken"] .bh-innen::before { display: none }
/* strasse.webp bleibt als Sternenhimmel: nur ihr oberes Drittel ist zu sehen. */
.bh-buehne[data-spiel="chicken"] .ch-strasse { inset: 0 0 auto 0; height: 34%; object-position: 50% 0; opacity: .85 }

/* Skyline in der Ferne: die Footer-Stadt, halb durchsichtig, leicht mitlaufend
   (Parallaxe: 5 px je Spur, das Huhn bewegt die Welt, die Stadt kaum). */
.ch-skyline {
  position: absolute; left: -6%; right: -6%; top: 5%; z-index: 0;
  height: calc(var(--ch-oben) - 3%);
  background: url('/img/motive/stadt.svg') 50% 100% / auto 100% repeat-x;
  background-image: image-set(url('/img/motive/stadt.webp') type('image/webp'), url('/img/motive/stadt.svg') type('image/svg+xml'));
  opacity: .42;
  -webkit-mask: linear-gradient(180deg, transparent, #000 35%);
          mask: linear-gradient(180deg, transparent, #000 35%);
  transform: translateX(calc(var(--ch-pos, 0) * -5px));
  transition: transform .6s var(--ease-out);
  pointer-events: none;
}
/* Nebel am Horizont: zwei weiche Schwaden, driften 40 s hin und her. */
.ch-nebel {
  position: absolute; left: -50%; z-index: 1;
  width: 200%;
  top: calc(var(--ch-oben) - 16%); height: 24%;
  background:
    radial-gradient(22% 50% at 28% 55%, rgba(160,180,225,.2), transparent 70%),
    radial-gradient(20% 45% at 62% 50%, rgba(160,180,225,.16), transparent 70%),
    radial-gradient(18% 40% at 88% 60%, rgba(160,180,225,.14), transparent 70%);
  animation: ch-nebel 40s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ch-nebel { from { transform: translateX(-4%) } to { transform: translateX(4%) } }

/* Kamera: auf dem Desktop so breit wie die Buehne (--ch-sicht = alle
   Spalten), auf dem Handy breiter; clamp haelt Start- und Zielufer im Bild. */
.ch-kamera {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
  width: calc(100% * (var(--ch-n) + 2) / var(--ch-sicht));
  transform: translateX(calc(clamp(0, var(--ch-pos, 0) - 1, var(--ch-n) + 2 - var(--ch-sicht)) * -100% / (var(--ch-n) + 2)));
  transition: transform .38s cubic-bezier(.3,.7,.3,1);
}

/* Bordstein oben (Masten der Schilder und Laternen stehen darauf) und
   Gras unten ueber die ganze Breite. */
.ch-kante {
  position: absolute; left: 0; right: 0; z-index: 0;
  top: calc(var(--ch-oben) - 10px); height: 10px;
  background: linear-gradient(180deg, #5a616e, #8d95a3 30%, #6b7280 70%, #2a2f3a);
  pointer-events: none;
}
.ch-gras {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: var(--ch-unten);
  background:
    linear-gradient(180deg, #8d95a3 0 4px, #5a616e 4px 7px, rgba(0,0,0,.35) 7px 9px, transparent 9px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #2f7a3a, #1f5a2a);
  pointer-events: none;
}

/* Die Strasse aus index.html zentriert ihre Kaestchen (align-items: center)
   — dann waeren die Spuren nur so hoch wie ihr Schild. Hier volle Hoehe. */
.bh-buehne[data-spiel="chicken"] .road { align-items: stretch }
/* Spuren: der Klickbereich bleibt die volle Spalte; gemalt wird nur das
   Fahrbahnstueck. Die alte Tafel-Animation (cell-flip aus index.html) und
   das Druck-Schrumpfen wuerden sonst die ganze Spalte kippen. */
.bh-buehne[data-spiel="chicken"] .lane,
.bh-buehne[data-spiel="chicken"] .lane:hover:not(.crossed):not(.car-hit),
.bh-buehne[data-spiel="chicken"] .lane.crossed,
.bh-buehne[data-spiel="chicken"] .lane.car-hit,
.bh-buehne[data-spiel="chicken"] .lane:active:not(.crossed):not(.car-hit) { border-left: 0; background: none; animation: none; transform: none }
.bh-buehne[data-spiel="chicken"] .lane::before {
  content: "";
  position: absolute; left: 0; right: 0; z-index: 0;
  top: var(--ch-oben); bottom: var(--ch-unten);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 35%, transparent 70%, rgba(0,0,0,.16)),
    #2a2f3a;
  transition: box-shadow .18s;
  pointer-events: none;
}
/* Leitlinie zwischen zwei Spuren: weiss gestrichelt, links an der Spur. */
.bh-buehne[data-spiel="chicken"] .lane + .lane::before {
  background:
    repeating-linear-gradient(180deg, rgba(235,238,245,.6) 0 20px, transparent 20px 44px) 0 6px / 3px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 35%, transparent 70%, rgba(0,0,0,.16)),
    #2a2f3a;
}
/* Risse (kleine Pfad-Grafik) und ein Gully am Rand — je Spur an anderer
   Stelle, damit die Strasse nicht gekachelt aussieht. */
.bh-buehne[data-spiel="chicken"] .lane::after {
  content: "";
  position: absolute; left: 0; right: 0; z-index: 0;
  top: var(--ch-oben); bottom: var(--ch-unten);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M2 4l7 6 5-2 8 9 6-1 9 12M14 8l3-6M22 17l-4 7' fill='none' stroke='%23161a22' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 70% 22% / 34px 26px no-repeat,
    repeating-linear-gradient(90deg, #141820 0 2px, #474e5b 2px 4px) 90% calc(100% - 6px) / 16px 7px no-repeat;
  opacity: .9;
  pointer-events: none;
}
.bh-buehne[data-spiel="chicken"] .lane:nth-child(3n)::after { background-position: 18% 78%, 12% calc(100% - 6px) }
.bh-buehne[data-spiel="chicken"] .lane:nth-child(3n+1)::after { background-position: 55% 88%, 88% calc(100% - 6px); background-size: 26px 20px, 16px 7px }
.bh-buehne[data-spiel="chicken"] .lane:hover:not(.crossed):not(.car-hit)::before { box-shadow: inset 0 0 0 999px rgba(245,170,60,.07) }

/* Kanaldeckel in der Spurmitte — hier landet das Huhn. */
.ch-deckel {
  position: absolute; left: 50%; top: var(--ch-mitte); z-index: 1;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,0,0,.32) 5px 7px),
    radial-gradient(circle at 38% 32%, #7b8392, #474e5b 55%, #2c313b);
  box-shadow: 0 0 0 3px #1a1e26, 0 0 0 4px rgba(255,255,255,.07), inset 0 2px 3px rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.45);
  pointer-events: none;
}
/* Glanz auf dem geschafften Deckel: goldener Schimmer, fertig gemalt. */
.ch-deckel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.75), rgba(255,236,170,.35) 30%, transparent 62%), radial-gradient(circle, rgba(245,196,106,.55), rgba(245,196,106,.15) 70%);
  opacity: 0;
  transition: opacity .3s;
}
/* Ring um den naechsten Deckel: pulst ueber opacity (nur ein Element). */
.ch-deckel::after {
  content: "";
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(245,196,106,.9);
  box-shadow: 0 0 16px rgba(245,196,106,.55);
  opacity: 0;
}
.bh-buehne[data-spiel="chicken"] .lane.ch-naechste .ch-deckel::after { animation: ch-ring 1.2s ease-in-out infinite }
@keyframes ch-ring { 0%, 100% { opacity: .25 } 50% { opacity: .95 } }
.bh-buehne[data-spiel="chicken"] .lane.crossed .ch-deckel { box-shadow: 0 0 0 3px #1a1e26, 0 0 0 5px rgba(61,220,132,.55), 0 0 22px rgba(245,196,106,.45), inset 0 2px 3px rgba(255,255,255,.2) }
.bh-buehne[data-spiel="chicken"] .lane.crossed .ch-deckel::before { opacity: 1 }
.bh-buehne[data-spiel="chicken"] .lane.car-hit .ch-deckel { box-shadow: 0 0 0 3px #1a1e26, 0 0 0 5px rgba(255,92,92,.7), 0 0 22px rgba(255,92,92,.45) }

/* Quoten-Schild ueber der Spur: Strassenschild mit weissem Rand am Mast.
   Blau = offen, Gold = die naechste Spur, Gruen mit Haken = geschafft,
   Rot = Treffer. */
.bh-buehne[data-spiel="chicken"] .lane .ch-schild {
  top: calc(var(--ch-oben) - 50px); z-index: 3;
  min-width: 56px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 2px solid #f1f4fa;
  background: linear-gradient(180deg, #232c3c, #151b26);
  box-shadow: 0 0 0 2px #0c1018, 0 8px 14px -6px rgba(0,0,0,.9);
  font: 800 .8rem/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--gold);
  text-align: center;
  transition: transform .2s var(--ease-out), background .2s;
}
/* Mast bis auf den Bordstein. */
.bh-buehne[data-spiel="chicken"] .lane .ch-schild::after {
  content: "";
  position: absolute; left: 50%; top: calc(100% + 2px);
  width: 4px; height: 12px;
  margin-left: -2px;
  background: linear-gradient(90deg, #9aa2b1, #4b5260);
}
.bh-buehne[data-spiel="chicken"] .lane.ch-naechste .ch-schild {
  transform: translateX(-50%) scale(1.1);
  border-color: #fff7dd;
  background: linear-gradient(180deg, #ffd978, #f0a93a);
  box-shadow: 0 0 0 2px #7a4a0c, 0 0 18px rgba(245,196,106,.6), 0 8px 14px -6px rgba(0,0,0,.9);
  color: #2a1600;
}
.bh-buehne[data-spiel="chicken"] .lane.crossed .ch-schild {
  border-color: #e9fff2;
  background: linear-gradient(180deg, #2fbf6d, #1b8a4c);
  box-shadow: 0 0 0 2px #0b4a27, 0 8px 14px -6px rgba(0,0,0,.9);
  color: #fff;
  padding-left: 22px;
}
/* Haken als Maske — ein gezeichnetes Zeichen, kein Schrift-Symbol. */
.bh-buehne[data-spiel="chicken"] .lane.crossed .ch-schild::before {
  content: "";
  position: absolute; left: 6px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bh-buehne[data-spiel="chicken"] .lane.car-hit .ch-schild {
  border-color: #ffe3e3;
  background: linear-gradient(180deg, #e0474f, #a8262e);
  box-shadow: 0 0 0 2px #5a0d12, 0 8px 14px -6px rgba(0,0,0,.9);
  color: #fff;
}

/* Startufer: Gehweg-Platten mit Bordsteinkante, links ein Grasstreifen mit
   Blumen (feste Verlaeufe, nichts bewegt sich). */
.bh-buehne[data-spiel="chicken"] .ch-bordstein { position: relative; border: 0; background: none }
.bh-buehne[data-spiel="chicken"] .ch-bordstein::before {
  content: "";
  position: absolute; left: 0; right: 0; z-index: 0;
  top: var(--ch-oben); bottom: var(--ch-unten);
  background:
    linear-gradient(90deg, transparent calc(100% - 8px), #6b7280 calc(100% - 8px), #aab1be calc(100% - 5px), #3a404c 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.24) 0 2px, transparent 2px 28px),
    linear-gradient(180deg, #5d6472, #4a505d);
  pointer-events: none;
}
.bh-buehne[data-spiel="chicken"] .ch-bordstein:first-child::after {
  content: "";
  position: absolute; left: 0; width: 34%; z-index: 0;
  top: var(--ch-oben); bottom: var(--ch-unten);
  background:
    radial-gradient(circle, #ffe066 0 2px, #ff7eb6 2.5px 5px, transparent 5.5px) 40% 14% / 14px 14px no-repeat,
    radial-gradient(circle, #fff 0 2px, #ffd23f 2.5px 5px, transparent 5.5px) 72% 34% / 14px 14px no-repeat,
    radial-gradient(circle, #ffe066 0 2px, #ffffff 2.5px 5px, transparent 5.5px) 28% 55% / 14px 14px no-repeat,
    radial-gradient(circle, #fff 0 2px, #b58cff 2.5px 5px, transparent 5.5px) 66% 74% / 14px 14px no-repeat,
    radial-gradient(circle, #ffe066 0 2px, #ff7eb6 2.5px 5px, transparent 5.5px) 36% 92% / 14px 14px no-repeat,
    repeating-linear-gradient(180deg, rgba(0,0,0,.12) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, #2d7a38, #3f9448 70%, #2a6a33);
  box-shadow: inset -3px 0 0 rgba(0,0,0,.25);
  pointer-events: none;
}
/* Zielufer: goldene Platten, Kante links, Truhe und Flagge. */
.bh-buehne[data-spiel="chicken"] .ch-bordstein--rechts::before {
  background:
    linear-gradient(270deg, transparent calc(100% - 8px), #6b7280 calc(100% - 8px), #aab1be calc(100% - 5px), #3a404c 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 28px),
    linear-gradient(180deg, #8a6a2c, #6b5020);
}
.ch-truhe {
  position: absolute; left: 50%; top: var(--ch-mitte); z-index: 1;
  width: 64px; height: 64px;
  margin: -40px 0 0 -30px;
  object-fit: contain;
  pointer-events: none;
}
.ch-flagge {
  position: absolute; left: 50%; z-index: 1;
  top: calc(var(--ch-oben) + 6px); height: calc(var(--ch-mitte) - var(--ch-oben) - 40px);
  width: 4px;
  margin-left: 14px;
  background: linear-gradient(90deg, #e9edf5, #9aa2b1);
  border-radius: 2px;
  pointer-events: none;
}
.ch-flagge::after {
  content: "";
  position: absolute; left: 4px; top: 2px;
  width: 26px; height: 18px;
  background: repeating-conic-gradient(#f5f7fb 0 25%, #1b1f27 0 50%) 0 0 / 9px 9px;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  transform-origin: 0 50%;
  animation: ch-flagge 2.4s ease-in-out infinite;
}
@keyframes ch-flagge { 0%, 100% { transform: skewY(0) scaleX(1) } 50% { transform: skewY(-6deg) scaleX(.92) } }

/* Laternen am oberen Bordstein: Mast, Kopf mit Birne, Lichtkegel auf die
   Fahrbahn (fester Verlauf mit clip-path, kein Filter). */
.ch-lampen { position: absolute; inset: 0; z-index: 2; pointer-events: none }
.ch-lampe {
  position: absolute; top: 9%;
  height: calc(var(--ch-oben) - 9%);
  width: 5px; margin-left: -2px;
  background: linear-gradient(90deg, #6b7280, #2a2f3a);
  border-radius: 2px 2px 0 0;
}
.ch-lampe::before {
  content: "";
  position: absolute; left: -9px; top: -4px;
  width: 23px; height: 8px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #4b5260, #262a33);
  box-shadow: 0 6px 16px 4px rgba(255,210,120,.5), inset 0 -3px 0 #ffe7a8;
}
.ch-lampe::after {
  content: "";
  position: absolute; left: 50%; top: 4px;
  width: 150px; height: 250%;
  margin-left: -75px;
  background: linear-gradient(180deg, rgba(255,214,130,.3), rgba(255,214,130,.1) 65%, transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}

/* Verkehr: nur im Fahrbahnstueck sichtbar. Die Fahrt endet bei 60 % der
   Dauer unter dem unteren Rand (Fahrbahn 252 px + 10), der Rest ist Pause —
   so entstehen Luecken. Die Strecke steht als feste Zahl im Keyframe: mit
   var() darin rechnete der Browser die Animation je Bild im Hauptthread neu
   (gemessen: Stil 1.030 ms je 5 s, Scrollen 87 fps). Handy: eigene Keyframes. */
.bh-buehne[data-spiel="chicken"] .ch-autos { top: var(--ch-oben); bottom: var(--ch-unten) }
.bh-buehne[data-spiel="chicken"] .ch-auto {
  height: auto;
  align-items: start;
  animation-name: ch-strom;
  transition: opacity .25s;
}
.bh-buehne[data-spiel="chicken"] .ch-auto--rauf { animation-name: ch-strom-rauf }
.bh-buehne[data-spiel="chicken"] .ch-auto img { position: relative; z-index: 1; width: 44px; height: auto; filter: none }
.bh-buehne[data-spiel="chicken"] .ch-auto--lkw img { width: 50px }
/* Scheinwerfer: Kegel vor der Front (Front unten; Gegenverkehr ist gedreht). */
.bh-buehne[data-spiel="chicken"] .ch-auto::after {
  content: "";
  position: absolute; left: 50%; top: calc(100% - 8px);
  width: 64px; height: 84px;
  margin-left: -32px;
  background: linear-gradient(180deg, rgba(255,244,190,.42), rgba(255,244,190,.12) 60%, transparent);
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}
.bh-buehne[data-spiel="chicken"] .ch-auto--rauf::after { top: auto; bottom: calc(100% - 8px); transform: scaleY(-1) }
.bh-buehne[data-spiel="chicken"] .ch-auto--weg { opacity: 0 }
@keyframes ch-strom { 0% { transform: translateY(-170px) } 60%, 100% { transform: translateY(262px) } }
@keyframes ch-strom-rauf { 0% { transform: translateY(262px) } 60%, 100% { transform: translateY(-170px) } }
@keyframes ch-strom-handy { 0% { transform: translateY(-140px) } 60%, 100% { transform: translateY(214px) } }
@keyframes ch-strom-handy-rauf { 0% { transform: translateY(214px) } 60%, 100% { transform: translateY(-140px) } }
/* Treffer: das Auto haelt mit der Front knapp ueber dem Deckel. Die
   Animation muss hier noch einmal stehen, weil die Strom-Regel oben den
   Namen fuer alle Autos dieser Buehne setzt (hoehere Spezifitaet). */
.bh-buehne[data-spiel="chicken"] .ch-auto--treffer { top: auto; bottom: calc(50% + 6px); animation: ch-anrasen .5s cubic-bezier(.4,0,.8,1) both }

/* Huhn: 88 px, steht mit den Fuessen auf dem Deckel. Die Staubwolke kommt
   beim Aufsetzen (ab 280 ms des 380-ms-Sprungs). */
.bh-buehne[data-spiel="chicken"] .ch-huhn-spur { bottom: auto; top: calc(var(--ch-mitte) - 78px); height: 96px; place-items: end center }
/* huhn.svg schaut nach links — gespiegelt schaut es dorthin, wohin es laeuft. */
.bh-buehne[data-spiel="chicken"] .ch-huhn { position: relative; width: 88px; height: 88px; transform: scaleX(-1) }
.bh-buehne[data-spiel="chicken"] .ch-huhn__bild { filter: none }
.bh-innen[data-zustand="laeuft"] .ch-huhn:not(.ch-huhn--hopst) .ch-huhn__bild { animation: ch-wippen 1.6s ease-in-out infinite }
.bh-innen[data-zustand="laeuft"] .ch-huhn--hopst .ch-huhn__bild { animation: ch-hops .38s cubic-bezier(.3,.7,.3,1) both, ch-wippen 1.6s ease-in-out .5s infinite }
.ch-staub { position: absolute; left: 50%; bottom: 4px; z-index: -1; width: 0; height: 0 }
.ch-staub i {
  position: absolute; left: -12px; top: -10px;
  width: 24px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214,206,190,.8), rgba(214,206,190,0));
  opacity: 0;
}
/* Drei Woelkchen: links, rechts, Mitte — Lage fest, Keyframes ohne var(). */
.ch-staub i:nth-child(1) { left: -38px }
.ch-staub i:nth-child(2) { left: 14px }
.ch-huhn--hopst .ch-staub i { animation: ch-staub .5s ease-out .26s both }
.ch-huhn--hopst .ch-staub i:nth-child(2) { animation-delay: .29s }
.ch-huhn--hopst .ch-staub i:nth-child(3) { animation-delay: .32s }
@keyframes ch-staub {
  0%   { opacity: 0; transform: translateY(0) scale(.4) }
  25%  { opacity: .95 }
  100% { opacity: 0; transform: translateY(-8px) scale(1.6) }
}

/* Status unten auf dem Gras, Chip oben ueber der Skyline. */
.bh-buehne[data-spiel="chicken"] .ch-status { bottom: 12px; color: #e8ecf4 }

@media (max-width: 600px) {
  /* Handy: fuenf Spalten sichtbar (je ~64 px), die Kamera faehrt mit;
     die Buehne ist hier 340 statt 300 px hoch, damit die Fahrbahn traegt. */
  .bh-buehne[data-spiel="chicken"] .bh-innen { --ch-sicht: 5; height: 340px }
  .bh-buehne[data-spiel="chicken"] .ch-auto { animation-name: ch-strom-handy }
  .bh-buehne[data-spiel="chicken"] .ch-auto--rauf { animation-name: ch-strom-handy-rauf }
  .bh-buehne[data-spiel="chicken"] .ch-auto--treffer { animation-name: ch-anrasen }
  .bh-buehne[data-spiel="chicken"] .ch-auto img { width: 36px }
  .bh-buehne[data-spiel="chicken"] .ch-auto--lkw img { width: 40px }
  .bh-buehne[data-spiel="chicken"] .ch-auto::after { width: 50px; height: 64px; margin-left: -25px }
  .bh-buehne[data-spiel="chicken"] .ch-huhn-spur { top: calc(var(--ch-mitte) - 62px); height: 76px }
  .bh-buehne[data-spiel="chicken"] .ch-huhn { width: 66px; height: 66px }
  .ch-deckel { width: 38px; height: 38px; margin: -19px 0 0 -19px }
  .bh-buehne[data-spiel="chicken"] .lane .ch-schild { top: calc(var(--ch-oben) - 42px); min-width: 46px; padding: 5px 6px; font-size: .7rem }
  .bh-buehne[data-spiel="chicken"] .lane.crossed .ch-schild { padding-left: 19px }
  .bh-buehne[data-spiel="chicken"] .lane.crossed .ch-schild::before { left: 5px; width: 10px; height: 10px; margin-top: -5px }
  .ch-truhe { width: 50px; height: 50px; margin: -32px 0 0 -24px }
  .ch-lampe::after { width: 110px; margin-left: -55px }
}

/* Reduzierte Bewegung: keine Schleifen (Nebel, Ring, Flagge, Wippen), die
   Kamera springt, kein Staub. Leerlauf-Autos baut das Skript gar nicht. */
html.reduziert .ch-nebel, html.reduziert .ch-deckel::after, html.reduziert .ch-flagge::after, html.reduziert .ch-staub i,
html.reduziert .bh-innen[data-zustand] .ch-huhn .ch-huhn__bild { animation: none }
html.reduziert .ch-kamera, html.reduziert .ch-skyline, html.reduziert .ch-schild, html.reduziert .ch-auto { transition: none }
@media (prefers-reduced-motion: reduce) {
  .ch-nebel, .ch-deckel::after, .ch-flagge::after, .ch-staub i, .bh-innen[data-zustand] .ch-huhn .ch-huhn__bild { animation: none }
  .ch-kamera, .ch-skyline, .ch-schild, .ch-auto { transition: none }
}

/* v4.24 (Audit D105): die Leerlauf-Szene hatte 16 Endlos-Animationen (Verkehr,
   Laternen, Nebel, Flagge, Huhn) — auf einem gedrosselten Handy rund 1,2 s
   Stilberechnung je 5 s, nur fuers Zuschauen. Nach 20 s ohne Eingabe im
   Leerlauf und immer, wenn die Buehne nicht im Bild ist, setzt das Skript
   .ch-ruhe: alle Schleifen stehen (pausiert, nicht zurueckgesetzt — beim
   Wecken laufen sie an derselben Stelle weiter). Handy: Laternen ohne Flackern. */
.bh-innen.ch-ruhe, .bh-innen.ch-ruhe *, .bh-innen.ch-ruhe *::before, .bh-innen.ch-ruhe *::after { animation-play-state: paused !important }
@media (max-width: 767px) {
  .ch-laterne { animation: none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANDY-FEINSCHLIFF (v3.61) — Roulette-Tableau, Ergebnis-Karten, Jackpot
   ───────────────────────────────────────────────────────────────────────────
   Das Tableau (SVG 936 x 280, Spalte 68) war rechts angeschnitten. Jetzt
   scrollt es waagrecht mit Schwung; bei 660 px Mindestbreite ist jedes
   Zahlenfeld 48 px breit und der Jeton 26 px. Der Verlauf am rechten Rand
   (Maske) zeigt, dass es weitergeht. Rad 220 px.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .rl-buehne .rl-tisch-feld {
    position: relative;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), rgba(0,0,0,.18));
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), rgba(0,0,0,.18));
  }
  .rl-buehne .rl-tisch-huelle { min-width: 660px; scroll-snap-align: start }
  .rl-buehne .rl-tisch { min-width: 0 }
  .bh-innen .rl-rad-feld { width: 220px; height: 220px }
  .rl-knoepfe .btn { min-height: 44px }
  .rl-leiste { flex-wrap: wrap; gap: 6px; padding: 8px }
  .rl-chip { min-height: 32px }

  /* Ergebnis-Karten (Coinflip, Dice, Limbo, Blackjack, Duel): hoechstens
     92 vw, sonst ragt die Karte bei „Playing 1.234.567 Coins" hinaus. */
  .bh-karte { max-width: 92vw; min-width: 0 }
  .du-overlay__karte { max-width: 92vw; min-width: 0 }

  /* Jackpot-Historie: Tabelle scrollt, Zahlen bleiben einzeilig. */
  .jp-historie { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .jp-historie .tbl th, .jp-historie .tbl td { white-space: nowrap }
}