/* Keep the complete CloudLab navigation available on every secondary page. */
.hub-header {
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
}

.hub-header .hub-nav {
  display: flex !important;
  min-width: 0;
  white-space: nowrap;
}

.hub-header .hub-nav a {
  position: relative;
}

.hub-header .hub-nav a.active {
  color: var(--text);
  text-shadow: 0 0 14px rgba(104, 208, 223, .34);
}

.hub-header .hub-nav a.active::after {
  width: 18px;
  box-shadow: 0 0 12px rgba(104, 208, 223, .72);
}

/* Keep the complete flag and bomb visible without zooming or clipping them. */
.arcade-grid .card-media .upgraded-mine-preview .flag img {
  display: block;
  width: 52%;
  height: 52%;
  max-width: 52%;
  max-height: 52%;
  margin: auto;
  object-fit: contain;
  transform: none !important;
  transform-origin: center;
}

.arcade-grid .card-media .upgraded-mine-preview .mine img {
  display: block;
  width: 60%;
  height: 60%;
  max-width: 60%;
  max-height: 60%;
  margin: auto;
  object-fit: contain;
  transform: translateY(-12%) !important;
  transform-origin: center;
}

.arcade-grid .game-card:hover .card-media .upgraded-mine-preview .flag img {
  transform: none !important;
}

.arcade-grid .game-card:hover .card-media .upgraded-mine-preview .mine img {
  transform: translateY(-12%) !important;
}

@media (max-width: 900px) {
  .hub-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto;
    gap: 8px 12px;
  }

  .hub-header .hub-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .hub-header .header-action {
    grid-column: 2;
    grid-row: 1;
  }

  .hub-header .hub-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: center;
    gap: clamp(16px, 4vw, 28px);
    padding: 1px 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .hub-header .hub-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 620px) {
  .hub-header {
    width: calc(100% - 14px);
    padding: 9px 10px 8px;
    border-radius: 16px;
  }

  .hub-header .hub-brand small {
    display: block !important;
  }

  .hub-header .hub-nav {
    justify-content: flex-start;
    gap: 20px;
    padding-bottom: 2px;
  }

  .hub-header .hub-nav a {
    flex: 0 0 auto;
    padding: 7px 0;
    font-size: .82rem;
  }

  .hub-header .header-action {
    min-height: 40px;
    padding: 9px 11px;
    font-size: .76rem;
  }

  .arcade-grid .card-media .upgraded-mine-preview .flag img {
    width: 50%;
    height: 50%;
    max-width: 50%;
    max-height: 50%;
  }

  .arcade-grid .card-media .upgraded-mine-preview .mine img {
    width: 56%;
    height: 56%;
    max-width: 56%;
    max-height: 56%;
  }
}

@media (max-width: 420px) {
  .hub-header .hub-brand img {
    width: 36px;
    height: 36px;
  }

  .hub-header .hub-brand strong {
    font-size: .86rem;
  }

  .hub-header .hub-brand small {
    font-size: .65rem;
  }

  /* Fit all five links on 360px phones instead of cutting "Connect" at the edge.
     Extra specificity: some pages load site-quality.css after this file. */
  html body .hub-header .hub-nav {
    gap: 16px;
  }
}

/* A slimmer sticky header on phones leaves more of the page (and game boards) visible. */
@media (max-width: 620px) {
  .hub-header {
    row-gap: 2px !important;
    padding-top: 8px;
    padding-bottom: 5px;
  }
}

/* Phones in landscape: one header row (brand, links, account) instead of two,
   so the sticky header does not cover a quarter of a short screen. */
@media (min-width: 621px) and (max-width: 900px) and (max-height: 500px) {
  html body .hub-header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto;
    top: 6px;
    margin-top: 6px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  html body .hub-header .hub-nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    gap: 22px;
    padding: 0 4px;
  }

  html body .hub-header .header-action,
  html body .hub-header .community-header-actions {
    grid-column: 3;
    grid-row: 1;
  }
}