/* Mobile home: clear brand hierarchy, direct game choices, and an independent
   rocket illustration. The original hand-painted artwork and desktop layout stay intact. */
@media (max-width: 42rem) {
  body.single-hub-home .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto !important;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: #242628;
  }
  body.single-hub-home .site-header {
    order: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .75rem 1rem .4rem;
    position: relative;
    z-index: 5;
  }
  body.single-hub-home .site-header .brand {
    flex: 0 0 auto;
    gap: 0;
  }
  body.single-hub-home .site-header .brand > img {
    display: block;
    width: 2.45rem;
    height: 2.45rem;
  }
  body.single-hub-home .site-header .brand > span {
    display: none;
  }
  body.single-hub-home .site-header nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: .43rem;
    align-items: center;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    margin: 0 0 0 auto;
    padding: 0;
    font-size: .65rem;
    white-space: nowrap;
    letter-spacing: .015em;
  }
  body.single-hub-home .site-header nav > a:first-child,
  body.single-hub-home .site-header nav .nav-online {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    margin: 0;
    padding: .47rem .65rem;
    border-width: 2px;
    box-shadow: none;
    line-height: 1.05;
  }
  body.single-hub-home .hero-copy {
    order: 2;
    position: relative;
    z-index: 2;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(calc(100% - 2rem), 28rem);
    margin: .12rem auto 0;
    text-align: center;
  }
  body.single-hub-home .hero-copy h1 {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  body.single-hub-home .hero-wordmark {
    display: block;
    width: clamp(13rem, 71vw, 18.25rem);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  body.single-hub-home .hero-tagline {
    margin: .02rem 0 .76rem;
    font-size: clamp(1.33rem, 5.2vw, 1.72rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    text-shadow: none;
  }
  body.single-hub-home .hero-play-choices {
    width: 100%;
    margin: 0 auto;
    gap: .43rem;
    text-align: left;
  }
  body.single-hub-home .hero-choices-kicker {
    font-size: .57rem;
    letter-spacing: .1em;
    padding: .17rem .42rem;
  }
  body.single-hub-home .hero-choice {
    min-height: 3.55rem;
    padding: .43rem .68rem;
    gap: .48rem;
  }
  body.single-hub-home .hero-choice strong {
    font-size: clamp(1.03rem, 4.18vw, 1.25rem);
    line-height: 1.06;
  }
  body.single-hub-home .hero-choice small {
    padding-top: .2rem;
    font-size: clamp(.59rem, 2.85vw, .7rem);
    line-height: 1.23;
  }
  body.single-hub-home .hero-choice-arrow {
    width: 2.05rem;
    height: 2.05rem;
    font-size: 1.45rem;
  }
  body.single-hub-home .hero-backdrop {
    order: 3;
    display: block;
    position: relative !important;
    inset: auto !important;
    z-index: 0 !important;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    max-width: 100%;
    margin-top: .4rem;
    object-fit: contain !important;
    object-position: center center !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 1 !important;
    pointer-events: none;
    background: #242628;
  }
  body.single-hub-home .hero-features,
  body.single-hub-home .hero-baseline {
    display: none !important;
  }
}
@media (max-width: 23rem) {
  body.single-hub-home .site-header { padding: .65rem .75rem .35rem; }
  body.single-hub-home .site-header nav { gap: .28rem; font-size: .60rem; }
  body.single-hub-home .site-header nav > a:first-child,
  body.single-hub-home .site-header nav .nav-online {
    padding: .42rem .42rem;
    min-height: 2.2rem;
  }
  body.single-hub-home .hero-copy { width: calc(100% - 1.5rem); }
  body.single-hub-home .hero-wordmark { width: min(71vw, 15.3rem); }
  body.single-hub-home .hero-tagline { font-size: 1.28rem; }
  body.single-hub-home .hero-choice { padding: .43rem .51rem; }
  body.single-hub-home .hero-choice strong { font-size: .99rem; }
  body.single-hub-home .hero-choice small { font-size: .6rem; }
  body.single-hub-home .hero-choice-arrow { width: 1.9rem; height: 1.9rem; }
}

/* Keep the illustrated panel compact on larger phones and small tablets. */
@media (min-width: 31.25rem) and (max-width: 42rem) {
  body.single-hub-home .hero-backdrop { height: clamp(15rem, 50vw, 20rem); aspect-ratio: auto; }
}