/* ==========================================================
   Hidden Temple - mobile.css
   Small-screen scale-down. Loaded site-wide, near </head> so
   it lands after each page's inline <style>. !important is used
   so it overrides those inline blocks on phones.
   ========================================================== */
@media (max-width: 600px) {

  /* ---- Banner image: bigger + zoomed-in crop on phones ---- */
  .banner-wrap img.banner-img {
    height: 210px !important;
    max-height: 210px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: 50% center !important;  /* image is pre-centered on the figure */
  }

  /* ---- Navigation: .banner-nav is handled by banner.css (hamburger
         menu). Legacy nav.top variant kept compact here. ---- */
  nav.top .nav-inner { padding: 8px 10px !important; gap: 8px !important; }
  nav.top .nav-links { gap: 2px !important; }
  nav.top .nav-links a { font-size: 9px !important; letter-spacing: 0.1em !important; padding: 5px 7px !important; }
  nav.top .nav-auth a { font-size: 9px !important; letter-spacing: 0.1em !important; padding: 5px 8px !important; }

  /* ---- Page headers ---- */
  .page-head { padding: 22px 14px 14px !important; }
  .page-title { font-size: clamp(19px, 6.4vw, 27px) !important; margin-bottom: 12px !important; }
  .page-sub { font-size: 13px !important; }
  .eyebrow { font-size: clamp(13px, 3.2vw, 16px) !important; letter-spacing: 0.16em !important; margin-bottom: 10px !important; }
  .section-head { font-size: 10px !important; letter-spacing: 0.2em !important; margin: 12px 0 16px !important; }

  /* ---- Relics: brand/category tiles -> compact 2-up grid ---- */
  .archive { padding: 12px 12px 48px !important; }
  .category-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 36px !important; }
  .cat-tile { min-height: 140px !important; padding: 12px 11px 11px !important; }

  /* ---- HT mobile standard: high-contrast text (lighten the gray vars) ---- */
  :root { --ink-dim: #c2cfcd; --ink-faint: #9aa8a6; }
  .page-sub, .set-desc-body p, .set-desc-body, .note-box, .series-sub,
  .set-desc-head, .tcg-set-desc, .tcg-era-desc, .tcg-disclaimer { color: var(--ink) !important; }
  .page-sub, .set-desc-body p { font-weight: 500 !important; }
  .meta-badge { color: var(--ink) !important; }

  /* ---- Set-list / set-detail pages — 2-up compact card grid (HT mobile standard) ---- */
  .sets-wrap, .sticker-head, .set-desc, .pack-art { padding-left: 11px !important; padding-right: 11px !important; }
  .sticker-head { margin: 24px auto 12px !important; }
  .sticker-head h2 { font-size: 12px !important; letter-spacing: 0.2em !important; }
  .sets-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .set-tile { flex-direction: column !important; align-items: stretch !important; min-height: 0 !important; padding: 7px !important; gap: 6px !important; }
  .set-tile .ph-f, .set-tile .ph-b { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
  .set-tile .body { flex: none !important; width: 100% !important; min-width: 0 !important; }
  .set-tile .snm { font-size: clamp(16px, 4.5vw, 20px) !important; font-weight: 700 !important; color: var(--ink) !important; line-height: 1.25 !important; }
  .set-tile .sn { font-size: clamp(13px, 3.2vw, 15px) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }
  .set-tile .sty { font-size: clamp(13px, 3.3vw, 15px) !important; color: var(--ink) !important; line-height: 1.35 !important; }
  .set-tile .jp { font-size: clamp(13px, 3.2vw, 15px) !important; color: var(--ink-dim) !important; }
  /* keep upload buttons comfortably tappable inside the 2-up tiles */
  .set-tile .ht-addphoto { min-width: 44px !important; min-height: 44px !important; font-size: clamp(13px, 3.4vw, 15px) !important; line-height: 1.15 !important; }

  /* ---- Deck-level tiles (Playing Cards: box front/back + shared card back) ---- */
  /* center them so an odd third tile isn't pushed awkwardly to the left */
  .deck-level-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
  .deck-level-grid .set-tile { width: calc(50% - 6px) !important; max-width: 220px !important; }

  /* ---- Pack art ---- */
  .pack-art-row { gap: 10px !important; }
  .pack-art-slot { width: 130px !important; height: 160px !important; }

  /* ---- Meta badges ---- */
  .meta-badges { gap: 6px !important; }
  .meta-badge { font-size: clamp(13px, 3.2vw, 15px) !important; padding: 6px 9px !important; letter-spacing: 0.06em !important; }

  /* ---- Footer ---- */
  footer { padding: 24px 14px 22px !important; font-size: 9px !important; }

  /* ---- Safety: never scroll sideways ---- */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
}

/* ==========================================================
   SET-TILE PACK ART (shared maker / set-index tile) — 2026-07-25
   ----------------------------------------------------------
   PACK ART = the sealed-pack photo painted on a set tile by
   assets/js/parent-pack-art.js. (Checklist ITEM photos are a
   different thing: .ph-f / .ph-b inside .sets-wrap tiles.)

   The art box used to be a fixed 4/5 frame with max-height:260px,
   so portrait pack shots (real ratios measured 0.56-0.67) were
   letterboxed: 80-107px of dead black per tile on desktop,
   27-46px on a phone. Fix: the box takes the photo's OWN aspect
   ratio (--ht-art-ar, set from the natural image size by
   parent-pack-art.js), so `contain` fills it exactly -> the photo
   is exactly as wide as its tile and there is no dead space.
   Grid is a fixed count: 4-up desktop, 3-up phone, 2-up on very
   narrow phones (<360px) where a 3rd column would force the
   16px set name to break mid-word.
   ========================================================== */
body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb){
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:8px !important;
  min-height:0 !important;
  padding:10px !important;
  overflow:hidden !important;
}
body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) > .set-tile-thumb{
  float:none !important;
  width:100% !important;
  height:auto !important;
  /* --ht-art-ar is written by parent-pack-art.js from the real image */
  aspect-ratio:var(--ht-art-ar, 4 / 5) !important;
  max-height:none !important;
  margin:0 !important;
  flex:0 0 auto !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) .set-name{
  margin:2px 0 0 !important;
  line-height:1.25 !important;
  /* no min-height: a one-line name must not reserve a blank second line */
  min-height:0 !important;
  font-size:16px !important;
  letter-spacing:0 !important;
  /* names wrap onto as many lines as they need — never truncate */
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:none !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:auto !important;
}
body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) .set-meta{
  margin:0 !important;
  line-height:1.35 !important;
  font-size:13px !important;
  letter-spacing:0.08em !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:break-word !important;
}
/* ==========================================================
   LANDING GRIDS FILL THE DESKTOP WIDTH — 2026-08-14
   ----------------------------------------------------------
   These grids used to be pinned to repeat(4, minmax(0,220px))
   centred, inside wrappers capped at 1200-1400px. Under
   banner.css's body{zoom:0.8} (>=600px) / {zoom:0.7} (>=1300px)
   that painted ~840px of a 1900px screen — 42-56% of the width,
   the rest empty margin. Now the wrapper cap is lifted and the
   grid auto-FITS columns from a real-px minimum, so the row
   grows with the screen (3-up at 701px -> ~7-up at 1900px).

   SCOPE: the landing pattern is `a.set-tile > .set-tile-thumb`
   (a linked set card holding pack art). No checklist page uses
   it — checklist item tiles hold .ph-f / .ph-b — so the :has()
   test keeps checklists on their own rules. The `div` arm of
   the second :is() catches the handful of landing grids built
   as a bare inline-styled <div> instead of .sets-grid
   (meiji / nissui): !important beats their inline template.

   NO vw UNITS: vw is computed against the UNZOOMED viewport, so
   it lies inside a zoomed body. Author px are ~1.4x the painted
   size at zoom 0.7 — 340px author is ~238px on screen.

   SPARSE PAGES: auto-fit collapses its empty tracks, so 1fr
   would blow a 1- or 3-set page up into vast cards. The
   tile-count caps below hold a short row to <=420px a tile and
   centre it instead of stranding it at the left edge.

   SPECIFICITY is deliberately (0,4,2) — identical to the rule
   this replaced — so a page carrying its own approved
   composition (the Astryx-axis sticker pages) keeps
   out-cascading it exactly as it did before. The wrapper rule
   is held DOWN to (0,1,1) with :where() for the same reason: it
   beats the plain `.sets-wrap{max-width:1200px}` page defaults
   (and the two inline max-widths), and still loses to
   `html body .sets-wrap{max-width:min(var(--amax),100%)
   !important}` at (0,1,2), which is how the Astryx pages pin
   their own page axis.
   ========================================================== */
@media (min-width:701px){
  body :is(.sets-wrap,.tcg-era):has(:where(a.set-tile > .set-tile-thumb)){
    max-width:none !important;
  }
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile > .set-tile-thumb){
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) !important;
    justify-content:center !important;
    justify-items:stretch !important;
    /* start, not stretch: a short tile must not be padded out to the
       height of the tallest tile in its row (that is dead space too) */
    align-items:start !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile > .set-tile-thumb) > a.set-tile{
    justify-self:stretch !important;
  }
  /* Short rows: cap the group at ~420px a tile and centre it. */
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile:nth-of-type(1):last-of-type > .set-tile-thumb){ max-width:420px !important; }
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile:nth-of-type(2):last-of-type > .set-tile-thumb){ max-width:854px !important; }
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile:nth-of-type(3):last-of-type > .set-tile-thumb){ max-width:1288px !important; }
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile:nth-of-type(4):last-of-type > .set-tile-thumb){ max-width:1722px !important; }
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile:nth-of-type(5):last-of-type > .set-tile-thumb){ max-width:2156px !important; }
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile:nth-of-type(6):last-of-type > .set-tile-thumb){ max-width:2590px !important; }
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile:nth-of-type(7):last-of-type > .set-tile-thumb){ max-width:3024px !important; }
}
@media (min-width:1300px){
  /* zoom drops to 0.7 here, so the author-side minimum steps up to keep
     the painted tile the same ~240px it is in the 701-1299 band. */
  body :is(.sets-wrap,.tcg-era) :is(.sets-grid,div):has(> a.set-tile > .set-tile-thumb){
    grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)) !important;
  }
}
@media (max-width:700px){
  body .sets-wrap .sets-grid:has(> a.set-tile > .set-tile-thumb){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:start !important;
    gap:8px !important;
  }
  body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb){
    padding:6px !important;
    gap:6px !important;
  }
  body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) > .set-tile-thumb{
    max-height:none !important;
  }
  body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) .set-meta{
    letter-spacing:0.04em !important;
  }
}
/* Very narrow phones (iPhone SE / 320px): 3 columns would leave ~87px of
   text width, which is narrower than the longest single word at the 16px
   name minimum, so drop to 2-up rather than break words or shrink type. */
@media (max-width:359px){
  body .sets-wrap .sets-grid:has(> a.set-tile > .set-tile-thumb){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* ==========================================================
   Mobile fit-to-screen — phone (9:16) layout.
   Fixes the search bar overflow and stacks wide tables so
   nothing is cut off or needs sideways scrolling.
   ========================================================== */
@media (max-width: 720px) {

  /* Box-sizing safety: 100%-width boxes never overflow the screen */
  input, select, textarea,
  .finder, .finder-inner, .finder-input-wrap,
  .relics-table-wrap, .relics-table { box-sizing: border-box !important; }

  /* ---- Archive search bar fits fully on screen ---- */
  .finder { padding: 0 12px 26px !important; max-width: 100vw !important; }
  .finder-inner { padding: 20px 14px 16px !important; }
  .finder-title { font-size: 18px !important; }
  .finder-input-wrap { max-width: 100% !important; }
  #finder-input {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;            /* 16px stops iOS zoom-on-tap */
    padding: 13px 14px 13px 38px !important;
  }
  .finder-input-wrap::before { left: 14px !important; }

  /* ---- Search results: stacked cards, no sideways scroll ---- */
  .relics-table-wrap { padding: 0 12px !important; max-width: 100vw !important; }
  .relics-controls { gap: 10px !important; padding: 0 0 12px !important; }
  .relics-ctl-group { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
  .relics-table { border: none !important; background: transparent !important; }
  .relics-table thead { display: none !important; }
  .relics-table tbody,
  .relics-table tr,
  .relics-table td { display: block !important; width: 100% !important; }
  .relics-table tr {
    margin: 0 0 12px !important;
    border: 1px solid #1f2e30 !important;
    background: rgba(15,28,30,0.5) !important;
  }
  .relics-table td {
    border: none !important;
    border-bottom: 1px solid rgba(31,46,48,0.45) !important;
    padding: 8px 14px !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
  .relics-table td:last-child { border-bottom: none !important; }
  .relics-table td::before {
    display: block !important;
    font-family: 'Cinzel', serif !important;
    font-size: 8.5px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #c9a968 !important;
    margin-bottom: 3px !important;
  }
  .relics-table td.col-num::before     { content: 'Number'; }
  .relics-table td.col-set::before     { content: 'Set'; }
  .relics-table td.col-year::before    { content: 'Year'; }
  .relics-table td.col-type::before    { content: 'Type'; }
  .relics-table td.col-img::before     { content: 'Image'; }
  .relics-table td.col-actions::before { content: 'Open'; }
  /* Name is the card title — no label, larger */
  .relics-table td.col-name {
    padding-top: 12px !important;
    font-size: 15px !important;
    color: #d6e2e0 !important;
  }
  .relics-table td.col-name::before { display: none !important; }
  .relics-table td.col-img .thumb { width: 70px !important; height: 70px !important; }

  /* Compact mobile search cards. This overrides the older label/value card
     layout above so each result fits like a useful row instead of a tall form. */
  .relics-table tbody { display: block !important; width: 100% !important; }
  .relics-table tr {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 3px 9px !important;
    margin: 0 0 8px !important;
    padding: 8px !important;
  }
  .relics-table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .relics-table td::before { display: none !important; content: "" !important; }
  .relics-table td.col-img { grid-column: 1 !important; grid-row: 1 / span 4 !important; }
  .relics-table td.col-img .thumb {
    width: 54px !important;
    height: 54px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .relics-table td.col-num {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  .relics-table td.col-name {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
  }
  .relics-table td.col-set {
    grid-column: 2 !important;
    grid-row: 3 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .relics-table td.col-year {
    grid-column: 2 !important;
    grid-row: 4 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
  .relics-table td.col-type {
    grid-column: 2 !important;
    grid-row: 4 !important;
    justify-self: start !important;
    margin-left: 46px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
  }
  .relics-table td.col-actions {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    white-space: normal !important;
  }
  .relics-table td.col-actions .rb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    font-size: 8px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }
  .relics-table td.col-actions select.rb {
    grid-column: span 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* ---- Phase-1 finder card grid: single column ---- */
  .finder-list { grid-template-columns: 1fr !important; }
}


/* ==========================================================
   Tone down neon glow on phones. The heavy multi-layer text
   glows read as overwhelming on bright screens (esp. iPhone).
   Desktop keeps the full effect; this only softens it <=720px.
   ========================================================== */
@media (max-width: 720px) {
  /* TCG set-page neon headings — keep them lit, drop the big halo */
  .set-grid .t {
    text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 8px currentColor !important;
  }
  /* Glowing page-title accent */
  .page-title em { text-shadow: 0 0 8px rgba(141,212,207,0.30) !important; }
  /* Big brand letter-glyphs on the Relics pages */
  .brand-glyph, .sh-brand-glyph { text-shadow: 0 0 12px rgba(109,181,176,0.18) !important; }
  /* Calmer card jump-to highlight — no expanding pulse ring */
  .set-tile:target {
    box-shadow: 0 0 0 1px rgba(141,212,207,0.55) !important;
    animation: none !important;
  }
}


/* ==========================================================
   HT mobile checklist/set-page containment (sitewide, mobile-only).
   Fixes reported phone issues on set/checklist pages:
   - grid items not shrinking to the 1fr column (horizontal overflow)
   - condition/grade + anvil controls (select min-width:140px) overflowing cards
   - long item titles clipping/overflowing neighbouring cards
   - Report-an-Issue + back-to-top fixed buttons overlapping & covering cards
   Desktop is unaffected (all rules are inside the phone media query).
   ========================================================== */
@media (max-width: 600px) {
  /* grid items must be allowed to shrink to their 1fr column */
  .sets-grid > .set-tile, .set-tile { min-width: 0 !important; }
  .set-tile, .set-tile * { box-sizing: border-box !important; max-width: 100% !important; }
  /* let children shrink, but keep the +Photo button comfortably tappable */
  .set-tile *:not(.ph-f):not(.ph-b):not(.ht-addphoto) { min-width: 0 !important; }

  /* long item names/labels wrap inside their own card */
  .set-tile .snm, .set-tile .sn, .set-tile .sty { overflow-wrap: anywhere !important; word-break: break-word !important; }

  /* condition/grade + anvil controls and any field stay inside the card */
  .set-tile .anvil-ctl { width: 100% !important; flex-wrap: wrap !important; }
  .set-tile .anvil-ctl select, .set-tile .cond-select, .set-tile select,
  .set-tile input, .set-tile textarea {
    min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  .set-tile .anvil-ctl .anvil-btn { flex-basis: 100% !important; width: 100% !important; }

  /* room so the fixed floating controls never permanently hide the last cards */
  body { padding-bottom: 120px !important; }

  /* floating controls: page-up bottom-right, Report bottom-left so they don't
     overlap each other or cover checklist card content */
  #ht-back-to-top { right: 12px !important; bottom: 12px !important; }
  .ht-report-btn {
    left: 12px !important; right: auto !important; bottom: 12px !important;
    font-size: 10px !important; padding: 7px 10px !important; letter-spacing: 0.1em !important;
    max-width: 60vw !important; box-sizing: border-box !important;
  }
}

/* HT mobile (hardening): stack the anvil/condition control vertically and clip
   the card so a wide control row can never paint past its card on phones. */
@media (max-width: 600px) {
  .set-tile { overflow: hidden !important; }
  .set-tile .anvil-ctl { flex-direction: column !important; align-items: stretch !important; }
  .set-tile .anvil-ctl select, .set-tile .anvil-ctl .anvil-btn { width: 100% !important; max-width: 100% !important; }
}

/* HT mobile (offset fix): the anvil/condition control is flex-basis:100% (meant
   for the desktop flex-ROW tile). In the forced mobile flex-COLUMN tile that
   pushed it into a wrapped 2nd column, landing outside its card. Force single
   nowrap column and reset the control's basis so it stacks inside the card. */
@media (max-width: 600px) {
  .set-tile { flex-wrap: nowrap !important; }
  .set-tile > .anvil-ctl, .set-tile .anvil-ctl {
    flex-basis: auto !important; align-self: stretch !important; width: 100% !important; max-width: 100% !important;
  }
}

/* ==========================================================
   HT mobile refinement (v3): front/back side-by-side + smaller
   thumbnails inside each card; Anvil condition/grade collapsed
   behind a small toggle. Sitewide, mobile-only. Desktop = off.
   ========================================================== */
@media (max-width: 600px) {
  /* front + back photo slots side by side (2-up) inside the card; smaller */
  .set-tile { flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 6px !important; }
  .set-tile .ph-f, .set-tile .ph-b {
    flex: 0 0 calc(50% - 3px) !important; width: calc(50% - 3px) !important; max-width: calc(50% - 3px) !important;
    height: auto !important; aspect-ratio: 1 / 1 !important;
    margin-bottom: 28px !important;
  }
  .set-tile .ph-f:not(.has-img), .set-tile .ph-b:not(.has-img) {
    margin-bottom: 52px !important;
  }
  .set-tile .body { flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; margin-top: 0 !important; }
  .set-tile .snm, .set-tile .jp, .set-tile .sty {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  .set-tile .anvil-ctl { flex: 0 0 100% !important; width: 100% !important; flex-wrap: wrap !important; }

  /* Anvil control collapsed behind a small toggle on mobile */
  .set-tile .anvil-toggle { display: inline-flex !important; }
  .set-tile .anvil-ctl .anvil-fields { display: none !important; }
  .set-tile .anvil-ctl.open .anvil-fields {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    width: 100% !important; margin-top: 6px !important; gap: 6px !important;
  }
  .set-tile .anvil-ctl.open .anvil-fields select,
  .set-tile .anvil-ctl.open .anvil-fields .anvil-btn { width: 100% !important; max-width: 100% !important; }
}

/* ===== Relics landing / category tiles — mobile compaction (2026-05-31) =====
   Scoped to relics.html-only classes (.sh-*). 2 tiles per row, reduced height/padding.
   No effect on other pages (these selectors exist only on the Relics landing page). */
@media (max-width: 600px) {
  .sh-wrap { padding-left: 12px !important; padding-right: 12px !important; }
  .sh-cat-head { padding-left: 16px !important; padding-right: 16px !important; margin-top: 32px !important; }

  /* category / brand tiles: 2-up, compact */
  .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .sh-brand-tile { min-height: 0 !important; }
  .sh-brand-icon { height: 50px !important; }
  .sh-brand-glyph { font-size: 17px !important; letter-spacing: 0.02em !important; }
  .sh-brand-glyph small { font-size: 6px !important; letter-spacing: 0.22em !important; margin-top: 3px !important; }
  .sh-brand-body { padding: 9px 10px !important; }
  .sh-brand-name { font-size: 11px !important; letter-spacing: 0.05em !important; line-height: 1.25 !important; margin-bottom: 4px !important; }
  .sh-brand-region { font-size: 8px !important; letter-spacing: 0.12em !important; margin-bottom: 6px !important; }
  .sh-brand-desc { font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 10px !important; }
  .sh-brand-years { font-size: 8px !important; letter-spacing: 0.1em !important; margin-top: 2px !important; }
  .sh-brand-explore { font-size: 8px !important; letter-spacing: 0.16em !important; gap: 6px !important; }
  .sh-soon-badge { font-size: 7px !important; padding: 2px 5px !important; }

  /* archive search results: 2-up compact text tiles */
  .sh-sets-wrap { padding-left: 12px !important; padding-right: 12px !important; }
  .sh-sets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .sh-set-tile { padding: 10px 11px !important; }

  /* featured TCG thin tile: tighten padding, keep readable */
  .franchise-tile-thin { padding: 14px 16px !important; }
}


/* ==========================================================
   Pack-art / photo viewer (site-wide) — added 2026-06-06
   Loaded after each page's inline <style>; these rules are
   top-level (outside @media) so they apply on every screen.
   1) Neutralize the old overflowing hover-zoom so thumbnails
      never paint over neighboring cards/text.
   2) Lightbox overlay styling (opened by back-to-top.js viewer).
   ========================================================== */
.set-tile-thumb:hover, .tile-packart:hover, .ph-f:hover, .ph-b:hover {
  transform: none !important;
  box-shadow: none !important;
  z-index: auto !important;
}

#ht-lightbox {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,0.86);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#ht-lightbox.ht-open { display: flex; }
#ht-lightbox .ht-lb-img {
  max-width: min(90vw, 560px); max-height: 88vh; width: auto; height: auto;
  object-fit: contain; background: #0a1416;
  border: 1px solid rgba(201,169,104,0.5);
  box-shadow: 0 18px 60px rgba(0,0,0,0.8);
}
#ht-lightbox .ht-lb-close {
  position: absolute; top: 14px; right: 18px; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(11,23,25,0.9);
  border: 1px solid rgba(141,212,207,0.5); color: #8ed4cf;
  font: 600 24px/1 "IBM Plex Mono", monospace;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
#ht-lightbox .ht-lb-close:hover { background: rgba(141,212,207,0.18); color: #d6e2e0; }

/* === Sitewide checklist item-name wrap fix (2026-06-06) ===
   Root cause: .snm had overflow-wrap:break-word, which let long Latin names
   (e.g. "Jigglypuff") break mid-word in narrow columns -> "Jigglypu / ff".
   Fix: keep English names whole (never split letter-by-letter); let Japanese
   (.jp) wrap by character so it stays readable; gentle desktop-only shrink so
   long names fit on one line. Applies on every page that loads this file
   (Daiichi, Patchin, Nissui, Karuta, Pencil Boards, all .set-tile grids). */
.set-tile .snm {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.set-tile .snm .jp {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
@media (min-width: 601px) {
  .set-tile .snm { font-size: clamp(11px, 1.25vw, 13px) !important; }
}

/* ============================================================
   GLOBAL FLUID TYPOGRAPHY (all widths, every page) — 2026-06-14
   Continuous clamp(vw) scaling so set/checklist text shrinks to
   fit small screens and grows on large ones, with no breakpoint
   cliff. Bounded by min/max. Promoted from the World Hobby Fair
   ADV page after review. body-prefixed to win over older rules.
   ============================================================ */
body .page-head .page-title{font-size:clamp(15px,7vw,32px) !important;}
/* Topsun 3 custom pages (Chris hand-designed tg3/tsg3) keep their approved title
   size — frozen at the pre-compaction 48px cap, higher specificity than the rule
   above so the global set-page shrink never touches them. 2026-08-08. */
body.tg3-page .page-head .page-title,
body.tsg3-page .page-head .page-title{font-size:clamp(15px,7vw,48px) !important;}
/* Floors below are the READABLE minimum, not a decorative low end: a clamp()
   floor is what every phone actually gets, because the vw term does not reach
   the max until well past 600px. (e.g. the old relics-back rule was
   clamp(7px,1.8vw,14px) — 1.8vw only hits 14px at a 778px viewport, so every
   phone rendered the 7px floor.) Small labels floor at 13px, names at 16px. */
body .page-head .eyebrow{font-size:clamp(13px,3.2vw,16px) !important;}
body .page-head .eyebrow::before,body .page-head .eyebrow::after{font-size:clamp(10px,2.4vw,12px) !important;margin:0 6px !important;}
body .page-head .relics-back{font-size:clamp(13px,3.4vw,14px) !important;}
body .meta-badges .meta-badge{font-size:clamp(13px,3.2vw,15px) !important;}
body .set-desc .set-desc-head{font-size:clamp(8px,2vw,15px) !important;}
body .set-desc .t{font-size:clamp(11px,4.7vw,34px) !important;line-height:1.2 !important;}
body .set-desc .b{font-size:clamp(11px,3.1vw,24px) !important;}
body .pack-art .pack-art-head{font-size:clamp(8px,2vw,15px) !important;}
body .sticker-head h2{font-size:clamp(10px,3.3vw,24px) !important;}
body .sticker-head .sh-sub{font-size:clamp(7px,2.3vw,16px) !important;}
body .ht-set-search{font-size:clamp(10px,2.6vw,20px) !important;}
body .set-tile .snm{font-size:clamp(16px,3.6vw,26px) !important;line-height:1.25 !important;}
body .set-tile .snm .jp{font-size:clamp(13px,2.7vw,20px) !important;}
body .set-tile .sn{font-size:clamp(13px,2.1vw,16px) !important;}
body .set-tile .sty{font-size:clamp(13px,2.3vw,17px) !important;}
/* nowrap is kept here (all widths); the phone block at the end of this file
   switches it to normal, because only the narrow 2-up slots need to wrap. */
body .set-tile .ht-addphoto{font-size:clamp(13px,3.4vw,14px) !important;white-space:nowrap;}
/* desktop/tablet keeps its existing size; the 13px legibility floor is applied
   in the phone block at the end of this file so wide layouts do not reflow. */
body .set-tile .ht-credit{font-size:clamp(13px,1.4vw,14px) !important;}

/* + Photo clearance for captioned multi-photo columns (.fp-col with .fp-cl
   labels: fp2/fp3/fp4 tiles) on pages that do NOT load ht-set-grid.css
   (Dunkin' Boomer, Trozei, Hanafuda, Ensky ADV DX Waza 4, Zukan 2005,
   Amada McDonald's Hyper). banner-anvil-cart.js hangs the button below the
   slot (position:absolute; top:100%; margin-top:3px); once the button grew
   to the 44px tap floor (f90bb8df2) it fully buried the slot caption
   ("1st Print" / "2nd Print" / "Holo" / "Back"). Reserve the same 52px
   strip ht-set-grid.css reserves so button (3px + 44px) and caption never
   touch. Desktop/tablet only: every phone block centres the button INSIDE
   the slot (top:50% / translate(-50%,-50%)) instead, so no strip is needed
   there. hsc1.css keeps its own margin:0 !important slot lock and wins. */
@media (min-width:601px){
  .set-tile .fp-col .ph-f:has(.ht-addphoto),
  .set-tile .fp-col .ph-b:has(.ht-addphoto) { margin-bottom:52px; }
}

/* Fix name/type overlap on narrow tiles: drop the type label to its own line
   on mobile so the Pokémon name gets the full row width (2026-06-14). */
@media (max-width:600px){
  body .set-tile .sty{width:100% !important; flex-shrink:0 !important; text-align:right !important; margin-top:1px !important;}
  body .set-tile .snm{flex:1 1 100% !important;}
}

/* Parent set-list tiles (Amada Sets, etc.): shrink the set NAME + meta on
   mobile so long titles fit cleanly instead of wrapping into a tall block.
   (.set-name is parent-tile only; checklist tiles use .snm.) 2026-06-14 */
@media (max-width:600px){
  body .set-tile .set-name{font-size:clamp(9.5px,2.7vw,11.5px) !important;line-height:1.18 !important;letter-spacing:0.02em !important;overflow-wrap:normal !important;word-break:normal !important;}
  body .set-tile .set-meta{font-size:clamp(7px,1.95vw,8.8px) !important;letter-spacing:0.06em !important;line-height:1.25 !important;}
  body .tcg-set-tile .tcg-set-name,
  body .hub-card .hub-name{font-size:clamp(9px,2.75vw,12px) !important;line-height:1.16 !important;letter-spacing:0.025em !important;overflow-wrap:normal !important;word-break:normal !important;}
  body .tcg-set-tile .tcg-set-meta,
  body .tcg-set-tile .tcg-set-desc,
  body .hub-card .hub-desc{font-size:clamp(7px,2vw,9px) !important;line-height:1.28 !important;letter-spacing:0.045em !important;}
  body .tcg-set-tile .tcg-set-explore,
  body .hub-card .hub-action{font-size:clamp(7px,1.95vw,8.5px) !important;letter-spacing:0.08em !important;}
}

/* Auxiliary sub-grid mobile fix (2026-07-03): any .sets-grid NOT inside the
   main .sets-wrap numbered checklist (pack-art / sealed / jumbo / box-topper /
   vault sub-lists) goes single-column on phones so long labels + the
   Add-to-Anvil control never overflow the narrow 2-up column and clip the
   right card. The main numbered checklist (.sets-wrap .sets-grid) stays 2-up.
   Exclude .hf-grid (multi-finish-slot pages like Artbox Hobby Flipz) so they
   keep their own 1-up-on-phones intent and the name/label row does not overlap. */
@media (max-width: 600px) {
  .sets-grid { grid-template-columns: 1fr !important; }
  .sets-wrap .sets-grid:not(.hf-grid) { grid-template-columns: 1fr 1fr !important; }
}

/* Photo-slot checklists go 1-up on phones (2026-07-26).
   ---------------------------------------------------------------------
   A checklist .set-tile is ITSELF a two-column photo grid (front | back —
   see the ":has(> .body)" and ":not(:has(> .body))" tile locks further
   down this file). Combined with the 2-up outer grid above, that put FOUR
   photo slots across a phone screen, and slot WIDTH was never constrained
   — only `min-height: clamp(84px,24vw,116px)` — so each slot collapsed to
   whatever the 4-across division left: 74px at 390px wide, i.e. 19% of the
   viewport against a 28% floor. Measured, not guessed.

   One tile per row hands the tile's two slots the full content width, so a
   slot lands at ~43-45% of the viewport at 320/390/412 while front and back
   stay side by side — the same shape the page-scoped #hsc1-checklist fix
   produces. Desktop is untouched (this block is phone-only) and the outer
   grid stays 2-up for tiles that carry no photo slot: plain numbered lists
   and the thumbnail nav cards, which have their own higher-specificity
   `:has(> a.set-tile > .set-tile-thumb)` rules at the end of this file.

   Scope note: the `:has(> .set-tile > .ph-f)` test only matches slots that
   are DIRECT children of the tile — the ordinary 1-front/1-back shape. The
   page-scoped layouts deliberately nest theirs deeper (HSC1 .fp-col,
   Stadium Action .hf-slot), so they do not match here at all, and the ones
   that do match (Topsun #pane-*, Toppu #tsg3-grid-*) pin their own columns
   from an ID, which outranks this rule. Keep it that way. */
@media (max-width: 600px) {
  .sets-wrap .sets-grid:not(.hf-grid):has(> .set-tile > .ph-f),
  .sets-wrap .sets-grid:not(.hf-grid):has(> .set-tile > .ph-b) {
    grid-template-columns: 1fr !important;
  }
}

/* Pack-art mobile containment (2026-07-03): the page-local flex pack-art
   sub-grid stacks to a single column on phones so its 2-image tiles + labels
   never overflow the narrow width. (The separate page-level header/meta
   overflow is unresolved and intentionally out of scope here.) */
@media (max-width: 600px) {
  .pack-art .sets-grid { flex-direction: column !important; align-items: center !important; }
  .pack-art .set-tile.pack-art-tile, .pack-art .set-tile.pack-art-tile .pa-imgs { max-width: 100% !important; }
  .pack-art .set-tile.pack-art-tile .pa-imgs { flex-wrap: wrap !important; justify-content: center !important; }
}

/* Mobile card hardening (2026-07-13): upload buttons sit under photo slots,
   so direct-number/name tiles need a reserved break before text begins. */
@media (max-width: 600px) {
  body .sets-wrap .sets-grid .set-tile { row-gap: 8px !important; padding-bottom: 44px !important; align-content: flex-start !important; }
  body .sets-wrap .sets-grid .set-tile .ph-f,
  body .sets-wrap .sets-grid .set-tile .ph-b {
    order: 1 !important;
  }
  body .sets-wrap .sets-grid .set-tile > .sn,
  body .sets-wrap .sets-grid .set-tile > .snm,
  body .sets-wrap .sets-grid .set-tile > .body {
    order: 2 !important;
    margin-top: 38px !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    clear: both !important;
  }
  body .sets-wrap .sets-grid .set-tile > .anvil-ctl,
  body .sets-wrap .sets-grid .set-tile .anvil-ctl {
    order: 3 !important;
  }
  body .sets-wrap .sets-grid .set-tile > .body {
    position: relative !important;
    z-index: 1 !important;
  }
  body .sets-wrap .sets-grid .set-tile > .body .snm,
  body .sets-wrap .sets-grid .set-tile > .body .sty {
    width: 100% !important;
    text-align: left !important;
    margin-top: 0 !important;
  }
  body .sets-wrap .sets-grid .set-tile > .body .sty {
    margin-top: 4px !important;
  }
  body .sets-wrap .sets-grid .set-tile > .sn + .snm { margin-top: 2px !important; }
  body .sets-wrap .sets-grid .set-tile .ph-f,
  body .sets-wrap .sets-grid .set-tile .ph-b {
    margin-bottom: 82px !important;
  }
  body .sets-wrap .sets-grid .set-tile .ph-f.has-img,
  body .sets-wrap .sets-grid .set-tile .ph-b.has-img {
    margin-bottom: 48px !important;
  }
  body .sets-wrap .sets-grid .set-tile .ht-addphoto {
    top: calc(100% + 8px) !important;
    min-height: 44px !important;
    padding: 8px 8px !important;
    z-index: 3 !important;
  }
  /* (removed) contain/center/no-repeat re-declaration for filled slots: it
     only existed to fight the cover-cropped canvas thumbnail, which is opt-in
     now, and banner-anvil-cart.js sets the same three !important already. */
  body .set-tile .ph-f img,
  body .set-tile .ph-b img,
  body .set-tile img.ht-apifb {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Mobile search rows: keep archive results compact instead of rendering like
   tall field cards. Photo left, core facts right, controls in one tight area. */
@media (max-width: 720px) {
  body .relics-table tr {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 2px 7px !important;
    padding: 7px !important;
    margin: 0 0 7px !important;
    min-height: 0 !important;
  }
  body .relics-table td,
  body .relics-table td::before {
    padding: 0 !important;
    border: 0 !important;
  }
  body .relics-table td::before { display: none !important; content: "" !important; }
  body .relics-table td.col-img {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: start !important;
  }
  body .relics-table td.col-img .thumb {
    width: 58px !important;
    height: 58px !important;
  }
  body .relics-table td.col-num {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }
  body .relics-table td.col-year {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
  body .relics-table td.col-type {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.08em !important;
  }
  body .relics-table td.col-name {
    grid-column: 2 / 5 !important;
    grid-row: 2 !important;
    font-size: 13px !important;
    line-height: 1.12 !important;
    padding: 0 !important;
  }
  body .relics-table td.col-set {
    grid-column: 2 / 5 !important;
    grid-row: 3 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body .relics-table td.col-actions {
    grid-column: 1 / 5 !important;
    grid-row: 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding-top: 5px !important;
  }
  body .relics-table td.col-actions .rb {
    flex: 1 1 auto !important;
    min-width: 58px !important;
    min-height: 28px !important;
    padding: 4px 5px !important;
    margin: 0 !important;
    font-size: 7.5px !important;
    letter-spacing: 0.07em !important;
    line-height: 1.05 !important;
  }
  body .relics-table td.col-actions select.rb {
    flex: 1 1 118px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Mobile tile text polish (2026-07-12): keep 2-up set/category tiles readable
   by removing wide title spacing and using compact fixed phone sizes. */
@media (max-width: 600px) {
  body .set-tile .set-name,
  body .tcg-set-tile .tcg-set-name,
  body .hub-card .hub-name,
  body .sh-brand-name,
  body .sh-set-name {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  body .set-tile .set-meta,
  body .tcg-set-tile .tcg-set-meta,
  body .tcg-set-tile .tcg-set-desc,
  body .hub-card .hub-desc,
  body .sh-brand-region,
  body .sh-brand-years,
  body .sh-set-meta {
    font-size: 7.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  body .tcg-set-logo,
  body .hub-kicker,
  body .hub-action,
  body .tcg-set-explore,
  body .sh-brand-explore {
    letter-spacing: 0.04em !important;
  }
}

/* Mobile checklist hard-stop: empty front/back upload buttons must never sit
   on top of the item name. A few older set pages have their own tile spacing,
   so this late rule reserves enough vertical room under empty photo slots. */
@media (max-width: 600px) {
  body .sets-grid .set-tile .ph-f:not(.has-img),
  body .sets-grid .set-tile .ph-b:not(.has-img) {
    margin-bottom: 86px !important;
  }

  body .sets-grid .set-tile .ph-f:not(.has-img) .ht-addphoto,
  body .sets-grid .set-tile .ph-b:not(.has-img) .ht-addphoto {
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    z-index: 5 !important;
  }

  body .sets-grid .set-tile .body,
  body .sets-grid .set-tile > .snm {
    margin-top: 36px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body .sets-grid .set-tile > .body .sn,
  body .sets-grid .set-tile > .body .snm,
  body .sets-grid .set-tile > .body .sty {
    margin-top: 0 !important;
  }
}

/* Mobile upload-button safety rail (2026-07-13): keep + Photo controls inside
   empty photo boxes. The older floating button worked on wide tiles, but on
   tight 2-up mobile pages it could sit on top of the item name. */
@media (max-width: 600px) {
  body .sets-grid .set-tile .ph-f:not(.has-img),
  body .sets-grid .set-tile .ph-b:not(.has-img) {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 5px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }

  body .sets-grid .set-tile .ph-f:not(.has-img) .ht-addphoto,
  body .sets-grid .set-tile .ph-b:not(.has-img) .ht-addphoto {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(100%, 132px) !important;
    min-width: min(44px, 100%) !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    padding: 9px 1px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  body .sets-grid .set-tile .body,
  body .sets-grid .set-tile > .snm {
    margin-top: 4px !important;
  }
}

/* Mobile search hard-stop: archive results should read like compact rows,
   not tall label/value cards. */
@media (max-width: 720px) {
  body .relics-table-wrap {
    padding: 0 6px !important;
  }

  body .relics-table,
  body .relics-table tbody {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .relics-table thead {
    display: none !important;
  }

  body .relics-table tbody tr {
    display: grid !important;
    grid-template-columns: 54px auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 3px 7px !important;
    padding: 6px !important;
    margin: 0 0 6px !important;
    min-height: 0 !important;
    align-items: start !important;
    border: 1px solid var(--line) !important;
    background: rgba(15, 28, 30, 0.54) !important;
  }

  body .relics-table th,
  body .relics-table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body .relics-table td::before {
    display: none !important;
    content: "" !important;
  }

  body .relics-table td.col-img {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  body .relics-table td.col-img .thumb {
    width: 54px !important;
    height: 54px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  body .relics-table td.col-num {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body .relics-table td.col-set {
    grid-column: 3 !important;
    grid-row: 1 !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body .relics-table td.col-year {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body .relics-table td.col-name {
    grid-column: 2 / 5 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }

  body .relics-table td.col-type {
    display: none !important;
  }

  body .relics-table td.col-actions {
    grid-column: 1 / 5 !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    padding-top: 3px !important;
    white-space: normal !important;
  }

  body .relics-table td.col-actions .rb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 50px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.035em !important;
    white-space: nowrap !important;
  }

  body .relics-table td.col-actions select.rb {
    flex: 1 1 112px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Mobile checklist final guard (2026-07-13): keep uploaded photos whole and
   keep empty + Photo buttons from sitting on top of item names. */
@media (max-width: 600px) {
  body .sets-grid .set-tile {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    gap: 6px !important;
    row-gap: 8px !important;
    padding-bottom: 38px !important;
  }

  body .sets-grid .set-tile .ph-f,
  body .sets-grid .set-tile .ph-b {
    order: 1 !important;
    flex: 0 0 calc(50% - 3px) !important;
    width: calc(50% - 3px) !important;
    max-width: calc(50% - 3px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 0 14px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  body .sets-grid .set-tile .ph-f.has-img,
  body .sets-grid .set-tile .ph-b.has-img {
    margin-bottom: 34px !important;
  }

  body .sets-grid .set-tile .ph-f:not(.has-img),
  body .sets-grid .set-tile .ph-b:not(.has-img) {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 5px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
  }

  body .sets-grid .set-tile .ph-f:not(.has-img) .ht-addphoto,
  body .sets-grid .set-tile .ph-b:not(.has-img) .ht-addphoto {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(100%, 132px) !important;
    min-width: min(44px, 100%) !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    padding: 9px 1px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  body .sets-grid .set-tile > .sn,
  body .sets-grid .set-tile > .snm,
  body .sets-grid .set-tile .body {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body .sets-grid .set-tile .body .snm,
  body .sets-grid .set-tile .body .sty,
  body .sets-grid .set-tile > .snm,
  body .sets-grid .set-tile > .sty {
    display: block !important;
    width: 100% !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* Mobile checklist body-tile lock (2026-07-13): body-based checklist cards
   such as 7-Eleven stickers need the photo row and name row separated with no
   chance for the upload buttons to float over the text. */
@media (max-width: 600px) {
  body .sets-wrap .sets-grid .set-tile:has(> .body) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    gap: 6px !important;
    padding: 7px !important;
    padding-bottom: 38px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body .sets-wrap .sets-grid .set-tile:has(> .body) > .ph-f,
  body .sets-wrap .sets-grid .set-tile:has(> .body) > .ph-b {
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
  }

  body .sets-wrap .sets-grid .set-tile:has(> .body) > .ph-f:not(.has-img),
  body .sets-wrap .sets-grid .set-tile:has(> .body) > .ph-b:not(.has-img) {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  body .sets-wrap .sets-grid .set-tile:has(> .body) .ht-addphoto {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(100%, 132px) !important;
    max-width: 100% !important;
    min-width: min(44px, 100%) !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    padding: 9px 1px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  body .sets-wrap .sets-grid .set-tile:has(> .body) > .body {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 4px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body .sets-wrap .sets-grid .set-tile:has(> .body) > .body .snm,
  body .sets-wrap .sets-grid .set-tile:has(> .body) > .body .sty {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body .sets-wrap .sets-grid .set-tile:has(> .body) > .body .sty {
    margin-top: 4px !important;
  }
}

/* Mobile search final lock (2026-07-13): the archive search should read like a
   compact result row, not a tall label/value inspection card. */
@media (max-width: 720px) {
  body .relics-table-wrap {
    max-width: 100vw !important;
    margin-top: 8px !important;
    padding: 0 6px !important;
    overflow: visible !important;
  }

  body .relics-table,
  body .relics-table tbody {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .relics-table thead {
    display: none !important;
  }

  body .relics-table tbody tr {
    display: grid !important;
    grid-template-columns: 48px auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    gap: 3px 7px !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 6px !important;
    border: 1px solid var(--line) !important;
    background: rgba(15, 28, 30, 0.54) !important;
  }

  body .relics-table th,
  body .relics-table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
  }

  body .relics-table td::before,
  body .relics-table td.col-num::before,
  body .relics-table td.col-set::before,
  body .relics-table td.col-year::before,
  body .relics-table td.col-type::before,
  body .relics-table td.col-img::before,
  body .relics-table td.col-actions::before {
    display: none !important;
    content: "" !important;
  }

  body .relics-table td.col-img {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
  }

  body .relics-table td.col-img .thumb {
    width: 48px !important;
    height: 48px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    box-shadow: none !important;
  }

  body .relics-table td.col-num {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: baseline !important;
    color: var(--bronze-bright) !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body .relics-table td.col-name {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
    align-self: baseline !important;
    color: var(--ink) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .relics-table td.col-set {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    color: var(--ink-dim) !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .relics-table td.col-year {
    grid-column: 4 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    color: var(--ink-dim) !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body .relics-table td.col-type {
    display: none !important;
  }

  body .relics-table td.col-actions {
    grid-column: 1 / 5 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding-top: 4px !important;
    white-space: normal !important;
  }

  body .relics-table td.col-actions .rb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    touch-action: manipulation !important;
  }

  body .relics-table td.col-actions select.rb {
    grid-column: span 2 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Mobile checklist final no-overlap guard (2026-07-14):
   pages with direct photo slots were letting empty +PHOTO controls overlap
   the item name. Force a clean photo row, then text rows underneath. */
@media (max-width:600px){
  /* .fp3/.fp4 (Hyper Sticker Collection first-print tiles) are excluded: they own
     their multi-column photo layout in hsc1.css, and forcing this generic 2-col
     grid on them collapsed their 3 photo columns to ~42px, which made the
     +Photo control impossible to hit. Every later block here already excludes
     them; this one was missed. (device audit 2026-07-25) */
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)):not(.has-parent-thumb):not(.pack-art-tile):not(.fp2):not(.fp3):not(.fp4):not(:has(> .set-tile-thumb)){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:auto auto auto auto !important;
    gap:6px !important;
    align-items:start !important;
    align-content:start !important;
    min-height:0 !important;
    padding:7px !important;
    padding-bottom:34px !important;
    overflow:hidden !important;
  }

  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .ph-f,
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .ph-b{
    grid-row:1 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    margin:0 !important;
    align-self:start !important;
  }

  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .ph-f{ grid-column:1 !important; }
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .ph-b{ grid-column:2 !important; }

  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .ph-f:not(.has-img),
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .ph-b:not(.has-img){
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:5px !important;
    overflow:hidden !important;
  }

  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) .ht-addphoto{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:min(100%, 132px) !important;
    max-width:100% !important;
    min-width:min(44px, 100%) !important;
    min-height:44px !important;
    margin:0 auto !important;
    padding:9px 1px !important;
    line-height:1.15 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
  }

  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .num,
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .sn,
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .snm,
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .jp,
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .sty{
    grid-column:1 / -1 !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    z-index:1 !important;
  }

  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .num{
    grid-row:2 !important;
    font-size:10px !important;
    line-height:1.1 !important;
    color:var(--bronze-bright) !important;
  }

  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .sn,
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .snm{
    grid-row:3 !important;
    font-size:clamp(16px,5.2vw,22px) !important;
    line-height:1.12 !important;
  }

  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .jp,
  body .sets-wrap .sets-grid .set-tile:not(:has(> .body)) > .sty{
    grid-row:4 !important;
    font-size:clamp(13px,3.5vw,15px) !important;
    line-height:1.2 !important;
    color:var(--ink-dim) !important;
    text-align:left !important;
  }
}

/* Mobile tile no-overlap lock (2026-07-15):
   Keep empty front/back upload buttons inside their slots, never on top of names. */
@media (max-width:600px){
  body .sets-grid .set-tile > .ph-f,
  body .sets-grid .set-tile > .ph-b{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    overflow:hidden !important;
    position:relative !important;
    padding:5px !important;
    box-sizing:border-box !important;
  }

  body .sets-grid .set-tile > .ph-f.has-img,
  body .sets-grid .set-tile > .ph-b.has-img{
    padding:0 !important;
  }

  body .sets-grid .set-tile > .ph-f .ht-addphoto,
  body .sets-grid .set-tile > .ph-b .ht-addphoto{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:min(100%, 132px) !important;
    min-width:min(44px, 100%) !important;
    max-width:100% !important;
    min-height:44px !important;
    margin:0 auto !important;
    padding:9px 1px !important;
    line-height:1.15 !important;
    font-size:clamp(13px,3.4vw,15px) !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    box-sizing:border-box !important;
  }

  body .sets-grid .set-tile > .sn,
  body .sets-grid .set-tile > .snm,
  body .sets-grid .set-tile > .jp,
  body .sets-grid .set-tile > .sty,
  body .sets-grid .set-tile > .body{
    position:relative !important;
    z-index:1 !important;
    margin-top:2px !important;
  }
}

/* Mobile tile reserve-space lock (2026-07-15):
   Some older set pages use unusual tile markup, so reserve a clean photo row
   before any item title/text can start. */
@media (max-width:600px){
  body .sets-grid .set-tile{
    min-height:0 !important;
    height:auto !important;
    align-content:start !important;
  }

  body .sets-grid .set-tile > .ph-f:not(.has-img),
  body .sets-grid .set-tile > .ph-b:not(.has-img){
    min-height:clamp(82px,24vw,118px) !important;
  }

  body .sets-grid .set-tile > .sn,
  body .sets-grid .set-tile > .snm,
  body .sets-grid .set-tile > .jp,
  body .sets-grid .set-tile > .sty,
  body .sets-grid .set-tile > .body{
    clear:both !important;
    isolation:isolate !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  body .sets-grid .set-tile > .snm,
  body .sets-grid .set-tile > .body .snm{
    font-size:clamp(16px,4.35vw,20px) !important;
    line-height:1.12 !important;
  }
}

/* Mobile direct-tile row lock (2026-07-15):
   Older checklist pages put photo slots, numbers, names, and Japanese text as
   direct children. Keep each piece in its own row so upload buttons can never
   overlap item names on narrow screens. */
@media (max-width:600px){
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-auto-rows:auto !important;
    align-items:start !important;
    gap:6px !important;
    row-gap:7px !important;
    min-height:0 !important;
    height:auto !important;
    padding:7px !important;
    padding-bottom:24px !important;
    overflow:hidden !important;
  }

  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-f,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-b{
    grid-row:1 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:clamp(84px,24vw,116px) !important;
    aspect-ratio:1 / 1 !important;
    margin:0 !important;
    padding:5px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-f{ grid-column:1 !important; }
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-b{ grid-column:2 !important; }

  /* contain/center/no-repeat dropped: the cover-cropped canvas is opt-in now
     and banner-anvil-cart.js already declares them !important site-wide. */
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-f.has-img,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-b.has-img{
    padding:0 !important;
  }

  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-f .ht-addphoto,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-b .ht-addphoto{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:min(100%, 132px) !important;
    min-width:min(44px, 100%) !important;
    max-width:100% !important;
    min-height:44px !important;
    margin:0 auto !important;
    padding:9px 1px !important;
    line-height:1.15 !important;
    font-size:clamp(13px,3.4vw,15px) !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    box-sizing:border-box !important;
  }

  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .num,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .sn,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .snm,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .jp,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .sty{
    grid-column:1 / -1 !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    z-index:1 !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    text-align:left !important;
  }

  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .num,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .sn{
    grid-row:2 !important;
    font-size:10px !important;
    line-height:1.1 !important;
    color:var(--bronze-bright) !important;
  }

  /* The item reference (.sn) is the string a collector reads off the tile and
     quotes when they send in a photo about that item, so it takes the sitewide
     13px small-label floor rather than the 10px above. It keeps the same
     specificity as the rule it follows and sets font-size only, so grid-row:2
     and the full-width grid-column:1/-1 still apply -- which is why the larger
     type cannot change photo-slot widths or tiles-per-row, only tile height.
     .num is left at 10px: it is a decorative number used on a single page.
     2026-07-27 */
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .sn{
    font-size:clamp(13px,3.2vw,15px) !important;
  }

  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .snm{
    grid-row:3 !important;
    font-size:clamp(16px,4.5vw,20px) !important;
    line-height:1.13 !important;
  }

  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .snm .jp,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .jp,
  body .sets-grid .set-tile:not(:has(> .body)):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .sty{
    grid-row:4 !important;
    display:block !important;
    font-size:clamp(13px,3.25vw,15px) !important;
    line-height:1.2 !important;
    color:var(--ink-dim) !important;
  }
}

/* Mobile body-tile lock (2026-07-15):
   Pages with a .body wrapper still need the same protected photo row. */
@media (max-width:600px){
  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-auto-rows:auto !important;
    align-items:start !important;
    gap:6px !important;
    row-gap:7px !important;
    min-height:0 !important;
    height:auto !important;
    padding:7px !important;
    padding-bottom:24px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-f,
  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-b{
    grid-row:1 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:clamp(84px,24vw,116px) !important;
    aspect-ratio:1 / 1 !important;
    margin:0 !important;
    padding:5px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-f{ grid-column:1 !important; }
  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-b{ grid-column:2 !important; }

  /* contain/center/no-repeat dropped: the cover-cropped canvas is opt-in now
     and banner-anvil-cart.js already declares them !important site-wide. */
  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-f.has-img,
  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .ph-b.has-img{
    padding:0 !important;
  }

  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) .ht-addphoto{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:min(100%, 132px) !important;
    min-width:min(44px, 100%) !important;
    max-width:100% !important;
    min-height:44px !important;
    margin:0 auto !important;
    padding:9px 1px !important;
    line-height:1.15 !important;
    font-size:clamp(13px,3.4vw,15px) !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    box-sizing:border-box !important;
  }

  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .body{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:3px 0 0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
    z-index:1 !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .body .snm{
    font-size:clamp(16px,4.5vw,20px) !important;
    line-height:1.13 !important;
    margin:0 !important;
  }

  body .sets-grid .set-tile:has(> .body):not(.fp2):not(.fp3):not(.fp4):not(.pack-art-tile):not(.tcg-set-tile) > .body .sty{
    position:static !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    text-align:left !important;
    font-size:clamp(13px,3.25vw,15px) !important;
    line-height:1.2 !important;
    color:var(--ink-dim) !important;
    margin:0 !important;
  }
}

/* Archive search final phone lock (2026-07-15). This must stay at the end of
   mobile.css so older broad mobile table rules cannot turn results into tall
   label/value cards again. */
@media (max-width:720px){
  html body #relics-table-wrap.relics-table-wrap{
    max-width:100vw !important;
    margin-top:8px !important;
    padding:0 6px !important;
    overflow:visible !important;
  }

  html body #relics-table-wrap .relics-table,
  html body #relics-table-wrap .relics-table tbody{
    display:block !important;
    width:100% !important;
    border:0 !important;
    background:transparent !important;
  }

  html body #relics-table-wrap .relics-table thead{
    display:none !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row{
    display:grid !important;
    grid-template-columns:54px minmax(0,1fr) auto !important;
    grid-template-areas:
      "img name num"
      "img meta meta"
      "actions actions actions" !important;
    gap:3px 7px !important;
    align-items:center !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 0 6px !important;
    padding:6px !important;
    border:1px solid rgba(109,181,176,.26) !important;
    background:rgba(8,17,18,.82) !important;
    box-shadow:none !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > td,
  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > th{
    display:block !important;
    float:none !important;
    clear:none !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    white-space:normal !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > td::before,
  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > th::before{
    display:none !important;
    content:none !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-img{
    grid-area:img !important;
    align-self:start !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-img .thumb{
    display:block !important;
    width:54px !important;
    height:54px !important;
    border:1px solid rgba(109,181,176,.24) !important;
    background-color:rgba(0,0,0,.18) !important;
    background-size:contain !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    transform:none !important;
    box-shadow:none !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-name{
    grid-area:name !important;
    color:var(--ink) !important;
    font-size:12px !important;
    line-height:1.12 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-num{
    grid-area:num !important;
    justify-self:end !important;
    color:var(--bronze-bright) !important;
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    white-space:nowrap !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-set{
    grid-area:meta !important;
    color:var(--ink-dim) !important;
    font-size:8px !important;
    line-height:1.1 !important;
    letter-spacing:.02em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-year{
    grid-area:meta !important;
    justify-self:end !important;
    max-width:42px !important;
    color:var(--ink-faint) !important;
    font-size:8px !important;
    line-height:1.1 !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;
    background:rgba(8,17,18,.82) !important;
    padding-left:6px !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-type{
    display:none !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-actions{
    grid-area:actions !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    align-items:center !important;
    min-height:0 !important;
    padding-top:4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-actions::-webkit-scrollbar{
    display:none !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-actions .rb{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:38px !important;
    min-height:22px !important;
    margin:0 !important;
    padding:3px 6px !important;
    font-size:6.5px !important;
    line-height:1 !important;
    letter-spacing:.03em !important;
    white-space:nowrap !important;
  }

  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-actions .rb-cond,
  html body #relics-table-wrap .relics-table tbody tr.relic-search-row > .col-actions .rb-finish{
    width:74px !important;
    min-width:74px !important;
  }
}

/* Final set-index override: these linked pack-art tiles are not checklist cards.
   This is the highest-specificity copy of the shared pack-art set-tile rules —
   it is the one that actually wins, so it has to carry the shrink-to-photo
   behaviour documented at the top of this file (--ht-art-ar, 4-up / 3-up grid,
   16px names, 13px meta, no min-height, no truncation). 2026-07-25 */
html body .sets-wrap .sets-grid:has(> a.set-tile > .set-tile-thumb){
  align-items:start !important;
}
html body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb){
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:8px !important;
  min-height:0 !important;
  padding:10px !important;
  overflow:hidden !important;
}
html body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) > .set-tile-thumb{
  float:none !important;
  display:flex !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:var(--ht-art-ar, 4 / 5) !important;
  max-height:none !important;
  margin:0 !important;
  flex:0 0 auto !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
html body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) .set-name{
  margin:2px 0 0 !important;
  line-height:1.25 !important;
  min-height:0 !important;
  font-size:16px !important;
  letter-spacing:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  -webkit-line-clamp:none !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:auto !important;
}
html body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) .set-meta{
  margin:0 !important;
  line-height:1.35 !important;
  font-size:13px !important;
  letter-spacing:0.08em !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:break-word !important;
}
/* DESKTOP COLUMN COUNT LIVES IN ONE PLACE — see the "LANDING GRIDS FILL THE
   DESKTOP WIDTH" block near the top of this file (2026-08-14). This used to
   carry a second, higher-specificity copy of the 4-up 220px pin, which
   silently beat that block; it is gone so there is a single desktop rule.
   Only the phone bands below are still pinned here. */
@media (max-width:700px){
  html body .sets-wrap .sets-grid:has(> a.set-tile > .set-tile-thumb){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  html body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb){
    padding:6px !important;
    gap:6px !important;
  }
  html body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) > .set-tile-thumb{
    max-height:none !important;
  }
  html body .sets-wrap .sets-grid > a.set-tile:has(> .set-tile-thumb) .set-meta{
    letter-spacing:0.04em !important;
  }
}
@media (max-width:359px){
  html body .sets-wrap .sets-grid:has(> a.set-tile > .set-tile-thumb){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:600px){
  html body .ht-community{
    width:100% !important;
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
    overflow:hidden !important;
  }
  html body .ht-community-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  html body .ht-community-tile{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* ============================================================
   TAP-TARGET + LEGIBILITY LOCK (device audit, 2026-07-25)
   Measured on iPhone SE 320 / Galaxy S9+ 320 / iPhone SE3 375 /
   iPhone 14 390 / Pixel 7 412. Root/body type was already 16px
   everywhere — every failure below was a per-component override,
   so each is corrected at the component, not by global scaling.

   Rules of the block:
   - every interactive control is >= 44x44 CSS px,
   - every clamp() FLOOR is the real minimum (13px small label,
     16px body/name) because the vw term never reaches the max on
     a phone,
   - nothing truncates: labels wrap instead of clipping,
   - no fixed row heights; the tiles grow with their content.
   Must stay at the end of this file so the older per-page locks
   above cannot shrink these controls again.
   ============================================================ */
@media (max-width:600px){

  /* --- Anvil "add to my collection" toggle: was 22x22 (23.1 on Pixel 7).
     Specificity note: hsc1.css pins this at (0,7,1) with !important, so the
     duplicated .anvil-img below is deliberate — it lifts this rule to (0,7,2)
     so one sitewide rule can cover HSC1 and every other checklist page. The
     icon keeps its visual size; the growth is transparent padding. */
  html body.ht-anvil-on .sets-grid .set-tile .anvil-ctl .anvil-toggle.anvil-img.anvil-img{
    width:clamp(44px,11.5vw,50px) !important;
    height:clamp(44px,11.5vw,50px) !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:clamp(9px,2.8vw,12px) !important;
    box-sizing:border-box !important;
    border:0 !important;
    background:transparent !important;
  }
  html body.ht-anvil-on .sets-grid .set-tile .anvil-ctl .anvil-toggle.anvil-img.anvil-img img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }

  /* the toggle is absolutely positioned in the tile's bottom-right corner, so
     reserve room for the larger hit area instead of letting it sit on text */
  html body .sets-grid .set-tile:has(.anvil-toggle.anvil-img){
    padding-bottom:clamp(60px,16vw,70px) !important;
  }

  /* --- Condition / print-run / grade selects: were 32px tall --- */
  html body .set-tile .anvil-ctl select,
  html body .set-tile .anvil-ctl select.cond-select,
  html body .set-tile .anvil-ctl select.print-select,
  html body .set-tile .anvil-ctl select.grade-select{
    min-height:44px !important;
    height:auto !important;
    padding:10px 8px !important;
    font-size:clamp(13px,3.4vw,15px) !important;
    line-height:1.2 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* --- "Add to Anvil": was 44px tall but ellipsis-clipped
     (clientWidth 72 vs scrollWidth 121). Wrap, never clip. --- */
  html body .set-tile .anvil-ctl .anvil-btn{
    min-height:44px !important;
    height:auto !important;
    width:100% !important;
    max-width:100% !important;
    padding:11px 8px !important;
    font-size:clamp(13px,3.3vw,15px) !important;
    line-height:1.2 !important;
    letter-spacing:0.06em !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
    overflow:visible !important;
    text-overflow:clip !important;
    box-sizing:border-box !important;
  }

  /* --- "+ Photo": was 28px tall (24x36 on HSC1) and clipped to "+ PHOT".
     Wraps to two lines in the narrowest 2-up slots rather than truncating. --- */
  html body .set-tile .ht-addphoto{
    /* min() so the 44px target never grows past its photo slot: a handful of
       pages pack 6 slots into a 278px strip, and overflowing there would clip
       the label against the slot's overflow:hidden — i.e. trade one truncation
       for another. Those slots get the full slot width instead. */
    min-width:min(44px, 100%) !important;
    min-height:44px !important;
    max-width:100% !important;
    /* near-zero side padding so the word "PHOTO" still fits on one line in the
       narrowest slots; the text is centred, so this costs nothing visually */
    padding:9px 1px !important;
    font-size:clamp(13px,3.4vw,14px) !important;
    line-height:1.15 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    text-overflow:clip !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }

  /* --- "Back to ..." out of a set: was 7.02px text in a 25.2px box.
     This is the main way back out of a checklist, so it also gets a
     real 44px target. --- */
  html body .page-head .relics-back,
  html body a.relics-back{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    padding:10px 16px !important;
    font-size:clamp(13px,3.4vw,15px) !important;
    line-height:1.2 !important;
    letter-spacing:0.08em !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }

  /* --- eyebrow (was 8.58px) and Year/Origin badges (were 7.8px) --- */
  html body .eyebrow,
  html body .page-head .eyebrow{
    font-size:clamp(13px,3.2vw,16px) !important;
    letter-spacing:0.16em !important;
    line-height:1.35 !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
  }
  html body .meta-badges .meta-badge,
  html body .meta-badge{
    font-size:clamp(13px,3.2vw,15px) !important;
    letter-spacing:0.06em !important;
    line-height:1.3 !important;
    padding:6px 9px !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
  }
  html body .meta-badge .k,
  html body .meta-badge .v{
    font-size:clamp(13px,3.2vw,15px) !important;
    line-height:1.3 !important;
  }

  /* --- photo credit: was 5.46px text in a 6.3px box, i.e. invisible and
     unhittable for the contributor it names. --- */
  html body .ht-credit,
  html body .set-tile .ht-credit,
  html body .set-tile .ht-credit.ht-credit-flow{
    font-size:clamp(13px,3.2vw,14px) !important;
    line-height:1.25 !important;
    min-height:24px !important;
    padding:4px 2px !important;
    letter-spacing:0.01em !important;
    display:block !important;
    -webkit-line-clamp:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  /* The credit is absolutely positioned just BELOW its photo slot, and the
     slot hides overflow to keep +Photo inside it — so at any readable size the
     credit was simply clipped away, which is the real reason a contributor
     never saw their name. Un-clip it and give the slot back the height the
     text now needs, so it lands in reserved space and never on the item name.
     .fam-grid is excluded: those strips are only ~36px wide, where a 13px
     credit would stack 5 lines deep over the next row. */
  html body .sets-grid:not(.fam-grid) .set-tile:not(.fp2):not(.fp3):not(.fp4) > .ph-f.has-img:has(> .ht-credit),
  html body .sets-grid:not(.fam-grid) .set-tile:not(.fp2):not(.fp3):not(.fp4) > .ph-b.has-img:has(> .ht-credit){
    overflow:visible !important;
    margin-bottom:clamp(48px,13vw,56px) !important;
  }

  /* --- item names stay at the 16px body floor --- */
  html body .set-tile .snm,
  html body .set-tile > .body .snm{
    font-size:clamp(16px,4.5vw,20px) !important;
    line-height:1.18 !important;
  }

  /* --- containment: none of the above may introduce a sideways scroll --- */
  html body .set-tile,
  html body .set-tile *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}