/* ═══════════════════════════════════════════════════════════════════════════
   Spielseiten „Arcade" (v3.50) — Design-Vorgabe Abschnitte 3, 4 und 6.

   Liegt NACH design.css und battles.css. Alles hier ueberschreibt nur die
   Spielseiten (Kopf, Bedienfeld, Buehne, einzelne Spiele); das Grundsystem in
   index.html bleibt unberuehrt, damit ein Rueckbau ein Loeschen dieser Datei
   ist. Wo eine Regel eine aus index.html ueberschreibt, steht dabei, WARUM.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Gruen fuer Handlungen (Play/Bet/Flip). Falls design.css die Werte schon
     setzt, sind es dieselben — die Vorgabe nennt sie so. */
  --play: #3ddc84;
  --play-ink: #7CF2AC;
  --play-dunkel: #1f9a55;
}

/* ── 1 Spielkopf ─────────────────────────────────────────────────────────────
   „DonutHugoBet <Spiel>" statt Bild + Chips. Der Kopf traegt die Klasse
   spiel-banner weiter, weil die Spielfarbe (--tone-rgb) daran haengt; sein
   Aussehen wird hier auf die Vorgabe zurueckgenommen. */
/* v3.89: Kopf in EINER Zeile — Pfeil, Titel samt Grenzwerten, Stats/Fair.
   Vorher vier Zeilen (rund 135 px), DonutFlip braucht dafuer 75 px. */
.game-area > .btn.btn-secondary { display: none }
.spiel-titel__zurueck {
  flex: 0 0 auto;
  width: 36px;
  min-height: 36px;
  padding: 0;
  justify-content: center;
}
.spiel-banner.spiel-titel {
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s4);
  padding: 0 0 var(--s3);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.spiel-titel__text { min-width: 0; flex: 1 }
.spiel-titel__name {
  margin: 0;
  font: var(--t-titel);
  letter-spacing: var(--ls-titel);
  text-transform: uppercase;
  color: var(--text);
}
.spiel-titel__name span { color: var(--play-ink) }
.spiel-titel__werte {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s4);
  margin-top: 6px;
  font: var(--t-klein);
  color: var(--muted);
}
.spiel-titel__werte b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-2);
}
.spiel-titel__knoepfe { display: flex; gap: var(--s2); flex-shrink: 0; margin-left: auto }
/* v3.89: Auf dem Handy standen Pfeil, Titel, vier Chips und die beiden
   Knoepfe in fuenf Zeilen — rund 280 px, bevor man das Spielfeld sah.
   Pfeil und Titel teilen sich jetzt eine Zeile, die Knoepfe stehen rechts
   daneben, die Chips laufen darunter. */
@media (max-width: 720px) {
  .spiel-banner.spiel-titel { flex-wrap: wrap; gap: 8px var(--s3) }
  .spiel-titel__zurueck { order: 0; width: 34px; min-height: 34px }
  .spiel-titel__text { order: 1; flex: 1 1 40% }
  .spiel-titel__knoepfe { order: 2; flex: 0 0 auto }
  .spiel-titel__name { font-size: 1.1rem }
  .spiel-titel__werte { gap: 3px var(--s3) }
  .spiel-titel__knoepfe .btn { min-height: 34px; padding: 0 10px }
}
.spiel-titel__knoepfe .btn { min-height: 36px }

/* ── 2 Bedienfeld ────────────────────────────────────────────────────────────
   300 px, Bedienkarten auf --ink-850 (Vorgabe 2). index.html setzt 310 px. */
/* Nur breit — unter 900 px stellt index.html auf eine Spalte um, das darf
   diese Regel nicht ueberschreiben. */
@media (min-width: 901px) {
  /* v3.89: 268 statt 300 px — die Spalte braucht die Breite nicht (die
     Presets stehen weiterhin zu viert nebeneinander), das Spielfeld schon. */
  .spiel-layout { grid-template-columns: minmax(0, 268px) minmax(0, 1fr) }
}
.spiel-steuer > .card, .steuer-karte { background: var(--ink-850) }

/* Einsatz: Etikett PLAY AMOUNT, Feld mit Muenze links, ½ 2× Max daneben. */
.einsatz-etikett { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase }
.einsatz-zeile { align-items: stretch; gap: 6px }
/* v3.89: In der schmaleren Spalte schnitt das Feld den Betrag ab („100000(").
   Die drei Helfer daneben brauchen die Breite nicht. */
.einsatz-schnell .quick-bet { min-width: 34px; padding: 0 6px }
.einsatz-feld {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.einsatz-feld__muenze {
  position: absolute;
  left: 12px;
  color: var(--gold);
  pointer-events: none;
}
/* Platz fuer die Muenze — das Feld selbst bleibt das aus index.html. */
.einsatz-feld .input { padding-left: 36px; font-family: var(--font-num); font-variant-numeric: tabular-nums }
.einsatz-schnell { display: flex; gap: 4px; flex-shrink: 0 }
.einsatz-schnell .quick-bet {
  min-height: 42px;
  padding: 0 10px;
  border-radius: var(--r-sm);
}

/* Play-Knopf: gruen, 48 px, dunkle Schrift auf hellem Gruen (lesbar auch bei
   Sonnenlicht). Spezifischer als .steuer-karte .btn aus index.html, das 42 px
   setzt. */
.btn.btn-play, .steuer-karte .btn.btn-play, .spiel-steuer .btn.btn-play {
  min-height: 48px;
  width: 100%;
  justify-content: center;
  color: #06301a;
  background: linear-gradient(180deg, var(--play-ink), var(--play) 55%, var(--play-dunkel));
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px -8px rgba(61,220,132,.7), 0 1px 2px rgba(0,0,0,.3);
}
.btn.btn-play:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05) }
.btn.btn-play:active:not(:disabled) { transform: translateY(0) }
/* Waehrend ein Spiel laeuft ist der Knopf gesperrt — er pulst leicht, damit
   man sieht, dass etwas passiert, und nicht noch einmal drueckt. */
.btn.btn-play:disabled { opacity: .85; cursor: default }   /* v4.25: kein Warte-Zeiger (blauer Ring unter Windows) */
/* v3.65: Der Puls war filter: brightness auf dem Knopf selbst – jedes Bild
   neu gefiltert, und der Knopf (viele passende Regeln) musste jedes Bild
   seinen Stil neu berechnen. Jetzt pulst eine dunkle Deckschicht (::before)
   per opacity: gleicher Eindruck (bis brightness .86), Compositor-Arbeit.
   Nicht bei ist-wartet (dort ist ::before der Fortschrittsrand) und nicht
   beim Angel-Knopf im Zustand holt (dort ist ::before sein Schein). */
.btn.btn-play:disabled:not(.ist-wartet):not(.an-los--holt)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: #000;
  opacity: 0;
  animation: play-puls 1.1s ease-in-out infinite;
}
@keyframes play-puls {
  0%, 100% { opacity: 0 }
  50%      { opacity: .14 }
}
/* Roulette: die Knoepfe sind gesperrt, solange keine Jetons liegen oder die
   Runde laeuft – das ist Warten auf den Tisch, kein laufendes Spiel. Den
   Takt zeigen Phasenbalken, Ring und Sekunden; ein Dauerpuls auf zwei
   breiten Knoepfen war hier nur Last. */
#rl-drehen:disabled::before, #rl-leiste-setzen:disabled::before { content: none }
/* Cash-out-Knoepfe in der Saeule gleich hoch wie der Play-Knopf. */
.steuer-karte .btn-success { min-height: 48px }

/* ── 3 Buehne ────────────────────────────────────────────────────────────────
   --ink-900 mit Punktraster (1 px, 24 px Abstand, Deckkraft .25), Rahmen,
   Radius 12. Ueberschreibt das Raster aus index.html (22 px, Maske). */
.spiel-buehne[data-g] {
  min-height: 460px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background:
    radial-gradient(55% 50% at 50% 46%, rgba(var(--tone-rgb), .12), transparent 72%),
    var(--ink-900);
}
.spiel-buehne[data-g]::before {
  background-image: radial-gradient(rgba(255,255,255,.25) 1px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: .25;
  -webkit-mask-image: radial-gradient(85% 80% at 50% 50%, #000 40%, transparent 92%);
  mask-image: radial-gradient(85% 80% at 50% 50%, #000 40%, transparent 92%);
}

/* Der Ergebnisblock unter dem Spielfeld bleibt (Klang, Konfetti, Beobachter),
   wird aber klein — gelesen wird die Einblendung auf der Buehne. */
.spiel-buehne .game-result {
  width: min(100%, 360px);
  margin: var(--s2) 0 0;
  padding: 8px 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s2);
}
.spiel-buehne .game-result .result-title { font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase; margin: 0 }
.spiel-buehne .game-result .result-amount { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums }
.spiel-buehne .game-result.result-win::after { display: none }

/* Ergebnis-Einblendung: Multiplikator gross in Unbounded, Betrag in Gold. */
/* Oben in der Buehne, nicht in der Mitte: dort stehen Muenze, Wuerfel und
   die grosse Limbo-/Crash-Zahl — die Einblendung soll sie nicht verdecken. */
.buehne-ergebnis {
  position: absolute;
  left: 50%;
  top: 16px;
  z-index: 6;
  transform: translate(-50%, 0);
  padding: 12px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(15,18,22,.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.8);
  text-align: center;
  pointer-events: none;
  animation: ergebnis-rein .32s var(--ease-spring) both, ergebnis-raus .3s var(--ease-out) 2.2s both;
}
.buehne-ergebnis__mult {
  font-family: var(--font-disp);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.buehne-ergebnis--text .buehne-ergebnis__mult { font-size: 1.3rem; letter-spacing: -.02em }
.buehne-ergebnis--sieg .buehne-ergebnis__mult { color: var(--play-ink); text-shadow: 0 0 24px rgba(61,220,132,.45) }
.buehne-ergebnis--verlust .buehne-ergebnis__mult { color: var(--red-ink) }
.buehne-ergebnis__betrag {
  margin-top: 6px;
  font: var(--t-zahl);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.buehne-ergebnis--verlust .buehne-ergebnis__betrag { color: var(--text-2) }
@keyframes ergebnis-rein {
  from { opacity: 0; transform: translate(-50%, -10px) scale(.8) }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1) }
}
@keyframes ergebnis-raus {
  to { opacity: 0; transform: translate(-50%, -8px) scale(.96) }
}

/* ── 4 Coinflip ──────────────────────────────────────────────────────────────
   Muenze 220 px (152 px × 1.45 aus index.html = 220). Tails blau, Praegung
   H/T, Aufsteigen beim Wurf, Seitenwahl als runde Chips. */
.cf-flaeche--zahl .cf-rand { fill: #2b4fb0 }
.cf-flaeche--zahl .cf-feld { fill: url(#cfBlau) }
.cf-flaeche--zahl .cf-ring { stroke: rgba(20,40,110,.5) }
.cf-flaeche--zahl .cf-riffel { stroke: rgba(15,30,90,.6) }
.cf-wert, .cf-praege {
  font-family: var(--font-disp);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.cf-flaeche--kopf .cf-wert { fill: #8a5f1c }
.cf-flaeche--zahl .cf-wert { fill: #17307a }
.cf-praege--licht { fill: rgba(255,255,255,.55) }
.cf-praege--schatten { fill: rgba(0,0,0,.35) }
/* Aufsteigen: eigene translate-Eigenschaft, die Skalierung der Buehne
   (transform) bleibt davon unberuehrt. Dauer wie die Drehung (1.75 s). */
.cf-buehne--wurf { animation: cf-steigen 1.75s cubic-bezier(.2,.7,.2,1) both }
@keyframes cf-steigen {
  0%   { translate: 0 0 }
  38%  { translate: 0 -64px }
  100% { translate: 0 0 }
}
body.auto-turbo .cf-buehne--wurf { animation-duration: .5s }
.cf-wahl { gap: var(--s3); justify-items: center }
.cf-opt {
  padding: var(--s2) 0 var(--s1);
  border: 0;
  background: none;
  gap: 7px;
}
.cf-opt:hover { transform: translateY(-2px) }
.cf-opt__mark {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  border-width: 3px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.25) inset;
  transition: box-shadow .2s, transform .2s var(--ease-out);
}
.cf-opt__mark--kopf {
  background: linear-gradient(180deg, #ffe6a8, #f5c46a 55%, #c9963f);
  color: #6d4d16;
  border-color: #b8873a;
}
.cf-opt__mark--zahl {
  background: linear-gradient(180deg, #8fb4ff, #4f7fea 55%, #2b4fb0);
  color: #0e2160;
  border-color: #2b4fb0;
}
.cf-opt.selected { background: none; border: 0; box-shadow: none; color: var(--text) }
.cf-opt.selected .cf-opt__mark { box-shadow: 0 0 0 3px var(--ink-850), 0 0 0 5px var(--play), 0 8px 18px -6px rgba(0,0,0,.7) }

/* ── 4 Dice: Wuerfel 120 px ohne Skalierung (scharfe Kanten). ────────────── */
.spiel-buehne .dice-container { transform: none; margin: var(--s5) 0 }
.spiel-buehne .die { width: 120px; height: 120px; border-radius: 22px; font-size: 3.2rem }

/* ── 4 Mines: 5×5, Zellen ~84 px (5 × 92 px Brett aus index.html abzueglich
   Luecken), Innenschatten, Flip beim Aufdecken (cell-flip aus index.html). */
.spiel-buehne .mines-board { gap: 6px }
.spiel-buehne .mine-cell {
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ink-750), var(--ink-850));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05);
}
.spiel-buehne .mine-cell:hover:not(.gem):not(.mine-hit):not(.revealed-mine) {
  border-color: rgba(61,220,132,.45);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 6px 14px -4px rgba(0,0,0,.6);
}
.minen-wahl .minen-wert { min-width: 2.2em; text-align: center; font-family: var(--font-disp) }

/* ── 4 Tower: breite Zellen mit Karo-Schraffur, Reihen 1–8 rechts. ────────── */
.spiel-buehne .tower-row { position: relative; padding-right: 30px }
.tower-nr {
  position: absolute;
  right: 0;
  top: 50%;
  width: 24px;
  transform: translateY(-50%);
  text-align: center;
  font: 700 .72rem/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.spiel-buehne .tower-cell {
  width: 132px;
  height: 52px;
  border-radius: 8px;
  background-color: var(--ink-750);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 8px);
}
.spiel-buehne .tower-cell.safe, .spiel-buehne .tower-cell.bomb { background-image: none }
@media (max-width: 900px) {
  .spiel-buehne .tower-cell { width: 88px; height: 46px }
}

/* ── 4 Slots: Bilder statt Emoji, Auszahltabelle als Bildzeilen. ─────────── */
.reel-symbol { display: grid; place-items: center; width: 100%; height: 100% }
.slot-sym { width: 68%; height: 68%; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)) }
.spiel-buehne .reel { border-radius: 14px }
.spiel-buehne .slots-machine .btn-play { max-width: 360px }
.spiel-buehne .payline-info { width: 100%; max-width: 520px; margin-top: var(--s3) }
.slot-tabelle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2) var(--s4);
  text-align: left;
}
.slot-tabelle__titel {
  grid-column: 1 / -1;
  font: var(--t-etikett);
  letter-spacing: var(--ls-etikett);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--s2);
}
.slot-tabelle__spalte { display: contents }
/* v3.89: In der 268-px-Spalte ist fuer zwei Spalten kein Platz — dort steht
   die Tabelle untereinander, mit kleineren Symbolen. */
.spiel-steuer .slot-tabelle { grid-template-columns: 1fr; gap: 4px }
.spiel-steuer .slot-tabelle__titel { margin-top: var(--s2) }
.spiel-steuer .slot-zeile { padding: 2px 8px }
.spiel-steuer .slot-zeile__bilder .slot-sym { width: 20px; height: 20px }
.slot-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
}
.slot-zeile__bilder { display: flex; gap: 2px }
.slot-zeile__bilder .slot-sym { width: 22px; height: 22px; filter: none }
.slot-zeile b { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--gold) }

/* ── 4 Chicken Road: Huhn und Spuren bleiben, nur Zahlen in Unbounded. ────── */
.spiel-buehne .road-multiplier { font-family: var(--font-disp); font-weight: 700 }
.spiel-buehne .tower-info, .spiel-buehne .mines-info { font-family: var(--font-disp); font-weight: 600 }

/* ── Handy: eine Spalte, Buehne zuerst (index.html), Kopf umbrechen. ─────── */
@media (max-width: 900px) {
  .spiel-banner.spiel-titel { flex-wrap: wrap; gap: var(--s3) }
  /* Titel ueber die ganze Breite, die Knoepfe darunter — sonst schieben
     sie sich bei 375 px in den Titel. */
  .spiel-titel__text { flex: 1 1 100% }
  .spiel-titel__name { font: var(--t-titel); letter-spacing: var(--ls-titel); text-transform: uppercase }
  .spiel-titel__knoepfe { margin-left: 0 }
  .spiel-banner__aktion { display: inline-flex }
  .spiel-buehne[data-g] { min-height: 360px }
  .buehne-ergebnis__mult { font-size: 2rem }
  .spiel-buehne .die { width: 96px; height: 96px }
}

@media (prefers-reduced-motion: reduce) {
  .buehne-ergebnis { animation: none }
  .cf-buehne--wurf { animation: none }
  .btn.btn-play:disabled::before { animation: none }
}

/* ── 5 Upgrader (v3.54) ──────────────────────────────────────────────────────
   Rad-Ring 320 px: der gruene Bogen ist so gross wie die Chance, der Zeiger
   steht oben, der Ring dreht (3,5 s, schneller Anlauf, langes Ausrollen) und
   bleibt dort stehen, wo der Server-Zufall sagt. In der Mitte das Ziel
   (Gegenstand oder Multiplikator) mit Glow. Bedienfeld: Reiter Multiplier |
   Item, Schieber + Eingabe, Chance/Payout, Raster der Gegenstaende. */
.tile[data-g="upgrader"] { --tone: #3ddc84; --tone-rgb: 61,220,132 }
.spiel-banner[data-g="upgrader"], .spiel-buehne[data-g="upgrader"] { --tone-rgb: 61,220,132 }
/* Im Auto-Modus startet die Serie den Knopf selbst — wie bei Limbo (#limbo-los). */
.spiel-steuer--auto #up-los { display: none !important }

/* Bedienfeld */
.up-karte .label { margin-bottom: 6px }
.up-modus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: var(--r-sm);
  background: var(--ink-900);
}
.up-modus__knopf {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: var(--t-knopf-klein);
  letter-spacing: var(--ls-knopf);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.up-modus__knopf:hover { color: var(--text-2) }
.up-modus__knopf.active {
  background: none;
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 var(--line-top);
  color: var(--accent-ink);
}
.up-teil[hidden] { display: none }
.up-ziel { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; align-items: center }
.up-ziel .input { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right }
.up-ziel span { font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--muted); text-align: center }
/* Schieber logarithmisch (index.html rechnet die Stellung um): 1,1× links, 1.000× rechts. */
.up-schieber { width: 100%; margin: 12px 0 4px; accent-color: var(--play); cursor: pointer }
.up-schnell { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px }
/* v3.89: violett wie jede andere Auswahl in der Bedienspalte (Limbo, Risiko,
   Reihen, Gitter). Gruen ist die Farbe der Handlung, nicht der Auswahl. */
.up-schnell .quick-bet.active { border-color: rgba(124,92,255,.5); background: var(--accent-dim); color: var(--accent-ink) }
.up-suche { margin-bottom: 8px }
.up-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 2px;
  margin-bottom: 4px;
}
.up-item {
  --sel: #9aa3b2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-900);
  color: var(--text-2);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, transform .15s var(--ease-out), box-shadow .15s;
}
.up-item:hover { border-color: var(--line-2); transform: translateY(-1px) }
.up-item.active { border-color: var(--play); box-shadow: 0 0 0 1px var(--play) inset, 0 8px 18px -10px rgba(61,220,132,.7) }
/* Wert ausserhalb von 1,1× … 1.000× beim aktuellen Einsatz: waehlbar, aber gedimmt — der Server klemmt das Ziel. */
.up-item--fern { opacity: .45 }
.up-item img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)) }
.up-item__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .62rem/1.2 var(--font-ui); color: var(--sel) }
.up-item__wert { font: 700 .66rem var(--font-num); font-variant-numeric: tabular-nums; color: var(--gold) }
.up-item__mult { font: 700 .58rem var(--font-disp); color: var(--muted); white-space: nowrap }
.up-item[data-s="uncommon"]  { --sel: #4cc9f0 }
.up-item[data-s="rare"]      { --sel: #b18cff }
.up-item[data-s="epic"]      { --sel: #ff8ac4 }
.up-item[data-s="legendary"] { --sel: #f5c46a }
.up-werte { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 12px }
.up-werte > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--ink-900);
}
.up-werte span { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.up-werte b { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text) }
.up-werte b.up-gold { color: var(--gold) }

/* Buehne */
.up-buehne { position: relative; display: flex; flex-direction: column; align-items: center; padding: 34px 0 8px }
/* v3.91: 320 px Rad in einer Buehne, die 500 px hoch sein darf — daneben
   und darunter blieb viel leer, waehrend die Bedienspalte weit laenger war. */
.up-rad { position: relative; width: 380px; height: 380px; margin: 12px auto 0 }
/* v3.85: Der Ring STEHT. Gedreht wird nur noch der Zeiger (.up-zeigerbahn) —
   so bleibt die Gewinnflaeche waehrend der ganzen Drehung dort, wo man sie
   eingestellt hat, und man sieht, worauf der Zeiger zulaeuft. */
.up-ring { position: absolute; inset: 0; width: 100%; height: 100% }
/* 3,5 s, schneller Anlauf, langes Ausrollen — die Dauer setzt index.html je Runde (Turbo). */
.up-ring--dreht { transition: transform 3.5s cubic-bezier(.15,.85,.25,1) }
.up-ring__grund { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 26 }
/* Der Bogen beginnt oben (rotate −90°) und laeuft im Uhrzeigersinn; die Laenge
   (stroke-dasharray, pathLength 100 = Prozent) setzt index.html aus der Chance. */
.up-ring__treffer {
  fill: none;
  stroke: var(--play);
  stroke-width: 26;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 10px rgba(61,220,132,.55));
  transition: stroke-dasharray .25s var(--ease-out), opacity .3s;
}
.up-ring__ticks { stroke: rgba(255,255,255,.18); stroke-width: 2; stroke-linecap: round }
/* Die Bahn des Zeigers liegt ueber dem Ring und dreht sich um die Mitte;
   bewegt wird ausschliesslich transform, das laeuft auf dem Compositor. */
.up-zeigerbahn {
  position: absolute; inset: 0;
  z-index: 3;
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  will-change: transform;
  pointer-events: none;
}
.up-zeiger {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid var(--gold);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
/* Waehrend auf den Server gewartet wird, atmet die Nabe — sonst sieht die
   Seite bei einer langsamen Antwort aus, als waere der Klick verloren. */
.up-rad--wartet .up-mitte { animation: up-warten 1s ease-in-out infinite }
@keyframes up-warten { 0%, 100% { opacity: 1 } 50% { opacity: .62 } }
/* v3.86: Ein Zielfeld mit Unsinn darin wird rot umrandet, und der Grund steht
   in .up-hinweis darunter. Beides braucht es, weil UPGRADE dann gesperrt ist —
   ein grau gewordener Knopf ohne Begruendung sieht nach Fehler aus. */
.input--fehler {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px rgba(255,90,90,.18);
}
.up-hinweis {
  margin: -4px 0 10px;
  font: var(--t-klein);
  color: var(--gold);
}
/* Gesperrte Steuerung: sichtbar, aber nicht anfassbar. */
.up-karte--laeuft .up-schnell, .up-karte--laeuft .up-items, .up-karte--laeuft .up-modus { opacity: .5; pointer-events: none }
.up-karte--laeuft .input:disabled, .up-karte--laeuft .up-schieber:disabled { opacity: .6; cursor: not-allowed }
.up-mitte {
  position: absolute;
  inset: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(61,220,132,.16), rgba(15,18,22,.92) 70%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 0 40px -10px rgba(var(--tone-rgb), .5);
  transition: box-shadow .4s;
}
.up-mitte__bild { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(61,220,132,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.6)) }
.up-mitte__bild[hidden] { display: none }
.up-mitte__mult {
  font-family: var(--font-disp);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 0 24px rgba(61,220,132,.45);
}
.up-mitte--bild .up-mitte__mult { font-size: 1.15rem }
.up-mitte__chance { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.up-rad--treffer .up-mitte { box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 0 70px -4px rgba(61,220,132,.85) }
.up-rad--fehl .up-ring__treffer { opacity: .4 }
.up-rad--fehl .up-mitte__mult { color: var(--red-ink); text-shadow: none }

/* Handy: kleineres Rad, zwei Spalten im Raster, alles gestapelt (Buehne zuerst kommt aus index.html). */
@media (max-width: 600px) {
  .up-buehne { padding-top: 24px }
  /* 375 px Geraet: 320 px Karte minus Rand — das Rad bleibt rund und passt ohne Querscrollen. */
  .up-rad { width: min(260px, calc(100vw - 72px)); height: min(260px, calc(100vw - 72px)) }
  .up-mitte { inset: 42px }
  .up-mitte__bild { width: 72px; height: 72px }
  .up-mitte__mult { font-size: 1.5rem }
  .up-items { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 260px }
  .up-werte { grid-template-columns: 1fr }
}

@media (prefers-reduced-motion: reduce) {
  .up-ring--dreht { transition: none }
  .up-rad--wartet .up-mitte { animation: none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANDY-FEINSCHLIFF (v3.61) — Spielseiten unter 600 px
   ───────────────────────────────────────────────────────────────────────────
   Buehne oben (index.html), Bedienfeld darunter. Damit man ohne Scrollen
   spielen kann, klebt der Play-Knopf am unteren Rand ueber der Navigations-
   leiste (--handy-leiste aus design.css). Schnellbetraege als 4er-Raster,
   alle Knoepfe 44 px, Ergebnis-Karten hoechstens 92 vw.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .spiel-layout { gap: var(--s3) }
  .spiel-buehne[data-g] { min-height: 320px }
  .spiel-titel__knoepfe { width: 100% }
  .spiel-titel__knoepfe .btn { flex: 1; min-height: 40px }

  /* Schnellbetraege: vier gleich breite Felder statt Flex-Umbruch mit
     ungleichen Resten. Gilt auch fuer Limbo-/Upgrader-Ziele und Duel. */
  .quick-bets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
  .quick-bets .quick-bet { min-height: 44px; padding: 0 4px }
  .einsatz-schnell .quick-bet { min-height: 44px; min-width: 44px; padding: 0 8px }
  .einsatz-feld .input { min-height: 44px }

  /* Play/Bet/Flip und Cash-out kleben unten — innerhalb ihrer Karte, also
     nur solange die Karte im Bild ist; sonst stuenden zwei Knoepfe
     uebereinander. Der Schatten hebt ihn vom Inhalt ab, der darunter
     durchlaeuft. */
  /* v3.86: #up-los ist ausgenommen. Die Upgrader-Karte traegt Modus-Reiter,
     Zielfeld, Schieber und Gewinnflaeche ueber dem Knopf — beim Scrollen legte
     sich der klebende Knopf genau darauf (gemessen: 4 px auf die Reiter,
     12 px auf das Zielfeld). Eingaben sehen zu koennen wiegt hier schwerer
     als ein immer erreichbarer Knopf; die Karte ist kurz genug. */
  /* v4.24 (D25): bottom nur noch 8 px. Der Abstand zaehlt ab der Innenkante
     des Scrollers, und #content haelt mit padding-bottom (design.css,
     handy-leiste + 16 px) die untere Leiste schon frei — mit handy-leiste
     hier dazu stand der Knopf doppelt so hoch (160 px ueber dem Rand), lag
     auf den Wettoptionen und unter dem Chat-Knopf. */
  .spiel-steuer .btn.btn-play:not(#up-los), .spiel-steuer .steuer-karte .btn.btn-success {
    position: sticky;
    bottom: 8px;
    z-index: 5;
    box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -6px rgba(0,0,0,.85), 0 6px 18px -8px rgba(61,220,132,.7);
  }
  /* v4.24 (D80): ein gesperrter Knopf, der ueber dem Inhalt klebt, muss
     deckend sein — mit opacity .85 schien der Text darunter durch die
     Beschriftung („NO MO…RE BETS"). Gedaempft wird er per filter statt per
     Durchsicht. Roulette (#rl-drehen) klebt weiter: die Leiste mit „Place
     bets" unter dem Tisch klebt nicht, ohne ihn gaebe es beim Scrollen
     keinen erreichbaren Setzen-Knopf. */
  .spiel-steuer .btn.btn-play:not(#up-los):disabled { opacity: 1; filter: saturate(.35) brightness(.75) }
  .steuer-karte .btn { min-height: 44px }

  .payline-info { padding-right: 56px }
  /* Derselbe Grund beim UPGRADE-Knopf: er lief bis zum Kartenrand, und der
     Chat-Knopf (fixed, 44 px, rechts 12 px) lag beim Scrollen auf seinem
     rechten Ende — ein Tipp dorthin oeffnete den Chat statt zu spielen.
     Ein fester Knopf laesst sich nicht wegscrollen, also weicht der andere
     aus: 34 px schmaler, dann beruehren sich die beiden nie mehr. */
  .up-karte #up-los { width: calc(100% - 34px) }

  /* Ergebnis-Einblendung: nie breiter als das Handy, Zahl etwas kleiner. */
  .buehne-ergebnis { max-width: 92vw; padding: 10px 16px }
  .buehne-ergebnis__mult { font-size: 1.9rem }
}

/* ── Handy-Kopf (v3.89) ─────────────────────────────────────────────────────
   Vorher standen auf einem 375-px-Schirm fuenf Zeilen ueber dem Spielfeld:
   Pfeil, Titel, zwei Zeilen Chips und die beiden Knoepfe als volle Breite —
   rund 280 px, bevor man ueberhaupt etwas vom Spiel sah. „Stats" und
   „Provably Fair" sind hier Symbolknoepfe neben dem Titel; ihre Beschriftung
   bleibt im Text stehen (font-size: 0), damit Vorleseprogramme sie behalten. */
@media (max-width: 600px) {
  .spiel-titel__text { flex: 1 1 auto }
  /* Die beiden Symbolknoepfe sitzen oben rechts NEBEN dem Titel statt in
     einer eigenen Zeile darunter — die Chips laufen darunter durch. */
  .spiel-banner.spiel-titel { position: relative; padding-right: 86px }
  .spiel-titel__knoepfe { position: absolute; top: 0; right: 0; width: auto; margin-left: 0 }
  .spiel-titel__knoepfe .btn {
    flex: 0 0 auto;
    width: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .spiel-titel__knoepfe .btn .ico { width: 17px; height: 17px }
  /* Auf dem Handy traegt der Kopf nur den Spielnamen — „DonutHugoBet" davor
     schob die Zeile ueber die Breite und zwang alles darunter in eigene
     Zeilen. Der Markenname bleibt im Text (font-size: 0), nur eben unsichtbar. */
  .spiel-titel__name { font-size: 0 }
  .spiel-titel__name span { font-size: 1.25rem }
}