/*
 * Relics continuous atmospheric field
 * ------------------------------------
 * Adapted from the user-supplied Relay Astro shader and isolated to the
 * Relics family. The field is a fixed, non-interactive backdrop for every
 * section below the hero. Controls sit on transparent storm-glass so the
 * motion remains visible without sacrificing contrast or touch targets.
 */

html {
  background: #02090c !important;
}

html body:is(.relics-page, .ht-relics-theme) {
  isolation: isolate;
  background-color: transparent !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

html body:is(.relics-page, .ht-relics-theme) .relics-relay-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 78% 38%, rgba(49, 104, 128, .20), transparent 48%),
    radial-gradient(ellipse at 22% 68%, rgba(201, 169, 104, .075), transparent 43%),
    linear-gradient(180deg, #041219 0%, #031016 52%, #02090c 100%);
}

/* banner.css intentionally compacts desktop pages with CSS zoom. Fixed
   descendants inherit that scale, so compensate only the decorative field;
   the existing Relics geometry remains untouched while the canvas still
   reaches every physical viewport edge. */
@media (min-width: 600px) and (max-width: 1299px) {
  html body:is(.relics-page, .ht-relics-theme) .relics-relay-field {
    width: calc(100dvw / .85);
    height: calc(100dvh / .85);
  }
}

@media (min-width: 1300px) {
  html body:is(.relics-page, .ht-relics-theme) .relics-relay-field {
    width: calc(100dvw / .8);
    height: calc(100dvh / .8);
  }
}

html body:is(.relics-page, .ht-relics-theme) .relics-relay-field canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: saturate(1.32) contrast(1.38) brightness(1.24);
  transition: opacity .7s ease;
}

html body:is(.relics-page, .ht-relics-theme) .relics-relay-field.is-ready canvas {
  opacity: 1;
}

/* A continuous veil makes text readable while leaving the moving light,
   halo and refracted detail visible through every glass surface. */
html body:is(.relics-page, .ht-relics-theme) .relics-relay-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(2, 9, 12, .28) 0%,
      rgba(2, 9, 12, .04) 24%,
      rgba(2, 9, 12, .10) 68%,
      rgba(2, 9, 12, .22) 100%),
    radial-gradient(ellipse at 50% 52%, transparent 40%, rgba(2, 9, 12, .09) 100%);
}

html body:is(.relics-page, .ht-relics-theme) .relics-relay-field.is-fallback canvas,
html body:is(.relics-page, .ht-relics-theme) .relics-relay-field.is-paused canvas {
  opacity: .46;
}

/* Keep the hero and all page content in front of the continuous field. */
html body:is(.relics-page, .ht-relics-theme) .banner-wrap {
  position: relative;
  z-index: 4;
}

html body:is(.relics-page, .ht-relics-theme) :is(
  .page-head,
  .finder,
  .relics-table-wrap,
  .relics-section-head,
  .sh-cat-head,
  .sh-section-head,
  .sh-wrap,
  .ht-request,
  footer
) {
  position: relative;
  z-index: 2;
}

/* Clear storm-glass plates. These selectors deliberately outrank the older
   page-local and shared opaque paints without changing component geometry. */
html body:is(.relics-page, .ht-relics-theme) #finder-section .finder-inner,
html body:is(.relics-page, .ht-relics-theme) .relics-table,
html body:is(.relics-page, .ht-relics-theme) .franchise-tile,
html body:is(.relics-page, .ht-relics-theme) .tcg-lang-tile,
html body:is(.relics-page, .ht-relics-theme) .sh-brand-tile,
html body:is(.relics-page, .ht-relics-theme) .sh-wrap > div[style*="dashed"],
html body:is(.relics-page, .ht-relics-theme) .ht-request.ht-request > div {
  background-color: rgba(3, 12, 16, .24) !important;
  background-image:
    linear-gradient(145deg, rgba(11, 34, 44, .36), rgba(3, 13, 18, .22) 58%, rgba(2, 9, 12, .30)) !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(4px) saturate(1.08);
  backdrop-filter: blur(4px) saturate(1.08);
}

html body:is(.relics-page, .ht-relics-theme) :is(.tcg-lang-tile.active, .sh-brand-tile[href], .franchise-tile[href]):hover {
  background-color: rgba(5, 19, 25, .42) !important;
  background-image:
    linear-gradient(145deg, rgba(13, 42, 53, .50), rgba(4, 17, 23, .32) 58%, rgba(2, 9, 12, .40)) !important;
  border-color: rgba(142, 189, 202, .58) !important;
}

html body:is(.relics-page, .ht-relics-theme) .sh-brand-tile[class] .sh-brand-icon,
html body:is(.relics-page, .ht-relics-theme) .franchise-tile .franchise-tile-icon {
  background-color: rgba(4, 16, 21, .22) !important;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(93, 157, 174, .20), rgba(4, 16, 21, .16) 54%, rgba(2, 9, 12, .26) 100%) !important;
}

html body:is(.relics-page, .ht-relics-theme) .sh-soon-badge {
  background: rgba(2, 9, 12, .48) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Search, filters, browse affordances and request controls are clear enough
   to reveal the shader, but retain a dark local layer around text. */
html body:is(.relics-page, .ht-relics-theme) #finder-section #finder-input,
html body:is(.relics-page, .ht-relics-theme) :is(.relics-sort select, .ht-request .ht-req-inp) {
  background-color: rgba(2, 9, 12, .52) !important;
  background-image: linear-gradient(180deg, rgba(9, 30, 39, .50), rgba(2, 9, 12, .40)) !important;
  border-color: rgba(105, 158, 174, .40) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html body:is(.relics-page, .ht-relics-theme) #finder-section button.fscope,
html body:is(.relics-page, .ht-relics-theme) :is(
  .sh-brand-explore,
  .tcg-lang-status,
  .rb,
  .relics-empty-swap,
  .ht-request button
) {
  background-color: rgba(2, 9, 12, .34) !important;
  background-image: linear-gradient(180deg, rgba(13, 37, 46, .38), rgba(2, 9, 12, .24)) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

html body:is(.relics-page, .ht-relics-theme) #finder-section button.fscope.active,
html body:is(.relics-page, .ht-relics-theme) #finder-section button.fscope[aria-pressed="true"],
html body:is(.relics-page, .ht-relics-theme) :is(.sh-brand-explore, .tcg-lang-status, .rb, .relics-empty-swap, .ht-request button):hover {
  background-color: rgba(8, 28, 36, .52) !important;
  background-image: linear-gradient(180deg, rgba(20, 52, 62, .50), rgba(4, 15, 20, .36)) !important;
}

html body:is(.relics-page, .ht-relics-theme) .relics-table :is(thead, tbody tr) {
  background: rgba(2, 9, 12, .22) !important;
}

html body:is(.relics-page, .ht-relics-theme) footer:not(#ht-none) {
  /* Let the fixed Relay field continue into the footer. The old solid top
     border and immediate dark paint produced a visible horizontal cut in the
     moving halo. This long transparent ramp keeps the legal copy readable
     without drawing a seam across the animation. */
  border-top: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(180deg,
    rgba(2, 9, 12, 0) 0%,
    rgba(2, 9, 12, .16) 14%,
    rgba(2, 9, 12, .42) 46%,
    rgba(2, 9, 12, .70) 100%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.08);
  backdrop-filter: blur(5px) saturate(1.08);
}

@media (max-width: 700px) {
  html body:is(.relics-page, .ht-relics-theme) .relics-relay-field {
    /* dvh follows the mobile browser chrome and prevents a blank strip after
       the address bar collapses. The first value is the older-browser fall back. */
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
  }

  html body:is(.relics-page, .ht-relics-theme) .relics-relay-field.is-ready canvas {
    opacity: .96;
  }

  html body:is(.relics-page, .ht-relics-theme) .relics-relay-field::after {
    background:
      linear-gradient(180deg, rgba(2, 9, 12, .26), rgba(2, 9, 12, .06) 42%, rgba(2, 9, 12, .24)),
      radial-gradient(ellipse at 50% 52%, transparent 34%, rgba(2, 9, 12, .11) 100%);
  }

  html body:is(.relics-page, .ht-relics-theme) #finder-section .finder-inner,
  html body:is(.relics-page, .ht-relics-theme) .relics-table,
  html body:is(.relics-page, .ht-relics-theme) .franchise-tile,
  html body:is(.relics-page, .ht-relics-theme) .tcg-lang-tile,
  html body:is(.relics-page, .ht-relics-theme) .sh-brand-tile,
  html body:is(.relics-page, .ht-relics-theme) .sh-wrap > div[style*="dashed"],
  html body:is(.relics-page, .ht-relics-theme) .ht-request.ht-request > div {
    -webkit-backdrop-filter: blur(4px) saturate(1.05);
    backdrop-filter: blur(4px) saturate(1.05);
  }

  html body:is(.relics-page, .ht-relics-theme) #finder-section button.fscope,
  html body:is(.relics-page, .ht-relics-theme) :is(.rb, .relics-empty-swap, .ht-request button) {
    min-height: 44px !important;
  }
}

@media (max-width: 320px) {
  html body:is(.relics-page, .ht-relics-theme) #finder-section #finder-input {
    font-size: 10px !important;
    letter-spacing: -.02em !important;
    padding-left: 26px !important;
    padding-right: 7px !important;
  }

  html body:is(.relics-page, .ht-relics-theme) #finder-section #finder-input::placeholder {
    font-size: 9px !important;
    letter-spacing: -.02em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:is(.relics-page, .ht-relics-theme) .relics-relay-field canvas {
    transition: none;
  }

  html body:is(.relics-page, .ht-relics-theme) .relics-relay-field.is-ready canvas,
  html body:is(.relics-page, .ht-relics-theme) .relics-relay-field.is-paused canvas {
    opacity: .46;
  }
}

@media (forced-colors: active) {
  html body:is(.relics-page, .ht-relics-theme) {
    background: Canvas !important;
  }

  html body:is(.relics-page, .ht-relics-theme) .relics-relay-field {
    display: none;
  }
}