/* 888 Dragon Lotto Player v3.10.61
   Header containment fix only.
   Restores the exact v3.10.58 premium header sizing and appearance.
   No logo, typography, wallet-card, or action-button dimensions are reduced.
   The header row is given enough vertical space so the existing premium brand
   card stays inside the header instead of overlapping the lobby content. */

@media (min-width: 1501px) {
  :root {
    --header-height: 120px !important;
  }

  .portal,
  .portal.sidebar-collapsed,
  .portal.guest-mode {
    grid-template-rows: var(--header-height) minmax(0, 1fr) !important;
  }

  .topbar {
    grid-row: 1 !important;
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  .sidebar,
  .content {
    height: auto !important;
    min-height: 0 !important;
  }

  .header-brand-home {
    flex-shrink: 0 !important;
  }

  .topbar-title {
    min-width: 96px !important;
  }

  .topbar-actions {
    min-width: 0 !important;
    margin-left: auto !important;
  }
}

/* On narrower desktop widths, keep the same premium controls at their original
   size and move the action group to a clean second row instead of shrinking or
   hiding the logo and text. */
@media (min-width: 1081px) and (max-width: 1500px) {
  :root {
    --header-height: 184px !important;
  }

  .portal,
  .portal.sidebar-collapsed,
  .portal.guest-mode {
    grid-template-rows: var(--header-height) minmax(0, 1fr) !important;
  }

  .topbar {
    grid-row: 1 !important;
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    align-content: center !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .sidebar,
  .content {
    height: auto !important;
    min-height: 0 !important;
  }

  .header-brand-home {
    flex: 0 0 auto !important;
  }

  .topbar-title {
    flex: 1 1 160px !important;
  }

  .topbar-actions {
    order: 3 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
  }
}