/*
 * HUBBY mobile density pass — 2026-08-11.
 * Loaded after every visual sheet and only in mobile display mode.
 * Desktop composition is intentionally untouched.
 */

:root {
  --mobile-pad:16px;
  --mobile-radius:20px;
  --mobile-header:60px;
}

@media (max-width:720px) {
  html {
    width:100%!important;
    margin:0!important;
    background:var(--final-cream,#f5f2e9)!important;
    box-shadow:none!important;
  }
  body {
    width:100%!important;
    margin:0!important;
  }
}

/* Full-bleed mobile canvas. Inner spacing belongs to each section, not the page. */
.page-main,
.final-home,
.sf-page,
.legal-page {
  width:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
}

.final-news,
.final-hero,
.final-topic-strip,
.sf-hero,
.sf-delete-hero,
.sf-chapter-strip,
.site-footer {
  width:100%!important;
  margin-inline:0!important;
  border-radius:0!important;
}

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

/* Header: quieter, but every control retains a comfortable tap target. */
.site-header .brand {
  width:94px!important;
  height:34px!important;
}
.site-header .brand span {
  background:
    radial-gradient(ellipse 1.95px 1.35px at 50.2% 36%,#13c5dd 98%,transparent 100%),
    radial-gradient(ellipse 2.05px 1.6px at 50.2% 63.5%,#13c5dd 98%,transparent 100%),
    radial-gradient(ellipse 1.95px 1.35px at 69% 36%,#13c5dd 98%,transparent 100%),
    radial-gradient(ellipse 2.05px 1.6px at 69% 63.5%,#13c5dd 98%,transparent 100%),
    url("/assets/images/hubby-wordmark-optimized.png?v=20260811-01") center/contain no-repeat!important;
}
.site-header .menu-toggle {
  right:7px!important;
  width:44px!important;
  height:44px!important;
  padding:10px!important;
  gap:4px!important;
}
.site-header .menu-toggle span {
  width:24px!important;
  height:3px!important;
}
.site-header.menu-open .menu-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg)!important; }
.site-header.menu-open .menu-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg)!important; }
.site-header .site-nav { padding-top:12px!important; }
html[data-display-mode="mobile"] .site-header .site-nav {
  right:0!important;
  left:0!important;
  width:100%!important;
}
.site-header .site-nav a {
  min-height:50px!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  font-size:.9rem!important;
}
.site-header .site-nav .site-nav-legal { display:grid!important; }

/* Shared editorial rhythm. */
.final-section,
.sf-section,
.sf-color-section,
.sf-feedback,
.sf-dark-section,
.sf-upcoming,
.sf-safety,
.sf-profile {
  padding:56px var(--mobile-pad)!important;
}
.final-heading>p:first-child,
.final-games-copy>p:first-child,
.final-beta-copy>p:first-child,
.final-name>div:first-child>p:first-child,
.final-roots-copy>p:first-child,
.sf-heading>p:first-child,
.sf-kicker {
  margin-bottom:12px!important;
  font-size:.57rem!important;
}
.final-heading h2,
.final-games-copy h2,
.final-beta-copy h2,
.final-name h2,
.final-roots-copy h2,
.final-explore h2,
.final-cta h2,
.sf-heading h2,
.sf-story-copy h2,
.sf-contact-copy h2,
.sf-account h2,
.sf-rights h2,
.sf-related h2 {
  font-size:clamp(1.85rem,8.6vw,2.5rem)!important;
  line-height:1.08!important;
  letter-spacing:-.055em!important;
}
.final-heading-left>div,
.final-heading-light>div,
.sf-heading>div { margin-top:17px!important; }
.final-heading-left>div p,
.final-heading-light>div p,
.sf-heading>div p,
.final-games-copy>p:not(:first-child),
.final-beta-copy>p:not(:first-child),
.final-name>div:first-child>p:last-child,
.final-roots-copy>p:not(:first-child),
.sf-story-copy>p:not(.sf-kicker),
.sf-contact-copy>p:not(.sf-kicker) {
  font-size:.84rem!important;
  line-height:1.72!important;
}
.final-button,
.sf-button {
  min-height:44px!important;
  padding:9px 14px!important;
  font-size:.7rem!important;
}
.final-actions,
.sf-actions {
  margin-top:21px!important;
  gap:8px!important;
}

/* TOP — more of the product and the next section are visible at first glance. */
.final-news a {
  min-height:38px!important;
  padding:6px var(--mobile-pad)!important;
  gap:9px!important;
}
.final-news span { font-size:.46rem!important; }
.final-news strong { font-size:.58rem!important; }
.final-hero {
  padding:42px var(--mobile-pad) 58px!important;
}
.final-hero::before {
  top:235px!important;
  right:-185px!important;
  width:350px!important;
  height:350px!important;
  border-width:48px!important;
}
.final-hero-label {
  margin-bottom:17px!important;
  gap:9px!important;
}
.final-hero-label span { font-size:.61rem!important; }
.final-hero-label b {
  padding:5px 9px!important;
  font-size:.58rem!important;
}
.final-hero h1 {
  font-size:clamp(2.35rem,10.8vw,3rem)!important;
  line-height:.96!important;
  letter-spacing:-.065em!important;
}
.final-hero-copy>p {
  margin-top:18px!important;
  font-size:.83rem!important;
  line-height:1.7!important;
}
.final-hero-facts { margin-top:28px!important; }
.final-hero-facts div { padding-top:10px!important; }
.final-hero-facts dt { font-size:.43rem!important; }
.final-hero-facts dd { font-size:.64rem!important; }
.final-hero-product {
  margin:32px 0 0!important;
  padding:18px 0 24px!important;
}
.final-phone {
  width:min(88%,320px)!important;
  margin-inline:auto!important;
  padding:7px 7px 9px!important;
  border-width:4px!important;
  border-radius:22px!important;
}
.final-app-lobby { padding:8px!important; grid-template-columns:1fr 36px!important; }
.final-app-lobby>i { width:34px!important; height:34px!important; }
.final-app-lobby h2 { font-size:.75rem!important; }
.final-app-games i { width:27px!important; height:27px!important; font-size:.72rem!important; }
.final-app-party-main { padding:7px!important; }
.final-chat-bubble {
  right:0!important;
  min-width:172px!important;
  padding:7px!important;
  transform:scale(.88)!important;
  transform-origin:right bottom!important;
}
.final-player-stack { transform:scale(.67)!important; }
.final-hero .hero-marquee-track span {
  padding-block:9px!important;
  font-size:.55rem!important;
}
.final-topic-strip {
  padding:11px var(--mobile-pad)!important;
  gap:8px!important;
}
.final-topic-strip a {
  flex-basis:218px!important;
  min-height:72px!important;
  padding:11px!important;
  border-radius:15px!important;
}

/* Horizontal cards: show the next card clearly without shrinking tap targets. */
.final-flow-grid,
.final-party-grid,
.sf-feature-mosaic,
.sf-info-grid,
.sf-feedback-grid,
.sf-guide-steps,
.sf-safety-grid,
.sf-help-grid,
.sf-play-mosaic,
.sf-delete-steps,
.sf-profile-grid {
  margin-top:28px!important;
  padding-bottom:10px!important;
  gap:10px!important;
}
.final-flow-card,
.final-party-grid .sample-party,
.final-party-grid .final-party-feature,
.sf-feature-card,
.sf-info-card,
.sf-feedback-grid article,
.sf-guide-steps article,
.sf-safety-grid article,
.sf-help-grid a,
.sf-play-mosaic article,
.sf-delete-steps article,
.sf-profile-grid article {
  flex-basis:min(76vw,300px)!important;
  min-height:315px!important;
  padding:18px 16px!important;
  border-radius:var(--mobile-radius)!important;
}
.final-flow-card { min-height:390px!important; }
.final-flow-card h3 { font-size:1.65rem!important; }
.final-flow-visual {
  min-height:155px!important;
  margin:22px 0 18px!important;
}
.final-message { margin-top:28px!important; }
.final-call-cluster { margin-top:32px!important; }
.final-live { padding:56px var(--mobile-pad)!important; }
.final-party-grid .sample-party { min-height:330px!important; }

.final-games { padding:58px var(--mobile-pad)!important; }
.final-games-copy h2 { font-size:clamp(2.05rem,9.5vw,2.7rem)!important; }
.final-game-stage {
  margin-top:30px!important;
  padding:20px 0 17px!important;
  border-radius:18px!important;
  box-shadow:6px 6px 0 var(--final-cyan)!important;
}
.final-game-stage-label { padding:0 14px 15px!important; }
.final-game-stage-label strong { font-size:1.45rem!important; }
.final-game-loop>div {
  flex-basis:116px!important;
  min-height:126px!important;
  padding:10px!important;
  border-radius:16px!important;
}
.final-game-loop span { font-size:1.8rem!important; }
.final-beta { gap:30px!important; }
.final-beta-copy h2 { font-size:clamp(1.9rem,8.8vw,2.45rem)!important; }
.final-beta-ticket {
  padding:20px 16px!important;
  border-radius:18px!important;
  box-shadow:6px 6px 0 var(--final-ink)!important;
}
.final-beta-ticket h3 {
  margin:28px 0!important;
  font-size:2.4rem!important;
}
.final-name { padding:58px var(--mobile-pad)!important; }
.final-name h2 { font-size:clamp(1.95rem,8.8vw,2.45rem)!important; }
.final-name-words { margin-top:30px!important; }
.final-name-words>div {
  min-height:84px!important;
  grid-template-columns:minmax(0,1fr) minmax(100px,.8fr)!important;
  gap:10px!important;
}
.final-name-words strong { font-size:2rem!important; }
.final-name-words p { font-size:.7rem!important; }
.final-roots { gap:30px!important; }
.final-roots-copy h2 { font-size:clamp(1.9rem,8.7vw,2.45rem)!important; }
.final-roots-art {
  border-radius:18px!important;
  box-shadow:-6px 6px 0 var(--final-orange)!important;
}
.final-explore { padding:56px var(--mobile-pad)!important; }
.final-explore nav { margin-top:28px!important; }
.final-explore a {
  min-height:86px!important;
  padding:12px 0!important;
}
.final-explore strong { font-size:1.08rem!important; }
.final-cta { padding:62px var(--mobile-pad)!important; }

/* Subpage openings and visuals. */
.sf-hero,
.sf-delete-hero {
  padding:40px var(--mobile-pad) 54px!important;
}
.sf-hero h1,
.sf-delete-hero h1 {
  margin-bottom:12px!important;
  font-size:.82rem!important;
}
.sf-hero h2,
.sf-delete-hero h2 {
  font-size:clamp(2rem,9.2vw,2.6rem)!important;
  line-height:1.08!important;
  letter-spacing:-.055em!important;
}
.sf-hero-about h2 { font-size:clamp(1.85rem,8.3vw,2.3rem)!important; }
.sf-hero-beta h2 { font-size:clamp(2rem,9.1vw,2.55rem)!important; }
.sf-hero-guide h2 { font-size:clamp(1.9rem,8.5vw,2.35rem)!important; }
.sf-hero-operator h2 { font-size:clamp(1.78rem,7.9vw,2.2rem)!important; }
.sf-hero-copy>p:not(.sf-kicker),
.sf-delete-hero-copy>p:not(.sf-kicker) {
  margin-top:17px!important;
  font-size:.83rem!important;
  line-height:1.7!important;
}
.sf-hero-visual { margin-top:30px!important; }
.sf-about-map,
.sf-guide-map,
.sf-beta-ticket,
.sf-support-stack,
.sf-operator-portrait { padding:8px 0!important; }
.sf-about-map-board {
  width:calc(100% - 6px)!important;
  padding:14px!important;
  border-radius:18px!important;
  box-shadow:6px 6px 0 var(--final-orange)!important;
}
.sf-about-map-board li {
  min-height:66px!important;
  grid-template-columns:24px 38px 1fr!important;
  gap:8px!important;
}
.sf-about-map-board li>i {
  width:36px!important;
  height:36px!important;
  border-radius:11px!important;
}
.sf-guide-map,
.sf-beta-ticket,
.sf-delete-console {
  border-radius:18px!important;
  box-shadow:6px 6px 0 var(--final-orange)!important;
}
.sf-guide-map { padding:17px 14px!important; }
.sf-guide-map li { min-height:62px!important; }
.sf-guide-map li i { width:38px!important; height:38px!important; }
.sf-beta-ticket { padding:20px 16px!important; }
.sf-beta-ticket h3 {
  margin:28px 0!important;
  font-size:2.45rem!important;
}
.sf-support-stack article {
  padding:12px!important;
  grid-template-columns:44px 1fr!important;
}
.sf-support-stack article>span { width:40px!important; height:40px!important; }
.sf-operator-map {
  padding:15px!important;
  border-radius:18px!important;
}
.sf-chapter-strip {
  padding:11px var(--mobile-pad)!important;
  gap:8px!important;
}
.sf-chapter-strip a {
  flex-basis:212px!important;
  min-height:70px!important;
  padding:10px 12px!important;
  border-radius:15px!important;
}

/* Subpage content density. */
.sf-feature-card,
.sf-info-card,
.sf-feedback-grid article,
.sf-guide-steps article,
.sf-safety-grid article,
.sf-help-grid a,
.sf-play-mosaic article,
.sf-delete-steps article { min-height:315px!important; }
.sf-feature-orbit {
  min-height:155px!important;
  margin:22px 0 18px!important;
}
.sf-feature-card h3 { font-size:1.55rem!important; }
.sf-info-card>span { top:16px!important; right:16px!important; }
.sf-info-card>i { margin:10px 0 22px!important; }
.sf-dark-section,
.sf-upcoming,
.sf-safety,
.sf-profile { padding:56px var(--mobile-pad)!important; }
.sf-journey-grid { margin-top:28px!important; gap:10px!important; }
.sf-journey-grid article {
  padding:18px 16px!important;
  border-radius:17px!important;
}
.sf-story,
.sf-operator-story { gap:30px!important; }
.sf-story-art {
  border-radius:18px!important;
  box-shadow:-6px 6px 0 var(--final-orange)!important;
}
.sf-related { padding:52px var(--mobile-pad)!important; }
.sf-related>a {
  min-height:58px!important;
  padding:0 15px!important;
  border-radius:12px!important;
}
.sf-related>a:first-of-type { margin-top:24px!important; }
.sf-game-carousel-shell { margin-top:28px!important; }
.sf-game-card {
  flex-basis:min(68vw,250px)!important;
  min-height:292px!important;
  padding:17px!important;
  border-radius:19px!important;
}
.sf-game-card>i {
  width:66px!important;
  height:66px!important;
  border-radius:16px!important;
}
.sf-game-card>strong { font-size:1.2rem!important; }
.sf-note,
.sf-feedback>aside {
  margin-top:24px!important;
  padding:16px!important;
  border-radius:15px!important;
}
.sf-color-section .sf-heading h2 { font-size:clamp(1.95rem,8.8vw,2.5rem)!important; }
.sf-play-mosaic i { margin:24px 0 20px!important; }
.sf-candidate-marquee { margin-top:32px!important; }
.sf-contact,
.sf-contact-band { gap:30px!important; }
.sf-contact-copy h2 { font-size:clamp(1.95rem,8.8vw,2.45rem)!important; }
.sf-form {
  padding:18px 15px!important;
  border-radius:17px!important;
  box-shadow:6px 6px 0 var(--final-cyan)!important;
}
.sf-contact-band { padding:56px var(--mobile-pad)!important; }
.sf-form-light { box-shadow:6px 6px 0 var(--final-orange)!important; }
.sf-guide-steps>article>i { margin:22px 0 18px!important; }
.sf-account { gap:30px!important; }
.sf-account-card {
  padding:18px!important;
  border-radius:18px!important;
  box-shadow:6px 6px 0 var(--final-orange)!important;
}
.sf-account-card i { margin:28px 0 20px!important; }
.sf-help-grid i { margin:34px 0 22px!important; }
.sf-profile-grid article { min-height:220px!important; }
.sf-profile-grid h3 { margin-top:44px!important; }
.sf-rights { gap:22px!important; }
.sf-rights h2 {
  font-size:clamp(1.7rem,7.7vw,2.15rem)!important;
  white-space:normal!important;
}
.sf-rights>p {
  padding:17px!important;
  border-radius:0 15px 15px 0!important;
}

/* Account deletion. */
.sf-delete-console {
  margin-top:30px!important;
  padding:15px 14px!important;
}
.sf-delete-console>strong { font-size:1rem!important; }
.sf-delete-before {
  padding:56px var(--mobile-pad)!important;
  gap:28px!important;
}
.sf-delete-before h2 { font-size:clamp(1.95rem,8.8vw,2.5rem)!important; }
.sf-delete-checks article {
  min-height:145px!important;
  padding:18px!important;
  border-radius:17px!important;
}
.sf-delete-support { padding:50px var(--mobile-pad)!important; }
.sf-delete-support h2 { font-size:clamp(1.85rem,8.2vw,2.35rem)!important; }

/* Legal pages use the whole viewport and a compact reading scale. */
.legal-page { padding:0 0 50px!important; }
.legal-page>.wrap { width:100%!important; }
.legal-sheet {
  width:100%!important;
  padding:34px var(--mobile-pad) 48px!important;
  border-radius:0!important;
}
.legal-sheet h1 { font-size:clamp(1.85rem,8.2vw,2.35rem)!important; }
.legal-sheet h2 {
  margin-top:30px!important;
  font-size:1.12rem!important;
  line-height:1.42!important;
}
.legal-sheet h3 {
  margin-top:21px!important;
  font-size:.96rem!important;
}
.legal-sheet p,
.legal-sheet li {
  font-size:.83rem!important;
  line-height:1.72!important;
}
.legal-intro .breadcrumb {
  margin-bottom:20px!important;
  font-size:.7rem!important;
}
.legal-intro .eyebrow { font-size:.67rem!important; }
.legal-intro>p:last-child { font-size:.84rem!important; }
.legal-version {
  margin-top:26px!important;
  padding:13px!important;
  align-items:flex-start!important;
  flex-direction:column!important;
  gap:6px!important;
}
.legal-version strong { font-size:.68rem!important; }
.legal-version span { font-size:.76rem!important; }
.legal-toc {
  margin-top:22px!important;
  padding:16px 13px!important;
}
.legal-toc>div { grid-template-columns:1fr!important; }
.legal-toc>p {
  margin-bottom:12px!important;
  font-size:.65rem!important;
}
.legal-toc a {
  padding:7px 0!important;
  font-size:.78rem!important;
}
.legal-toc a span { font-size:.62rem!important; }
.legal-document { padding-top:26px!important; }
.legal-table-wrap {
  margin-block:18px!important;
  margin-inline:-4px!important;
}
.legal-table-wrap table { font-size:.76rem!important; }
.legal-table-wrap th,
.legal-table-wrap td { padding:9px 10px!important; }
.legal-related {
  margin-top:42px!important;
  padding-top:22px!important;
}
.legal-related a {
  padding:9px 11px!important;
  font-size:.76rem!important;
}

/* Footer stays readable but no longer dominates a phone screen. */
.site-footer { padding:46px 0 calc(24px + env(safe-area-inset-bottom))!important; }
.site-footer .footer-top { gap:28px!important; }
.site-footer .footer-brand img {
  width:46px!important;
  height:46px!important;
  border-radius:14px!important;
}
.site-footer .footer-brand span { font-size:1.35rem!important; }
.site-footer .footer-tagline {
  margin-top:18px!important;
  font-size:.88rem!important;
}
.site-footer .footer-disclaimer {
  font-size:.69rem!important;
  line-height:1.7!important;
}
.site-footer .footer-links a {
  min-height:44px!important;
  padding:10px 0!important;
  font-size:.72rem!important;
}
.site-footer .footer-bottom {
  margin-top:28px!important;
  padding-top:18px!important;
}