/* =============================================================================
   Casino in der Lobby (CASINO.md): Eingang in der Lobby, eigene Ansicht mit Kopf,
   Reitern, Spielflächen, Einsatzfeld, Gewinn-Vorschau, Übersicht und Rekorden.
   Nur Spielgeld. Farben ausschließlich aus One-UI-Tokens.
   ============================================================================= */

/* ---------------------------------------------------------------- Leuchtreklame (C15)
   Rotes Schild mit Glühbirnen-Rahmen (casino.js setzt die Birnen, CSS lässt das Licht
   laufen), innen eine dunkle Tafel. Schild und Kopf tragen data-ou-theme="dark": sie
   bleiben in beiden Themes dunkel wie eine echte Leuchtreklame. */
.cz-marquee {
  --cz-lit: var(--ou-yellow);
  --cz-dim: color-mix(in srgb, var(--ou-cream) 38%, var(--ou-red));
  position: relative;
  padding: 22px;
  border-radius: var(--ou-radius);
  background: var(--ou-red);
  box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--ou-black) 24%, var(--ou-red));
}
.cz-bulbs { position: absolute; inset: 0; pointer-events: none; }
.cz-bulb {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--cz-dim);
  animation: cz-chase 1.4s steps(1, end) infinite;
  animation-delay: calc((1000 - var(--i)) * -0.175s);
}
@keyframes cz-chase { 0% { background: var(--cz-lit); } 25%, 100% { background: var(--cz-dim); } }

/* ---------------------------------------------------------------- Eingang in der Lobby
   Ruhige Lobby-Karte (Lobby-Umbau 2026-09-24): Guthaben, Knopf ins Casino und die Spiele als
   kleine Bildkarten, die direkt hineinspringen. Die Leuchtreklame gibt es nur im Casino. */
.cz-sign-crown { height: auto; transform: rotate(-6deg); }
.lobby-casino-tag { color: var(--ou-muted); font-size: .75rem; }
.lobby-casino-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.lobby-casino-cash { display: grid; gap: 2px; }
.lobby-casino-cash span { color: var(--ou-muted); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.lobby-casino-cash b { font: 400 2rem/1 var(--ou-font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.lobby-casino-cash b.is-up { animation: cz-flash-up 900ms var(--ou-ease); }
.lobby-casino-cash b.is-down { animation: cz-flash-down 700ms var(--ou-ease); }
.cz-sign-games { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cz-sign-game {
  display: grid;
  gap: 4px;
  padding: 4px 4px 6px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
  color: var(--ou-text);
  font: 600 .6875rem/1.2 var(--ou-font-body);
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  transition: border-color var(--ou-dur-fast) var(--ou-ease), transform var(--ou-dur-fast) var(--ou-ease);
}
button.cz-sign-game:hover { border-color: var(--ou-primary); transform: translateY(-1px); }
.cz-sign-game.is-soon { opacity: .5; }
.cz-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: calc(var(--ou-radius-sm) - 2px); }
.lobby-casino-record { margin-top: 10px; color: var(--ou-muted); font-size: .8125rem; line-height: 1.4; }
.lobby-casino-record b { color: var(--ou-yellow-ink); }
@media (max-width: 559px) {
  .cz-marquee { padding: 16px; }
  .cz-sign-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Ansicht: Kopf als Schild */
@media (min-width: 720px) { #casinoView { max-width: 1180px; } }
.cz-bar { padding: 16px; margin-bottom: 16px; }
.cz-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 14px;
  border-radius: var(--ou-radius-sm);
  background: var(--ou-black);
  color: var(--ou-text);
}
.cz-brand { display: flex; align-items: center; gap: 10px; }
.cz-brand .cz-sign-crown { width: 42px; }
.cz-title { margin: 0; color: var(--ou-cream); font-size: clamp(2rem, 7vw, 2.6rem); letter-spacing: .14em; }
.cz-money-tag { padding: 2px 8px; border: 1px dashed var(--ou-line-strong); border-radius: var(--ou-radius-sm); color: var(--ou-yellow); font: 600 .6875rem/1.4 var(--ou-font-body); letter-spacing: .06em; text-transform: uppercase; }
.cz-head-spacer { flex: 1; }
/* Handy: Zeile 1 Lobby und Schriftzug, Zeile 2 Guthaben und Knöpfe */
@media (max-width: 559px) {
  .cz-head { gap: 10px; padding: 10px 12px; }
  .cz-head-spacer { flex-basis: 100%; height: 0; }
  .cz-brand .cz-sign-crown { width: 32px; }
  .cz-title { font-size: 1.9rem; letter-spacing: .1em; }
  .cz-money-tag { display: none; }
}
.cz-wallet {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0 10px;
  padding: 6px 14px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
  color: var(--ou-text);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
.cz-wallet:hover { border-color: var(--ou-yellow); }
.cz-wallet-label { color: var(--ou-muted); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.cz-wallet-cents { grid-row: span 2; font: 400 2rem/1 var(--ou-font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cz-wallet-delta { color: var(--ou-muted); font: 600 .75rem/1.2 var(--ou-font-body); font-variant-numeric: tabular-nums; }
.cz-wallet-delta:empty { display: none; }
[data-tone="up"] { color: var(--ou-green-ink); }
[data-tone="down"] { color: var(--ou-red-ink); }
@media (max-width: 559px) {
  .cz-wallet { grid-template-columns: auto; padding: 5px 12px; }
  .cz-wallet-cents { grid-row: auto; font-size: 1.6rem; }
}
.cz-wallet-cents.is-up { animation: cz-flash-up 900ms var(--ou-ease); }
.cz-wallet-cents.is-down { animation: cz-flash-down 700ms var(--ou-ease); }
@keyframes cz-flash-up { 0%, 60% { color: var(--ou-green-ink); } }
@keyframes cz-flash-down { 0%, 50% { color: var(--ou-red-ink); } }
.cz-refill.hidden { display: none; }

/* Spielauswahl als Karten mit Bild (Handy: zum Wischen) */
.cz-gamecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (max-width: 719px) {
  .cz-gamecards { display: flex; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cz-gamecards::-webkit-scrollbar { display: none; }
  .cz-gamecard { flex: 0 0 62%; scroll-snap-align: start; }
}
.cz-gamecard {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
  color: var(--ou-text);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color var(--ou-dur-fast) var(--ou-ease), transform var(--ou-dur-fast) var(--ou-ease);
}
button.cz-gamecard:hover { border-color: var(--ou-text); transform: translateY(-2px); }
.cz-gamecard .cz-art { border-radius: 0; }
.cz-gamecard-body { display: grid; gap: 2px; padding: 10px 12px 12px; }
.cz-gamecard-name { font: 400 1.5rem/1 var(--ou-font-display); letter-spacing: .03em; }
.cz-gamecard-pitch { color: var(--ou-muted); font-size: .8125rem; }
.cz-gamecard-status { color: var(--ou-green-ink); font: 700 .75rem/1.3 var(--ou-font-body); }
.cz-gamecard-status:empty { display: none; }
.cz-gamecard.is-on { border-color: var(--ou-primary); box-shadow: 0 0 0 2px var(--ou-primary); }
.cz-gamecard.is-on::after {
  content: 'Du spielst';
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: var(--ou-radius-sm);
  background: var(--ou-primary);
  color: var(--ou-black);
  font: 700 .6875rem/1.4 var(--ou-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(3deg);
}
.cz-gamecard.is-soon { opacity: .55; }
.cz-gamecard.is-soon .cz-gamecard-status { color: var(--ou-yellow-ink); letter-spacing: .06em; text-transform: uppercase; }

/* Laufband mit den großen Gewinnen */
.cz-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 9px 14px;
  overflow: hidden;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-black);
  color: var(--ou-cream);
  font-size: var(--ou-fs-sm);
}
.cz-ticker-label { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--ou-yellow); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.cz-ticker-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent); mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent); }
.cz-ticker-run { display: inline-flex; gap: 40px; padding-right: 40px; white-space: nowrap; animation: cz-ticker var(--dur, 30s) linear infinite; }
.cz-ticker-run.is-static { animation: none; }
.cz-ticker:hover .cz-ticker-run { animation-play-state: paused; }
.cz-ticker-item b { color: var(--ou-yellow); }
@keyframes cz-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Handy: Überschrift über dem Band, damit mehr Text sichtbar ist */
@media (max-width: 559px) {
  .cz-ticker { flex-wrap: wrap; gap: 6px 14px; }
  .cz-ticker-track { flex-basis: 100%; }
}

/* Spielfläche: 3D links, Bedienung rechts (Handy: untereinander) */
.cz-game.hidden { display: none; }
.cz-game-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .cz-game-grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); align-items: stretch; gap: 24px; } }
.cz-visual { position: relative; margin: 0; }
.cz-visual-inner {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius);
  background: var(--ou-surface-2);
}
@media (min-width: 900px) {
  .cz-visual { align-self: stretch; }
  .cz-visual-inner { aspect-ratio: auto; height: 100%; min-height: 480px; }
}
.cz-visual canvas.cz-scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ou-ease); }
#slotScene { cursor: pointer; }
.cz-visual.is-3d canvas.cz-scene { opacity: 1; }
.cz-visual.is-3d .slot-reels2d, .cz-visual.is-3d .hilo-2d { opacity: 0; }
.cz-visual.is-shake .cz-visual-inner { animation: cz-shake 520ms cubic-bezier(.36, .07, .19, .97) both; }
@keyframes cz-shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-6px, 2px); }
  40%, 60% { transform: translate(6px, -1px); }
}

/* Automat ohne WebGL: 2D-Walzen */
.slot-reels2d {
  position: absolute;
  inset: 50% 12% auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 8px solid var(--ou-red);
  border-radius: var(--ou-radius);
  background: var(--ou-black);
  transform: translateY(-50%);
  transition: opacity 600ms var(--ou-ease);
}
.slot-reels2d canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--ou-radius-sm); }

/* Gewinn-Einblendung über der Maschine: Papier-Sticker, ab Jackpot roter Stempel */
.cz-win {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 58%;
  padding: 16px 22px 18px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-cream);
  color: var(--ou-black);
  box-shadow: var(--ou-drop);
  transform: translate(-50%, -50%) rotate(-3deg);
  pointer-events: none;
}
.cz-win.hidden { display: none; }
.cz-win-title { font: 400 clamp(1.75rem, 5vw, 2.5rem)/1 var(--ou-font-display); letter-spacing: .03em; text-transform: uppercase; }
.cz-win-amount { font: 400 clamp(2.5rem, 9vw, 4.25rem)/1 var(--ou-font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cz-win.is-big { background: var(--ou-yellow); }
.cz-win.is-jackpot { min-width: 70%; background: var(--ou-red); border-color: var(--ou-black); }
.cz-win.is-jackpot .cz-win-title { font-size: clamp(2.5rem, 8vw, 3.75rem); }

/* Bedienung */
.cz-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius);
  background: color-mix(in srgb, var(--ou-text) 3%, transparent);
}
.cz-panel-h {
  display: flex; align-items: center; gap: 8px; margin: 0;
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.cz-panel-h .icon { display: inline-flex; color: var(--ou-primary-ink); }

/* Einsatzfeld: Betrag tippen oder mit Pfeilen stufen, Schnellknöpfe ½, ×2, Max */
.cz-bet { display: grid; gap: 8px; }
.cz-bet-label { margin: 0; color: var(--ou-muted); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.cz-bet-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 6px; }
.cz-bet-step {
  padding: 0;
  border: 1px solid var(--ou-line-strong);
  background: var(--ou-surface);
  color: var(--ou-text);
}
.cz-bet-step:hover { border-color: var(--ou-text); }
.cz-bet-step .icon svg { width: 22px; height: 22px; }
.cz-bet-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-field-bg);
  font: 400 1.75rem/1 var(--ou-font-display);
}
.cz-bet-field:focus-within { border-color: var(--ou-text); }
.cz-bet-field .cz-bet-input {   /* spezifischer als der allgemeine input:not([type]) */
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 10px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ou-text);
  font: inherit;
  letter-spacing: .02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cz-bet-field .cz-bet-input:focus { border: 0; outline: none; box-shadow: none; }
.cz-bet.is-allin .cz-bet-field { border-color: var(--ou-primary); box-shadow: inset 0 0 0 1px var(--ou-primary); }
.cz-bet-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cz-bet-quick button {
  padding: 7px 4px;
  border: 1px solid var(--ou-line-strong);
  background: var(--ou-surface);
  color: var(--ou-text);
  font: 600 var(--ou-fs-sm)/1.2 var(--ou-font-body);
  letter-spacing: 0;
  text-transform: none;
}
.cz-bet-quick button:hover { border-color: var(--ou-text); }
.cz-bet-hint { min-height: 1.1em; color: var(--ou-muted); font-size: .8125rem; }
.cz-bet.is-allin .cz-bet-hint { color: var(--ou-primary-ink); font-weight: 600; }

.cz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cz-play { min-width: 160px; padding: 14px 24px; font-size: var(--ou-fs-md); }
.cz-result { flex: 1 1 160px; min-width: 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); line-height: 1.35; }
.cz-panel > .cz-result { flex: none; }   /* direkt im Bedienfeld keine Grundhöhe (die gilt nur in der Knopfzeile) */
.cz-result[data-tone="win"] { color: var(--ou-green-ink); font: 400 1.6rem/1.1 var(--ou-font-display); letter-spacing: .02em; }
.cz-result[data-tone="even"] { color: var(--ou-text); }

/* Gewinn-Vorschau zum aktuellen Einsatz */
.cz-preview { display: grid; gap: 8px; }
.cz-preview-h { color: var(--ou-muted); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.slot-pay { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px; }
.slot-pay-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface);
}
.slot-pay-sym { width: 40px; height: 40px; flex: none; border-radius: var(--ou-radius-sm); }
.slot-pay-txt { display: grid; min-width: 0; gap: 1px; font-size: .8125rem; line-height: 1.25; }
.slot-pay-name { color: var(--ou-muted); font-weight: 600; }
.slot-pay-row { display: flex; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot-pay-row b { color: var(--ou-muted); font-weight: 700; }

/* ---------------------------------------------------------------- Higher-Lower */
@media (max-width: 899px) { .cz-game[data-game="hilo"] .cz-visual-inner { aspect-ratio: 4 / 3; } }
.hilo-2d { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 16px; transition: opacity 600ms var(--ou-ease); }
.hilo-2d canvas#hilo2dCard { width: min(46%, 220px); height: auto; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--ou-black) 45%, transparent)); }
.hilo-2d-hist { display: flex; gap: 6px; }
.hilo-mini { width: 40px; height: auto; }
.hilo-flash {
  position: absolute;
  top: 16%;
  left: 50%;
  z-index: 3;
  padding: 8px 18px;
  border: 2px solid currentColor;
  border-radius: var(--ou-radius-sm);
  background: var(--ou-cream);
  font: 400 clamp(1.75rem, 5vw, 2.5rem)/1 var(--ou-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-4deg);
  pointer-events: none;
}
.hilo-flash.hidden { display: none; }
.hilo-flash.is-win { color: var(--ou-green-ink); }
.hilo-flash.is-tie { color: var(--ou-black); }
.hilo-flash.is-lose { color: var(--ou-red-ink); }
.hilo-pot { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; }
.hilo-pot-label { color: var(--ou-muted); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.hilo-pot b { font: 400 3rem/1 var(--ou-font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hilo-steps { grid-column: 1 / -1; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.hilo-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hilo-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon mult" "pot pot" "chance chance";
  align-items: center;
  justify-items: start;
  gap: 2px 10px;
  padding: 12px 14px;
  border: 1px solid var(--ou-line-strong);
  background: var(--ou-surface);
  color: var(--ou-text);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
.hilo-choice:hover:not(:disabled) { border-color: var(--ou-primary); }
.hilo-choice:disabled { opacity: .45; }
.hilo-choice .icon { grid-area: icon; color: var(--ou-primary-ink); }
.hilo-choice .icon svg { width: 34px; height: 34px; }
.hilo-choice-label { grid-area: label; font: 400 1.75rem/1 var(--ou-font-display); letter-spacing: .02em; }
.hilo-choice-mult { grid-area: mult; color: var(--ou-primary-ink); font: 700 var(--ou-fs-md)/1.2 var(--ou-font-body); font-variant-numeric: tabular-nums; }
.hilo-choice-pot { grid-area: pot; font-weight: 600; font-variant-numeric: tabular-nums; }
.hilo-choice-chance { grid-area: chance; color: var(--ou-muted); font-size: .75rem; }
.hilo-keys { margin: 0; color: var(--ou-faint); font-size: .75rem; }
@media (hover: none), (pointer: coarse) { .hilo-keys { display: none; } }
/* Die beiden Zustände stapeln ihren Inhalt mit demselben Abstand wie das Feld selbst */
#hiloIdle, #hiloPlay { display: flex; flex-direction: column; gap: 14px; }
.hilo-examples { display: grid; gap: 6px; }
.hilo-ex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title mult" "how pot";
  gap: 2px 12px;
  padding: 8px 10px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface);
  font-size: .8125rem;
}
.hilo-ex b { grid-area: title; }
.hilo-ex span:nth-of-type(1) { grid-area: how; color: var(--ou-muted); }
.hilo-ex-mult { grid-area: mult; color: var(--ou-primary-ink); font-weight: 700; text-align: right; }
.hilo-ex-pot { grid-area: pot; font: 400 1.25rem/1 var(--ou-font-display); letter-spacing: .02em; text-align: right; font-variant-numeric: tabular-nums; }
.hilo-rules { margin: 4px 0 0; color: var(--ou-muted); font-size: .8125rem; line-height: 1.45; }

/* ---------------------------------------------------------------- Roulette (Etappe 3)
   Kessel in 3D (ohne WebGL 2D), Bedienfeld rechts, darunter der Tisch als SVG über die
   ganze Breite (Handy hochkant) und die eigenen Einsätze mit dem Tisch daneben. Der Filz
   bleibt in beiden Themes dunkelgrün wie ein echter Tisch. */
.rl-2d { position: absolute; inset: 8%; display: grid; place-items: center; transition: opacity 600ms var(--ou-ease); }
.rl-2d canvas { width: 100%; max-width: 440px; height: auto; aspect-ratio: 1; border-radius: 50%; }
.rl-2d-pointer { position: absolute; top: -2px; left: 50%; width: 0; height: 0; border: 12px solid transparent; border-top: 18px solid var(--ou-yellow); transform: translateX(-50%); }
.cz-visual.is-3d .rl-2d { opacity: 0; }

/* Uhr (Setzzeit) als Papier-Sticker oben links, Ergebnis als Stempel oben rechts */
.rl-clock {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: grid;
  justify-items: center;
  min-width: 76px;
  padding: 8px 10px 6px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-cream);
  color: var(--ou-black);
  transform: rotate(-4deg);
  pointer-events: none;
}
.rl-clock b { font: 400 2.6rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; }
.rl-clock span { font: 700 .6875rem/1.3 var(--ou-font-body); letter-spacing: .08em; text-transform: uppercase; }
.rl-clock.is-hurry { background: var(--ou-red); color: var(--ou-cream); }
.rl-clock.hidden { display: none; }
.rl-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  justify-items: center;
  min-width: 92px;
  padding: 10px 14px 8px;
  border: 3px solid var(--ou-cream);
  border-radius: var(--ou-radius);
  color: var(--ou-cream);
  transform: rotate(4deg);
  pointer-events: none;
}
.rl-stamp b { font: 400 3.4rem/.95 var(--ou-font-display); font-variant-numeric: tabular-nums; }
.rl-stamp span { font: 700 .75rem/1.3 var(--ou-font-body); letter-spacing: .08em; text-transform: uppercase; }
.rl-stamp.is-red { background: var(--ou-red); }
.rl-stamp.is-black { background: var(--ou-black); }
.rl-stamp.is-green { background: color-mix(in srgb, var(--ou-green) 70%, var(--ou-black)); }
.rl-stamp.hidden { display: none; }

/* Stand der Runde mit Zeitbalken */
.rl-status { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); }
.rl-status-text { font-weight: 600; }
.rl-timer { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--ou-line); }
.rl-timer-bar { display: block; height: 100%; background: var(--ou-yellow); transform: scaleX(0); transform-origin: left; transition: transform 250ms linear; }
.rl-status[data-phase="spinning"] .rl-status-text, .rl-status[data-phase="result"] .rl-status-text { color: var(--ou-primary-ink); }
.rl-status[data-phase="paused"] .rl-status-text { color: var(--ou-muted); }

.rl-join, .rl-seatbox { display: flex; flex-direction: column; gap: 14px; }
.rl-join.hidden, .rl-seatbox.hidden { display: none; }
.rl-join-text { margin: 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); line-height: 1.5; }
.rl-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1100px) { .rl-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rl-tools button { justify-content: center; }
#rlReady.is-on { background: var(--ou-green); border-color: var(--ou-green); color: var(--ou-black); }

/* Tisch */
.rl-board { display: grid; gap: 12px; margin-top: 18px; padding: 14px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius); background: var(--ou-surface); }
.rl-board-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rl-board-head .cz-preview-h { margin: 0; }
.rl-hint { flex: 1; min-width: 180px; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.rl-history { display: flex; gap: 6px; min-height: 36px; padding: 3px; overflow: hidden; }
.rl-hist {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ou-radius-sm);
  color: var(--ou-cream);
  font: 400 1.05rem/1 var(--ou-font-display);
  font-variant-numeric: tabular-nums;
}
.rl-hist.is-red { background: var(--ou-red); }
.rl-hist.is-black { background: var(--ou-black); border: 1px solid var(--ou-line-strong); }
.rl-hist.is-green { background: color-mix(in srgb, var(--ou-green) 70%, var(--ou-black)); }
.rl-hist.is-last { width: 38px; outline: 2px solid var(--ou-yellow); outline-offset: 1px; }
.rl-history:empty::before { content: 'Noch keine Zahlen in dieser Session'; color: var(--ou-faint); font-size: var(--ou-fs-sm); align-self: center; }

.rl-felt {
  --rl-felt: color-mix(in srgb, var(--ou-green) 48%, var(--ou-black));
  overflow: auto;
  padding: 10px;
  border-radius: var(--ou-radius-sm);
  background: var(--rl-felt);
  -webkit-tap-highlight-color: transparent;
}
.rl-svg { display: block; width: 100%; height: auto; outline: none; user-select: none; }
.rl-felt.is-vertical .rl-svg { max-width: 420px; margin: 0 auto; }
.rl-felt.is-zoom .rl-svg { width: 165%; max-width: none; }
.rl-felt.is-vertical.is-zoom .rl-svg { width: 150%; }
.rl-cell { cursor: pointer; outline: none; }
.rl-cell rect { fill: transparent; stroke: color-mix(in srgb, var(--ou-cream) 55%, transparent); stroke-width: 1.5; transition: stroke 120ms var(--ou-ease); }
.rl-num.is-red rect { fill: var(--ou-red); }
.rl-num.is-black rect { fill: var(--ou-black); }
.rl-num.is-green rect { fill: color-mix(in srgb, var(--ou-green) 70%, var(--ou-black)); }
.rl-cell-t { fill: var(--ou-cream); font: 400 26px var(--ou-font-display); letter-spacing: .02em; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rl-out .rl-cell-t { font: 700 15px var(--ou-font-body); letter-spacing: .04em; text-transform: uppercase; }
.rl-diamond { stroke: var(--ou-cream); stroke-width: 1.5; pointer-events: none; }
.rl-diamond.is-red { fill: var(--ou-red); }
.rl-diamond.is-black { fill: var(--ou-black); }
.rl-cell:hover rect, .rl-cell.is-hl rect, .rl-cell:focus-visible rect { stroke: var(--ou-yellow); stroke-width: 3.5; }
.rl-cell.is-win rect { stroke: var(--ou-yellow); stroke-width: 6; }
.rl-cell.is-win .rl-cell-t { fill: var(--ou-yellow); }
.rl-zone { fill: transparent; cursor: pointer; }
.rl-zone:hover { fill: color-mix(in srgb, var(--ou-yellow) 60%, transparent); }
.rl-chips { pointer-events: none; }
.rl-chip circle { stroke-width: 2; }
.rl-chip.is-mine circle { fill: var(--ou-red); stroke: var(--ou-cream); }
.rl-chip.is-mine .rl-chip-ring { fill: none; stroke: var(--ou-cream); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rl-chip.is-other circle { fill: var(--ou-cream); stroke: var(--ou-black); }
.rl-chip-t { fill: var(--ou-cream); font: 700 11px var(--ou-font-body); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.rl-chip.is-other .rl-chip-t { fill: var(--ou-black); }

/* Eigene Einsätze und wer am Tisch sitzt */
.rl-info { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 720px) { .rl-info { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.rl-info-card { gap: 10px; }
.rl-info-card .cz-preview-h { margin: 0; }
.rl-mine, .rl-seat-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rl-mine li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ou-line); font-size: var(--ou-fs-sm); }
.rl-mine-amt { font-variant-numeric: tabular-nums; }
.rl-mine-win { min-width: 9.5em; color: var(--ou-green-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rl-mine li.rl-mine-total { border-bottom: 0; font-weight: 700; }
.rl-mine li.rl-mine-empty, .rl-seat-list li.rl-seat-empty { display: block; border: 0; color: var(--ou-faint); }
.rl-seat { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ou-line); font-size: var(--ou-fs-sm); }
.rl-seat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-seat.is-me .rl-seat-name { color: var(--ou-primary-ink); font-weight: 700; }
.rl-seat-info { font-variant-numeric: tabular-nums; }
.rl-seat .icon { color: var(--ou-green-ink); }
@media (max-width: 559px) { .rl-mine-win { min-width: 0; } }

/* ---------------------------------------------------------------- Blackjack (Etappe 4)
   Tisch in 3D mit Dealer und den eigenen Händen (ohne WebGL 2D), Bedienfeld rechts,
   darunter alle Hände am Tisch. Status, Uhr, Beitritt und Tischkopf teilen die Stile
   des Roulettes (.rl-status, .rl-clock, .rl-join, .rl-board). */
.bj-2d { position: absolute; inset: 0; display: grid; align-content: center; gap: 28px; padding: 16px; transition: opacity 600ms var(--ou-ease); }
.bj-2d-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; min-height: 60px; }
.bj-2d-hand { display: flex; }
.cz-visual.is-3d .bj-2d { opacity: 0; }
.bj-card { display: block; flex: none; width: var(--w, 46px); height: auto; }
.bj-2d-hand .bj-card + .bj-card, .bj-hand .bj-card + .bj-card { margin-left: calc(var(--w, 46px) * -0.42); }
.bj-2d-row > .bj-card + .bj-card { margin-left: calc(var(--w, 46px) * -0.3); }
.bj-badge {
  position: absolute;
  left: 50%;
  z-index: 2;
  padding: 4px 12px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-cream);
  color: var(--ou-black);
  font: 400 1.35rem/1.1 var(--ou-font-display);
  letter-spacing: .03em;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-1.5deg);
  pointer-events: none;
}
.bj-badge.is-dealer { top: 14px; }
.bj-badge.is-me { bottom: 26px; background: var(--ou-yellow); transform: translateX(-50%) rotate(1.5deg); }
.bj-badge.hidden { display: none; }

.bj-betbox, .bj-actbox { display: flex; flex-direction: column; gap: 14px; }
.bj-betbox.hidden, .bj-actbox.hidden { display: none; }
.bj-pay { margin: 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); line-height: 1.45; }
.bj-hand-info { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bj-hand-info:empty { display: none; }
.bj-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bj-act { justify-content: center; padding: 14px 12px; font-size: var(--ou-fs-md); }
.bj-leave { align-self: flex-start; }

/* Alle Hände am Tisch */
.bj-players { display: grid; gap: 8px; }
.bj-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
}
.bj-row.is-me { border-color: var(--ou-primary); }
.bj-row.is-me .bj-row-name { color: var(--ou-primary-ink); }
.bj-row.is-dealer { border-color: transparent; background: color-mix(in srgb, var(--ou-green) 48%, var(--ou-black)); color: var(--ou-cream); }
.bj-row-name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.bj-row-info { font-size: var(--ou-fs-sm); text-align: right; font-variant-numeric: tabular-nums; }
.bj-row:not(.is-dealer) .bj-row-info:not([data-tone]) { color: var(--ou-muted); }
.bj-row-hands { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 10px 18px; }
.bj-row-hands:empty { display: none; }
.bj-hand { display: inline-flex; align-items: center; padding: 4px 6px; border-radius: var(--ou-radius-sm); }
.bj-hand.is-active { outline: 2px solid var(--ou-yellow); }
.bj-hand.is-bust .bj-card { opacity: .55; }
.bj-hand-total { margin-left: 10px; font-size: var(--ou-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Shop (Etappe 5)
   Oben „Dein Look" und die Packs, darunter der Katalog. Seltenheit als Farbe:
   Gewöhnlich Stein, Selten Blau, Episch Rot, Legendär Gelb. Walkout als eigene dunkle Bühne. */
.cz-gamecard[data-game="shop"].is-on::after { content: 'Geöffnet'; }
[data-rarity="common"] { --rar: var(--ou-stone); }
[data-rarity="rare"] { --rar: var(--ou-blue); }
[data-rarity="epic"] { --rar: var(--ou-red); }
[data-rarity="legendary"] { --rar: var(--ou-yellow); }

.shop-top { display: grid; gap: 16px; }
@media (min-width: 900px) { .shop-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; } }
.shop-note { margin: 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); line-height: 1.45; }
.shop-look { display: grid; place-items: center; min-height: 96px; padding: 18px; border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); }
.shop-tile { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.shop-tile .avatar { background: color-mix(in srgb, var(--ou-red) 18%, var(--ou-surface-2)); }
.shop-tile-name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.shop-tile.is-big { gap: 14px; }
.shop-tile.is-big .avatar { width: 52px; height: 52px; font-size: 1.9rem; }
.shop-tile.is-big .shop-tile-name { font: 400 2rem/1 var(--ou-font-display); letter-spacing: .03em; }
.shop-slots { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.shop-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--ou-line); font-size: var(--ou-fs-sm); }
.shop-slot-label { width: 7.5em; color: var(--ou-muted); }
.shop-slot-item { flex: 1; min-width: 0; font-weight: 600; }

.shop-packs { display: grid; gap: 10px; }
.shop-pack { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--ou-line); border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); }
@media (max-width: 559px) { .shop-pack { grid-template-columns: auto minmax(0, 1fr); } .shop-pack-buy { grid-column: 1 / -1; justify-content: center; } }
.shop-pack-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 74px;
  border-radius: 4px;
  background: linear-gradient(var(--ou-yellow) 0 16%, var(--ou-cream) 16% 100%);
  color: var(--ou-red);
  transform: rotate(-5deg);
}
.shop-pack.is-big .shop-pack-art { background: linear-gradient(var(--ou-red) 0 16%, var(--ou-black) 16% 100%); color: var(--ou-yellow); }
.shop-pack-art img { position: absolute; top: 18%; width: 30px; }
.shop-pack-art b { position: absolute; bottom: 8%; font: 400 1.5rem/1 var(--ou-font-display); }
.shop-pack-body { display: grid; gap: 2px; min-width: 0; }
.shop-pack-name { font: 400 1.4rem/1 var(--ou-font-display); letter-spacing: .03em; }
.shop-pack-desc { color: var(--ou-muted); font-size: var(--ou-fs-sm); }

.shop-filter { flex-wrap: wrap; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.shop-item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--ou-line);
  border-top: 4px solid var(--rar);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
}
.shop-item.is-on { border-color: var(--ou-primary); box-shadow: 0 0 0 1px var(--ou-primary); }
.shop-prev { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 76px; padding: 14px; background: color-mix(in srgb, var(--ou-black) 55%, var(--ou-surface-2)); color: var(--ou-cream); }
.shop-prev > .icon { color: var(--rar); font-size: 1.4rem; }
.shop-item-body { display: grid; align-content: start; gap: 3px; padding: 10px 12px; }
.shop-rarity { color: var(--rar); font: 700 .6875rem/1.3 var(--ou-font-body); letter-spacing: .08em; text-transform: uppercase; }
.shop-item-name { font: 400 1.35rem/1.05 var(--ou-font-display); letter-spacing: .03em; }
.shop-item-desc { color: var(--ou-muted); font-size: .8125rem; line-height: 1.4; }
.shop-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 12px; }
.shop-price { font: 400 1.35rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; }
.shop-owned { color: var(--ou-green-ink); font-size: .8125rem; font-weight: 600; }

/* Walkout */
body.wo-open { overflow: hidden; }
.wo {
  --rar: var(--ou-stone);
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: color-mix(in srgb, var(--ou-black) 95%, transparent);
  color: var(--ou-cream);
}
.wo.hidden { display: none; }
.wo-stage { position: relative; display: grid; place-items: center; overflow: hidden; padding: 16px; }
.wo-beams {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190vmax;
  height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  background: repeating-conic-gradient(from 0deg, var(--rar) 0 5deg, transparent 5deg 15deg);
  opacity: 0;
  transition: opacity 400ms var(--ou-ease);
  animation: wo-spin 18s linear infinite;
  pointer-events: none;
}
.wo[data-rarity="common"] .wo-beams { opacity: .06; }
.wo[data-rarity="rare"] .wo-beams { opacity: .14; }
.wo[data-rarity="epic"] .wo-beams { opacity: .2; animation-duration: 10s; }
.wo[data-rarity="legendary"] .wo-beams { opacity: .3; animation-duration: 6s; }
@keyframes wo-spin { to { transform: rotate(360deg); } }
.wo-pack {
  position: relative;
  display: grid;
  place-items: center;
  width: 180px;
  height: 250px;
  border-radius: 8px;
  background: linear-gradient(var(--ou-yellow) 0 15%, var(--ou-cream) 15% 100%);
  color: var(--ou-red);
  transform: rotate(-4deg);
  transition: transform 300ms var(--ou-ease), opacity 300ms var(--ou-ease);
}
.wo-pack.is-big { background: linear-gradient(var(--ou-red) 0 15%, var(--ou-black) 15% 100%); color: var(--ou-yellow); }
.wo-pack img { width: 90px; }
.wo-pack b { position: absolute; bottom: 18px; font: 400 2rem/1 var(--ou-font-display); letter-spacing: .06em; }
.wo-pack.is-shake { animation: wo-shake 1.1s cubic-bezier(.36, .07, .19, .97) both; }
.wo-pack.is-open { opacity: 0; transform: scale(1.35) rotate(4deg); }
.wo-pack.hidden, .wo-flash.hidden, .wo-card.hidden, .wo-summary.hidden { display: none; }
@keyframes wo-shake {
  10%, 90% { transform: translate(-2px, 1px) rotate(-5deg); }
  20%, 80% { transform: translate(4px, -2px) rotate(-2deg); }
  30%, 50%, 70% { transform: translate(-7px, 3px) rotate(-7deg); }
  40%, 60% { transform: translate(7px, -2px) rotate(-1deg); }
}
.wo-flash { position: relative; display: grid; justify-items: center; gap: 6px; }
.wo-flash b { color: var(--rar); font: 400 clamp(3.5rem, 14vw, 7rem)/1 var(--ou-font-display); letter-spacing: .06em; text-transform: uppercase; }
.wo-flash span { color: var(--ou-muted); font: 700 .875rem/1.3 var(--ou-font-body); letter-spacing: .12em; text-transform: uppercase; }
.wo-flash.is-common { --rar: var(--ou-stone); }
.wo-flash.is-rare { --rar: var(--ou-blue); }
.wo-flash.is-epic { --rar: var(--ou-red); }
.wo-flash.is-legendary { --rar: var(--ou-yellow); }
.wo-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(420px, 92vw);
  padding: 22px 22px 20px;
  border: 5px solid var(--rar);
  border-radius: var(--ou-radius);
  background: var(--ou-cream);
  color: var(--ou-black);
  text-align: center;
  transform: rotate(-1.5deg);
}
.wo-card.is-common { --rar: var(--ou-stone); }
.wo-card.is-rare { --rar: var(--ou-blue); }
.wo-card.is-epic { --rar: var(--ou-red); }
.wo-card.is-legendary { --rar: var(--ou-yellow); }
.wo-card-rarity { font: 700 .75rem/1.3 var(--ou-font-body); letter-spacing: .1em; text-transform: uppercase; }
.wo-card-prev { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 96px; padding: 16px; border-radius: var(--ou-radius-sm); background: var(--ou-black); color: var(--ou-cream); }
.wo-card-prev > .icon { color: var(--rar); font-size: 2rem; }
.wo-card-effect { font: 400 2rem/1 var(--ou-font-display); }
.wo-card-name { font: 400 2.6rem/1 var(--ou-font-display); letter-spacing: .03em; }
.wo-card-desc { color: color-mix(in srgb, var(--ou-black) 70%, var(--ou-cream)); font-size: var(--ou-fs-sm); }
.wo-card-new, .wo-card-dup { padding: 3px 10px; border-radius: var(--ou-radius-sm); font: 700 .75rem/1.4 var(--ou-font-body); letter-spacing: .06em; text-transform: uppercase; }
.wo-card-new { background: var(--ou-green); color: var(--ou-black); }
.wo-card-dup { background: var(--ou-black); color: var(--ou-yellow); }
.wo-summary { position: relative; display: grid; gap: 14px; width: min(760px, 94vw); }
.wo-sum-h { margin: 0; font: 400 2.2rem/1 var(--ou-font-display); letter-spacing: .04em; text-align: center; }
.wo-sum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.wo-sum-item { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--ou-line-strong); border-top: 4px solid var(--rar); border-radius: var(--ou-radius-sm); background: var(--ou-surface); }
.wo-sum-item b { font: 400 1.35rem/1.05 var(--ou-font-display); }
.wo-sum-state { color: var(--ou-muted); font-size: .8125rem; }
.wo-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 16px 16px 24px; }
.wo-bar .btn-primary { min-width: 200px; justify-content: center; }
.wo-stage.is-done ~ .wo-bar #woSkip { display: none; }
#woNext.is-waiting { opacity: .45; pointer-events: none; }

.cz-note { margin: 16px 0 0; color: var(--ou-faint); font-size: .75rem; line-height: 1.45; }

/* ---------------------------------------------------------------- Übersicht und Rekorde */
.cz-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--ou-black) 60%, transparent);
}
.cz-drawer.hidden { display: none; }
.cz-drawer-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88vh;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius) var(--ou-radius) 0 0;
  background: var(--ou-surface);
  animation: gh-rise var(--ou-dur) var(--ou-ease) both;
}
@media (min-width: 720px) {
  .cz-drawer { align-items: stretch; justify-content: flex-end; }
  .cz-drawer-card { width: min(520px, 92vw); max-height: none; border-radius: 0; }
}
.cz-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ou-line); }
.cz-drawer-title { margin: 0; font-size: 1.75rem; }
.cz-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }

.cz-wv-head { display: grid; gap: 4px; margin-bottom: 14px; }
.cz-wv-label { color: var(--ou-muted); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.cz-wv-cents { font: 400 3rem/1 var(--ou-font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cz-wv-delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.cz-wv-h { margin: 18px 0 8px; color: var(--ou-muted); font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.cz-wv-income { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; font-size: var(--ou-fs-sm); }
.cz-wv-income li { display: flex; align-items: flex-start; gap: 8px; }
.cz-wv-income .icon { display: inline-flex; margin-top: 2px; color: var(--ou-primary-ink); }
.cz-wv-stats { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.cz-wv-stats th { padding: 4px 6px; color: var(--ou-faint); font-weight: 600; text-align: left; }
.cz-wv-stats td { padding: 6px; border-top: 1px solid var(--ou-line); font-variant-numeric: tabular-nums; }
.cz-num { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.cz-wv-ledger { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.cz-wv-ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--ou-text) 4%, transparent); font-size: .8125rem; }
.cz-wv-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-wv-when { color: var(--ou-faint); font-size: .75rem; }

.cz-seg { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); }
.cz-seg-btn { padding: 6px 12px; border: 0; background: transparent; color: var(--ou-muted); font: 600 var(--ou-fs-sm)/1.2 var(--ou-font-body); letter-spacing: 0; text-transform: none; }
.cz-seg-btn.is-on { background: var(--ou-primary); color: var(--ou-black); }
.cz-rec-list { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.cz-rec-list li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; grid-template-areas: "rank name net" "rank info net"; align-items: center; gap: 0 10px; padding: 6px 10px; border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--ou-text) 4%, transparent); }
.cz-rec-rank { grid-area: rank; color: var(--ou-faint); font: 400 1.25rem/1 var(--ou-font-display); text-align: right; }
.cz-rec-list li.is-first .cz-rec-rank { color: var(--ou-yellow-ink); }
.cz-rec-name { grid-area: name; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cz-rec-info { grid-area: info; color: var(--ou-muted); font-size: .75rem; }
.cz-rec-info:empty { display: none; }
.cz-rec-net { grid-area: net; font: 400 1.35rem/1 var(--ou-font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cz-empty { margin: 0; color: var(--ou-faint); font-size: var(--ou-fs-sm); }

@media (prefers-reduced-motion: reduce) {
  .cz-visual canvas.cz-scene, .slot-reels2d, .hilo-2d, .rl-2d, .bj-2d { transition: none; }
  .rl-timer-bar { transition: none; }
  .cz-visual.is-shake .cz-visual-inner { animation: none; }
  .cz-wallet-cents.is-up, .cz-wallet-cents.is-down, .lobby-casino-cash b.is-up, .lobby-casino-cash b.is-down { animation: none; }
  .cz-bulb { animation: none; }
  .cz-bulb:nth-child(odd) { background: var(--cz-lit); }
  .cz-ticker-run { animation: none; }
  button.cz-sign-game:hover, button.cz-gamecard:hover { transform: none; }
  .cz-drawer-card { animation: none; }
  .wo-beams, .wo-pack.is-shake { animation: none; }
}

/* ---------------------------------------------------------------- Shop-Ausbau (AUSBAU.md, A12/A3/A4) */
.shop-views { flex-wrap: wrap; margin-bottom: 16px; }
.shop-view { display: grid; gap: 16px; }
.shop-view.hidden { display: none; }
.shop-prev-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.shop-prev-in > .icon { color: var(--rar); font-size: 1.4rem; }
.shop-tile-name.is-pose { display: inline-block; }
.shop-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.shop-badge { padding: 1px 6px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); color: var(--ou-muted); font: 700 .625rem/1.5 var(--ou-font-body); letter-spacing: .06em; text-transform: uppercase; }
.shop-badge.is-limited { border-color: color-mix(in srgb, var(--ou-yellow) 60%, transparent); color: var(--ou-yellow-ink); }
.shop-badge.is-theme { border-color: color-mix(in srgb, var(--ou-green) 60%, transparent); color: var(--ou-green-ink); }
.shop-badge.is-deal { border-color: var(--ou-red); background: var(--ou-red); color: var(--ou-cream); }
.shop-why { color: var(--ou-muted); font-size: .8125rem; font-weight: 600; }
.shop-was { color: var(--ou-faint); font-size: .8125rem; }
.shop-ends { color: var(--ou-yellow-ink); font-size: .75rem; font-weight: 600; }
.shop-pack.is-premium .shop-pack-art { background: linear-gradient(var(--ou-yellow) 0 16%, var(--ou-black) 16% 100%); color: var(--ou-yellow); }
.shop-pack.is-theme .shop-pack-art { background: linear-gradient(var(--ou-green) 0 16%, var(--ou-coal, var(--ou-black)) 16% 100%); color: var(--ou-cream); }
.shop-deal .shop-grid, .shop-drop .shop-grid { margin-top: 12px; }
/* Mini-Vorschauen der neuen Plätze */
.pc-card.shop-mini-card { width: 150px; max-height: none; padding: 12px 14px 22px; overflow: hidden; color: var(--ou-text); font: 400 1.25rem/1 var(--ou-font-display); text-transform: uppercase; }
.shop-mini-bubble { min-width: 120px; color: var(--ou-text); font-size: var(--ou-fs-sm); }
.shop-mini-bubble:not([data-cos-bubble-style]) .chat-text, .shop-mini-bubble .chat-text { display: inline-block; }
.pc-wall.shop-mini-wall { width: 160px; margin: 0; padding: 0; border: 0; }
.pc-wall.shop-mini-wall[data-cos-wall="cork"] { padding: 10px; }
.shop-mini-wall .pc-notes { gap: 6px; }
.shop-mini-wall .pc-note { padding: 6px 8px; }
/* Tauschbörse */
.trade-result:empty { display: none; }
.trade-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; }
.trade-form select, .trade-form input { flex: 1 1 160px; min-width: 0; }
.trade-list { display: grid; gap: 6px; }
.trade-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 9px 12px; border: 1px solid var(--ou-line); border-left: 4px solid var(--rar, var(--ou-line-strong)); border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); }
.trade-row.is-mine { border-style: dashed; border-left-style: solid; }
.trade-row.is-in.is-open { border-color: var(--ou-yellow); }
.trade-row.is-declined, .trade-row.is-cancelled, .trade-row.is-failed { opacity: .6; }
.trade-row-main { display: grid; gap: 2px; min-width: 0; }
.trade-meta { color: var(--ou-muted); font-size: .8125rem; }
.trade-row-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trade-result, .trade-result[data-tone] { margin: 0; font: 600 var(--ou-fs-sm)/1.45 var(--ou-font-body); letter-spacing: 0; text-transform: none; }
.pc-card.shop-mini-card[data-cos-card="paper"] { color: var(--ou-black); }