/* holoquest · phone layout (Figma "📱 Mobile v1", 390 × 844)
   Same Starter Town look as desktop. Under 960px: bottom tab bar (Home · Binder · Scan · Market · Me),
   top tabs inside Binder and Market, a back button on pushed pages, sticky action bars, bottom sheets.
   Loaded after styles.css. Nothing here changes desktop. */

.tabbar, .ph-head, .ph-tabs { display: none; }
@media (min-width: 961px) { .ph-only { display: none !important; } }

@media (max-width: 960px) {
  :root { --tabbar-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); }
  body { overscroll-behavior-y: none; }
  .ph-hide { display: none !important; }

  /* ---------- shell: no sidebar, no top bar ---------- */
  .app { display: block; }
  .sidebar, .topbar { display: none !important; }
  .main { min-width: 0; }
  .view { padding: 14px 16px calc(var(--tabbar-h) + var(--safe-b) + 32px); max-width: none; }

  /* top of the page: logo row on Home, back button on pushed pages, nothing on other tabs */
  .ph-head { display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 30; min-height: 52px; padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 6px 16px;
    background: rgba(var(--paper-rgb), 0.72); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid var(--line); }
  .ph-head.empty { min-height: 0; padding: env(safe-area-inset-top, 0px) 0 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ph-head .logo { padding: 0; gap: 9px; }
  .ph-head .logo .word { font-size: 19px; }
  .ph-head .logo .mark { width: 22px; height: 22px; }
  .ph-head .spacer { flex: 1; }
  .ph-ic { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; background: none; color: var(--text); cursor: pointer; }
  .ph-ic:active { background: var(--surface-2); }
  .ph-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--fire); box-shadow: 0 0 0 2px var(--bg); }
  .ph-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 8px; margin-left: -8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 500 15px var(--font); cursor: pointer; max-width: 70vw; }
  .ph-back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ph-back:active { transform: translateY(1px); }

  /* ---------- bottom tab bar ---------- */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 6px var(--safe-b);
    background: rgba(var(--paper-rgb), 0.82); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(var(--shadow-rgb), 0.3); }
  .tabbar a { position: relative; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-3); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tabbar a b { font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
  .tabbar a.on { color: var(--text); }
  .tabbar a.on b { font-weight: 600; }
  .tabbar a.on::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--text); }
  .tabbar .badge { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 11.5px; }
  /* the big centre Scan button sits up out of the bar */
  .tb-scan { height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 0 8px; border: 0; background: none; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tb-scan span { width: 56px; height: 52px; margin-top: -22px; display: grid; place-items: center; background: var(--text); color: var(--bg); box-shadow: 0 5px 0 var(--fire), 0 14px 26px -10px rgba(var(--shadow-rgb), 0.55); transition: transform 0.15s var(--ease), box-shadow 0.15s; }
  .tb-scan:active span { transform: translateY(4px); box-shadow: 0 1px 0 var(--fire), 0 6px 14px -8px rgba(var(--shadow-rgb), 0.5); }
  .tb-scan b { font-size: 11.5px; font-weight: 500; }

  /* pushed pages with their own action bar (card page, trade builder) hide the tab bar */
  .app:has(.ph-actions, .action-bar) .tabbar { display: none; }
  .app:has(.ph-actions, .action-bar) .view { padding-bottom: calc(96px + var(--safe-b)); }

  /* ---------- sticky action bar on pushed pages ---------- */
  .ph-actions, .action-bar { position: fixed !important; left: 0; right: 0; bottom: 0 !important; z-index: 40; margin: 0 !important; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px calc(10px + var(--safe-b)) !important; background: rgba(var(--paper-rgb), 0.9); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 0 !important; border-top: 1px solid var(--line-2) !important; box-shadow: 0 -12px 30px -18px rgba(var(--shadow-rgb), 0.35) !important; flex-wrap: nowrap !important; }
  .ph-actions .btn { height: 46px; padding: 0 14px; }
  .ph-actions .btn.primary { flex: 1 1 auto; }
  .action-bar { gap: 14px !important; }
  .action-bar > div:not(.grow) .ab-k { font-size: 12.5px; }
  .action-bar .ab-v { font-size: 15px; }
  .action-bar .pill { display: none; }
  .action-bar .btn { height: 46px; margin-left: auto; }
  .action-bar > .faint.grow { font-size: 12.5px !important; line-height: 1.3; min-width: 0; }
  .action-bar > .faint.grow:not(:has(.warn)) { display: none; }
  .action-bar > .faint.grow .warn ~ * { display: none; }
  /* trade builder: what you get first, then what you give (Figma 07) */
  .builder-sides { flex-direction: column-reverse !important; gap: 10px !important; }

  /* ---------- top tabs (Cards · Sets · Wishlist / Posts · Trades · Requests) ---------- */
  .ph-tabs { display: flex; width: 100%; margin: 4px 0 18px; }
  .ph-tabs a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; color: var(--text-2); font-size: 15px; font-weight: 500; text-decoration: none; }
  .ph-tabs a.on { background: var(--surface-3); color: var(--text); font-weight: 600; box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.084) inset, 0 2px 8px rgba(var(--shadow-rgb), 0.12); }
  .ph-tabs .badge { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11.5px; }

  /* ---------- page titles ---------- */
  /* title and buttons share a row when they fit; otherwise the buttons drop under the title */
  .page-h { flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; margin-bottom: 14px; }
  .page-h > div:first-child { flex: 1 1 160px; min-width: 0; }
  .page-h h1, h1 { font-size: 30px; line-height: 1.1; }
  .page-h p { font-size: 15px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  h2.display, .view h2 { font-size: 24px; }
  .page-h .eyebrow { display: none; }
  .page-h .eyebrow.ph-keep { display: block; }
  .page-h .actions { flex: none; width: auto; gap: 6px; flex-wrap: nowrap; }
  .page-h .actions .with-info .info, .page-h .actions .with-info > button.info-btn { display: none; }
  /* buttons that become a bare icon on phones: <button class="btn ph-icon">icon <span>Label</span></button> */
  .btn.ph-icon { width: 42px; padding: 0; justify-content: center; }
  .btn.ph-icon > span, .btn.ph-icon > b { display: none; }
  html[data-pushed] .page-h h1 { font-size: 26px; }

  /* ---------- pop-ups become bottom sheets ---------- */
  .modal-root { place-items: end stretch; padding: 0; }
  .modal-root .modal, .modal-root .modal.narrow { width: 100%; max-width: none; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; margin: 0;
    padding: 26px 18px calc(20px + var(--safe-b)); animation: sheetUp 0.32s var(--ease) both; }
  .modal-root .modal::before { content: ""; position: sticky; top: -16px; display: block; width: 40px; height: 4px; margin: -14px auto 14px; border-radius: 2px; background: var(--line-2); }
  .modal-root.out .modal { animation: sheetDown 0.18s ease both; }
  .modal-root.pal { place-items: end stretch; padding-top: 0; }
  .modal-h h2 { font-size: 22px; }
  /* the scanner fills the screen: camera on top, result underneath */
  .modal-root .modal:has(.scan-wrap) { height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }
  .modal-root .modal:has(.scan-wrap)::before { display: none; }
  .modal:has(.scan-wrap) .modal-h { margin-bottom: 12px; }
  .modal:has(.scan-wrap) .scan-wrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
  .modal:has(.scan-wrap) .scan-stage { flex: 1 1 auto; min-height: 46dvh; aspect-ratio: auto; }
  .modal:has(.scan-wrap) .scan-side { flex: none; max-height: 34dvh; overflow-y: auto; }
  /* a smaller frame on phones: the card sits ~20 cm away, where phone cameras can focus */
  .modal:has(.scan-wrap) .scan-frame { top: 50%; bottom: auto; width: 62%; max-height: 84%; transform: translate(-50%, -50%); }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes sheetDown { to { transform: translateY(100%); } }
  /* sort = a dropdown sheet */
  .sort-list:not([hidden]) { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-height: 70dvh; overflow-y: auto; z-index: 60;
    padding: 18px 10px calc(14px + var(--safe-b)) !important; box-shadow: 0 -20px 60px -10px rgba(var(--shadow-rgb), 0.45), 0 0 0 100vmax var(--scrim) !important; animation: sheetUp 0.28s var(--ease) both; }
  .sort-list:not([hidden]) { display: flex; flex-direction: column; }
  .sort-list .sort-opt { height: 48px; font-size: 16px; flex: none; }
  .drawer { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-height: 80dvh; overflow-y: auto; padding-bottom: calc(20px + var(--safe-b)) !important; }

  /* ---------- toolbars: filter chips scroll sideways ---------- */
  .toolbar { flex-wrap: nowrap; gap: 8px; align-items: center; }
  .toolbar > .tb-group:first-child { flex: 1 1 auto; min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin-left: -16px; padding-left: 16px; }
  .toolbar > .tb-group:first-child::-webkit-scrollbar { display: none; }
  .toolbar > .tb-group:first-child > * { flex: none; }
  .toolbar > .tb-group:last-child { flex: none; }
  .toolbar .size-seg, .toolbar .tb-count, .toolbar .tb-sep { display: none; }
  .sort-btn .sort-k { display: none; }
  .sort-btn { height: 36px; padding: 0 10px; font-size: 14px; }
  .sort-btn b { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chip { white-space: nowrap; }

  /* ---------- card grids: a fixed 3 per row ---------- */
  .tiles, .tiles.size-m, .tiles.size-l { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 16px 10px !important; }
  .tiles .tile .tn, .tiles .tile h4, .tiles .tile .name { font-size: 14px; }
  .tile-slot b { font-size: 13px; }
  .set-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; gap: 10px !important; }

  /* ---------- My binder ---------- */
  .statbar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-bottom: 10px; }
  .statbar > .stat { padding: 12px 12px 14px !important; gap: 2px; }
  .statbar > .stat:nth-child(n+4) { display: none; }
  .statbar > .stat b { order: -1; font-size: 22px !important; }
  .statbar > .stat > span:not(.sub) { font-size: 13px !important; white-space: normal; }
  .statbar > .stat .sub, .statbar > .stat .bar { display: none; }
  .statbar > .stat.wide { grid-column: auto; }
  .money-line { margin: 0 2px 14px; gap: 4px 12px; font-size: 13.5px; }
  .money-line .info, .money-line > svg { display: none; }
  .ph-view { flex: none; }
  .ph-view button, .ph-view a { height: 34px; padding: 0 9px; }
  .ph-view a { display: inline-grid; place-items: center; color: var(--text-2); }
  .ph-view a.on { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.084) inset, 0 2px 8px rgba(var(--shadow-rgb), 0.12); }
  .set-logo { height: 30px !important; }
  .pk-sprite { width: 44px; height: 44px; }

  /* card tiles: just the card, its name and price (no panel) */
  .tiles .tile { padding: 0; gap: 6px; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tiles .tile:hover { background: none; box-shadow: none; }
  .tiles .tile-meta { padding: 0 1px; }
  .tiles .tile .nm { font-size: 14px !important; }
  .tiles .tile .nm-no, .tiles .tile .tile-got, .tiles .tile .pm-chg { display: none; }
  .tiles .tile .num, .tiles .tile .st { font-size: 13.5px !important; }
  .tiles .tile-ov .cond-tag, .tiles .tile-ov .qty-tag { bottom: 5px; left: 5px; padding: 2px 5px; font-size: 10.5px; }
  .tiles .tile-ov .qty-tag { left: auto; right: 5px; }
  .tiles .tile-btn { width: 32px; height: 32px; }
  .tiles .tile-slot { min-height: 0; aspect-ratio: 63 / 88; align-self: start; }

  /* 9-pocket binder pages you swipe through */
  .pp { position: relative; max-width: 520px; padding: 12px; margin: 0 auto; border-radius: 10px; transform: none; background: var(--cover); box-shadow: 0 18px 40px -18px rgba(var(--shadow-rgb), 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .pp-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
  .pp-scroll::-webkit-scrollbar { display: none; }
  .pp-page { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; background: rgba(255, 255, 255, 0.06); }
  .pp-pocket { position: relative; aspect-ratio: 63 / 88; border-radius: 6px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
  .pp-pocket > .cardart, .pp-pocket .ghost { width: 100%; }
  .pp-pocket.miss .gh-in { font-size: 10px; }
  .pp-qty { position: absolute; right: 4px; bottom: 4px; z-index: 4; padding: 1px 6px; font: 600 11.5px var(--font); background: rgba(0, 0, 0, 0.66); color: #fff; }
  .pp-foot { margin: 10px 0 0; text-align: center; font-size: 13.5px; color: var(--text-3); }

  /* ---------- card page ---------- */
  .card-layout { gap: 18px !important; }
  .card-side { display: contents; }
  .card-layout > .grow { order: 1; }
  .card-side > .side-panel, .card-side > .row { order: 2; }
  .card-side > div:first-child { display: flex; justify-content: center; align-self: stretch; width: 100%; }
  .card-layout > .grow > * { order: 2; }
  .card-layout > .grow > :first-child { order: 0; }
  .card-layout > .grow > [data-tour="price"] { order: 1; }
  .card-side .cardart.hero { --w: min(230px, 62vw) !important; margin: 4px auto 0; }
  html[data-route="card"] h1 { font-size: 28px; margin-top: 6px !important; }
  .card-tags { gap: 6px; justify-content: center; }
  /* the card and its name, set and tags sit centred under each other */
  .card-layout > .grow > :first-child { text-align: center; }
  .card-layout > .grow > :first-child > .row { justify-content: center; }
  .price-big { font-size: 36px !important; }
  .side-panel { padding: 14px 16px; }
  .graded-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .src-table { font-size: 13.5px; }

  /* ---------- Market · Trades ---------- */
  html[data-pushed] .view:has(.trades-layout) > .page-h, html[data-pushed] .trades-inbox { display: none; }
  .trades-layout { display: block !important; }
  .ph-group { margin-bottom: 22px; }
  .ph-group > h3 { margin: 0 0 10px; font: 600 16px var(--display); }
  .ph-empty { font-size: 14.5px; padding: 2px 2px 4px; }
  .ph-trade { padding: 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
  .ph-trade.me { box-shadow: inset 3px 0 0 var(--fire), var(--shadow-card); }
  .ph-trade.upcoming { box-shadow: inset 3px 0 0 var(--grass), var(--shadow-card); }
  .pt-head { display: flex; align-items: center; gap: 10px; color: inherit; }
  .pt-head b { display: block; font-size: 15.5px; }
  .pt-head span { font-size: 13px; color: var(--text-3); }
  .pt-head > svg { color: var(--text-3); }
  .pt-deal { display: flex; align-items: center; gap: 10px; color: inherit; }
  .pt-deal > div { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  .pt-deal > svg { flex: none; color: var(--text-3); }
  .pt-k { flex: 0 0 100%; font-size: 12.5px; color: var(--text-3); }
  .pt-thumbs { display: flex; gap: 4px; }
  .pt-deal b { font-size: 15px; }
  .pt-status { font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
  .pt-msg { margin: 0; font-size: 14px; color: var(--text-2); }
  .pt-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pt-acts .btn { height: 40px; padding: 0 8px; justify-content: center; }

  /* ---------- Me · Trainer Card ---------- */
  .tc-head { margin-bottom: 0; }
  .stage { padding-top: 54px !important; }
  .stage-mon { width: 96px !important; right: 0 !important; top: 6px !important; z-index: 3; }
  .partner img, .partner.empty .partner-q { width: 92px !important; height: 92px !important; }
  .tcard { width: 100%; aspect-ratio: 1.3; }
  .tc-face { padding: 14px 16px; border-radius: 18px; }
  .tc-top { padding-right: 70px; }
  .tc-who { gap: 12px; }
  .tc-who .avatar { width: 58px !important; height: 58px !important; font-size: 22px !important; }
  .tc-id h2 { font-size: 20px; }
  .tc-bio { font-size: 13px; -webkit-line-clamp: 2; }
  .tc-slot { width: 50px; }
  .tc-stats { gap: 10px; }
  .tc-stats b { font-size: 18px; }
  .tc-stats span { font-size: 10px; }
  .stage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 16px; }
  .stage-actions .btn { justify-content: center; }
  .shelf { gap: 12px; }
  .ph-rows { display: flex; flex-direction: column; margin-top: 12px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
  .ph-row { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px; color: var(--text); text-decoration: none; }
  .ph-row + .ph-row { border-top: 1px solid var(--line); }
  button.ph-row { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); font: inherit; text-align: left; cursor: pointer; }
  .ph-row > svg:first-child { color: var(--text-2); }
  .ph-row b { font-weight: 500; font-size: 15.5px; }
  .ph-row-r { margin-left: auto; font-size: 13.5px; color: var(--text-3); }
  .ph-row > svg:last-child { color: var(--text-3); }
  .ph-row:active { background: var(--surface-2); }
  .tour-banner { white-space: normal; left: 12px !important; right: 12px !important; transform: none !important; text-align: center; font-size: 13px; }
  .tc-privacy { margin-top: 16px; font-size: 13.5px; }

  /* ---------- settings ---------- */
  .set-row > .grow { flex: 1 1 190px; min-width: 0; }

  /* ---------- Home ---------- */
  .page-h:has(.quiet-value) { flex-direction: column; gap: 10px; }
  html[data-route="home"] .page-h .eyebrow { display: block; font-size: 13px; }
  html[data-route="home"] .page-h h1 { margin-top: 4px !important; font-size: 32px; }
  .quiet-value { height: 30px; font-size: 14px; padding: 0 10px; }
  .hero-hunt { padding: 18px 16px !important; }
  .hunt-grid { display: flex; flex-direction: column; gap: 0; }
  .hunt-main, .hunt-side { display: contents; }
  .hunt-top { order: 1; }
  .hunt-top select.input { max-width: 62%; }
  .hunt-title, .hunt-mini { display: none; }
  .hunt-big { order: 2; margin-top: 14px; }
  .hunt-big b { font-size: 46px; }
  .hunt-main .bar { order: 3; }
  .hunt-side > .row { order: 4; margin-top: 18px; }
  .hunt-next { order: 5; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .hunt-next .ghost * { font-size: 9px !important; }
  .hunt-next .pill { font-size: 10.5px; height: 20px; padding: 0 5px; white-space: nowrap; }
  .hunt-next .nearby-no { display: none; }
  .hunt-actions { order: 6; padding-top: 16px; }
  .hunt-actions .btn { flex: 1 1 0; }
  .split { display: flex; flex-direction: column; gap: 16px; }
  .split > .col { order: -1; }
  .panel { padding: 18px 16px; }
  .panel-h { flex-wrap: wrap; gap: 8px; }
  .panel-h h3 { font-size: 18px; }

  /* ---------- Market listings: art on the left, details on the right ---------- */
  .listings, .feed-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .listing { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .listing:hover { transform: none; }
  .ls-art { position: static; grid-row: 1 / span 2; height: auto; place-items: start center; padding: 14px 0 14px 12px; background: none; border: 0; }
  .ls-stack { width: 100px; height: 140px; }
  .ls-c .cardart { --w: 100px !important; }
  .ls-stack.n2 .ls-c[data-pos="1"] { transform: translateX(10px) rotate(5deg) scale(0.94); }
  .ls-stack.n3 .ls-c[data-pos="1"] { transform: translateX(12px) rotate(6deg) scale(0.9); }
  .ls-stack.n3 .ls-c[data-pos="2"] { transform: translateX(-12px) rotate(-6deg) scale(0.9); }
  .ls-dots { display: none; }
  .ls-type, .ls-match { top: 12px; height: 24px; padding: 0 8px; font-size: 12.5px; }
  .ls-type { left: 128px; }
  .ls-match { right: 10px; }
  .ls-body { padding: 44px 12px 0 12px; gap: 3px; }
  .ls-title { font-size: 17px; }
  .ls-sub, .ls-sub2 { font-size: 13px; }
  .ls-price { margin-top: 2px; font-size: 22px; gap: 6px; }
  .ls-price span, .ls-price em, .ls-wants em { font-size: 13px; }
  .ls-wants { font-size: 14px; gap: 6px; }
  .ls-note { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ls-foot { grid-column: 2; padding: 10px 12px 14px 12px; gap: 10px; }
  .ls-seller { padding-top: 0; border-top: 0; gap: 8px; }
  .ls-seller .avatar { width: 26px !important; height: 26px !important; }
  .ls-seller b { font-size: 14px; }
  .ls-seller span { font-size: 12.5px; }
  .ls-spot { display: none; }
  .ls-foot .btn { height: 40px; font-size: 14.5px; }
}
/* phones proper: a fixed 3 cards per row */
@media (max-width: 600px) {
  .tiles, .tiles.size-m, .tiles.size-l, .set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .modal-root .modal, .sort-list:not([hidden]) { animation: none; }
}