/* One Relics visual language throughout the archive. This changes the
   material, not item identities, contributor images, or bespoke grids. */
@property --ht-glass-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ht-glass-orbit { to { --ht-glass-angle: 360deg; } }
html body.ht-relics-theme {
  isolation: isolate;
  background-color: transparent !important;
  background-image: none !important;
}
html body.ht-relics-theme:not(.relics-page) .relics-relay-field {
  z-index: -1;
  /* Fixed elements must cover the viewport even on pages that opt out of
     banner.css's legacy zoom. The runtime measures the actual scale. */
  width: calc(100dvw / var(--ht-page-scale, 1));
  height: calc(100dvh / var(--ht-page-scale, 1));
}
html body.ht-relics-theme :is(main.shell, .sets-wrap, .catalog-wrap, .page-wrap, .tcg-wrap, .aurora) {
  background-color: transparent !important;
  background-image: none !important;
}
/* Layered important paint defeats older local ID/inline-normal paints.
   Never select photo wells or use background shorthand on image-bearing
   elements: their background-image is the contributor's photograph. */
@layer ht-relics-glass {
  html body.ht-relics-theme .sets-grid:has(> a.set-tile) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)) !important;
    gap: 18px !important;
  }
  html body.ht-relics-theme .sets-grid > a.set-tile {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 1px solid rgba(105,158,174,.36) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  html body.ht-relics-theme .sets-grid > a.set-tile > * {
    order: 0 !important;
    flex: none !important;
  }
  /* Old ledger feature rows span the full archive. The shared card view
     must not enlarge their pack photographs to the width of the page. */
  html body.ht-relics-theme .sets-grid > a.set-tile:not([style*="grid-column"]) {
    grid-column: auto !important;
  }
  html body.ht-relics-theme .sets-grid > a.set-tile :is(.set-name,.set-meta,.set-tile-body,.sn,.snm,.sty,.body) {
    display: block !important;
    position: static !important;
    transform: none !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    max-height: none !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    line-height: 1.45 !important;
  }
  html body.ht-relics-theme .sets-grid > a.set-tile :is(.set-name,.snm) {
    font-size: 16px !important;
    letter-spacing: .015em !important;
    color: var(--ht-gold-bright) !important;
  }
  html body.ht-relics-theme .sets-grid > a.set-tile :is(.set-meta,.sn,.sty) {
    font-size: 13px !important;
    letter-spacing: .035em !important;
    margin-top: 6px !important;
  }
  html body.ht-relics-theme .sets-grid > a.set-tile > .set-tile-thumb {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 260px !important;
    height: auto !important;
    max-height: 300px !important;
    flex: none !important;
    align-self: center !important;
    margin: 0 !important;
    background-color: rgba(2,9,12,.18) !important;
    border-radius: 8px !important;
  }
  html body.ht-relics-theme .sets-grid > a.set-tile::after {
    order: 99 !important;
    content: 'Browse set →' !important;
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    min-height: 44px !important;
    width: auto !important;
    height: auto !important;
    margin: auto 0 0 !important;
    padding: 0 12px !important;
    border: 1px solid rgba(105,158,174,.44) !important;
    border-radius: 999px !important;
    background: rgba(2,9,12,.18) !important;
    color: var(--ht-gold-bright) !important;
    font-size: 13px !important;
    letter-spacing: .025em !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }
  html body.ht-relics-theme .htbtn-face {
    background: rgba(2,9,12,.35) !important;
  }
  html body.ht-relics-theme .htbtn-ring {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    translate: none !important;
    rotate: none !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    background: conic-gradient(from var(--ht-glass-angle),transparent 62%,#8ebdca 80%,transparent 98%) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ht-glass-orbit 4s linear infinite !important;
  }
  @media(prefers-reduced-motion:reduce) {
    html body.ht-relics-theme .htbtn-ring { animation: none !important; }
  }
  @media(max-width:700px) {
    html body.ht-relics-theme .sets-grid:has(> a.set-tile) {
      grid-template-columns: repeat(2,minmax(0,1fr)) !important;
      gap: 12px !important;
    }
    html body.ht-relics-theme .sets-grid > a.set-tile { padding: 12px !important; }
    html[data-setview="ledger"] body.ht-relics-theme .sets-grid:has(> a.set-tile) {
      grid-template-columns: minmax(0,1fr) !important;
    }
    html[data-setview="ledger"] body.ht-relics-theme .sets-grid > a.set-tile > .set-tile-thumb {
      max-width: 180px !important;
      align-self: center !important;
    }
  }
  html body.ht-relics-theme :is(
    .set-tile, .tcg-set-tile, .dpx-tile, .sh-brand-tile, .franchise-tile,
    .tcg-lang-tile, .tcg-era, .hub-card, .kh-card, .brand, .board-state,
    .discovery-card, .ht-community-card, .panel, .set-desc, .set-note,
    .ht-notes-card, .ht-info-fold-body, .intro-card, .legend-stat,
    .meta-badge, .set-meta, .badge, .chip, .overall, .kpi
  ):not([style*="url"]) {
    background-color: rgba(3,12,16,.18) !important;
    background-image: linear-gradient(145deg,rgba(11,34,44,.28),rgba(3,13,18,.12) 58%,rgba(2,9,12,.22)) !important;
    border-color: rgba(105,158,174,.36) !important;
    box-shadow: inset 0 1px 0 rgba(184,220,225,.08),0 18px 44px -34px rgba(0,0,0,.95) !important;
    -webkit-backdrop-filter: blur(3px) saturate(1.08);
    backdrop-filter: blur(3px) saturate(1.08);
  }
  html body.ht-relics-theme :is(a.set-tile, .tcg-set-tile, .dpx-tile, .hub-card, a.kh-card):hover {
    background-color: rgba(5,19,25,.36) !important;
    border-color: rgba(201,169,104,.72) !important;
  }
  html body.ht-relics-theme :is(button,summary,.btn,.htbtn,.htbtn-orn,.htc-obtn,.sh-brand-explore,.tcg-lang-status,.rb,.gate-enter,.ht-addphoto,.anvil-btn,.anvil-toggle,.htmi-toggle):not([style*="url"]) {
    background-color: rgba(2,9,12,.28) !important;
    background-image: linear-gradient(180deg,rgba(13,37,46,.28),rgba(2,9,12,.14)) !important;
    border-color: rgba(105,158,174,.44) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  html body.ht-relics-theme :is(button,summary,.btn,.htbtn,.htbtn-orn,.htc-obtn):is(:hover,[aria-pressed="true"],[aria-expanded="true"]) {
    background-color: rgba(8,28,36,.46) !important;
    border-color: var(--ht-gold) !important;
  }
  html body.ht-relics-theme :is(input,select,textarea) {
    background-color: rgba(2,9,12,.46) !important;
    background-image: linear-gradient(180deg,rgba(9,30,39,.28),rgba(2,9,12,.24)) !important;
  }
  html body.ht-relics-theme option {
    background-color: #041219 !important;
    color: #d9e6e8 !important;
  }
}
/* Navigation tiles inherit the main Relics rounded, illuminated frame.
   Collectible grids, including HSC1 and Gum 3, retain their geometry. */
html body.ht-relics-theme :is(a.set-tile,.tcg-set-tile,.dpx-tile,.hub-card,.kh-card) {
  border-radius: 12px !important;
}
html body.ht-relics-theme .kh-card { overflow: hidden; }
html body.ht-relics-theme a.set-tile :is(.set-name,.set-meta) {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
html body.ht-relics-theme a.set-tile .set-name {
  font-size: max(16px,1rem) !important;
  color: var(--ht-gold-bright) !important;
}
html body.ht-relics-theme a.set-tile .set-meta {
  font-size: 13px !important;
  letter-spacing: .035em !important;
}
html body.ht-relics-theme footer:not(#ht-none) {
  border-top: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(180deg,rgba(2,9,12,0),rgba(2,9,12,.16) 14%,rgba(2,9,12,.42) 46%,rgba(2,9,12,.70)) !important;
}
@media (forced-colors: active) {
  html body.ht-relics-theme { background: Canvas !important; }
}

/* ======================================================================
   Hover-enlargement stacking, the Tomy arcade families (2026-09-12).

   assets/css/item-tools.css draws the photo-well hover enlargement as a
   position:fixed pseudo element (.ph-f[style]::after, z-index:9999),
   deliberately fixed so it centres on the VIEWPORT and can never run off
   a page edge. The .set-tile glass above gives every tile a
   backdrop-filter, and backdrop-filter makes an element BOTH a stacking
   context AND the containing block for its fixed-position descendants.
   The overlay therefore stopped being page level: it centred on its own
   tile and its z-index could not leave that tile, so every later tile in
   the grid painted on top of the enlarged photo. Reported by the owner on
   Battrio, 2026-09-11; the same trap is measured on every arcade set page.

   Why it shows up on these families and not elsewhere: banner-anvil-cart.js
   suppresses the body-level .ht-hover-preview (z-index 10040, appended to
   document.body, so immune to this) for arcade-token slots. On every other
   page that body-level preview covers for the trapped pseudo element; on
   the arcade pages the trapped pseudo element is all there is.

   Scope. The five family names below are the SAME list banner-anvil-cart.js
   matches on in htIsArcadeTokenSlot, so this rule covers exactly the pages
   where the preview is suppressed and no more. It is further gated on a
   PAINTED well actually being hovered (.ph-f[style]:hover), so it cannot
   fire on a page with no photo wells, and nothing changes at rest.

   Fixed here rather than in assets/css/item-tools.css: that file is
   blob-pinned and reaches every set page on the site, which is why
   evidence/battrio-fixes-20260911/review.md left it for the owner to call.
   Neither objection applies to this file - it is not blob-pinned, and the
   :has() gate means the rule cannot reach a page that has no enlargement.
   ====================================================================== */
html body[class*="battrio"] .set-tile:has(.ph-f[style]:hover),
html body[class*="battrio"] .set-tile:has(.ph-b[style]:hover),
html body[class*="tretta"] .set-tile:has(.ph-f[style]:hover),
html body[class*="tretta"] .set-tile:has(.ph-b[style]:hover),
html body[class*="mezastar"] .set-tile:has(.ph-f[style]:hover),
html body[class*="mezastar"] .set-tile:has(.ph-b[style]:hover),
html body[class*="frienda"] .set-tile:has(.ph-f[style]:hover),
html body[class*="frienda"] .set-tile:has(.ph-b[style]:hover),
html body[class*="gaole"] .set-tile:has(.ph-f[style]:hover),
html body[class*="gaole"] .set-tile:has(.ph-b[style]:hover) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}