html.compat-no-dvh.is-mobile-runtime {
  --compat-dvh-fallback-height: var(--mobile-dynamic-viewport-height, 100dvh);
  --app-viewport-height: var(--compat-dvh-fallback-height) !important;
  --mobile-viewport-height: var(--app-viewport-height) !important;
  --device-height: var(--app-viewport-height) !important;
  --mockup-stage-height: var(--app-viewport-height) !important;
  --mockup-screen-height: var(--app-viewport-height) !important;
}

html.compat-browser-ui-sensitive.is-mobile-runtime,
html.compat-browser-ui-sensitive.is-mobile-runtime body,
html.compat-browser-ui-sensitive.is-mobile-runtime #app,
html.compat-browser-ui-sensitive.is-mobile-runtime .mockup-shell,
html.compat-browser-ui-sensitive.is-mobile-runtime .phone-stage-shell,
html.compat-browser-ui-sensitive.is-mobile-runtime .phone-stage-frame,
html.compat-browser-ui-sensitive.is-mobile-runtime .phone-stage {
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  overflow-x: hidden !important;
}

html.compat-browser-ui-sensitive.is-mobile-runtime .phone-stage > .screen,
html.compat-browser-ui-sensitive.is-mobile-runtime .phone-stage-frame > .phone-stage > .screen,
html.compat-browser-ui-sensitive.is-mobile-runtime .phone-stage-overlay {
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
}

html.is-mobile-runtime .phone-stage > .screen.screen--scroll,
html.is-mobile-runtime .phone-stage-frame > .phone-stage > .screen.screen--scroll,
html.is-mobile-runtime .screen.screen--scroll,
html.compat-browser-ui-sensitive.is-mobile-runtime .phone-stage > .screen.screen--scroll,
html.compat-browser-ui-sensitive.is-mobile-runtime .phone-stage-frame > .phone-stage > .screen.screen--scroll {
  height: auto !important;
  min-height: var(--mockup-screen-height, var(--mobile-viewport-height, 100dvh)) !important;
  max-height: none !important;
}

html.is-mobile-runtime .screen.screen--scroll.intro-screen,
html.compat-browser-ui-sensitive.is-mobile-runtime .screen.screen--scroll.intro-screen {
  overflow: visible !important;
}

html.is-mobile-runtime .screen.screen--scroll.intro-screen .intro-screen__background,
html.compat-browser-ui-sensitive.is-mobile-runtime .screen.screen--scroll.intro-screen .intro-screen__background {
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
}

html.is-mobile-runtime .screen.screen--scroll.intro-screen .intro-screen__background img,
html.compat-browser-ui-sensitive.is-mobile-runtime .screen.screen--scroll.intro-screen .intro-screen__background img {
  min-height: 100% !important;
  max-height: none !important;
}

html.is-mobile-runtime .screen.screen--scroll.intro-screen.intro-screen--promo .intro-screen__promo-upper .intro-screen__background,
html.compat-browser-ui-sensitive.is-mobile-runtime .screen.screen--scroll.intro-screen.intro-screen--promo .intro-screen__promo-upper .intro-screen__background {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin-bottom: 0 !important;
}

html.is-mobile-runtime .screen.screen--scroll.intro-screen.intro-screen--promo .intro-screen__promo-upper .intro-screen__background img,
html.compat-browser-ui-sensitive.is-mobile-runtime .screen.screen--scroll.intro-screen.intro-screen--promo .intro-screen__promo-upper .intro-screen__background img {
  min-height: 0 !important;
  max-height: none !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-upper .intro-screen__background img {
  top: 0 !important;
  left: 50% !important;
  width: var(--promo-bg-layout-width, 100%) !important;
  min-width: var(--promo-bg-layout-width, 100%) !important;
  height: var(--promo-bg-render-height, auto) !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  opacity: 0 !important;
  -webkit-transform: translate3d(-50%, calc(var(--promo-bg-scroll-y, 0px) - var(--promo-bg-y, 0px)), 0) !important;
  transform: translate3d(-50%, calc(var(--promo-bg-scroll-y, 0px) - var(--promo-bg-y, 0px)), 0) !important;
  transform-origin: center top !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

.screen.intro-screen.intro-screen--promo.is-promo-parallax-ready .intro-screen__promo-upper .intro-screen__background img {
  opacity: 1 !important;
}

html.compat-no-css-has .mockup-shell.is-view-register .phone-stage-frame,
html.compat-no-css-has .mockup-shell.is-view-register .phone-stage-shell,
html.compat-no-css-has .mockup-shell.is-view-register .phone-stage,
html.compat-no-css-has .mockup-shell.is-view-mascot-register .phone-stage-frame,
html.compat-no-css-has .mockup-shell.is-view-mascot-register .phone-stage-shell,
html.compat-no-css-has .mockup-shell.is-view-mascot-register .phone-stage,
html.compat-no-css-has .mockup-shell.is-view-auth-member-form .phone-stage-frame,
html.compat-no-css-has .mockup-shell.is-view-auth-member-form .phone-stage-shell,
html.compat-no-css-has .mockup-shell.is-view-auth-member-form .phone-stage,
html.compat-no-css-has .mockup-shell.is-view-landing .phone-stage-frame,
html.compat-no-css-has .mockup-shell.is-view-landing .phone-stage-shell,
html.compat-no-css-has .mockup-shell.is-view-landing .phone-stage {
  height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
}

html.compat-no-css-max.is-mobile-runtime .app-drawer__panel--menu,
html.compat-no-css-max.is-mobile-runtime .app-drawer__panel--mypage,
html.compat-no-css-min.is-mobile-runtime .app-drawer__panel--menu,
html.compat-no-css-min.is-mobile-runtime .app-drawer__panel--mypage {
  height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.compat-no-css-max.is-mobile-runtime .app-drawer__panel--menu > .app-drawer__scroll-area,
html.compat-no-css-max.is-mobile-runtime .app-drawer__panel--mypage > .app-drawer__scroll-area,
html.compat-no-css-min.is-mobile-runtime .app-drawer__panel--menu > .app-drawer__scroll-area,
html.compat-no-css-min.is-mobile-runtime .app-drawer__panel--mypage > .app-drawer__scroll-area {
  height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  min-height: 764px !important;
}

html.compat-no-backdrop-filter .modal-card,
html.compat-no-backdrop-filter .toast,
html.compat-no-backdrop-filter .home-screen__sheet,
html.compat-no-backdrop-filter .ranking-sheet,
html.compat-no-backdrop-filter .debug-switcher,
html.compat-no-backdrop-filter .community-action-sheet {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.compat-no-sticky .faq-category-tabs,
html.compat-no-sticky .point-history-tabs,
html.compat-no-sticky .community-tabs,
html.compat-no-sticky .collection-summary {
  position: relative !important;
  top: auto !important;
}

html.compat-no-clip-path .lineup-slot,
html.compat-no-clip-path .collection-card,
html.compat-no-clip-path .mascot-card,
html.compat-no-clip-path .predict-option {
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

html.compat-no-aspect-ratio .collection-card__media,
html.compat-no-aspect-ratio .lineup-card-option,
html.compat-no-aspect-ratio .mascot-card__media,
html.compat-no-aspect-ratio .best-photo-card__media {
  min-height: 120px !important;
}

html.compat-no-overscroll .phone-stage,
html.compat-no-overscroll .screen--scroll,
html.compat-no-overscroll .app-drawer__panel--menu,
html.compat-no-overscroll .app-drawer__panel--mypage {
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
}

html.compat-no-touch-action .home-flow-nav,
html.compat-no-touch-action .lineup-card-strip,
html.compat-no-touch-action .app-drawer__panel--menu,
html.compat-no-touch-action .app-drawer__panel--mypage {
  touch-action: auto !important;
}

html.compat-old-safari input,
html.compat-old-safari textarea,
html.compat-old-safari select,
html.compat-old-safari button,
html.compat-old-chromium input,
html.compat-old-chromium textarea,
html.compat-old-chromium select,
html.compat-old-chromium button,
html.compat-webview input,
html.compat-webview textarea,
html.compat-webview select,
html.compat-webview button {
  font: inherit !important;
  -webkit-appearance: none;
}

html.compat-old-safari img,
html.compat-old-chromium img,
html.compat-webview img {
  max-width: 100%;
}

html.is-mobile-runtime:not(.is-tablet-runtime) {
  --app-viewport-height: var(--mobile-stage-page-height, var(--mobile-viewport-height, 100dvh)) !important;
  --device-height: var(--app-viewport-height) !important;
  --mockup-stage-height: var(--app-viewport-height) !important;
  --mockup-screen-height: var(--app-viewport-height) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime),
html.is-mobile-runtime:not(.is-tablet-runtime) body {
  height: auto !important;
  min-height: var(--app-viewport-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body {
  position: relative !important;
  inset: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage {
  height: auto !important;
  min-height: var(--app-viewport-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage {
  overflow-y: visible !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage {
  position: relative !important;
  inset: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen {
  height: auto !important;
  min-height: var(--app-viewport-height) !important;
  max-height: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen:not(.screen--scroll) {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing .landing__background {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing .landing__background img {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body {
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body {
  position: relative !important;
  inset: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame > .phone-stage {
  height: auto !important;
  min-height: var(--app-viewport-height) !important;
  max-height: none !important;
  overflow: visible !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame > .phone-stage {
  position: relative !important;
  inset: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen {
  height: auto !important;
  min-height: var(--app-viewport-height) !important;
  max-height: none !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen:not(.screen--scroll) {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing .landing__background {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: none !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing .landing__background img {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
}

/* Team home visual cluster: product and logo rail stay grouped, centered between topbar bottom and the dvh midpoint. */
html.is-view-home:not(.has-drawer-overlay) body #app .screen.home-screen {
  --home-topbar-top: calc(var(--safe-top, 0px) + 32px) !important;
  --home-topbar-height: calc(30px * var(--figma-stage-scale, 1)) !important;
  --home-topbar-bottom: calc(var(--home-topbar-top) + var(--home-topbar-height)) !important;
  --home-visual-region-center: calc((var(--home-topbar-bottom) + (100lvh / 2)) / 2) !important;
  --home-product-top: calc(var(--home-visual-region-center) - (129px * var(--figma-stage-scale, 1))) !important;
  --home-logos-top: calc(var(--home-product-top) + (198px * var(--figma-stage-scale, 1))) !important;
}

html.is-view-home:not(.has-drawer-overlay) body #app .screen.home-screen .home-screen__product-shell {
  top: var(--home-product-top) !important;
}

html.is-view-home:not(.has-drawer-overlay) body #app .screen.home-screen .home-screen__logos {
  top: var(--home-logos-top) !important;
}

html body #app .screen.collection-screen:not(.collection-screen--mascot) .collection-screen__team-badge,
html body #app .screen.collection-screen:not(.collection-screen--mascot) .collection-screen__summary-card {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

html body #app .screen.collection-screen:not(.collection-screen--mascot) .collection-screen__summary-card {
  box-sizing: border-box !important;
  width: calc(343px * var(--collection-scale, var(--figma-stage-scale, 1))) !important;
}

html body #app .screen.collection-screen.collection-screen--mascot .collection-screen__team-badge,
html body #app .screen.collection-screen.collection-screen--mascot .collection-screen__mascot-stack {
  left: 50% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
}

html body #app .screen.collection-screen.collection-screen--mascot .collection-screen__summary-card,
html body #app .screen.collection-screen.collection-screen--mascot .collection-screen__mascot-slots,
html body #app .screen.collection-screen.collection-screen--mascot .collection-screen__mascot-feature {
  margin-left: auto !important;
  margin-right: auto !important;
}

html body #app .screen.collection-screen.collection-screen--mascot .collection-screen__summary-card {
  left: auto !important;
  transform: none !important;
}

html body #app .screen.lineup-screen.lineup-screen--entry .lineup-field,
html body #app .screen.lineup-screen.lineup-screen--drag .lineup-field,
html body #app .screen.lineup-screen.lineup-screen--confirm .lineup-field,
html body #app .screen.lineup-screen.lineup-screen--success .lineup-field {
  left: 50% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
}

/* 2026-05-16: mobile scroll contract.
   Use the document as the scroll container so Safari and mobile browser chrome can collapse normally. */
html.is-mobile-runtime:not(.is-tablet-runtime) {
  --mobile-document-scroll-height: var(--app-viewport-height, var(--mobile-stage-page-height, var(--mobile-viewport-height, 100dvh)));
}

@supports (height: 100lvh) {
  html.is-mobile-runtime:not(.is-tablet-runtime) {
    --mobile-document-scroll-height: max(
      var(--app-viewport-height, var(--mobile-stage-page-height, var(--mobile-viewport-height, 100dvh))),
      calc(100lvh + 1px)
    );
  }
}

html.is-mobile-runtime:not(.is-tablet-runtime),
html.is-mobile-runtime:not(.is-tablet-runtime) body,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home body,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-register,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-register body,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-mascot-register,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-mascot-register body,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-auth-member-form,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-auth-member-form body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body {
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body {
  position: relative !important;
  inset: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell.is-view-home,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell.is-view-register,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell.is-view-mascot-register,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell.is-view-auth-member-form,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage {
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .screen {
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen:not(.screen--scroll) {
  height: var(--mobile-document-scroll-height) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--scroll {
  height: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .register-screen,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .register-screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .member-form-screen,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .member-form-screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .community-screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .community-me__body,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .package-screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .predict-screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .lineup-screen__body {
  max-height: none !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .screen.screen--landing,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .screen.screen--landing .landing__background {
  height: var(--mobile-document-scroll-height) !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .screen.screen--landing .landing__background img {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .phone-stage {
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow-y: visible !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-overlay.app-drawer {
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) .app-drawer__panel--menu,
html.is-mobile-runtime:not(.is-tablet-runtime) .app-drawer__panel--mypage {
  height: auto !important;
  min-height: max(var(--mobile-document-scroll-height), 764px) !important;
  max-height: none !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) .app-drawer__panel--menu > .app-drawer__scroll-area,
html.is-mobile-runtime:not(.is-tablet-runtime) .app-drawer__panel--mypage > .app-drawer__scroll-area,
html.is-mobile-runtime:not(.is-tablet-runtime) .app-drawer__panel--menu .app-drawer__body,
html.is-mobile-runtime:not(.is-tablet-runtime) .app-drawer__panel--mypage .app-drawer__body {
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-document-scroll {
  --drawer-document-scroll-buffer: max(180px, calc(var(--browser-ui-bottom-inset, 0px) + 132px));
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body {
  height: auto !important;
  min-height: calc(var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) + var(--drawer-document-scroll-buffer, 180px)) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body::after {
  content: "" !important;
  display: block !important;
  width: 1px !important;
  height: var(--drawer-document-scroll-buffer, 180px) !important;
  pointer-events: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage-frame {
  position: relative !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: auto !important;
  min-height: max(var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)), 764px) !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage > .screen {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
  max-height: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-overlay.app-drawer {
  position: relative !important;
  inset: auto !important;
  z-index: 10 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: auto !important;
  min-height: max(var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)), 764px) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-overlay.app-drawer::after {
  content: none !important;
  display: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-overlay.app-drawer > .app-overlay__backdrop {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage {
  position: relative !important;
  top: 0 !important;
  bottom: auto !important;
  height: auto !important;
  min-height: 764px !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu > .app-drawer__scroll-area,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage > .app-drawer__scroll-area {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 764px !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu .drawer-close,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .drawer-close {
  position: relative !important;
  top: var(--drawer-close-top, calc(var(--safe-top, 0px) + 32px)) !important;
  right: 16px !important;
  left: auto !important;
  align-self: flex-end !important;
  margin: var(--drawer-close-top, calc(var(--safe-top, 0px) + 32px)) 16px calc(-1 * (var(--drawer-close-top, calc(var(--safe-top, 0px) + 32px)) + 24px)) auto !important;
  transform: translateY(var(--drawer-document-scroll-top, 0px)) !important;
  z-index: 7 !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu .drawer-hero,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .drawer-hero {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  margin: var(--drawer-hero-top, calc(var(--safe-top, 0px) + 102px)) auto 0 !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu .app-drawer__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__body {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  width: var(--drawer-content-width, 343px) !important;
  max-width: var(--drawer-content-width, 343px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 31px auto 0 !important;
  transform: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu .app-drawer__footer,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__footer,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__footer--logout {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  width: 285px !important;
  margin: auto auto 0 !important;
  padding: 20px 0 var(--drawer-footer-bottom, 48px) !important;
  transform: none !important;
}

/* Drawer overlays must be isolated from the page scroll state. The open page
   can be long, short, or already scrolled; drawer height and scroll behavior
   remain tied only to the current viewport. */
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay {
  --drawer-viewport-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh));
  --drawer-layout-min-height: 764px;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body {
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body::after {
  content: none !important;
  display: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .phone-stage-frame {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .phone-stage {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  touch-action: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .phone-stage > .screen {
  position: relative !important;
  width: 100% !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-overlay.app-drawer {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: 10 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: auto !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-overlay.app-drawer > .app-overlay__backdrop {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--menu,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--mypage {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  height: var(--drawer-viewport-height) !important;
  min-height: 0 !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--menu > .app-drawer__scroll-area,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--mypage > .app-drawer__scroll-area {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: max(var(--drawer-viewport-height), var(--drawer-layout-min-height)) !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--menu .drawer-close,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .drawer-close {
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--menu .app-drawer__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__body {
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--menu .app-drawer__footer,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__footer,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__footer--logout {
  position: relative !important;
  margin-top: auto !important;
  transform: none !important;
}

.app-drawer.is-initial-restore:not(.is-closing) .app-overlay__backdrop,
.app-drawer.is-initial-restore:not(.is-closing) .app-drawer__panel {
  animation: none !important;
}

.app-drawer--left.is-initial-restore:not(.is-closing) .app-drawer__panel,
.app-drawer--right.is-initial-restore:not(.is-closing) .app-drawer__panel {
  opacity: 1 !important;
  transform: none !important;
}

/* Final drawer contract: the visible app behind the drawer is fixed, while the
   drawer page itself owns the document scroll range so mobile browser chrome
   can collapse on any vertical swipe. */
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll {
  --drawer-viewport-height: var(--mobile-dynamic-viewport-height, var(--browser-ui-content-height, 100dvh));
  --drawer-layout-height: max(calc(764px * var(--mobile-stage-scale, 1)), 764px);
  --drawer-browser-scroll-buffer: max(180px, calc(var(--browser-ui-bottom-inset, 0px) + 132px));
  --drawer-page-height: max(var(--drawer-layout-height), calc(var(--drawer-viewport-height) + var(--drawer-browser-scroll-buffer)));
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body {
  height: auto !important;
  min-height: var(--drawer-page-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body {
  position: relative !important;
  inset: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body::after {
  content: none !important;
  display: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage-frame {
  position: relative !important;
  inset: auto !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: auto !important;
  min-height: var(--drawer-page-height) !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage > .screen {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-overlay.app-drawer {
  position: relative !important;
  inset: auto !important;
  z-index: 10 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: auto !important;
  min-height: var(--drawer-page-height) !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-overlay.app-drawer > .app-overlay__backdrop {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  height: auto !important;
  min-height: var(--drawer-layout-height) !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu > .app-drawer__scroll-area,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage > .app-drawer__scroll-area {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--drawer-layout-height) !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu .drawer-close,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .drawer-close {
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu .app-drawer__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__body {
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu .app-drawer__footer,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__footer,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__footer--logout {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
  align-items: center !important;
  width: min(285px, calc(100% - 48px)) !important;
  margin: auto auto 0 !important;
  padding: 20px 0 var(--drawer-footer-bottom, 48px) !important;
  transform: none !important;
  text-align: center !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay .app-drawer__footer-actions {
  display: grid !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay .app-drawer__footer-actions .cta,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay .app-drawer__footer-actions .drawer-logout {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Drawer isolation override: the page under the drawer is frozen, the drawer
   itself stays viewport-fixed, and only the drawer content scrolls. A tiny
   document scroll range remains so mobile browser chrome can react to swipes. */
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll {
  --drawer-viewport-height: var(--mobile-dynamic-viewport-height, var(--browser-ui-content-height, 100dvh));
  --drawer-layout-height: max(calc(764px * var(--mobile-stage-scale, 1)), 764px);
  --drawer-browser-scroll-buffer: max(220px, calc(var(--browser-ui-bottom-inset, 0px) + 160px));
  --drawer-page-height: calc(var(--drawer-viewport-height) + var(--drawer-browser-scroll-buffer));
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body {
  height: auto !important;
  min-height: var(--drawer-page-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body::after {
  content: "" !important;
  display: block !important;
  width: 1px !important;
  height: var(--drawer-browser-scroll-buffer) !important;
  pointer-events: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage-frame {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .phone-stage > .screen {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-overlay.app-drawer {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: 10 !important;
  display: block !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-overlay.app-drawer > .app-overlay__backdrop {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: var(--drawer-viewport-height) !important;
  max-height: var(--drawer-viewport-height) !important;
  pointer-events: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage {
  position: fixed !important;
  top: 0 !important;
  bottom: auto !important;
  z-index: 1 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--drawer-viewport-height) !important;
  min-height: 0 !important;
  max-height: var(--drawer-viewport-height) !important;
  overflow: hidden !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu {
  left: 0 !important;
  right: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage {
  right: 0 !important;
  left: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu > .app-drawer__scroll-area,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage > .app-drawer__scroll-area {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu .app-drawer__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__body {
  flex: 1 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--menu .app-drawer__footer,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__footer,
html.is-mobile-runtime:not(.is-tablet-runtime).has-drawer-overlay.has-drawer-document-scroll body #app .mockup-shell.has-overlay .app-drawer__panel--mypage .app-drawer__footer--logout {
  position: relative !important;
  flex: 0 0 auto !important;
  width: min(285px, calc(100% - 48px)) !important;
  margin: auto auto 0 !important;
  transform: none !important;
  text-align: center !important;
}

/* Lift higher-specificity scroll locks from older mobile/register rules. */
html.is-mobile-runtime:not(.is-tablet-runtime):has(#app .screen.register-screen),
html.is-mobile-runtime:not(.is-tablet-runtime):has(#app .screen.member-form-screen),
html.is-mobile-runtime:not(.is-tablet-runtime):has(#app .screen.predict-screen),
html.is-mobile-runtime:not(.is-tablet-runtime):has(#app .screen.lineup-screen),
html.is-mobile-runtime:not(.is-tablet-runtime):has(#app .screen.community-screen),
html.is-mobile-runtime:not(.is-tablet-runtime):has(#app .screen.community-me),
html.is-mobile-runtime:not(.is-tablet-runtime) body:has(#app .screen.register-screen),
html.is-mobile-runtime:not(.is-tablet-runtime) body:has(#app .screen.member-form-screen),
html.is-mobile-runtime:not(.is-tablet-runtime) body:has(#app .screen.predict-screen),
html.is-mobile-runtime:not(.is-tablet-runtime) body:has(#app .screen.lineup-screen),
html.is-mobile-runtime:not(.is-tablet-runtime) body:has(#app .screen.community-screen),
html.is-mobile-runtime:not(.is-tablet-runtime) body:has(#app .screen.community-me) {
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen:not(.screen--landing),
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen:not(.screen--landing):not(.screen--scroll),
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.predict-screen,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.lineup-screen,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.register-screen,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.member-form-screen,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.community-screen,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.community-me {
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
}

/* Scrollable pages must bubble touch movement to the document, not to the phone-stage. */
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .phone-stage-frame > .phone-stage,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .register-screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .member-form-screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .community-screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .community-me__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .package-screen__body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .predict,
html.is-mobile-runtime:not(.is-tablet-runtime).has-document-scroll-screen body #app .mockup-shell .lineup {
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior-y: auto !important;
}

/* Fixed pages still expose a small document scroll range so mobile browser chrome can collapse. */
html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen,
html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body {
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body {
  position: relative !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body::after {
  content: "" !important;
  display: block !important;
  width: 1px !important;
  height: max(180px, calc(var(--browser-ui-bottom-inset, 0px) + 132px)) !important;
  pointer-events: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--app-viewport-height, var(--mobile-stage-page-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-stage-page-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-stage-page-height, 100dvh)) !important;
  overflow: hidden !important;
  transform: translateZ(0);
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app .mockup-shell .phone-stage-frame > .phone-stage,
html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: var(--app-viewport-height, var(--mobile-stage-page-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-stage-page-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-stage-page-height, 100dvh)) !important;
  overflow: hidden !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app .mockup-shell .phone-stage-frame > .phone-stage {
  -webkit-overflow-scrolling: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app .mockup-shell .screen.screen--landing,
html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app .mockup-shell .screen.screen--landing .landing__background,
html.is-mobile-runtime:not(.is-tablet-runtime).has-fixed-stage-screen body #app .mockup-shell .screen.screen--landing .landing__background img {
  height: var(--app-viewport-height, var(--mobile-stage-page-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-stage-page-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-stage-page-height, 100dvh)) !important;
}

/* Team home screens are visually fixed-layout, but the document must remain
   scrollable so mobile browser chrome can collapse normally. */
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body {
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: var(--mobile-document-scroll-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app {
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--app-viewport-height, var(--mobile-dynamic-viewport-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-dynamic-viewport-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-dynamic-viewport-height, 100dvh)) !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-intro:not(.has-drawer-overlay) body #app {
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-intro:not(.has-drawer-overlay) body #app .mockup-shell.is-view-intro .phone-stage-overlay {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--app-viewport-height, var(--mobile-dynamic-viewport-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-dynamic-viewport-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-dynamic-viewport-height, 100dvh)) !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-nav,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-intro:not(.has-drawer-overlay) body #app .mockup-shell.is-view-intro .phone-stage-overlay > .home-flow-nav {
  height: var(--app-viewport-height, var(--mobile-dynamic-viewport-height, 100dvh)) !important;
  min-height: var(--app-viewport-height, var(--mobile-dynamic-viewport-height, 100dvh)) !important;
  max-height: var(--app-viewport-height, var(--mobile-dynamic-viewport-height, 100dvh)) !important;
}

/* Team home sheet: align the sheet top to the visual speech-rail bottom + 3px. */
html:not(.is-mobile-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay,
html.is-tablet-runtime.is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay {
  --home-fixed-rail-top: calc(50% + (12px * var(--figma-stage-scale, 1)));
  --home-fixed-rail-height: calc(30px * var(--figma-stage-scale, 1));
  --home-fixed-sheet-top: calc(var(--home-fixed-rail-top) + var(--home-fixed-rail-height) + 3px);
}

html:not(.is-mobile-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet,
html.is-tablet-runtime.is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet {
  top: var(--home-fixed-sheet-top) !important;
  bottom: 0 !important;
  height: auto !important;
}

/* Team home: keep the 375x764 stage fixed while only the lower sheet can scroll. */
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) {
  --home-fixed-stage-scale: var(--mobile-stage-scale, 1);
  --home-fixed-layout-height: calc(764px * var(--home-fixed-stage-scale));
  --home-fixed-visible-height: var(--mobile-dynamic-viewport-height, var(--browser-ui-content-height, 100dvh));
  --home-fixed-rail-top: calc((var(--home-flow-fixed-ui-height, var(--home-fixed-visible-height)) / 2) + (12px * var(--figma-stage-scale, 1)));
  --home-fixed-rail-height: calc(30px * var(--figma-stage-scale, 1));
  --home-fixed-sheet-top: calc(var(--home-fixed-rail-top) + var(--home-fixed-rail-height) + 3px);
  --home-fixed-sheet-height: calc(330px * var(--home-fixed-stage-scale));
  --home-fixed-sheet-visible-height: min(
    var(--home-fixed-sheet-height),
    max(160px, calc(var(--home-fixed-visible-height) - var(--home-fixed-sheet-top)))
  );
  --home-browser-scroll-affordance: max(
    var(--home-fixed-layout-height),
    calc(var(--home-fixed-visible-height) + max(var(--browser-ui-bottom-inset, 0px), 80px))
  );
}

@media (min-height: 765px) {
  html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) {
    --home-fixed-visible-height: var(
      --home-flow-fixed-ui-height,
      var(--mobile-dynamic-viewport-height, var(--browser-ui-content-height, 100dvh))
    );
    --home-fixed-layout-height: max(
      calc(764px * var(--home-fixed-stage-scale)),
      var(--home-fixed-visible-height)
    );
    --home-fixed-sheet-visible-height: max(
      160px,
      calc(var(--home-fixed-layout-height) - var(--home-fixed-sheet-top))
    );
    --home-browser-scroll-affordance: var(--home-fixed-layout-height);
  }
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body {
  height: auto !important;
  min-height: var(--home-browser-scroll-affordance) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body {
  position: relative !important;
  inset: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-frame {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--home-fixed-visible-height) !important;
  min-height: var(--home-fixed-visible-height) !important;
  max-height: var(--home-fixed-visible-height) !important;
  overflow: hidden !important;
  transform: none !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--home-fixed-layout-height) !important;
  min-height: var(--home-fixed-layout-height) !important;
  max-height: var(--home-fixed-layout-height) !important;
  overflow: hidden !important;
  transform: none !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage > .screen.home-screen {
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--home-fixed-layout-height) !important;
  min-height: var(--home-fixed-layout-height) !important;
  max-height: var(--home-fixed-layout-height) !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--home-fixed-visible-height) !important;
  min-height: var(--home-fixed-visible-height) !important;
  max-height: var(--home-fixed-visible-height) !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: none !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-nav,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-pager,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .stage-context-rail {
  position: absolute !important;
  margin-bottom: 0 !important;
  pointer-events: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-nav {
  inset: 0 auto auto 0 !important;
  height: var(--home-fixed-visible-height) !important;
  min-height: var(--home-fixed-visible-height) !important;
  max-height: var(--home-fixed-visible-height) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-nav .home-flow-nav__button,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .stage-context-rail .home-screen__promo-rail {
  pointer-events: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-pager {
  bottom: 30px !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet {
  position: absolute !important;
  top: var(--home-fixed-sheet-top) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  display: block !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--home-fixed-sheet-visible-height) !important;
  min-height: 0 !important;
  max-height: var(--home-fixed-sheet-visible-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .home-screen__sheet-scroll {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 48px 0 48px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .home-screen__metrics,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .home-screen__actions {
  position: static !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .home-screen__metrics {
  width: min(328px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-screen__sheet .home-screen__actions {
  width: min(285px, calc(100% - 48px)) !important;
  margin: 16px auto 0 !important;
}

/* Ranking pages are fixed-height screens. They keep the global mobile gesture
   contract, but must not expose extra document or sheet scroll space. */
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) {
  --ranking-stage-viewport-height: var(
    --mobile-dynamic-viewport-height,
    var(--browser-ui-content-height, 100dvh)
  ) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body {
  height: var(--ranking-stage-viewport-height) !important;
  min-height: var(--ranking-stage-viewport-height) !important;
  max-height: var(--ranking-stage-viewport-height) !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body {
  position: relative !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 0 !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--ranking-stage-viewport-height) !important;
  min-height: var(--ranking-stage-viewport-height) !important;
  max-height: var(--ranking-stage-viewport-height) !important;
  overflow: hidden !important;
  transform: none !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame > .phone-stage,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-overlay,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.ranking {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: var(--ranking-stage-viewport-height) !important;
  min-height: var(--ranking-stage-viewport-height) !important;
  max-height: var(--ranking-stage-viewport-height) !important;
  overflow: hidden !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-overlay {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .phone-stage-overlay > .home-flow-nav,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .phone-stage > .home-flow-nav,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .phone-stage-frame > .home-flow-nav {
  inset: 0 auto auto 0 !important;
  height: var(--ranking-stage-viewport-height) !important;
  min-height: var(--ranking-stage-viewport-height) !important;
  max-height: var(--ranking-stage-viewport-height) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.ranking {
  overflow: hidden !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.has-drawer-overlay) .screen.ranking .ranking-screen__sheet.is-expanded .ranking-screen__viewport {
  overflow: hidden !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: auto !important;
  touch-action: pan-y !important;
}

/* Predict is a fixed game screen: only the match list can scroll internally,
   while the CTA and lower white fade stay pinned to the viewport bottom. */
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) {
  --predict-stage-viewport-height: var(
    --mobile-dynamic-viewport-height,
    var(--browser-ui-content-height, 100dvh)
  ) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body {
  height: var(--predict-stage-viewport-height) !important;
  min-height: var(--predict-stage-viewport-height) !important;
  max-height: var(--predict-stage-viewport-height) !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body {
  position: relative !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body::after {
  content: none !important;
  display: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--predict-stage-viewport-height) !important;
  min-height: var(--predict-stage-viewport-height) !important;
  max-height: var(--predict-stage-viewport-height) !important;
  overflow: hidden !important;
  transform: none !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame > .phone-stage,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.predict-screen {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: var(--predict-stage-viewport-height) !important;
  min-height: var(--predict-stage-viewport-height) !important;
  max-height: var(--predict-stage-viewport-height) !important;
  overflow: hidden !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .screen.predict-screen .predict-board.predict-board--latest .predict-board__scroll {
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .screen.predict-screen .predict-board.predict-board--latest .predict-board__list.has-expanded-section {
  padding-bottom: calc((252px * var(--figma-stage-scale, 1)) + max(var(--browser-ui-bottom-inset, 0px), 20px)) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-lineup:not(.has-drawer-overlay) body #app .mockup-shell .screen.lineup-screen .predict-board.predict-board--latest .predict-board__list.has-expanded-section {
  padding-bottom: calc((204px * var(--figma-stage-scale, 1)) + max(var(--browser-ui-bottom-inset, 0px), 20px)) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .screen.predict-screen .predict-action {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: calc(285px * var(--figma-stage-scale, 1)) !important;
  height: calc(82px * var(--figma-stage-scale, 1)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 12 !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .screen.predict-screen::after {
  position: fixed !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  height: calc(92px * var(--figma-stage-scale, 1)) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* Home-flow fixed controls use the large viewport, while page content can keep
   its dynamic viewport sizing for browser chrome behavior. */
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-intro:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.is-ranking-history):not(.has-drawer-overlay) {
  --home-flow-fixed-ui-height: var(
    --browser-ui-layout-height,
    var(--app-viewport-height, var(--mobile-viewport-height, 100dvh))
  );
}

@supports (height: 100lvh) {
  html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay),
  html.is-mobile-runtime:not(.is-tablet-runtime).is-view-intro:not(.has-drawer-overlay),
  html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.is-ranking-history):not(.has-drawer-overlay) {
    --home-flow-fixed-ui-height: 100lvh;
  }
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-nav,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-intro:not(.has-drawer-overlay) body #app .mockup-shell.is-view-intro .phone-stage-overlay > .home-flow-nav,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.is-ranking-history):not(.has-drawer-overlay) body #app .mockup-shell.is-view-ranking:not(.is-ranking-history) .phone-stage-overlay > .home-flow-nav {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--home-flow-fixed-ui-height) !important;
  min-height: var(--home-flow-fixed-ui-height) !important;
  max-height: var(--home-flow-fixed-ui-height) !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .stage-context-rail,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-intro:not(.has-drawer-overlay) body #app .mockup-shell.is-view-intro .phone-stage-overlay > .stage-context-rail,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.is-ranking-history):not(.has-drawer-overlay) body #app .mockup-shell.is-view-ranking:not(.is-ranking-history) .phone-stage-overlay > .stage-context-rail {
  position: fixed !important;
  top: var(--home-fixed-rail-top, calc((var(--home-flow-fixed-ui-height) / 2) + (12px * var(--figma-stage-scale, 1)))) !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-home:not(.has-drawer-overlay) body #app .mockup-shell.is-view-home .phone-stage-overlay > .home-flow-pager,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-intro:not(.has-drawer-overlay) body #app .mockup-shell.is-view-intro .phone-stage-overlay > .home-flow-pager,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-ranking:not(.is-ranking-history):not(.has-drawer-overlay) body #app .mockup-shell.is-view-ranking:not(.is-ranking-history) .phone-stage-overlay > .home-flow-pager {
  position: fixed !important;
  top: calc(var(--home-flow-fixed-ui-height) - 38px) !important;
  bottom: auto !important;
  left: 50% !important;
  margin-bottom: 0 !important;
  transform: translateX(-50%) !important;
}

html.is-mobile-runtime body #app .phone-stage-overlay > .stage-context-rail .home-screen__promo-bubble,
html.is-mobile-runtime body #app .phone-stage > .stage-context-rail .home-screen__promo-bubble,
html.is-mobile-runtime body #app .phone-stage-frame > .stage-context-rail .home-screen__promo-bubble {
  overflow: visible !important;
}

html.is-mobile-runtime body #app .phone-stage-overlay > .stage-context-rail .home-screen__promo-bubble-tail,
html.is-mobile-runtime body #app .phone-stage > .stage-context-rail .home-screen__promo-bubble-tail,
html.is-mobile-runtime body #app .phone-stage-frame > .stage-context-rail .home-screen__promo-bubble-tail {
  top: calc(-7px * var(--figma-stage-scale, 1)) !important;
  right: calc(8px * var(--figma-stage-scale, 1)) !important;
  left: auto !important;
  width: 0 !important;
  height: 0 !important;
  border-left: calc(4px * var(--figma-stage-scale, 1)) solid transparent !important;
  border-right: calc(4px * var(--figma-stage-scale, 1)) solid transparent !important;
  border-bottom: calc(8px * var(--figma-stage-scale, 1)) solid #2a2a2b !important;
  background: transparent !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
}

html.is-mobile-runtime body #app .phone-stage-overlay > .stage-context-rail.stage-context-rail--left .home-screen__promo-bubble-tail,
html.is-mobile-runtime body #app .phone-stage > .stage-context-rail.stage-context-rail--left .home-screen__promo-bubble-tail,
html.is-mobile-runtime body #app .phone-stage-frame > .stage-context-rail.stage-context-rail--left .home-screen__promo-bubble-tail {
  right: auto !important;
  left: calc(8px * var(--figma-stage-scale, 1)) !important;
}

html.is-mobile-runtime body #app .phone-stage-overlay > .home-flow-nav .home-flow-nav__bubble-tail,
html.is-mobile-runtime body #app .phone-stage > .home-flow-nav .home-flow-nav__bubble-tail,
html.is-mobile-runtime body #app .phone-stage-frame > .home-flow-nav .home-flow-nav__bubble-tail {
  left: calc(-7px * var(--figma-stage-scale, 1)) !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-top: calc(4px * var(--figma-stage-scale, 1)) solid transparent !important;
  border-bottom: calc(4px * var(--figma-stage-scale, 1)) solid transparent !important;
  border-right: calc(8px * var(--figma-stage-scale, 1)) solid #2a2a2b !important;
  background: transparent !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: translateY(-50%) !important;
}

/* Center-lock fixed-width content groups in the mobile stage. */
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .screen.best-photo-screen .best-photo-winner,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .screen.best-photo-screen .best-photo-five,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .screen.collection-screen.collection-screen--mascot .collection-screen__mascot-stack {
  left: 50% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime) body #app .screen.best-photo-screen .best-photo-card,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .screen.best-photo-screen .best-photo-five__grid,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .screen.collection-screen.collection-screen--mascot .collection-screen__summary-card,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .screen.collection-screen.collection-screen--mascot .collection-screen__mascot-slots,
html.is-mobile-runtime:not(.is-tablet-runtime) body #app .screen.collection-screen.collection-screen--mascot .collection-screen__mascot-feature {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Landing needs document scroll room beyond the largest Safari viewport only
   in browsers with a bottom navigation UI. Keep the artwork on the same height
   so scrolling below lvh never exposes a blank bottom area. */
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-landing.has-browser-bottom-ui,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-landing.has-browser-bottom-ui body {
  --landing-scroll-affordance: max(var(--browser-ui-bottom-inset, 0px), 96px);
  --landing-stage-height: max(var(--browser-ui-layout-height, var(--app-viewport-height, 100dvh)), var(--app-viewport-height, 100dvh), 764px);
  --landing-scroll-height: max(var(--landing-stage-height), calc(var(--landing-stage-height) + var(--landing-scroll-affordance)));
  --device-height: var(--landing-scroll-height) !important;
  --mobile-viewport-height: var(--device-height) !important;
  --mockup-stage-height: var(--device-height) !important;
  --mockup-screen-height: var(--device-height) !important;
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: var(--device-height, 100dvh) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-landing.has-browser-bottom-ui body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-landing.has-browser-bottom-ui body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-landing.has-browser-bottom-ui body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).is-view-landing.has-browser-bottom-ui body #app .mockup-shell .phone-stage-frame {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: var(--device-height, 100dvh) !important;
  max-height: none !important;
  overflow: visible !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-landing.has-browser-bottom-ui body #app {
  padding-bottom: 0 !important;
  padding-block-end: 0 !important;
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).is-view-landing.has-browser-bottom-ui body #app .mockup-shell .phone-stage-frame > .phone-stage {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: var(--device-height, 100dvh) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-browser-bottom-ui body #app .mockup-shell .screen.screen--landing,
html.is-mobile-runtime:not(.is-tablet-runtime).has-browser-bottom-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing {
  height: var(--landing-scroll-height, max(var(--browser-ui-layout-height, var(--device-height, 100dvh)), var(--device-height, 100dvh), 764px)) !important;
  min-height: var(--landing-scroll-height, max(var(--browser-ui-layout-height, var(--device-height, 100dvh)), var(--device-height, 100dvh), 764px)) !important;
  max-height: none !important;
  overflow-y: visible !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-browser-bottom-ui body #app .mockup-shell .screen.screen--landing .landing__background,
html.is-mobile-runtime:not(.is-tablet-runtime).has-browser-bottom-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing .landing__background,
html.is-mobile-runtime:not(.is-tablet-runtime).has-browser-bottom-ui.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing .landing__background {
  inset: 0 !important;
  height: var(--landing-scroll-height, max(var(--browser-ui-layout-height, var(--device-height, 100dvh)), var(--device-height, 100dvh), 764px)) !important;
  min-height: var(--landing-scroll-height, max(var(--browser-ui-layout-height, var(--device-height, 100dvh)), var(--device-height, 100dvh), 764px)) !important;
  max-height: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-browser-bottom-ui body #app .mockup-shell .screen.screen--landing .landing__background img,
html.is-mobile-runtime:not(.is-tablet-runtime).has-browser-bottom-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing .landing__background img,
html.is-mobile-runtime:not(.is-tablet-runtime).has-browser-bottom-ui.is-safari-ui-runtime.has-translucent-browser-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen.screen--landing .landing__background img {
  height: var(--landing-scroll-height, max(var(--browser-ui-layout-height, var(--device-height, 100dvh)), var(--device-height, 100dvh), 764px)) !important;
  min-height: var(--landing-scroll-height, max(var(--browser-ui-layout-height, var(--device-height, 100dvh)), var(--device-height, 100dvh), 764px)) !important;
  max-height: none !important;
}

/* Mobile browser liquid-glass contract.
   Safari/Samsung/Naver browser chrome can only become translucent and collapse
   reliably when the document itself owns a small vertical scroll range and the
   area behind the browser chrome is painted. Fixed-stage pages keep their
   visual layout fixed, but expose this document-level affordance. */
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui {
  --browser-ui-glass-paint-height: var(
    --browser-ui-glass-paint-height-px,
    var(--browser-ui-layout-height, var(--app-viewport-height, var(--mobile-viewport-height, 100dvh)))
  );
  --browser-ui-glass-scroll-affordance: var(--browser-ui-glass-scroll-affordance-px, 96px);
  --browser-ui-glass-document-height: var(
    --browser-ui-glass-document-height-px,
    calc(var(--browser-ui-glass-paint-height) + var(--browser-ui-glass-scroll-affordance))
  );
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui body {
  background: var(--browser-ui-page-fill, #ffffff) !important;
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui body {
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: -1 !important;
  display: block !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--browser-ui-glass-paint-height) !important;
  min-height: var(--browser-ui-glass-paint-height) !important;
  background: var(--browser-ui-page-fill, #ffffff) !important;
  pointer-events: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.has-fixed-stage-screen:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.has-fixed-stage-screen:not(.has-drawer-overlay) body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.needs-browser-ui-scroll-affordance:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.needs-browser-ui-scroll-affordance:not(.has-drawer-overlay) body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-ranking:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-ranking:not(.has-drawer-overlay) body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-predict:not(.has-drawer-overlay),
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-predict:not(.has-drawer-overlay) body {
  height: auto !important;
  min-height: var(--browser-ui-glass-paint-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.has-fixed-stage-screen:not(.has-drawer-overlay) body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.needs-browser-ui-scroll-affordance:not(.has-drawer-overlay) body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-ranking:not(.has-drawer-overlay) body,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-predict:not(.has-drawer-overlay) body {
  box-sizing: content-box !important;
  padding-bottom: var(--browser-ui-glass-scroll-affordance) !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.has-fixed-stage-screen:not(.has-drawer-overlay) body::after,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.needs-browser-ui-scroll-affordance:not(.has-drawer-overlay) body::after,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-ranking:not(.has-drawer-overlay) body::after,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-predict:not(.has-drawer-overlay) body::after {
  content: none !important;
  display: none !important;
  width: 1px !important;
  height: 0 !important;
  pointer-events: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.has-fixed-stage-screen:not(.has-drawer-overlay) body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-ranking:not(.has-drawer-overlay) body #app,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-predict:not(.has-drawer-overlay) body #app {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: var(--mobile-viewport-width, 100vw) !important;
  min-width: var(--mobile-viewport-width, 100vw) !important;
  max-width: var(--mobile-viewport-width, 100vw) !important;
  height: var(--browser-ui-glass-paint-height) !important;
  min-height: var(--browser-ui-glass-paint-height) !important;
  max-height: var(--browser-ui-glass-paint-height) !important;
  overflow: hidden !important;
  background: var(--browser-ui-page-fill, transparent) !important;
  transform: none !important;
}

html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.has-fixed-stage-screen:not(.has-drawer-overlay) body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.has-fixed-stage-screen:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.has-fixed-stage-screen:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-ranking:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime:not(.is-tablet-runtime).has-translucent-browser-ui.is-view-predict:not(.has-drawer-overlay) body #app .mockup-shell .phone-stage-frame {
  height: var(--browser-ui-glass-paint-height) !important;
  min-height: var(--browser-ui-glass-paint-height) !important;
  max-height: var(--browser-ui-glass-paint-height) !important;
  background: var(--browser-ui-page-fill, transparent) !important;
}