/* Keep the account gate behind the initial boot screen if loading fails. */
body.site-loading #profileSyncGate { visibility: hidden; }
.site-loader.ready .site-loader-track i { animation: none; transform: scaleX(1); }

@media (max-width: 760px) {
  /* The picker is moved to the body while open, so the upgrade layout keeps its size. */
  html.target-picker-page-lock { overflow: hidden; }
  body.target-picker-open {
    width: calc(100% - var(--page-scrollbar-width, 0px));
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  #targetPicker.mobile-overlay {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    border: 1px solid #baff4f;
    border-radius: 10px;
    background: #111910;
    transform: var(--picker-from);
    transform-origin: 0 0;
    animation: none !important;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .2s ease,
      border-radius .34s ease, visibility 0s linear .34s;
    will-change: transform, opacity;
  }
  #targetPicker.mobile-overlay.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    border-radius: 0;
    transform: none;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .2s ease,
      border-radius .34s ease, visibility 0s;
  }
  #targetPicker.mobile-overlay.open.closing {
    visibility: visible;
    pointer-events: none;
    opacity: 0;
    border-radius: 10px;
    transform: var(--picker-from);
  }
  #targetPicker.mobile-overlay .target-picker-shell {
    width: 100%;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    transform: none;
  }
  #targetPicker.mobile-overlay .target-picker-shell > * {
    opacity: 0;
    transition: opacity .13s ease;
  }
  #targetPicker.mobile-overlay.open:not(.closing) .target-picker-shell > * {
    opacity: 1;
    transition-delay: .11s;
  }
  #targetPicker.mobile-overlay .target-picker-header {
    flex: 0 0 auto;
    grid-template-columns: 36px minmax(0,1fr) 44px;
    gap: 8px;
    margin: 0 0 8px;
    padding: calc(8px + env(safe-area-inset-top)) 10px 9px;
  }
  #targetPicker.mobile-overlay .target-picker-header > button {
    width: 44px;
    height: 44px;
    font-size: 25px;
  }
  #targetPicker.mobile-overlay .target-picker-header h2 {
    overflow: hidden;
    font-size: 15px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #targetPicker.mobile-overlay .target-picker-filters {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    padding: 0 10px 8px;
  }
  #targetPicker.mobile-overlay .target-picker-search,
  #targetPicker.mobile-overlay .target-picker-sort { grid-column: auto; }
  #targetPicker.mobile-overlay .target-picker-filters label,
  #targetPicker.mobile-overlay .target-picker-sort {
    min-width: 0;
    height: 40px;
    padding: 0 8px;
  }
  #targetPicker.mobile-overlay .target-picker-filters input { min-width: 0; font-size: 16px !important; }
  #targetPicker.mobile-overlay .target-sort-trigger { font-size: 10px !important; }
  #targetPicker.mobile-overlay .target-kind-filters {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 5px;
    padding: 0 10px 7px;
    overflow: visible;
  }
  #targetPicker.mobile-overlay .target-kind-filters button {
    min-width: 0;
    min-height: 36px;
    padding: 0 3px;
    font-size: 9px;
  }
  #targetPicker.mobile-overlay .target-picker-summary {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px 6px;
    font-size: 10px;
  }
  #targetPicker.mobile-overlay .target-picker-summary button { min-height: 32px; font-size: 10px; }
  #targetPicker.mobile-overlay .target-picker-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-content: start;
    gap: 7px;
    padding: 0 10px calc(12px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    animation: none;
  }
  #targetPicker.mobile-overlay .target-skin-option {
    min-height: 166px;
    grid-template-rows: 78px minmax(34px,auto) 28px;
    gap: 4px;
    padding: 7px;
    contain-intrinsic-size: auto 166px;
  }
  #targetPicker.mobile-overlay .target-option-media { height: 78px; }
  #targetPicker.mobile-overlay .target-skin-option .target-option-media img { height: 72px; }
  #targetPicker.mobile-overlay .target-option-copy small { font-size: 8px; }
  #targetPicker.mobile-overlay .target-option-copy b { font-size: 10px; }
  #targetPicker.mobile-overlay .target-option-price {
    min-height: 28px;
    padding: 5px 6px;
    font-size: 10px;
  }
  #targetPicker.mobile-overlay .target-picker-more {
    flex: 0 0 auto;
    min-height: 42px;
    margin: 6px 10px calc(8px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 350px) {
  #targetPicker.mobile-overlay .target-picker-header h2 { font-size: 13px; }
  #targetPicker.mobile-overlay .target-picker-grid { gap: 5px; padding-right: 7px; padding-left: 7px; }
  #targetPicker.mobile-overlay .target-skin-option { padding: 5px; }
  #targetPicker.mobile-overlay .target-option-copy b,
  #targetPicker.mobile-overlay .target-option-price { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  #targetPicker.mobile-overlay,
  #targetPicker.mobile-overlay.open,
  #targetPicker.mobile-overlay .target-picker-shell > * { transition: none; }
}