/* =====================================================================
   Gamble Klicker – Aussehen
   Aufbau: Grundlagen → Kopfzeile & Tabs → Knöpfe → Klicker & Side-Slot →
   Casino → Spiele → Statistik & Einstellungen → Fortschritt → Effekte →
   Tablet/iPad → Handy
   ===================================================================== */

/* ---------- Farben & Grundlagen ---------- */
:root {
  --bg: #06120c;
  --bg-panel: #143024;
  --bg-panel-hover: #1b3d2e;
  --panel: linear-gradient(180deg, rgba(28, 66, 49, 0.85) 0%, rgba(12, 32, 23, 0.92) 100%);
  --border: #2a5a43;
  --border-soft: rgba(245, 197, 66, 0.18);
  --gold: #f5c542;
  --gold-light: #ffe58a;
  --gold-dark: #b8860b;
  --gold-grad: linear-gradient(180deg, #ffe58a 0%, #f5c542 45%, #c38d12 100%);
  --text: #f1f5f2;
  --text-muted: #9fb8aa;
  --danger: #d9534f;
  --red: #c0392b;
  --win: #6fdc8c;
  --loss: #ff8a80;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --header-height: 120px; /* wird per JavaScript auf die echte Höhe gesetzt */
  /* Farbthema (Schatzkammer): Kopfzeile, Knöpfe und Hintergrund-Leuchten */
  --header-bg: rgba(4, 14, 9, 0.95);
  --btn-bg: linear-gradient(180deg, rgba(42, 84, 63, 0.95), rgba(20, 48, 36, 0.95));
  --glow-1: rgba(52, 120, 84, 0.55);
  --glow-2: rgba(120, 80, 10, 0.25);
  --glow-3: rgba(20, 90, 60, 0.3);
  /* Casino-Look (Schatzkammer): Filz der Spieltische, Bande und Kartenrücken */
  --felt: radial-gradient(ellipse at center, #17784a 0%, #0b5a32 70%);
  --felt-flat: #0b5a32;
  --rail: #5a3a1a;
  --rail-glow: 0 0 0 transparent;
  --card-back: radial-gradient(circle at 50% 50%, rgba(245, 197, 66, 0.5) 0 18%, transparent 19%), repeating-linear-gradient(45deg, #7b1e1e 0 6px, #962626 6px 12px);
  --card-back-edge: #fdfdfd;
  --card-back-mark: '';
  --card-back-mark-color: transparent;
}

/* Münz-Design (Schatzkammer): Standard ist die Golddublone */
:root,
.coin-skin-gold {
  --coin-face: radial-gradient(circle at 35% 28%, #fff8d0 0%, #ffd95e 28%, #f5c542 45%, #c38d12 80%, #8a6508 100%);
  --coin-rim: #b8860b;
  --coin-rim-2: rgba(255, 229, 138, 0.35);
  --coin-glow: rgba(245, 197, 66, 0.45);
  --coin-letter: #8a6508;
  --coin-letter-shadow: 1px 1px 0 #fff3b0, -1px -1px 0 rgba(0, 0, 0, 0.25);
  --coin-ring: rgba(138, 101, 8, 0.45);
  --coin-rays: rgba(245, 197, 66, 0.16);
}

* {
  box-sizing: border-box;
}

/* Versteckte Elemente bleiben versteckt – auch wenn eine Klasse (z. B. .btn) display setzt */
[hidden] {
  display: none !important;
}

html {
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  min-height: 100vh;
  /* Kein eigener Hintergrund: Die Seitenfarbe kommt von html. Sonst deckt body das Leuchten
     (body::before) und die Effekte der Farbthemen (body::after: Schnee, Sterne, Glanz) zu */
  -webkit-tap-highlight-color: transparent;
  /* Wie eine App: schnelles Tippen markiert keinen Text (iPad) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
.transfer-box textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Hintergrund als feste Ebene (background-attachment: fixed funktioniert auf dem iPad nicht) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--glow-1) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, var(--glow-2) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 80%, var(--glow-3) 0%, transparent 70%),
    var(--bg);
}

h2 {
  margin: 0 0 12px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.5px;
}

h3 {
  font-family: var(--font-display);
  letter-spacing: 0.3px;
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation; /* kein Doppeltipp-Zoom auf dem iPad */
}

input,
select,
textarea {
  font: inherit;
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: 0.85rem;
}

.win {
  color: var(--win);
}

.loss {
  color: var(--loss);
}

/* Die Währung: eine goldene Dublone */
.dublone {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  vertical-align: -0.1em;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, var(--gold) 40%, var(--gold-dark) 100%);
  border: 0.08em solid #8a6508;
  box-shadow: inset 0 0 0 0.1em rgba(255, 243, 176, 0.45), 0 0 0.25em rgba(245, 197, 66, 0.35);
}

/* Betrag mit Münze: nie zwischen Zahl und Münze umbrechen */
.money {
  white-space: nowrap;
}

/* Gemeinsamer Look für alle Kästen */
.panel,
.click-area,
.shop-section,
.casino-info-box,
.paytable,
.mp-forms,
.stats-list,
.settings {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- Kopfzeile & Tabs (bleiben beim Scrollen oben) ---------- */
.app-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 30;
  /* Bewusst ohne backdrop-filter: Die Unschärfe müsste bei jedem Scrollen und jeder Animation darunter
     neu berechnet werden – auf dem iPad (vor allem hochkant) ruckelt es dann. Dafür fast deckend. */
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-soft);
  padding-top: env(safe-area-inset-top);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
}

.logo-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-coin {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #8a6508;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, var(--gold) 40%, var(--gold-dark) 100%);
  color: #7a5806;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  animation: logo-spin 7s ease-in-out infinite;
}

@keyframes logo-spin {
  0%, 85% { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}

.icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.2rem;
  cursor: pointer;
}

.icon-btn.off {
  opacity: 0.55;
}

.wallet {
  text-align: right;
  transform-origin: right center;
}

.wallet-money {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(245, 197, 66, 0.35);
}

.wallet-cps {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.save-indicator {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.4s;
}

.save-indicator.show {
  opacity: 0.8;
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.1s, box-shadow 0.2s;
}

.tab:active {
  transform: scale(0.96);
}

.tab.active {
  background: var(--gold-grad);
  border-color: transparent;
  color: #2a1d00;
  box-shadow: 0 4px 16px rgba(245, 197, 66, 0.35);
}

.tab-icon {
  font-size: 1.15rem;
}

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left));
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: panel-in 0.25s ease-out;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Knöpfe & Eingaben ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(245, 197, 66, 0.45);
  background: var(--btn-bg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s, filter 0.15s, box-shadow 0.15s;
}

.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
  box-shadow: none;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--gold-grad);
  border-color: #ffe58a;
  color: #2a1d00;
  font-weight: 800;
  box-shadow: 0 3px 0 #7a5806, 0 6px 18px rgba(245, 197, 66, 0.25);
}

/* Lichtreflex, der über goldene Knöpfe wandert */
.btn.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(0) skewX(-20deg);
  animation: shine 3.5s ease-in-out infinite;
  pointer-events: none;
}

.btn.btn-primary:disabled::after {
  display: none;
}

/* Mit transform statt left: läuft auf der Grafikkarte, ohne in jedem Frame das Layout neu zu berechnen
   (Strich ist 40 % breit, 200 % Weg = das Fünffache der eigenen Breite) */
@keyframes shine {
  0%, 60% { transform: translateX(0) skewX(-20deg); }
  100% { transform: translateX(500%) skewX(-20deg); }
}

.btn-danger {
  border-color: rgba(217, 83, 79, 0.7);
  background: linear-gradient(180deg, rgba(90, 28, 28, 0.7), rgba(45, 14, 14, 0.8));
  color: #ffb3b0;
}

.btn-small {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 0.85rem;
}

.btn-big {
  min-height: 52px;
  padding: 10px 28px;
  font-size: 1.15rem;
}

@media (hover: hover) {
  .btn:hover:not(:disabled) {
    filter: brightness(1.12);
  }
}

.section-gap {
  margin-top: 28px;
}

.warning {
  max-width: 640px;
  background: rgba(217, 83, 79, 0.15);
  border: 1px solid var(--danger);
  border-radius: 10px;
  padding: 10px 14px;
}

/* ---------- Klicker ---------- */
.clicker-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(340px, 1.35fr);
  gap: 20px;
  align-items: start;
}

.click-area {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-height) + 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 18px 18px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Lichtkegel von oben */
.click-area::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 140%;
  height: 90%;
  background: radial-gradient(ellipse at center, rgba(245, 197, 66, 0.2), transparent 65%);
  pointer-events: none;
}

.coin-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 260px;
}

/* Sich langsam drehende Strahlen hinter der Münze */
.coin-stage::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--coin-rays) 0deg 10deg, transparent 10deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  animation: rays 30s linear infinite;
  pointer-events: none;
}

@keyframes rays {
  to { transform: rotate(360deg); }
}

.big-coin {
  position: relative;
  width: 220px;
  height: 220px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--coin-face);
  box-shadow:
    0 0 0 6px var(--coin-rim),
    0 0 0 10px var(--coin-rim-2),
    0 18px 40px rgba(0, 0, 0, 0.5),
    0 0 60px var(--coin-glow),
    inset 0 -10px 24px rgba(0, 0, 0, 0.25),
    inset 0 8px 18px rgba(255, 255, 255, 0.45);
  z-index: 1; /* vor dem Schein der Sternenmünze */
  cursor: pointer;
  animation: coin-float 3s ease-in-out infinite;
  -webkit-user-select: none;
  user-select: none;
}

/* Geriffelter innerer Ring */
.big-coin::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  left: 14px;
  border-radius: 50%;
  border: 3px dashed var(--coin-ring);
}

/* Glanz, der über die Münze wandert */
.big-coin::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 60%);
  background-size: 250% 100%;
  animation: coin-shine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes coin-shine {
  0%, 55% { background-position: 150% 0; }
  100% { background-position: -100% 0; }
}

/* Schweben über die eigene translate-Eigenschaft: Das Federn beim Tippen (transform, per JavaScript)
   legt sich darüber, ohne das Schweben neu zu starten */
@keyframes coin-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@media (hover: hover) {
  .big-coin:hover {
    filter: brightness(1.06);
  }
}

.big-coin-inner {
  position: relative;
  z-index: 1;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  font-weight: 900;
  color: var(--coin-letter);
  text-shadow: var(--coin-letter-shadow);
}

.click-power {
  position: relative;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-light);
}

.float-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
  /* Zahlen und Ringe beim Tippen: Der Browser muss nur diese Ebene neu anordnen, nicht die ganze Seite */
  contain: size layout style;
}

.float-text {
  position: absolute;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--gold-light);
  text-shadow: 0 2px 0 #7a5806, 0 0 12px rgba(245, 197, 66, 0.8);
  animation: float-up 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes float-up {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -200%) scale(1); }
}

/* Hohe Combo: rot-goldene Zahlen */
.float-text.hot {
  color: #ffb347;
  text-shadow: 0 2px 0 #8a2d00, 0 0 14px rgba(255, 120, 40, 0.9);
}

/* Kritischer Klick: groß, rot und wackelnd */
.float-text.crit {
  z-index: 3;
  font-size: 2.1rem;
  color: #ff5a3c;
  text-shadow: 0 3px 0 #5c0d00, 0 0 18px rgba(255, 70, 30, 0.95), 0 0 4px #fff;
  animation: crit-up 1.25s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes crit-up {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); }
  12%  { opacity: 1; transform: translate(-50%, -70%) scale(1.45) rotate(4deg); }
  22%  { transform: translate(-50%, -80%) scale(1.15) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(1) rotate(0); }
}

/* Ring, der sich von der Tipp-Stelle ausbreitet */
.click-ring {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(255, 229, 138, 0.9);
  border-radius: 50%;
  animation: click-ring 0.45s ease-out forwards;
  pointer-events: none;
}

@keyframes click-ring {
  to { transform: scale(4); opacity: 0; border-width: 1px; }
}

/* Combo-Anzeige oben über der Münze (schwebt, damit nichts verrutscht) */
.combo-meter {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 32px);
  max-width: 300px;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(-50%) scale(0.9);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.combo-meter.active {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.combo-count,
.combo-mult {
  font-weight: 900;
  font-size: 0.95rem;
  color: #ffb347;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 120, 40, 0.6);
}

.combo-bar {
  flex: 1;
  height: 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 179, 71, 0.35);
  overflow: hidden;
}

.combo-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd95e, #ff8a3c, #ff3d2e);
  transition: width 0.12s;
}

.combo-fill {
  position: relative;
}

/* Volle Combo: heller Schein pulsiert (nur Deckkraft) */
.combo-meter.maxed .combo-fill {
  box-shadow: 0 0 10px #ff8a3c;
}

.combo-meter.maxed .combo-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0;
  animation: glow-pulse 0.5s ease-in-out infinite alternate;
}

.combo-meter.maxed .combo-mult {
  color: #fff;
  text-shadow: 0 0 10px #ff3d2e, 0 0 20px #ff8a3c;
}


/* ---------- Side-Slot (unter der Klick-Münze) ---------- */
.side-slot {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  margin-top: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 2px solid var(--gold-dark);
  background: linear-gradient(180deg, #7a1d1d 0%, #3d0c0c 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 229, 138, 0.15);
}

.side-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.side-slot-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: var(--gold);
}

.side-slot-msg {
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

.side-slot .reels {
  --cell: 42px;
}

.side-slot-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.side-minus,
.side-plus {
  width: 38px;
  font-size: 1.2rem;
  font-weight: 900;
}

.side-bet {
  min-width: 80px;
  text-align: center;
  font-weight: 800;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.side-auto.active {
  position: relative;
  background: var(--gold-grad);
  color: #2a1d00;
}

.side-auto.active::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  box-shadow: 0 0 16px var(--gold);
  opacity: 0;
  animation: glow-pulse 0.8s ease-in-out infinite alternate;
  pointer-events: none;
}

.side-spin.cant-afford .lever-knob {
  filter: grayscale(0.8);
}

.side-slot-front {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.side-slot-front > .side-slot-window {
  flex: 1;
  min-width: 0;
}

/* ---------- Shop: Upgrades & Gebäude ---------- */
.shop {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.shop-section {
  padding: 16px;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.shop-header h2 {
  margin: 0;
}

.buy-amount {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
}

.amount-btn {
  min-height: 34px;
  padding: 4px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
}

.amount-btn.active {
  background: var(--gold-grad);
  color: #2a1d00;
}

.upgrade-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.upgrade,
.building {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}

.upgrade:active:not(:disabled),
.building:active:not(:disabled) {
  transform: scale(0.98);
}

/* Kaufbar: goldener Rand */
.upgrade:not(:disabled),
.building:not(:disabled) {
  border-color: rgba(245, 197, 66, 0.55);
}

/* Bezahlbare Upgrades leuchten (Schein und Pulsieren siehe Seltenheit weiter unten) */

@media (hover: hover) {
  .upgrade:not(:disabled):hover,
  .building:not(:disabled):hover {
    background: var(--bg-panel-hover);
    border-color: var(--gold);
  }
}

.upgrade:disabled,
.building:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.upgrade {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
}

.upgrade-icon {
  font-size: 1.6rem;
}

.upgrade-name {
  font-weight: 700;
}

.upgrade-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.upgrade-cost {
  margin-top: 4px;
  font-weight: 700;
  color: var(--gold);
  font-size: 0.9rem;
}

.upgrade-more {
  display: block;
  width: 100%;
  margin-top: 8px;
}

.upgrade-gain {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--win);
}

.upgrade-gain:empty {
  display: none;
}

/* Seltenheit: Farbe des Rands und Leuchten je nach Stufe */
.upgrade {
  --rarity: rgba(245, 197, 66, 0.55);
  --rarity-glow: rgba(245, 197, 66, 0.35);
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--rarity);
}

.upgrade:not(:disabled) {
  border-color: var(--rarity);
  border-left-width: 4px;
}

.rarity-crit     { --rarity: #ff5a3c; --rarity-glow: rgba(255, 90, 60, 0.45); }
.rarity-combo    { --rarity: #ff9f3c; --rarity-glow: rgba(255, 159, 60, 0.45); }
.rarity-bronze   { --rarity: #cd7f32; --rarity-glow: rgba(205, 127, 50, 0.4); }
.rarity-silver   { --rarity: #d6dde3; --rarity-glow: rgba(214, 221, 227, 0.4); }
.rarity-gold     { --rarity: #f5c542; --rarity-glow: rgba(245, 197, 66, 0.45); }
.rarity-platinum { --rarity: #9fe6d8; --rarity-glow: rgba(159, 230, 216, 0.45); }
.rarity-diamond  { --rarity: #5ad8ff; --rarity-glow: rgba(90, 216, 255, 0.55); }
.rarity-legend   { --rarity: #c27bff; --rarity-glow: rgba(194, 123, 255, 0.6); }
.rarity-mythic   { --rarity: #ff5ad1; --rarity-glow: rgba(255, 90, 209, 0.65); }
.rarity-synergy  { --rarity: #6fdc8c; --rarity-glow: rgba(111, 220, 140, 0.45); }
.rarity-cosmic   { --rarity: #8c7bff; --rarity-glow: rgba(140, 123, 255, 0.65); }
.rarity-divine   { --rarity: #fff1a8; --rarity-glow: rgba(255, 241, 168, 0.7); }
.rarity-empire   { --rarity: #ffb347; --rarity-glow: rgba(255, 179, 71, 0.55); }

.upgrade.rarity-crit,
.upgrade.rarity-combo,
.upgrade.rarity-diamond,
.upgrade.rarity-legend,
.upgrade.rarity-mythic,
.upgrade.rarity-cosmic,
.upgrade.rarity-divine,
.upgrade.rarity-empire {
  background: linear-gradient(160deg, color-mix(in srgb, var(--rarity) 18%, transparent), rgba(0, 0, 0, 0.25) 60%);
}

.upgrade.rarity-mythic {
  border-image: linear-gradient(180deg, #ff5ad1, #ffd95e, #5ad8ff) 1;
  border-left-width: 4px;
}

.upgrade.rarity-cosmic {
  border-image: linear-gradient(180deg, #8c7bff, #5ad8ff, #c27bff) 1;
  border-left-width: 4px;
}

.upgrade.rarity-divine {
  border-image: linear-gradient(180deg, #fff1a8, #ffffff, #f5c542) 1;
  border-left-width: 4px;
}

.upgrade:not(:disabled) {
  box-shadow: 0 0 8px var(--rarity-glow);
}

/* Pulsierender Schein innen: nur die Deckkraft ändert sich (läuft auf der Grafikkarte) –
   ein pulsierender box-shadow müsste bei jedem Bild neu gezeichnet werden */
.upgrade:not(:disabled)::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 16px var(--rarity-glow);
  opacity: 0;
  animation: glow-pulse 1.6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes glow-pulse {
  to { opacity: 1; }
}

/* Glanzstreifen über seltenen, bezahlbaren Upgrades */
.upgrade.rarity-diamond:not(:disabled)::after,
.upgrade.rarity-legend:not(:disabled)::after,
.upgrade.rarity-mythic:not(:disabled)::after,
.upgrade.rarity-cosmic:not(:disabled)::after,
.upgrade.rarity-divine:not(:disabled)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: upgrade-shine 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* 190 % Weg bei 40 % Breite = 475 % der eigenen Breite */
@keyframes upgrade-shine {
  0%, 40% { transform: translateX(0); }
  100% { transform: translateX(475%); }
}

.building-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.building {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
}

.building[hidden] {
  display: none;
}

.building.mystery {
  filter: grayscale(1);
}

.building.bought {
  animation: bought 0.5s ease-out;
}

@keyframes bought {
  0%   { box-shadow: 0 0 0 0 rgba(245, 197, 66, 0.9); background: rgba(245, 197, 66, 0.25); }
  100% { box-shadow: 0 0 0 14px rgba(245, 197, 66, 0); }
}

.building-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 2rem;
}

.building-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.building-name {
  font-weight: 700;
}

.building-desc,
.building-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.building-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.building-cost {
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

.building-owned {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold-light);
  opacity: 0.85;
}

.building-owned.count-pop {
  animation: count-pop 0.35s ease-out;
}

@keyframes count-pop {
  40% { transform: scale(1.5); color: #fff; }
}

/* Sterne für gekaufte Upgrades des Gebäudes */
.building-stars {
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.star {
  font-style: normal;
  color: var(--rarity);
  text-shadow: 0 0 6px var(--rarity-glow);
}

/* Fortschritt bis zum nächsten Upgrade */
.building-progress {
  display: block;
  height: 5px;
  margin-top: 5px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.building-progress-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--rarity, var(--gold));
  box-shadow: 0 0 6px var(--rarity-glow, transparent);
  transition: width 0.3s;
}

.building-next {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Nach einem Upgrade leuchtet das Gebäude kräftig auf */
.building.powered {
  animation: powered 0.9s ease-out;
}

@keyframes powered {
  0%   { box-shadow: 0 0 0 0 rgba(90, 216, 255, 0.9), inset 0 0 30px rgba(255, 229, 138, 0.6); background: rgba(245, 197, 66, 0.3); }
  60%  { box-shadow: 0 0 0 18px rgba(90, 216, 255, 0), inset 0 0 10px rgba(255, 229, 138, 0.2); }
  100% { box-shadow: none; }
}

.building.powered .building-icon {
  animation: powered-icon 0.9s ease-out;
}

@keyframes powered-icon {
  30% { transform: scale(1.35) rotate(-10deg); }
  60% { transform: scale(0.95) rotate(6deg); }
}

/* ---------- Tägliche Aufgaben (Fortschritt) ---------- */
.tab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #e53935;
  box-shadow: 0 0 0 2px var(--bg);
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  animation: badge-pop 0.4s ease;
}

.tab-badge[hidden] {
  display: none;
}

@keyframes badge-pop {
  from { transform: scale(0.3); }
}

.daily-panel {
  margin-bottom: 16px;
}

.daily-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.daily-head h2 {
  margin: 0;
}

.daily-tasks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.daily-task {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.3s, border-color 0.3s;
}

.daily-task.done:not(.claimed) {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(245, 197, 66, 0.35);
}

.daily-task.claimed {
  opacity: 0.65;
}

.daily-icon {
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
}

.daily-text {
  font-weight: 700;
}

.daily-bar {
  height: 10px;
  margin: 6px 0 4px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.daily-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2fa866, #7ddc6a);
  transition: width 0.4s;
}

.daily-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.daily-claim {
  grid-column: 1 / -1;
  min-height: 44px;
}

.daily-bonus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(245, 197, 66, 0.5);
  border-radius: 14px;
  background: rgba(245, 197, 66, 0.08);
}

.daily-bonus-text .small {
  display: block;
}

.daily-bonus-btn {
  min-height: 44px;
}

/* ---------- Kraken-Angriff (über der Klick-Münze) ---------- */
.kraken-attack {
  position: absolute;
  inset: -8px -46px -10px;
  z-index: 5;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 25%, rgba(46, 80, 140, 0.92), rgba(8, 18, 42, 0.97));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(176, 92, 214, 0.65), 0 0 30px rgba(176, 92, 214, 0.35);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  animation: kr-in 0.4s ease-out;
}

.kr-bars {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  gap: 4px;
  pointer-events: none;
}

.kr-bar {
  position: relative;
  height: 17px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
}

.kr-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.kr-hp span {
  background: linear-gradient(90deg, #7b2fa8, #c27bff);
  transition: width 0.2s;
}

.kr-time span {
  background: linear-gradient(90deg, #e6a020, #f5c542);
}

.kraken-attack.urgent .kr-time span {
  background: linear-gradient(90deg, #c62828, #ff5a3a);
}

.kr-bar b {
  position: relative;
  display: block;
  font-size: 0.72rem;
  line-height: 17px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.kr-msg {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  z-index: 3;
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 4px #000;
  pointer-events: none;
}

.kr-sea {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6px;
  z-index: 2;
  height: 74px;
  border-radius: 50% 50% 0 0 / 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(48, 150, 210, 0.92), #0a3a5c 70%);
  pointer-events: none;
  animation: kr-waves 2.2s ease-in-out infinite alternate;
}

.kr-body {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 1;
  width: 140px;
  height: 140px;
  margin-left: -70px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 104px;
  line-height: 140px;
  cursor: pointer;
  touch-action: manipulation;
  transform: translateX(var(--kr-x, 0));
  transition: transform 0.3s ease, filter 0.3s;
}

.kr-body span {
  display: inline-block;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
  animation: kr-bob 1.1s ease-in-out infinite alternate;
}

.kr-body.down {
  transform: translateX(var(--kr-x, 0)) translateY(130px);
  filter: brightness(0.5);
}

.kr-body.hit span {
  animation: kr-hit 0.22s ease;
}

.kr-arm {
  --rot: -14deg;
  position: absolute;
  bottom: 34px;
  width: 24px;
  height: 128px;
  border-radius: 14px 14px 6px 6px;
  background:
    radial-gradient(circle at 70% 9px, #f3d2ff 3px, transparent 4px) 0 0 / 100% 18px repeat-y,
    linear-gradient(90deg, #6a2a8c, #b05cd6 60%, #85399f);
  transform-origin: 50% 100%;
  transform: rotate(var(--rot));
  transition: transform 0.7s ease-in;
  animation: kr-sway 1.7s ease-in-out infinite alternate;
  pointer-events: none;
}

.kr-arm.arm-0 { left: 16px; }
.kr-arm.arm-1 { right: 16px; --rot: 14deg; height: 118px; animation-delay: -0.6s; }
.kr-arm.arm-2 { right: 27%; --rot: 8deg; height: 92px; animation-delay: -1.1s; }

.kr-loot {
  position: absolute;
  top: -30px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  font-size: 28px;
  transform: translateX(-50%);
  transition: transform 0.6s ease-out, opacity 0.6s;
}

/* Arm lässt los: das Gebäude ist gerettet, der Arm sinkt zurück ins Meer */
.kr-arm.free {
  animation: none;
  transform: rotate(var(--rot)) translateY(150px);
}

.kr-arm.free .kr-loot {
  opacity: 0;
  transform: translate(-50%, -80px) scale(1.4);
}

/* Ende: geflohen (geschlagen) oder mit der Beute abgetaucht */
.kraken-attack.fled,
.kraken-attack.escaped {
  pointer-events: none;
  animation: kr-out 1.2s ease-in forwards;
}

.kraken-attack.fled .kr-body,
.kraken-attack.escaped .kr-body {
  transform: translateX(var(--kr-x, 0)) translateY(160px) scale(0.6);
}

.kraken-attack.escaped .kr-arm:not(.free) {
  animation: none;
  transform: rotate(0deg) translateY(220px);
}

@keyframes kr-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes kr-out {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes kr-bob {
  from { transform: translateY(0) rotate(-3deg); }
  to { transform: translateY(-8px) rotate(3deg); }
}

@keyframes kr-hit {
  0% { transform: scale(1); }
  40% { transform: scale(0.82) rotate(-8deg); filter: brightness(1.6) drop-shadow(0 0 10px #fff); }
  100% { transform: scale(1); }
}

@keyframes kr-sway {
  from { transform: rotate(var(--rot)); }
  to { transform: rotate(calc(var(--rot) * -0.3)); }
}

@keyframes kr-waves {
  from { transform: translateX(-12px); }
  to { transform: translateX(12px); }
}

.reduced-effects .kr-arm,
.reduced-effects .kr-sea,
.reduced-effects .kr-body span {
  animation: none;
}

/* ---------- Freundes-Rangliste (Statistik) ---------- */
.friends-board {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-panel);
}

.fb-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.fb-game {
  width: auto;
  min-width: 220px;
  max-width: 100%;
  min-height: 44px;
}

.fb-boards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fb-hint {
  flex-basis: 100%;
  margin: 0;
}

.fb-board.active {
  background: var(--gold-grad);
  color: #2a1d00;
  border-color: var(--gold);
}

.fb-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fb-list li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto 36px;
  gap: 8px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-soft);
}

.fb-list li.me {
  border-radius: 10px;
  background: rgba(245, 197, 66, 0.12);
}

.fb-place {
  font-weight: 800;
  text-align: center;
}

.fb-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fb-seen {
  display: block;
}

.fb-value {
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fb-remove {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
}

@media (hover: hover) {
  button.fb-remove:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
  }
}

/* ---------- Casino: Lobby ---------- */
.casino-section-title {
  margin: 22px 0 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.5px;
}

.casino-section .casino-grid {
  margin-top: 10px;
}

.casino-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.casino-card {
  position: relative;
  overflow: hidden;
  padding: 24px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}

/* Farbiger Schein je Spiel */
.casino-card::before {
  content: '';
  position: absolute;
  top: -45%;
  left: -20%;
  width: 140%;
  height: 90%;
  background: radial-gradient(ellipse, var(--accent, rgba(245, 197, 66, 0.25)), transparent 70%);
  pointer-events: none;
}

.casino-card > * {
  position: relative;
}

.casino-card[data-game="slots"]     { --accent: rgba(255, 80, 80, 0.4); }
.casino-card[data-game="scratch"]   { --accent: rgba(80, 220, 140, 0.4); }
.casino-card[data-game="roulette"]  { --accent: rgba(255, 215, 90, 0.4); }
.casino-card[data-game="blackjack"] { --accent: rgba(90, 160, 255, 0.4); }
.casino-card[data-game="poker"]     { --accent: rgba(190, 110, 255, 0.4); }

button.casino-card {
  cursor: pointer;
  color: var(--text);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s;
}

button.casino-card:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  button.casino-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 26px var(--accent);
  }
}

.casino-card h3 {
  margin: 10px 0 4px;
}

.casino-card p {
  margin: 0;
  color: var(--text-muted);
}

.casino-card.locked {
  opacity: 0.6;
}

.casino-emoji {
  display: inline-block;
  font-size: 3.2rem;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  animation: emoji-float 3s ease-in-out infinite;
}

.casino-card:nth-child(2) .casino-emoji { animation-delay: -0.6s; }
.casino-card:nth-child(3) .casino-emoji { animation-delay: -1.2s; }
.casino-card:nth-child(4) .casino-emoji { animation-delay: -1.8s; }
.casino-card:nth-child(5) .casino-emoji { animation-delay: -2.4s; }

@keyframes emoji-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

.casino-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.casino-info-box {
  padding: 16px;
}

.casino-board-box {
  grid-column: 1 / -1;
}

.casino-board-box .friends-board {
  padding: 0;
  border: 0;
  background: none;
}

.casino-info-box h3 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 1rem;
}

.stats-list.compact {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Casino-Statistik: lange Beschriftungen umbrechen statt die Werte aus dem Kasten zu schieben */
#casino-stats {
  grid-template-columns: minmax(min-content, max-content) auto;
}

#casino-stats dt {
  overflow-wrap: anywhere;
}

.casino-history {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.casino-history li {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.history-game {
  white-space: nowrap;
}

.history-text {
  flex: 1;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-diff {
  white-space: nowrap;
  font-weight: 700;
}

/* ---------- Casino: gemeinsame Bausteine ---------- */
.game-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.game-header h2 {
  margin: 0;
}

/* ---------- Statistik je Spiel ---------- */
.game-stats-btn {
  margin-left: auto;
}

.game-stats-btn.active {
  background: var(--gold-grad);
  color: #2a1d00;
}

.game-stats {
  max-width: 560px;
  margin: 0 auto 16px;
}

.game-stats h3,
.game-stats-card h3 {
  margin: 0 0 8px;
  color: var(--gold);
}

.game-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

/* Bezeichnung links (darf umbrechen), Wert rechts in einer Zeile – auch bei sehr großen Zahlen */
.stats-list.game-stats-list {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  max-width: none;
}

.game-stats-list dt {
  min-width: 0;
}

.game-stats-list dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.game-stats-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-panel);
}

.game-stats-list .win {
  color: var(--win);
}

.game-stats-list .loss {
  color: var(--loss);
}

.game-stats-note {
  grid-column: 1 / -1;
}

.game-message {
  min-height: 1.6em;
  margin: 12px 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.game-message.win {
  animation: message-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
  text-shadow: 0 0 14px rgba(111, 220, 140, 0.5);
}

@keyframes message-pop {
  from { transform: scale(0.6); opacity: 0; }
}

.game-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
}

.bet-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bet-label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.bet-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.bet-input {
  width: 140px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
}

/* Im Einsatz-Feld wird die Eingabe lieber etwas schmaler, statt „Max“ allein in eine zweite Zeile
   zu schieben (schmale Spalten neben dem Spielfeld, iPad hochkant) */
.bet-control .bet-input {
  flex: 1 1 96px;
  min-width: 80px;
  max-width: 140px;
}

.bet-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.25);
}

.bet-display {
  font-weight: 700;
  color: var(--gold);
}

/* Ausgeschriebener Betrag unter einem Eingabefeld („5M“ → 5,00 Mio.) */
.amount-preview {
  min-height: 1.3em;
  font-weight: 700;
  color: var(--gold);
}

.bet-warning {
  color: var(--loss);
  font-weight: 400;
  font-size: 0.85rem;
}

.bet-limit {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.8rem;
}

/* ---------- Spielkarten ---------- */
.card,
.card-placeholder {
  position: relative;
  flex: none;
  width: 64px;
  height: 90px;
  border-radius: 8px;
}

.card {
  background: linear-gradient(160deg, #ffffff 0%, #f3f0e6 100%);
  color: #1c1c1c;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.card.red {
  color: #c0392b;
}

.card-corner {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.card-suit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.card-back {
  background: var(--card-back);
  border: 3px solid var(--card-back-edge);
}

/* Zeichen in der Mitte des Kartenrückens (Casino-Look „Schatzkarte“ und „Kaisertisch“) */
.card-back::after {
  content: var(--card-back-mark);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--card-back-mark-color);
  font-size: 1.5rem;
  line-height: 1;
}

.card-back.small::after {
  font-size: 1rem;
}

.card-placeholder {
  border: 2px dashed rgba(255, 255, 255, 0.15);
}

.card.small,
.card-back.small {
  width: 40px;
  height: 56px;
  border-radius: 5px;
}

.card.small .card-corner {
  font-size: 0.7rem;
  top: 3px;
  left: 4px;
}

.card.small .card-suit {
  font-size: 1.2rem;
  top: 12px;
}

/* Neue Karte fliegt vom Stapel herein */
.card.deal-in {
  animation: deal-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards;
}

@keyframes deal-in {
  from { opacity: 0; transform: translate(-60px, -120px) rotate(-25deg) scale(0.7); }
  to   { opacity: 1; transform: none; }
}

/* Verdeckte Karte dreht sich um */
.card.flip-in {
  animation: flip-in 0.5s ease-out backwards;
}

@keyframes flip-in {
  0%   { transform: perspective(400px) rotateY(90deg); filter: brightness(0.6); }
  100% { transform: none; filter: none; }
}

/* ---------- Walzen (Slot-Maschine und Side-Slot) ---------- */
.reels {
  --cell: 70px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  background: #0b0b0b;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.8);
}

.reel {
  position: relative;
  height: calc(var(--cell) * 3);
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, #9a9a9a 0%, #ffffff 22%, #ffffff 78%, #9a9a9a 100%);
}

/* Wölbung der Walze */
.reel::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.reel-strip {
  will-change: transform;
}

.reel-strip.blur {
  filter: blur(1.5px);
}

.reel-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cell);
  font-size: calc(var(--cell) * 0.6);
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

.reel-payline {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(220, 40, 40, 0.8);
  box-shadow: 0 0 6px rgba(255, 0, 0, 0.6);
  pointer-events: none;
  z-index: 1;
}

.reel.reel-bump {
  animation: reel-bump 0.25s ease-out;
}

@keyframes reel-bump {
  40% { transform: translateY(3px); }
}

.reel.win {
  box-shadow: inset 0 0 0 3px var(--gold), 0 0 18px var(--gold);
  animation: reel-win 0.5s ease-in-out 6 alternate;
}

@keyframes reel-win {
  to { box-shadow: inset 0 0 0 3px #fff6c2, 0 0 32px var(--gold); }
}

.seven {
  font-family: Georgia, serif;
  font-weight: 900;
  color: #c0392b;
  text-shadow: 1px 1px 0 var(--gold);
}

/* ---------- Hebel an den Automaten ---------- */
.slot-front,
.vs-front {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.slot-front > .slot-window,
.vs-front > .vs-window {
  flex: 1;
  min-width: 0;
}

.lever {
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  min-height: 170px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.lever:active {
  cursor: grabbing;
}

.lever:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Halterung am Gehäuse (Drehpunkt) */
.lever-mount {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 72%;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: linear-gradient(90deg, #5c5c5c, #e9e9e9 42%, #8a8a8a 70%, #4d4d4d);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}

.lever-mount::after {
  content: '';
  position: absolute;
  inset: 40% 18%;
  border-radius: 6px;
  background: #1c1c1c;
}

/* Chromstange, dreht sich um den Drehpunkt (per JS gestaucht/gespiegelt) */
.lever-arm {
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left: 50%;
  width: 10px;
  height: 39%;
  margin-left: -5px;
  transform-origin: 50% 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #7d7d7d, #fdfdfd 40%, #a4a4a4 75%, #6a6a6a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.lever-knob {
  position: absolute;
  z-index: 4;
  top: 11%;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb3a8 0, #f0443a 30%, #b3120c 70%, #6e0503 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.55), inset 0 -4px 7px rgba(0, 0, 0, 0.35);
  transition: filter 0.3s;
}

/* Roter Schein um den Knauf: nur die Deckkraft pulsiert */
.lever-knob::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 90, 70, 0.75);
  opacity: 0;
  animation: glow-pulse 1.6s ease-in-out infinite alternate;
  pointer-events: none;
}

.lever.disabled {
  cursor: default;
}

.lever.disabled .lever-knob {
  animation: none;
  filter: saturate(0.4) brightness(0.8);
}

@media (hover: hover) {
  .lever:not(.disabled):hover .lever-knob {
    filter: brightness(1.15);
  }
}

.lever-small {
  flex-basis: 38px;
  width: 38px;
  min-height: 110px;
}

.lever-small .lever-mount {
  height: 30px;
  border-radius: 8px;
}

.lever-small .lever-arm {
  width: 7px;
  margin-left: -3.5px;
}

.lever-small .lever-knob {
  width: 26px;
  height: 26px;
}

/* ---------- Slot-Maschine ---------- */
.slots-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  align-items: flex-start;
}

.slot-machine {
  position: relative;
  flex: 1 1 360px;
  max-width: 520px;
  padding: 28px 20px 20px;
  border: 4px solid var(--gold-dark);
  border-radius: 28px;
  background: linear-gradient(180deg, #8c2222 0%, #5a1010 55%, #3a0909 100%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(255, 229, 138, 0.2);
}

.slot-machine .reels {
  --cell: 80px;
}

/* Blinkende Lämpchen oben am Automaten */
.slot-lights {
  position: absolute;
  top: 9px;
  left: 28px;
  right: 28px;
  height: 8px;
  background: radial-gradient(circle, #ffe58a 0 3px, transparent 4px) 0 0 / 18px 8px repeat-x;
  animation: lights 0.8s steps(2) infinite;
}

@keyframes lights {
  50% { opacity: 0.35; }
}

.slot-machine.slot-win {
  animation: slot-win 0.35s ease-in-out 6 alternate;
}

@keyframes slot-win {
  to { box-shadow: 0 0 50px var(--gold), inset 0 0 0 3px #fff6c2; border-color: var(--gold-light); }
}

.slot-title {
  margin-bottom: 12px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(245, 197, 66, 0.6);
}

.paytable {
  flex: 0 1 260px;
  padding: 16px;
}

.paytable h3 {
  margin: 0 0 8px;
  color: var(--gold);
}

.paytable table {
  width: 100%;
  border-collapse: collapse;
}

.paytable th,
.paytable td {
  padding: 4px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.paytable th {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.paytable-icon {
  font-size: 1.4rem;
}

/* ---------- Rubbellose ---------- */
.scratch-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.scratch-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 1 250px;
}

.ticket-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "icon cost" "icon lock";
  column-gap: 12px;
  padding: 12px 14px;
  border: 2px solid transparent;
  border-radius: 14px;
  color: #1d1400;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s, box-shadow 0.15s;
}

.ticket-icon {
  grid-area: icon;
  align-self: center;
  font-size: 2.2rem;
}

.ticket-name {
  grid-area: name;
}

.ticket-cost {
  grid-area: cost;
  font-size: 0.85rem;
}

.ticket-lock {
  grid-area: lock;
  font-size: 0.75rem;
}

.ticket-choice.active {
  border-color: #ffffff;
  transform: scale(1.03);
  box-shadow: 0 0 0 3px var(--gold), 0 8px 24px rgba(0, 0, 0, 0.45);
}

.ticket-choice:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.theme-green  { background: linear-gradient(135deg, #c4f5d2, #3fae6a); }
.theme-gold   { background: linear-gradient(135deg, #fff1b0, #e0a91b); }
.theme-red    { background: linear-gradient(135deg, #ffc9c9, #c0392b); }
.theme-purple { background: linear-gradient(135deg, #eadcff, #7b4fc9); }
.theme-ice    { background: linear-gradient(135deg, #e6fbff, #5ad8ff 55%, #b48cff); }
.theme-sea    { background: linear-gradient(135deg, #d9fff3, #34c3b0 55%, #f5c542); }
.theme-black  { background: linear-gradient(135deg, #5c5c6a, #15151c 60%, #b8860b); color: #ffe58a; }

.vip-card.vip-4 { background: linear-gradient(135deg, #3a3a46, #0d0d12 60%, #6a6a7a); color: #f1f1f8; border-color: #8a8a9a; }
.vip-card.vip-5 {
  background: linear-gradient(135deg, #fff3b0, #f5c542 35%, #b8860b 55%, #fff3b0 75%, #c38d12);
  background-size: 200% 200%;
  color: #3a2a00;
  border-color: #fff3b0;
  box-shadow: 0 0 18px rgba(245, 197, 66, 0.6);
  animation: vip-shine 3s ease-in-out infinite alternate;
}

@keyframes vip-shine {
  to { background-position: 100% 100%; }
}

.scratch-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 360px;
  max-width: 460px;
}

.scratch-ticket {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  border-radius: 20px;
  color: #1d1400;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Gezackter Rand wie bei einem abgerissenen Los */
.scratch-ticket::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 8px;
  background: radial-gradient(circle, var(--bg) 3px, transparent 4px) 0 -4px / 14px 8px repeat-x;
}

.scratch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.scratch-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
}

.scratch-price {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.85;
}

.scratch-rules {
  margin: 6px 0 12px;
  font-size: 0.9rem;
  font-weight: 800;
}

.scratch-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #fffdf3;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.15);
}

@supports not (aspect-ratio: 1 / 1) {
  .scratch-grid {
    height: 340px;
  }
}

.scratch-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  font-weight: 900;
}

.scratch-icon {
  font-size: 1.9rem;
}

.scratch-amount {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.scratch-field.field-pop {
  animation: field-pop 0.35s ease-out;
}

@keyframes field-pop {
  40% { transform: scale(1.15); }
}

.scratch-field.win {
  background: radial-gradient(circle, #fff6c2, #f5c542);
  animation: field-win 0.5s ease-in-out 8 alternate;
}

@keyframes field-win {
  to { transform: scale(1.06); box-shadow: inset 0 0 0 3px #b8860b; }
}

/* Münze, die beim Auto-Rubbeln über das Los fährt */
.scratch-coin {
  position: absolute;
  z-index: 2;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, var(--gold) 40%, var(--gold-dark) 100%);
  border: 3px solid #8a6508;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(255, 243, 176, 0.45);
  pointer-events: none;
}

.scratch-auto.active {
  background: var(--gold-grad);
  color: #2a1d00;
}

.scratch-auto-actions {
  margin-top: 0;
}

/* Übersicht nach „Lose sofort“ */
.scratch-batch {
  margin: 4px 0 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(0, 0, 0, 0.25);
}

.sb-head {
  margin-bottom: 10px;
  text-align: center;
}

.sb-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.sb-ticket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  animation: sb-flip 0.45s ease-out both;
}

.sb-ticket.win {
  border-color: var(--gold);
  background: rgba(245, 197, 66, 0.16);
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.3);
}

.sb-ticket.even {
  border-color: rgba(255, 255, 255, 0.35);
}

.sb-ticket.lose {
  opacity: 0.6;
}

.sb-icon {
  font-size: 1.4rem;
  line-height: 1.2;
}

.sb-amount {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes sb-flip {
  from { opacity: 0; transform: rotateY(90deg) scale(0.8); }
  to { opacity: 1; transform: none; }
}

.scratch-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  cursor: pointer;
  touch-action: none; /* Rubbeln mit dem Finger scrollt nicht die Seite */
  transition: opacity 0.5s;
}

.scratch-canvas.cleared {
  opacity: 0;
  pointer-events: none;
}

.scratch-empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-weight: 800;
  color: #6b5a2a;
}

/* ---------- Roulette ---------- */
.roulette-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.roulette-wheel-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.wheel-pointer {
  color: var(--gold);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: -10px;
  z-index: 1;
}

.wheel {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 10px solid #5a3a1a;
  box-shadow: 0 0 0 3px var(--gold-dark), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.wheel-num {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.wheel-num span {
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.wheel-center {
  position: absolute;
  top: 32%;
  right: 32%;
  bottom: 32%;
  left: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, var(--gold) 40%, var(--gold-dark) 100%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.roulette-results {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 280px;
}

.roulette-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
}

.roulette-num.red,
.rb-cell.red {
  background: #b03a2e;
}

.roulette-num.black,
.rb-cell.black {
  background: #1c1c1c;
}

.roulette-num.green,
.rb-cell.green {
  background: #1e8449;
}

.roulette-table-area {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 760px;
}

.roulette-board-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.roulette-board {
  display: grid;
  grid-template-columns: 1.2fr repeat(12, 1fr) 1.2fr;
  grid-template-rows: repeat(5, 44px);
  gap: 3px;
  min-width: 520px;
  background: var(--felt);
  border: 3px solid var(--gold-dark);
  border-radius: 10px;
  padding: 6px;
}

.rb-cell {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}

.rb-cell:hover {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.rb-cell.winner {
  box-shadow: inset 0 0 0 3px var(--gold), 0 0 12px var(--gold);
}

.roulette-board.disabled .rb-cell {
  cursor: not-allowed;
}

.rb-chip {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 22px;
  height: 22px;
  padding: 0 3px;
  border-radius: 11px;
  background: var(--gold);
  border: 2px dashed #fff;
  color: #1d1400;
  font-size: 0.65rem;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.roulette-total {
  margin-top: 8px;
  text-align: center;
  color: var(--text-muted);
}

/* ---------- Blackjack ---------- */
.bj-table {
  max-width: 760px;
  margin: 0 auto;
  background: var(--felt);
  border: 6px solid var(--rail);
  box-shadow: var(--rail-glow);
  border-radius: 24px 24px 120px 120px;
  padding: 20px 20px 36px;
}

.bj-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bj-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
}

.bj-cards {
  display: flex;
  gap: 6px;
  min-height: 90px;
}

.bj-rules {
  text-align: center;
  color: var(--gold);
  opacity: 0.8;
  margin: 18px 0;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.bj-hands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.bj-hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 2px solid transparent;
}

.bj-hand.active {
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 16px rgba(245, 197, 66, 0.35);
}

/* Nach dem Teilen: Karten einer Hand überlappen, damit auch viele Karten nebeneinander passen */
.bj-hands.split .bj-cards {
  gap: 0;
}

.bj-hands.split .bj-cards > * + * {
  margin-left: -26px;
}

.bj-hand-no {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bj-hand-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.85rem;
}

.bj-value {
  font-weight: 800;
  font-size: 1rem;
}

.bj-result {
  font-weight: 700;
}

.bj-play-actions {
  display: contents;
}

.bj-play-actions[hidden] {
  display: none;
}

/* ---------- Texas Hold'em ---------- */
.poker-result {
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.poker-tier p + p {
  margin-top: 4px;
}

.poker-tier .btn {
  margin-top: 12px;
}

.poker-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.poker-table {
  position: relative;
  max-width: 820px;
  aspect-ratio: 2 / 1.05;
  margin: 80px auto 70px;
}

.poker-felt {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--felt);
  border: 10px solid var(--rail);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--gold-dark), 0 10px 30px rgba(0, 0, 0, 0.5), var(--rail-glow);
}

.poker-board {
  display: flex;
  gap: 6px;
}

.poker-pot {
  font-weight: 800;
  color: var(--gold);
}

.poker-message {
  min-height: 1.3em;
  max-width: 70%;
  text-align: center;
  font-size: 0.9rem;
}

.poker-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}

/* Sitzplätze im Uhrzeigersinn, Platz 0 (du) unten in der Mitte */
.seat-0 { left: 50%; top: 100%; }
.seat-1 { left: 6%;  top: 78%; }
.seat-2 { left: 6%;  top: 22%; }
.seat-3 { left: 50%; top: 0; }
.seat-4 { left: 94%; top: 22%; }
.seat-5 { left: 94%; top: 78%; }

.seat-cards {
  display: flex;
  gap: 3px;
  min-height: 56px;
  margin-bottom: -10px;
  z-index: 1;
}

.seat-plate {
  width: 100%;
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 10px 6px 4px;
  text-align: center;
  font-size: 0.8rem;
}

.seat-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat-chips {
  color: var(--gold);
}

.seat-status {
  color: var(--text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dealer-btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 0.65rem;
  line-height: 16px;
  font-weight: 900;
}

.seat-bet {
  position: absolute;
  top: 50%;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--gold);
  color: #1d1400;
  font-size: 0.75rem;
  font-weight: 700;
}

.seat-0 .seat-bet { top: -24px; }
.seat-3 .seat-bet { top: auto; bottom: -24px; }
.seat-1 .seat-bet, .seat-2 .seat-bet { left: calc(100% + 4px); }
.seat-4 .seat-bet, .seat-5 .seat-bet { right: calc(100% + 4px); }

.poker-seat.active .seat-plate {
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}

.poker-seat.winner .seat-plate {
  border-color: #6fdc8c;
  box-shadow: 0 0 14px #6fdc8c;
}

.poker-seat.winner .seat-status {
  color: #6fdc8c;
}

.poker-seat.folded,
.poker-seat.out {
  opacity: 0.45;
}

.poker-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 90px;
}

.poker-hand-name {
  color: var(--text-muted);
}

.raise-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.raise-slider {
  width: 200px;
  accent-color: var(--gold);
}

.poker-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
}

.poker-log {
  flex: 1;
  min-width: 240px;
  font-size: 0.85rem;
}

.poker-log summary {
  cursor: pointer;
  color: var(--text-muted);
}

.poker-log ul {
  max-height: 200px;
  overflow-y: auto;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
}

@supports not (aspect-ratio: 1 / 1) {
  .poker-table {
    height: 0;
    padding-bottom: 52.5%;
  }
}

/* ---------- Roulette: Kugel & Chips ---------- */
.wheel-wrap {
  position: relative;
}

.ball-track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.ball {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d0d0d0 60%, #8a8a8a);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  transition: top 0.9s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.ball.rolling {
  animation: ball-hop 0.18s ease-in-out infinite alternate;
}

@keyframes ball-hop {
  to { transform: translateY(3px); }
}

/* Die Kugel fällt in die Zahlen-Tasche */
.ball.dropped {
  top: 26px;
}

.roulette-num.result-pop {
  animation: result-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes result-pop {
  from { transform: scale(0); }
}

.rb-chip.chip-drop {
  animation: chip-drop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes chip-drop {
  from { transform: translateY(-14px) scale(1.4); opacity: 0; }
}

.rb-cell.winner {
  animation: cell-win 0.5s ease-in-out 6 alternate;
}

@keyframes cell-win {
  to { box-shadow: inset 0 0 0 3px #fff6c2, 0 0 20px var(--gold); }
}

/* ---------- Blackjack: Ergebnisse ---------- */
.bj-result {
  display: inline-block;
  animation: result-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}

.bj-hand.done-win {
  border-color: var(--win);
  box-shadow: 0 0 24px rgba(111, 220, 140, 0.5);
}

.bj-hand.done-loss {
  opacity: 0.75;
}

/* ---------- Poker: Pot ---------- */
.poker-pot.fx-pulse {
  animation: pot-pulse 0.6s ease-out;
}

@keyframes pot-pulse {
  40% { transform: scale(1.3); color: #fff6c2; }
}

.poker-seat.winner .seat-plate {
  animation: seat-win 0.6s ease-in-out 4 alternate;
}

@keyframes seat-win {
  to { box-shadow: 0 0 26px #6fdc8c; }
}

/* ---------- Statistiken & Einstellungen ---------- */
.stats-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  max-width: 560px;
  padding: 16px 20px;
}

.stats-list dt {
  color: var(--text-muted);
}

.stats-list dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stats-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 12px;
}

.settings {
  display: grid;
  max-width: 560px;
  padding: 6px 18px;
}

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 600;
}

.setting:last-child {
  border-bottom: none;
}

.setting input[type="range"] {
  width: 200px;
  max-width: 50%;
  accent-color: var(--gold);
}

.setting select {
  width: auto;
}

/* Kippschalter */
.switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 54px;
  height: 32px;
  margin: 0;
  border-radius: 16px;
  background: #2a3b33;
  cursor: pointer;
  transition: background 0.2s;
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s;
}

.switch:checked {
  background: var(--gold-dark);
}

.switch:checked::after {
  transform: translateX(22px);
}

.transfer-box {
  max-width: 640px;
}

/* Spielweiter Name in den Einstellungen */
.setting-hint {
  display: block;
  margin-top: 2px;
  font-weight: 400;
}

.name-edit {
  display: flex;
  flex: none;
  gap: 6px;
}

.name-edit .bet-input {
  width: 170px;
}

/* Schalter für das passive Einkommen unter den Gebäuden */
.passive-toggle {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  cursor: pointer;
}

.passive-hint {
  display: block;
  margin-top: 2px;
}

.building-list.paused .building-meta {
  opacity: 0.6;
}

.transfer-box textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  word-break: break-all;
}

/* ---------- Toast-Meldung ---------- */
.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 90;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.88);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Fortschritt: Boni, goldene Dublone, Meldungen ---------- */
.buff-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
}

.buff-bar:not(:empty) {
  padding-top: 8px;
}

.buff {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  color: #1d1400;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 3px 12px;
  position: relative;
}

.buff::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  box-shadow: 0 0 14px var(--gold);
  opacity: 0;
  animation: glow-pulse 1.2s ease-in-out infinite alternate;
  pointer-events: none;
}

.golden-coin {
  position: fixed;
  z-index: 50;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #fff3b0;
  background: radial-gradient(circle at 35% 30%, #fffbe0 0%, var(--gold) 40%, var(--gold-dark) 100%);
  box-shadow: 0 0 24px 6px rgba(245, 197, 66, 0.8);
  cursor: pointer;
  animation: golden-pop 0.4s ease-out, golden-float 2s ease-in-out 0.4s infinite alternate;
}

.golden-coin span {
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 900;
  color: #8a6508;
}

@keyframes golden-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@keyframes golden-float {
  from { transform: translateY(0) rotate(-8deg); }
  to   { transform: translateY(-10px) rotate(8deg); }
}

.notify-stack {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 85;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}

.notify {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #000d;
  border: 1px solid var(--gold-dark);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  animation: notify-in 0.3s ease-out;
  transition: opacity 0.4s, transform 0.4s;
}

.notify.hide {
  opacity: 0;
  transform: translateX(30px);
}

.notify-icon {
  font-size: 1.8rem;
}

@keyframes notify-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: none; }
}

.progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.panel .stats-list {
  margin: 12px 0;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.achievement {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.achievement.unlocked {
  border-color: var(--gold-dark);
  box-shadow: inset 0 0 18px rgba(245, 197, 66, 0.12);
}

.achievement.locked {
  opacity: 0.5;
}

.achievement-icon {
  font-size: 2rem;
}

.achievement-name {
  font-weight: 700;
  margin: 4px 0 2px;
}

.achievement-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer {
  padding: 24px 20px 32px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 32px;
}

.footer a {
  color: var(--gold);
}

/* ---------- VIP-Karte ---------- */
.vip-card {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #2a5a43, #143024);
  border: 1px solid var(--border);
}

.vip-card.vip-1 { background: linear-gradient(135deg, #e8e8e8, #9a9a9a); color: #222; }
.vip-card.vip-2 { background: linear-gradient(135deg, #fff3b0, var(--gold-dark)); color: #3a2a00; }
.vip-card.vip-3 { background: linear-gradient(135deg, #d6f4ff, #6ab7ff 50%, #b48cff); color: #10233a; }

/* ---------- Poker: Spielmodus (Klassisch / Turbo) ---------- */
.poker-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
  max-width: 760px;
}

.poker-mode {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}

.poker-mode:active {
  transform: scale(0.98);
}

.poker-mode.active {
  border-color: var(--gold);
  background: rgba(245, 197, 66, 0.14);
  box-shadow: 0 0 14px rgba(245, 197, 66, 0.25);
}

.poker-mode[data-mode="turbo"].active {
  border-color: #5ad8ff;
  background: rgba(90, 216, 255, 0.12);
  box-shadow: 0 0 14px rgba(90, 216, 255, 0.3);
}

.poker-mode-name {
  font-weight: 800;
}

.poker-mode-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mp-modes {
  margin: 4px 0 8px;
}

.poker-mode[data-mode="blitz"].active {
  border-color: #ff8a3c;
  background: rgba(255, 138, 60, 0.12);
  box-shadow: 0 0 14px rgba(255, 138, 60, 0.3);
}

/* Blitz: Zahl der Hände wählen */
.poker-hands {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 700;
}

.poker-hands-btn {
  min-width: 56px;
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
}

.poker-hands-btn.active {
  border-color: #ff8a3c;
  background: rgba(255, 138, 60, 0.2);
  color: #ffd2a8;
}

.poker-skip {
  margin-top: 8px;
}

/* Der Betrag auf dem Aussteigen-Knopf ändert sich laufend: Tipps sollen immer den Knopf treffen */
.poker-leave * {
  pointer-events: none;
}

/* ---------- Poker mit Freunden ---------- */
.poker-section-title {
  margin: 24px 0 8px;
  color: var(--gold);
}

.mp-forms {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.mp-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 240px;
  min-width: 0;
}

.mp-tier {
  flex: 1 1 auto;
  min-width: 0;
}

.mp-form .bet-row {
  justify-content: flex-start;
}

.mp-form .bet-input {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.mp-code-input {
  width: 110px !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
}

.mp-create-reason {
  color: var(--text-muted);
}

.mp-room {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.mp-code-box {
  background: var(--bg-panel);
  border: 2px dashed var(--gold-dark);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.mp-code {
  font-family: ui-monospace, monospace;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--gold);
  margin: 4px 0 10px;
}

.mp-members {
  list-style: none;
  padding: 0;
  margin: 0 auto 12px;
  max-width: 360px;
  text-align: left;
}

.mp-members li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-members li span:first-child {
  flex: 1;
}

.mp-tag {
  font-size: 0.75rem;
  color: var(--gold);
}

.mp-check {
  display: block;
  margin: 8px 0;
}

.mp-status.online { color: #6fdc8c; }
.mp-status.connecting { color: var(--gold); }
.mp-status.lost { color: #ff8a80; }

.poker-notice {
  max-width: 820px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--gold-dark);
  border-radius: 10px;
}

.turn-timer {
  min-height: 1.2em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.turn-timer.urgent {
  color: #ff8a80;
}

/* ---------- Effekte ---------- */
.fx-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 75;
  pointer-events: none;
}

.fx-float {
  position: fixed;
  z-index: 76;
  font-weight: 900;
  font-size: 1.5rem;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  animation: fx-float 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.fx-float.win {
  color: var(--gold-light);
}

.fx-float.big {
  font-size: 2rem;
}

@keyframes fx-float {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

.fx-pulse {
  animation: fx-pulse 0.4s ease-out;
}

@keyframes fx-pulse {
  40% { transform: scale(1.12); }
}

.wallet.fx-wallet {
  animation: wallet-pop 0.7s ease-out;
}

@keyframes wallet-pop {
  30% { transform: scale(1.18); filter: drop-shadow(0 0 14px var(--gold)); }
}

main.fx-shake {
  animation: shake 0.45s;
}

main.fx-shake-big {
  animation: shake-big 0.9s;
}

@keyframes shake {
  20% { transform: translate(-6px, 2px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, 1px); }
  80% { transform: translate(3px, -1px); }
}

@keyframes shake-big {
  10% { transform: translate(-12px, 4px) rotate(-0.5deg); }
  20% { transform: translate(10px, -6px) rotate(0.5deg); }
  30% { transform: translate(-9px, 3px); }
  40% { transform: translate(8px, -4px); }
  55% { transform: translate(-5px, 2px); }
  70% { transform: translate(4px, -2px); }
  85% { transform: translate(-2px, 1px); }
}

.fx-flash {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 74;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.75), rgba(255, 215, 0, 0.15) 60%, transparent);
  pointer-events: none;
  animation: flash 0.7s ease-out forwards;
}

@keyframes flash {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---------- Gewinn-Banner ---------- */
.win-banner {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.78));
  cursor: pointer;
  animation: banner-in 0.3s ease-out;
}

.win-banner.hide {
  animation: banner-out 0.4s ease-in forwards;
}

@keyframes banner-in {
  from { opacity: 0; }
}

@keyframes banner-out {
  to { opacity: 0; }
}

.win-rays {
  position: absolute;
  width: 160vmax;
  height: 160vmax;
  background: repeating-conic-gradient(rgba(255, 215, 90, 0.22) 0deg 8deg, transparent 8deg 16deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%);
  mask-image: radial-gradient(circle, #000 0%, transparent 60%);
  animation: rays 12s linear infinite;
}

.win-content {
  position: relative;
  padding: 20px;
  text-align: center;
  animation: win-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes win-pop {
  from { transform: scale(0.2) rotate(-8deg); opacity: 0; }
}

.win-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  letter-spacing: 2px;
  line-height: 1.1;
  background: linear-gradient(180deg, #fff9d6 0%, #ffd84a 40%, #e09b0c 70%, #fff3b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #6b4a04) drop-shadow(0 0 24px rgba(255, 200, 40, 0.8));
  animation: title-wobble 1.2s ease-in-out infinite alternate;
}

@keyframes title-wobble {
  from { transform: rotate(-2deg) scale(1); }
  to   { transform: rotate(2deg) scale(1.05); }
}

.win-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 900;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(255, 215, 90, 0.9), 0 4px 0 rgba(0, 0, 0, 0.5);
}

.win-sub {
  margin-top: 8px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-light);
}

.win-hint {
  margin-top: 18px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.win-banner.mega .win-title {
  background: linear-gradient(180deg, #ffe6ff 0%, #ff5ec8 45%, #8a2be2 80%, #ffd6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 0 #4a0d5e) drop-shadow(0 0 30px rgba(255, 94, 200, 0.85));
}

.win-banner.mega .win-rays {
  background: repeating-conic-gradient(rgba(255, 94, 200, 0.22) 0deg 8deg, transparent 8deg 16deg);
}

.win-banner.jackpot .win-title {
  font-size: clamp(3rem, 12vw, 7rem);
  animation: jackpot-title 0.45s ease-in-out infinite alternate;
}

.win-banner.jackpot .win-rays {
  background: repeating-conic-gradient(rgba(255, 90, 90, 0.28) 0deg 6deg, rgba(255, 215, 90, 0.28) 6deg 12deg, transparent 12deg 18deg);
  animation-duration: 5s;
}

@keyframes jackpot-title {
  from { transform: scale(1) rotate(-3deg); }
  to   { transform: scale(1.12) rotate(3deg); }
}

/* ---------- Animationen reduziert (Einstellung oder System-Vorgabe) ---------- */
body.reduced-effects .big-coin,
body.reduced-effects .big-coin::after,
body.reduced-effects .coin-stage::before,
body.reduced-effects .btn.btn-primary::after,
body.reduced-effects .casino-emoji,
body.reduced-effects .logo-coin,
body.reduced-effects .race-track,
body.reduced-effects .vs-cell.win,
body.reduced-effects .vs-reel.anticipation,
body.reduced-effects .wheel-free.ready,
body.reduced-effects .upgrade,
body.reduced-effects .upgrade::before,
body.reduced-effects .upgrade::after,
body.reduced-effects .lever-knob::after,
body.reduced-effects .buff::after,
body.reduced-effects .side-auto.active::after,
body.reduced-effects .combo-fill::after,
body.reduced-effects .combo-fill,
body.reduced-effects .win-rays,
body.reduced-effects .win-title,
body.reduced-effects .slot-lights,
body.reduced-effects .golden-coin {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .big-coin,
  .big-coin::after,
  .coin-stage::before,
  .btn.btn-primary::after,
  .casino-emoji,
  .logo-coin,
  .win-rays,
  .win-title,
  .slot-lights {
    animation: none !important;
  }
}

/* ---------- Lobby: Farben der neuen Spiele ---------- */
.casino-card[data-game="wheel"]  { --accent: rgba(120, 230, 120, 0.4); }
.casino-card[data-game="plinko"] { --accent: rgba(255, 200, 60, 0.45); }
.casino-card[data-game="mines"]  { --accent: rgba(60, 200, 220, 0.4); }
.casino-card[data-game="crash"]  { --accent: rgba(255, 110, 50, 0.45); }
.casino-card[data-game="race"]   { --accent: rgba(80, 150, 255, 0.4); }

/* Gemeinsames Layout: Spielfeld links, Bedienung rechts (auf schmalen Geräten untereinander) */
.wheel-layout,
.plinko-layout,
.mines-layout,
.crash-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.wheel-controls,
.plinko-controls,
.mines-controls,
.crash-controls {
  flex: 1 1 280px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Glücksrad ---------- */
.wheel-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.fortune-wrap {
  position: relative;
  width: min(86vw, 400px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #5a3a1a, 0 0 0 12px #b8860b, 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 50px rgba(245, 197, 66, 0.25);
  transition: box-shadow 0.4s;
}

.fortune-wrap.bonus {
  box-shadow: 0 0 0 8px #7a1a1a, 0 0 0 12px #ffd95e, 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 70px rgba(255, 217, 94, 0.7);
}

.fortune-wheel {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.fortune-pointer {
  position: absolute;
  top: -18px;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  margin-left: -16px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 34px solid #ff4d4d;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
  transform-origin: 50% 0;
}

.fortune-pointer.wheel-pointer-flick {
  animation: pointer-flick 0.12s ease-out;
}

@keyframes pointer-flick {
  50% { transform: rotate(-14deg); }
}

.fortune-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d0, #f5c542 50%, #a87408);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  font-size: clamp(1.4rem, 5vw, 2.2rem);
}

.fortune-wrap.wheel-bonus-flash {
  animation: bonus-flash 1.2s ease-out;
}

@keyframes bonus-flash {
  20%, 60% { box-shadow: 0 0 0 8px #fff3b0, 0 0 0 12px #ffd95e, 0 0 90px rgba(255, 217, 94, 1); }
}

.wheel-results,
.crash-history {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 420px;
}

.wheel-result,
.crash-chip {
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  font-weight: 800;
  font-size: 0.85rem;
}

.wheel-paytable {
  width: 100%;
  margin-top: 8px;
}

.wheel-paytable p {
  margin: 6px 0;
  line-height: 1.9;
}

.wheel-chip {
  display: inline-block;
  min-width: 38px;
  padding: 1px 8px;
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  text-align: center;
}

.wheel-chip.gold {
  background: linear-gradient(135deg, #fff3b0, #d4a017);
  color: #3a2a00;
}

.wheel-free.ready {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(245, 197, 66, 0.45);
}

/* ---------- Münzfall ---------- */
.plinko-board {
  flex: 1 1 360px;
  max-width: 560px;
  padding: 12px;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at top, #24543f, #0b2219 75%);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
}

.plinko-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.plinko-risks,
.plinko-counts,
.mines-skulls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.plinko-risk.active,
.plinko-count.active,
.mines-skull.active,
.chicken-diff.active {
  background: var(--gold-grad);
  color: #2a1d00;
  border-color: var(--gold);
}

.plinko-count-label {
  margin-top: 10px;
  text-align: center;
}

.plinko-count {
  min-width: 56px;
}

.plinko-total {
  min-height: 1.4em;
  margin-top: 6px;
  text-align: center;
}

/* ---------- Hafenbörse ---------- */
.stocks-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.stocks-list {
  display: grid;
  gap: 8px;
}

.stock-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "emoji name price"
    "spark spark change";
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.stock-card.active {
  border-color: var(--gold);
  background: rgba(245, 197, 66, 0.1);
}

.stock-emoji {
  grid-area: emoji;
  font-size: 1.6rem;
}

.stock-name {
  grid-area: name;
  min-width: 0;
  font-weight: 700;
  line-height: 1.2;
}

.stock-own {
  display: block;
  color: var(--gold-light);
  font-weight: 600;
}

.stock-own:empty {
  display: none;
}

.stock-price {
  grid-area: price;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stock-change {
  grid-area: change;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stock-spark {
  grid-area: spark;
  display: block;
  width: 100%;
  height: 30px;
}

.stock-change.up,
.stock-big-change.up,
.stock-news li.up b {
  color: #6fdc8c;
}

.stock-change.down,
.stock-big-change.down,
.stock-news li.down b {
  color: #ff6b5e;
}

.stocks-detail {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.stock-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}

.stock-title {
  margin: 0;
  color: var(--gold);
  font-size: 1.15rem;
}

.stock-big-price {
  font-size: 1.7rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.stock-big-change {
  font-weight: 700;
}

.stock-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 10px 0 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
}

.stock-quotes,
.stock-holding,
.stock-depot {
  margin: 6px 0;
  text-align: center;
}

.stock-news-title {
  margin: 16px 0 4px;
  color: var(--gold);
}

.stock-news {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.stock-news li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.9rem;
}

.stock-news li b {
  white-space: nowrap;
}

/* iPad hochkant und schmaler: Liste oben (zwei Spalten), darunter die Firma */
@media (max-width: 900px) {
  .stocks-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .stocks-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .stocks-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Schatzinsel ---------- */
.mines-island {
  flex: 1 1 340px;
  max-width: 470px;
  padding: 18px;
  border-radius: 32px;
  background:
    radial-gradient(ellipse at center, #f3d9a0 0%, #e2bf78 58%, #3aa0b8 60%, #1b6e8a 100%);
  box-shadow: var(--shadow), inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.mines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.mine-cell {
  aspect-ratio: 1;
  min-height: 52px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(160deg, #e9cf92, #c79f55);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 3px 6px rgba(0, 0, 0, 0.25);
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
}

.mine-cell:not(:disabled):active {
  transform: scale(0.92);
}

@media (hover: hover) {
  .mine-cell:not(:disabled):hover {
    background: linear-gradient(160deg, #f3dca5, #d4ad62);
  }
}

.mine-cell:disabled {
  cursor: default;
}

.mine-cell.found {
  background: radial-gradient(circle, #fff3b0, #e0a91b);
  animation: mine-found 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes mine-found {
  from { transform: scale(0.5) rotate(-15deg); }
}

.mine-cell.skull {
  background: radial-gradient(circle, #5a5a66, #23232b);
}

.mine-cell.hit {
  background: radial-gradient(circle, #ff6b4a, #8a1c0c);
}

.mine-cell.faded {
  opacity: 0.45;
}

.mine-cell.mine-boom {
  animation: mine-boom 0.5s ease-out;
}

@keyframes mine-boom {
  20% { transform: scale(1.35); }
  40% { transform: scale(0.9) rotate(8deg); }
  60% { transform: scale(1.1) rotate(-6deg); }
}

.mines-info {
  margin-top: 10px;
  text-align: center;
  color: var(--text-muted);
}

.mines-info b {
  color: var(--gold-light);
}

/* ---------- Kanonenkugel ---------- */
.crash-scene {
  flex: 1 1 420px;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crash-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #0b1030 0%, #1d2a5a 55%, #3b4a7a 100%);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
}

.crash-chip.low  { color: var(--loss); }
.crash-chip.high { color: var(--win); }
.crash-chip.huge { color: #ffd95e; border-color: var(--gold); }

.crash-auto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--text-muted);
}

.crash-auto .bet-input {
  width: 90px;
}

.btn.crash-cash {
  min-width: 260px;
  background: linear-gradient(180deg, #8ff0a8, #2fa866);
  color: #0b2a16;
}

/* ---------- Schiffsrennen ---------- */
.race-layout {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.race-comment {
  min-height: 1.6em;
  margin-bottom: 8px;
  font-weight: 800;
  color: var(--gold-light);
  text-align: center;
}

.race-lanes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #0e4d6b, #06283a);
  box-shadow: var(--shadow);
}

.race-lane {
  display: grid;
  grid-template-columns: 150px auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 5px solid var(--ship);
}

.race-lane.winner {
  background: rgba(245, 197, 66, 0.18);
  box-shadow: 0 0 16px rgba(245, 197, 66, 0.35);
}

.race-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.race-name {
  font-weight: 800;
  font-size: 0.9rem;
}

.race-mult {
  font-weight: 900;
  color: var(--gold-light);
}

.race-stake {
  font-size: 0.8rem;
  color: var(--win);
  min-height: 1em;
}

.race-track {
  position: relative;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255, 255, 255, 0.07) 26px 30px),
    linear-gradient(180deg, #1b6e8a, #13506a);
  background-size: 60px 100%, 100% 100%;
  animation: waves 1.6s linear infinite;
}

/* Ziellinie */
.race-track::after {
  content: '';
  position: absolute;
  top: 0;
  right: 6px;
  bottom: 0;
  width: 8px;
  background: repeating-linear-gradient(180deg, #fff 0 8px, #222 8px 16px);
  opacity: 0.85;
}

@keyframes waves {
  to { background-position: -60px 0, 0 0; }
}

.race-ship {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -22px;
  font-size: 2.2rem;
  line-height: 44px;
  will-change: transform;
}

.race-flag {
  position: absolute;
  top: 2px;
  left: 18px;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: var(--ship);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.race-place {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 900;
}

.race-total {
  margin-top: 10px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .race-lane {
    grid-template-columns: 1fr auto;
  }

  .race-track {
    grid-column: 1 / -1;
  }
}

/* ---------- Video-Slots (5 Walzen) ---------- */
.casino-card[data-game="vsPirate"]  { --accent: rgba(245, 197, 66, 0.45); }
.casino-card[data-game="vsOcean"]   { --accent: rgba(90, 216, 255, 0.45); }
.casino-card[data-game="vsVolcano"] { --accent: rgba(255, 106, 43, 0.5); }

.vs-pirate  { --vs-bg: linear-gradient(160deg, #6b3410, #2a1405); --vs-frame: #d4a017; --vs-reel: linear-gradient(180deg, #fffaf0, #eadbb6); --vs-glow: rgba(245, 197, 66, 0.55); }
.vs-ocean   { --vs-bg: linear-gradient(160deg, #0b5a7a, #04223a); --vs-frame: #5ad8ff; --vs-reel: linear-gradient(180deg, #effcff, #bfe6f2); --vs-glow: rgba(90, 216, 255, 0.55); }
.vs-volcano { --vs-bg: linear-gradient(160deg, #6a1508, #1f0703); --vs-frame: #ff6a2b; --vs-reel: linear-gradient(180deg, #fff5ea, #f0cdae); --vs-glow: rgba(255, 106, 43, 0.55); }

.vs-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.vs-machine {
  flex: 1 1 520px;
  max-width: 720px;
  padding: 14px 16px 10px;
  border-radius: 26px;
  background: var(--vs-bg);
  border: 4px solid var(--vs-frame);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 26px var(--vs-glow), inset 0 2px 0 rgba(255, 255, 255, 0.15);
  transition: box-shadow 0.4s;
}

.vs-machine.free-mode {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 60px var(--vs-glow), 0 0 0 4px var(--vs-frame);
}

.vs-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  margin-bottom: 10px;
}

.vs-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--vs-frame);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.vs-status {
  font-weight: 700;
  color: #fff;
}

.vs-status b {
  color: var(--gold-light);
}

.vs-window {
  position: relative;
  padding: 8px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.6);
}

.vs-reels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.vs-reel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 2.55;
  border-radius: 10px;
  background: var(--vs-reel);
  box-shadow: inset 0 10px 14px -8px rgba(0, 0, 0, 0.45), inset 0 -10px 14px -8px rgba(0, 0, 0, 0.45);
}

.vs-reel.anticipation {
  box-shadow: 0 0 0 3px var(--gold-light), 0 0 26px var(--gold);
  animation: anticipation 0.35s ease-in-out infinite alternate;
}

@keyframes anticipation {
  to { box-shadow: 0 0 0 3px #fff, 0 0 40px var(--gold); }
}

.vs-strip {
  will-change: transform;
}

.vs-strip.blur {
  filter: blur(1.5px);
}

.vs-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 0.85;
  font-size: clamp(1.6rem, 4.8vw, 2.9rem);
  line-height: 1;
}

.vs-label {
  margin-top: 2px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--gold-light);
  font-size: clamp(0.42rem, 1.1vw, 0.6rem);
  font-weight: 900;
  letter-spacing: 0.5px;
}

.vs-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 4.4vw, 2.6rem);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.vs-letter.vs-L1 { color: #c0392b; }
.vs-letter.vs-L2 { color: #2c64c9; }
.vs-letter.vs-L3 { color: #1e8a4c; }
.vs-letter.vs-L4 { color: #8e44ad; }

.vs-cell.win {
  z-index: 1;
  background: radial-gradient(circle, rgba(255, 229, 138, 0.85), rgba(255, 229, 138, 0) 70%);
  animation: vs-cell-win 0.6s ease-in-out infinite alternate;
}

.vs-cell.feature {
  background: radial-gradient(circle, rgba(90, 216, 255, 0.85), rgba(90, 216, 255, 0) 70%);
}

@keyframes vs-cell-win {
  to { transform: scale(1.12); }
}

.vs-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.vs-lines polyline {
  fill: none;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
  stroke-dasharray: 2000;
  animation: line-draw 0.8s ease-out;
}

@keyframes line-draw {
  from { stroke-dashoffset: 2000; }
  to { stroke-dashoffset: 0; }
}

.vs-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.78);
  animation: fade-in 0.3s;
}

@keyframes fade-in {
  from { opacity: 0; }
}

.vs-ov-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
}

.vs-ov-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 3.6vw, 1.8rem);
  color: var(--gold-light);
  text-shadow: 0 0 16px var(--vs-glow);
  animation: message-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.vs-ov-big {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 900;
}

.vs-ov-text b {
  color: var(--gold-light);
}

.vs-chests {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.vs-chest {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 11vw, 74px);
  height: clamp(52px, 11vw, 74px);
  border: 2px solid var(--vs-frame);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  cursor: pointer;
  transition: transform 0.1s;
}

.vs-chest:not(:disabled):active {
  transform: scale(0.92);
}

.vs-chest b {
  font-size: 0.9rem;
  color: #2a1d00;
}

.vs-chest.open {
  background: var(--gold-grad);
  animation: mine-found 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.vs-chest.missed {
  opacity: 0.45;
}

.vs-chest.missed b {
  color: #fff;
}

.vs-win {
  min-height: 1.6em;
  margin: 10px 0 4px;
  text-align: center;
  font-weight: 800;
  color: var(--gold-light);
}

.vs-win.loss {
  color: var(--loss);
}

.vs-win.vs-win-pop {
  animation: message-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.vs-paytable {
  flex: 0 1 300px;
}

.vs-pay-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
  font-size: 0.85rem;
}

.vs-pay-row b {
  color: var(--gold-light);
}

.vs-cell.mini {
  display: inline-flex;
  flex: none;
  width: 42px;
  height: 36px;
  aspect-ratio: auto;
  vertical-align: middle;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 1.3rem;
}

.vs-cell.mini .vs-letter {
  font-size: 1.3rem;
}

.vs-cell.mini .vs-label {
  display: none;
}

/* ---------- Spielräume (Spiele mit Freunden) ---------- */
.casino-card[data-game="dice"] { --accent: rgba(255, 90, 90, 0.45); }

.room-intro p {
  margin-top: 0;
}

.room-settings,
.room-solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.room-solo {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
}

.room-opts,
.room-bots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.room-opt.active,
.room-bot-count.active {
  background: var(--gold-grad);
  color: #2a1d00;
  border-color: var(--gold);
}

.room-bot-count {
  min-width: 48px;
}

.room-solo-prize {
  color: var(--text-muted);
  text-align: center;
}

.room-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.room-timer {
  font-weight: 800;
  color: var(--gold-light);
}

.room-timer.urgent {
  color: var(--loss);
}

/* ---------- Lügenwürfel ---------- */
.dice-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 12px;
  border-radius: 28px;
  background: var(--felt);
  border: 6px solid var(--rail);
  box-shadow: var(--shadow), var(--rail-glow);
}

.dice-seats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.dice-seat {
  min-width: 130px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid transparent;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dice-seat.active {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(245, 197, 66, 0.5);
}

.dice-seat.loser {
  border-color: var(--loss);
  box-shadow: 0 0 16px rgba(255, 107, 74, 0.5);
}

.dice-seat.out {
  opacity: 0.45;
}

.dice-name {
  font-weight: 800;
  font-size: 0.9rem;
}

.dice-status {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-height: 1.2em;
}

.dice-status b {
  color: var(--gold-light);
}

.dice-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  margin: 4px 0;
}

.dice-cup {
  font-size: 1.8rem;
}

.dice-count {
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--gold-light);
}

.die {
  --d: 34px;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: var(--d);
  height: var(--d);
  padding: calc(var(--d) * 0.12);
  border-radius: calc(var(--d) * 0.2);
  background: linear-gradient(145deg, #ffffff, #e4ddd0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  vertical-align: middle;
}

.die i {
  display: block;
  margin: 12%;
  border-radius: 50%;
}

.die i.on {
  background: #1d1d22;
}

.die.joker {
  background: linear-gradient(145deg, #fff3b0, #e0a91b);
}

.die.joker i.on {
  background: #7a1a0c;
}

.die.hidden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #3a3a46, #1d1d24);
  color: var(--text-muted);
}

.die.small {
  --d: 24px;
}

.dice-row.big .die {
  --d: 52px;
  animation: dice-roll 0.5s ease-out;
}

@keyframes dice-roll {
  from { transform: rotate(-90deg) scale(0.6); opacity: 0.3; }
}

.die.match {
  box-shadow: 0 0 0 3px #6fdc8c, 0 0 14px rgba(111, 220, 140, 0.9);
}

.dice-center {
  text-align: center;
}

.dice-bid {
  font-size: 1.25rem;
  font-weight: 800;
}

.dice-bid .die {
  --d: 38px;
}

.dice-result {
  margin-top: 6px;
  font-weight: 700;
  animation: message-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.dice-result.ok b { color: var(--win); }
.dice-result.lie b { color: var(--loss); }

.dice-mine {
  text-align: center;
}

.dice-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dice-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.dice-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dice-qty .btn {
  min-width: 48px;
  min-height: 48px;
  font-size: 1.4rem;
  font-weight: 900;
}

.dice-q {
  min-width: 56px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
}

.dice-faces {
  display: flex;
  gap: 6px;
}

.dice-face {
  padding: 4px;
  border: 3px solid transparent;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.dice-face .die {
  --d: 40px;
}

.dice-face.active {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.6);
}

.dice-log {
  width: 100%;
  max-width: 560px;
}

/* ---------- Minigolf ---------- */
.casino-card[data-game="golf"] { --accent: rgba(111, 220, 140, 0.45); }

.golf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.golf-head {
  font-size: 1.05rem;
  color: var(--gold-light);
}

.golf-course {
  position: relative;
  width: 100%;
  max-width: 960px;
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid #5a3a1a;
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s;
}

.golf-course.my-turn {
  box-shadow: var(--shadow), 0 0 0 3px var(--gold), 0 0 26px rgba(245, 197, 66, 0.45);
}

.golf-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  touch-action: none;
  cursor: crosshair;
}

.golf-power {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.golf-power.show {
  opacity: 1;
}

.golf-power span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6fdc8c, #ffd95e, #ff6b4a);
}

.golf-hint {
  min-height: 1.5em;
  text-align: center;
  font-weight: 700;
}

.golf-table {
  border-collapse: collapse;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

.golf-table th,
.golf-table td {
  padding: 5px 9px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.golf-table td:first-child {
  text-align: left;
  white-space: nowrap;
}

.golf-table th.now {
  color: var(--gold-light);
}

.golf-table tr.par td {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.golf-table tr.turn td {
  background: rgba(245, 197, 66, 0.15);
}

.golf-table tr.out td {
  opacity: 0.45;
}

.golf-table td.ace { color: #ffd95e; font-weight: 900; }
.golf-table td.under { color: var(--win); font-weight: 800; }
.golf-table td.over { color: var(--loss); }

.golf-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
  vertical-align: middle;
}

.golf-place {
  color: var(--gold-light);
  font-weight: 800;
}

/* ---------- Billard ---------- */
.casino-card[data-game="pool"] { --accent: rgba(90, 160, 255, 0.45); }

.pool-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pool-players {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pool-player {
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid transparent;
  text-align: center;
}

.pool-player.active {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(245, 197, 66, 0.45);
}

.pool-name {
  font-weight: 800;
}

.pool-group {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pool-left {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  margin-top: 4px;
  font-size: 0.8rem;
}

.pool-vs {
  font-family: var(--font-display);
  color: var(--gold);
}

.pool-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c);
  color: #111;
  font-size: 0.62rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 5px var(--c), inset 0 0 0 11px #fff;
}

.pool-chip.stripe {
  background: linear-gradient(180deg, #f4f1e6 0 22%, var(--c) 22% 78%, #f4f1e6 78%);
  box-shadow: inset 0 0 0 6px transparent;
}

.pool-table {
  position: relative;
  width: 100%;
  max-width: 980px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s;
}

.pool-table.my-turn {
  box-shadow: var(--shadow), 0 0 0 3px var(--gold), 0 0 26px rgba(245, 197, 66, 0.45);
}

.pool-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  touch-action: none;
  cursor: crosshair;
}

.pool-hint {
  min-height: 1.5em;
  text-align: center;
  font-weight: 700;
}

.pool-log {
  width: 100%;
  max-width: 620px;
}

/* ---------- Flugkapitän ---------- */
.casino-card[data-game="flight"] { --accent: rgba(90, 190, 255, 0.45); }

.flight-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #4fa3e0 0%, #8fd0f5 60%, #c9ecff 100%);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
}

/* Cockpit-Anzeige unter dem Flugfeld: Werte oben, Guthaben – Geschwindigkeit – Einsatz unten */
.flight-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #172434, #0b131c);
  border: 1px solid rgba(120, 190, 255, 0.25);
  box-shadow: var(--shadow);
}

.fh-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.fh-stat {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
}

.fh-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fh-stat b,
.fh-money b {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fh-mult {
  color: var(--gold-light);
}

.fh-mult.low {
  color: #ff8a70;
}

.fh-money {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fh-money.right {
  text-align: right;
}

.fh-speeds {
  display: flex;
  gap: 6px;
}

.fh-speed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 52px;
  padding: 4px 6px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.fh-icon {
  font-size: 1.4rem;
  line-height: 1.1;
}

.fh-name {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.fh-speed.active {
  border-color: var(--gold);
  background: rgba(245, 197, 66, 0.18);
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.35);
}

.fh-speed.active .fh-name {
  color: var(--gold-light);
}

.fh-speed:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (hover: hover) {
  .fh-speed:not(:disabled):hover {
    border-color: rgba(245, 197, 66, 0.6);
  }
}

/* Hochkant (iPad): Flugfeld über die volle Breite, Bedienung darunter */
@media (max-width: 900px) {
  .flight-scene {
    flex-basis: 100%;
    max-width: none;
  }
}

/* Schmale Geräte: Geschwindigkeit in eine eigene Zeile */
@media (max-width: 560px) {
  .flight-hud {
    grid-template-columns: 1fr 1fr;
  }

  .fh-speeds {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }
}

/* ---------- Chicken Road ---------- */
.casino-card[data-game="chicken"] { --accent: rgba(255, 200, 60, 0.45); }

.chicken-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: #3b4148;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  cursor: pointer;
  touch-action: manipulation;
}

.chicken-hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #2b2519, #15110a);
  border: 1px solid rgba(255, 217, 94, 0.25);
  box-shadow: var(--shadow);
}

.chicken-hud .fh-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 6px 4px;
}

.chicken-hud .fh-label {
  font-size: 0.64rem;
  letter-spacing: 0.03em;
}

.chicken-hud .fh-stat b {
  display: block;
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
}

.chicken-hud .fh-stat b.small-value {
  font-size: 0.92rem;
}

.cr-progress-wrap {
  grid-column: 1 / -1;
}

.cr-progress {
  display: flex;
  align-items: center;
  gap: 3px;
}

.cr-cell {
  flex: 1;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.cr-cell.done {
  background: linear-gradient(180deg, #7ddc6a, #2fa866);
}

.cr-cell.next {
  background: rgba(245, 197, 66, 0.55);
  box-shadow: 0 0 8px rgba(245, 197, 66, 0.6);
}

.cr-cell.hit {
  background: #e53935;
}

.cr-safe {
  font-size: 0.95rem;
  font-style: normal;
  opacity: 0.4;
}

.cr-safe.done {
  opacity: 1;
}

.cr-progress-text {
  margin-top: 4px;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-muted);
}

/* Auf Touch-Geräten gibt es keine Tastatur-Kürzel */
@media (hover: none) {
  .chicken-keys {
    display: none;
  }
}

@media (max-width: 900px) {
  .chicken-scene {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 560px) {
  .chicken-hud {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Höher oder tiefer ---------- */
.casino-card[data-game="hilo"] { --accent: rgba(90, 200, 160, 0.45); }

.hilo-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 320px;
  padding: 22px 16px;
  border: 6px solid var(--rail);
  border-radius: 28px;
  background: var(--felt);
  box-shadow: var(--rail-glow);
}

.hilo-trail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 76px;
}

.hilo-step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.hilo-step i {
  font-size: 0.8rem;
  font-style: normal;
  color: var(--gold-light);
}

.hilo-step.skip {
  opacity: 0.5;
}

.card.hilo-big,
.card-back.hilo-big {
  width: 120px;
  height: 168px;
  border-radius: 12px;
}

.card.hilo-big .card-corner {
  top: 8px;
  left: 10px;
  font-size: 1.3rem;
}

.card.hilo-big .card-suit {
  font-size: 4rem;
}

.card.hilo-big.wrong {
  box-shadow: 0 0 0 4px #e53935, 0 6px 16px rgba(0, 0, 0, 0.5);
}

.hilo-info {
  font-weight: 700;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.hilo-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin: 6px 0;
}

.hilo-choices .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  font-size: 1rem;
}

.hilo-choices .btn small {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ---------- Mast-Kletterei ---------- */
.casino-card[data-game="tower"] { --accent: rgba(170, 120, 70, 0.5); }

.tw-mast {
  position: relative;
  flex: 1 1 340px;
  max-width: 470px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, #7fc0ec 0%, #cfe9f8 75%, #2a7ab0 100%);
  box-shadow: var(--shadow);
}

.tw-nest,
.tw-deck {
  position: relative;
  z-index: 1;
  padding: 8px;
  border-radius: 14px;
  font-weight: 800;
  text-align: center;
}

.tw-nest {
  border: 3px solid #4d2c10;
  background: #7a4a22;
  color: #ffe58a;
}

.tw-nest.reached {
  box-shadow: 0 0 22px rgba(255, 217, 94, 0.9);
}

.tw-deck {
  background: #5a3a1a;
  color: #fff;
}

.tw-level {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  align-items: center;
}

.tw-mult {
  font-size: 0.85rem;
  font-weight: 800;
  text-align: right;
  color: #12324a;
}

.tw-level.current .tw-mult {
  color: #8a5a00;
  font-size: 0.95rem;
}

.tw-ropes {
  display: grid;
  grid-template-columns: repeat(var(--ropes), 1fr);
  gap: 8px;
}

.tw-rope {
  min-height: 46px;
  border: 2px solid rgba(90, 60, 30, 0.45);
  border-radius: 12px;
  background: rgba(255, 248, 230, 0.85);
  font-size: 1.4rem;
  cursor: pointer;
  touch-action: manipulation;
}

.tw-rope:disabled {
  cursor: default;
}

.tw-rope.active {
  border-color: var(--gold);
  background: #fff3c4;
  box-shadow: 0 0 10px rgba(245, 197, 66, 0.6);
  animation: tw-pulse 1.4s ease-in-out infinite;
}

.tw-rope.held {
  border-color: #2fa866;
  background: #c8f2c8;
}

.tw-rope.snapped {
  border-color: #e53935;
  background: #ffcdd2;
  animation: tw-snap 0.4s ease;
}

.tw-rope.rotten {
  background: rgba(120, 80, 40, 0.35);
}

.tw-rope.faded {
  opacity: 0.45;
}

@keyframes tw-pulse {
  50% { box-shadow: 0 0 18px rgba(245, 197, 66, 0.9); }
}

@keyframes tw-snap {
  25% { transform: translateX(-6px) rotate(-3deg); }
  75% { transform: translateX(6px) rotate(3deg); }
}

@media (hover: hover) {
  .tw-rope.active:hover {
    transform: translateY(-2px);
  }
}

/* ---------- Schatzkarten-Keno ---------- */
.casino-card[data-game="keno"] { --accent: rgba(210, 170, 90, 0.5); }

.kn-board {
  padding: 12px;
  border: 4px solid #8a6a3a;
  border-radius: 22px;
  background: radial-gradient(ellipse at 30% 20%, #f6e7c1, #e2c98f 70%, #c9a866);
  box-shadow: var(--shadow), inset 0 0 30px rgba(120, 80, 30, 0.4);
}

.kn-map {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.kn-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  padding: 0;
  border: 2px solid rgba(110, 80, 40, 0.35);
  border-radius: 50% 45% 50% 40%;
  background: radial-gradient(circle at 40% 35%, #9ed36b, #5f9d3f 70%);
  cursor: pointer;
  touch-action: manipulation;
}

.kn-cell:disabled {
  cursor: default;
}

.kn-num {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.kn-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
  font-size: 1.4rem;
}

.kn-cell.picked {
  box-shadow: 0 0 0 3px #c62828;
}

.kn-cell.drawn {
  background: radial-gradient(circle at 40% 35%, #ffe58a, #c9a227 70%);
}

.kn-cell.hit {
  background: radial-gradient(circle at 40% 35%, #fff3b0, #f5c542 60%, #b8860b);
  box-shadow: 0 0 0 3px #2fa866, 0 0 14px rgba(255, 217, 94, 0.9);
}

.kn-cell.fresh {
  animation: kn-pop 0.35s ease;
}

@keyframes kn-pop {
  50% { transform: scale(1.25); }
}

.kn-paytable {
  width: 100%;
  max-width: 320px;
  margin: 8px auto;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
}

.kn-pay-title {
  margin-bottom: 4px;
  font-weight: 700;
  text-align: center;
  color: var(--gold);
}

.kn-pay-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 6px;
  border-radius: 6px;
}

.kn-pay-row.hit {
  background: rgba(47, 168, 102, 0.35);
  font-weight: 800;
}

/* ---------- Baccarat ---------- */
.casino-card[data-game="baccarat"] { --accent: rgba(200, 60, 80, 0.45); }

.bac-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px;
  border: 6px solid var(--rail);
  border-radius: 30px;
  background: var(--felt);
  box-shadow: var(--rail-glow);
}

.bac-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  transition: box-shadow 0.3s, border-color 0.3s;
}

.bac-player-side {
  background: rgba(30, 90, 200, 0.15);
}

.bac-banker-side {
  background: rgba(200, 40, 40, 0.15);
}

.bac-table.win-player .bac-player-side,
.bac-table.win-banker .bac-banker-side {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(245, 197, 66, 0.5);
}

.bac-table.win-tie .bac-side {
  border-color: #2fa866;
}

.bac-label {
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}

.bac-total {
  display: inline-block;
  min-width: 34px;
  padding: 0 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  text-align: center;
  color: var(--gold-light);
}

.bac-total:empty {
  display: none;
}

.card.bac-third {
  margin: 0 14px;
  transform: rotate(90deg);
}

.bac-rules {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}

.bac-road {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 760px;
  margin: 10px auto;
}

.bac-bead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
}

.bac-bead.p { background: #1e66d0; }
.bac-bead.b { background: #c62828; }
.bac-bead.t { background: #2fa866; }

.bac-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 760px;
  margin: 10px auto;
}

.bac-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  border-width: 3px;
  font-size: 1.05rem;
  font-weight: 800;
}

.bac-choice small {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.8;
}

.bac-choice.player.active {
  border-color: #9cc3ff;
  background: linear-gradient(180deg, #3b82f6, #1e4fa8);
  color: #fff;
}

.bac-choice.banker.active {
  border-color: #ffb3b3;
  background: linear-gradient(180deg, #ef4444, #9b1c1c);
  color: #fff;
}

.bac-choice.tie.active {
  border-color: #b3ffd9;
  background: linear-gradient(180deg, #34d399, #167a4f);
  color: #fff;
}

.bac-help {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 560px) {
  .bac-table {
    grid-template-columns: 1fr;
  }
}

/* ---------- Kniffel ---------- */
.casino-card[data-game="kniffel"] { --accent: rgba(240, 240, 240, 0.35); }

.kf-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
}

.kf-table .kf-log {
  grid-column: 1 / -1;
}

.kf-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 14px 22px;
  border: 6px solid var(--rail);
  border-radius: 26px;
  background: var(--felt);
  box-shadow: var(--rail-glow);
}

.kf-turn {
  min-height: 2.6em;
  font-weight: 700;
  text-align: center;
}

.kf-dice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-bottom: 14px;
}

.kf-die {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: default;
  touch-action: manipulation;
  transition: transform 0.15s;
}

.kf-die .die {
  --d: 58px;
}

.kf-die.can {
  cursor: pointer;
}

.kf-die.held {
  transform: translateY(-8px);
}

.kf-die.held .die {
  box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(245, 197, 66, 0.7);
}

.kf-held {
  position: absolute;
  left: 50%;
  bottom: -18px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--gold-light);
  transform: translateX(-50%);
}

.die.roll {
  animation: dice-roll 0.5s ease-out;
}

.kf-actions .game-actions {
  margin: 4px 0 0;
}

.kf-sheet-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-panel);
}

.kf-sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.kf-sheet th,
.kf-sheet td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
}

.kf-sheet tbody th {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.kf-sheet tbody th small {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-muted);
}

.kf-sheet thead th {
  font-size: 0.8rem;
  vertical-align: bottom;
}

.kf-sheet thead th.turn {
  color: var(--gold-light);
  box-shadow: inset 0 -3px 0 var(--gold);
}

.kf-sheet thead th.out {
  opacity: 0.5;
}

.kf-cell.filled {
  font-weight: 800;
}

.kf-cell.zero {
  color: var(--text-muted);
}

.kf-cell.last {
  background: rgba(245, 197, 66, 0.18);
}

.kf-cell.can {
  padding: 10px 8px;
  background: rgba(111, 220, 140, 0.08);
  font-style: italic;
  color: #9fe0b0;
  cursor: pointer;
}

.kf-cell.can.zero {
  color: rgba(255, 255, 255, 0.35);
}

.kf-cell.picked {
  background: rgba(245, 197, 66, 0.35);
  box-shadow: inset 0 0 0 2px var(--gold);
  font-style: normal;
  font-weight: 800;
  color: #fff;
}

.kf-sum th,
.kf-sum td {
  background: rgba(255, 255, 255, 0.04);
}

.kf-sum.total th,
.kf-sum.total td {
  font-size: 1rem;
  color: var(--gold-light);
}

@media (hover: hover) {
  .kf-cell.can:hover {
    background: rgba(111, 220, 140, 0.2);
  }

  .kf-die.can:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 900px) {
  .kf-table {
    grid-template-columns: 1fr;
  }
}

/* ---------- Mau-Mau ---------- */
.casino-card[data-game="maumau"] { --accent: rgba(230, 80, 80, 0.4); }

.mm-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 6px solid var(--rail);
  border-radius: 28px;
  background: var(--felt);
  box-shadow: var(--rail-glow);
}

.mm-others {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.mm-seat {
  min-width: 150px;
  padding: 8px 10px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
}

.mm-seat.active {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(245, 197, 66, 0.5);
}

.mm-seat.out {
  opacity: 0.5;
}

.mm-fan {
  display: flex;
  justify-content: center;
  min-height: 58px;
  margin: 4px 0;
}

.mm-fan .card + .card {
  margin-left: -24px;
}

.mm-count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.mm-mau {
  color: var(--gold-light);
}

.mm-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 140px;
}

.mm-stack {
  position: relative;
}

.mm-stack-count {
  position: absolute;
  right: -10px;
  bottom: -8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.65);
  font-size: 0.8rem;
  font-weight: 800;
}

.card.mm-big,
.card-back.mm-big {
  width: 84px;
  height: 118px;
  border-radius: 10px;
}

.card.mm-big .card-corner {
  font-size: 1.05rem;
}

.card.mm-big .card-suit {
  font-size: 2.8rem;
}

.mm-pile {
  position: relative;
  width: 84px;
  height: 118px;
}

.mm-under,
.mm-top {
  position: absolute;
  inset: 0;
}

.mm-under {
  transform: rotate(var(--r));
}

.mm-flags {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mm-flag {
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  font-weight: 800;
}

.mm-flag .red {
  color: #ff6b6b;
}

.mm-flag.seven {
  background: #c62828;
  color: #fff;
  animation: mm-blink 1s ease-in-out infinite alternate;
}

@keyframes mm-blink {
  to { box-shadow: 0 0 16px rgba(255, 90, 60, 0.9); }
}

.mm-status {
  min-height: 1.5em;
  font-weight: 700;
  text-align: center;
}

.mm-hand-label {
  margin-bottom: 6px;
  font-size: 0.85rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.mm-hand-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.mm-hand-card {
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: default;
  touch-action: manipulation;
  transition: transform 0.15s;
}

.mm-hand-card .card {
  width: 70px;
  height: 98px;
}

.mm-hand-card .card-corner {
  font-size: 0.95rem;
}

.mm-hand-card .card-suit {
  font-size: 2.2rem;
}

.mm-hand.myturn .mm-hand-card:not(.mm-play) .card {
  filter: brightness(0.7);
}

.mm-hand-card.mm-play {
  cursor: pointer;
  transform: translateY(-6px);
}

.mm-hand-card.mm-play .card {
  box-shadow: 0 0 0 3px #6fdc8c, 0 6px 14px rgba(0, 0, 0, 0.5);
}

.mm-hand-card.chosen .card {
  box-shadow: 0 0 0 4px var(--gold), 0 6px 14px rgba(0, 0, 0, 0.5);
}

.mm-wish-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.mm-wishes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mm-wish {
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 800;
}

.mm-wish.red {
  color: #ff6b6b;
}

@media (hover: hover) {
  .mm-hand-card.mm-play:hover {
    transform: translateY(-10px);
  }
}

@media (max-width: 560px) {
  .mm-wishes {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Vier gewinnt ---------- */
.casino-card[data-game="connect4"] { --accent: rgba(230, 60, 60, 0.45); }

.c4-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.c4-disc {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: -3px;
}

.c4-disc.gold,
.c4-cell.gold::after {
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f5c542 45%, #a87a10);
}

.c4-disc.red,
.c4-cell.red::after {
  background: radial-gradient(circle at 35% 30%, #ff9c8c, #e0332a 45%, #8a1410);
}

.c4-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: min(92vw, 600px);
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2456b8, #163a85);
  border: 3px solid #0e2a66;
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.c4-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.c4-col:disabled {
  cursor: default;
}

.c4-col:not(:disabled):active {
  background: rgba(255, 255, 255, 0.14);
}

@media (hover: hover) {
  .c4-col:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

.c4-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0b1f4a;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6);
}

.c4-cell.filled::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.c4-cell.drop::after {
  animation: c4-drop 0.42s cubic-bezier(0.5, 0, 0.75, 1.15);
}

@keyframes c4-drop {
  from { transform: translateY(calc(var(--fall, 6) * -124%)); }
  to   { transform: translateY(0); }
}

.c4-cell.win::after {
  animation: c4-win 0.8s ease-in-out infinite alternate;
}

@keyframes c4-win {
  from { box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, 0.6); }
  to   { box-shadow: 0 0 0 4px #ffd95e, 0 0 24px rgba(255, 217, 94, 0.95); }
}

.c4-hint {
  min-height: 1.5em;
  text-align: center;
  font-weight: 700;
}

/* ---------- Seeschlacht ---------- */
.casino-card[data-game="battleship"] { --accent: rgba(70, 130, 220, 0.45); }

.bs-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bs-seas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.bs-sea {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bs-enemy { width: min(92vw, 520px); }
.bs-own { width: min(92vw, 400px); }
.bs-wrap.placing .bs-enemy { display: none; }
.bs-wrap.placing .bs-own { width: min(92vw, 520px); }

.bs-title {
  text-align: center;
  font-weight: 800;
  color: var(--gold-light);
}

.bs-grid {
  display: grid;
  grid-template-columns: 0.6fr repeat(10, 1fr);
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0d3a66, #082848);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s;
}

.bs-wrap.my-turn .bs-enemy .bs-grid {
  box-shadow: var(--shadow), 0 0 0 3px var(--gold), 0 0 22px rgba(245, 197, 66, 0.4);
}

.bs-grid.nope {
  animation: shake 0.35s;
}

.bs-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(200, 225, 255, 0.7);
}

.bs-cell {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(80, 150, 220, 0.28);
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.bs-cell.target { cursor: crosshair; }
.bs-cell.target:active { background: rgba(255, 224, 102, 0.55); }

@media (hover: hover) {
  .bs-cell.target:hover { background: rgba(255, 224, 102, 0.45); }
  .bs-wrap.placing .bs-own .bs-cell { cursor: pointer; }
}

.bs-cell.ship {
  background: linear-gradient(180deg, #a7b2bd, #5c6874);
  border-radius: 2px;
}

.bs-cell.ship.h.bow   { border-radius: 50% 2px 2px 50%; }
.bs-cell.ship.h.stern { border-radius: 2px 35% 35% 2px; }
.bs-cell.ship.v.bow   { border-radius: 50% 50% 2px 2px; }
.bs-cell.ship.v.stern { border-radius: 2px 2px 35% 35%; }

.bs-cell.ship.selected {
  background: linear-gradient(180deg, #ffe58a, #c89a1a);
  box-shadow: 0 0 10px rgba(255, 217, 94, 0.8);
}

.bs-cell.ship.sunk {
  background: linear-gradient(180deg, #6a4030, #2a1a12);
}

.bs-cell.miss::after {
  content: '';
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background: rgba(230, 245, 255, 0.75);
}

.bs-cell.hit:not(.ship) {
  background: rgba(200, 60, 40, 0.6);
}

.bs-cell.hit::after {
  content: '🔥';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 2.4vw, 22px);
}

.bs-cell.hit.sunk::after {
  content: '✖';
  color: #ff7a5a;
  font-weight: 900;
}

.bs-cell.boom {
  z-index: 2;
  animation: bs-boom 0.7s ease-out;
}

.bs-cell.splash {
  animation: bs-splash 0.7s ease-out;
}

@keyframes bs-boom {
  0%   { transform: scale(1.4); box-shadow: 0 0 0 0 rgba(255, 170, 60, 0.95); }
  100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(255, 170, 60, 0); }
}

@keyframes bs-splash {
  0%   { box-shadow: 0 0 0 0 rgba(200, 235, 255, 0.9); }
  100% { box-shadow: 0 0 0 12px rgba(200, 235, 255, 0); }
}

.bs-fleet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.bs-mini {
  display: inline-flex;
  gap: 1px;
}

.bs-mini i {
  width: 7px;
  height: 9px;
  border-radius: 2px;
  background: #a7b2bd;
}

.bs-mini.gone i {
  background: #ff6a4a;
  opacity: 0.45;
}

.bs-hint {
  max-width: 620px;
  min-height: 1.5em;
  text-align: center;
  font-weight: 700;
}

.bs-log,
.darts-log {
  text-align: center;
}

/* ---------- Darts in der Taverne ---------- */
.casino-card[data-game="darts"] { --accent: rgba(200, 70, 60, 0.45); }

.darts-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.darts-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.darts-board {
  width: min(92vw, 560px, 64vh);
}

.darts-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  touch-action: none;
  cursor: crosshair;
}

.darts-side {
  flex: 1 1 260px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.darts-scores {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.darts-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid transparent;
}

.darts-row.active {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(245, 197, 66, 0.4);
}

.darts-row.out { opacity: 0.45; }

.darts-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.darts-last {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.darts-total {
  min-width: 48px;
  text-align: right;
  font-size: 1.25rem;
  color: var(--gold-light);
}

.darts-turn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
}

.darts-slot {
  min-width: 54px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  text-align: center;
  font-weight: 800;
}

.darts-slot.great {
  color: #ffd95e;
  border-color: var(--gold);
}

.darts-slot.miss { color: var(--loss); }

.darts-sum {
  margin-left: 4px;
  font-weight: 800;
  color: var(--gold-light);
}

.darts-hint {
  min-height: 1.5em;
  text-align: center;
  font-weight: 700;
}

/* ---------- Kanonenduell ---------- */
.casino-card[data-game="duel"] { --accent: rgba(255, 140, 60, 0.45); }

.duel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.duel-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  touch-action: none;
  cursor: crosshair;
}

.duel-canvas.nope {
  animation: shake 0.35s;
}

.duel-flag {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -1px;
}

/* ---------- Tablet / iPad (8. Generation: 810 × 1080 hochkant, 1080 × 810 quer) ---------- */
@media (max-width: 1180px) {
  .clicker-layout {
    grid-template-columns: minmax(300px, 0.95fr) 1.05fr;
    gap: 16px;
  }

  .upgrade-list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* iPad hochkant */
@media (min-width: 761px) and (max-width: 900px) {
  .coin-stage {
    width: 230px;
    height: 230px;
  }

  .coin-stage::before {
    width: 300px;
    height: 300px;
  }

  .big-coin {
    width: 190px;
    height: 190px;
  }

  .big-coin-inner {
    font-size: 5.2rem;
  }

  .building {
    gap: 10px;
    padding: 8px 10px;
  }

  .building-desc {
    display: none;
  }

  .building-icon {
    width: 44px;
    height: 44px;
    font-size: 1.7rem;
  }

  .tab {
    padding: 8px 14px;
  }

  .poker-table {
    margin: 76px 44px 72px;
  }

  .poker-seat {
    width: 124px;
  }
}

/* iPad quer und andere niedrige Bildschirme: Höhe sparen, damit Münze und Side-Slot ganz sichtbar sind */
@media (min-width: 901px) and (max-height: 860px) {
  .click-area {
    gap: 8px;
    padding-top: 12px;
  }

  .coin-stage {
    width: 210px;
    height: 210px;
  }

  .coin-stage::before {
    width: 280px;
    height: 280px;
  }

  .big-coin {
    width: 180px;
    height: 180px;
  }

  .big-coin-inner {
    font-size: 4.8rem;
  }

  .side-slot .reels {
    --cell: 36px;
  }

  .slot-machine .reels {
    --cell: 66px;
  }

  .poker-table {
    max-width: 720px;
    margin-top: 72px;
  }
}

/* Touch-Bedienung (iPad, Handy): größere Tippflächen */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }

  .btn-small {
    min-height: 40px;
    padding: 6px 12px;
  }

  .amount-btn {
    min-height: 40px;
    padding: 6px 14px;
  }

  .bet-input {
    min-height: 44px;
  }

  .rb-cell {
    font-size: 0.95rem;
  }

  .raise-slider {
    height: 36px;
  }

  .side-minus,
  .side-plus {
    width: 44px;
  }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .clicker-layout {
    grid-template-columns: 1fr;
  }

  .click-area {
    position: relative;
    top: auto;
    padding: 18px 12px 14px;
  }

  .coin-stage {
    width: 200px;
    height: 200px;
  }

  .coin-stage::before {
    width: 260px;
    height: 260px;
  }

  .big-coin {
    width: 170px;
    height: 170px;
  }

  .big-coin-inner {
    font-size: 4.6rem;
  }

  .topbar {
    gap: 8px;
    padding: 8px 12px 6px;
  }

  .logo {
    font-size: 1.05rem;
    gap: 8px;
  }

  .logo-coin {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .wallet-money {
    font-size: 1.25rem;
  }

  .wallet-cps {
    font-size: 0.75rem;
  }

  .tabs {
    gap: 4px;
    padding: 0 8px 8px;
  }

  .tab {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-height: 52px;
    padding: 6px 4px;
    border-radius: 12px;
    font-size: 0.72rem;
  }

  .tab-icon {
    font-size: 1.2rem;
  }

  main {
    padding: 14px 12px;
  }

  .wheel {
    width: 230px;
    height: 230px;
  }

  .card {
    width: 52px;
    height: 74px;
  }

  .card-placeholder {
    width: 52px;
    height: 74px;
  }

  .card-suit {
    font-size: 1.6rem;
  }

  .slot-machine .reels {
    --cell: 60px;
  }

  .scratch-picker {
    flex-direction: row;
    flex-basis: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .ticket-choice {
    flex: none;
    min-width: 160px;
  }

  .poker-table {
    aspect-ratio: 1 / 1.25;
    margin: 70px 34px 70px;
  }

  .poker-felt {
    border-radius: 45%;
  }

  .poker-board .card,
  .poker-board .card-placeholder {
    width: 34px;
    height: 48px;
  }

  .poker-board .card-corner {
    font-size: 0.65rem;
    top: 2px;
    left: 3px;
  }

  .poker-board .card-suit {
    font-size: 1rem;
    top: 12px;
  }

  .poker-seat {
    width: 96px;
  }

  .seat-plate {
    font-size: 0.7rem;
    padding: 8px 4px 3px;
  }

  .card.small,
  .card-back.small {
    width: 30px;
    height: 42px;
  }

  .card.small .card-suit {
    font-size: 0.9rem;
    top: 10px;
  }

  .seat-cards {
    min-height: 42px;
  }

  .seat-1 { left: 4%; top: 70%; }
  .seat-2 { left: 4%; top: 28%; }
  .seat-4 { left: 96%; top: 28%; }
  .seat-5 { left: 96%; top: 70%; }

  .seat-1 .seat-bet, .seat-2 .seat-bet { left: 50%; top: auto; bottom: -20px; transform: translateX(-50%); }
  .seat-4 .seat-bet, .seat-5 .seat-bet { right: auto; left: 50%; top: auto; bottom: -20px; transform: translateX(-50%); }
}

@media (max-width: 400px) {
  .logo-text {
    display: none;
  }
}

/* =====================================================================
   Schatzkammer: Münz-Designs, Farbthemen, Kacheln und Glücksrad
   ===================================================================== */

/* ---------- Münz-Designs (gelten für die große Münze und die Vorschau) ---------- */
.coin-skin-silver {
  --coin-face: radial-gradient(circle at 35% 28%, #ffffff 0%, #eef2f5 25%, #c9d1d8 50%, #8d98a3 82%, #5b6670 100%);
  --coin-rim: #8d98a3;
  --coin-rim-2: rgba(230, 240, 248, 0.4);
  --coin-glow: rgba(200, 225, 255, 0.45);
  --coin-letter: #4d5863;
  --coin-letter-shadow: 1px 1px 0 #ffffff, -1px -1px 0 rgba(0, 0, 0, 0.25);
  --coin-ring: rgba(80, 92, 104, 0.45);
  --coin-rays: rgba(210, 230, 255, 0.16);
}

.coin-skin-ruby {
  --coin-face:
    repeating-conic-gradient(from 8deg, rgba(255, 255, 255, 0.1) 0deg 15deg, rgba(0, 0, 0, 0.1) 15deg 30deg),
    radial-gradient(circle at 35% 28%, #ffd6dc 0%, #ff5d73 22%, #d61f3c 45%, #8e0b22 78%, #4a0310 100%);
  --coin-rim: #c9a227;
  --coin-rim-2: rgba(255, 229, 138, 0.4);
  --coin-glow: rgba(255, 60, 90, 0.5);
  --coin-letter: #ffd76a;
  --coin-letter-shadow: 0 2px 0 #7a0a1c, 0 0 12px rgba(255, 215, 106, 0.6);
  --coin-ring: rgba(255, 215, 106, 0.5);
  --coin-rays: rgba(255, 90, 110, 0.15);
}

.coin-skin-pirate {
  --coin-face:
    radial-gradient(circle at 70% 70%, rgba(60, 90, 50, 0.45) 0%, transparent 22%),
    radial-gradient(circle at 25% 65%, rgba(60, 90, 50, 0.35) 0%, transparent 14%),
    radial-gradient(circle at 35% 28%, #dcc08e 0%, #b08850 30%, #7d5a2c 60%, #4b3215 88%, #2b1b09 100%);
  --coin-rim: #5a3d17;
  --coin-rim-2: rgba(160, 120, 60, 0.35);
  --coin-glow: rgba(110, 220, 140, 0.3);
  --coin-letter: #2b1b09;
  --coin-letter-shadow: 1px 1px 0 rgba(255, 230, 180, 0.55), 0 0 18px rgba(110, 220, 140, 0.45);
  --coin-ring: rgba(43, 27, 9, 0.5);
  --coin-rays: rgba(110, 220, 140, 0.12);
}

.coin-skin-crystal {
  --coin-face:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 40%),
    conic-gradient(from 20deg, #e8fbff, #9fe6ff 12%, #ffffff 20%, #6fcfef 33%, #d8f6ff 45%, #8adcf7 58%, #ffffff 66%, #5ec4e8 80%, #e8fbff);
  --coin-rim: #7fd3ee;
  --coin-rim-2: rgba(200, 245, 255, 0.5);
  --coin-glow: rgba(120, 220, 255, 0.6);
  --coin-letter: rgba(255, 255, 255, 0.95);
  --coin-letter-shadow: 0 0 14px #5ad8ff, 0 2px 0 rgba(30, 120, 160, 0.6);
  --coin-ring: rgba(255, 255, 255, 0.6);
  --coin-rays: rgba(150, 230, 255, 0.2);
}

.coin-skin-cosmic {
  --coin-face:
    radial-gradient(circle at 30% 34%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 66% 38%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 47% 72%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 76% 68%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 22% 60%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 58% 22%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 38% 30%, rgba(255, 120, 220, 0.55), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(90, 140, 255, 0.6), transparent 50%),
    radial-gradient(circle at 50% 50%, #2a1260 0%, #120a35 60%, #05030f 100%);
  --coin-rim: #8c7bff;
  --coin-rim-2: rgba(200, 160, 255, 0.45);
  --coin-glow: rgba(160, 110, 255, 0.7);
  --coin-letter: #ffffff;
  --coin-letter-shadow: 0 0 10px #c9a8ff, 0 0 26px #7c5cff;
  --coin-ring: rgba(200, 180, 255, 0.45);
  --coin-rays: rgba(170, 130, 255, 0.22);
}

/* Sternenmünze: pulsierender Schein hinter der Münze */
.coin-stage.coin-skin-cosmic::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170, 120, 255, 0.45), rgba(90, 140, 255, 0.15) 55%, transparent 70%);
  animation: cosmic-aura 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cosmic-aura {
  50% { transform: scale(1.12); opacity: 0.6; }
}

/* Kristallmünze: der Buchstabe funkelt */
.coin-skin-crystal .big-coin-inner {
  animation: crystal-glint 2.6s ease-in-out infinite;
}

@keyframes crystal-glint {
  50% { text-shadow: 0 0 22px #ffffff, 0 0 40px #5ad8ff, 0 2px 0 rgba(30, 120, 160, 0.6); }
}

/* Kleine Münze in der Schatzkammer */
.mini-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--coin-face);
  box-shadow: 0 0 0 3px var(--coin-rim), 0 0 0 5px var(--coin-rim-2), 0 0 16px var(--coin-glow);
  color: var(--coin-letter);
  text-shadow: var(--coin-letter-shadow);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
}

/* ---------- Farbthemen ---------- */
:root[data-theme="ocean"] {
  --bg: #03101b;
  --bg-panel: #0d2a3f;
  --bg-panel-hover: #123652;
  --panel: linear-gradient(180deg, rgba(20, 64, 96, 0.85) 0%, rgba(6, 24, 40, 0.92) 100%);
  --border: #1f557a;
  --text-muted: #9dbbd0;
  --header-bg: rgba(2, 12, 22, 0.95);
  --btn-bg: linear-gradient(180deg, rgba(28, 82, 120, 0.95), rgba(10, 40, 64, 0.95));
  --glow-1: rgba(30, 110, 170, 0.5);
  --glow-2: rgba(0, 170, 160, 0.22);
  --glow-3: rgba(20, 70, 140, 0.35);
}

:root[data-theme="volcano"] {
  --bg: #120605;
  --bg-panel: #35120c;
  --bg-panel-hover: #451a11;
  --panel: linear-gradient(180deg, rgba(90, 30, 18, 0.85) 0%, rgba(34, 10, 6, 0.92) 100%);
  --border: #6e2a1a;
  --text-muted: #d1aa9c;
  --header-bg: rgba(18, 6, 4, 0.95);
  --btn-bg: linear-gradient(180deg, rgba(110, 40, 24, 0.95), rgba(56, 16, 10, 0.95));
  --glow-1: rgba(150, 30, 10, 0.5);
  --glow-2: rgba(255, 110, 20, 0.35);
  --glow-3: rgba(255, 70, 20, 0.28);
}

:root[data-theme="night"] {
  --bg: #070616;
  --bg-panel: #1a1740;
  --bg-panel-hover: #231f55;
  --panel: linear-gradient(180deg, rgba(44, 38, 100, 0.85) 0%, rgba(14, 12, 40, 0.92) 100%);
  --border: #3a3478;
  --text-muted: #b1acd8;
  --header-bg: rgba(8, 6, 24, 0.95);
  --btn-bg: linear-gradient(180deg, rgba(60, 52, 130, 0.95), rgba(26, 22, 70, 0.95));
  --glow-1: rgba(90, 60, 190, 0.5);
  --glow-2: rgba(200, 80, 200, 0.22);
  --glow-3: rgba(50, 70, 180, 0.32);
}

:root[data-theme="ice"] {
  --bg: #08131d;
  --bg-panel: #16293a;
  --bg-panel-hover: #1d3449;
  --panel: linear-gradient(180deg, rgba(60, 100, 140, 0.6) 0%, rgba(14, 30, 46, 0.92) 100%);
  --border: #4f7fa3;
  --text-muted: #b9d3e6;
  --header-bg: rgba(8, 18, 28, 0.95);
  --btn-bg: linear-gradient(180deg, rgba(70, 120, 160, 0.9), rgba(26, 52, 76, 0.95));
  --glow-1: rgba(120, 200, 255, 0.35);
  --glow-2: rgba(180, 230, 255, 0.18);
  --glow-3: rgba(80, 150, 210, 0.3);
}

:root[data-theme="royal"] {
  --bg: #0a0805;
  --bg-panel: #1e1810;
  --bg-panel-hover: #2a2216;
  --panel: linear-gradient(180deg, rgba(58, 44, 20, 0.88) 0%, rgba(16, 12, 6, 0.94) 100%);
  --border: #7a5f22;
  --border-soft: rgba(245, 197, 66, 0.35);
  --text-muted: #d4c49a;
  --header-bg: rgba(10, 8, 4, 0.96);
  --btn-bg: linear-gradient(180deg, rgba(90, 68, 26, 0.95), rgba(40, 30, 12, 0.95));
  --glow-1: rgba(200, 150, 40, 0.35);
  --glow-2: rgba(245, 197, 66, 0.22);
  --glow-3: rgba(140, 90, 20, 0.3);
}

/* Bewegte Extras der epischen und legendären Themen: Sterne, Schnee, Goldglanz */
:root[data-theme="night"] body::after,
:root[data-theme="ice"] body::after,
:root[data-theme="royal"] body::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}

:root[data-theme="night"] body::after {
  background:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 34% 8%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 58% 26%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 81% 12%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 92% 44%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 7% 61%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 27% 83%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 49% 57%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 70% 79%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 88% 92%, #fff 0 1px, transparent 2px);
  background-size: 420px 420px;
  animation: stars-twinkle 4s ease-in-out infinite alternate;
}

@keyframes stars-twinkle {
  from { opacity: 0.35; }
  to { opacity: 0.9; }
}

:root[data-theme="ice"] body::after {
  /* Eine Kachel größer als der Bildschirm; die ganze Fläche wandert (Grafikkarte), statt dass
     der Hintergrund in jedem Bild neu gezeichnet wird */
  top: -300px;
  left: -60px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 15%, rgba(255, 255, 255, 0.7) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 60%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 70%, rgba(255, 255, 255, 0.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 85%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px);
  background-size: 300px 300px;
  animation: snow-fall 18s linear infinite;
}

@keyframes snow-fall {
  from { transform: translate(0, 0); }
  to { transform: translate(60px, 300px); }
}

:root[data-theme="royal"] body::after {
  /* Dreifach breite Fläche mit dem Lichtstreifen, die per transform durchs Bild wandert */
  right: auto;
  width: 300%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 215, 106, 0.09) 50%, transparent 60%);
  animation: royal-shine 9s ease-in-out infinite;
}

@keyframes royal-shine {
  0%, 30% { transform: translateX(-100%); }
  100% { transform: translateX(33.333%); }
}

:root[data-theme="royal"] .panel,
:root[data-theme="royal"] .click-area,
:root[data-theme="royal"] .shop-section,
:root[data-theme="royal"] .casino-info-box {
  box-shadow: var(--shadow), 0 0 18px rgba(245, 197, 66, 0.12);
}

body.reduced-effects::after,
body.reduced-effects .coin-stage::after,
body.reduced-effects .coin-skin-crystal .big-coin-inner {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .coin-stage::after,
  .coin-skin-crystal .big-coin-inner {
    animation: none !important;
  }
}

/* Farbfelder als Vorschau der Themen */
.theme-swatch {
  display: inline-flex;
  overflow: hidden;
  width: 74px;
  height: 52px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.theme-swatch i {
  flex: 1;
}

.theme-swatch[data-swatch="tavern"] i:nth-child(1) { background: #06120c; }
.theme-swatch[data-swatch="tavern"] i:nth-child(2) { background: #1c4231; }
.theme-swatch[data-swatch="tavern"] i:nth-child(3) { background: #f5c542; }
.theme-swatch[data-swatch="ocean"] i:nth-child(1) { background: #03101b; }
.theme-swatch[data-swatch="ocean"] i:nth-child(2) { background: #144060; }
.theme-swatch[data-swatch="ocean"] i:nth-child(3) { background: #4fd1c5; }
.theme-swatch[data-swatch="volcano"] i:nth-child(1) { background: #120605; }
.theme-swatch[data-swatch="volcano"] i:nth-child(2) { background: #5a1e12; }
.theme-swatch[data-swatch="volcano"] i:nth-child(3) { background: #ff6a2b; }
.theme-swatch[data-swatch="night"] i:nth-child(1) { background: #070616; }
.theme-swatch[data-swatch="night"] i:nth-child(2) { background: #2c2664; }
.theme-swatch[data-swatch="night"] i:nth-child(3) { background: #c9a8ff; }
.theme-swatch[data-swatch="ice"] i:nth-child(1) { background: #08131d; }
.theme-swatch[data-swatch="ice"] i:nth-child(2) { background: #3c648c; }
.theme-swatch[data-swatch="ice"] i:nth-child(3) { background: #e8fbff; }
.theme-swatch[data-swatch="royal"] i:nth-child(1) { background: #0a0805; }
.theme-swatch[data-swatch="royal"] i:nth-child(2) { background: #3a2c14; }
.theme-swatch[data-swatch="royal"] i:nth-child(3) { background: linear-gradient(180deg, #ffe58a, #c38d12); }

/* ---------- Schatzkammer-Kacheln ---------- */
.cos-rare { --cos: #5ad8ff; --cos-glow: rgba(90, 216, 255, 0.35); }
.cos-epic { --cos: #c27bff; --cos-glow: rgba(194, 123, 255, 0.4); }
.cos-legendary { --cos: #f5c542; --cos-glow: rgba(245, 197, 66, 0.5); }
.cos-common,
.cos-none { --cos: #9fb8aa; --cos-glow: rgba(159, 184, 170, 0.2); }

.cos-intro {
  max-width: 820px;
}

.cos-category {
  margin-bottom: 18px;
}

.cos-category h3 {
  margin: 0 0 10px;
  color: var(--gold);
}

.cos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

.cos-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--cos);
  background: var(--bg-panel);
  text-align: center;
}

.cos-tile:not(.owned) .cos-preview {
  filter: saturate(0.55) brightness(0.8);
}

.cos-tile.equipped {
  box-shadow: 0 0 0 2px var(--cos), 0 0 18px var(--cos-glow);
}

.cos-tile.cos-legendary {
  background: linear-gradient(180deg, rgba(245, 197, 66, 0.12), transparent 60%), var(--bg-panel);
}

.cos-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 84px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.effect-icon {
  font-size: 2.6rem;
  line-height: 1;
}

.cos-name {
  font-weight: 800;
}

.cos-rarity {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cos);
}

.cos-desc {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cos-action {
  min-width: 120px;
}

.cos-price {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Glücksrad nach der großen Fahrt ---------- */
.cos-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
  overflow-y: auto;
  animation: panel-in 0.3s ease-out;
}

.cos-dialog {
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: 20px;
  border-radius: 20px;
  border: 2px solid var(--gold-dark);
  background: var(--panel), var(--bg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(245, 197, 66, 0.25);
  text-align: center;
}

.cos-wheel-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px 0 12px;
}

.cos-pointer {
  z-index: 1;
  margin-bottom: -12px;
  color: var(--gold);
  font-size: 2rem;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.cos-wheel {
  position: relative;
  width: min(300px, 76vw);
  height: min(300px, 76vw);
  border-radius: 50%;
  border: 6px solid var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(255, 229, 138, 0.35), 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.45);
}

.cos-seg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}

.cos-seg-icon {
  margin-top: 14%;
  font-size: 1.9rem;
  line-height: 1;
}

.cos-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, var(--gold) 40%, var(--gold-dark) 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  font-size: 1.8rem;
}

.cos-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.cos-legend li {
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--cos);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.85rem;
}

.cos-legend small {
  color: var(--cos);
  font-weight: 700;
}

.cos-won {
  margin: 4px auto 6px;
  padding: 12px;
  border-radius: 14px;
  border: 2px solid var(--cos);
  box-shadow: 0 0 22px var(--cos-glow);
  animation: result-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.cos-won small {
  color: var(--cos);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cos-won-icon {
  display: block;
  font-size: 3rem;
  line-height: 1.2;
}

/* ---------- Casino-Look: Filz, Bande und Kartenrücken ---------- */
.table-look-felt {
  --felt: radial-gradient(ellipse at center, #17784a 0%, #0b5a32 70%);
  --felt-flat: #0b5a32;
  --rail: #5a3a1a;
  --rail-glow: 0 0 0 transparent;
  --card-back: radial-gradient(circle at 50% 50%, rgba(245, 197, 66, 0.5) 0 18%, transparent 19%), repeating-linear-gradient(45deg, #7b1e1e 0 6px, #962626 6px 12px);
  --card-back-edge: #fdfdfd;
  --card-back-mark: '';
  --card-back-mark-color: transparent;
}

:root[data-table="velvet"],
.table-look-velvet {
  --felt: radial-gradient(ellipse at center, #2a6fc0 0%, #123a73 72%);
  --felt-flat: #123a73;
  --rail: #2b1d12;
  --card-back: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0 16%, transparent 17%), repeating-linear-gradient(45deg, #1d4f9a 0 6px, #2a64b8 6px 12px);
  --card-back-edge: #f2f6ff;
  --rail-glow: 0 0 0 transparent;
  --card-back-mark: '';
  --card-back-mark-color: transparent;
}

:root[data-table="bordeaux"],
.table-look-bordeaux {
  --felt: radial-gradient(ellipse at center, #9a2a3a 0%, #520f1c 72%);
  --felt-flat: #520f1c;
  --rail: #3a1f10;
  --card-back: radial-gradient(circle at 50% 50%, rgba(245, 197, 66, 0.6) 0 18%, transparent 19%), repeating-linear-gradient(-45deg, #6e1422 0 5px, #8a1d2e 5px 10px);
  --card-back-edge: #f5c542;
  --rail-glow: 0 0 0 transparent;
  --card-back-mark: '';
  --card-back-mark-color: transparent;
}

:root[data-table="ebony"],
.table-look-ebony {
  --felt: radial-gradient(ellipse at center, #3a3a42 0%, #121216 74%);
  --felt-flat: #16161b;
  --rail: #26262c;
  --rail-glow: 0 0 0 2px rgba(201, 209, 216, 0.35);
  --card-back:
    repeating-linear-gradient(45deg, rgba(220, 225, 235, 0.4) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(220, 225, 235, 0.4) 0 2px, transparent 2px 9px),
    #15151a;
  --card-back-edge: #c9d1d8;
  --card-back-mark: '';
  --card-back-mark-color: transparent;
}

:root[data-table="map"],
.table-look-map {
  --felt:
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(60, 30, 10, 0.16) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(60, 30, 10, 0.16) 46px 48px),
    radial-gradient(ellipse at center, #9c7240 0%, #5a3a17 76%);
  --felt-flat: #6b4722;
  --rail: #3b2410;
  --card-back: repeating-linear-gradient(45deg, #d6b47a 0 6px, #c39c5e 6px 12px);
  --card-back-edge: #5a3a17;
  --card-back-mark: '☠\FE0E';
  --card-back-mark-color: #3b2410;
  --rail-glow: 0 0 0 transparent;
}

:root[data-table="emperor"],
.table-look-emperor {
  --felt:
    radial-gradient(circle at 50% 50%, rgba(245, 197, 66, 0.12) 0 2px, transparent 3px) 0 0 / 22px 22px,
    radial-gradient(ellipse at center, #241d12 0%, #070604 76%);
  --felt-flat: #0d0b07;
  --rail: #b8860b;
  --rail-glow: 0 0 22px rgba(245, 197, 66, 0.45);
  --card-back: radial-gradient(circle at 35% 25%, #fff3b0 0%, #f5c542 35%, #c38d12 70%, #8a6508 100%);
  --card-back-edge: #fff3b0;
  --card-back-mark: '♛';
  --card-back-mark-color: #5a3d00;
}

/* Vorschau in der Schatzkammer: kleiner Tisch mit zwei Karten */
.table-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 104px;
  height: 64px;
  border-radius: 32px;
  border: 5px solid var(--rail);
  background: var(--felt);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), var(--rail-glow);
}

.ts-card {
  position: relative;
  width: 22px;
  height: 31px;
  border-radius: 3px;
  border: 2px solid var(--card-back-edge);
  background: var(--card-back);
}

.ts-card::after {
  content: var(--card-back-mark);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--card-back-mark-color);
  font-size: 0.75rem;
  line-height: 1;
}

.ts-card + .ts-card {
  transform: rotate(10deg);
}

/* ---------- Namensschilder in Spielen mit Freunden ---------- */
.nametag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 1px 8px 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--nt);
  background: var(--nt-bg);
  box-shadow: 0 0 8px var(--nt-glow);
  vertical-align: middle;
  line-height: 1.5;
}

.nt-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nt-title {
  flex: none;
  color: var(--nt);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.nt-helmsman {
  --nt: #dfe6ec;
  --nt-bg: linear-gradient(180deg, rgba(223, 230, 236, 0.22), rgba(120, 132, 144, 0.12));
  --nt-glow: rgba(223, 230, 236, 0.2);
}

.nt-hunter {
  --nt: #6fdc8c;
  --nt-bg: linear-gradient(180deg, rgba(60, 150, 90, 0.35), rgba(20, 70, 40, 0.3));
  --nt-glow: rgba(111, 220, 140, 0.25);
  border-style: dashed;
}

.nt-captain {
  --nt: #b4c3ff;
  --nt-bg: linear-gradient(90deg, rgba(50, 80, 210, 0.45), rgba(140, 60, 210, 0.45));
  --nt-glow: rgba(140, 120, 255, 0.5);
}

.nt-kraken {
  --nt: #5ff0dc;
  --nt-bg: linear-gradient(90deg, rgba(0, 90, 100, 0.55), rgba(20, 40, 90, 0.55));
  --nt-glow: rgba(79, 209, 197, 0.45);
  animation: kraken-glow 2.4s ease-in-out infinite alternate;
}

@keyframes kraken-glow {
  to { box-shadow: 0 0 16px rgba(79, 209, 197, 0.85); }
}

.nt-admiral {
  --nt: #ffe58a;
  --nt-glow: rgba(245, 197, 66, 0.6);
  border-color: #f5c542;
  background: linear-gradient(110deg, rgba(110, 72, 0, 0.6) 30%, rgba(255, 229, 138, 0.55) 50%, rgba(110, 72, 0, 0.6) 70%) 0 0 / 250% 100%;
  animation: admiral-shine 3.2s linear infinite;
}

@keyframes admiral-shine {
  from { background-position: 125% 0; }
  to { background-position: -125% 0; }
}

body.reduced-effects .nt-kraken,
body.reduced-effects .nt-admiral {
  animation: none;
}

.profile-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  font-weight: 700;
}

/* Am Poker-Platz ist wenig Platz: Titel unter den Namen */
.seat-name .nametag {
  flex-direction: column;
  gap: 0;
  padding: 1px 10px 2px;
  border-radius: 10px;
  line-height: 1.25;
}

.seat-name .nt-title {
  font-size: 0.56rem;
}