/* ============================================================
   Hidden Temple - hero-matched atmosphere and template polish
   ------------------------------------------------------------
   This is a presentation-only layer. It does not change layout,
   content, routes, controls, photo wells, data attributes or bindings.

   Source direction supplied by Chris:
   - Hidden Temple hero: the color source of truth.
   - Flux: refracted light, fine frames and border illumination.
   - Cadence: quiet bento depth and clear surface hierarchy.
   - Relay: low, oversized aurora fields and status-light restraint.
   - Artifact: material/glare response without obscuring content.

   The hero poster's lower band is almost black storm-blue, with the brighter
   cyan held inside the clouds and wet road. The page base and large card
   surfaces stay in that dark band so they do not turn into a green/teal slab
   below the artwork. Blue-cyan is reserved for fine frames and reflections.
   Violet remains inside the hero artwork only; it is not a text color. The
   established temple-gold typography remains the warm semantic accent.

   Bespoke geometry is protected: HSC1, Topsun/Toppu Sticker 3 and the
   Bear Walker COA layout receive the palette but no card-geometry rules.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Existing site token names, now sampled from the hero. */
  --bg: #041219;
  --bg-deeper: #02090c;
  --ink: #d9e6e8;
  --ink-dim: #8aa6aa;
  --ink-faint: #526c71;
  --ink-body: #b8cdd0;
  --teal: #4f8393;
  --teal-bright: #8ebdca;
  --teal-lit: #b4d7df;
  --teal-deep: #244d5f;
  --blood: #c77a80;
  --blood-bright: #e0a0a5;
  --bronze: #8b7344;
  --bronze-bright: #c9a968;
  --bronze-lit: #d9b877;
  --line: #173843;

  /* Shared composition tokens. */
  --dc-bronze: #c9a968;
  --dc-teal: #b4d7df;
  --dc-ink: #b8cdd0;
  --dc-rule: rgba(79, 131, 147, 0.28);
  --dc-rule-strong: rgba(142, 189, 202, 0.52);

  /* New semantic surface tokens, kept out of legacy component names. */
  --ht-void: #02090c;
  --ht-storm: #041219;
  --ht-storm-mid: #071923;
  --ht-storm-high: #0b2531;
  --ht-ridge: #244d5f;
  --ht-lightning: #8ebdca;
  --ht-mist: #d9e6e8;
  --ht-gold-deep: #8b7344;
  --ht-gold: #c9a968;
  --ht-gold-bright: #d9b877;
  --ht-gold-lit: #f2dcab;
  --ht-surface: rgba(5, 18, 24, 0.94);
  --ht-surface-raised: rgba(8, 25, 33, 0.94);
  --ht-frame: rgba(79, 131, 147, 0.30);
  --ht-frame-lit: rgba(142, 189, 202, 0.58);
  --ht-depth: 0 18px 48px -30px rgba(0, 0, 0, 0.96);

  /* Older template dialects use these aliases. Gold is retained as the
     approved typography accent; the old unrelated red/rainbow drift is not. */
  --deep: #02090c;
  --dim: #8aa6aa;
  --faint: #526c71;
  --gold: #c9a968;
  --red: #c77a80;
  --accent: #8ebdca;
  --accent-deep: #244d5f;
  --accent-bg: #071923;
  --panel: #071923;
  --bg2: #071923;
  --wash: rgba(79, 131, 147, 0.045);
  --rule: rgba(79, 131, 147, 0.28);
  --rule-faint: rgba(79, 131, 147, 0.16);
  --rule-strong: rgba(142, 189, 202, 0.52);
  --ht-nav-bronze: #c9a968;
  --ht-nav-rule-here: #8ebdca;
}

html {
  background: var(--ht-void) !important;
  scrollbar-color: var(--ht-ridge) var(--ht-void);
}

html body {
  background-color: var(--ht-storm) !important;
  background-image:
    radial-gradient(70rem 28rem at 50% -5rem, rgba(61, 111, 137, 0.052), transparent 66%),
    radial-gradient(46rem 34rem at -12% 44%, rgba(31, 72, 94, 0.038), transparent 70%),
    radial-gradient(42rem 32rem at 108% 68%, rgba(38, 78, 100, 0.026), transparent 72%),
    linear-gradient(180deg, #041219 0%, #031016 46%, #02090c 100%) !important;
  background-attachment: fixed !important;
  color: var(--ht-mist);
}

/* Legacy pages paint their atmospheric fields locally. The Hunt's original
   green/teal wash was especially strong, so the final shared layer keeps the
   motion but remaps every aurora to the hero's restrained storm-blue light. */
html body .aurora {
  background:
    radial-gradient(130% 66% at 50% -10%, rgba(36, 77, 95, 0.10), transparent 62%),
    linear-gradient(180deg, #041219 0%, #031016 46%, #02090c 100%) !important;
}

html body .aurora .a1 {
  background: radial-gradient(circle, rgba(79, 131, 147, 0.12), rgba(36, 77, 95, 0.045) 46%, transparent 70%) !important;
}

html body .aurora .a2 {
  background: radial-gradient(circle, rgba(36, 77, 95, 0.14), rgba(79, 131, 147, 0.035) 50%, transparent 72%) !important;
}

html body .aurora .a3 {
  background: radial-gradient(circle, rgba(201, 169, 104, 0.07), rgba(201, 169, 104, 0.018) 40%, transparent 66%) !important;
}

::selection {
  color: #eef8f9;
  background: rgba(79, 131, 147, 0.76);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ht-lightning) !important;
  outline-offset: 3px !important;
}

/* Remove the browser's purple visited-link fallback from old pages. Text and
   card components may still choose a more specific color of their own. */
html body a,
html body a:visited {
  color: var(--ht-lightning);
}

/* ---------- hero and site chrome ---------- */
html body .banner-wrap {
  background: var(--ht-void) !important;
}

html body .banner-wrap::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: auto 0 0 !important;
  height: clamp(30px, 5.4vw, 78px) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  background: linear-gradient(180deg, rgba(2, 9, 12, 0), rgba(4, 18, 25, 0.88) 72%, #041219 100%) !important;
}

html body .banner-nav {
  background: linear-gradient(180deg, rgba(4, 18, 25, 0.985), rgba(2, 9, 12, 0.985)) !important;
  border-bottom-color: rgba(79, 131, 147, 0.34) !important;
  box-shadow: 0 14px 38px -30px rgba(142, 189, 202, 0.56) !important;
}

html body .tools-dropdown .tools-menu {
  background: #02090c !important;
  background-color: #02090c !important;
  border-color: rgba(79, 131, 147, 0.36) !important;
  border-top-color: #4f8393 !important;
}

html body .banner-nav .nav-brand,
html body .banner-nav .nav-brand:visited,
html body .banner-nav .nav-auth > a,
html body .banner-nav .nav-auth > a:visited,
html body .banner-nav .nav-auth > a.ht-msg-bell,
html body .banner-nav .nav-auth > a.ht-msg-bell:visited {
  color: var(--ht-lightning) !important;
}

html body .banner-nav .nav-links > a,
html body .banner-nav .nav-links > .tools-dropdown > .tools-trigger {
  background-image: linear-gradient(90deg, var(--ht-gold), var(--ht-lightning)) !important;
  background-repeat: no-repeat !important;
  background-position: left calc(100% - 4px) !important;
  background-size: 0% 1px !important;
}

html body .banner-nav .nav-links > a:hover,
html body .banner-nav .nav-links > .tools-dropdown > .tools-trigger:hover,
html body .banner-nav .nav-links > a.active {
  color: var(--ht-gold-lit) !important;
  background-image: linear-gradient(90deg, var(--ht-gold), var(--ht-lightning)) !important;
  background-repeat: no-repeat !important;
  background-position: left calc(100% - 4px) !important;
  background-size: 100% 1px !important;
}

html body .banner-nav .nav-auth > a,
html body .banner-nav .nav-auth > a:visited {
  background:
    linear-gradient(180deg, rgba(11, 32, 40, 0.90), rgba(2, 9, 12, 0.78)) padding-box,
    linear-gradient(120deg, rgba(79, 131, 147, 0.66), rgba(142, 189, 202, 0.48)) border-box !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  html body .banner-nav .mnav-toggle {
    color: var(--ht-gold-bright) !important;
    border-color: rgba(79, 131, 147, 0.62) !important;
    background: rgba(2, 9, 12, 0.80) !important;
    box-shadow: 0 8px 28px -18px rgba(142, 189, 202, 0.72) !important;
  }

  html body .banner-nav .mnav-toggle:hover,
  html body .banner-nav .mnav-toggle:focus {
    color: var(--ht-lightning) !important;
    border-color: var(--ht-lightning) !important;
  }
}

html body footer {
  background-color: var(--ht-void) !important;
  background-image: linear-gradient(180deg, rgba(11, 32, 40, 0.44), rgba(2, 9, 12, 0.97)) !important;
  border-top-color: rgba(79, 131, 147, 0.28) !important;
}

/* ---------- mastheads and section framing (Flux + Cadence) ---------- */
html body .page-head:not(.preview-page),
html body .sticker-head,
html body .section-head {
  isolation: isolate;
}

html body .page-head {
  background-image:
    linear-gradient(90deg, rgba(142, 189, 202, 0.30), transparent 22%) top left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(142, 189, 202, 0.20), transparent 72%) top left / 1px 34px no-repeat,
    radial-gradient(32rem 12rem at 12% 0%, rgba(79, 131, 147, 0.085), transparent 72%) !important;
}

html body .page-title,
html body .section-title,
html body .panel-title {
  color: var(--ht-mist) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.92) !important;
}

html body :is(.page-title em, .eyebrow, .section-eyebrow, .sticker-head h2, .pack-art-head h2) {
  color: var(--ht-gold-bright) !important;
}

/* Several historical templates hard-code their accent classes with higher
   selector specificity. These explicit aliases keep their typography intact
   while moving the paint into the measured hero palette. */
html body .eyebrow.eyebrow,
html body .finder-eyebrow.finder-eyebrow,
html body .htc-ohead.htc-ohead,
html body .section-eyebrow.section-eyebrow,
html body .sub.sub,
html body .fb-tag.fb-tag,
html body .ht-home-h.ht-home-h,
html body footer .mark.mark {
  color: var(--ht-gold) !important;
}

html body .gates .gate-title,
html body .ci-title.ci-title {
  color: var(--ht-lightning) !important;
}

html body .htbtn-lbl.htbtn-lbl,
html body .finder-title em,
html body .page-title em {
  color: var(--ht-gold-bright) !important;
}

html body .page-head .page-title em {
  color: var(--ht-gold-bright) !important;
  text-shadow: 0 0 42px rgba(201, 169, 104, 0.22) !important;
}

html body .gates .gate-num,
html body .gates .gate-num::after,
html body .codex-index .ci-n,
html body .codex-index .ci-n:hover {
  color: var(--ht-gold) !important;
}

html body .gates .gate-enter,
html body .codex-index .ci-go,
html body footer a,
html body footer a:visited {
  color: var(--ht-gold) !important;
}

html body .hero .record .rec b,
html body .hero .divider-mark,
html body .ht-home-sec .ht-home-card .ht-home-h,
html body footer:not(#ht-none) .mark,
html body footer:not(#ht-none) > span.mark,
html body footer:not(#ht-none) a,
html body footer:not(#ht-none) a:visited {
  color: var(--ht-gold-bright) !important;
}

html body footer:not(#ht-none) p[style*="border-top"] a[href],
html body footer:not(#ht-none) p.f-policy a[href] {
  color: var(--ht-gold) !important;
  border-color: rgba(79, 131, 147, 0.28) !important;
  background-color: rgba(8, 24, 29, 0.58) !important;
}

html body .gates .gate .gate-enter {
  color: var(--ht-gold-bright) !important;
  border-color: rgba(79, 131, 147, 0.32) !important;
  background-color: rgba(2, 9, 12, 0.64) !important;
}

html body .hero .record .rec .rec-spark path[stroke] {
  stroke: var(--ht-lightning) !important;
}

html body .hero .record .rec .rec-spark circle {
  fill: var(--ht-lightning) !important;
}

html body .hero .record .rec .rec-spark path[fill] {
  fill: rgba(79, 131, 147, 0.16) !important;
}

html body :is(.fb-mark, #ht-back-to-top, .ht-bt-arrow, .ht-lb-close) {
  color: var(--ht-lightning) !important;
}

html body :is(.finder-panel, #finder-panel) :is(select, option),
html body .fscope-n.fscope-n,
html body .sh-brand-explore.sh-brand-explore,
html body .tcg-lang-flag.tcg-lang-flag,
html body .relics-table th,
html body .finder-results th,
html body .sh-brand-tile small {
  color: var(--ht-gold) !important;
}

html body .sh-brand-tile[class] .sh-brand-icon {
  background: radial-gradient(circle at 50% 20%, rgba(79, 131, 147, 0.28), rgba(11, 32, 40, 0.95) 48%, #02090c 100%) !important;
}

html body .sh-brand-tile[class] .sh-brand-glyph {
  color: var(--ht-lightning) !important;
  text-shadow: 0 0 18px rgba(142, 189, 202, 0.20) !important;
}

html body :is(.ht-ja-rel, .pg-label, .set-desc summary, .set-note summary, details > summary) {
  color: var(--ht-gold) !important;
}

html body :is(.page-sub, .sh-sub, .set-desc-body, .panel-body) {
  color: var(--ink-body) !important;
}

html body :is(.meta-badge, .badge, .chip, .set-meta) {
  background-color: rgba(8, 24, 29, 0.78) !important;
  border-color: rgba(79, 131, 147, 0.30) !important;
  color: var(--ink-dim) !important;
  box-shadow: inset 0 1px 0 rgba(142, 189, 202, 0.045) !important;
}

html body :is(.meta-badge, .badge, .chip, .set-meta) :is(.k, strong) {
  color: var(--ht-gold) !important;
}

html body .set-meta {
  color: var(--ht-gold) !important;
}

html body :is(.meta-badge, .badge, .chip, .set-meta) :is(.v, em) {
  color: var(--ht-lightning) !important;
}

/* ---------- material surfaces (Cadence bento + Artifact depth) ---------- */
html body:not(.hsc1-page):not(.tg3-page):not(.tsg3-page)
  :is(.sets-wrap, .intake-wrap, .verified-list) .sets-grid > .set-tile,
html body :is(.dpx-tile, .sh-brand-tile, .tcg-era, .panel, .ht-home-card, .gate, .set-desc, .set-note, .ht-notes-card, .kpi, .overall, .brand, .board-state) {
  border-color: var(--ht-frame) !important;
  background-color: var(--ht-storm-mid) !important;
  background-image:
    radial-gradient(120% 92% at 50% -28%, rgba(142, 189, 202, 0.065), transparent 56%),
    linear-gradient(145deg, rgba(10, 29, 38, 0.94), rgba(5, 18, 24, 0.975) 48%, rgba(2, 9, 12, 0.995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(142, 189, 202, 0.075),
    inset 18px 0 34px -38px rgba(142, 189, 202, 0.46),
    var(--ht-depth) !important;
}

/* The source archive contains several generations of otherwise equivalent
   card and information-panel names. Repaint those surfaces here, after every
   page-local style block, so older templates cannot keep the greener legacy
   material. This is paint only: no display, sizing, spacing, position or
   overflow property is changed, including on HSC1 and both Gum 3 layouts. */
html body :is(
  .sets-grid > .set-tile,
  .tcg-set-tile,
  .sheet-name-item,
  .ht-info-fold-body,
  .fam-strip,
  .gap-note,
  .spt-card,
  .ht-community-status,
  .about-panel,
  .coa-warn-inner,
  .intro-card,
  .cx-plate,
  .cx-blk,
  .cx-handoff,
  .ci-row,
  .hub-card,
  .kb-box,
  .reach-group,
  .section-block,
  .comp-summary,
  .dropzone,
  .empty-callout,
  .auth-card,
  .acct-card,
  .seeker-gate-card,
  .queue-panel,
  .contact-form-wrap,
  .nf-card,
  .nf-search,
  .ir-card,
  .market-panel,
  .coming-soon-card,
  .rp-msg,
  .htd-card,
  .ebay-launch,
  .g-card,
  .set-desc-inner,
  .tcg-lang-tile,
  .result-tab
),
html body #bk-admin-upload-note {
  border-color: var(--ht-frame) !important;
  background-color: var(--ht-storm-mid) !important;
  background-image:
    radial-gradient(120% 92% at 50% -28%, rgba(142, 189, 202, 0.055), transparent 56%),
    linear-gradient(145deg, rgba(10, 29, 38, 0.94), rgba(5, 18, 24, 0.975) 48%, rgba(2, 9, 12, 0.995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(142, 189, 202, 0.065),
    var(--ht-depth) !important;
}

/* Raise the final paint above a few two-class and ID-scoped legacy rules. */
html body :is(.acct-card.acct-card, .meta-badge.meta-badge, .coa-warn-inner.coa-warn-inner) {
  border-color: var(--ht-frame) !important;
  background-color: var(--ht-storm-mid) !important;
  background-image:
    radial-gradient(120% 92% at 50% -28%, rgba(142, 189, 202, 0.055), transparent 56%),
    linear-gradient(145deg, rgba(10, 29, 38, 0.94), rgba(5, 18, 24, 0.975) 48%, rgba(2, 9, 12, 0.995)) !important;
}

/* Final high-specificity exceptions found by the complete computed-style
   route sweep. Each selector names an existing painted surface; no structural
   property is changed. */
html body :is(
  .set-tile.set-tile.set-tile,
  .legend-strip.legend-strip,
  .meta-badges .meta-badge.meta-badge,
  .sh-wrap > div[style*="dashed"],
  .ht-request > div,
  section[style*="max-width:1100px"] > div[style*="background:rgba(15,28,30,0.4)"]
),
html body #state-in .acct-card,
html body #state-out .acct-card,
html body #seeker-admin-gate .seeker-gate-card {
  border-color: var(--ht-frame) !important;
  background-color: var(--ht-storm-mid) !important;
  background-image:
    radial-gradient(120% 92% at 50% -28%, rgba(142, 189, 202, 0.055), transparent 56%),
    linear-gradient(145deg, rgba(10, 29, 38, 0.94), rgba(5, 18, 24, 0.975) 48%, rgba(2, 9, 12, 0.995)) !important;
}

html body.tg3-page :is(#pane-grey, #pane-blue, #pane-holo) .fam-strip {
  border-color: var(--ht-frame) !important;
  background-color: rgba(7, 25, 35, 0.72) !important;
  background-image: linear-gradient(145deg, rgba(10, 29, 38, 0.72), rgba(2, 9, 12, 0.90)) !important;
}

html body .sets-wrap .sets-grid > a.set-tile[href]:has(> .set-tile-thumb),
html body .sets-wrap .sets-grid > a.set-tile[href]:has(> .set-tile-thumb):first-of-type,
html body:not(.hsc1-page):not(.tg3-page):not(.tsg3-page) .sets-wrap .set-tile:not(.pack-art-tile),
html body:not(.hsc1-page):not(.tg3-page):not(.tsg3-page) .sets-wrap .set-tile.pack-art-tile.has-parent-thumb,
html body .about-compact-v2 .about-grid > .about-panel:nth-of-type(n),
html body:not(.hsc1-page):not(.tg3-page):not(.tsg3-page) .page-head .meta-badges .meta-badge {
  border-color: var(--ht-frame) !important;
  background-color: var(--ht-storm-mid) !important;
  background-image:
    radial-gradient(120% 92% at 50% -28%, rgba(142, 189, 202, 0.055), transparent 56%),
    linear-gradient(145deg, rgba(10, 29, 38, 0.94), rgba(5, 18, 24, 0.975) 48%, rgba(2, 9, 12, 0.995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(142, 189, 202, 0.065),
    var(--ht-depth) !important;
}

/* A few tool and editorial pages use locally named large plates. These
   selectors are deliberately page-specific rather than styling every generic
   .wrap, .shell or .col across the archive. */
html body :is(
  main.shell,
  .tool-layout > .col
),
html body > .wrap:has(#app) {
  background-color: var(--ht-storm) !important;
  background-image:
    radial-gradient(48rem 20rem at 24% 0%, rgba(36, 77, 95, 0.08), transparent 68%),
    linear-gradient(180deg, #041219 0%, #031016 52%, #02090c 100%) !important;
}

html body > .wrap:has(#app) .card,
html body.karuta-scarlet-violet-page .sets-wrap > div[style*="background:rgba(15,28,30,0.4)"] {
  border-color: var(--ht-frame) !important;
  background-color: var(--ht-storm-mid) !important;
  background-image: linear-gradient(145deg, rgba(10, 29, 38, 0.94), rgba(5, 18, 24, 0.975) 52%, rgba(2, 9, 12, 0.995)) !important;
}

html body:not(.hsc1-page):not(.tg3-page):not(.tsg3-page)
  :is(.sets-wrap, .intake-wrap, .verified-list) .sets-grid > .set-tile:hover,
html body :is(.dpx-tile, .sh-brand-tile, .tcg-era, .panel, .ht-home-card, .gate, .set-desc, .set-note, .ht-notes-card, .kpi, .overall, .brand, .board-state):hover {
  border-color: var(--ht-frame-lit) !important;
  background-color: var(--ht-storm-high) !important;
  box-shadow:
    inset 0 1px 0 rgba(184, 220, 225, 0.12),
    inset 22px 0 38px -40px rgba(142, 189, 202, 0.64),
    0 22px 54px -32px rgba(0, 0, 0, 0.98),
    0 0 26px -18px rgba(142, 189, 202, 0.48) !important;
}

/* Home uses two-class selectors for its Flux plates, so the general material
   selector above cannot outrank that page-local paint by specificity alone.
   Keep the composition and gold typography, but seat the KPI, entry and news
   plates in the same near-black storm-blue band as the hero's lower edge. */
html body .gates .gate,
html body .hero .record .rec,
html body .ht-home-sec .ht-home-card {
  background-color: #071923 !important;
  background-image:
    radial-gradient(120% 92% at 50% -28%, rgba(142, 189, 202, 0.055), transparent 56%),
    linear-gradient(155deg, rgba(9, 27, 36, 0.95), rgba(5, 17, 23, 0.985) 54%, rgba(2, 9, 12, 0.998)) !important;
}

html body .gates .gate:hover,
html body .hero .record .rec:hover,
html body .ht-home-sec .ht-home-card:hover {
  background-color: #0b2531 !important;
  background-image:
    radial-gradient(120% 92% at 50% -28%, rgba(142, 189, 202, 0.085), transparent 58%),
    linear-gradient(155deg, rgba(12, 34, 45, 0.96), rgba(6, 20, 27, 0.99) 56%, rgba(2, 9, 12, 0.998)) !important;
}

/* Landing and navigation cards may round like the supplied Flux/Cadence
   surfaces. Checklist plates keep their established geometry. */
html body :is(a.set-tile, .dpx-tile, .sh-brand-tile, .tcg-era, .panel, .ht-home-card, .gate) {
  border-radius: 12px !important;
}

/* Photo wells keep every background-image/data binding; only the mount is
   recolored. This deliberately avoids the background shorthand. */
html body :is(.ph-f, .ph-b, .ph-f1, .ph-f2, .ph-holo, .hf-slot, .set-tile-thumb) {
  background-color: var(--ht-void) !important;
  border-color: rgba(79, 131, 147, 0.34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(2, 9, 12, 0.72),
    inset 0 14px 34px rgba(8, 24, 29, 0.58) !important;
}

html body :is(.sn, .num, .verified-num, .dpx-num) {
  color: var(--ht-gold) !important;
  border-color: rgba(79, 131, 147, 0.32) !important;
  background-color: rgba(2, 9, 12, 0.80) !important;
}

html body :is(.snm, .verified-name, .dpx-name, .set-name) {
  color: var(--ht-mist) !important;
}

html body a.set-tile,
html body a.set-tile:visited,
html body a.ci-row,
html body a.ci-row:visited {
  color: var(--ht-mist) !important;
}

/* Color-coded template cards retain their labels and hierarchy, but their
   material colors now come from the hero instead of a rainbow of page-local
   pink/yellow/blue values. */
html body [data-accent] {
  --accent: #8ebdca !important;
  --accent-deep: #244d5f !important;
  --accent-bg: #071923 !important;
}

html body .tcg-set-tile[data-accent] {
  --accent: #8ebdca !important;
  --accent-deep: #244d5f !important;
  --accent-bg: #071923 !important;
}

html body :is(.sty, .jp, .fp-type, .verified-rarity) {
  color: var(--ink-dim) !important;
}

/* ---------- lenticular / 3D material response (Artifact glare) ----------
   A refracted highlight moves inside the card paint only; no card is tilted,
   enlarged or moved, so checklist geometry and spill containment stay fixed. */
html body[class*="3d"]:not(.hsc1-page):not(.tg3-page):not(.tsg3-page)
  :is(.sets-wrap, .intake-wrap, .verified-list) .sets-grid > .set-tile,
html body .sets-grid > .set-tile.lent-tile {
  background-image:
    radial-gradient(circle at 18% 8%, rgba(142, 189, 202, 0.20), transparent 24%),
    linear-gradient(112deg, transparent 18%, rgba(104, 166, 184, 0.055) 34%, rgba(65, 115, 137, 0.14) 48%, rgba(142, 189, 202, 0.07) 62%, transparent 80%),
    linear-gradient(145deg, rgba(16, 44, 55, 0.82), rgba(8, 24, 29, 0.97) 48%, rgba(2, 9, 12, 0.99)) !important;
  background-size: 160% 160%, 240% 100%, 100% 100% !important;
  background-position: 0% 0%, 0% 0%, 0 0 !important;
  transition: border-color 320ms ease, box-shadow 320ms ease, background-position 780ms cubic-bezier(0.22, 0.8, 0.3, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body[class*="3d"]:not(.hsc1-page):not(.tg3-page):not(.tsg3-page)
    :is(.sets-wrap, .intake-wrap, .verified-list) .sets-grid > .set-tile:hover,
  html body .sets-grid > .set-tile.lent-tile:hover {
    background-position: 86% 72%, 100% 0%, 0 0 !important;
  }
}

/* ---------- buttons and form surfaces ---------- */
html body :is(.btn, .htbtn, .btn-primary, .btn-secondary, .htbtn-orn, .gate-enter) {
  border-color: rgba(79, 131, 147, 0.44) !important;
  background-color: rgba(8, 24, 29, 0.84) !important;
  color: var(--ht-gold-bright) !important;
  box-shadow: inset 0 1px 0 rgba(142, 189, 202, 0.06) !important;
}

html body .ht-addphoto.ht-addphoto,
html body .anvil-btn.anvil-btn,
html body .anvil-toggle.anvil-toggle,
html body .htmi-toggle.htmi-toggle {
  border-color: rgba(79, 131, 147, 0.44) !important;
  background-color: rgba(2, 9, 12, 0.90) !important;
  color: var(--ht-gold) !important;
  box-shadow: inset 0 1px 0 rgba(142, 189, 202, 0.055) !important;
}

html body .ht-addphoto.ht-addphoto:hover,
html body .anvil-btn.anvil-btn:hover,
html body .anvil-toggle.anvil-toggle:hover,
html body .htmi-toggle.htmi-toggle:hover {
  border-color: var(--ht-lightning) !important;
  background-color: rgba(16, 44, 55, 0.94) !important;
  color: var(--ht-mist) !important;
}

html body .htmi-toggle .htmi-dia {
  color: var(--ht-lightning) !important;
}

html body :is(.btn, .htbtn, .btn-primary, .btn-secondary, .htbtn-orn, .gate-enter):hover {
  border-color: var(--ht-lightning) !important;
  background-color: rgba(16, 44, 55, 0.92) !important;
  color: #eef8f9 !important;
  box-shadow: 0 0 20px -10px rgba(142, 189, 202, 0.82), inset 0 1px 0 rgba(180, 215, 223, 0.10) !important;
}

html body :is(input, select, textarea) {
  color: var(--ht-mist);
  background-color: rgba(2, 9, 12, 0.86) !important;
  background-image: linear-gradient(180deg, rgba(7, 25, 35, 0.92), rgba(2, 9, 12, 0.94)) !important;
  border-color: rgba(79, 131, 147, 0.36) !important;
}

html body :is(input, select, textarea):is([id], [class]) {
  color: var(--ht-mist);
  background-color: rgba(2, 9, 12, 0.86) !important;
  background-image: linear-gradient(180deg, rgba(7, 25, 35, 0.92), rgba(2, 9, 12, 0.94)) !important;
  border-color: rgba(79, 131, 147, 0.36) !important;
}

html body :is(#finder-input, #ht-req-set, #ht-req-details, #ht-req-email) {
  color: var(--ht-mist) !important;
  background-color: rgba(2, 9, 12, 0.86) !important;
  background-image: linear-gradient(180deg, rgba(7, 25, 35, 0.92), rgba(2, 9, 12, 0.94)) !important;
  border-color: rgba(79, 131, 147, 0.36) !important;
}

html body #finder-section #finder-input {
  color: var(--ht-mist) !important;
  background-color: rgba(2, 9, 12, 0.86) !important;
  background-image: linear-gradient(180deg, rgba(7, 25, 35, 0.92), rgba(2, 9, 12, 0.94)) !important;
  border-color: rgba(79, 131, 147, 0.36) !important;
}

html body :is(input, select, textarea)::placeholder {
  color: #526c71 !important;
}

/* Reading text never borrows the violet light from the hero artwork. Gold is
   the semantic collectible accent; warnings retain the accessible blood red. */
html body :is(.gate-num, .star, .rare, .special) {
  color: var(--ht-gold) !important;
}

html body :is(.sty, .gap-note) {
  background-color: rgba(8, 24, 29, 0.78) !important;
}

html body .tcg-set-logo {
  background-color: var(--ht-storm-mid) !important;
  background-image: radial-gradient(circle at 50% 20%, rgba(79, 131, 147, 0.20), rgba(7, 25, 35, 0.96) 48%, #02090c 100%) !important;
}

/* ---------- reduced motion and accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  html body[class*="3d"]:not(.hsc1-page):not(.tg3-page):not(.tsg3-page)
    :is(.sets-wrap, .intake-wrap, .verified-list) .sets-grid > .set-tile,
  html body .sets-grid > .set-tile.lent-tile {
    transition: none !important;
    background-position: 50% 50%, 50% 0%, 0 0 !important;
  }
}

/* A few long catalog titles place the italic edition name after an already
   full first line. On phones the inline fragment can begin beyond the edge.
   These pages opt into a stacked accent; desktop composition is unchanged. */
@media (max-width: 600px) {
  html body.ht-title-stack-mobile .page-head .page-title {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body.ht-title-stack-mobile .page-head .page-title em {
    display: block !important;
    width: 100% !important;
    margin-top: 0.18em !important;
    overflow-wrap: anywhere !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ht-frame: rgba(142, 189, 202, 0.62);
    --ht-frame-lit: rgba(180, 215, 223, 0.92);
  }
  html body :is(.page-sub, .sh-sub, .set-desc-body, .panel-body) {
    color: #d9e6e8 !important;
  }
}