/* StikDex v0.04 · Part 2
   Ultra Clean mobile Home, icon-only dock and collection-first More. */

.mobile-home-pokeball-field { display: none; }

@media (max-width:760px), (pointer:coarse) and (max-width:960px) and (max-height:600px) {
  :root { --pocket-nav-height: 68px; }

  /* Home uses the native document scroller so browser chrome never clips it. */
  html.pocket-home-active {
    height: auto!important;
    min-height: 100%!important;
    max-height: none!important;
    overflow-x: clip!important;
    overflow-y: auto!important;
    overscroll-behavior-y: auto!important;
  }

  body.pocket-home-active {
    height: auto!important;
    min-height: 100dvh!important;
    max-height: none!important;
    padding-bottom: 0!important;
    overflow-x: clip!important;
    overflow-y: visible!important;
    overscroll-behavior-y: auto!important;
  }

  body.pocket-home-active .app {
    height: auto!important;
    min-height: 100dvh!important;
    max-height: none!important;
    overflow: visible!important;
  }

  body.pocket-home-active:not(.view-only):not(.trial-mode):not(.play-mode) .topbar {
    display: none!important;
  }

  #dashboardView.active {
    position: relative!important;
    isolation: isolate;
    height: auto!important;
    min-height: calc(100dvh - var(--pocket-header-height, 76px))!important;
    max-height: none!important;
    overflow: visible!important;
    padding: calc(12px + var(--v004-safe-top)) max(12px,var(--v004-safe-right)) calc(22px + var(--pocket-nav-height) + var(--pocket-browser-bottom,0px) + var(--v004-safe-bottom)) max(12px,var(--v004-safe-left))!important;
    background: var(--v004-bg)!important;
  }

  body.pocket-home-active:not(.view-only):not(.trial-mode):not(.play-mode) #dashboardView.active {
    min-height: 100dvh!important;
  }

  #dashboardView .pocket-home-dashboard {
    position: relative;
    width: min(100%, 560px)!important;
    height: auto!important;
    min-height: 0!important;
    display: grid!important;
    gap: 10px!important;
    margin: 0 auto!important;
    overflow: visible!important;
  }

  .pocket-home-overview > *,
  .pocket-home-status-grid small,
  .pocket-home-status-grid strong {
    position: relative;
    z-index: 2;
  }

  .pocket-home-deal-search { position: relative; z-index: 3; }
  .pocket-home-generations { position: relative; z-index: 2; }

  .mobile-home-pokeball-field {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    overflow: clip;
    pointer-events: none;
    touch-action: none;
    user-select: none;
    contain: layout paint style;
  }

  .mobile-home-pokeball {
    --mobile-ball-size: 64px;
    --mobile-ball-opacity: .06;
    --mobile-ball-top: #e83b4d;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--mobile-ball-size);
    height: var(--mobile-ball-size);
    overflow: hidden;
    border: 1px solid rgba(133,226,255,.44);
    border-radius: 50%;
    background: linear-gradient(to bottom,var(--mobile-ball-top) 0 43%,#071522 43% 57%,#dcecf5 57% 100%);
    opacity: var(--mobile-ball-opacity);
    will-change: transform;
    filter: contrast(1.08) saturate(.84);
  }

  .mobile-home-pokeball::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 28%;
    height: 28%;
    border: clamp(2px,calc(var(--mobile-ball-size) * .058),5px) solid #071522;
    border-radius: 50%;
    background: #dcecf5;
    box-shadow: 0 0 0 1px rgba(133,226,255,.38);
    transform: translate(-50%,-50%);
  }

  .mobile-home-pokeball::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8%;
    height: 8%;
    border-radius: 50%;
    background: #86e6ff;
    transform: translate(-50%,-50%);
  }

  .mobile-home-pokeball.pokemon-imposter {
    overflow: visible;
    border: 0;
    background: none;
  }

  .mobile-home-pokeball.pokemon-imposter::before,
  .mobile-home-pokeball.pokemon-imposter::after { display: none; }
  .mobile-home-pokeball.pokemon-imposter img { width: 100%; height: 100%; display: block; object-fit: contain; filter:contrast(1.08) saturate(.84); }

  html.ios-webkit .mobile-home-pokeball { will-change: auto; }

  .pocket-home-overview {
    min-height: 0!important;
    display: grid!important;
    grid-template-columns: minmax(112px,1fr) auto!important;
    align-items: center!important;
    gap: 8px 14px!important;
    padding: 13px 14px 14px!important;
    overflow: visible!important;
    border: 1px solid var(--v004-border)!important;
    border-radius: var(--v004-radius-xl)!important;
    background: linear-gradient(145deg,rgba(17,24,36,.82),rgba(6,11,18,.78))!important;
    color: var(--v004-text)!important;
    box-shadow: 0 12px 30px rgba(0,0,0,.2)!important;
  }

  .pocket-home-overview::before { display: none!important; }

  .pocket-home-logo {
    width: min(155px,100%);
    height: 70px;
    display: block;
    object-fit: contain;
    object-position: left center;
  }

  .pocket-home-completion {
    min-width: 104px;
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 2px;
    text-align: right;
  }

  .pocket-home-completion strong {
    color: var(--v004-text)!important;
    font-size: clamp(38px,12vw,54px)!important;
    font-weight: 950;
    line-height: .9!important;
    letter-spacing: -.055em;
  }

  .pocket-home-completion span {
    color: var(--v004-muted)!important;
    font-size: 8px!important;
    font-weight: 900!important;
    line-height: 1.3;
    letter-spacing: .055em!important;
    white-space: nowrap;
  }

  .pocket-home-main-progress {
    grid-column: 1 / -1;
    width: 100%;
    height: 10px;
    display: flex;
    overflow: clip;
    border-radius: 999px;
    background: color-mix(in srgb,var(--v004-muted) 22%,transparent);
    box-shadow: inset 0 0 0 1px var(--v004-border);
  }

  .pocket-home-main-progress span { display: block; height: 100%; transition: width var(--v004-motion-normal) var(--v004-motion-ease); }
  .pocket-home-main-progress .binder { background: var(--v004-success); }
  .pocket-home-main-progress .pending { background: var(--v004-pending); }

  .pocket-home-deal-search { margin: 0!important; }
  #dashboardView .pocket-home-deal-search .deal-quick-input { min-height: 52px!important; border-color: var(--v004-border-strong)!important; background: rgba(17,24,36,.76)!important; box-shadow: 0 8px 24px rgba(0,0,0,.12)!important; }
  #dashboardView .pocket-home-deal-search .deal-quick-input:focus { background: rgba(17,24,36,.88)!important; }

  .pocket-home-status-grid {
    display: grid!important;
    grid-template-columns: repeat(4,minmax(0,1fr))!important;
    gap: 7px!important;
  }

  .pocket-home-status-grid button,
  .pocket-home-status-grid > div {
    min-width: 0;
    min-height: 68px!important;
    display: grid!important;
    align-content: center!important;
    gap: 4px!important;
    padding: 8px 6px!important;
    border: 1px solid var(--v004-border)!important;
    border-top: 3px solid var(--v004-muted)!important;
    border-radius: var(--v004-radius-md)!important;
    background: linear-gradient(150deg,rgba(13,19,29,.72),rgba(5,10,17,.68))!important;
    color: var(--v004-text)!important;
    text-align: center!important;
  }

  .pocket-home-status-grid button.binder { border-top-color: var(--v004-success)!important; }
  .pocket-home-status-grid button.pending { border-top-color: var(--v004-pending)!important; }
  .pocket-home-status-grid button.needed { border-top-color: var(--v004-missing)!important; }
  .pocket-home-status-grid > div.final { border-top-color: #f29bb4!important; }
  .pocket-home-status-grid small { overflow: hidden; color: var(--v004-muted)!important; font-size: 7px!important; font-weight: 950!important; letter-spacing: .035em!important; text-overflow: ellipsis; white-space: nowrap!important; }
  .pocket-home-status-grid strong { color: var(--v004-text)!important; font-size: clamp(18px,6vw,25px)!important; font-weight: 950; line-height: 1!important; }

  .pocket-home-generations {
    display: grid;
    gap: 7px;
    padding: 11px;
    border: 1px solid var(--v004-border);
    border-radius: var(--v004-radius-lg);
    background: rgba(5,10,17,.46);
  }

  .pocket-home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
  .pocket-home-section-head h3 { margin: 0; color: var(--v004-text); font-size: 12px; font-weight: 900; }
  .pocket-home-section-head > span { color: var(--v004-muted); font-size: 8px; font-weight: 900; letter-spacing: .09em; }

  .pocket-home-generation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .pocket-home-generation-grid button {
    position: relative;
    min-width: 0;
    min-height: 88px;
    display: grid;
    grid-template-rows: minmax(0,1fr) auto;
    align-content: stretch;
    gap: 5px;
    overflow: hidden;
    padding: 8px;
    border: 1px solid color-mix(in srgb,var(--gen-accent) 38%,var(--v004-border));
    border-radius: var(--v004-radius-sm);
    background:
      radial-gradient(circle at 90% 78%,color-mix(in srgb,var(--gen-accent) 16%,transparent),transparent 60%),
      linear-gradient(145deg,rgba(17,24,36,.66),rgba(6,11,18,.60));
    color: var(--v004-text);
    isolation: isolate;
    text-align: left;
  }
  .pocket-home-generation-art {
    position: absolute;
    z-index: 0;
    right: -5px;
    bottom: 7px;
    width: 72%;
    height: 78%;
    object-fit: contain;
    object-position: right bottom;
    opacity: .72;
    filter: drop-shadow(0 5px 7px rgba(0,0,0,.34));
    pointer-events: none;
  }
  .pocket-home-generation-copy { position: relative; z-index: 1; min-width: 0; display: grid; align-content: start; justify-items: start; gap: 1px; text-shadow: 0 1px 5px rgba(2,6,11,.94),0 1px 5px rgba(2,6,11,.94); }
  .pocket-home-generation-copy small { color: color-mix(in srgb,var(--gen-accent) 72%,var(--v004-text)); font-size: 6.5px; font-weight: 950; letter-spacing: .09em; line-height: 1.2; }
  .pocket-home-generation-copy b { max-width: 72%; overflow: hidden; font-size: clamp(8px,2.8vw,10px); font-weight: 950; letter-spacing: .035em; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
  .pocket-home-generation-copy strong { color: var(--v004-text); font-size: clamp(13px,4.4vw,18px); font-weight: 950; line-height: 1; }
  .pocket-home-generation-grid i { position: relative; z-index: 1; height: 5px; display: block; overflow: clip; border-radius: 999px; background: color-mix(in srgb,var(--v004-muted) 24%,transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
  .pocket-home-generation-grid em { height: 100%; display: block; border-radius: inherit; background: var(--gen-accent); }

  /* Five equal icon-only destinations; names remain available to assistive tech. */
  .pocket-nav {
    min-height: calc(var(--pocket-nav-height) + var(--v004-safe-bottom))!important;
    gap: 5px!important;
    padding: 6px max(8px,var(--v004-safe-right)) calc(6px + var(--v004-safe-bottom)) max(8px,var(--v004-safe-left))!important;
    border-top-color: var(--v004-border-strong)!important;
    background: color-mix(in srgb,var(--v004-bg) 96%,transparent)!important;
    box-shadow: 0 -12px 34px rgba(0,0,0,.35)!important;
  }

  .pocket-nav button {
    min-height: 52px!important;
    display: grid!important;
    place-items: center!important;
    padding: 0!important;
    border: 1px solid transparent!important;
    border-radius: 17px!important;
    color: var(--v004-muted)!important;
    font-size: 0!important;
  }

  .pocket-nav-icon {
    width: 28px!important;
    height: 28px!important;
    display: grid!important;
    place-items: center!important;
  }
  .pocket-nav-icon svg { width: 24px; height: 24px; display: block; fill: currentColor; }
  .pocket-nav button.active { border-color: color-mix(in srgb,var(--v004-accent) 42%,var(--v004-border))!important; background: var(--v004-accent-soft)!important; color: var(--v004-accent-strong)!important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02),0 5px 16px rgba(0,0,0,.22)!important; }
  .pocket-nav button.active .pocket-nav-icon { transform: translateY(-1px) scale(1.06)!important; filter: drop-shadow(0 0 7px color-mix(in srgb,var(--v004-accent) 50%,transparent))!important; }
  .pocket-nav-badge { top: 3px!important; left: calc(50% + 8px)!important; }

  /* Light Mode keeps the same layered hierarchy with readable light tints. */
  body:not([data-theme="dark"]) .pocket-home-overview {
    background: linear-gradient(145deg,rgba(255,255,255,.84),rgba(248,246,242,.80))!important;
  }
  body:not([data-theme="dark"]) #dashboardView .pocket-home-deal-search .deal-quick-input { background: rgba(255,255,255,.80)!important; }
  body:not([data-theme="dark"]) #dashboardView .pocket-home-deal-search .deal-quick-input:focus { background: rgba(255,255,255,.92)!important; }
  body:not([data-theme="dark"]) .pocket-home-status-grid button,
  body:not([data-theme="dark"]) .pocket-home-status-grid > div {
    background: linear-gradient(150deg,rgba(255,255,255,.76),rgba(248,246,242,.70))!important;
  }
  body:not([data-theme="dark"]) .pocket-home-generations { background: rgba(248,246,242,.50); }
  body:not([data-theme="dark"]) .pocket-home-generation-grid button {
    background:
      radial-gradient(circle at 90% 78%,color-mix(in srgb,var(--gen-accent) 13%,transparent),transparent 60%),
      linear-gradient(145deg,rgba(255,255,255,.70),rgba(248,246,242,.64));
  }
  body:not([data-theme="dark"]) .pocket-home-generation-copy { text-shadow: 0 1px 5px rgba(255,255,255,.94),0 1px 5px rgba(255,255,255,.94); }

  /* More stays one scrollable sheet with small, ordered icon groups. */
  .pocket-more-sheet { max-height: min(78dvh,720px)!important; padding: 9px 10px calc(14px + var(--v004-safe-bottom))!important; overscroll-behavior: contain; }
  .pocket-more-groups { display: grid; gap: 13px; padding: 0 3px; }
  .pocket-more-group { display: grid; gap: 7px; }
  .pocket-more-group h4 { margin: 0; padding: 0 3px; color: var(--v004-muted); font-size: 8px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
  .pocket-more-grid { grid-template-columns: repeat(2,minmax(0,1fr))!important; gap: 7px!important; padding: 0!important; }
  .pocket-more-action {
    min-height: 64px!important;
    grid-template-columns: 31px minmax(0,1fr)!important;
    gap: 8px!important;
    padding: 9px!important;
    border-color: var(--v004-border)!important;
    border-radius: var(--v004-radius-md)!important;
    background: var(--v004-surface-raised)!important;
  }
  .pocket-more-action > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: var(--v004-accent-soft); color: var(--v004-accent-strong); font-size: 17px!important; }
  .pocket-more-action strong { color: var(--v004-text); font-size: 10px!important; }
  .pocket-more-action small { color: var(--v004-muted)!important; font-size: 8px!important; }

  body.view-only .pocket-owner-only,
  body.trial-mode .pocket-owner-only,
  body.play-mode .pocket-owner-only { display: none!important; }
}

@media (max-width: 350px) {
  .pocket-home-overview { grid-template-columns: minmax(100px,1fr) auto!important; padding-inline: 11px!important; }
  .pocket-home-logo { height: 62px; }
  .pocket-home-completion { min-width: 92px; }
  .pocket-home-completion strong { font-size: 36px!important; }
  .pocket-home-status-grid { gap: 5px!important; }
  .pocket-home-status-grid button,.pocket-home-status-grid > div { padding-inline: 4px!important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-home-pokeball { will-change: auto!important; }
  .pocket-home-main-progress span,
  .pocket-nav button,
  .pocket-nav-icon { transition: none!important; }
}