/* Phone pages use the desktop design. Loaded last so it beats
   mobile-optimized.css and the cards phone shell in index.html.
   Structural phone needs stay: off-canvas menu, the filter sheet,
   no horizontal page scroll, 44px tap targets. Search fields stay
   at 16px so iOS does not zoom them. */

@media (max-width: 932px) {
  /* Phones use a flat colour. The photo wallpaper and the desk tint
     stay on desktop. */
  html,
  :root body {
    background-color: #151718 !important;
    background-image: none !important;
  }
  .wallpaper-background,
  .wallpaper-background::before,
  .wallpaper-background::after,
  .ah-bg,
  #bg {
    display: none !important;
    background-image: none !important;
  }
  :root body::before,
  :root body::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-fw-desk="off"] body,
  html[data-fw-desk="off"] body::before,
  html[data-fw-desk="off"] body::after {
    background-color: transparent !important;
    background-image: none !important;
  }

  /* My Decks: the help box is the same three columns as desktop. */
  body.mydecks-page .help-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    align-items: stretch !important;
  }
  body.mydecks-page .help-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }
  body.mydecks-page .help-text h3,
  body.mydecks-page .help-action-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: #fff !important;
  }
  body.mydecks-page .help-text > p,
  body.mydecks-page .help-action p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  body.mydecks-page .help-action-btn,
  body.mydecks-page .help-action .btn {
    width: 100% !important;
    margin-top: auto !important;
    white-space: normal !important;
    text-align: center !important;
  }
  body.mydecks-page .my-decks-heading {
    font-size: 28px !important;
    line-height: 1.15 !important;
    color: #fff !important;
  }

  /* Deck tiles: portrait, text, actions — one row, same as desktop. */
  body.mydecks-page #yourDecks .investigator-card > div,
  body.mydecks-page #prebuiltDecks .investigator-card > div,
  body.mydecks-page .deck-card-body {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  body.mydecks-page .investigator-portrait-container {
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    align-self: stretch !important;
  }
  body.mydecks-page .deck-card-actions {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
  body.mydecks-page .deck-card-actions .open-deck-btn,
  body.mydecks-page .deck-card-actions .deck-del {
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* Cards phone shell. Search and the Filters button stay on the page.
     The view switch, active-filter pills, sort, and reset live in the
     filter sheet. Search stays 16px. */
  html.ah-phone #phcViewTabs,
  html.ah-phone #phcPills,
  html.ah-phone .phc-sort,
  html.ah-phone .phc-empty-reset {
    display: none !important;
  }
  html.ah-phone body #phoneCardsRoot {
    background: transparent !important;
    color: #ede6d3 !important;
  }
  html.ah-phone body #phoneCardsRoot button:not(#upgradeModal *),
  html.ah-phone body #mobileFiltersPanel button:not(#upgradeModal *),
  html.ah-phone body #mobileFiltersPanel .chip:not(#upgradeModal *),
  html.ah-phone body #mobileFiltersPanel .cardViewTab:not(#upgradeModal *),
  html.ah-phone body #phoneCardsRoot .phc-brand-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  }
  html.ah-phone body .phc-header,
  html.ah-phone body .phc-search-panel {
    background: rgba(21, 23, 24, 0.82) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    border-bottom-color: rgba(168, 153, 115, 0.28) !important;
  }
  html.ah-phone body .phc-brand,
  html.ah-phone body .phc-brand-text {
    color: #ede6d3 !important;
    -webkit-text-fill-color: #ede6d3 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
  }
  html.ah-phone body #phoneCardsRoot .phc-icon-btn:not(#upgradeModal *) {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    background: rgba(237, 230, 211, 0.08) !important;
    border: 1px solid rgba(218, 198, 154, 0.35) !important;
    color: #ede6d3 !important;
    -webkit-text-fill-color: #ede6d3 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  html.ah-phone body #phoneCardsRoot #phcFiltersBtn:not(#upgradeModal *) {
    width: auto !important;
    height: 44px !important;
    padding: 0 12px !important;
    gap: 6px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  html.ah-phone body #phoneCardsRoot #phcFiltersBtn:not(#upgradeModal *)[aria-expanded="true"],
  html.ah-phone body #phoneCardsRoot #phcFiltersBtn:not(#upgradeModal *).has-filters {
    background: rgba(237, 230, 211, 0.14) !important;
    border-color: rgba(218, 198, 154, 0.65) !important;
  }
  html.ah-phone body .phc-filters-badge {
    border-radius: 10px !important;
    background: #435c4b !important;
    color: #faf3df !important;
    -webkit-text-fill-color: #faf3df !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  html.ah-phone body #phcSearch {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    background-color: rgba(21, 23, 24, 0.65) !important;
    border: 1px solid rgba(154, 163, 140, 0.75) !important;
    color: #ede6d3 !important;
    -webkit-text-fill-color: #ede6d3 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
  }
  html.ah-phone body #phcSearch:focus {
    border-color: #dac69a !important;
    outline: 2px solid rgba(218, 198, 154, 0.45) !important;
    outline-offset: 1px !important;
  }
  html.ah-phone body #phcSort {
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(237, 230, 211, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ede6d3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center !important;
    border: 1px solid rgba(218, 198, 154, 0.35) !important;
    color: #ede6d3 !important;
    -webkit-text-fill-color: #ede6d3 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
  }
  html.ah-phone body .phc-view-tabs .cardViewTabsInner {
    border-radius: 12px !important;
    background: rgba(15, 17, 18, 0.45) !important;
    border: 1px solid rgba(183, 177, 142, 0.28) !important;
    padding: 4px !important;
  }
  html.ah-phone body #phoneCardsRoot .phc-view-tabs .cardViewTab:not(#upgradeModal *) {
    min-height: 40px !important;
    border-radius: 9px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: rgba(237, 230, 211, 0.75) !important;
    -webkit-text-fill-color: rgba(237, 230, 211, 0.75) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  html.ah-phone body #phoneCardsRoot .phc-view-tabs .cardViewTab.active:not(#upgradeModal *) {
    background: rgba(237, 230, 211, 0.14) !important;
    border-color: rgba(218, 198, 154, 0.65) !important;
    color: #faf3df !important;
    -webkit-text-fill-color: #faf3df !important;
    box-shadow: inset 0 0 0 1px rgba(218, 198, 154, 0.28) !important;
  }
  html.ah-phone body #phoneCardsRoot .phc-pill:not(#upgradeModal *) {
    height: 36px !important;
    border-radius: 18px !important;
    background: rgba(237, 230, 211, 0.14) !important;
    border: 1px solid rgba(218, 198, 154, 0.65) !important;
    color: #faf3df !important;
    -webkit-text-fill-color: #faf3df !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  html.ah-phone body #phoneCardsRoot .phc-pills-clear:not(#upgradeModal *) {
    height: 44px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #dac69a !important;
    -webkit-text-fill-color: #dac69a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  html.ah-phone body #phoneCardsRoot .phc-tile-open:not(#upgradeModal *),
  html.ah-phone body #phoneCardsRoot .phc-tile > .phc-fav:not(#upgradeModal *) {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: inherit !important;
  }
  html.ah-phone body #phoneCardsRoot .phc-more:not(#upgradeModal *),
  html.ah-phone body #phoneCardsRoot .phc-pager-btn:not(#upgradeModal *) {
    min-height: 44px !important;
    border-radius: 10px !important;
    background: rgba(237, 230, 211, 0.14) !important;
    border: 1px solid rgba(218, 198, 154, 0.65) !important;
    color: #faf3df !important;
    -webkit-text-fill-color: #faf3df !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }
  html.ah-phone body #mobileFiltersPanel {
    background: #151718 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: rgba(168, 153, 115, 0.35) !important;
    border-radius: 16px 16px 0 0 !important;
    color: #ede6d3 !important;
  }
  html.ah-phone body #mobileFiltersPanel .phc-fs-head,
  html.ah-phone body #mobileFiltersPanel .phc-fs-foot {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(183, 177, 142, 0.22) !important;
  }
  html.ah-phone body #mobileFiltersPanel .phc-fs-title,
  html.ah-phone body #mobileFiltersPanel .phcSecTitle {
    color: #ede6d3 !important;
    -webkit-text-fill-color: #ede6d3 !important;
    font-weight: 700 !important;
  }
  html.ah-phone body #mobileFiltersPanel .phc-fs-reset:not(#upgradeModal *),
  html.ah-phone body #mobileFiltersPanel .phc-fs-close:not(#upgradeModal *) {
    min-height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    background: rgba(237, 230, 211, 0.08) !important;
    border: 1px solid rgba(218, 198, 154, 0.35) !important;
    color: #ede6d3 !important;
    -webkit-text-fill-color: #ede6d3 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  html.ah-phone body #mobileFiltersPanel .phc-fs-close:not(#upgradeModal *) {
    font-size: 24px !important;
  }
  html.ah-phone body #mobileFiltersPanel .phc-fs-foot {
    align-items: stretch !important;
    gap: 8px !important;
  }
  html.ah-phone body #mobileFiltersPanel .phc-fs-foot .phc-fs-reset:not(#upgradeModal *),
  html.ah-phone body #mobileFiltersPanel .phc-fs-apply:not(#upgradeModal *) {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    white-space: normal !important;
    text-align: center !important;
  }
  html.ah-phone body #mobileFiltersPanel .phc-fs-apply:not(#upgradeModal *) {
    background: rgba(237, 230, 211, 0.14) !important;
    border: 1px solid rgba(218, 198, 154, 0.65) !important;
    color: #faf3df !important;
    -webkit-text-fill-color: #faf3df !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px rgba(218, 198, 154, 0.28) !important;
  }
  html.ah-phone body #mobileFiltersPanel #classBar {
    gap: 8px !important;
    align-items: stretch !important;
  }
  html.ah-phone body #mobileFiltersPanel #classBar .cardViewTabsInner {
    gap: 8px !important;
  }
  html.ah-phone body #mobileFiltersPanel #levelChips,
  html.ah-phone body #mobileFiltersPanel #iconChips,
  html.ah-phone body #mobileFiltersPanel #slotChips,
  html.ah-phone body #mobileFiltersPanel #mechChips,
  html.ah-phone body #mobileFiltersPanel .filtersBar .filterGroup > div {
    gap: 8px !important;
    align-items: stretch !important;
  }
  html.ah-phone body #mobileFiltersPanel .filtersBar [data-phc-half] {
    grid-column: 1 / -1 !important;
  }
  html.ah-phone body #mobileFiltersPanel #sortChips,
  html.ah-phone body #mobileFiltersPanel #dirChips {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html.ah-phone body #mobileFiltersPanel #sortChips .chip:not(#upgradeModal *) {
    flex: 1 1 calc(33.333% - 8px) !important;
    max-width: calc(33.333% - 6px) !important;
    min-width: 0 !important;
    padding: 0 6px !important;
  }
  html.ah-phone body #mobileFiltersPanel #dirChips .chip:not(#upgradeModal *) {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  html.ah-phone body #mobileFiltersPanel .chip:not(#upgradeModal *),
  html.ah-phone body #mobileFiltersPanel .cardViewTab:not(#upgradeModal *) {
    height: 44px !important;
    min-height: 44px !important;
    max-height: none !important;
    border-radius: 12px !important;
    background: rgba(237, 230, 211, 0.06) !important;
    border: 1px solid rgba(154, 163, 140, 0.45) !important;
    color: rgba(237, 230, 211, 0.9) !important;
    -webkit-text-fill-color: rgba(237, 230, 211, 0.9) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  html.ah-phone body #mobileFiltersPanel .chip.active:not(#upgradeModal *),
  html.ah-phone body #mobileFiltersPanel .cardViewTab.active:not(#upgradeModal *) {
    background: rgba(237, 230, 211, 0.16) !important;
    border-color: rgba(218, 198, 154, 0.7) !important;
    color: #faf3df !important;
    -webkit-text-fill-color: #faf3df !important;
    box-shadow: inset 0 0 0 1px rgba(218, 198, 154, 0.28) !important;
  }
  html.ah-phone body #mobileFiltersPanel select,
  html.ah-phone body #mobileFiltersPanel input[type="search"],
  html.ah-phone body #mobileFiltersPanel input[type="text"] {
    border-radius: 10px !important;
    background-color: rgba(21, 23, 24, 0.65) !important;
    border: 1px solid rgba(154, 163, 140, 0.75) !important;
    color: #ede6d3 !important;
    -webkit-text-fill-color: #ede6d3 !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }
}