/* v20260830_0400 · phone-first hub layout overrides */
@media (max-width: 900px) {
  html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  body[data-page-kind="hub"] {
    min-width: 0;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
  }
  body[data-page-kind="hub"] .app-shell,
  body[data-page-kind="hub"] #hubScreen {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  /* Header: stack controls instead of squeezing them into one desktop row. */
  body[data-page-kind="hub"] .arcade-topbar {
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      8px
      max(10px, env(safe-area-inset-left)) !important;
  }
  body[data-page-kind="hub"] .arcade-brand-mini {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }
  body[data-page-kind="hub"] .arcade-top-actions-compact {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;
    align-items: stretch !important;
  }
  body[data-page-kind="hub"] .arcade-top-actions-compact > *,
  body[data-page-kind="hub"] .recent-game-quick,
  body[data-page-kind="hub"] .player-profile-pill,
  body[data-page-kind="hub"] .attendance-pill,
  body[data-page-kind="hub"] .arcade-floating-pill,
  body[data-page-kind="hub"] .theme-switch {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    box-sizing: border-box;
  }
  body[data-page-kind="hub"] .recent-game-quick,
  body[data-page-kind="hub"] .player-profile-pill,
  body[data-page-kind="hub"] .attendance-pill,
  body[data-page-kind="hub"] .arcade-floating-pill {
    justify-content: center !important;
    padding: 8px 9px !important;
    font-size: 12px !important;
    overflow: hidden;
  }
  body[data-page-kind="hub"] .recent-game-quick b,
  body[data-page-kind="hub"] .player-profile-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-page-kind="hub"] .theme-switch {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 5px 7px !important;
  }
  body[data-page-kind="hub"] .theme-switch select {
    min-width: 0 !important;
    max-width: 100%;
    height: 34px !important;
    font-size: 16px !important;
  }

  /* Hero */
  body[data-page-kind="hub"] .arcade-hero-card {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 8px 10px 10px !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  body[data-page-kind="hub"] .lobby-stage {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    grid-template-columns: clamp(82px, 25vw, 116px) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 14px 12px 16px !important;
  }
  body[data-page-kind="hub"] .lobby-mascot {
    width: 100% !important;
    max-width: 116px !important;
    height: auto !important;
    align-self: end;
  }
  body[data-page-kind="hub"] .lobby-copy {
    min-width: 0 !important;
    padding: 0 !important;
  }
  body[data-page-kind="hub"] .lobby-kicker {
    font-size: 10px !important;
    letter-spacing: .08em !important;
    white-space: normal !important;
  }
  body[data-page-kind="hub"] .lobby-title {
    font-size: clamp(22px, 7vw, 33px) !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere;
  }
  body[data-page-kind="hub"] .lobby-stage .arcade-sub {
    max-width: 100% !important;
    margin-top: 7px !important;
    font-size: 11px !important;
    line-height: 1.42 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  /* AD TV / app card */
  body[data-page-kind="hub"] .random-recommend-section {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 10px !important;
    padding: 0 !important;
  }
  body[data-page-kind="hub"] .random-recommend-head {
    gap: 8px !important;
    align-items: center !important;
  }
  body[data-page-kind="hub"] .random-recommend-head h2 { font-size: 22px !important; }
  body[data-page-kind="hub"] .recommend-controls { gap: 4px !important; }
  body[data-page-kind="hub"] .recommend-controls button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  body[data-page-kind="hub"] .recommend-viewport,
  body[data-page-kind="hub"] .random-recommend-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body[data-page-kind="hub"] .recommend-app-ad {
    width: calc(100% - 20px);
    margin: 10px !important;
    padding: 14px 12px !important;
    box-sizing: border-box;
  }
  body[data-page-kind="hub"] .recommend-app-ad a {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Game category tabs */
  body[data-page-kind="hub"] .home-game-tabs {
    width: calc(100% - 20px) !important;
    margin: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body[data-page-kind="hub"] .home-game-tab {
    min-width: 0 !important;
    min-height: 70px !important;
    height: auto !important;
    padding: 10px !important;
    gap: 7px !important;
    box-sizing: border-box;
  }
  body[data-page-kind="hub"] .home-game-tab .tab-copy {
    min-width: 0;
  }
  body[data-page-kind="hub"] .home-game-tab .tab-copy strong {
    font-size: 14px !important;
    white-space: normal !important;
    word-break: keep-all;
  }
  body[data-page-kind="hub"] .home-game-tab .tab-copy small {
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  body[data-page-kind="hub"] .home-game-tab .tab-state {
    flex: 0 0 auto;
  }

  /* Library: comfortable 2-column cards on common phones. */
  body[data-page-kind="hub"] .home-section,
  body[data-page-kind="hub"] .game-tab-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body[data-page-kind="hub"] .home-game-grid,
  body[data-page-kind="hub"] #hubScreen .home-game-grid {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  body[data-page-kind="hub"] .game-tile {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
    border-radius: 16px !important;
    box-sizing: border-box;
    overflow: hidden !important;
  }
  body[data-page-kind="hub"] .game-tile .tile-visual {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }
  body[data-page-kind="hub"] .game-tile .tile-photo,
  body[data-page-kind="hub"] .game-tile .game-art {
    max-width: 100% !important;
  }
  body[data-page-kind="hub"] .game-tile .tile-copy {
    min-width: 0 !important;
    gap: 3px !important;
    padding-top: 7px !important;
  }
  body[data-page-kind="hub"] .game-tile .tile-copy strong {
    min-width: 0;
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: -.03em !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  body[data-page-kind="hub"] .game-tile .tile-copy small {
    min-width: 0;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  body[data-page-kind="hub"] .v22-game-badge,
  body[data-page-kind="hub"] .v23-promo-sticker {
    transform: scale(.86);
    transform-origin: top right;
  }

  /* Dialog and bottom content must stay inside safe areas. */
  body[data-page-kind="hub"] #appExitModal {
    padding:
      max(14px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left)) !important;
    box-sizing: border-box;
  }
  body[data-page-kind="hub"] #appExitModal .app-exit-card {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    box-sizing: border-box;
  }
  body[data-page-kind="hub"] #appExitModal button { min-height: 48px !important; font-size: 16px; }
  body[data-page-kind="hub"] .site-version-footer {
    max-width: calc(100% - 20px);
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  body[data-page-kind="hub"] .arcade-top-actions-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-page-kind="hub"] .lobby-stage {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    padding: 12px 10px 14px !important;
  }
  body[data-page-kind="hub"] .lobby-title { font-size: clamp(20px, 7.2vw, 29px) !important; }
  body[data-page-kind="hub"] .lobby-stage .arcade-sub {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  body[data-page-kind="hub"] .home-game-tab {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 64px !important;
    padding: 8px !important;
  }
  body[data-page-kind="hub"] .home-game-tab .tab-copy small { display: none !important; }
  body[data-page-kind="hub"] .game-tile { padding: 7px !important; }
  body[data-page-kind="hub"] .game-tile .tile-copy strong { font-size: 13.5px !important; }
  body[data-page-kind="hub"] .game-tile .tile-copy small { font-size: 10px !important; }
}

@media (max-width: 350px) {
  body[data-page-kind="hub"] .home-game-grid,
  body[data-page-kind="hub"] #hubScreen .home-game-grid {
    grid-template-columns: 1fr !important;
  }
  body[data-page-kind="hub"] .game-tile .tile-copy strong { font-size: 15px !important; }
  body[data-page-kind="hub"] .game-tile .tile-copy small { font-size: 11px !important; }
}


/* v20260830_0400 · mobile AD TV: keep title + arrows only, swipe first */
@media (max-width: 820px){
  body[data-page-kind="hub"] .random-recommend-head.adtv-arrow-head{
    min-height:44px!important;
    margin:0 0 8px!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  body[data-page-kind="hub"] .adtv-arrow-head .adtv-heading-copy{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  body[data-page-kind="hub"] .adtv-arrow-head .recommend-controls{
    width:auto!important;
    flex:0 0 auto!important;
    gap:12px!important;
  }
  body[data-page-kind="hub"] .adtv-arrow-head .recommend-controls>button{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    font-size:29px!important;
  }
  body[data-page-kind="hub"] .recommend-viewport{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
}

/* v20260830_0705 · mobile hub native vertical scrolling + Android bottom safe space */
@media (max-width:900px){
  html{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
  }
  body[data-page-kind="hub"]{
    height:auto!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:max(96px,calc(env(safe-area-inset-bottom,0px) + 76px))!important;
  }
  body[data-page-kind="hub"] .app-shell,
  body[data-page-kind="hub"] #hubScreen{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body[data-page-kind="hub"] #hubScreen{
    display:block!important;
  }
  body[data-page-kind="hub"] #hubScreen > *{
    max-width:100%!important;
  }
  body[data-page-kind="hub"] .site-version-footer{
    margin-bottom:max(20px,env(safe-area-inset-bottom,0px))!important;
  }
}


/* Dedicated PET tab mobile · v20260831_1640 */
@media(max-width:700px){
  body[data-page-kind="hub"] .home-game-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}