/*
 * HUBBY mobile layout fix
 * Loaded only at 720px and below so the desktop presentation is untouched.
 */

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

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html {
  scroll-padding-top: 64px;
}

body {
  padding-top: 64px !important;
}

body:has(.site-header.menu-open) {
  overflow: hidden;
}

main,
main > *,
.page-main,
.section,
.wrap {
  min-width: 0 !important;
  max-width: 100% !important;
}

main {
  overflow-x: clip;
}

.wrap {
  width: calc(100% - 32px) !important;
  margin-inline: auto !important;
}

/* Header: centered wordmark, reliable menu button, full-screen navigation. */
.site-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 5000 !important;
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  background: #11c5df !important;
  border-bottom: 1px solid rgba(8, 43, 52, .12) !important;
}

.site-header .header-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header .brand {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  z-index: 5002 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-header .brand img {
  display: none !important;
}

.site-header .brand span {
  display: block !important;
  color: #ff7600 !important;
  font-size: 1.35rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  white-space: nowrap !important;
  -webkit-text-stroke: 1px #fff !important;
  text-shadow: 0 1px 0 rgba(8, 43, 52, .12) !important;
}

.site-header .menu-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  left: auto !important;
  z-index: 5003 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 10px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
}

.site-header .menu-toggle span {
  display: block !important;
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 3px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #082b34 !important;
  transform: none !important;
  transition: transform .2s ease, opacity .2s ease !important;
}

.site-header .menu-toggle:focus {
  outline: none !important;
}

.site-header .menu-toggle:focus-visible {
  outline: 2px solid #ff7600 !important;
  outline-offset: -5px !important;
}

.site-header.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg) !important;
}

.site-header.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0 !important;
}

.site-header.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg) !important;
}

.site-header .site-nav {
  position: fixed !important;
  inset: 64px 0 0 !important;
  z-index: 5001 !important;
  display: grid !important;
  align-content: start !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: calc(100dvh - 64px) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px 22px calc(26px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(4, 39, 48, .985) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s !important;
}

.site-header.menu-open .site-nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.site-header .site-nav a {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 10px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  transform: none !important;
}

.site-header .site-nav a::before {
  margin: 0 !important;
  color: #11c5df !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

.site-header .site-nav a:nth-child(1)::before { content: "01" !important; }
.site-header .site-nav a:nth-child(2)::before { content: "02" !important; }
.site-header .site-nav a:nth-child(3)::before { content: "03" !important; }
.site-header .site-nav a:nth-child(4)::before { content: "04" !important; }
.site-header .site-nav a:nth-child(5)::before { content: "05" !important; }
.site-header .site-nav a:nth-child(6)::before { content: "06" !important; }
.site-header .site-nav a:nth-child(7)::before { content: "07" !important; }

/* Shared mobile rhythm. */
.section {
  padding-block: 48px !important;
}

.section-kicker,
.page-kicker {
  font-size: .68rem !important;
  letter-spacing: .14em !important;
}

.page-title {
  font-size: clamp(2.15rem, 11vw, 3.15rem) !important;
  line-height: 1.04 !important;
  overflow-wrap: anywhere !important;
}

.hero-title,
.section-title,
.dark-callout h2,
.dark-callout h3,
.final-cta h2 {
  font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
  line-height: 1.16 !important;
  overflow-wrap: anywhere !important;
}

.lead,
.section-intro,
.section-copy,
.card-copy,
.story-copy p,
.dark-callout p,
.final-cta p {
  font-size: .94rem !important;
  line-height: 1.75 !important;
}

.page-main:not(.home-v3) .page-hero,
.subpage-v3 .subpage-hero {
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
}

.subpage-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 26px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 32px 20px !important;
  overflow: hidden !important;
  transform: none !important;
}

.subpage-hero-copy,
.subpage-visual,
.about-visual,
.games-visual,
.beta-visual,
.guide-visual,
.support-visual-wrap,
.operator-visual {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

.games-visual-face,
.beta-visual-face,
.guide-visual-face,
.about-party-card,
.operator-visual,
.support-visual,
.dark-callout,
.final-cta {
  min-height: 0 !important;
  height: auto !important;
  padding: 22px 18px !important;
  border-radius: 22px !important;
  transform: none !important;
}

.games-visual-head strong {
  font-size: clamp(2rem, 10vw, 3rem) !important;
}

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

.games-visual-grid span {
  min-width: 0 !important;
  font-size: .77rem !important;
}

.beta-visual-face > strong,
.guide-visual-face > strong {
  font-size: clamp(2.2rem, 13vw, 4rem) !important;
  line-height: 1 !important;
}

.beta-specs {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* Every content-card family becomes a normal vertical list. */
.experience-grid,
.feature-grid,
.info-grid,
.support-grid,
.step-grid,
.directory-grid,
.profile-grid,
.journey-columns,
.story-grid,
.footer-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  transform: none !important;
}

.experience-card,
.feature-card,
.info-card,
.support-card,
.step-card,
.directory-card,
.profile-card,
.journey-columns > *,
.story-grid > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 22px 18px !important;
  overflow: visible !important;
  scroll-snap-align: none !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

.experience-card h3,
.feature-card h3,
.info-card h3,
.support-card h3,
.step-card h3 {
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
  writing-mode: horizontal-tb !important;
}

.experience-card p,
.feature-card p,
.info-card p,
.support-card p,
.step-card p {
  max-width: none !important;
  font-size: .9rem !important;
  line-height: 1.7 !important;
  writing-mode: horizontal-tb !important;
}

/* Home page: remove oversized horizontal panels. */
.home-hero-grid,
.games-home-grid,
.naming-grid,
.story-home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 28px !important;
  min-height: 0 !important;
  padding-block: 36px 52px !important;
}

.home-hero-copy h1 {
  font-size: clamp(2.15rem, 10.5vw, 3.05rem) !important;
  line-height: 1.04 !important;
}

.hero-product,
.app-shell,
.story-home-art,
.story-home-art img {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
}

.game-orbit {
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.story-home-grid > div:last-child {
  padding: 22px 18px !important;
}

.section-heading-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

.recruitment-rail {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: visible !important;
}

.sample-party {
  width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}

/* Supported games: six compact cards visible as a two-column grid. */
.subpage-games .game-carousel-shell {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.subpage-games .game-carousel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: none !important;
}

.subpage-games .game-card[data-carousel-clone],
.subpage-games .game-card[aria-hidden="true"],
.subpage-games .game-card.is-clone {
  display: none !important;
}

.subpage-games .game-card {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 9px !important;
  row-gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 104px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  border-radius: 18px !important;
  scroll-snap-align: none !important;
  transform: none !important;
}

.subpage-games .game-card .game-tile {
  grid-row: 1 / 3 !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border-radius: 13px !important;
  font-size: 1.25rem !important;
}

.subpage-games .game-card strong {
  min-height: 0 !important;
  font-size: .76rem !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
}

.subpage-games .game-card small {
  margin: 0 !important;
  padding: 0 !important;
  font-size: .58rem !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

.subpage-games .carousel-controls {
  display: none !important;
}

.candidate-marquee {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.candidate-group,
.candidate-track {
  gap: 8px !important;
}

.candidate-game {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  flex: 0 0 142px !important;
  gap: 8px !important;
  width: 142px !important;
  min-width: 142px !important;
  min-height: 86px !important;
  height: auto !important;
  padding: 11px 9px !important;
  border-radius: 17px !important;
}

.candidate-game > span {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: 1.15rem !important;
}

.candidate-game strong {
  font-size: .68rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

.candidate-game small {
  font-size: .52rem !important;
  line-height: 1.2 !important;
}

.candidate-game::after {
  top: 6px !important;
  right: 7px !important;
  font-size: .36rem !important;
}

/* Forms and page endings stay within the viewport. */
.mail-form,
.notice,
.account-delete-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.mail-form {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 20px 16px !important;
}

.button,
.final-cta-actions,
.final-cta-actions .button,
.page-end .button {
  max-width: 100% !important;
}

.dark-callout,
.final-cta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px !important;
}

.site-footer {
  margin-top: 52px !important;
  padding: 42px 0 24px !important;
}

.footer-top {
  gap: 28px !important;
}

.footer-links {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2px 12px !important;
}

.footer-links a {
  min-width: 0 !important;
  padding: 8px 0 !important;
  font-size: .78rem !important;
}

.footer-bottom {
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 7px !important;
}

/* Legal pages. */
.legal-page {
  padding: 24px 0 64px !important;
}

.legal-sheet {
  width: 100% !important;
  max-width: 100% !important;
  padding: 22px 18px !important;
  border-radius: 24px !important;
}

.legal-sheet h1 {
  font-size: clamp(1.9rem, 9vw, 2.6rem) !important;
}

.legal-sheet p,
.legal-sheet li {
  font-size: .9rem !important;
  line-height: 1.8 !important;
}

@media (max-width: 360px) {
  .wrap {
    width: calc(100% - 24px) !important;
  }

  .subpage-games .game-carousel {
    gap: 8px !important;
  }

  .subpage-games .game-card {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    padding: 10px 8px !important;
  }

  .subpage-games .game-card .game-tile {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.05rem !important;
  }

  .footer-links {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/*
 * Mobile editorial slider pass
 * Cards read one at a time, while the next card remains visible as a cue.
 */

/* Keep the open menu genuinely left-aligned. */
.site-header .site-nav {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  padding-inline: 20px !important;
}

.site-header .site-nav a {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  justify-self: stretch !important;
  justify-items: start !important;
  max-width: none !important;
  padding-inline: 2px !important;
  text-align: left !important;
}

/* Give mobile headings a calmer, designed rhythm. */
.section-heading-row {
  gap: 18px !important;
}

.section-heading-row > p,
.section > .wrap > .lead,
.section > .wrap > .section-intro {
  max-width: 34em !important;
}

.section-title {
  letter-spacing: -.045em !important;
  text-wrap: pretty !important;
}

/* Manual swipe rails used throughout the mobile site. */
.experience-grid,
.recruitment-rail,
.subpage-about .feature-grid,
.subpage-beta .info-grid,
.subpage-beta .support-grid,
.subpage-guide .step-grid,
.subpage-guide .support-grid,
.subpage-support .support-grid {
  display: flex !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  grid-auto-flow: initial !important;
  gap: 14px !important;
  width: calc(100% + 16px) !important;
  max-width: none !important;
  margin: 24px -16px 0 0 !important;
  padding: 4px 16px 22px 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 0 !important;
  overscroll-behavior-inline: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  touch-action: pan-x pan-y !important;
}

.experience-grid::-webkit-scrollbar,
.recruitment-rail::-webkit-scrollbar,
.subpage-about .feature-grid::-webkit-scrollbar,
.subpage-beta .info-grid::-webkit-scrollbar,
.subpage-beta .support-grid::-webkit-scrollbar,
.subpage-guide .step-grid::-webkit-scrollbar,
.subpage-guide .support-grid::-webkit-scrollbar,
.subpage-support .support-grid::-webkit-scrollbar {
  display: none !important;
}

.experience-grid > *,
.recruitment-rail > *,
.subpage-about .feature-grid > *,
.subpage-beta .info-grid > *,
.subpage-beta .support-grid > *,
.subpage-guide .step-grid > *,
.subpage-guide .support-grid > *,
.subpage-support .support-grid > * {
  flex: 0 0 min(82vw, 340px) !important;
  width: min(82vw, 340px) !important;
  min-width: min(82vw, 340px) !important;
  max-width: min(82vw, 340px) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

/* Home experience cards: compact editorial panels with no text collision. */
.experience-card {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-areas:
    "number number"
    "icon title"
    "copy copy"
    "extra extra" !important;
  align-content: start !important;
  align-items: center !important;
  min-height: 360px !important;
  padding: 24px 22px !important;
  border-radius: 28px !important;
  column-gap: 14px !important;
  row-gap: 18px !important;
}

.experience-card .experience-no {
  grid-area: number !important;
}

.experience-card .experience-icon {
  grid-area: icon !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  font-size: 1.55rem !important;
}

.experience-card h3 {
  grid-area: title !important;
  margin: 0 !important;
  font-size: 1.55rem !important;
  line-height: 1.18 !important;
}

.experience-card > p {
  grid-area: copy !important;
  margin: 0 !important;
  font-size: .9rem !important;
  line-height: 1.72 !important;
}

.experience-card .mini-filter,
.experience-card .mini-chat,
.experience-card .mini-call {
  position: static !important;
  inset: auto !important;
  grid-area: extra !important;
  align-self: end !important;
  margin-top: auto !important;
}

/* Recruitment previews are swipeable and phone-sized, not page-sized. */
.recruitment-rail {
  margin-top: 24px !important;
}

.sample-party {
  display: flex !important;
  flex-direction: column !important;
  min-height: 360px !important;
  height: auto !important;
  padding: 22px 18px !important;
  border-radius: 26px !important;
}

.sample-game {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.sample-game > span {
  width: 48px !important;
  height: 48px !important;
  border-radius: 15px !important;
  font-size: 1.25rem !important;
}

.sample-game em {
  grid-column: 2 !important;
  justify-self: start !important;
  margin-top: 4px !important;
}

.sample-host {
  margin-top: 24px !important;
}

.sample-tags {
  margin-top: 20px !important;
}

.sample-party time {
  margin-top: auto !important;
  padding-top: 22px !important;
}

/* About feature cards: explicit grid areas prevent icon/copy overlap. */
.subpage-about .feature-card {
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) !important;
  grid-template-areas:
    "label label"
    "icon title"
    "copy copy" !important;
  align-content: start !important;
  align-items: center !important;
  min-height: 300px !important;
  padding: 24px 22px !important;
  border-radius: 28px !important;
  column-gap: 14px !important;
  row-gap: 22px !important;
}

.subpage-about .feature-card .card-label {
  grid-area: label !important;
}

.subpage-about .feature-card .feature-icon {
  grid-area: icon !important;
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  font-size: 1.5rem !important;
}

.subpage-about .feature-card h3 {
  grid-area: title !important;
  margin: 0 !important;
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
}

.subpage-about .feature-card p {
  grid-area: copy !important;
  margin: 0 !important;
  font-size: .9rem !important;
  line-height: 1.72 !important;
}

/* Beta, guide, and support cards use a consistent reading height. */
.subpage-beta .info-card,
.subpage-beta .support-card,
.subpage-guide .step-card,
.subpage-guide .support-card,
.subpage-support .support-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-height: 270px !important;
  height: auto !important;
  padding: 25px 22px !important;
  border-radius: 28px !important;
}

.subpage-beta .info-card .showcase-number,
.subpage-guide .step-card .showcase-number {
  flex: 0 0 auto !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 32px !important;
  border-radius: 18px !important;
  font-size: 1rem !important;
}

.subpage-beta .info-card h3,
.subpage-beta .support-card h3,
.subpage-guide .step-card h3,
.subpage-guide .support-card h3,
.subpage-support .support-card h3 {
  margin: 0 !important;
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
}

.subpage-beta .info-card p,
.subpage-beta .support-card p,
.subpage-guide .step-card p,
.subpage-guide .support-card p,
.subpage-support .support-card p {
  margin: 18px 0 0 !important;
  font-size: .9rem !important;
  line-height: 1.72 !important;
}

.subpage-support .support-card strong {
  margin-top: auto !important;
  padding-top: 26px !important;
}

/* Slider controls added by site.js on phones. */
.mobile-slider-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 42px !important;
  margin-top: -10px !important;
  gap: 8px !important;
}

.mobile-slider-controls span {
  min-width: 52px !important;
  color: var(--muted) !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-align: center !important;
}

.mobile-slider-controls button {
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(15, 57, 69, .15) !important;
  border-radius: 50% !important;
  color: var(--ink) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 8px 22px rgba(15, 57, 69, .08) !important;
  font: inherit !important;
  font-size: 1rem !important;
}

.mobile-slider-controls button:disabled {
  opacity: .3 !important;
}

/* Supported games: keep the compact size and restore continuous motion. */
.subpage-games .game-carousel-shell {
  overflow: hidden !important;
}

.subpage-games .game-carousel {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  padding: 4px 0 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
}

.subpage-games .game-carousel::-webkit-scrollbar {
  display: none !important;
}

.subpage-games .game-card,
.subpage-games .game-card[data-carousel-clone],
.subpage-games .game-card[aria-hidden="true"] {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  flex: 0 0 168px !important;
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
  min-height: 108px !important;
  height: auto !important;
  padding: 12px 10px !important;
  scroll-snap-align: none !important;
}

.subpage-games .carousel-controls {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .subpage-games .game-carousel {
    scroll-behavior: auto !important;
  }
}

/*
 * Mobile colour system — 2026-08-11
 * This file is loaded only below 720px, so the approved desktop design stays intact.
 */

/* The compact app icon replaces the temporary text treatment in the phone header. */
.site-header .brand img {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 255, 255, .94) !important;
  border-radius: 13px !important;
  box-shadow: 0 7px 18px rgba(4, 39, 48, .2) !important;
}

.site-header .brand span {
  display: none !important;
}

/* Use the extracted wordmark as a quiet menu signature, never as a white rectangle. */
.site-header .site-nav::after {
  position: relative !important;
  z-index: 0 !important;
  display: block !important;
  width: min(52vw, 190px) !important;
  aspect-ratio: 1165 / 366 !important;
  margin: 34px 0 0 42px !important;
  background: url("/assets/images/hubby-wordmark-optimized.png?v=20260811-01") center / contain no-repeat !important;
  content: "" !important;
  opacity: .16 !important;
  pointer-events: none !important;
}

.site-header .site-nav a {
  position: relative !important;
  z-index: 1 !important;
}

/* GAMES + GUIDE: replace washed-out white/orange with a deliberate ink/orange pair. */
.subpage-games .subpage-hero,
.subpage-guide .subpage-hero {
  background: #052832 !important;
}

.subpage-games .subpage-hero-grid,
.subpage-guide .subpage-hero-grid {
  background:
    radial-gradient(circle at 92% 5%, rgba(255, 122, 0, .2), transparent 34%),
    linear-gradient(145deg, #062a34 0%, #041e26 100%) !important;
}

.subpage-games .subpage-hero .page-kicker,
.subpage-games .subpage-hero .page-title,
.subpage-guide .subpage-hero .page-kicker,
.subpage-guide .subpage-hero .page-title {
  color: #ff8200 !important;
}

.subpage-games .subpage-hero .hero-title,
.subpage-guide .subpage-hero .hero-title {
  color: #fff !important;
}

.subpage-games .subpage-hero .hero-title span:first-child {
  color: #fff !important;
}

.subpage-games .subpage-hero .hero-title span:last-child {
  color: #ff8200 !important;
}

.subpage-games .subpage-hero .lead,
.subpage-guide .subpage-hero .lead {
  color: rgba(255, 255, 255, .76) !important;
}

.subpage-games .games-visual-face,
.subpage-guide .guide-visual-face {
  color: #082b34 !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .35), transparent 26%),
    linear-gradient(145deg, #ff9d24 0%, #ff7900 100%) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .3) !important;
}

.subpage-games .games-visual-head {
  border-bottom-color: rgba(8, 43, 52, .28) !important;
}

.subpage-games .games-visual-head span,
.subpage-games .games-visual-head strong,
.subpage-games .games-visual-face > p,
.subpage-guide .guide-visual-face > p {
  color: #082b34 !important;
}

.subpage-games .games-visual-grid span {
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: inset 0 0 0 1px rgba(8, 43, 52, .08) !important;
}

.subpage-games .games-visual-grid i {
  background: #fff3e4 !important;
}

.subpage-guide .guide-visual-face li,
.subpage-guide .guide-visual-face li:last-child {
  color: #fff !important;
  background: #082b34 !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

.subpage-guide .guide-visual-face li b,
.subpage-guide .guide-visual-face li:last-child b {
  color: #ff8a00 !important;
}

.subpage-guide .guide-visual-face li i {
  color: #082b34 !important;
  background: #fff !important;
}

/* BETA: swap cyan/ink to the same ink-first rhythm used by the strongest pages. */
.subpage-beta .subpage-hero {
  background: #052832 !important;
}

.subpage-beta .subpage-hero-grid {
  background:
    radial-gradient(circle at 86% 10%, rgba(17, 197, 223, .25), transparent 36%),
    linear-gradient(145deg, #062d37 0%, #031d25 100%) !important;
}

.subpage-beta .subpage-hero .page-kicker,
.subpage-beta .subpage-hero .page-title {
  color: #13c5df !important;
}

.subpage-beta .subpage-hero .lead {
  color: rgba(255, 255, 255, .77) !important;
}

.subpage-beta .beta-visual-face {
  color: #062a34 !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .38), transparent 28%),
    linear-gradient(145deg, #77e3ed 0%, #15c3dc 100%) !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .34) !important;
}

.subpage-beta .beta-specs {
  border-color: rgba(6, 42, 52, .24) !important;
}

.subpage-beta .beta-specs small {
  color: rgba(6, 42, 52, .64) !important;
}

/*
 * Mobile clarification pass — 2026-08-11
 * Wordmark text, clearer TOP numbers, and white product-preview cards.
 */
@font-face {
  font-family: "Gugi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/gugi-latin.woff2?v=20260811-25") format("woff2");
}

/* The header is styled text — not the square application icon. */
.site-header .brand img {
  display: none !important;
}

.site-header .brand span {
  display: block !important;
  color: #fff !important;
  font-family: "Gugi", sans-serif !important;
  font-size: 1.58rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  paint-order: stroke fill !important;
  -webkit-text-stroke: 4px #ff7900 !important;
  text-shadow: 0 3px 0 #ff7900, 0 7px 15px rgba(4, 39, 48, .17) !important;
}

/* TOP story numbers should read as navigation, not a watermark. */
.experience-card .experience-no,
.experience-card:nth-child(2) .experience-no,
.experience-card:nth-child(3) .experience-no {
  position: static !important;
  inset: auto !important;
  z-index: 2 !important;
  display: inline-flex !important;
  grid-area: number !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: start !important;
  min-width: 54px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(8, 126, 145, .24) !important;
  border-radius: 999px !important;
  color: #087e91 !important;
  background: #dff7fa !important;
  font-size: .9rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  opacity: 1 !important;
}

.experience-card:nth-child(2) .experience-no {
  color: #082b34 !important;
  background: #fff !important;
  border-color: rgba(255, 255, 255, .72) !important;
}

.experience-card:nth-child(3) .experience-no {
  color: #fff !important;
  background: #082b34 !important;
  border-color: #082b34 !important;
}

/* Keep the dark/orange and dark/cyan page themes; make the preview itself white. */
.subpage-games .games-visual-face,
.subpage-guide .guide-visual-face,
.subpage-beta .beta-visual-face {
  color: #082b34 !important;
  background: #fff !important;
  border: 1px solid rgba(8, 43, 52, .12) !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .28) !important;
}

.subpage-games .games-visual::before,
.subpage-guide .guide-visual::before {
  background: #f2eee8 !important;
}

.subpage-beta .beta-visual::after {
  background: #e4f7f9 !important;
}

.subpage-games .games-visual-head {
  border-bottom-color: rgba(8, 43, 52, .16) !important;
}

.subpage-games .games-visual-head span,
.subpage-games .games-visual-face > p,
.subpage-guide .guide-visual-face > p {
  color: #e96f00 !important;
}

.subpage-games .games-visual-head strong {
  color: #ff7900 !important;
}

.subpage-games .games-visual-grid span {
  background: #f8faf9 !important;
  border: 1px solid rgba(8, 43, 52, .1) !important;
  box-shadow: none !important;
}

.subpage-beta .beta-status b {
  color: #0faac2 !important;
}

.subpage-beta .beta-specs {
  border-color: rgba(8, 43, 52, .16) !important;
}

/* Requested correction: only the three page titles turn white. */
.subpage-games .subpage-hero .page-title,
.subpage-beta .subpage-hero .page-title,
.subpage-guide .subpage-hero .page-title {
  color: #fff !important;
}

/* Restore the coloured product-preview panels from the previous version. */
.subpage-games .games-visual-face,
.subpage-guide .guide-visual-face {
  color: #082b34 !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .35), transparent 26%),
    linear-gradient(145deg, #ff9d24 0%, #ff7900 100%) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .3) !important;
}

.subpage-beta .beta-visual-face {
  color: #062a34 !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .38), transparent 28%),
    linear-gradient(145deg, #77e3ed 0%, #15c3dc 100%) !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .34) !important;
}

.subpage-games .games-visual::before,
.subpage-guide .guide-visual::before {
  background: #ffb25f !important;
}

.subpage-beta .beta-visual::after {
  background: #74e2ed !important;
}

.subpage-games .games-visual-head span,
.subpage-games .games-visual-head strong,
.subpage-games .games-visual-face > p,
.subpage-guide .guide-visual-face > p {
  color: #082b34 !important;
}

.subpage-games .games-visual-grid span {
  background: rgba(255, 255, 255, .9) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(8, 43, 52, .08) !important;
}

.subpage-beta .beta-status b {
  color: #062a34 !important;
}

/* Display-mode switch: menu on mobile, footer on desktop. */
.site-header .site-nav .display-mode-switch {
  display: flex !important;
  order: 999 !important;
  width: 100% !important;
  margin: 28px 0 0 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.site-header .site-nav .display-mode-switch__label {
  margin-left: auto !important;
  margin-right: 8px !important;
  padding-left: 2px !important;
  color: rgba(255, 255, 255, .4) !important;
  font-size: .62rem !important;
}

.site-header .site-nav .display-mode-switch__label::after {
  height: 18px !important;
  margin-left: 14px !important;
  background: rgba(255, 255, 255, .18) !important;
}

.site-header .site-nav .display-mode-switch button {
  min-width: 66px !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  color: rgba(255, 255, 255, .52) !important;
  background: rgba(255, 255, 255, .035) !important;
  font-size: .7rem !important;
}

.site-header .site-nav .display-mode-switch button[aria-pressed="true"] {
  border-color: rgba(17, 197, 223, .36) !important;
  color: #fff !important;
  background: rgba(17, 197, 223, .16) !important;
}

.site-header .site-nav::after {
  order: 998 !important;
}

.site-footer .display-mode-switch {
  display: none !important;
}

/* A forced phone view stays phone-sized even on a wide desktop screen. */
html[data-display-mode="mobile"] {
  width: min(430px, 100%) !important;
  margin-inline: auto !important;
  background: #dfe7e8 !important;
  box-shadow: 0 0 70px rgba(4, 39, 48, .18) !important;
}

html[data-display-mode="mobile"] body {
  width: 100% !important;
  min-width: 0 !important;
}

html[data-display-mode="mobile"] .site-header,
html[data-display-mode="mobile"] .site-header .site-nav {
  right: auto !important;
  left: max(0px, calc((100vw - 430px) / 2)) !important;
  width: min(430px, 100vw) !important;
}