/* =========================================================
   mobile.css — Eigenständige Mobile-Version (Neuaufbau)

   Grundprinzip:
   - Desktop-Layout bleibt in common.css / lobby.css / game.css.
   - Diese Datei ist die komplette Mobile-Shell für Handy, Fold und
     Touch-Geräte.
   - Jede Regel ist genau EINMAL definiert. Alle mobilen Regeln sind in einer zusammenhängenden Ebene organisiert,
     damit sich keine mehrfachen Override-Schichten gegenseitig überschreiben.
   - !important wird nur dort genutzt, wo die Desktop-Regeln (game.css nutzt
     selbst überall !important) sonst gewinnen würden.

   Zusammenspiel mit responsive.js:
   - JS setzt Body-/HTML-Klassen: mobile-shell, mobile-menu-open,
     game-menu-open, game-header-collapsed, mobile-own-hand-on-table.
   - JS baut die Statusanzeige zu Gruppen um (.header-stat-combo,
     .header-level-xp-group, .header-wallet-group, .header-profile-item) und
     setzt --xp-progress, data-xp-tooltip, .show-xp-tip.
   - JS erzeugt die Buttons/Drawer/Backdrop (.mobile-menu-fab,
     .mobile-lobby-drawer, .mobile-menu-backdrop, .game-header-toggle).
   - JS setzt die Höhen-Variablen --app-height / --app-vh.

   Gliederung:
     0. Grund-Chrome (immer versteckt)
     1. Mobile-Shell-Basis (Variablen, Reset, Touch-Flächen, FAB, Backdrop)
     2. Status-Header (Profil, Level/XP-Balken, Wallet, XP-Tooltip)
     3. Lobby (Drawer, Tischliste als Karten)
     4. Game — scrollbare Tischfläche
     5. Game — HUD, eigene Karten, Chat, Kartenstärken
     6. Game — Aktionsfeld & Raise-Stepper
     7. Modals (Einstellungen/Profil/Freunde)
     8. Buy-In
     9. Orientierung/Größen-Feinschliff (Portrait klein, Landscape)
    10. Showdown (Gewinner-Board-Callout, Zusammenfassung)
   ========================================================= */


/* =========================================================
   0. GRUND-CHROME — immer versteckt, bis die Mobile-Shell greift
   ========================================================= */
.mobile-menu-fab,
.mobile-menu-backdrop,
.mobile-lobby-drawer {
  display: none;
}


/* =========================================================
   1. MOBILE-SHELL-BASIS
   Variablen, Reset, Touch-Flächen, Menü-Button (FAB), Backdrop.
   ========================================================= */
@media (max-width: 1100px),
       (max-width: 1180px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --m-vh: var(--app-height, 100svh);
    --m-gap: clamp(8px, 2.4vw, 14px);
    --m-page-pad-x: max(12px, var(--safe-left));
    --m-page-pad-r: max(12px, var(--safe-right));

    --m-panel-bg: rgba(10, 18, 36, 0.92);
    --m-panel-bg-solid: rgba(9, 17, 33, 0.97);
    --m-border: rgba(56, 226, 255, 0.52);
    --m-cyan: #38e2ff;
    --m-yellow: #ffe271;
    --m-text: #f4fbff;
    --m-muted: #cdd9ef;

    --m-font-sm: calc(clamp(0.72rem, 2.6vw, 0.9rem) * var(--ui-font-scale, 1));
    --m-font: calc(clamp(0.82rem, 3vw, 1.04rem) * var(--ui-font-scale, 1));
    --m-font-lg: calc(clamp(1rem, 3.8vw, 1.3rem) * var(--ui-font-scale, 1));
    --m-control-pad-y: calc(clamp(6px, 1.6vw, 9px) * var(--ui-control-scale, 1));
    --m-control-pad-x: calc(clamp(10px, 2.8vw, 15px) * var(--ui-control-scale, 1));
    --m-radius: 14px;
    --m-shadow: 0 0 18px rgba(56, 226, 255, 0.22), 0 0 36px rgba(204, 143, 255, 0.08) inset;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    width: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Füllt die Safe-Area-Zonen (Notch/Querformat) statt weiß. */
    background-color: #0a1020 !important;
  }

  body {
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
    background-color: #0a1020 !important;
    background-attachment: scroll !important;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  /* Vollflächiger Hintergrund bleibt fest hinter allem.
     Trägt Bild + deckende Basisfarbe, damit auch die Safe-Area
     (Notch/Querformat) auf der Game-Seite nie weiß durchscheint. */
  .lobby-bg-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #0a1020 !important;
    background-image: linear-gradient(rgba(15, 20, 40, 0.25), rgba(15, 20, 40, 0.25)),
      url('../img/lobbyhintergrund.png') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  .lobby-overlay::after {
    border-width: 1px !important;
    opacity: 0.42 !important;
  }

  /* Einheitliche Touch-Zielgrößen für alle interaktiven Elemente. */
  .neon-btn,
  .lobby-tab,
  .lobby-btn,
  .join-table-btn,
  #tableFilterDropdownBtn,
  .settings-scale-btn,
  .poker-action-btn,
  .raise-input {
    min-height: calc(2.35em + 2px) !important;
    padding: var(--m-control-pad-y) var(--m-control-pad-x) !important;
    font-size: var(--m-font) !important;
    line-height: 1.15 !important;
    border-radius: var(--m-radius) !important;
    white-space: normal !important;
  }

  /* Menü-Button (Lobby-Drawer + Game-Menü). */
  .mobile-menu-fab {
    position: fixed !important;
    z-index: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: calc(2.25em + 2px) !important;
    min-width: calc(2.25em + 2px) !important;
    padding: var(--m-control-pad-y) var(--m-control-pad-x) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(56, 226, 255, 0.74) !important;
    background: linear-gradient(135deg, rgba(16, 27, 52, 0.96), rgba(18, 44, 65, 0.94)) !important;
    color: var(--m-text) !important;
    box-shadow: 0 0 18px rgba(56, 226, 255, 0.34), 0 0 18px rgba(56, 226, 255, 0.16) inset !important;
    font-size: var(--m-font) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    touch-action: manipulation !important;
  }

  .mobile-menu-fab-icon {
    font-size: 1.08em !important;
    line-height: 1 !important;
  }

  /* Abdunkelnder Hintergrund hinter dem geöffneten Lobby-Drawer. */
  .mobile-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 700 !important;
    display: block !important;
    border: 0 !important;
    background: rgba(2, 6, 14, 0.56) !important;
    backdrop-filter: blur(4px) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}


/* =========================================================
   2. STATUS-HEADER
   Gemeinsame Darstellung für Lobby-Header und geöffnetes Game-Menü:
   links Profilname, rechts oben Level + XP-Balken, rechts unten Wallet.
   responsive.js gruppiert die Elemente in .header-*-group.
   ========================================================= */
@media (max-width: 1100px),
       (max-width: 1180px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) {
  /* Ein gemeinsamer Statuscontainer mit klaren Trennlinien. */
  body.lobby-page:not(.game-page) .lobby-header-left,
  body.game-page.game-menu-open .lobby-header-left {
    --status-player-col: 38%;
    position: relative;
    display: grid !important;
    grid-template-columns: var(--status-player-col) minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, minmax(40px, auto)) !important;
    grid-template-areas:
      "user progress"
      "user wallet" !important;
    gap: 0 !important;
    width: min(100%, 650px) !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 18px !important;
    border: 1px solid rgba(56, 226, 255, 0.42) !important;
    background: linear-gradient(180deg, rgba(10, 20, 40, 0.9), rgba(7, 14, 29, 0.86)) !important;
    box-shadow: var(--m-shadow) !important;
  }

  /* Senkrechte Trennlinie zwischen Profil und Werten. */
  body.lobby-page:not(.game-page) .lobby-header-left::before,
  body.game-page.game-menu-open .lobby-header-left::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    bottom: 8px !important;
    left: var(--status-player-col) !important;
    width: 1px !important;
    background: rgba(56, 226, 255, 0.28) !important;
    pointer-events: none !important;
  }

  /* Waagerechte Trennlinie zwischen Fortschritt und Wallet. */
  body.lobby-page:not(.game-page) .lobby-header-left::after,
  body.game-page.game-menu-open .lobby-header-left::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: var(--status-player-col) !important;
    right: 8px !important;
    height: 1px !important;
    background: rgba(56, 226, 255, 0.28) !important;
    pointer-events: none !important;
  }

  /* Kein Container-in-Container: innere Kacheln werden neutralisiert. */
  body.lobby-page:not(.game-page) .lobby-header-left > .header-profile-item,
  body.game-page.game-menu-open .lobby-header-left > .header-profile-item,
  body.lobby-page:not(.game-page) .lobby-header-left > .header-stat-combo,
  body.game-page.game-menu-open .lobby-header-left > .header-stat-combo,
  body.lobby-page:not(.game-page) .lobby-header-left .lobby-level,
  body.game-page.game-menu-open .lobby-header-left .lobby-level,
  body.lobby-page:not(.game-page) .lobby-header-left .lobby-chips,
  body.game-page.game-menu-open .lobby-header-left .lobby-chips,
  body.lobby-page:not(.game-page) .lobby-header-left .lobby-diamonds,
  body.game-page.game-menu-open .lobby-header-left .lobby-diamonds {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Profilname links über beide Zeilen. */
  body.lobby-page:not(.game-page) .lobby-header-left > .header-profile-item,
  body.game-page.game-menu-open .lobby-header-left > .header-profile-item {
    grid-area: user !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    color: #61ffe0 !important;
    font-size: calc(clamp(0.82rem, 3.1vw, 1.05rem) * var(--ui-font-scale, 1)) !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.lobby-page:not(.game-page) .lobby-header-left > .header-level-xp-group,
  body.game-page.game-menu-open .lobby-header-left > .header-level-xp-group {
    grid-area: progress !important;
  }

  body.lobby-page:not(.game-page) .lobby-header-left > .header-wallet-group,
  body.game-page.game-menu-open .lobby-header-left > .header-wallet-group {
    grid-area: wallet !important;
  }

  /* Zwei-Spalten-Aufteilung innerhalb der Gruppen. */
  body.lobby-page:not(.game-page) .header-stat-combo,
  body.game-page.game-menu-open .header-stat-combo {
    position: relative;
    display: grid !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body.lobby-page:not(.game-page) .header-level-xp-group,
  body.game-page.game-menu-open .header-level-xp-group {
    grid-template-columns: minmax(42px, auto) minmax(0, 1fr) !important;
  }

  body.lobby-page:not(.game-page) .header-wallet-group,
  body.game-page.game-menu-open .header-wallet-group {
    grid-template-columns: minmax(0, 1fr) minmax(42px, auto) !important;
  }

  /* Werte in feste Spalten setzen (überschreibt alte grid-area-Vererbung). */
  body.lobby-page:not(.game-page) .header-stat-combo > #levelDisplay,
  body.game-page.game-menu-open .header-stat-combo > #levelDisplay,
  body.lobby-page:not(.game-page) .header-stat-combo > #xpDisplay,
  body.game-page.game-menu-open .header-stat-combo > #xpDisplay,
  body.lobby-page:not(.game-page) .header-stat-combo > #chipDisplay,
  body.game-page.game-menu-open .header-stat-combo > #chipDisplay,
  body.lobby-page:not(.game-page) .header-stat-combo > #diamondDisplay,
  body.game-page.game-menu-open .header-stat-combo > #diamondDisplay {
    grid-area: auto !important;
    grid-row: 1 / 2 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 7px 10px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: calc(clamp(0.72rem, 2.8vw, 0.96rem) * var(--ui-font-scale, 1)) !important;
  }

  body.lobby-page:not(.game-page) .header-stat-combo > #levelDisplay,
  body.game-page.game-menu-open .header-stat-combo > #levelDisplay {
    grid-column: 1 / 2 !important;
    justify-content: center !important;
    color: var(--m-yellow) !important;
  }

  body.lobby-page:not(.game-page) .header-stat-combo > #xpDisplay,
  body.game-page.game-menu-open .header-stat-combo > #xpDisplay {
    grid-column: 2 / 3 !important;
    justify-content: stretch !important;
    color: var(--m-yellow) !important;
  }

  body.lobby-page:not(.game-page) .header-stat-combo > #chipDisplay,
  body.game-page.game-menu-open .header-stat-combo > #chipDisplay {
    grid-column: 1 / 2 !important;
    justify-content: flex-start !important;
  }

  body.lobby-page:not(.game-page) .header-stat-combo > #diamondDisplay,
  body.game-page.game-menu-open .header-stat-combo > #diamondDisplay {
    grid-column: 2 / 3 !important;
    justify-content: flex-end !important;
  }

  /* XP als schmaler Fortschrittsbalken; der reine XP-Text wird versteckt. */
  body.lobby-page:not(.game-page) .header-level-xp-group > #xpDisplay > #userXp,
  body.game-page.game-menu-open .header-level-xp-group > #xpDisplay > #userXp {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }

  body.lobby-page:not(.game-page) .header-level-xp-group > #xpDisplay,
  body.game-page.game-menu-open .header-level-xp-group > #xpDisplay {
    position: relative !important;
  }

  body.lobby-page:not(.game-page) .header-level-xp-group > #xpDisplay::before,
  body.game-page.game-menu-open .header-level-xp-group > #xpDisplay::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    right: 8px !important;
    top: 50% !important;
    height: 7px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }

  body.lobby-page:not(.game-page) .header-level-xp-group > #xpDisplay::after,
  body.game-page.game-menu-open .header-level-xp-group > #xpDisplay::after {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    height: 7px !important;
    width: calc(100% - 14px) !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(255, 226, 113, 0.95), rgba(56, 226, 255, 0.82)) !important;
    box-shadow: 0 0 12px rgba(255, 226, 113, 0.26), 0 0 12px rgba(56, 226, 255, 0.22) !important;
    clip-path: inset(0 calc(100% - var(--xp-progress, 0%)) 0 0 round 999px) !important;
  }

  /* XP-Tooltip per Tap/Hover/Focus (JS setzt .show-xp-tip für 2,2 s). */
  body .header-level-xp-group[data-xp-tooltip] {
    position: static !important;
    overflow: visible !important;
    cursor: help !important;
  }

  body .header-level-xp-group[data-xp-tooltip]::after {
    content: attr(data-xp-tooltip) !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    z-index: 9000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: min(240px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(56, 226, 255, 0.72) !important;
    background: linear-gradient(180deg, rgba(12, 24, 45, 0.99), rgba(6, 13, 28, 0.99)) !important;
    color: var(--m-text) !important;
    font-size: calc(0.84rem * var(--ui-font-scale, 1)) !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    text-align: center !important;
    white-space: normal !important;
    box-shadow: 0 0 22px rgba(56, 226, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.42) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 2px) !important;
    transition: opacity 140ms ease, transform 140ms ease !important;
  }

  body .header-level-xp-group[data-xp-tooltip]:hover::after,
  body .header-level-xp-group[data-xp-tooltip]:focus-visible::after,
  body .header-level-xp-group.show-xp-tip::after {
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
  }
}

/* Sehr schmale Handys: Profilspalte kleiner, Schrift etwas reduziert. */
@media (max-width: 430px) and (orientation: portrait) {
  body.lobby-page:not(.game-page) .lobby-header-left,
  body.game-page.game-menu-open .lobby-header-left {
    --status-player-col: 34%;
    grid-template-rows: repeat(2, minmax(38px, auto)) !important;
  }

  body.lobby-page:not(.game-page) .header-stat-combo > #levelDisplay,
  body.game-page.game-menu-open .header-stat-combo > #levelDisplay,
  body.lobby-page:not(.game-page) .header-stat-combo > #xpDisplay,
  body.game-page.game-menu-open .header-stat-combo > #xpDisplay,
  body.lobby-page:not(.game-page) .header-stat-combo > #chipDisplay,
  body.game-page.game-menu-open .header-stat-combo > #chipDisplay,
  body.lobby-page:not(.game-page) .header-stat-combo > #diamondDisplay,
  body.game-page.game-menu-open .header-stat-combo > #diamondDisplay {
    font-size: calc(clamp(0.66rem, 2.7vw, 0.86rem) * var(--ui-font-scale, 1)) !important;
  }
}


/* =========================================================
   3. LOBBY (Mobile)
   Einspaltige, scrollbare Lobby. Tabs/Aktionen liegen im Drawer.
   Tischliste wird als Karten statt als Desktop-Tabelle gezeigt.
   ========================================================= */
@media (max-width: 1100px),
       (hover: none) and (pointer: coarse) {
  body.lobby-page:not(.game-page) {
    height: auto !important;
    min-height: var(--m-vh) !important;
    overflow-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
  }

  body.lobby-page:not(.game-page) .lobby-overlay {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: var(--m-vh) !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    padding-bottom: max(18px, var(--safe-bottom)) !important;
  }

  /* Header zeigt nur die Statusgruppe; Menü-Button sitzt als Symbol oben rechts. */
  body.lobby-page:not(.game-page) .lobby-header {
    position: relative !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "status" !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: max(12px, var(--safe-top)) var(--m-page-pad-r) 0 var(--m-page-pad-x) !important;
    overflow: visible !important;
  }

  body.lobby-page:not(.game-page) .lobby-header-left {
    grid-area: status !important;
    width: min(calc(100vw - 2 * (var(--m-page-pad-r) + 42px)), 650px) !important;
    max-width: calc(100vw - 2 * (var(--m-page-pad-r) + 42px)) !important;
    margin-inline: auto !important;
  }

  /* Center/Right werden per JS in den Drawer verschoben — im Header ausblenden. */
  body.lobby-page:not(.game-page) .lobby-header > .lobby-header-center,
  body.lobby-page:not(.game-page) .lobby-header > .lobby-header-right {
    display: none !important;
  }

  body.lobby-page:not(.game-page) .mobile-lobby-fab {
    top: max(12px, var(--safe-top)) !important;
    right: max(12px, var(--safe-right)) !important;
    gap: 0 !important;
    padding-left: var(--m-control-pad-y) !important;
    padding-right: var(--m-control-pad-y) !important;
  }

  /* Lobby-Menü nur als Symbol (☰), damit es die Statusgruppe nicht überlappt. */
  body.lobby-page:not(.game-page) .mobile-lobby-fab .mobile-menu-fab-label {
    display: none !important;
  }

  /* Der Drawer mit Tabs und Aktionen. */
  body.lobby-page:not(.game-page) .mobile-lobby-drawer {
    position: fixed !important;
    top: calc(max(10px, var(--safe-top)) + calc(2.25em + 24px)) !important;
    right: max(12px, var(--safe-right)) !important;
    z-index: 760 !important;
    display: block !important;
    width: min(380px, calc(100vw - 24px)) !important;
    max-height: min(76vh, calc(var(--m-vh) - 86px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 20px !important;
    background: var(--m-panel-bg-solid) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.46), 0 0 26px rgba(56, 226, 255, 0.22) !important;
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  body.lobby-page.mobile-menu-open:not(.game-page) .mobile-lobby-drawer {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  body.lobby-page:not(.game-page) .mobile-lobby-drawer .lobby-header-center,
  body.lobby-page:not(.game-page) .mobile-lobby-drawer .lobby-header-right {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.lobby-page:not(.game-page) .mobile-lobby-drawer .lobby-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 10px 0 !important;
    overflow: visible !important;
  }

  body.lobby-page:not(.game-page) .mobile-lobby-drawer .lobby-header-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding-top: 2px !important;
  }

  body.lobby-page:not(.game-page) .mobile-lobby-drawer .lobby-tab,
  body.lobby-page:not(.game-page) .mobile-lobby-drawer .lobby-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: calc(2.45em + 2px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.lobby-page:not(.game-page) .mobile-lobby-drawer .btn-label {
    display: inline !important;
  }

  /* Inhaltsbereich. */
  body.lobby-page:not(.game-page) .lobby-content {
    position: relative !important;
    z-index: 10 !important;
    width: calc(100% - 18px) !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 12px auto 0 !important;
    padding: clamp(12px, 3vw, 18px) !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  body.lobby-page:not(.game-page) .table-filter-dropdown {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  body.lobby-page:not(.game-page) #tableFilterDropdownBtn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Tischliste als Kartenansicht statt breiter Tabelle. */
  body.lobby-page:not(.game-page) .poker-table-list,
  body.lobby-page:not(.game-page) .poker-table-list thead,
  body.lobby-page:not(.game-page) .poker-table-list tbody,
  body.lobby-page:not(.game-page) .poker-table-list tr,
  body.lobby-page:not(.game-page) .poker-table-list th,
  body.lobby-page:not(.game-page) .poker-table-list td {
    display: block !important;
  }

  body.lobby-page:not(.game-page) .poker-table-list {
    width: 100% !important;
    border-spacing: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.lobby-page:not(.game-page) .poker-table-list thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }

  body.lobby-page:not(.game-page) .poker-table-list tbody {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Tisch-Karte: Titel + Statistik-Kacheln. */
  body.lobby-page:not(.game-page) .poker-table-list tr {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    grid-template-areas:
      "name name xp"
      "blinds blinds blinds"
      "bank level seats"
      "join join join" !important;
    align-items: stretch !important;
    gap: 9px !important;
    padding: 12px !important;
    border: 1px solid rgba(56, 226, 255, 0.36) !important;
    border-radius: 18px !important;
    background: rgba(9, 17, 33, 0.84) !important;
    box-shadow: 0 0 18px rgba(56, 226, 255, 0.12) !important;
  }

  /* Basis: Statistik-Kachel (bank/level/seats). */
  body.lobby-page:not(.game-page) .poker-table-list td {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(56, 226, 255, 0.06) !important;
    color: var(--m-text) !important;
    font-size: var(--m-font) !important;
    font-weight: 800 !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }

  /* Kachel-Label aus data-label (von responsive.js gesetzt). */
  body.lobby-page:not(.game-page) .poker-table-list td::before {
    content: attr(data-label) !important;
    order: -1 !important;
    color: var(--m-cyan) !important;
    font-size: 0.72em !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 10px rgba(56, 226, 255, 0.6) !important;
  }

  /* Titelzeile: Tischname. */
  body.lobby-page:not(.game-page) .poker-table-list td.table-name-cell {
    grid-area: name !important;
    align-items: flex-start !important;
    padding: 4px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: calc(var(--m-font) * 1.18) !important;
    font-weight: 900 !important;
    text-align: left !important;
    text-shadow: 0 0 12px rgba(56, 226, 255, 0.4) !important;
    overflow-wrap: anywhere !important;
  }
  body.lobby-page:not(.game-page) .poker-table-list td.table-name-cell::before {
    display: none !important;
  }

  /* XP-Badge oben rechts. */
  body.lobby-page:not(.game-page) .poker-table-list td.table-xp-cell {
    grid-area: xp !important;
    padding: 4px !important;
    background: transparent !important;
  }
  body.lobby-page:not(.game-page) .poker-table-list td.table-xp-cell::before {
    display: none !important;
  }

  /* Blinds/Buy-In: volle Reihe mit zwei Kacheln. */
  body.lobby-page:not(.game-page) .poker-table-list td.table-blinds-cell {
    grid-area: blinds !important;
    padding: 0 !important;
    background: transparent !important;
  }
  body.lobby-page:not(.game-page) .poker-table-list td.table-blinds-cell::before {
    display: none !important;
  }

  body.lobby-page:not(.game-page) .blind-buyin-stack {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.lobby-page:not(.game-page) .blind-buyin-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    background: rgba(56, 226, 255, 0.06) !important;
  }

  body.lobby-page:not(.game-page) .blind-buyin-label {
    order: -1 !important;
    color: var(--m-cyan) !important;
    font-size: 0.72em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-shadow: 0 0 10px rgba(56, 226, 255, 0.6) !important;
  }

  body.lobby-page:not(.game-page) .blind-buyin-value {
    color: #ffe271 !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  body.lobby-page:not(.game-page) .buyin-row .blind-buyin-value {
    font-size: 0.92em !important;
  }

  /* Statistik-Kachel-Zuordnung. */
  body.lobby-page:not(.game-page) .poker-table-list td.table-bank-cell { grid-area: bank !important; }
  body.lobby-page:not(.game-page) .poker-table-list td.table-level-cell { grid-area: level !important; }
  body.lobby-page:not(.game-page) .poker-table-list td.table-seats-cell {
    grid-area: seats !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
  }

  /* Plätze-Label ohne Sortpfeil. */
  body.lobby-page:not(.game-page) .poker-table-list td.table-seats-cell::before {
    content: "Plätze" !important;
    flex: 1 1 100% !important;
  }

  body.lobby-page:not(.game-page) .table-seats-cell .seat-fill-dot {
    margin: 0 !important;
  }

  /* Join-Kachel: Button über volle Breite. */
  body.lobby-page:not(.game-page) .poker-table-list td.table-join-cell {
    grid-area: join !important;
    padding: 0 !important;
    background: transparent !important;
  }
  body.lobby-page:not(.game-page) .poker-table-list td.table-join-cell::before {
    display: none !important;
  }
  body.lobby-page:not(.game-page) .join-table-btn {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Voller Tisch: abgedunkelt, weiterhin zum Zuschauen betretbar. */
  body.lobby-page:not(.game-page) .poker-table-list tr.table-full {
    opacity: 0.72 !important;
    border-color: rgba(120, 140, 170, 0.4) !important;
    box-shadow: none !important;
  }

  body.lobby-page:not(.game-page) .table-filter-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    margin: 0 0 10px 0 !important;
  }
  body.lobby-page:not(.game-page) .table-filter-dropdown {
    width: 100% !important;
  }
  body.lobby-page:not(.game-page) #tableFilterDropdownBtn {
    width: 100% !important;
    min-height: 42px !important;
  }
  body.lobby-page:not(.game-page) .table-filter-reset-btn {
    min-height: 42px !important;
    white-space: nowrap !important;
  }

  /* Toolbar: Quick-Join + mobile Sortier-Leiste. */
  body.lobby-page:not(.game-page) .lobby-table-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 10px 0 !important;
  }
  body.lobby-page:not(.game-page) .quick-join-btn {
    flex: 1 1 100% !important;
    min-height: 46px !important;
  }
  body.lobby-page:not(.game-page) .mobile-sort-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body.lobby-page:not(.game-page) .mobile-sort-label {
    flex: 1 1 100% !important;
    color: var(--m-cyan) !important;
    font-weight: 900 !important;
    font-size: 0.82em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }
  body.lobby-page:not(.game-page) .mobile-sort-btn {
    flex: 1 1 0 !important;
    min-height: 42px !important;
  }
  body.lobby-page:not(.game-page) .active-filter-chip {
    margin: 0 0 10px 0 !important;
  }
}


/* Lobby, breitere Fold-/Landscape-Flächen: Statuszeile horizontaler. */
@media (min-width: 620px) and (max-width: 1180px) {
  body.lobby-page:not(.game-page) .lobby-header-left {
    width: min(660px, calc(100vw - 170px)) !important;
    max-width: calc(100vw - 170px) !important;
    margin-inline: auto !important;
  }
}

/* Sehr schmale Drawer-Spalten untereinander. */
@media (max-width: 560px) {
  body.lobby-page:not(.game-page) .mobile-lobby-drawer .lobby-tabs,
  body.lobby-page:not(.game-page) .mobile-lobby-drawer .lobby-header-right {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   3b. LOBBY-Detailregeln (Filter, Blinds, Rangliste, schmale Formate)
   Original-Breakpoints beibehalten (nicht in die 1100px-Shell falten).
   ========================================================= */
@media (max-width: 760px) {
  body.lobby-page:not(.game-page) .dropdown-list {
    min-width: 100% !important;
    left: 0 !important;
  }

  body.lobby-page:not(.game-page) .table-item {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

@media (max-width: 900px) {
  body.lobby-page:not(.game-page) .tournament-list,
  body.lobby-page:not(.game-page) .coming-soon,
  body.lobby-page:not(.game-page) .daily-reward-wrap {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 720px) {
  body.lobby-page:not(.game-page) .xp-indicator {
    justify-self: end !important;
  }

  body.lobby-page:not(.game-page) .xp-indicator::after {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    white-space: normal !important;
    width: max-content !important;
    max-width: min(240px, calc(100vw - 48px)) !important;
    text-align: center !important;
    animation: none !important;
  }

  body.lobby-page:not(.game-page) .table-filter-dropdown {
    max-width: 100% !important;
  }

  body.lobby-page:not(.game-page) .dropdown-list {
    position: static !important;
    margin-top: 8px !important;
    max-height: min(52vh, 320px) !important;
    overflow-y: auto !important;
  }

  /* Rangliste einspaltiger. */
  body.lobby-page:not(.game-page) .leaderboard-head {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  body.lobby-page:not(.game-page) .leaderboard-row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  body.lobby-page:not(.game-page) .leaderboard-value {
    grid-column: 2 !important;
  }
}

@media (max-width: 420px) {
  body.lobby-page:not(.game-page) .table-filter-row {
    grid-template-columns: 1fr !important;
  }
  body.lobby-page:not(.game-page) .table-filter-reset-btn {
    width: 100% !important;
  }

  body.lobby-page:not(.game-page) .lobby-content {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* Fold/schmal: Kacheln zweispaltig stapeln. */
  body.lobby-page:not(.game-page) .poker-table-list tr {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "name xp"
      "blinds blinds"
      "bank level"
      "seats seats"
      "join join" !important;
  }

  body.lobby-page:not(.game-page) .xp-indicator {
    justify-self: end !important;
  }

  body.lobby-page:not(.game-page) .xp-indicator::after {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    white-space: normal !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    text-align: center !important;
  }

  body.lobby-page:not(.game-page) .daily-reward-card,
  body.lobby-page:not(.game-page) .tournament-list,
  body.lobby-page:not(.game-page) .coming-soon {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Fold-Außenanzeige (sehr schmal): kompakter, Blinds untereinander. */
@media (max-width: 330px) {
  body.lobby-page:not(.game-page) .poker-table-list td {
    padding: 6px 4px !important;
    font-size: calc(var(--m-font) * 0.94) !important;
  }

  body.lobby-page:not(.game-page) .blind-buyin-stack {
    grid-template-columns: 1fr !important;
  }

  body.lobby-page:not(.game-page) .quick-join-btn {
    font-size: 0.92em !important;
  }
}


/* =========================================================
   4. GAME — scrollbare Tischfläche
   Der Tisch darf größer als der Screen sein und wird per Touch gepannt.
   Größen kommen aus Variablen, die je Orientierung angepasst werden.
   ========================================================= */
@media (max-width: 1100px) and (orientation: portrait),
       (max-width: 1180px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) {
  html.game-page,
  body.game-page {
    /* Deckende dunkle Basis füllt die Safe-Area (Notch/Querformat) statt weiß.
       Das eigentliche Hintergrundbild trägt die fixe .lobby-bg-overlay. */
    background: #0a1020 !important;
  }

  body.game-page {
    /* Tisch- und Layout-Maße (Portrait-Standardwerte). */
    --m-table-top: clamp(50px, 7.6vh, 86px);
    --m-table-bottom: clamp(218px, 30vh, 340px);
    --m-table-mb: calc(var(--m-table-bottom) + 118px);
    --m-table-w: clamp(640px, 158vw, 880px);
    --m-table-side-pad: max(22px, 7vw);
    --m-scroll-bottom-pad: clamp(330px, 44vh, 520px);
    --m-action-reserve: clamp(174px, 29vh, 250px);

    /* Kartengrößen am Tisch (unabhängig vom UI-Scale). */
    --table-card-w: clamp(37px, 5.7cqw, 76px);
    --table-card-h: calc(var(--table-card-w) * 1.43);
    --table-card-radius: clamp(6px, 0.65cqw, 10px);
    --board-card-font: clamp(12px, 1.32cqw, 19px);
    --seat-card-w: clamp(30px, 4.65cqw, 62px);
    --seat-btn-min-w: clamp(46px, 5.4cqw, 76px);
    --seat-btn-pad-y: clamp(4px, 0.34cqw, 7px);
    --seat-btn-pad-x: clamp(7px, 0.72cqw, 12px);
    --seat-btn-font: clamp(8px, 0.92cqw, 13px);

    /* Aktionsfeld. */
    --m-action-width: min(94vw, 690px);
    --m-action-button-h: calc(clamp(42px, 10vw, 58px) * var(--ui-control-scale, 1));
    --m-action-font: calc(clamp(0.86rem, 3.25vw, 1.08rem) * var(--ui-font-scale, 1));

    /* Eigene Karten am Tisch. */
    --m-own-hand-w: clamp(292px, 40cqw, 500px);
    --m-own-hand-bottom: -25.5%;

    width: 100% !important;
    height: var(--m-vh) !important;
    min-height: var(--m-vh) !important;
    overflow: hidden !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  body.game-page .lobby-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--m-vh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    background: rgba(10, 15, 32, 0.26) !important;
  }

  /* Der Header ist im Spiel ein einklappbares Menü-Panel (game-menu-open). */
  body.game-page .lobby-header {
    position: fixed !important;
    left: max(10px, var(--safe-left)) !important;
    right: max(10px, var(--safe-right)) !important;
    top: max(10px, var(--safe-top)) !important;
    z-index: 760 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "status"
      "actions"
      "tabs" !important;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(78vh, calc(var(--m-vh) - 24px)) !important;
    padding: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 20px !important;
    border: 1px solid var(--m-border) !important;
    background: var(--m-panel-bg-solid) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.48), 0 0 30px rgba(56, 226, 255, 0.24) !important;
    opacity: 0 !important;
    transform: translateY(-110%) scale(0.985) !important;
    pointer-events: none !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
  }

  body.game-page.game-menu-open .lobby-header {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body.game-page .lobby-header-left { grid-area: status !important; }
  body.game-page .lobby-header-center { grid-area: tabs !important; }
  body.game-page .lobby-header-right { grid-area: actions !important; }

  body.game-page .game-header-toggle {
    top: max(10px, var(--safe-top)) !important;
    right: max(10px, var(--safe-right)) !important;
  }

  /* Tabs und Aktionen im Menü als Raster. */
  body.game-page .lobby-header-center,
  body.game-page .lobby-header-right {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.game-page .lobby-tabs,
  body.game-page .lobby-header-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.game-page .lobby-tab,
  body.game-page .lobby-header-right .lobby-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: calc(2.25em + 2px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--m-control-pad-y) var(--m-control-pad-x) !important;
    border-radius: var(--m-radius) !important;
    font-size: var(--m-font) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.game-page .lobby-header-right .btn-label {
    display: inline !important;
  }

  /* Scroll-/Pan-Container für den großen Tisch. */
  body.game-page #gameTableContent {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--m-vh) !important;
    max-height: var(--m-vh) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 var(--m-table-side-pad) var(--m-scroll-bottom-pad) var(--m-table-side-pad) !important;
    overflow: auto !important;
    overflow-anchor: none !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    scroll-behavior: auto !important;
    background: rgba(8, 13, 28, 0.08) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 2 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(56, 226, 255, 0.38) transparent !important;
  }

  /* Tischbild-Wrapper (auch für alle data-ui-scale-Varianten). */
  body.game-page .table-bg-wrap,
  html[data-ui-scale="small"] body.game-page .table-bg-wrap,
  html[data-ui-scale="medium"] body.game-page .table-bg-wrap,
  html[data-ui-scale="large"] body.game-page .table-bg-wrap,
  html[data-ui-scale="gertrud"] body.game-page .table-bg-wrap,
  body.game-page[data-ui-scale="small"] .table-bg-wrap,
  body.game-page[data-ui-scale="medium"] .table-bg-wrap,
  body.game-page[data-ui-scale="large"] .table-bg-wrap,
  body.game-page[data-ui-scale="gertrud"] .table-bg-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: var(--m-table-w) !important;
    min-width: var(--m-table-w) !important;
    max-width: none !important;
    aspect-ratio: 1500 / 900 !important;
    transform: none !important;
    margin: var(--m-table-top) auto var(--m-table-mb) auto !important;
    padding: 0 !important;
    overflow: visible !important;
    overflow-anchor: none !important;
    container-type: inline-size !important;
    z-index: 10 !important;
  }

  body.game-page .table-bg-img,
  body.game-page .game-ui-foreground,
  body.game-page .seats-container,
  body.game-page .table-seat {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.game-page .table-bg-img {
    object-fit: contain !important;
    max-width: none !important;
    max-height: none !important;
  }

  /* HUD-Ebene liegt fest über dem gepannten Tisch. */
  body.game-page .game-hud-layer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--m-vh) !important;
    pointer-events: none !important;
    z-index: 40 !important;
  }

  /* Board-/Deck-Karten. */
  body.game-page .community-card,
  body.game-page .table-deck-display,
  body.game-page .card-back:not(.seat-hole-card) {
    width: var(--table-card-w) !important;
    height: var(--table-card-h) !important;
    border-radius: var(--table-card-radius) !important;
  }

  body.game-page .community-card {
    font-size: var(--board-card-font) !important;
  }

  body.game-page .table-seat .card-back,
  body.game-page .seat-hole-card {
    width: var(--seat-card-w) !important;
    height: calc(var(--seat-card-w) * 1.43) !important;
    border-radius: var(--table-card-radius) !important;
  }

  body.game-page .table-seat .seat-action-badge,
  body.game-page .seat-status,
  body.game-page .seat-role-badge,
  body.game-page .seat-player-name,
  body.game-page .seat-stack {
    min-width: var(--seat-btn-min-w) !important;
    padding: var(--seat-btn-pad-y) var(--seat-btn-pad-x) !important;
    font-size: var(--seat-btn-font) !important;
    line-height: 1.05 !important;
  }

  /* Zug-Timer (Kreis) am aktiven Spieler deutlich größer und lesbarer. */
  body.game-page .seat-turn-timer {
    width: clamp(34px, 4.6cqw, 56px) !important;
    height: clamp(34px, 4.6cqw, 56px) !important;
  }

  body.game-page .seat-turn-timer-value {
    font-size: calc(var(--seat-btn-font) * 1.2) !important;
  }

  body.game-page .table-pot-display {
    top: 33.2% !important;
    gap: clamp(3px, 0.34cqw, 6px) !important;
  }

  body.game-page .table-pot-display.is-showdown {
    top: 24.5% !important;
    width: min(44%, 44cqw) !important;
  }

  body.game-page .table-pot-total {
    width: clamp(390px, 38cqw, 520px) !important;
    min-width: 0 !important;
  }

  body.game-page .table-pot-chip-slot {
    width: 100% !important;
    height: clamp(36px, 3.6cqw, 50px) !important;
  }

  body.game-page .table-pot-chip-visual > .table-pot-chip-stack {
    flex-basis: clamp(30px, 2.85cqw, 40px) !important;
    width: clamp(30px, 2.85cqw, 40px) !important;
    height: clamp(36px, 3.6cqw, 50px) !important;
  }

  body.game-page .table-pot-chip-visual .seat-bet-chip-image {
    width: clamp(30px, 2.85cqw, 40px) !important;
    height: clamp(30px, 2.85cqw, 40px) !important;
  }

  body.game-page .table-pot-chip-visual > .seat-bet-chip-stack-plaque,
  body.game-page .table-pot-chip-visual .seat-bet-chip-image-plaque {
    width: clamp(40px, 3.75cqw, 53px) !important;
  }

  body.game-page .table-pot-chip-visual > .seat-bet-chip-stack-plaque {
    flex-basis: clamp(40px, 3.75cqw, 53px) !important;
  }

  body.game-page .table-pot-meta {
    max-width: clamp(158px, 17cqw, 226px) !important;
    overflow: hidden !important;
    font-size: clamp(7px, 0.52cqw, 8px) !important;
  }

  body.game-page .showdown-winning-card-groups {
    top: 65% !important;
    width: 78% !important;
    gap: clamp(7px, 0.8cqw, 13px) !important;
    flex-wrap: wrap !important;
  }

  body.game-page .seat-bet-compact-visual {
    width: max-content !important;
    max-width: none !important;
    height: clamp(28px, 2.8cqw, 40px) !important;
  }

  body.game-page .seat-bet-compact-visual > .seat-bet-compact-stack {
    flex-basis: clamp(23px, 2.2cqw, 33px) !important;
    width: clamp(23px, 2.2cqw, 33px) !important;
    height: clamp(28px, 2.8cqw, 40px) !important;
  }

  body.game-page .seat-bet-compact-visual .seat-bet-chip-image {
    width: clamp(23px, 2.2cqw, 33px) !important;
    height: clamp(23px, 2.2cqw, 33px) !important;
  }

  body.game-page .seat-bet-compact-visual > .seat-bet-chip-stack-plaque,
  body.game-page .seat-bet-compact-visual .seat-bet-chip-image-plaque {
    width: clamp(33px, 3cqw, 45px) !important;
  }

  body.game-page .seat-bet-compact-visual > .seat-bet-chip-stack-plaque {
    flex-basis: clamp(33px, 3cqw, 45px) !important;
  }

  body.game-page .showdown-center-card {
    width: calc(var(--seat-card-w) * 1.5) !important;
    height: calc(var(--seat-card-w) * 2.145) !important;
  }

  body.game-page .showdown-winning-card-group {
    grid-template-columns: auto minmax(clamp(126px, 13cqw, 174px), 1fr) !important;
    gap: clamp(6px, 0.65cqw, 10px) !important;
  }

  body.game-page .showdown-winning-card-info {
    width: clamp(126px, 13cqw, 174px) !important;
    min-height: clamp(68px, 7cqw, 96px) !important;
  }

  body.game-page .showdown-winning-player-name {
    font-size: clamp(11px, 1cqw, 16px) !important;
  }

  body.game-page .showdown-winning-hand-name {
    font-size: clamp(8px, 0.68cqw, 11px) !important;
  }

  body.game-page .showdown-winning-payout {
    font-size: clamp(10px, 0.82cqw, 13px) !important;
  }

  body.game-page .table-pot-pill {
    min-width: clamp(88px, 9.2cqw, 142px) !important;
    padding: clamp(4px, 0.36cqw, 7px) clamp(8px, 0.66cqw, 12px) !important;
  }

  body.game-page .table-pot-pill span {
    font-size: clamp(7px, 0.56cqw, 10px) !important;
  }

  body.game-page .table-pot-pill strong {
    font-size: clamp(10px, 0.8cqw, 14px) !important;
  }
}


/* =========================================================
   5. GAME — HUD: eigene Karten, Chat, Kartenstärken
   Eigene Karten + aktuelles Blatt hängen am Tisch (mobile-own-hand-on-table)
   und bewegen sich mit dem gepannten Tisch mit.
   ========================================================= */
@media (max-width: 1100px) and (orientation: portrait),
       (max-width: 1180px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) {
  body.game-page.mobile-own-hand-on-table .table-bg-wrap > .own-hand-panel {
    position: absolute !important;
    left: 50% !important;
    bottom: var(--m-own-hand-bottom) !important;
    transform: translateX(-50%) !important;
    width: var(--m-own-hand-w) !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 125 !important;
  }

  body.game-page .own-hand-title {
    display: none !important;
  }

  body.game-page.mobile-own-hand-on-table .own-card-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(10px, 1.4cqw, 18px) !important;
    margin: 0 0 clamp(9px, 1cqw, 14px) !important;
  }

  body.game-page.mobile-own-hand-on-table .own-card-slot {
    width: clamp(64px, 8.4cqw, 108px) !important;
    height: calc(clamp(64px, 8.4cqw, 108px) * 1.42) !important;
    border-radius: clamp(8px, 0.75cqw, 12px) !important;
    font-size: clamp(1.2rem, 3.3cqw, 2rem) !important;
  }

  body.game-page.mobile-own-hand-on-table .current-hand-wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    pointer-events: none !important;
  }

  body.game-page.mobile-own-hand-on-table .current-hand-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(8px, 1cqw, 14px) !important;
    width: 100% !important;
    min-height: clamp(60px, 7.5cqw, 90px) !important;
    padding: clamp(10px, 1.2cqw, 16px) clamp(14px, 1.8cqw, 22px) !important;
    border-radius: clamp(16px, 1.8cqw, 24px) !important;
    border: clamp(2px, 0.28cqw, 4px) solid rgba(255, 226, 113, 0.92) !important;
    background: linear-gradient(180deg, rgba(12, 21, 39, 0.94), rgba(10, 18, 33, 0.88)) !important;
    box-shadow: 0 0 22px rgba(255, 226, 113, 0.2), 0 0 26px rgba(56, 226, 255, 0.16) inset !important;
    pointer-events: auto !important;
  }

  body.game-page.mobile-own-hand-on-table .current-hand-label {
    display: block !important;
    margin: 0 0 2px 0 !important;
    color: var(--m-yellow) !important;
    font-size: clamp(0.92rem, 2.15cqw, 1.42rem) !important;
    line-height: 1.05 !important;
  }

  body.game-page.mobile-own-hand-on-table .current-hand-box strong {
    display: block !important;
    color: #fff !important;
    font-size: clamp(1.16rem, 2.85cqw, 2rem) !important;
    line-height: 1.1 !important;
  }

  body.game-page.mobile-own-hand-on-table .current-hand-help {
    display: grid !important;
    place-items: center !important;
    width: clamp(38px, 5.1cqw, 66px) !important;
    height: clamp(38px, 5.1cqw, 66px) !important;
    border-radius: 50% !important;
    font-size: clamp(1.05rem, 2.45cqw, 1.7rem) !important;
  }

  /* Chat-Bubble — sichtbar über dem Aktionsbereich, ohne Kollision. */
  body.game-page .chat-toggle-btn {
    position: fixed !important;
    left: max(16px, var(--safe-left)) !important;
    bottom: calc(max(18px, var(--safe-bottom)) + 86px) !important;
    width: calc(clamp(48px, 11.5vw, 58px) * min(var(--ui-control-scale, 1), 1.12)) !important;
    height: calc(clamp(48px, 11.5vw, 58px) * min(var(--ui-control-scale, 1), 1.12)) !important;
    z-index: 310 !important;
  }

  body.game-page.poker-can-act .chat-toggle-btn,
  body.game-page.poker-can-queue .chat-toggle-btn,
  body.game-page.player-seated.round-running.player-turn .chat-toggle-btn,
  body.game-page .game-hud-layer.poker-can-act .chat-toggle-btn,
  body.game-page .game-hud-layer.poker-can-queue .chat-toggle-btn {
    bottom: calc(max(18px, var(--safe-bottom)) + var(--m-action-reserve)) !important;
  }

  /* Chat- und Kartenstärken-Panel als Vollflächen-Overlay. */
  body.game-page .table-chat-panel,
  body.game-page .hand-strength-panel {
    position: fixed !important;
    left: max(12px, var(--safe-left)) !important;
    right: max(12px, var(--safe-right)) !important;
    top: calc(max(10px, var(--safe-top)) + 52px) !important;
    bottom: max(18px, var(--safe-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - max(10px, var(--safe-top)) - max(18px, var(--safe-bottom)) - 64px) !important;
    overflow-y: auto !important;
    z-index: 650 !important;
  }

  /* Schließen-Button im Kartenstärken-Fenster: oben rechts, Touch-tauglich. */
  body.game-page .hand-strength-panel {
    padding-top: calc(18px * var(--ui-control-scale, 1)) !important;
  }

  body.game-page .hand-strength-head {
    position: static !important;
    padding-right: calc(58px * var(--ui-control-scale, 1)) !important;
  }

  body.game-page .hand-strength-close {
    position: absolute !important;
    top: calc(12px * var(--ui-control-scale, 1)) !important;
    right: calc(12px * var(--ui-control-scale, 1)) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 40 !important;
    width: calc(clamp(36px, 9vw, 44px) * min(var(--ui-control-scale, 1), 1.16)) !important;
    height: calc(clamp(36px, 9vw, 44px) * min(var(--ui-control-scale, 1), 1.16)) !important;
    min-width: calc(clamp(36px, 9vw, 44px) * min(var(--ui-control-scale, 1), 1.16)) !important;
    min-height: calc(clamp(36px, 9vw, 44px) * min(var(--ui-control-scale, 1), 1.16)) !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(56, 226, 255, 0.62) !important;
    background:
      radial-gradient(circle at 35% 25%, rgba(56, 226, 255, 0.28), transparent 44%),
      linear-gradient(180deg, rgba(20, 35, 62, 0.98), rgba(8, 16, 31, 0.96)) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(56, 226, 255, 0.28), inset 0 0 18px rgba(56, 226, 255, 0.14) !important;
    font-size: calc(clamp(1.15rem, 4vw, 1.45rem) * var(--ui-font-scale, 1)) !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  body.game-page .hand-strength-close:hover,
  body.game-page .hand-strength-close:focus-visible {
    outline: none !important;
    border-color: rgba(255, 226, 113, 0.82) !important;
    color: var(--m-yellow) !important;
    box-shadow: 0 0 20px rgba(255, 226, 113, 0.3), 0 0 22px rgba(56, 226, 255, 0.25), inset 0 0 18px rgba(56, 226, 255, 0.16) !important;
  }
}


/* =========================================================
   6. GAME — Aktionsfeld & Raise-Stepper
   Fest unten, nur sichtbar wenn Spieler handeln/vormerken kann.
   Gleich große Buttons, integrierter Betrag-Stepper (− / Betrag / +).
   ========================================================= */
@media (max-width: 1100px) and (orientation: portrait),
       (max-width: 1180px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) {
  body.game-page .action-panel,
  body.game-page .game-hud-layer .action-panel {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, var(--safe-bottom)) !important;
    width: var(--m-action-width) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: none !important;
    padding: calc(11px * var(--ui-control-scale, 1)) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(56, 226, 255, 0.48) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 226, 113, 0.1), transparent 30%),
      linear-gradient(180deg, rgba(7, 19, 36, 0.97), rgba(8, 15, 30, 0.95)) !important;
    box-shadow: 0 -8px 34px rgba(0, 0, 0, 0.44), 0 0 28px rgba(56, 226, 255, 0.2), 0 0 24px rgba(56, 226, 255, 0.14) inset !important;
    overflow: visible !important;
    display: none !important;
    opacity: 0 !important;
    transform: translate(-50%, 18px) !important;
    pointer-events: none !important;
    z-index: 260 !important;
  }

  /* Sichtbar, sobald der Spieler handeln oder vormerken kann. */
  body.game-page.poker-can-act .action-panel,
  body.game-page.poker-can-queue .action-panel,
  body.game-page.player-seated.round-running.player-turn .action-panel,
  body.game-page .game-hud-layer.poker-can-act .action-panel,
  body.game-page .game-hud-layer.poker-can-queue .action-panel,
  body.game-page .game-hud-layer.player-seated.round-running.player-turn .action-panel,
  body.game-page .action-panel.poker-can-act,
  body.game-page .action-panel.poker-can-queue {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
  }

  body.game-page .action-panel .game-panel-title {
    display: none !important;
  }

  /* Status-/Hinweiszeile. */
  body.game-page .action-status,
  body.game-page .queued-actions-hint {
    display: block !important;
    margin: calc(7px * var(--ui-control-scale, 1)) 0 0 !important;
    padding: 0 calc(4px * var(--ui-control-scale, 1)) !important;
    color: rgba(233, 250, 255, 0.92) !important;
    font-size: calc(clamp(0.76rem, 2.8vw, 0.94rem) * var(--ui-font-scale, 1)) !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  body.game-page.poker-can-act .queued-actions-hint {
    display: none !important;
  }

  /* Aktionsreihen: drei gleich breite Spalten. */
  body.game-page .action-main-row,
  body.game-page .action-grid,
  body.game-page .action-raise-row,
  body.game-page .raise-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: calc(8px * var(--ui-control-scale, 1)) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.game-page .action-raise-row,
  body.game-page .raise-row {
    margin-top: calc(8px * var(--ui-control-scale, 1)) !important;
    align-items: stretch !important;
  }

  body.game-page .action-choice,
  body.game-page .action-choice-all-in,
  body.game-page .action-choice-raise {
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
  }

  /* Alle Aktionsbuttons gleich groß (Pill-Design). */
  body.game-page .action-panel .poker-action-btn,
  body.game-page .action-panel .poker-action-btn.all-in,
  body.game-page .action-panel .poker-action-btn.small,
  body.game-page .action-panel .raise-action {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--m-action-button-h) !important;
    min-height: var(--m-action-button-h) !important;
    max-height: var(--m-action-button-h) !important;
    padding: 0 calc(10px * var(--ui-control-scale, 1)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: var(--m-action-font) !important;
    font-weight: 1000 !important;
    line-height: 1.08 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border: 1px solid rgba(56, 226, 255, 0.45) !important;
    background: linear-gradient(90deg, rgba(23, 34, 58, 0.92), rgba(16, 193, 219, 0.82)) !important;
    color: #f8fbff !important;
    box-shadow: 0 0 14px rgba(56, 226, 255, 0.22), inset 0 0 18px rgba(56, 226, 255, 0.12) !important;
  }

  body.game-page .action-panel .poker-action-btn.danger {
    border-color: rgba(255, 82, 128, 0.58) !important;
    background: linear-gradient(90deg, rgba(40, 24, 43, 0.94), rgba(235, 55, 96, 0.86)) !important;
  }

  body.game-page .action-panel .poker-action-btn.all-in {
    border-color: rgba(255, 226, 113, 0.72) !important;
    background: linear-gradient(90deg, rgba(255, 226, 113, 0.86), rgba(24, 236, 200, 0.94)) !important;
    color: #092436 !important;
  }

  body.game-page .action-panel .poker-action-btn:disabled {
    opacity: 0.48 !important;
    filter: saturate(0.7) brightness(0.82) !important;
  }

  /* Queue-Modus: Vormerken über Aufleuchten statt Checkbox. Alle
     Aktionsbuttons abgedunkelt; der vorgemerkte Button leuchtet auf. */
  body.game-page .queued-action-checkbox,
  body.game-page.poker-can-queue .action-panel .queued-action-checkbox,
  body.game-page .game-hud-layer.poker-can-queue .action-panel .queued-action-checkbox {
    display: none !important;
  }

  body.game-page.poker-can-queue .action-panel .poker-action-btn {
    filter: saturate(0.72) brightness(0.6) !important;
    opacity: 0.9 !important;
    transition: filter 140ms ease, box-shadow 140ms ease, opacity 140ms ease !important;
  }

  body.game-page.poker-can-queue .action-choice.is-queued .poker-action-btn {
    filter: none !important;
    opacity: 1 !important;
    border-color: rgba(255, 226, 113, 0.95) !important;
    box-shadow: 0 0 18px rgba(255, 226, 113, 0.6), 0 0 26px rgba(56, 226, 255, 0.4), inset 0 0 20px rgba(255, 226, 113, 0.25) !important;
  }

  /* Betrag-Stepper: − | Betrag | + als eine Pille. */
  body.game-page .raise-amount-control {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: stretch !important;
    height: var(--m-action-button-h) !important;
    min-height: var(--m-action-button-h) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(56, 226, 255, 0.52) !important;
    background: rgba(8, 14, 29, 0.94) !important;
    box-shadow: inset 0 0 18px rgba(56, 226, 255, 0.12), 0 0 12px rgba(56, 226, 255, 0.1) !important;
    overflow: hidden !important;
  }

  body.game-page .raise-amount-control .raise-step-btn {
    flex: 0 0 calc(var(--m-action-button-h) * 1.05) !important;
    width: calc(var(--m-action-button-h) * 1.05) !important;
    min-width: calc(var(--m-action-button-h) * 1.05) !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--m-cyan) !important;
    font-size: calc(var(--m-action-font) * 1.05) !important;
    font-weight: 1000 !important;
  }

  body.game-page .raise-amount-control .raise-step-btn[data-raise-step="down"] {
    border-right: 1px solid rgba(56, 226, 255, 0.26) !important;
  }

  body.game-page .raise-amount-control .raise-step-btn[data-raise-step="up"] {
    border-left: 1px solid rgba(56, 226, 255, 0.26) !important;
  }

  body.game-page .raise-step-btn:disabled {
    opacity: 0.38 !important;
  }

  body.game-page #raiseAmount.raise-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    text-align: center !important;
    text-align-last: center !important;
    font-size: calc(var(--m-action-font) * 1.02) !important;
    font-weight: 1000 !important;
    line-height: var(--m-action-button-h) !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
  }

  body.game-page #raiseAmount.raise-input::-webkit-outer-spin-button,
  body.game-page #raiseAmount.raise-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
}


/* =========================================================
   7. MODALS (Einstellungen / Profil / Freunde)
   ========================================================= */
@media (max-width: 1100px) and (orientation: portrait),
       (max-width: 1180px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) {
  body.game-page .settings-modal,
  body.game-page .profile-modal,
  body.game-page .friends-center-modal,
  .settings-modal {
    width: min(96vw, 720px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(var(--m-vh) - max(24px, var(--safe-top)) - max(24px, var(--safe-bottom))) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .settings-scale-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}


/* =========================================================
   8. BUY-IN
   Als klarer Mobile-Sheet mit dem Betrag im Zentrum.
   ========================================================= */
@media (max-width: 1100px),
       (max-width: 1180px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) {
  .buyin-modal-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left)) !important;
    background: rgba(2, 6, 14, 0.7) !important;
    backdrop-filter: blur(7px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .buyin-modal-box {
    width: min(560px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(var(--m-vh, 100vh) - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: calc(18px * var(--ui-control-scale, 1)) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(56, 226, 255, 0.62) !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(255, 226, 113, 0.1), transparent 32%),
      linear-gradient(180deg, rgba(8, 18, 36, 0.99), rgba(7, 13, 27, 0.98)) !important;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.56), 0 0 34px rgba(56, 226, 255, 0.22), inset 0 0 22px rgba(56, 226, 255, 0.1) !important;
  }

  .levelup-modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: max(12px, var(--safe-top)) 12px max(12px, var(--safe-bottom)) !important;
  }

  .levelup-dialog {
    width: min(360px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    margin: auto !important;
    padding: calc(28px * var(--ui-control-scale, 1)) 20px 20px !important;
    border-radius: 22px !important;
  }

  .levelup-badge {
    width: 78px !important;
    height: 78px !important;
    margin: -54px auto 8px !important;
  }

  .levelup-badge-level { font-size: calc(1.8rem * var(--ui-font-scale, 1)) !important; }
  .levelup-title { font-size: calc(1.18rem * var(--ui-font-scale, 1)) !important; }
  .levelup-reward-item { flex-basis: 118px !important; padding: 10px 8px !important; }
  .levelup-close-btn { padding: 12px 30px !important; }


  .buyin-modal-box h3 {
    margin: 0 0 12px !important;
    color: var(--m-cyan) !important;
    font-size: calc(clamp(1.12rem, 4.8vw, 1.5rem) * var(--ui-font-scale, 1)) !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .buyin-info-grid {
    display: grid !important;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) !important;
    gap: 8px 12px !important;
    padding: 12px !important;
    margin: 0 0 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(56, 226, 255, 0.28) !important;
    background: rgba(13, 25, 48, 0.76) !important;
    font-size: calc(clamp(0.78rem, 3.1vw, 0.98rem) * var(--ui-font-scale, 1)) !important;
  }

  .buyin-info-grid span {
    color: rgba(215, 229, 255, 0.8) !important;
    font-weight: 800 !important;
  }

  .buyin-info-grid strong {
    min-width: 0 !important;
    color: #fff !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  .buyin-label {
    display: block !important;
    margin: 4px 0 8px !important;
    color: var(--m-yellow) !important;
    text-align: center !important;
    font-size: calc(clamp(0.9rem, 3.4vw, 1.08rem) * var(--ui-font-scale, 1)) !important;
    font-weight: 900 !important;
  }

  .buyin-input {
    width: 100% !important;
    min-height: calc(clamp(56px, 13vw, 74px) * var(--ui-control-scale, 1)) !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 226, 113, 0.72) !important;
    background: rgba(6, 12, 26, 0.94) !important;
    color: #fff !important;
    font-size: calc(clamp(1.45rem, 7vw, 2.1rem) * var(--ui-font-scale, 1)) !important;
    font-weight: 1000 !important;
    text-align: center !important;
    box-shadow: 0 0 18px rgba(255, 226, 113, 0.18), inset 0 0 18px rgba(56, 226, 255, 0.1) !important;
  }

  .buyin-slider {
    width: 100% !important;
    height: 36px !important;
    margin: 12px 0 10px !important;
    accent-color: var(--m-cyan) !important;
  }

  .buyin-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .buyin-chip-btn,
  .buyin-confirm-btn,
  .buyin-close-btn {
    min-height: calc(clamp(44px, 10vw, 56px) * var(--ui-control-scale, 1)) !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    font-size: calc(clamp(0.86rem, 3.2vw, 1.02rem) * var(--ui-font-scale, 1)) !important;
    font-weight: 1000 !important;
    line-height: 1.08 !important;
  }

  .buyin-chip-btn {
    border: 1px solid rgba(56, 226, 255, 0.46) !important;
    background: rgba(12, 24, 45, 0.92) !important;
    color: #eafcff !important;
  }

  .buyin-error {
    min-height: 1.25em !important;
    margin: 8px 0 10px !important;
    font-size: calc(clamp(0.74rem, 2.75vw, 0.92rem) * var(--ui-font-scale, 1)) !important;
  }

  .buyin-actions {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }

  .buyin-confirm-btn {
    background: linear-gradient(90deg, rgba(255, 226, 113, 0.9), rgba(24, 236, 200, 0.94)) !important;
    color: #092436 !important;
  }

  .buyin-close-btn {
    background: rgba(50, 50, 58, 0.92) !important;
    color: #fff !important;
  }
}


/* =========================================================
   9. ORIENTIERUNG / GRÖSSEN-FEINSCHLIFF
   Nur die Werte, die sich je Format/Breite unterscheiden.
   ========================================================= */

/* -- Kleine Handys, Hochkant -------------------------------------------- */
@media (max-width: 480px) and (orientation: portrait) {
  body.game-page {
    --m-table-top: clamp(48px, 7vh, 78px);
    --m-table-bottom: clamp(280px, 36vh, 430px);
    --m-table-mb: calc(var(--m-table-bottom) + 118px);
    --m-table-w: clamp(620px, 160vw, 835px);
    --m-table-side-pad: max(24px, 8vw);
    --m-scroll-bottom-pad: clamp(390px, 50vh, 620px);
    --m-action-reserve: clamp(218px, 32vh, 310px);
    --m-action-width: calc(100vw - 18px);
    --m-action-button-h: calc(clamp(43px, 10.6vw, 56px) * var(--ui-control-scale, 1));
    --m-own-hand-w: clamp(304px, 47cqw, 520px);
    --m-own-hand-bottom: -30%;
    --table-card-w: clamp(36px, 5.9cqw, 72px);
    --seat-card-w: clamp(29px, 4.75cqw, 60px);
  }

  /* Auf sehr schmalen Screens Betrag-Stepper als eigene Zeile. */
  body.game-page .action-raise-row,
  body.game-page .raise-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.game-page .action-choice-all-in {
    grid-column: 1 / 2 !important;
  }

  body.game-page .action-choice-raise {
    grid-column: 2 / 3 !important;
  }

  body.game-page .raise-amount-control {
    grid-column: 1 / -1 !important;
    margin-top: calc(2px * var(--ui-control-scale, 1)) !important;
  }

  body.game-page .mobile-menu-fab-label {
    display: none !important;
  }
}

/* -- Querformat (Landscape) --------------------------------------------- */
@media (max-width: 1180px) and (orientation: landscape) {
  html.game-page,
  body.game-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  body.game-page {
    --m-table-top: clamp(34px, 7vh, 58px);
    --m-table-bottom: clamp(96px, 18vh, 150px);
    --m-table-mb: max(calc(var(--m-table-bottom) + 190px), 280px);
    --m-table-w: clamp(910px, 108vw, 1200px);
    --m-table-side-pad: max(32px, 7vw);
    --m-scroll-bottom-pad: clamp(190px, 30vh, 300px);
    --m-action-reserve: clamp(88px, 20vh, 128px);
    --m-action-width: min(620px, calc(100vw - 170px));
    --m-action-button-h: calc(clamp(30px, 7.4vh, 39px) * var(--ui-control-scale, 1));
    --m-action-font: calc(clamp(0.66rem, 2.45vh, 0.84rem) * var(--ui-font-scale, 1));
    --table-card-w: clamp(42px, 5.4cqw, 78px);
    --board-card-font: clamp(14px, 1.32cqw, 21px);
    --seat-card-w: clamp(34px, 4.55cqw, 68px);
    --m-own-hand-w: clamp(288px, 32cqw, 460px);
    --m-own-hand-bottom: -24.5%;
  }

  body.game-page .lobby-overlay {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.game-page #gameTableContent {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: max(var(--m-scroll-bottom-pad), 340px, calc(var(--safe-bottom, 0px) + 300px)) !important;
    scroll-padding-bottom: max(260px, calc(var(--safe-bottom, 0px) + 220px)) !important;
  }

  body.game-page .game-hud-layer {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* Menü-Header quer: Status/Aktionen/Tabs kompakter und scrollbar. */
  body.game-page .lobby-header {
    top: max(8px, var(--safe-top)) !important;
    max-height: calc(100dvh - max(8px, var(--safe-top)) - max(10px, var(--safe-bottom)) - 12px) !important;
    padding-right: calc(120px * var(--ui-control-scale, 1)) !important;
    padding-bottom: calc(14px + var(--safe-bottom, 0px)) !important;
    overscroll-behavior: contain !important;
  }

  body.game-page .lobby-tabs,
  body.game-page .lobby-header-right {
    grid-template-columns: 1fr !important;
  }

  /* Menü-Schließen-Button quer immer oben rechts. */
  body.game-page.game-menu-open .game-header-toggle {
    position: fixed !important;
    top: max(8px, var(--safe-top)) !important;
    right: max(10px, var(--safe-right)) !important;
    bottom: auto !important;
    z-index: 900 !important;
    transform: none !important;
  }

  /* Aktionsfeld quer rechts andocken statt zentriert. */
  body.game-page .action-panel,
  body.game-page .game-hud-layer .action-panel {
    left: auto !important;
    right: max(10px, var(--safe-right)) !important;
    bottom: max(8px, var(--safe-bottom)) !important;
    width: var(--m-action-width) !important;
    max-width: calc(100vw - 132px) !important;
    padding: calc(8px * var(--ui-control-scale, 1)) !important;
    border-radius: 16px !important;
    transform: translateY(14px) !important;
  }

  body.game-page.poker-can-act .action-panel,
  body.game-page.poker-can-queue .action-panel,
  body.game-page.player-seated.round-running.player-turn .action-panel,
  body.game-page .game-hud-layer.poker-can-act .action-panel,
  body.game-page .game-hud-layer.poker-can-queue .action-panel,
  body.game-page .game-hud-layer.player-seated.round-running.player-turn .action-panel,
  body.game-page .action-panel.poker-can-act,
  body.game-page .action-panel.poker-can-queue {
    transform: none !important;
  }

  body.game-page .action-status,
  body.game-page .queued-actions-hint {
    font-size: calc(clamp(0.58rem, 2.1vh, 0.74rem) * var(--ui-font-scale, 1)) !important;
    line-height: 1.08 !important;
    margin-top: 4px !important;
  }

  /* Chat-Bubble quer wieder links unten, ohne Abschneiden. */
  body.game-page .chat-toggle-btn {
    left: max(18px, var(--safe-left)) !important;
    bottom: max(28px, calc(var(--safe-bottom, 0px) + 26px)) !important;
  }

  body.game-page.poker-can-act .chat-toggle-btn,
  body.game-page.poker-can-queue .chat-toggle-btn,
  body.game-page.player-seated.round-running.player-turn .chat-toggle-btn,
  body.game-page .game-hud-layer.poker-can-act .chat-toggle-btn,
  body.game-page .game-hud-layer.poker-can-queue .chat-toggle-btn {
    bottom: max(28px, calc(var(--safe-bottom, 0px) + 26px)) !important;
  }

  /* Chat-/Kartenstärken-Panel an dynamische Höhe anpassen. */
  body.game-page .table-chat-panel,
  body.game-page .hand-strength-panel {
    top: calc(max(8px, var(--safe-top)) + 46px) !important;
    bottom: max(12px, var(--safe-bottom)) !important;
    max-height: calc(100dvh - max(8px, var(--safe-top)) - max(12px, var(--safe-bottom)) - 58px) !important;
  }

  /* Buy-In quer breiter und kompakter. */
  .buyin-modal-box {
    width: min(840px, calc(100vw - 24px)) !important;
    padding: 12px 14px !important;
  }

  .buyin-modal-box h3 {
    margin-bottom: 8px !important;
  }

  .buyin-info-grid {
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr) minmax(86px, auto) minmax(0, 1fr) !important;
    margin-bottom: 8px !important;
  }

  .buyin-input {
    min-height: calc(clamp(44px, 9vh, 58px) * var(--ui-control-scale, 1)) !important;
    font-size: calc(clamp(1.1rem, 5vh, 1.55rem) * var(--ui-font-scale, 1)) !important;
  }

  .buyin-slider {
    margin: 6px 0 !important;
  }

  .buyin-chip-btn,
  .buyin-confirm-btn,
  .buyin-close-btn {
    min-height: calc(clamp(36px, 8vh, 46px) * var(--ui-control-scale, 1)) !important;
  }
}

/* =========================================================
   Mobile-Kartengrößen (<=1100px) — aus game.css verschoben.
   Board-/Deck-Kartenmaße, die mobile.css sonst nicht setzt.
   ========================================================= */
@media (max-width: 1100px) {
  :root {
    --board-card-w: clamp(36px, 5.95cqw, 78px);
    --board-card-h: clamp(56px, 9.28cqw, 121px);
    --seat-card-w: clamp(29px, 5.00cqw, 60px);
    --seat-card-h: clamp(40px, 6.98cqw, 84px);
    --deck-card-w: clamp(42px, 5.80cqw, 74px);
    --deck-card-h: clamp(59px, 8.10cqw, 104px);
    --deck-card-top: 69%;
  }
}

/* =========================================================
   10. SHOWDOWN (mobil)
   Aus game.css hierher verschoben: game.css ist reine Desktop-CSS,
   mobile.css ist die einzige Quelle für die Mobile-/Touch-Darstellung.
   ========================================================= */
@media (max-width: 1100px) and (orientation: portrait),
       (max-width: 1180px) and (orientation: landscape) {
  .showdown-board-callout {
    position: fixed !important;
    left: 50% !important;
    top: auto !important;
    bottom: calc(var(--mobile-bottom-pad) + 216px) !important;
    width: min(82vw, 430px) !important;
    max-width: none !important;
    padding: 7px 10px !important;
    z-index: 143 !important;
  }

  .showdown-board-callout span {
    font-size: clamp(0.62rem, 1.85vw, 0.82rem) !important;
  }

  .showdown-board-callout strong {
    font-size: clamp(0.88rem, 2.55vw, 1.12rem) !important;
  }

  .showdown-summary-panel {
    position: fixed !important;
    top: auto !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mobile-bottom-pad) + 82px) !important;
    width: auto !important;
    max-width: none !important;
    transform: translateY(10px) scale(0.98) !important;
    padding: 10px 12px !important;
    z-index: 142 !important;
  }

  .showdown-title {
    font-size: clamp(0.95rem, 3.0vw, 1.2rem) !important;
  }

  .showdown-winners {
    font-size: clamp(0.8rem, 2.45vw, 1rem) !important;
  }

  .showdown-winner-grid {
    gap: 6px !important;
    margin-bottom: 7px !important;
  }

  .showdown-winner-card {
    padding: 7px 8px !important;
  }

  .showdown-winner-name {
    font-size: clamp(0.92rem, 2.85vw, 1.13rem) !important;
  }

  .showdown-winner-hand,
  .showdown-payout-pill,
  .showdown-pot-pill {
    font-size: clamp(0.68rem, 2.05vw, 0.86rem) !important;
  }

  .showdown-pot-row {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    padding: 5px 7px !important;
    text-align: center !important;
  }

  .showdown-pot-row strong,
  .showdown-pot-row span,
  .showdown-countdown {
    font-size: clamp(0.72rem, 2.1vw, 0.95rem) !important;
  }

  body.poker-can-act .showdown-summary-panel {
    bottom: calc(var(--mobile-bottom-pad) + 118px) !important;
  }
}

@media (max-width: 1100px),
       (max-width: 1180px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) {
  /* HUD als schlanke Leiste oben; das Aktionsfenster sitzt unten -> keine Überlappung. */
  .tournament-hud {
    top: max(8px, var(--safe-top, 0px)) !important;
    bottom: auto !important;
    left: max(8px, var(--safe-left, 0px)) !important;
    right: calc(max(8px, var(--safe-right, 0px)) + 54px) !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1px 10px !important;
    padding: 6px 10px !important;
    opacity: 0.97 !important;
  }

  .tournament-hud .thud-title {
    width: 100% !important;
    margin: 0 0 1px !important;
    font-size: 0.82em !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tournament-hud .thud-row {
    gap: 5px !important;
    padding: 0 !important;
    font-size: 0.78em !important;
  }
}

@media (max-width: 1100px),
       (max-width: 1180px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) {
  /* Turnier-Reiter: Karten einspaltig stapeln, damit der Text die volle Breite
     nutzt und Wörter nicht umbrechen (schmale Handys). */
  body.lobby-page .tournament-card {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }

  body.lobby-page .tournament-card-info h3,
  body.lobby-page .tournament-card-info p {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  body.lobby-page .tournament-card .primary-btn {
    width: 100% !important;
    white-space: nowrap !important;
  }
}

/* === Ende der eigenständigen Mobile-Regeln. === */