/* ===== phone + touch layer =====
   Loaded after app.css. Touch fixes apply on any touch screen; the app shell
   (bottom tab bar, compact header, full-screen sheets) applies at phone width. */
:root { --tabh: 62px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { min-height: 100dvh; overscroll-behavior-y: none; }
button, a, select, label, .ctile, .lrow, .feed-row, .bk-pocket, .cell { touch-action: manipulation; }
/* cards and packs are things you hold, not text you select */
.pcard, .slab, .pack, .ctile, .cell, .stack, .bk-pocket, .bk-book, .summary .grid, #overlay, .logo, #tabbar, .btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg { -webkit-user-drag: none; }
#tabbar { display: none; }
.m-back { display: none; }

@media (pointer: coarse) {
  /* iOS zooms the whole page when a field under 16px gets focus */
  input, select, textarea { font-size: 16px !important; }
  /* fixed backgrounds repaint the whole page on every scroll frame on phones */
  body { background-attachment: scroll; }
  #tip { display: none !important; }
}
/* hover lifts stick after a tap on touch screens */
@media (hover: none) {
  .btn:hover { transform: none; border-color: var(--line2); }
  .btn.gold:hover { border-color: #ffe39a; }
  .ctile:hover .pcard, .ctile:hover .slab, .bk-pocket:hover .pcard, .bk-pocket:hover .slab, .bk-book:hover { transform: none; }
  .btn:active { transform: scale(.97); }
  .ctile:active .pcard, .ctile:active .slab, .cell:active .pcard { transform: scale(.97); }
  .bk-pocket .bk-x { opacity: 1; }
}

@media (max-width: 760px) {
  html, body { font-size: 14px; }

  /* --- compact header --- */
  .top { gap: 8px; padding: calc(8px + var(--sat)) calc(12px + var(--sar)) 8px calc(12px + var(--sal)); flex-wrap: nowrap; min-height: calc(52px + var(--sat)); }
  .top nav#nav { display: none; }
  .logo { font-size: 21px; gap: 8px; letter-spacing: .12em; }
  .logo svg { width: 24px; }
  .m-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -6px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); flex: none; }
  .m-back[hidden] { display: none !important; }
  .m-back svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .m-back:not([hidden]) + .logo span { display: none; }
  .top .me { margin-left: auto; flex-wrap: nowrap; gap: 6px; }
  .top .me .freepk, .top .me .violet, .top .me a[href^="#/player/"], .top .me #settings, .top .me #signout { display: none !important; }
  .top .me .coins { padding: 6px 10px; font-size: 14px; }
  .top .me .bell { position: relative; width: 38px; height: 38px; padding: 0; border-radius: 50%; }

  /* --- bottom tab bar --- */
  #tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: calc(var(--tabh) + var(--sab)); padding: 0 var(--sar) var(--sab) var(--sal);
    background: rgba(9,10,18,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  #tabbar > * { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 0; }
  #tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
  #tabmore svg circle { fill: currentColor; stroke: none; }
  #tabbar .on { color: var(--gold); }
  #tabbar .on svg { transform: translateY(-1px); filter: drop-shadow(0 0 8px rgba(246,196,83,.55)); }
  #tabbar .on::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 0 0 3px 3px; background: var(--gold); }
  #tabbar .nbadge { position: absolute; top: 7px; left: calc(50% + 6px); margin: 0; font-style: normal; font-size: 10px; padding: 0 5px; line-height: 16px; }
  #tabbar .nbadge[hidden] { display: none; }
  body:has(#overlay:not([hidden])) #tabbar { display: none; }

  main { padding: 16px calc(14px + var(--sar)) calc(var(--tabh) + var(--sab) + 28px) calc(14px + var(--sal)); }
  .section-title { flex-wrap: wrap; row-gap: 2px; }
  .section-title h2 { font-size: 30px; }
  .section-title .muted { font-size: 12.5px; }
  .tbl th { top: calc(52px + var(--sat)); }

  /* toolbars: search takes a full row, filters two per row */
  .toolbar { gap: 8px; }
  .toolbar input.q, .toolbar input[type=search] { width: 100% !important; flex: 1 1 100%; }
  .toolbar select { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .toolbar .grow { display: none; }
  .cgrid { gap: 18px 12px; justify-items: center; }
  .cap2 { font-size: 11px; }
  .cap2 .pill { font-size: 10px; padding: 2px 6px; }

  /* --- pack shop --- */
  .packs { gap: 18px; }
  .packcard { padding: 20px 16px 18px; }
  .packcard .row .btn { flex: 1 1 auto; }
  .hero-strip { padding: 16px; }
  .hero-strip .big { font-size: 24px; }

  /* --- popups become full-screen sheets --- */
  #modal { padding: 0; align-items: flex-end; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(3,4,8,.86); }
  .mbox { max-height: 100dvh; height: auto; border-radius: 22px 22px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: var(--sab); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; animation: m-up .26s cubic-bezier(.2,.8,.3,1) both; }
  .mbox.sm { max-width: none; padding: 26px 20px calc(26px + var(--sab)); }
  .mbox:has(.detail), .mbox.copies, .mbox.big { height: 100dvh; border-radius: 0; border-top: 0; padding-top: var(--sat); }
  .mclose { position: sticky; float: right; top: calc(10px + var(--sat)); margin: 10px 10px -46px 0; width: 40px; height: 40px; background: rgba(12,14,24,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .mbox .tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .mbox[style*="padding:28px"] { padding: 22px 16px calc(22px + var(--sab)) !important; }
  .detail .stage { padding: 30px 14px 20px; }
  .detail .info { padding: 22px 16px 28px; }
  .detail h2 { font-size: 32px; }
  .actions .btn { flex: 1 1 calc(50% - 10px); }

  /* settings / notifications popovers: bottom sheets above the tab bar */
  .setpop { left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(var(--tabh) + var(--sab) + 8px) !important; width: auto !important; max-height: 70dvh; overflow: auto; animation: m-up .22s cubic-bezier(.2,.8,.3,1) both; }

  #toasts { bottom: calc(var(--tabh) + var(--sab) + 12px); width: calc(100% - 32px); }
  .toast { text-align: center; max-width: 100%; }
  #bulkbar { bottom: calc(var(--tabh) + var(--sab) + 8px); width: calc(100vw - 16px); padding: 10px; gap: 8px; }
  .tour-tip { width: auto; left: 12px !important; right: 12px; }

  /* --- opening overlay --- */
  .ov-bar { top: calc(10px + var(--sat)); left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); }
  .ov-hint { bottom: calc(5% + var(--sab)); padding: 0 24px; font-size: 13px; letter-spacing: .04em; line-height: 1.35; }
  .summary { width: 100%; max-height: 100dvh; padding: calc(56px + var(--sat)) 14px calc(24px + var(--sab)); overscroll-behavior: contain; }
  .summary .display { font-size: 34px !important; }
  .summary .grid { gap: 14px 10px; margin: 16px 0; }
  .summary .sum-tags { flex-wrap: wrap; justify-content: center; }
  .summary .cell { max-width: calc(50% - 5px); }
  .summary.multi .cell:first-child { max-width: 100%; }
  .sum-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sum-actions .btn { padding: 12px 8px; white-space: normal; }
  .sum-actions .btn.gold { grid-column: 1 / -1; }
  .mp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .mp-stats .stat { min-width: 0; padding: 8px 6px; }
  .mp-stats .stat span { font-size: 9.5px; letter-spacing: .06em; }
  .mp-stats .stat b { font-size: 20px; }
  .ov-count { flex: 1; min-width: 0; letter-spacing: .08em; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ov-bar .btn.sm { padding: 7px 10px; }

  /* --- binder --- */
  .bk-shelf { margin: 0 -14px 8px; padding: 6px 14px 18px; scroll-snap-type: x proximity; }
  .bk-shelf > * { scroll-snap-align: start; }
}

/* --- "More" sheet --- */
.m-sheet-wrap { position: fixed; inset: 0; z-index: 65; background: rgba(3,4,8,.6); display: flex; align-items: flex-end; animation: fadein .2s both; }
.m-sheet-wrap.out { opacity: 0; transition: opacity .2s; }
.m-sheet { width: 100%; background: linear-gradient(180deg, var(--panel2), var(--bg2)); border-top: 1px solid var(--line2); border-radius: 22px 22px 0 0; padding: 8px 16px calc(var(--sab) + 18px); display: flex; flex-direction: column; gap: 12px; animation: m-up .26s cubic-bezier(.2,.8,.3,1) both; }
.m-sheet-wrap.out .m-sheet { transform: translateY(30px); transition: transform .2s; }
.m-grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line2); margin: 2px auto 4px; }
.m-who { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.m-who > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-who b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-who span:not(.coins):not(.m-av) { font-size: 12px; color: var(--muted); }
.m-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; color: #2a1a00; background: linear-gradient(180deg, #ffd978, #e0a526); flex: none; }
.m-free { font-size: 13px; color: var(--muted); text-align: center; }
.m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-grid > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-weight: 700; font-size: 13px; position: relative; }
.m-grid > * > span { font-size: 22px; line-height: 1; }
.m-grid .nbadge { position: absolute; top: 8px; right: 10px; font-style: normal; }
.m-grid > *:active { background: rgba(255,255,255,.08); }
.m-sheet > .btn { width: 100%; padding: 13px; }

/* install nudge + help */
.m-nudge { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabh) + var(--sab) + 10px); z-index: 44; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--panel2); border: 1px solid rgba(246,196,83,.35); box-shadow: 0 14px 40px rgba(0,0,0,.6); animation: m-up .3s cubic-bezier(.2,.8,.3,1) both; }
.m-nudge img { width: 38px; height: 38px; border-radius: 9px; }
.m-nudge > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.m-nudge span { font-size: 12px; color: var(--muted); }
.m-nudge .m-x { border: 0; background: none; color: var(--muted); font-size: 16px; padding: 6px; }
.m-install { text-align: center; }
.m-install img { border-radius: 16px; }
.m-install ol { text-align: left; padding-left: 22px; line-height: 1.7; margin: 8px 0 0; }
.m-install p { text-align: left; }

/* installed app: no browser chrome, so leave room for the notch / home bar on every screen size */
.standalone body { overscroll-behavior: none; }

@keyframes m-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }

/* ===== phone performance =====
   Blur behind sticky bars is recomputed on every scroll frame on phones; a
   near-solid fill looks the same and costs nothing. Card tiles that are off
   screen skip layout and painting until they scroll near (content-visibility). */
@media (max-width: 760px), (pointer: coarse) {
  .top { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(7,8,15,.97); }
  #tabbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(9,10,18,.98) !important; }
  .mclose { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(12,14,24,.95) !important; }
  #tabbar .on svg { filter: none; }
  .ctile { content-visibility: auto; contain-intrinsic-block-size: auto 300px; }

  .lrow { content-visibility: auto; contain-intrinsic-block-size: auto 60px; }
}
.fps-meter { position: fixed; z-index: 9999; top: calc(env(safe-area-inset-top, 0px) + 4px); left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.75); color: #34d399; font: 600 11px/1.4 ui-monospace, monospace; pointer-events: none; }
.fps-meter.bad { color: #f87171; }

/* A full-screen overlay (pack opening) or full-screen sheet covers the page:
   stop painting and animating the page underneath it. */
body:has(#overlay:not([hidden])) main { visibility: hidden; transition: visibility 0s .45s; } /* after the overlay has faded in */
body:has(#overlay:not([hidden])) main *, body:has(#modal:not([hidden])) main * { animation-play-state: paused !important; }
@media (max-width: 760px) {
  body:has(#modal:not([hidden]) .detail) main, body:has(#modal:not([hidden]) .mbox.copies) main, body:has(#modal:not([hidden]) .mbox.big) main { visibility: hidden; }
}

/* ===================== game shell (phones) ===================== */
.me-av { display: none; }
@media (max-width: 760px) {
  /* --- HUD: back/star · free packs ......... coins · alerts · you --- */
  .top { gap: 6px; }
  .logo span { display: none; }
  .logo { font-size: 0; }
  .logo svg { width: 26px; filter: drop-shadow(0 0 6px rgba(246,196,83,.45)); }
  .top .me { gap: 8px; }
  .top .me .freepk { display: inline-flex !important; order: -1; margin-right: auto; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.35); font-size: 13px; white-space: nowrap; }
  .top .me .freepk .fp-more { display: none; }
  .top .me .freepk .fp-next { font-size: 11px; color: var(--muted); margin-left: 2px; }
  .top .me { flex: 1; }
  .top .me .me-link { display: inline-flex !important; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 0; background: none; }
  .top .me .me-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 17px 'Barlow Condensed', sans-serif; color: #2a1a00; background: linear-gradient(180deg, #ffd978, #e0a526); box-shadow: 0 0 0 2px rgba(246,196,83,.25); }
  .top .me .me-nm { display: none; }
  #signin { min-height: 38px; }

  /* --- bottom bar: Binder · Cards · [PACKS] · Market · More --- */
  #tabbar { overflow: visible; }
  #tabbar .tab-main { color: #2a1a00; }
  #tabbar .tab-main::after { content: ''; position: absolute; top: -18px; left: 50%; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffe08a, #e2a52a 70%); box-shadow: 0 6px 18px rgba(246,196,83,.35), 0 0 0 4px var(--bg); z-index: -1; }
  #tabbar .tab-main { z-index: 1; }
  #tabbar .tab-main svg { width: 28px; height: 28px; margin-top: -22px; stroke: #2a1a00; stroke-width: 2; }
  #tabbar .tab-main span { color: var(--muted); margin-top: 6px; }
  #tabbar .tab-main.on span { color: var(--gold); }
  #tabbar .tab-main.on::before { display: none; }
  #tabbar .tab-main.on svg { filter: none; transform: none; }

  /* --- screen headers: compact --- */
  main { padding-top: 12px; }
  .section-title { margin-bottom: 12px; align-items: baseline; }
  .section-title h2 { font-size: 26px; }

  /* --- comfortable tap targets everywhere --- */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 38px; padding: 8px 14px; }
  .sl-tabs button, .tabs2 button, .seg3 button { min-height: 38px; padding: 8px 14px; }
  label.chk { min-height: 40px; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
  label.chk input { width: 18px; height: 18px; accent-color: var(--gold); }
  .packcard .muted a, .feed h3 a, a.muted, .sp-priv { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
  .lrow { min-height: 48px; }

  /* --- filters folded behind a button --- */
  .toolbar.folded:not(.open) > :not(input.q):not(input[type=search]):not(.m-filt) { display: none !important; }
  .toolbar.folded { align-items: center; }
  .toolbar.folded input.q, .toolbar.folded input[type=search] { flex: 1 1 0 !important; width: auto !important; min-width: 0; }
  .m-filt { flex: none; gap: 6px; }
  .m-filt i { font-style: normal; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: #2a1a00; font-size: 11px; font-weight: 800; display: none; place-items: center; padding: 0 5px; }
  .m-filt i:not(:empty) { display: inline-grid; }
  .toolbar.folded.open .m-filt { border-color: var(--gold); color: var(--gold); }
  .toolbar.folded.open { padding-bottom: 6px; }
  .toolbar.folded.open > select { flex: 1 1 calc(50% - 8px); }

  /* --- packs: one big pack per screen, swipe for the next --- */
  .shop { display: block; }
  .packs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -14px; padding: 4px 14px 10px; scrollbar-width: none; }
  .packs::-webkit-scrollbar { display: none; }
  .packcard { flex: 0 0 calc(100% - 28px); min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
  .shop .side { margin-top: 18px; position: static; }

  /* --- collection: three across, compact captions --- */
  .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .cap2 { font-size: 10.5px; gap: 3px; }
  .cap2 .pill { font-size: 9px; padding: 1px 5px; }
  .cap2 .coins.sm, .cap2 .coins { font-size: 11px; padding: 2px 6px; }
  .cap2 .mono { font-size: 10px; }
  .ctile { gap: 6px; }
  .ctile .gname, .ctile .cap2 b { font-size: 11.5px; }
}
@media (max-width: 760px) {
  .top .me .freepk { flex: none; width: auto; text-align: left; }
  .top .me { flex-wrap: nowrap; justify-content: flex-end; }
  .top .me a.me-link { display: inline-flex !important; align-items: center; justify-content: center; }
  .top .me .bell { flex: none; }
  #tabbar .tab-main svg { position: absolute; top: -6px; left: 50%; margin: 0 0 0 -14px; }
  #tabbar .tab-main span { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; margin: 0; }
}
@media (max-width: 760px) {
  /* search + Filters fill the first row; the opened filters wrap underneath */
  .toolbar.folded input.q, .toolbar.folded input[type=search] { flex: 1 1 calc(100% - 132px) !important; }
  .toolbar.folded.open > :not(input.q):not(input[type=search]):not(.m-filt) { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 760px) {
  /* copies screen: sort chips scroll sideways, Select stays on screen */
  .cp-bar { flex-wrap: wrap; row-gap: 8px; }
  .cp-seg { display: flex; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .cp-seg button { min-height: 36px; white-space: nowrap; }
}
@media (max-width: 760px) {
  /* three-across captions: let the pills wrap instead of overlapping */
  .cap2 > div { flex-wrap: wrap; justify-content: flex-start; row-gap: 3px; column-gap: 4px; min-width: 0; }
  .cap2 .mono { margin-left: auto; }
  .cap2 .coins { margin-left: auto; }
  .ctile .cap2 > div:empty { display: none; }
}
@media (max-width: 760px) {
  /* card page: the action buttons stay pinned at the bottom while you read */
  .detail .actions { position: sticky; bottom: 0; z-index: 3; margin: 14px -16px 0; padding: 10px 16px calc(10px + var(--sab)); background: linear-gradient(180deg, rgba(18,21,36,0), var(--panel) 22%); }
}
@media (max-width: 760px) {
  /* stat tiles: compact 2 x 2 instead of one tall card per number */
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; margin-bottom: 14px; }
  .statgrid .stat { padding: 10px 12px; border-radius: 12px; }
  .statgrid .stat span { font-size: 10px; letter-spacing: .08em; }
  .statgrid .stat b { font-size: 24px; }
  .statgrid .stat .sl-delta { font-size: 11px; }
  .mtabs { max-width: none !important; }
  .mk-search { margin-bottom: 10px; }
}
/* the spinning rays are wider than the screen: 'clip' (unlike 'hidden') also
   stops focus or scrollIntoView from sliding the whole opening sideways */
#overlay { overflow: clip; }
/* grid columns may shrink below their content's natural width (long numbers, names) */
.twocol > *, .sl-sets > *, .statgrid > * { min-width: 0; }
.lrow .grow { min-width: 0; }
.lrow .grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 760px) {
  /* chip rows (leaderboard tabs, chart filters) swipe sideways instead of wrapping */
  .sl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; margin-right: -2px; padding: 0 2px 2px; }
  .sl-tabs::-webkit-scrollbar { display: none; }
  .sl-tabs button { flex: none; white-space: nowrap; }
}

/* ===================== phone layer (phone.js): screens fit, no scrolling ===================== */
@media (max-width: 760px) {
  html.ph-fit, html.ph-fit body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  html.ph-fit main { position: fixed; left: 0; right: 0; top: var(--toph, 56px); bottom: calc(var(--tabh) + var(--sab)); padding: 10px calc(14px + var(--sar)) 6px calc(14px + var(--sal)); overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
  html.ph-fit main > * { flex: none; margin-top: 0 !important; margin-bottom: 0 !important; }
  html.ph-fit main .ph-fill { flex: 1 1 0; min-height: 0; }
  html.ph-fit .section-title { margin: 0; }
  html.ph-fit .section-title h2 { font-size: 24px; }
  .ph-sub { font-size: 11.5px !important; }

  /* pager */
  .pg { display: flex; flex-direction: column; min-height: 0; position: relative; }
  .pg-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pg-track::-webkit-scrollbar { display: none; }
  .pg-page { flex: 0 0 100%; display: grid; align-content: start; justify-items: center; scroll-snap-align: start; overflow: hidden; }
  .pg.list .pg-page { justify-items: stretch; }
  .pg-probe { position: absolute; visibility: hidden; left: 0; top: 0; width: 100%; pointer-events: none; }
  .pg-dots { height: 16px; display: flex; gap: 6px; justify-content: center; align-items: center; flex: none; }
  .pg-dots[hidden] { display: flex !important; visibility: hidden; }
  .pg-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line2); transition: width .2s, background .2s; }
  .pg-dots i.on { width: 16px; background: var(--gold); }
  .pg-dots.inline { height: auto; }

  /* chips */
  .ph-bar { display: flex; gap: 8px; align-items: center; }
  .ph-dots-wrap { margin-left: auto; }
  .ph-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .ph-chips::-webkit-scrollbar { display: none; }
  .ph-chip { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--text); font: 600 13px Inter, sans-serif; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
  .ph-chip.on { border-color: var(--gold); background: rgba(246,196,83,.12); }
  .ph-chip span { color: var(--muted); font-size: 11px; font-weight: 500; }

  /* close buttons: always on top, never covered by content */
  .mclose { position: fixed !important; top: calc(var(--sat) + 10px) !important; right: calc(var(--sar) + 10px) !important; margin: 0 !important; float: none !important; z-index: 85 !important; width: 40px; height: 40px; }
  .mbox { position: relative; }
  .mbox.sm .mclose { position: absolute !important; top: 12px !important; right: 12px !important; }
}

/* sheets */
.ph-sheet-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(3,4,8,.62); display: flex; align-items: flex-end; animation: fadein .18s both; }
.ph-sheet-wrap.out { opacity: 0; transition: opacity .18s; }
.ph-sheet { width: 100%; max-height: 82dvh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--panel2), var(--bg2)); border-top: 1px solid var(--line2); border-radius: 20px 20px 0 0; padding: 0 16px calc(var(--sab) + 16px); animation: m-up .24s cubic-bezier(.2,.8,.3,1) both; }
.ph-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; flex: none; }
.ph-sheet-h b { font: 800 20px 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.ph-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--text); font-size: 16px; }
.ph-sheet-b { overflow-y: auto; overscroll-behavior: contain; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.ph-sheet-b > .feed, .ph-sheet-b > .daily { background: none; border: 0; padding: 0; position: static; }

@media (max-width: 760px) {
  /* --- a card: one screen --- */
  .mbox.ph-detail { height: 100dvh; overflow: hidden !important; padding-top: var(--sat); display: flex; flex-direction: column; }
  .ph-detail .detail { flex: 1; min-height: 0; display: flex !important; flex-direction: column; }
  .ph-detail .stage { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 4px !important; gap: 4px; }
  .ph-detail .pd-head { padding-right: 52px; }
  .ph-detail .pd-head h2 { font-size: 24px; margin: 0; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ph-detail .pd-head .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ph-detail .holder { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .ph-detail .info { flex: none; padding: 6px 16px calc(10px + var(--sab)) !important; display: flex !important; flex-direction: column; gap: 10px; border: 0 !important; background: none !important; }
  .pd-pills > div { margin: 0 !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .pd-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  .pd-nums div { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; min-width: 0; }
  .pd-nums span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .pd-nums b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .pd-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .pd-tabs::-webkit-scrollbar { display: none; }
  .pd-tab { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--text); font: 600 13px Inter, sans-serif; }
  .pd-actions { display: flex; gap: 8px; }
  .pd-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-actions .pd-morebtn { flex: 0 0 48px; font-size: 20px; }
  .pd-more { display: flex; flex-direction: column; gap: 8px; }
  .pd-more .btn { width: 100%; }
  .pd-sheet { display: flex; flex-direction: column; gap: 14px; }

  /* --- copies of one card --- */
  .mbox.ph-copies { height: 100dvh; overflow: hidden !important; display: flex; flex-direction: column; padding-top: var(--sat); }
  .ph-copies .cp-head { flex: none; display: flex !important; gap: 12px; padding: 10px 60px 4px 14px !important; align-items: center; }
  .ph-copies .cp-art { flex: none; }
  .ph-copies .cp-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .ph-copies .cp-info h2 { font-size: 22px; margin: 0; line-height: 1; }
  .ph-copies .cp-info > .muted { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ph-copies .cp-info > .pill { align-self: flex-start; }
  .ph-copies .cp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 2px 0 0; }
  .ph-copies .cp-stats div { padding: 4px 6px; }
  .ph-copies .cp-stats span { font-size: 8.5px; letter-spacing: .06em; }
  .ph-copies .cp-stats b { font-size: 13px; }
  .ph-copies .cp-fins { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; }
  .ph-copies .cp-bar { flex: none; padding: 6px 14px 0 !important; }
  .ph-copies .cp-acts { flex: none; padding: 6px 14px 0 !important; }
  .ph-copies .ph-fill { flex: 1 1 0; min-height: 0; padding: 8px 12px calc(4px + var(--sab)); }

  /* --- packs --- */
  html.ph-fit .shop.ph-fill { display: flex; flex-direction: column; }
  html.ph-fit .shop.ph-fill > div:first-child { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  html.ph-fit .shop .packs { flex: 1; min-height: 0; margin: 0 -14px; padding: 0 14px; align-items: stretch; }
  html.ph-fit .shop .packcard { height: 100%; justify-content: center; gap: 8px; padding: 12px 14px; }
  html.ph-fit .packcard h3 { font-size: 22px; margin: 0; text-align: center; line-height: 1; }
  html.ph-fit .packcard .tag { font-size: 12px; margin: 0; text-align: center; }
  html.ph-fit .packcard .row { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html.ph-fit .packcard .row .btn { width: 100%; padding-left: 6px; padding-right: 6px; }
  html.ph-fit .packcard .row .free { grid-column: 1 / -1; }
  html.ph-fit .packcard .oddslink { min-height: 30px; padding: 4px 10px; }
  html.ph-fit .packcard .stockbar { width: 100%; }
  .ph-hero { padding: 12px !important; gap: 8px !important; }
  .ph-hero .big { font-size: 18px !important; }
  .ph-hero .muted { display: none; }
}
/* inside a pager every item is measured and pages are drawn as you swipe: no placeholder sizes */
.pg .ctile, .pg .lrow, .pg .bk-pocket, .pg-probe > * { content-visibility: visible !important; }
/* a tile is exactly as wide as its card; the caption wraps under it */
.pg .ctile, .pg-probe .ctile { width: min-content; }
.pg .ctile .cap2 { max-width: none; width: 100%; }
@media (max-width: 760px) { .ph-copies .cp-bar { flex-wrap: nowrap; } .ph-copies .cp-bar > .muted:first-child, .ph-copies .cp-bar > span[style*="flex:1"] { display: none; } .ph-copies .cp-bar .cp-seg { flex: 1; min-width: 0; } .ph-copies .cp-sel { flex: none; } }
@media (max-width: 760px) { .ph-detail .holder { align-self: stretch; width: 100%; } }

@media (max-width: 760px) {
  /* --- binder: chips for binders, one-line header, the page fills the rest --- */
  html.ph-fit .bk-shelf { margin: 0 -14px !important; padding: 0 14px 2px !important; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  html.ph-fit .bk-shelf::-webkit-scrollbar { display: none; }
  html.ph-fit .bk-book { flex: none; flex-direction: row !important; gap: 6px !important; align-items: center; min-height: 36px; padding: 0 12px !important; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); width: auto !important; }
  html.ph-fit .bk-book.on { border-color: var(--gold); background: rgba(246,196,83,.12); }
  html.ph-fit .bk-book .bk-c, html.ph-fit .bk-book .bk-addc { display: none; }
  html.ph-fit .bk-book b { font-size: 13px; white-space: nowrap; }
  html.ph-fit .bk-book span { font-size: 11px; color: var(--muted); white-space: nowrap; }
  html.ph-fit .bk-head { display: flex; align-items: center; gap: 10px; }
  html.ph-fit .bk-head .bk-hc { display: none; }
  html.ph-fit .bk-head h3 { font-size: 20px; margin: 0; line-height: 1; }
  html.ph-fit .bk-head .muted { font-size: 11.5px; }
  html.ph-fit .bk-head .btn { min-height: 34px; padding: 6px 12px; margin-left: auto; }
  html.ph-fit .bk-main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  html.ph-fit .bk-stagewrap { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  html.ph-fit .bk-nav { margin-top: 6px; }
  html.ph-fit .bk-nav .btn { min-height: 38px; min-width: 44px; }
  /* personalise / your cards: a bottom sheet instead of a side panel */
  html.ph-fit .bk-panel { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 70; max-height: 72dvh; border-radius: 20px 20px 0 0 !important; padding-bottom: calc(16px + var(--sab)) !important; box-shadow: 0 -10px 40px rgba(0,0,0,.6); }

  /* --- market --- */
  html.ph-fit .mk-stats { display: flex !important; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  html.ph-fit .mk-stats .stat { flex: 1 0 auto; padding: 6px 10px; }
  html.ph-fit .mk-stats .stat b { font-size: 18px; }
  html.ph-fit .mk-stats .stat .sl-delta { display: none; }
  html.ph-fit .mk-search { margin: 0; }
  html.ph-fit .mk-q { padding: 10px 14px; font-size: 15px; }
  html.ph-fit .mtabs button { min-height: 36px; padding: 6px 8px; font-size: 13px; }
  html.ph-fit .mk-pane:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  html.ph-fit .mk-pane .panel { padding: 4px; }
  html.ph-fit .mk-head { display: none; }

  /* --- stats --- */
  html.ph-fit .sp-tabs { flex: none; }
  html.ph-fit .sp-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  html.ph-fit .sp-panel > .panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 10px; }
  html.ph-fit .sp-panel > .panel > h3 { display: none; }
  html.ph-fit .sp-panel .sp-sub { margin: 0 0 6px; }

  /* generic: lists inside a pager get compact rows */
  .pg.list .lrow { padding: 6px 4px; min-height: 0; }
  .pg.list .mk-row, .pg.list .mk-lrow, .pg.list .mk-sale, .pg.list .mk-orow { width: 100%; }
}

@media (max-width: 760px) {
  /* --- sections: one part of a screen at a time --- */
  .ph-secs { display: flex; flex-direction: column; }
  .ph-sec { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  .ph-sec[hidden] { display: none !important; }
  .ph-sec > * { flex: none; margin: 0 !important; }
  .ph-sec > .ph-fill, .ph-sec > .ph-panel, .ph-sec > .panel:only-child { flex: 1 1 0; min-height: 0; }
  .ph-panel { display: flex !important; flex-direction: column; gap: 8px; padding: 10px !important; }
  .ph-panel > h3 { display: none; }
  .ph-panel > .ph-fill { flex: 1 1 0; min-height: 0; }
  .ph-panel .sp-sub { margin: 0; }
  .ph-chip span:empty { display: none; }
  .ph-note { font-size: 11.5px; margin: 0 !important; }
  .ph-info { min-height: 30px; padding: 0 10px; font-size: 12px; margin-left: auto; }
  html.ph-fit .section-title { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
  html.ph-fit .section-title .btn { min-height: 36px; padding: 6px 12px; }

  /* population rows */
  .ph-prow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 52px; gap: 8px; align-items: center; padding: 9px 8px; border-radius: 10px; font-size: 13px; border-bottom: 1px solid var(--line); }
  .ph-prow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ph-prow .r { font-size: 12px; }
  .ph-prow .n { text-align: right; font-weight: 700; }
  .ph-prow:active { background: var(--panel2); }
  .ph-popdet { display: flex; flex-direction: column; gap: 12px; }
  .ph-popdet .sp-chips { font-size: 13px; }

  /* trades rows fill the width */
  .pg.list .trow, .pg.list .tcard { width: 100%; }

  /* create: form tabs may hold more than a screen; only those scroll, inside the tab */
  .ph-sec.ph-form { overflow-y: auto; overscroll-behavior: contain; }
  .ph-sec .cprev { position: static !important; padding: 0 !important; flex: 1 1 0; min-height: 0; justify-content: center; }
  .ph-sec .panel { margin: 0; }

  /* player trophy case */
  .ph-sec .trophy { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 10px !important; margin: 0 !important; }
  .ph-sec .trophy .trophy-head h3 { font-size: 18px; margin: 0; }

  /* guide */
  .ph-sec > p, .ph-sec > .panel p { font-size: 13px; line-height: 1.45; }
  .ph-sec .guide-grade { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  .ph-sec .guide-grade .tbl { font-size: 12px; }
  .ph-sec .gcell p { display: none; }

  /* market card page */
  html.ph-fit .mk-top { display: flex !important; gap: 12px; align-items: center; justify-items: start; }
  html.ph-fit .mk-info h2 { font-size: 22px !important; line-height: 1; }
  html.ph-fit .mk-info > .muted { margin: 2px 0 6px !important; font-size: 12px; }
  html.ph-fit .mk-sum { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px; margin: 0 0 6px !important; }
  html.ph-fit .mk-sum .stat { padding: 4px 6px; }
  html.ph-fit .mk-sum .stat span { font-size: 8.5px; }
  html.ph-fit .mk-sum .stat b { font-size: 14px; }
  html.ph-fit .mk-sum .stat .sl-delta { display: none; }
  html.ph-fit .mk-actions .btn { min-height: 36px; padding: 6px 10px; font-size: 13px; }
  html.ph-fit .mk-back { margin: 0 !important; font-size: 13px; }
  html.ph-fit .mk-chart-panel { display: flex; flex-direction: column; padding: 10px !important; }
  html.ph-fit .mk-chart-panel .mk-chart-h h3 { display: none; }
  html.ph-fit .mk-chart { flex: 1; min-height: 0; }
}
@media (max-width: 760px) { html.ph-fit[data-view=binder] main > .section-title { display: none; } }
@media (max-width: 760px) { html.ph-fit .bk-stagewrap { align-items: stretch; } html.ph-fit .bk-stage { width: 100%; display: flex; justify-content: center; } }
@media (max-width: 760px) { html.ph-fit .bk-stagewrap { width: 100%; margin: 0; align-self: stretch; } }
/* the raised Packs button sticks up ~18px above the tab bar: keep content clear of it */
@media (max-width: 760px) { html.ph-fit main { padding-bottom: 22px; } }
@media (max-width: 760px) { html.ph-fit .bk-stage { align-items: center; } html.ph-fit .bk-open, html.ph-fit .bk-track, html.ph-fit .bk-page { height: auto; } }
@media (max-width: 760px) { .ph-panel > .pop, .ph-panel > .lf, .ph-panel > .hf, .ph-panel > .rp, .ph-panel > .po { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; } .ph-panel > .pop > .ph-fill { flex: 1 1 0; min-height: 0; } }
@media (max-width: 760px) { .ph-panel .sp-sub { display: none; } }
@media (max-width: 760px) { .mk-lrow { grid-template-columns: 40px minmax(0, 1fr) auto auto !important; } .mk-lrow .btn.sm { min-height: 34px; padding: 6px 12px; } }
@media (max-width: 760px) {
  .summary.ph-summary { height: 100dvh; max-height: none; overflow: hidden !important; display: flex; flex-direction: column; gap: 8px; padding: calc(54px + var(--sat)) 14px calc(12px + var(--sab)) !important; }
  .ph-summary > * { flex: none; margin: 0 !important; }
  .ph-summary .display { font-size: 30px !important; line-height: 1; }
  .ph-summary > .ph-fill { flex: 1 1 0; min-height: 0; }
  .ph-summary .cell { max-width: none !important; }
  .ph-summary .sum-tags { gap: 3px; } .ph-summary .sum-tags .pill { font-size: 9px; padding: 1px 5px; }
  .ph-summary .mp-sub { font-size: 12px; } .ph-summary .mp-coll { font-size: 12px; text-align: center; }
  .ph-summary .sum-actions .btn { min-height: 42px; padding: 8px 6px; font-size: 13px; }
}
@media (max-width: 760px) {
  /* tables in popups: fit the width (no sideways scroll), headers do not stick */
  .mbox .tbl { display: table !important; width: 100%; table-layout: fixed; white-space: normal !important; font-size: 11px; }
  .mbox .tbl th, .mbox .tbl td { position: static !important; padding: 6px 3px; overflow-wrap: anywhere; line-height: 1.25; }
  .mbox .tbl th { font-size: 9px; letter-spacing: .04em; }
  .mbox h2.display { font-size: 24px !important; padding-right: 48px; }
  .mbox > p { font-size: 12.5px; }
}
@media (max-width: 760px) { .mbox .tbl th { font-size: 8.5px; letter-spacing: 0; overflow-wrap: normal; word-break: normal; } .mbox .tbl td { overflow-wrap: break-word; } }
/* big cards you can turn with a finger: the browser must not take the drag for scrolling */
.ph-detail .holder .pcard, .ph-detail .holder .slab, #overlay .stack .pcard { touch-action: none; }
@media (max-width: 760px) { .ph-sec .cprev > .seg, .ph-sec .cprev > .cdrag-hint { flex: none; } .ph-sec .cprev > .cstage { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } }