/* ==========================================================================
   max-live – Lobby-Bereich „Gemeinsam spielen“
   Lobby: Umschalter .lobby-modes (Spiele | Gemeinsam spielen), Zustand body.tc-lobby-live (js/live-tables.js setMode).
   Bereich #liveSection: Tischliste .tb-lobby (Gruppen und Karten in max-tables.css).
   Das Wochen-Lotto (Banner .lt-promo, Dialog #lottoOverlay) ist seit 2026-10-13 abgebaut.
   Alles hängt an body.tc-redesign.tc-max; Zustände als Klassen/data-Attribute, Bewegung nur transform/opacity.
   ========================================================================== */

/* Nur der gewählte Bereich ist zu sehen (gilt auch ohne tc-max, damit nie beide Bereiche untereinander stehen). */
body:not(.tc-lobby-live) #liveSection { display: none !important; }
/* Gleiche Gewichtung wie max-lobby.css („#siteMain #gameGrid { display: grid !important }“), sonst bleibt das Raster stehen. */
body.tc-lobby-live #allGamesSection,
body.tc-lobby-live #gameGrid,
body.tc-lobby-live #gameSearchEmpty,
body.tc-redesign.tc-max.tc-lobby-live #siteMain #allGamesSection,
body.tc-redesign.tc-max.tc-lobby-live #siteMain #gameGrid,
body.tc-redesign.tc-max.tc-lobby-live #siteMain #gameSearchEmpty { display: none !important; }

/* ------------------------------------------------------------ Umschalter Spiele | Gemeinsam spielen */
body.tc-redesign.tc-max #siteMain .lobby-modes {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(var(--lb-inner), 720px);
  margin: var(--lb-gap-section) auto 0;
  padding: 6px;
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-xl);
  background: var(--mx-surface);
  box-shadow: var(--mx-bevel), var(--mx-shadow);
  scroll-margin-top: 96px;
}
body.tc-redesign.tc-max .lobby-mode {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--mx-r-lg);
  background: transparent;
  color: var(--mx-text-2);
  font-family: var(--mx-font-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--mx-mid) var(--mx-ease), color var(--mx-mid) var(--mx-ease);
}
body.tc-redesign.tc-max .lobby-mode svg { flex: 0 0 auto; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.tc-redesign.tc-max .lobby-mode-text { display: grid; gap: 2px; min-width: 0; }
body.tc-redesign.tc-max .lobby-mode-text b { font-size: 17px; font-weight: 700; line-height: 1.15; color: var(--mx-text); }
body.tc-redesign.tc-max .lobby-mode-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mx-text-2); }
body.tc-redesign.tc-max .lobby-mode:hover { background: rgba(148, 170, 220, .08); }
body.tc-redesign.tc-max .lobby-mode:focus-visible { outline: 2px solid var(--mx-gold); outline-offset: 2px; }
body.tc-redesign.tc-max .lobby-mode.is-active { background: var(--mx-raised); box-shadow: var(--mx-bevel), inset 0 0 0 1.5px rgba(255, 201, 60, .5); color: var(--mx-gold-hi); }
body.tc-redesign.tc-max .lobby-mode[data-lobby-mode="live"].is-active { box-shadow: var(--mx-bevel), inset 0 0 0 1.5px rgba(46, 229, 157, .55); color: var(--mx-emerald); }
body.tc-redesign.tc-max .lobby-mode-dot { position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--mx-emerald); }
body.tc-redesign.tc-max .lobby-mode-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--mx-emerald); opacity: 0; animation: ltModePulse 2.2s ease-out infinite; }
@keyframes ltModePulse { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
/* Der Umschalter trägt den Abstand nach oben – die Bereiche darunter rücken näher heran. */
body.tc-redesign.tc-max #siteMain .lobby-modes ~ #allGamesSection { margin-top: 34px !important; }

/* ------------------------------------------------------------ Bereich „Gemeinsam spielen“ */
body.tc-redesign.tc-max #siteMain #liveSection {
  box-sizing: border-box;
  width: var(--lb-inner) !important;
  margin: 34px auto 0 !important;
  padding: 0 !important;
  scroll-margin-top: 92px;
}
body.tc-redesign.tc-max #liveSection .tcx-live-head { margin: 0 0 22px; }
body.tc-redesign.tc-max #liveSection .section-title {
  margin: 0 !important;
  font-family: var(--mx-font-display) !important;
  font-size: clamp(34px, 3.2vw, 44px) !important;
  font-weight: 800 !important;
  line-height: .95 !important;
  color: var(--mx-text) !important;
  text-transform: none !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}
body.tc-redesign.tc-max #liveSection .lobby-intro { margin: 12px 0 0 !important; max-width: 62ch; font-size: 16px !important; line-height: 1.55 !important; color: var(--mx-text-2) !important; }

/* ------------------------------------------------------------ Schmale Breiten */
@media (max-width: 760px) {
  body.tc-redesign.tc-max #siteMain .lobby-modes { width: var(--lb-inner); }
  body.tc-redesign.tc-max .lobby-mode { min-height: 58px; padding: 8px 10px; gap: 9px; }
  body.tc-redesign.tc-max .lobby-mode svg { width: 22px; height: 22px; }
  body.tc-redesign.tc-max .lobby-mode-text b { font-size: 15px; }
  body.tc-redesign.tc-max .lobby-mode-text small { font-size: 12px; }
  body.tc-redesign.tc-max .lobby-mode-dot { top: 8px; right: 8px; }
}