/* ─────────────────────────────────────────────────────────────────────────
   ui.css – Gemeinsame Casino-Styles
   Themes erben Variablen vom Hub (--bg, --surface, --accent, …) und
   ergänzen Casino-spezifische Variablen für Tisch-Filz, Gold und Chips.
   Alles Mobile-First, GPU-beschleunigte Transforms, keine Layout-Thrashes.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --casino-felt: radial-gradient(ellipse at 50% 0%, #1d4d34 0%, #0d3022 55%, #061a13 100%);
  --casino-felt-edge: #0a2418;
  --casino-gold: #f0c860;
  --casino-gold-dark: #b58a2a;
  --casino-bg-accent: rgba(240, 200, 96, 0.15);
  --casino-success: #5cf490;
  --casino-warn: #ffba5a;
  --casino-danger: #ff5c7d;
  /* Hintergrund-Glows: passen sich per Theme-Overrides an */
  --casino-glow-a: rgba(124,92,252,.12);
  --casino-glow-b: rgba(240,200,96,.08);

  /* Karten-Größe per vh limitieren, damit Dealer + Spieler-Hand zusammen
     auf iPad in den Viewport passen (keine vertikale Scroll-Notwendigkeit). */
  --casino-card-w: clamp(58px, 12vw, min(96px, 12vh));
  --casino-card-h: calc(var(--casino-card-w) * 1.417);
  --casino-chip-size: clamp(44px, 9vw, 60px);

  --casino-radius: 18px;
  --casino-radius-sm: 12px;
  --casino-radius-lg: 26px;
}

[data-theme="light"]:root, [data-theme="pastel"]:root, [data-theme="mint"]:root,
[data-theme="peach"]:root, [data-theme="sky"]:root {
  --casino-felt: radial-gradient(ellipse at 50% 0%, #2b5f44 0%, #1d4d34 55%, #0e3322 100%);
}

/* ── Hintergrund-Glow je Theme ──────────────────────────────────────── */
[data-theme="dark"]:root {
  --casino-glow-a: rgba(124,92,252,.12);
  --casino-glow-b: rgba(240,200,96,.08);
}
[data-theme="light"]:root {
  --casino-glow-a: rgba(109,63,245,.10);
  --casino-glow-b: rgba(240,200,96,.10);
  /* Gedämpft, mit deutlichem Kontrast für Text/UI */
  --bg: #c8c5d2 !important;
  --surface: #d6d3e0 !important;
  --surface2: #bcb8c8 !important;
  --border: rgba(0,0,0,.16) !important;
  --border2: rgba(0,0,0,.24) !important;
  --ink: #0e0c18 !important;
  --muted: #4d4866 !important;
}
[data-theme="pastel"]:root {
  --casino-glow-a: rgba(196,126,255,.18);
  --casino-glow-b: rgba(255,135,192,.12);
  --bg: #d6c4e6 !important;
  --surface: #e0d0ec !important;
  --surface2: #c8b2dc !important;
  --border: rgba(120,60,160,.18) !important;
  --ink: #20102e !important;
  --muted: #5a3f7a !important;
}
[data-theme="pastel-dark"]:root {
  --casino-glow-a: rgba(196,126,255,.16);
  --casino-glow-b: rgba(255,135,192,.10);
}
[data-theme="mint"]:root {
  --casino-glow-a: rgba(61,192,136,.14);
  --casino-glow-b: rgba(92,192,212,.10);
  --bg: #b8d8c6 !important;
  --surface: #c8e0d0 !important;
  --surface2: #a8c8b8 !important;
  --border: rgba(40,140,100,.22) !important;
  --ink: #0a2818 !important;
  --muted: #386858 !important;
}
[data-theme="mint-dark"]:root {
  --casino-glow-a: rgba(61,192,136,.16);
  --casino-glow-b: rgba(92,192,212,.10);
}
[data-theme="peach"]:root {
  --casino-glow-a: rgba(255,138,101,.16);
  --casino-glow-b: rgba(240,98,146,.10);
  --bg: #e6c4b0 !important;
  --surface: #eed0c0 !important;
  --surface2: #d8b298 !important;
  --border: rgba(180,80,40,.22) !important;
  --ink: #2c1208 !important;
  --muted: #7a4a38 !important;
}
[data-theme="peach-dark"]:root {
  --casino-glow-a: rgba(255,138,101,.16);
  --casino-glow-b: rgba(240,98,146,.10);
}
[data-theme="sky"]:root {
  --casino-glow-a: rgba(74,144,226,.16);
  --casino-glow-b: rgba(168,120,224,.10);
  --bg: #b6cce0 !important;
  --surface: #c6dae8 !important;
  --surface2: #a8becc !important;
  --border: rgba(40,90,160,.22) !important;
  --ink: #08182c !important;
  --muted: #3a5876 !important;
}
[data-theme="sky-dark"]:root {
  --casino-glow-a: rgba(74,144,226,.16);
  --casino-glow-b: rgba(168,120,224,.10);
}

/* ── Layout / Background ─────────────────────────────────────────────── */
/* Globaler Schutz gegen iOS-Doppeltipp-Zoom in allen Casino-Pages.
   manipulation = Scrollen + Pinch erlaubt, aber Double-Tap-Zoom blockiert. */
html, body.casino {
  touch-action: manipulation;
}
body.casino {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
body.casino::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 80% -10%, var(--casino-glow-a), transparent 50%),
    radial-gradient(ellipse at 20% 110%, var(--casino-glow-b), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.casino-page {
  position: relative; z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px)
           calc(env(safe-area-inset-right, 0px) + 16px)
           calc(env(safe-area-inset-bottom, 0px) + 24px)
           calc(env(safe-area-inset-left, 0px) + 16px);
}
@media (min-width: 980px) {
  .casino-page { max-width: 1180px; }
}

/* ── Top-Bar / HUD ───────────────────────────────────────────────────── */
.casino-topbar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border2);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.casino-back-btn {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, background .15s;
}
.casino-back-btn:active { transform: scale(.94); background: var(--accent); color: #fff; }
.casino-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  flex: 1;
}
.casino-topbar-actions {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.casino-icon-btn {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s;
  text-decoration: none;
  position: relative;
}
.casino-icon-btn:active { transform: scale(.92); }
.casino-icon-btn:hover { background: var(--surface); border-color: var(--border2); }
.casino-icon-btn.gold {
  background: linear-gradient(135deg, var(--casino-gold), var(--casino-gold-dark));
  border-color: transparent;
  color: #1a1408;
  box-shadow: 0 4px 12px rgba(240,200,96,.28);
}
.casino-icon-btn.gold:hover {
  background: linear-gradient(135deg, var(--casino-gold), var(--casino-gold-dark));
  filter: brightness(1.08);
}
/* Icon-Button mit Text-Label (z.B. Cashout) */
.casino-icon-btn.with-label {
  width: auto;
  min-width: 38px;
  padding: 0 12px;
  gap: 6px;
}
.casino-icon-btn.with-label .lbl {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
}
@media (max-width: 520px) {
  .casino-icon-btn.with-label .lbl { display: none; }
  .casino-icon-btn.with-label { padding: 0; width: 38px; }
}

/* ── Mobiles Menü + untere Balance-Leiste ────────────────────────────────
   Handy-Topbar: Zurück, Titel und ☰ Menü (rechts). Die Balance wandert in
   eine durchgehende untere Leiste mit einem kleinen Cashout-Knopf ganz links.
   Das Menü (Slide-in von rechts) bündelt Cashout, Leaderboard, Spielregeln,
   Konto, Design, Run zurücksetzen, Impressum + Online-Pille ganz unten.
   Aufgebaut & gesteuert von shared/casino-chrome.js.

   Das Handy-Layout wird auf ZWEI Wegen aktiv:
     1. Automatisch ab ≤600px – ABER nur, wenn der Nutzer das Format nicht
        ausdrücklich auf „Normal" (data-layout="desktop") gestellt hat.
     2. Erzwungen über data-layout="mobile" (Einstellung „Handy-Format"),
        unabhängig von der Bildschirmbreite (z. B. auf dem iPad).
   Die Format-Wahl (auto/desktop/mobile) liegt als data-layout auf <html>
   und wird von casino-chrome.js gesetzt. */
.casino-menu-panel, .casino-menu-backdrop, .casino-dock { display: none; }
.casino-menu-btn { display: none; }   /* nur im Handy-Format in der Topbar */

/* Gemeinsame Handy-Regeln. Sind absichtlich zweimal gelistet (Media-Query
   bzw. erzwungenes Mobile-Attribut), da CSS Selektor-Listen nicht teilen
   kann – inhaltlich identisch halten! */
@media (max-width: 600px) {
  :root:not([data-layout="desktop"]) .casino-topbar-actions > #btnLeaderboard,
  :root:not([data-layout="desktop"]) .casino-topbar-actions > #btnCashout,
  :root:not([data-layout="desktop"]) .casino-topbar-actions > #btnInfo,
  :root:not([data-layout="desktop"]) .casino-topbar-actions > #btnSettings,
  :root:not([data-layout="desktop"]) .casino-topbar-actions > #btnAccount,
  :root:not([data-layout="desktop"]) .casino-topbar-actions > #hubOnlinePill { display: none; }

  :root:not([data-layout="desktop"]) .casino-menu-btn { display: inline-flex; }
  :root:not([data-layout="desktop"]) body.casino { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
  :root:not([data-layout="desktop"]) .casino-menu-panel,
  :root:not([data-layout="desktop"]) .casino-dock { display: flex; }
}

/* Erzwungenes Handy-Format (z. B. iPad) – greift bei jeder Breite. */
:root[data-layout="mobile"] .casino-topbar-actions > #btnLeaderboard,
:root[data-layout="mobile"] .casino-topbar-actions > #btnCashout,
:root[data-layout="mobile"] .casino-topbar-actions > #btnInfo,
:root[data-layout="mobile"] .casino-topbar-actions > #btnSettings,
:root[data-layout="mobile"] .casino-topbar-actions > #btnAccount,
:root[data-layout="mobile"] .casino-topbar-actions > #hubOnlinePill { display: none; }
:root[data-layout="mobile"] .casino-menu-btn { display: inline-flex; }
:root[data-layout="mobile"] body.casino { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
:root[data-layout="mobile"] .casino-menu-panel,
:root[data-layout="mobile"] .casino-dock { display: flex; }

/* ── Untere Balance-Leiste (Dock) ────────────────────────────────────── */
.casino-dock {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 110;
  align-items: center; gap: 10px;
  width: min(440px, calc(100vw - 20px));
  padding: 8px 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--border2);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
}
.casino-dock-spacer { flex: 1; }
/* kleiner Cashout-Knopf links */
.casino-dock-cashout {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, var(--casino-gold), var(--casino-gold-dark));
  color: #1a1408;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(240,200,96,.28);
  transition: transform .12s cubic-bezier(.2,.8,.2,1), filter .15s;
}
.casino-dock-cashout:active { transform: scale(.93); }
.casino-dock-cashout:hover { filter: brightness(1.06); }
.casino-dock-cashout .ico { font-size: 18px; line-height: 1; }
/* Balance im Dock prominenter */
.casino-dock #hudBalance { font-size: 14px; padding: 7px 14px; }

/* ── Menü-Button (☰) oben in der Topbar ──────────────────────────────── */
.casino-menu-btn .bars { position: relative; width: 17px; height: 13px; flex: 0 0 auto; }
.casino-menu-btn .bars span {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.casino-menu-btn .bars span:nth-child(1) { top: 0; }
.casino-menu-btn .bars span:nth-child(2) { top: 5.5px; }
.casino-menu-btn .bars span:nth-child(3) { top: 11px; }
.casino-menu-btn.open .bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.casino-menu-btn.open .bars span:nth-child(2) { opacity: 0; }
.casino-menu-btn.open .bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── Menü-Panel + Backdrop ───────────────────────────────────────────── */
.casino-menu-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 120;
  opacity: 0; pointer-events: none;
  transition: opacity .28s cubic-bezier(.2,.8,.2,1);
}
.casino-menu-backdrop.open { opacity: 1; pointer-events: auto; }
@media (max-width: 600px) { :root:not([data-layout="desktop"]) .casino-menu-backdrop { display: block; } }
:root[data-layout="mobile"] .casino-menu-backdrop { display: block; }

.casino-menu-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(320px, 88vw);
  z-index: 121;
  background: var(--surface);
  border-left: 1px solid var(--border2);
  box-shadow: -18px 0 50px rgba(0,0,0,.4);
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.32,.72,0,1);
}
.casino-menu-panel.open { transform: translateX(0); }
.casino-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; flex: 0 0 auto;
}
.casino-menu-head .title {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px;
}
.casino-menu-head .close {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.casino-menu-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 9px;
}
.casino-menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px;
  cursor: pointer; text-decoration: none; width: 100%;
  text-align: left;
  transition: transform .12s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s;
  opacity: 0; transform: translateX(14px);
}
.casino-menu-panel.open .casino-menu-item {
  opacity: 1; transform: translateX(0);
  transition: transform .4s cubic-bezier(.2,.8,.2,1) var(--d, 0s), opacity .35s var(--d, 0s);
}
.casino-menu-item:active { transform: scale(.97); }
.casino-menu-item .ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
.casino-menu-item.gold {
  background: linear-gradient(135deg, var(--casino-gold), var(--casino-gold-dark));
  border-color: transparent; color: #1a1408;
}
.casino-menu-item.danger { color: var(--casino-danger); border-color: rgba(255,92,125,.3); }

/* Footer: kleine Online-Pille ganz unten */
.casino-menu-foot { flex: 0 0 auto; margin-top: 12px; }
.casino-menu-online-pill {
  display: flex; justify-content: center;
  opacity: 0; transition: opacity .35s .25s;
}
.casino-menu-panel.open .casino-menu-online-pill { opacity: 1; }
.casino-menu-online-pill .online-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 12px;
  color: var(--muted);
}
.casino-menu-online-pill .online-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--casino-success);
  box-shadow: 0 0 8px rgba(92,244,144,.7);
}
.casino-balance {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(240,200,96,.18), rgba(240,200,96,.06));
  border: 1px solid rgba(240,200,96,.35);
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--casino-gold);
  letter-spacing: .02em;
}
.casino-balance .ico { font-size: 14px; line-height: 1; }
.casino-balance.flash-up { animation: balanceFlashUp .9s ease-out; }
.casino-balance.flash-down { animation: balanceFlashDown .9s ease-out; }
@keyframes balanceFlashUp {
  0% { background: rgba(92,244,144,.5); color: #fff; transform: scale(1.06); }
  100% { background: linear-gradient(135deg, rgba(240,200,96,.18), rgba(240,200,96,.06)); color: var(--casino-gold); transform: scale(1); }
}
@keyframes balanceFlashDown {
  0% { background: rgba(255,92,125,.5); color: #fff; transform: scale(.96); }
  100% { background: linear-gradient(135deg, rgba(240,200,96,.18), rgba(240,200,96,.06)); color: var(--casino-gold); transform: scale(1); }
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.casino-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s, color .15s, opacity .15s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.casino-btn:active { transform: scale(.96); }
.casino-btn:disabled { opacity: .45; pointer-events: none; }
.casino-btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent2)));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(124,92,252,.28);
}
.casino-btn-gold {
  background: linear-gradient(135deg, var(--casino-gold), var(--casino-gold-dark));
  border-color: transparent;
  color: #1a1408;
  box-shadow: 0 6px 18px rgba(240,200,96,.25);
}
.casino-btn-danger {
  background: linear-gradient(135deg, #ff5c7d, #e83a5e);
  border-color: transparent;
  color: #fff;
}
.casino-btn-ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.casino-btn.small { padding: 8px 12px; min-height: 36px; font-size: 12px; }

/* ── Card (Game-Tile auf Casino-Sub-Hub) ─────────────────────────────── */
.casino-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 1fr;       /* alle Tiles gleich hoch */
  gap: 14px;
  margin-top: 16px;
  align-items: stretch;
}
.casino-tile {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--casino-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .25s;
  animation: tileIn .45s cubic-bezier(.2,.8,.2,1) backwards;
  min-height: 240px;
  isolation: isolate;        /* Stacking-Context damit Hover-Transform nicht andere überlagert */
}
.casino-tile:nth-child(1) { animation-delay: .04s; }
.casino-tile:nth-child(2) { animation-delay: .12s; }
.casino-tile:nth-child(3) { animation-delay: .2s; }
.casino-tile:nth-child(4) { animation-delay: .28s; }
@keyframes tileIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.casino-tile:not(.disabled):hover {
  transform: translateY(-5px);
  border-color: rgba(240,200,96,.45);
  box-shadow: 0 24px 64px rgba(240,200,96,.15);
}
.casino-tile.disabled { cursor: default; opacity: .55; }
/* Tile-Header: dunkler Casino-Filz mit Gold-Glow. Unterscheidet sich bewusst
   vom Hub-Stil (Accent-Gradient) – wer hier ist, ist im Casino. */
.casino-tile-header {
  height: 140px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,200,96,.08), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 60%, #000) 0%, color-mix(in srgb, var(--accent) 40%, #000) 45%, color-mix(in srgb, var(--accent) 25%, #000) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  position: relative;
  overflow: hidden;
}
/* Helle Themes: deutlicher Kontrast durch dunkleres Mix mit accent2 statt #fff */
[data-theme="light"] .casino-tile-header {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,200,96,.12), transparent 60%),
    linear-gradient(160deg, #5a4fc8 0%, #4a3da8 45%, #382d88 100%);
}
[data-theme="pastel"] .casino-tile-header {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,200,96,.12), transparent 60%),
    linear-gradient(160deg, #8a52c4 0%, #6e3fb0 45%, #5a2e98 100%);
}
[data-theme="mint"] .casino-tile-header {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,200,96,.12), transparent 60%),
    linear-gradient(160deg, #1f7a52 0%, #155c3e 45%, #0d4630 100%);
}
[data-theme="peach"] .casino-tile-header {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,200,96,.12), transparent 60%),
    linear-gradient(160deg, #c45a3a 0%, #a04428 45%, #7a3018 100%);
}
[data-theme="sky"] .casino-tile-header {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,200,96,.12), transparent 60%),
    linear-gradient(160deg, #2d5c9c 0%, #1f4680 45%, #133460 100%);
}
.casino-tile-header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.5), transparent 60%),
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%);
  pointer-events: none;
}
.casino-tile-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,200,96,.35), transparent);
}
.casino-tile-header .ico {
  position: relative; z-index: 1;
  filter: drop-shadow(0 6px 22px rgba(240,200,96,.5));
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.casino-tile:not(.disabled):hover .casino-tile-header .ico { transform: scale(1.1) translateY(-3px); }
.casino-tile-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.casino-tile-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; }
.casino-tile-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.casino-tile-meta { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.casino-tag {
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  letter-spacing: .06em; text-transform: uppercase;
}
.casino-tag-live   { background: rgba(92,244,144,.14); color: var(--casino-success); border: 1px solid rgba(92,244,144,.22); }
.casino-tag-soon   { background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--border); }

/* ── Bank-Panel (Cashout / Reset) ────────────────────────────────────── */
.casino-bank-panel {
  margin-top: 18px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--casino-radius);
}
.casino-bank-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.casino-bank-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.casino-bank-value {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--casino-gold), color-mix(in srgb, var(--casino-gold) 70%, var(--accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.casino-bank-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.casino-bank-actions .casino-btn { flex: 1; min-width: 130px; }
.casino-bank-hint { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ── Modal / Overlay ─────────────────────────────────────────────────── */
.casino-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  opacity: 0;
  transition: opacity .25s cubic-bezier(.2,.8,.2,1);
}
.casino-overlay.show { display: flex; }
.casino-overlay.visible { opacity: 1; }
.casino-overlay-box {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--casino-radius-lg);
  padding: 22px;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(16px) scale(.96);
  opacity: 0;
  transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .25s;
}
.casino-overlay.visible .casino-overlay-box { transform: none; opacity: 1; }
.casino-overlay-box h3 { font-family: 'Syne', sans-serif; font-size: 19px; margin-bottom: 12px; }
.casino-overlay-box p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; }
.casino-overlay-actions { display: flex; gap: 10px; margin-top: 14px; }
.casino-overlay-actions .casino-btn { flex: 1; }

/* ── Beta-Badge ──────────────────────────────────────────────────────────── */
.casino-beta-badge {
  display: inline-block;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .12em;
  padding: 3px 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--casino-gold), var(--casino-gold-dark));
  color: #1a1408;
  vertical-align: middle;
  margin-left: 6px;
  box-shadow: 0 2px 6px rgba(240,200,96,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.casino-beta-badge-lg {
  font-size: 14px;
  padding: 5px 11px;
  letter-spacing: .14em;
  margin-left: 10px;
  vertical-align: 6px;
}

/* ── PLEITE / BUST – großer roter Schock-Header ──────────────────────────── */
.casino-bust-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 7vw, 56px);
  letter-spacing: .04em;
  text-align: center;
  color: var(--casino-danger);
  text-shadow:
    0 0 18px rgba(255, 92, 125, .55),
    0 0 36px rgba(255, 92, 125, .35),
    0 3px 0 rgba(0, 0, 0, .35);
  margin: 8px 0 4px;
  line-height: 1;
  animation: casinoBustPulse 1.4s ease-in-out infinite;
}
.casino-bust-emoji {
  text-align: center;
  font-size: clamp(40px, 9vw, 64px);
  margin-bottom: 4px;
  animation: casinoBustShake .6s cubic-bezier(.36,.07,.19,.97) 1;
  transform-origin: 50% 70%;
}
.casino-bust-sub {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 18px;
  font-weight: 600;
}
.casino-overlay.bust .casino-overlay-box {
  border: 2px solid rgba(255, 92, 125, .55);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(255, 92, 125, .25),
    0 0 60px rgba(255, 92, 125, .3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 85%, #ff5c7d 10%) 0%, var(--surface) 100%);
}
@keyframes casinoBustPulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 24px rgba(255,92,125,.55), 0 0 48px rgba(255,92,125,.35), 0 4px 0 rgba(0,0,0,.35); }
  50%      { transform: scale(1.04); text-shadow: 0 0 32px rgba(255,92,125,.8), 0 0 64px rgba(255,92,125,.5), 0 4px 0 rgba(0,0,0,.35); }
}
@keyframes casinoBustShake {
  10%,90% { transform: translateX(-2px) rotate(-3deg); }
  20%,80% { transform: translateX(3px) rotate(4deg); }
  30%,50%,70% { transform: translateX(-5px) rotate(-6deg); }
  40%,60% { transform: translateX(5px) rotate(6deg); }
}

.casino-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color .15s, background .15s;
}
.casino-input:focus { border-color: var(--accent); background: var(--surface); }

/* ── Settings-Sheet (Theme + Reset) ──────────────────────────────────── */
.casino-settings-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--muted);
  margin: 14px 0 8px;
}
.casino-mode-toggle {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  width: 100%;
}
.casino-mode-toggle button {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  min-height: 40px;
  border: none;
  background: transparent;
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.casino-mode-toggle button.on {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124,92,252,.25);
}

/* ── Format-Auswahl (Automatisch / Normal / Handy) ───────────────────── */
.casino-format-setting { margin-top: 4px; }
.casino-layout-toggle {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  width: 100%;
}
.casino-layout-toggle button {
  flex: 1;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 9px 6px;
  min-height: 48px;
  border: none;
  background: transparent;
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.casino-layout-toggle button span:first-child { font-size: 16px; line-height: 1; }
.casino-layout-toggle button.on {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124,92,252,.25);
}
.casino-layout-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
  min-height: 1.4em;
}
.casino-theme-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.casino-theme-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  min-height: 40px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface2);
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
}
.casino-theme-chip.active { border-color: var(--accent); }
.casino-theme-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

.casino-settings-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── Cashout-Modal: große Zahl + Frage ───────────────────────────────── */
.casino-cashout-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 14px;
}
.casino-cashout-amount {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-align: center;
  background: linear-gradient(135deg, var(--casino-gold), color-mix(in srgb, var(--casino-gold) 60%, var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 6px 0 4px;
  filter: drop-shadow(0 4px 18px rgba(240,200,96,.25));
  word-break: break-word;
  hyphens: none;
  padding: 0 8px;
}
.casino-cashout-question {
  text-align: center;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 18px;
}
.casino-cashout-question strong { color: var(--casino-gold); }

/* ── Leaderboard ─────────────────────────────────────────────────────── */
.casino-lb-modal-title {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 14px;
}
.casino-lb-modal-title .cup {
  font-size: 28px;
  filter: drop-shadow(0 4px 14px rgba(240,200,96,.45));
}
.casino-lb-scroll {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -6px;
  padding: 0 6px;
}
.casino-lb {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--casino-radius);
  padding: 14px 16px;
}
.casino-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.casino-lb-row:last-child { border-bottom: none; }
.casino-lb-pos { width: 28px; font-weight: 700; color: var(--muted); text-align: center; }
.casino-lb-row.top1 .casino-lb-pos { color: var(--casino-gold); }
.casino-lb-row.top2 .casino-lb-pos { color: #c8c8d0; }
.casino-lb-row.top3 .casino-lb-pos { color: #cd7f32; }
.casino-lb-name { flex: 1; font-weight: 600; }
.casino-lb-balance { font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--casino-gold); }
.casino-lb-empty { padding: 16px 0; color: var(--muted); font-size: 13px; text-align: center; }

/* ── Spielkarte (Playing-Card) ───────────────────────────────────────── */
.casino-card {
  width: var(--casino-card-w);
  height: var(--casino-card-h);
  perspective: 900px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.casino-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.32,.72,0,1);
}
.casino-card.face-up .casino-card-inner { transform: rotateY(180deg); }
.casino-card-face {
  position: absolute; inset: 0;
  border-radius: 8%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.casino-card-front { transform: rotateY(180deg); }
.casino-card-svg { width: 100%; height: 100%; display: block; }

/* ── Chips ───────────────────────────────────────────────────────────── */
.casino-chip {
  width: var(--casino-chip-size);
  height: var(--casino-chip-size);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}
.casino-chip.chip-small {
  --casino-chip-size: 30px;
  width: 30px; height: 30px;
}
.casino-chip-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.35);
}
.casino-chip-edge {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 18deg, rgba(255,255,255,.85) 18deg 36deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 60%, #000 78%, transparent 78%);
          mask: radial-gradient(circle, transparent 60%, #000 60%, #000 78%, transparent 78%);
  opacity: .65;
}
.casino-chip-face {
  position: absolute; inset: 12%;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: inherit;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.18);
}
.casino-chip-label {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(10px, 2.4vw, 14px);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  letter-spacing: .04em;
}
.casino-chip.chip-small .casino-chip-label { font-size: 10px; }

/* Chip-Farben pro Denomination */
.casino-chip.chip-1    .casino-chip-inner { background: #eef0f4; }
.casino-chip.chip-1    .casino-chip-label { color: #1a1a26; text-shadow: none; }
.casino-chip.chip-5    .casino-chip-inner { background: linear-gradient(135deg,#e54848,#a01818); }
.casino-chip.chip-25   .casino-chip-inner { background: linear-gradient(135deg,#34a85a,#1b6438); }
.casino-chip.chip-100  .casino-chip-inner { background: linear-gradient(135deg,#26262e,#0a0a10); }
.casino-chip.chip-500  .casino-chip-inner { background: linear-gradient(135deg,#a566d6,#5b2c8c); }
.casino-chip.chip-1000 .casino-chip-inner { background: linear-gradient(135deg,#ffce5a,#b88526); }
.casino-chip.chip-1000 .casino-chip-label { color: #2a1d04; text-shadow: 0 1px 1px rgba(255,255,255,.4); }
.casino-chip.chip-5000  .casino-chip-inner { background: linear-gradient(135deg,#6cd6f0,#2a6e8e); }
.casino-chip.chip-10000 .casino-chip-inner { background: linear-gradient(135deg,#ff6b8a,#a82344); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.18); }
.casino-chip.chip-10000 .casino-chip-label { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.casino-chip.chip-50000 .casino-chip-inner { background: linear-gradient(135deg,#f0c860,#7a4a1a); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.25), 0 0 14px rgba(240,200,96,.45); }
.casino-chip.chip-50000 .casino-chip-label { color: #1a1408; text-shadow: 0 1px 1px rgba(255,255,255,.5); font-weight: 800; }

.casino-chip-stack { position: relative; width: var(--casino-chip-size); height: calc(var(--casino-chip-size) + 28px); }
.casino-chip-stack.chip-stack-small { --casino-chip-size: 30px; width: 30px; height: 50px; }
.casino-chip-stack .casino-chip { position: absolute; left: 0; }
.casino-chip-stack-more {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 11px;
  background: rgba(0,0,0,.65); color: #fff; padding: 2px 8px; border-radius: 999px;
}

/* ── History-Panel (Verlauf der letzten Hände) ────────────────────────── */
.casino-history {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--casino-radius);
  padding: 14px 14px 10px;
}
.casino-history-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.casino-history-head .h-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.casino-history-head .h-net {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--ink);
}
.casino-history-head .h-net.pos { color: var(--casino-success); border-color: rgba(92,244,144,.32); background: rgba(92,244,144,.08); }
.casino-history-head .h-net.neg { color: var(--casino-danger);  border-color: rgba(255,92,125,.32); background: rgba(255,92,125,.08); }

.casino-history-chart {
  display: block;
  width: 100%;
  height: 64px;
  margin: 6px 0 10px;
  overflow: visible;
}

.casino-history-list {
  display: flex; flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
}
.casino-history-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
}
.casino-history-item:last-child { border-bottom: none; }
.casino-history-item .h-game {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.casino-history-item .h-bet {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600; font-size: 12.5px;
  color: var(--muted);
  min-width: 84px;
}
.casino-history-item .h-result {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.casino-history-item.win  .h-result { background: rgba(92,244,144,.14); color: var(--casino-success); }
.casino-history-item.bj   .h-result { background: linear-gradient(135deg,#f0c860,#b58a2a); color: #1a1408; }
.casino-history-item.lose .h-result { background: rgba(255,92,125,.14); color: var(--casino-danger); }
.casino-history-item.push .h-result { background: rgba(255,186,90,.14); color: var(--casino-warn); }
.casino-history-item .h-delta {
  margin-left: auto;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.casino-history-item .h-delta.pos { color: var(--casino-success); }
.casino-history-item .h-delta.neg { color: var(--casino-danger); }
.casino-history-empty { padding: 18px 4px; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.5; }

/* ── Toast / Snackbar ────────────────────────────────────────────────── */
.casino-toast {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  left: 50%; transform: translateX(-50%) translateY(40px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border2);
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  font-size: 13.5px; font-weight: 600;
  z-index: 500;
  opacity: 0;
  transition: opacity .22s, transform .22s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.casino-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.casino-toast.success { border-color: rgba(92,244,144,.4); }
.casino-toast.danger { border-color: rgba(255,92,125,.4); }

/* ── Utility ─────────────────────────────────────────────────────────── */
.casino-hidden { display: none !important; }
.casino-row { display: flex; align-items: center; gap: 10px; }
.casino-row-wrap { flex-wrap: wrap; }
.casino-spacer { flex: 1; }
.casino-muted { color: var(--muted); }
.casino-mono { font-variant-numeric: tabular-nums; }