:root {
  color-scheme: dark;
  --ink: #070806;
  --panel: #0d0f0b;
  --panel-2: #151812;
  --paper: #f3f4e9;
  --muted: #9ba190;
  --dim: #62685c;
  --line: rgba(243, 244, 233, .14);
  --line-strong: rgba(243, 244, 233, .28);
  --buy: #d9fb1e;
  --blue: #8cbaff;
  --gold: #e8bc62;
  --violet: #c2a5ff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body {
  min-width: 0;
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 75% 6%, rgba(217, 251, 30, .09), transparent 29rem),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    var(--ink);
  background-size: auto, 42px 42px, 42px 42px, auto;
}
body.drawer-open { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--buy); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 16px; transform: translateY(-150%); color: var(--ink); background: var(--buy); font-weight: 900; }
.skip-link:focus { transform: none; }

.topbar, main, footer { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  font: 800 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .11em;
}
.back-link { width: fit-content; text-decoration: none; }
.back-link:hover { color: var(--buy); }
.system-state { display: flex; align-items: center; gap: 9px; }
.system-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--buy); box-shadow: 0 0 15px rgba(217, 251, 30, .7); }
.top-actions { display: flex; justify-self: end; gap: 7px; }

.utility-button, .wallet-button, .collection-button, .open-collection, .primary-action, .secondary-action,
.archive-tabs button, .export-button, .drawer-close, .case-focus button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--paper);
  background: transparent;
  font: 850 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .09em;
  cursor: pointer;
}
.wallet-button, .primary-action, .case-focus button { border-color: var(--buy); color: var(--ink); background: var(--buy); }
.wallet-button.is-connected { color: var(--buy); background: rgba(217, 251, 30, .08); }
.wallet-button:disabled { border-color: var(--line); color: var(--muted); background: rgba(243, 244, 233, .035); cursor: default; }
.collection-button b { margin-left: 6px; color: var(--buy); }
.utility-button:hover, .collection-button:hover, .secondary-action:hover, .open-collection:hover, .export-button:hover:not(:disabled), .drawer-close:hover { border-color: var(--buy); color: var(--buy); }

main { padding: 34px 0 90px; }
.eyebrow, .play-facts, .console-rail, .console-footer, .charge-readout, .press-instruction, .next-search,
.relic-meta, .relic-receipt, .player-strip, .how-it-works, .market-tape, .drawer-head, .drawer-toolbar,
.case-rail, .case-focus, .leaderboard-panel, footer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.eyebrow { margin: 0 0 14px; color: var(--buy); font-size: 9px; }
.hero { display: grid; grid-template-columns: 180px minmax(620px, 1fr); gap: clamp(22px, 3vw, 42px); align-items: stretch; }
.hero > *, .hero-copy, .console, .console-screen, .hunt-case-list { min-width: 0; }
.hero-copy { display: flex; flex-direction: column; min-height: 100%; padding: 30px 0 18px; }
.hero-copy h1 { margin: 0 0 24px; font-size: clamp(60px, 6.6vw, 96px); line-height: .78; letter-spacing: -.085em; font-weight: 950; }
.hero-copy h1 em { color: var(--buy); font-style: normal; }
.deck { max-width: 590px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.7vw, 23px); line-height: 1.47; }
.hunt-lore { max-width: 170px; margin-top: auto; color: #737a6e; font: 11px/1.45 Inter, Arial, sans-serif; }
.hunt-case-list { display: grid; margin-top: 8px; }
.hunt-case-list button { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 8px; align-items: center; gap: 8px; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid rgba(243, 244, 233, .1); color: #7d8475; background: transparent; text-align: left; cursor: pointer; }
.hunt-case-list button span { color: inherit; font: 900 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; }
.hunt-case-list button small { overflow: hidden; color: #92998a; font: 750 8px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .065em; text-overflow: ellipsis; white-space: nowrap; }
.hunt-case-list button i { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.hunt-case-list button:hover, .hunt-case-list button.is-active { color: var(--buy); }
.hunt-case-list button:hover small, .hunt-case-list button.is-active small { color: #aeb4a4; }
.hunt-case-list button.is-active i { background: var(--buy); box-shadow: 0 0 13px rgba(217, 251, 30, .65); }

.case-picker { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: min(100%, 590px); min-height: 64px; margin-top: 30px; padding: 0 17px; border: 1px solid rgba(217, 251, 30, .4); border-radius: 13px; color: var(--paper); background: rgba(217, 251, 30, .045); text-align: left; cursor: pointer; }
.case-picker:hover { border-color: var(--buy); background: rgba(217, 251, 30, .075); }
.case-picker span, .case-picker small { color: var(--muted); font: 800 7px/1 ui-monospace, monospace; letter-spacing: .1em; }
.case-picker strong { overflow: hidden; font: 900 11px/1.2 ui-monospace, monospace; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.case-picker small { color: var(--buy); }
.play-facts { display: grid; gap: 7px; margin-top: 18px; color: var(--muted); font-size: 7px; }
.play-facts b { color: var(--buy); }

.console { overflow: hidden; border: 1px solid #373c33; border-radius: 34px; padding: 13px; background: #121510; box-shadow: 0 42px 100px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 255, 255, .11); }
.console-rail, .console-footer { display: flex; justify-content: space-between; gap: 14px; padding: 6px 7px 13px; color: #aeb4a4; font-size: 8px; }
.console-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.console-rail > span:last-child { justify-self: end; }
.energy-rail { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 9px; font-variant-numeric: tabular-nums; }
.console-rail .charge-readout, .console-rail .next-search { position: static; margin: 0; }
.console-footer { padding: 13px 7px 3px; }
.console-screen { position: relative; display: grid; place-items: center; min-height: 720px; overflow: hidden; border: 8px solid #030403; border-radius: 21px; background: #050604 url("./assets/vault-aperture.webp") center / min(760px, 94%) auto no-repeat; box-shadow: inset 0 0 92px rgba(0, 0, 0, .94); perspective: 1400px; isolation: isolate; }
.console-screen::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; border: 1px solid rgba(217, 251, 30, .08); border-radius: 13px; box-shadow: inset 0 0 44px rgba(0, 0, 0, .76); }
.scope { display: none; }
.charge-readout { position: absolute; z-index: 9; top: 20px; left: 21px; margin: 0; color: var(--buy); font-size: 8px; }
.hunt-button { position: relative; z-index: 3; width: min(430px, 68vw); padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 25px 28px rgba(0, 0, 0, .6)); transform-origin: center; transition: transform 240ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease, opacity 180ms ease; }
.hunt-button img { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.hunt-button:not(:disabled):hover { transform: translateY(-4px); filter: drop-shadow(0 28px 34px rgba(217, 251, 30, .17)); }
.hunt-button:not(:disabled):active, .hunt-button.is-pressed { transform: translateY(9px) scale(.985); filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .55)); }
.hunt-button:disabled { cursor: not-allowed; opacity: .43; filter: grayscale(.6) drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }
.button-halo { position: absolute; inset: 25% 10% 12%; border-radius: 999px; background: rgba(217, 251, 30, .36); filter: blur(45px); opacity: .48; }
.console[data-stage="opening"] .hunt-button { transform: perspective(900px) rotateX(62deg) scaleX(.66) scaleY(1.2); opacity: .84; filter: drop-shadow(0 0 42px rgba(217, 251, 30, .3)); }
.console[data-stage="searching"] .hunt-button { transform: perspective(900px) rotateX(82deg) scale(.24, .16); opacity: 0; }
.console[data-stage="opening"] .button-halo, .console[data-stage="searching"] .button-halo { opacity: .85; filter: blur(60px); }
.press-instruction, .next-search { position: absolute; z-index: 9; bottom: 24px; margin: 0; color: var(--buy); font-size: 9px; font-weight: 900; }
.next-search { top: 20px; right: 21px; bottom: auto; color: var(--muted); }
.next-search span { color: var(--paper); }
.console[data-stage="revealed"] .press-instruction, .console[data-stage="cooldown"] .press-instruction { opacity: 0; pointer-events: none; }

.reveal {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --foil-opacity: .13;
  --rarity-accent: var(--buy);
  position: relative;
  z-index: 4;
  width: min(360px, calc(100% - 42px));
  aspect-ratio: 3 / 5;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rarity-accent) 66%, transparent);
  border-radius: 24px;
  color: var(--paper);
  background: #080a07;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .72), inset 0 0 0 7px #11150f, inset 0 0 0 8px rgba(243, 244, 233, .15), 0 0 30px color-mix(in srgb, var(--rarity-accent) 12%, transparent);
  transform: perspective(1300px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(var(--card-lift, 0));
  transition: transform 160ms ease-out, border-color 220ms ease, box-shadow 220ms ease;
}
.reveal:focus-visible { outline: 2px solid var(--rarity-accent); outline-offset: 5px; }
.reveal::before { content: ""; position: absolute; z-index: 3; inset: -18%; pointer-events: none; opacity: var(--foil-opacity); background: url("./assets/card-foil-interference.webp") var(--pointer-x) var(--pointer-y) / 160% 160%; mix-blend-mode: screen; transform: translate(var(--shine-shift-x, 0), var(--shine-shift-y, 0)); }
.reveal::after { content: ""; position: absolute; z-index: 7; inset: 7px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--rarity-accent) 23%, rgba(243, 244, 233, .12)); border-radius: 17px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .42); }
.reveal.is-new { animation: vault-card-in 520ms cubic-bezier(.16, .86, .22, 1); }
.reveal-art { position: absolute; z-index: 1; inset: 8px; min-height: 0; overflow: hidden; border: 0; border-radius: 17px; background: #080a07; }
.reveal-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.07); transition: filter 220ms ease, transform 220ms ease; }
.reveal:hover .reveal-image { filter: saturate(1.02) contrast(1.1); transform: scale(1.008); }
.reveal-art::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(4, 5, 3, .96) 0, rgba(4, 5, 3, .42) 17%, transparent 42%), linear-gradient(0deg, rgba(4, 5, 3, .99) 0, rgba(4, 5, 3, .88) 24%, rgba(4, 5, 3, .16) 45%, transparent 62%); }
.reveal-code { position: absolute; z-index: 5; top: 22px; right: 18px; color: var(--rarity-accent); font: 950 18px/1 ui-monospace, monospace; letter-spacing: -.04em; text-shadow: 0 2px 14px #050604; }
#ultimateButton { position: absolute; z-index: 3; inset: 43% auto auto 50%; width: 72%; height: auto; transform: translate(calc(-50% + var(--button-shift-x, 0px)), calc(-52.72% + var(--button-shift-y, 0px))); filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 20px rgba(217, 251, 30, .36)); will-change: transform, filter; }
.relic-copy { position: absolute; z-index: 4; inset: 0; display: flex; width: 100%; height: 100%; flex-direction: column; padding: 24px 24px 14px; pointer-events: none; }
.relic-head { position: relative; flex: 0 0 auto; margin: -16px -16px 0; padding: 16px 60px 72px 16px; background: linear-gradient(180deg, rgba(4, 5, 3, .98), rgba(4, 5, 3, .72) 54%, transparent); }
.relic-meta { display: flex; flex-wrap: wrap; gap: 6px 9px; padding-right: 56px; color: var(--rarity-accent); font-size: 10px; }
.relic-meta span:not(:last-child)::after { content: " /"; color: rgba(243, 244, 233, .46); }
.relic-copy h2 { max-width: 308px; margin: 13px 0 5px; font-size: clamp(28px, 2.8vw, 38px); line-height: .88; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 2px 14px #050604; }
.artifact-line { margin: 5px 0 0; color: #d4d8c8; font: 800 8px/1.3 ui-monospace, monospace; letter-spacing: .09em; }
.relic-foot { display: block; flex: 0 0 auto; width: auto; margin: auto -16px 0; padding: 80px 16px 0; border: 0; color: var(--paper); background: linear-gradient(180deg, transparent, rgba(4, 5, 3, .94) 34%, rgba(4, 5, 3, .99) 68%); }
.relic-copy blockquote { max-width: 310px; margin: 0; color: var(--paper); font-size: 14px; line-height: 1.32; text-shadow: 0 2px 10px #050604; }
.relic-description { display: none; }
.relic-boundary { width: fit-content; max-width: 300px; margin: 7px 0 0; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--rarity-accent) 52%, transparent); color: var(--paper); background: rgba(4, 5, 3, .82); font: 800 7px/1.25 ui-monospace, monospace; letter-spacing: .045em; text-transform: uppercase; text-wrap: balance; }
.relic-provenance { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin-top: 9px; color: rgba(243, 244, 233, .68); font: 800 10px/1.2 ui-monospace, monospace; letter-spacing: .055em; text-transform: uppercase; }
.relic-provenance > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relic-provenance b { color: rgba(243, 244, 233, .82); font-weight: 850; }
.relic-source { display: inline-flex; flex: 0 0 auto; align-items: center; width: fit-content; min-height: 28px; padding-inline: 4px; color: var(--rarity-accent); font: inherit; text-decoration: none; pointer-events: auto; }
.relic-source:hover { color: var(--paper); }
.relic-seals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.relic-seals span { padding: 6px 8px; border: 1px solid rgba(217, 251, 30, .42); border-radius: 999px; color: var(--buy); background: rgba(217, 251, 30, .055); font: 900 7px/1 ui-monospace, monospace; letter-spacing: .08em; }
.relic-seals span[data-seal="SACRIFICE"] { border-color: rgba(232, 188, 98, .7); color: var(--gold); }
.relic-seals span[data-seal="THE_DOUBLE"], .relic-seals span[data-seal="DEJA_VU"] { border-color: rgba(140, 186, 255, .6); color: var(--blue); }
.reveal-actions { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); margin: 12px -16px -1px; border-top: 1px solid color-mix(in srgb, var(--rarity-accent) 26%, rgba(243, 244, 233, .14)); pointer-events: auto; }
.reveal-actions button { min-width: 0; min-height: 48px; padding: 0 10px; border: 0; border-radius: 0; color: var(--paper); background: rgba(5, 6, 4, .82); font: 900 8px/1 ui-monospace, monospace; letter-spacing: .08em; }
.reveal-actions button + button { border-left: 1px solid color-mix(in srgb, var(--rarity-accent) 26%, rgba(243, 244, 233, .14)); }
.reveal-actions .primary-action { color: var(--ink); background: var(--rarity-accent); }
.reveal-actions button:hover:not(:disabled) { filter: brightness(1.14); }
.reveal-actions button:disabled { color: var(--muted); background: rgba(8, 10, 7, .92); cursor: not-allowed; }
.action-note { display: block; }
.relic-receipt { position: absolute; z-index: 5; top: 0; right: -1px; display: grid; justify-items: end; gap: 4px; min-width: 0; padding: 0; border: 0; color: var(--muted); font-size: 7px; text-align: right; }
.relic-receipt b, #duplicateState { color: var(--paper); }
.relic-receipt span:not(:first-child) { display: none; }
.reveal[data-rarity="UNCOMMON"] { --foil-opacity: .18; --rarity-accent: var(--blue); }
.reveal[data-rarity="RARE"] { --foil-opacity: .25; --rarity-accent: var(--violet); }
.reveal[data-rarity="LEGENDARY"] { --foil-opacity: .34; --rarity-accent: var(--gold); }
.reveal[data-rarity="ULTIMATE"] { --foil-opacity: .44; --rarity-accent: var(--buy); }

.player-strip { display: none; grid-template-columns: repeat(4, 1fr) auto; margin-top: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(12, 14, 10, .86); }
.player-strip > div { display: grid; gap: 7px; padding: 15px; border-right: 1px solid var(--line); }
.player-strip span { color: var(--muted); font-size: 7px; }
.player-strip strong { color: var(--paper); font-size: 12px; }
.player-strip strong b { color: var(--buy); }
.open-collection { align-self: center; margin: 8px; }

.how-it-works { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(12, 14, 10, .78); }
.how-it-works summary { display: flex; justify-content: space-between; gap: 20px; min-height: 52px; padding: 18px; color: var(--paper); font-size: 8px; cursor: pointer; }
.how-it-works summary span { color: var(--muted); text-align: right; }
.how-it-works > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0 18px 20px; border-top: 1px solid var(--line); }
.how-it-works p { margin: 17px 0 0; color: var(--muted); font: 12px/1.55 Inter, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.how-it-works strong { color: var(--paper); font: 800 10px/1.5 ui-monospace, monospace; letter-spacing: .04em; }

.market-tape { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr) auto; margin-top: 52px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 8px; }
.market-tape > * { display: flex; justify-content: space-between; gap: 12px; min-height: 46px; padding: 16px; border-right: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.market-tape > *:first-child { padding-left: 0; }
.market-tape > *:last-child { justify-content: center; padding-right: 0; border-right: 0; color: var(--buy); }
.market-tape b, .market-tape strong { color: var(--paper); }
.market-tape > span:first-child b { color: var(--buy); }

.collection-drawer { width: min(1120px, calc(100% - 24px)); max-width: none; height: min(90vh, 900px); max-height: none; margin: auto 0 0 auto; padding: 0; overflow: hidden; border: 1px solid rgba(217, 251, 30, .32); border-radius: 24px 0 0 0; color: var(--paper); background: #090b08; box-shadow: -30px -20px 100px rgba(0, 0, 0, .64); }
.collection-drawer[open] { animation: drawer-in 240ms cubic-bezier(.2, .8, .2, 1); }
.collection-drawer::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); }
.drawer-shell { height: 100%; overflow: auto; padding: 28px; scrollbar-color: var(--buy) transparent; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font: 950 clamp(44px, 6vw, 78px)/.8 Inter, Arial, sans-serif; letter-spacing: -.07em; }
.drawer-close { flex: 0 0 auto; }
.drawer-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; }
.archive-tabs { display: flex; gap: 7px; }
.archive-tabs button.is-active { border-color: var(--buy); color: var(--ink); background: var(--buy); }
.export-button:disabled { opacity: .35; cursor: not-allowed; }

.case-rail { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-bottom: 10px; }
.case-rail button { position: relative; display: grid; gap: 5px; min-width: 0; min-height: 54px; padding: 9px 6px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--panel); font: 800 7px/1 ui-monospace, monospace; cursor: pointer; }
.case-rail button b { color: var(--paper); font-size: 9px; }
.case-rail button i { height: 2px; overflow: hidden; border-radius: 3px; background: rgba(243, 244, 233, .1); }
.case-rail button i::after { content: ""; display: block; width: var(--progress, 0%); height: 100%; background: var(--buy); }
.case-rail button:hover, .case-rail button.is-active { border-color: var(--buy); color: var(--buy); }
.case-focus { display: flex; align-items: end; justify-content: space-between; gap: 22px; min-height: 112px; padding: 18px; border: 1px solid var(--line); border-radius: 13px 13px 0 0; background: linear-gradient(110deg, rgba(217, 251, 30, .075), transparent 38%), var(--panel); }
.case-focus span { color: var(--buy); font-size: 7px; }
.case-focus h3 { margin: 7px 0 5px; font: 950 clamp(28px, 4vw, 48px)/.86 Inter, Arial, sans-serif; letter-spacing: -.055em; }
.case-focus p { max-width: 680px; margin: 0; color: var(--muted); font: 12px/1.35 Inter, Arial, sans-serif; letter-spacing: 0; text-transform: none; }

.case-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; padding: 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 13px 13px; background: #070806; }
.index-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --foil-opacity: .08;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 3 / 5;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(243, 244, 233, .16);
  border-radius: 17px;
  color: inherit;
  text-align: left;
  background: #0c0e0a;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .34), inset 0 0 0 4px #11140e;
  cursor: not-allowed;
  transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(var(--card-lift, 0));
  transform-style: preserve-3d;
  transition: transform 150ms ease-out, border-color 180ms ease, box-shadow 180ms ease;
}
.index-card::after { content: ""; position: absolute; z-index: 5; inset: -20%; pointer-events: none; opacity: var(--foil-opacity); background: url("./assets/card-foil-interference.webp") var(--pointer-x) var(--pointer-y) / 170% 170%; mix-blend-mode: screen; transform: translate3d(var(--shine-shift-x, 0), var(--shine-shift-y, 0), 18px); }
.index-card:disabled { opacity: 1; }
.index-card.is-found { cursor: pointer; background: #0e100b; }
.index-card.is-found:hover { --card-lift: -5px; border-color: rgba(217, 251, 30, .5); box-shadow: 0 22px 38px rgba(0, 0, 0, .5), inset 0 0 0 4px #11140e; }
.index-visual { position: absolute; inset: 7px; display: block; min-height: 0; overflow: hidden; border: 1px solid rgba(243, 244, 233, .13); border-radius: 12px; background: #11140e; }
.index-visual::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 96px 72px -62px rgba(4, 5, 3, .92), inset 0 -118px 76px -50px rgba(4, 5, 3, .98); }
.index-visual img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.06); transition: transform 240ms ease, filter 240ms ease; }
.index-card.is-found:hover .index-visual img:not(.index-canonical) { transform: scale(1.025); filter: saturate(1) contrast(1.08); }
.index-copy { position: absolute; z-index: 3; inset: auto 15px 15px; display: grid; align-content: end; min-height: 0; padding: 11px; border: 1px solid rgba(243, 244, 233, .1); border-radius: 10px; background: rgba(5, 6, 4, .88); transform: translateZ(16px); }
.index-copy em { color: #686f63; font: 800 6px/1.3 ui-monospace, monospace; letter-spacing: .08em; font-style: normal; }
.index-copy strong { margin-top: 6px; color: #747a6e; font-size: clamp(11px, 1.1vw, 15px); line-height: 1; letter-spacing: -.02em; }
.index-copy small { margin-top: 6px; color: #555b50; font: 7px/1.25 ui-monospace, monospace; letter-spacing: .03em; }
.index-card.is-found .index-copy em { color: var(--buy); }
.index-card.is-found .index-copy strong { color: var(--paper); }
.index-card.is-found .index-copy small { color: var(--muted); }
.locked-visual { display: grid; place-items: center; background: #0b0d09 url("./assets/card-back.webp") center / cover no-repeat; }
.locked-visual::before { content: none; }
.locked-glyph { display: none; }
.index-code { position: absolute; z-index: 3; top: 12px; right: 13px; color: rgba(255, 255, 255, .42); font: 900 9px/1 ui-monospace, monospace; }
.rarity-gem { position: absolute; z-index: 3; top: 13px; left: 13px; width: 22px; height: 4px; border: 0; border-radius: 4px; background: #767d70; }
.index-card[data-rarity="UNCOMMON"] .rarity-gem { background: var(--blue); }
.index-card[data-rarity="RARE"] .rarity-gem { background: var(--violet); }
.index-card[data-rarity="LEGENDARY"] .rarity-gem { background: var(--gold); box-shadow: 0 0 14px rgba(232, 188, 98, .5); }
.index-card[data-rarity="ULTIMATE"] .rarity-gem { background: var(--buy); box-shadow: 0 0 16px rgba(217, 251, 30, .7); }
.index-card[data-rarity="UNCOMMON"] { --foil-opacity: .13; border-color: rgba(140, 186, 255, .38); }
.index-card[data-rarity="RARE"] { --foil-opacity: .2; border-color: rgba(194, 165, 255, .48); }
.index-card[data-rarity="LEGENDARY"] { --foil-opacity: .27; border-color: rgba(232, 188, 98, .62); }
.index-card[data-rarity="ULTIMATE"] { --foil-opacity: .36; border-color: rgba(217, 251, 30, .76); }
.index-canonical { position: absolute; z-index: 2; inset: 43% auto auto 50%; width: 72% !important; height: auto !important; object-fit: contain !important; transform: translate(calc(-50% + var(--button-shift-x, 0px)), calc(-52.72% + var(--button-shift-y, 0px))); filter: drop-shadow(0 11px 9px rgba(0, 0, 0, .46)) drop-shadow(0 0 11px rgba(217, 251, 30, .28)) !important; }

.case-zero { width: min(620px, calc(100% - 28px)); max-width: none; padding: 0; border: 1px solid var(--buy); border-radius: 24px; color: var(--paper); background: #050604; box-shadow: 0 0 120px rgba(217, 251, 30, .2); }
.case-zero::backdrop { background: rgba(0, 0, 0, .9); backdrop-filter: blur(12px); }
.case-zero-room { position: relative; overflow: hidden; padding: 44px; text-align: center; background: radial-gradient(circle, rgba(217, 251, 30, .1), transparent 45%); }
.case-zero-room::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(217, 251, 30, .12); border-radius: 50%; pointer-events: none; }
.case-zero-room > span { color: var(--muted); font: 800 7px/1 ui-monospace, monospace; letter-spacing: .12em; }
.case-zero-room > p { margin: 38px 0 14px; color: var(--buy); font: 950 110px/.7 ui-monospace, monospace; letter-spacing: -.12em; }
.case-zero-room h2 { margin: 26px auto 12px; max-width: 500px; font-size: clamp(34px, 7vw, 60px); line-height: .88; letter-spacing: -.06em; }
.case-zero-room > strong { display: block; color: var(--buy); font: 900 11px/1.3 ui-monospace, monospace; letter-spacing: .08em; }
.case-zero-room button { position: relative; margin-top: 34px; }

.leaderboard-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.leaderboard-head, .leaderboard-panel li { display: grid; grid-template-columns: 48px minmax(180px, 1fr) 80px 80px 90px; align-items: center; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 8px; }
.leaderboard-head { color: var(--muted); }
.leaderboard-panel ol { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.leaderboard-panel li { counter-increment: rank; }
.leaderboard-panel li::before { content: counter(rank, decimal-leading-zero); color: var(--buy); }
.leaderboard-panel li strong { overflow: hidden; text-overflow: ellipsis; }
.leaderboard-panel li span { color: var(--muted); }
.leaderboard-panel > p { margin: 0; padding: 15px 16px; color: var(--dim); font-size: 7px; line-height: 1.5; }
.leaderboard-empty { display: block !important; padding: 28px 16px !important; color: var(--muted); }

footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
footer strong { color: var(--buy); }
.noscript { padding: 16px; text-align: center; }

@keyframes vault-card-in {
  0% { opacity: 0; transform: perspective(1300px) rotateX(74deg) scale(.2, .08) translateY(18px); filter: brightness(2); }
  58% { opacity: 1; transform: perspective(1300px) rotateX(-4deg) scale(1.025) translateY(-3px); filter: brightness(1.22); }
  100% { opacity: 1; transform: perspective(1300px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(var(--card-lift, 0)); filter: none; }
}
@keyframes drawer-in { from { opacity: .5; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; padding: 0; }
  .hero-copy > .eyebrow { margin-bottom: 8px; }
  .hunt-case-list { display: flex; max-width: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .hunt-case-list::-webkit-scrollbar { display: none; }
  .hunt-case-list button { flex: 0 0 74px; grid-template-columns: 1fr 7px; min-height: 44px; }
  .hunt-case-list button small { display: none; }
  .hunt-lore { max-width: none; margin-top: 14px; }
  .play-facts { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 11px; }
  .console-screen { min-height: 700px; }
  .player-strip { grid-template-columns: repeat(4, 1fr); }
  .open-collection { grid-column: 1 / -1; }
  .how-it-works > div { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 760px) {
  .topbar, main, footer { width: min(100% - 24px, 1240px); }
  .topbar { grid-template-columns: 1fr auto; }
  .system-state, .sound-button { display: none; }
  .top-actions { gap: 5px; }
  .collection-button, .wallet-button { min-height: 38px; padding: 0 10px; font-size: 7px; }
  main { padding-top: 40px; }
  .hero { gap: 28px; }
  .hero-copy h1 { font-size: clamp(64px, 19vw, 96px); }
  .deck { font-size: 16px; }
  .case-picker { grid-template-columns: 1fr auto; }
  .case-picker span { display: none; }
  .play-facts { gap: 7px 12px; }
  .console { padding: 8px; border-radius: 21px; }
  .console-screen { min-height: min(690px, 78svh); border-width: 6px; background-size: min(720px, 118%) auto; }
  .console-rail > span:last-child, .console-footer span:last-child { display: none; }
  .console-rail { grid-template-columns: minmax(0, 1fr) auto; }
  .console-footer { justify-content: flex-start; }
  .reveal { width: min(360px, calc(100% - 24px)); }
  .relic-copy { padding: 23px 22px 13px; }
  .relic-foot { margin-inline: -14px; padding-inline: 14px; }
  .player-strip { grid-template-columns: repeat(2, 1fr); }
  .player-strip > div:nth-child(2) { border-right: 0; }
  .player-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .how-it-works summary span { display: none; }
  .market-tape { display: none; }
  .collection-drawer { width: 100%; height: 94vh; border-radius: 18px 18px 0 0; }
  .drawer-shell { padding: 18px 12px 28px; }
  .drawer-head h2 { font-size: 45px; }
  .drawer-toolbar { align-items: center; }
  .export-button { display: none; }
  .case-rail { display: flex; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .case-rail::-webkit-scrollbar { display: none; }
  .case-rail button { flex: 0 0 66px; }
  .case-focus { align-items: start; }
  .case-focus button { flex: 0 0 auto; padding-inline: 11px; }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 9px; }
  .case-zero-room { padding: 34px 20px; }
  .index-card { min-height: 0; }
  .leaderboard-head, .leaderboard-panel li { grid-template-columns: 38px minmax(130px, 1fr) 65px 65px; }
  .leaderboard-head span:last-child, .leaderboard-panel li span:last-child { display: none; }
  footer { display: grid; }
}

/* Wallet login is a signature-only handoff. The dialog never imitates a wallet approval screen. */
.wallet-access {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 22px 80px rgba(16, 17, 13, .38);
}
.wallet-access::backdrop { background: rgba(16, 17, 13, .64); backdrop-filter: blur(5px); }
.wallet-access-card { padding: 24px; }
.wallet-access-card > span { color: var(--muted); font: 800 8px/1 var(--mono); letter-spacing: .08em; }
.wallet-access-card h2 { max-width: 470px; margin: 10px 0 12px; font: 900 clamp(28px, 6vw, 52px)/.88 var(--sans); letter-spacing: -.055em; }
.wallet-access-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.wallet-provider-list { display: grid; gap: 1px; margin: 20px 0; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); }
.wallet-provider-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 58px; padding: 12px 14px; border: 0; color: var(--ink); background: var(--paper); text-align: left; cursor: pointer; }
.wallet-provider-list button:hover, .wallet-provider-list button:focus-visible { background: var(--buy); }
.wallet-provider-list strong { overflow: hidden; font: 850 12px/1.2 var(--mono); letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.wallet-provider-list span { overflow: hidden; color: var(--muted); font: 700 8px/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.wallet-handoff { display: grid; gap: 10px; margin: 20px 0; }
.wallet-handoff label { display: grid; gap: 8px; }
.wallet-handoff label > span { color: var(--muted); font: 800 8px/1 var(--mono); letter-spacing: .08em; }
.wallet-handoff input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 7px; color: var(--ink); background: var(--paper); font: 700 10px/1 var(--mono); }
.wallet-handoff p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.wallet-access-card .wallet-safety { margin-top: 18px; padding: 12px; border-left: 4px solid var(--buy); color: var(--ink); background: rgba(217, 251, 30, .14); font: 700 10px/1.5 var(--mono); }
.wallet-dialog-status { margin-top: 12px !important; color: var(--ink) !important; font: 800 9px/1.4 var(--mono) !important; }
.wallet-access-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.wallet-access-actions button { min-height: 50px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 7px; color: var(--ink); background: var(--paper); font: 800 9px/1 var(--mono); letter-spacing: .05em; cursor: pointer; }
.wallet-access-actions button:last-child:not([hidden]) { background: var(--buy); }
.wallet-access-actions button:hover:not(:disabled) { color: var(--paper); background: var(--ink); }
.wallet-access-actions button:disabled { opacity: .48; cursor: wait; }

@media (max-width: 760px) {
  .wallet-access-card { padding: 20px; }
  .wallet-provider-list button { grid-template-columns: 1fr; gap: 5px; }
  .wallet-access-actions { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size: 64px; }
  .hunt-button { width: 88vw; }
  .console-screen { min-height: 610px; background-size: 142% auto; }
  .reveal { width: min(360px, calc(100% - 12px)); border-radius: 22px; }
  .relic-copy { padding: 21px 20px 12px; }
  .relic-copy h2 { max-width: 270px; font-size: 28px; }
  .relic-foot { margin-inline: -12px; padding: 72px 12px 0; }
  .relic-copy blockquote { font-size: 13px; }
  .relic-provenance { font-size: 10px; }
  .reveal-actions { margin-inline: -12px; }
  .reveal-actions button { min-height: 46px; }
  .case-focus { display: grid; }
  .case-focus button { width: 100%; }
  .drawer-close { padding-inline: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .console-screen::after { display: none; }
}

/* Daylight field guide: the page is paper, the hunt stays inside one dark aperture. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../../pulse/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Spline Sans Mono";
  src: url("../../pulse/fonts/spline-sans-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #10110d;
  --panel: #fffdf7;
  --panel-2: #ebe7dc;
  --paper: #f6f1e5;
  --muted: #5c6056;
  --dim: #76796f;
  --line: rgba(16, 17, 13, .24);
  --line-strong: rgba(16, 17, 13, .72);
  --buy: #d9fb1e;
  --blue: #4675a8;
  --gold: #9c6b14;
  --violet: #6c4ea1;
  --sans: "Hanken Grotesk", Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --card-display: var(--sans);
  --card-label: var(--mono);
  font-family: var(--sans);
}

html { background: var(--paper); }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
}
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--ink); }

.topbar, main, footer { width: min(1488px, 100%); }
.topbar {
  min-height: 64px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-top: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--mono);
}
.back-link { font-weight: 700; }
.back-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.system-state span { box-shadow: none; }
.top-actions { gap: 10px; }

.utility-button, .wallet-button, .collection-button, .open-collection, .primary-action, .secondary-action,
.archive-tabs button, .export-button, .drawer-close, .case-focus button {
  min-height: 42px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  color: var(--ink);
  background: transparent;
  font-family: var(--mono);
  font-weight: 700;
}
.wallet-button, .case-focus button { border-color: var(--ink); color: var(--ink); background: var(--buy); }
.wallet-button.is-connected { color: var(--ink); background: var(--buy); }
.wallet-button:disabled { border-color: var(--line-strong); color: var(--muted); background: var(--panel-2); }
.collection-button b { color: var(--ink); }
.utility-button:hover, .collection-button:hover, .secondary-action:hover, .open-collection:hover,
.export-button:hover:not(:disabled), .drawer-close:hover { border-color: var(--ink); color: var(--ink); background: var(--buy); }

main { padding: 0 0 72px; }
.eyebrow, .play-facts, .console-rail, .console-footer, .charge-readout, .press-instruction, .next-search,
.relic-meta, .relic-receipt, .player-strip, .how-it-works, .market-tape, .drawer-head, .drawer-toolbar,
.case-rail, .case-focus, .leaderboard-panel, footer { font-family: var(--mono); }

.hero {
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 0;
  min-height: 860px;
  align-items: stretch;
  border-inline: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-copy {
  position: relative;
  min-height: 100%;
  padding: 32px 22px 26px;
  border-right: 1px solid var(--ink);
  color: var(--ink);
  background: var(--buy);
}
.field-guide-lockup { position: relative; margin-bottom: 38px; }
.field-guide-code {
  position: absolute;
  top: 2px;
  right: 0;
  font: 700 8px/1 var(--mono);
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}
.field-guide-lockup h1 {
  width: 122%;
  margin: 0;
  font: 900 48px/.78 var(--sans);
  letter-spacing: -.07em;
  text-transform: uppercase;
  transform: scaleX(.82);
  transform-origin: left top;
}
.field-guide-lockup h1 span { display: block; white-space: nowrap; }
.field-guide-lockup p { margin: 18px 0 0; font: 700 8px/1 var(--mono); letter-spacing: .11em; }
.eyebrow { margin: 0 0 8px; color: var(--ink); font-size: 8px; font-weight: 700; }
.hunt-case-list { margin: 0; border-top: 1px solid var(--ink); }
.hunt-case-list button {
  grid-template-columns: 42px minmax(0, 1fr) 12px;
  gap: 8px;
  min-height: 44px;
  padding: 0 3px;
  border-bottom: 1px solid rgba(16, 17, 13, .42);
  color: var(--ink);
}
.hunt-case-list button span { font: 900 17px/1 var(--mono); letter-spacing: -.06em; }
.hunt-case-list button small { color: var(--ink); font: 700 7px/1.15 var(--mono); letter-spacing: .04em; }
.hunt-case-list button i { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; }
.hunt-case-list button:hover, .hunt-case-list button.is-active {
  margin-inline: -22px;
  padding-inline: 25px;
  color: var(--paper);
  background: var(--ink);
}
.hunt-case-list button:hover small, .hunt-case-list button.is-active small { color: var(--paper); }
.hunt-case-list button.is-active i { background: var(--paper); box-shadow: none; }
.hunt-lore { max-width: 220px; margin: 24px 0 0; color: var(--ink); font: 700 10px/1.45 var(--sans); }
.play-facts { gap: 6px; margin-top: 18px; color: var(--ink); font-size: 7px; }
.play-facts span { display: grid; grid-template-columns: 24px 1fr; gap: 6px; }
.play-facts b { color: var(--ink); }
.how-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  margin-top: auto;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  color: var(--ink);
  font: 700 8px/1 var(--mono);
  letter-spacing: .08em;
  text-decoration: none;
}
.how-link span { font-size: 22px; }
.how-link:hover { background: var(--paper); }

.console {
  margin: 18px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 18px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 8px 8px 0 rgba(16, 17, 13, .08);
}
.console-rail, .console-footer { padding: 6px 6px 12px; color: var(--ink); font-size: 7px; }
.console-footer { padding: 12px 6px 3px; }
.console-screen {
  min-height: 760px;
  border: 1px solid var(--ink);
  border-radius: 13px;
  background-color: #050604;
  background-image: url("./assets/vault-aperture.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(720px, 90%) auto;
  box-shadow: none;
}
.console-screen::after { inset: 10px; border: 1px solid rgba(246, 241, 229, .18); border-radius: 8px; box-shadow: none; }
.charge-readout { top: 20px; left: 21px; color: var(--paper); }
.hunt-button { width: min(430px, 62vw); filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .66)); }
.hunt-button:not(:disabled):hover { filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .72)); }
.button-halo { display: none; }
.press-instruction { color: var(--buy); }
.next-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(217, 251, 30, .52);
  border-radius: 999px;
  color: rgba(246, 241, 229, .7);
  background: rgba(5, 6, 4, .72);
  backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}
.next-search b { color: var(--buy); font: inherit; }
.next-search span { min-width: 58px; color: var(--paper); text-align: right; }

.reveal-stack {
  --foil-opacity: .13;
  --rarity-accent: var(--buy);
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  width: min(610px, calc(100% - 42px));
  gap: 44px;
  padding: 28px 0 18px;
}
.reveal-stack[hidden] { display: none !important; }
.card-return-cue {
  position: relative;
  z-index: 8;
  display: flex;
  width: min(360px, 100%);
  min-height: 34px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 -32px;
  padding: 7px 10px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--buy);
  box-shadow: 3px 3px 0 rgba(16, 17, 13, .24);
  font: 850 7px/1 var(--mono);
  letter-spacing: .045em;
  pointer-events: none;
}
.card-return-cue span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-return-cue strong { flex: 0 0 auto; font: inherit; }
.reveal {
  width: min(360px, 100%);
  aspect-ratio: 3 / 5;
  border: 1px solid var(--ink);
  border-radius: 18px;
  color: var(--ink);
  background: var(--paper);
  box-shadow:
    0 0 0 3px var(--rarity-accent),
    0 0 0 5px var(--ink),
    0 17px 0 rgba(0, 0, 0, .17),
    0 30px 72px rgba(0, 0, 0, .58);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  cursor: grab;
}
.reveal::before { display: none; }
.reveal::after { inset: 7px; border: 1px solid rgba(16, 17, 13, .34); border-radius: 12px; box-shadow: none; }
.reveal-art { inset: 8px; border: 0; border-radius: 11px; background: var(--ink); }
.reveal-art::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -16%;
  pointer-events: none;
  opacity: var(--foil-opacity);
  background: url("./assets/card-foil-interference.webp") var(--pointer-x) var(--pointer-y) / 165% 165%;
  mix-blend-mode: screen;
  transform: translate(var(--shine-shift-x, 0), var(--shine-shift-y, 0));
}
.reveal-art::after {
  background:
    linear-gradient(180deg, rgba(4, 5, 3, .34), transparent 10%),
    linear-gradient(0deg, rgba(4, 5, 3, .3), transparent 10%);
}
.reveal-image { filter: saturate(1.03) contrast(1.035); }
.reveal:hover .reveal-image { filter: saturate(1.03) contrast(1.035); transform: none; }
.reveal-code {
  display: inline-flex;
  top: 16px;
  right: 23px;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--rarity-accent);
  font: 700 8px/1 var(--card-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-shadow: none;
}
.reveal-code.is-long { font-size: 6px; letter-spacing: .02em; }
.relic-copy { padding: 8px; font-family: var(--card-display); }
.relic-meta, .relic-receipt, .artifact-line, .relic-provenance, .relic-source, .relic-seals span { font-family: var(--card-label); }
.relic-head {
  flex: 0 0 102px;
  margin: 0;
  padding: 15px 15px 12px;
  border: 0;
  border-bottom: 1px solid rgba(16, 17, 13, .34);
  border-radius: 10px 10px 0 0;
  color: var(--ink);
  background: rgba(246, 241, 229, .985);
}
.relic-meta {
  gap: 5px 8px;
  padding-right: 53px;
  color: var(--ink);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .055em;
}
.relic-meta span::after { content: none !important; }
.relic-meta span:not([hidden]) + span:not([hidden])::before { content: "/ "; color: rgba(16, 17, 13, .46); }
.relic-copy h2 {
  max-width: 100%;
  margin: 10px 0 0;
  color: var(--ink);
  font-family: var(--card-display);
  font-size: 31px;
  font-weight: 900;
  font-kerning: normal;
  font-optical-sizing: auto;
  line-height: .88;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: none;
}
.reveal[data-title-length="medium"] .relic-copy h2 { font-size: 26px; line-height: .94; letter-spacing: -.038em; }
.reveal[data-title-length="long"] .relic-copy h2 { font-size: 23px; line-height: .96; letter-spacing: -.03em; }
.artifact-line {
  color: var(--muted);
  font-family: var(--card-label);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.3;
}
.relic-receipt { display: none; }
.relic-receipt b, #duplicateState { color: var(--ink); }
.relic-foot {
  flex: 0 0 auto;
  min-height: 92px;
  margin: auto 0 0;
  padding: 14px 15px 13px;
  border-top: 1px solid rgba(16, 17, 13, .34);
  border-radius: 0 0 10px 10px;
  color: var(--ink);
  background: rgba(246, 241, 229, .985);
}
.relic-copy blockquote {
  max-width: 100%;
  color: var(--ink);
  font-family: var(--card-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-shadow: none;
}
.pressprint {
  --print-accent: var(--rarity-accent);
  margin: 10px 0 2px;
  padding: 8px 9px 7px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 7px;
  color: var(--paper);
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--print-accent) 13%, transparent), transparent 38%),
    var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--print-accent) 18%, transparent);
  font-family: var(--card-label);
  font-synthesis: none;
}
.pressprint[hidden] { display: none !important; }
.pressprint header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pressprint header span { color: rgba(246, 241, 229, .64); font: 600 7.5px/1.1 var(--card-label); letter-spacing: .05em; }
.pressprint header span b { margin-left: 4px; color: var(--paper); font-weight: 700; }
.pressprint header strong { flex: 0 0 auto; color: var(--print-accent); font: 700 9px/1 var(--card-label); letter-spacing: .035em; }
.pressprint header strong b { display: inline-grid; min-width: 20px; height: 20px; margin-left: 4px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--print-accent); font-size: 8px; }
.pressprint-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.pressprint-stats > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 4px;
  align-items: center;
  gap: 4px 3px;
  min-width: 0;
}
.pressprint-stats i { color: rgba(246, 241, 229, .7); font: 600 7px/1 var(--card-label); letter-spacing: .03em; font-style: normal; }
.pressprint-stats b { color: var(--paper); font: 700 9px/1 var(--card-label); font-variant-numeric: tabular-nums; text-align: right; }
.pressprint-stats em { grid-column: 1 / -1; height: 4px; overflow: hidden; background: rgba(246, 241, 229, .16); }
.pressprint-stats u { display: block; width: var(--stat-width, 0%); height: 100%; background: var(--print-accent); text-decoration: none; transform-origin: left center; }
.pressprint > p:not(.visually-hidden) { margin: 7px 0 0; color: rgba(246, 241, 229, .78); font: 600 7.5px/1.2 var(--card-label); letter-spacing: .025em; }
.pressprint[data-grade="PRIME"], .pressprint[data-grade="PERFECT-PRESS"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--print-accent) 38%, transparent), 0 0 18px color-mix(in srgb, var(--print-accent) 18%, transparent); }
.pressprint[data-grade="UNAVAILABLE"] { --print-accent: #a4aa9d; border-style: dashed; }
.pressprint.is-reading .pressprint-stats u { animation: pressprint-fill 620ms cubic-bezier(.2, .82, .2, 1) both; }
.pressprint.is-reading .pressprint-stats span:nth-child(2) u { animation-delay: 70ms; }
.pressprint.is-reading .pressprint-stats span:nth-child(3) u { animation-delay: 140ms; }
.pressprint.is-reading .pressprint-stats span:nth-child(4) u { animation-delay: 210ms; }
.relic-provenance { margin-top: 8px; color: rgba(16, 17, 13, .78); font-size: 8px; font-weight: 700; line-height: 1.25; letter-spacing: .035em; }
.relic-provenance b { color: var(--ink); font-weight: 700; }
.relic-source { min-height: 22px; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.relic-source:hover { color: var(--rarity-accent); }
.relic-seals { margin-top: 5px; }
.relic-seals span {
  padding: 4px 6px;
  color: var(--ink);
  background: rgba(217, 251, 30, .22);
  font: 700 7px/1 var(--card-label);
}
.reveal-controls {
  width: min(580px, 100%);
  padding: 4px;
  border: 2px solid var(--rarity-accent);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 9px 0 rgba(0, 0, 0, .18), 0 18px 34px rgba(0, 0, 0, .36);
}
.tilt-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  margin: 0 0 4px;
  padding: 0 15px;
  border: 1px solid var(--ink);
  border-radius: 9px;
  color: var(--paper);
  background: var(--ink);
  font: 800 9px/1 var(--mono);
  letter-spacing: .075em;
  cursor: pointer;
}
.tilt-action::after { content: "MOTION FX"; color: var(--buy); font-size: 7px; letter-spacing: .12em; }
.tilt-action[aria-pressed="true"] { color: var(--ink); background: var(--buy); }
.tilt-action[aria-pressed="true"]::after { color: var(--ink); }
.tilt-action:hover:not(:disabled) { color: var(--ink); background: var(--buy); }
.tilt-action:disabled { cursor: not-allowed; opacity: .64; }
.tilt-action:focus-visible { outline: 3px solid rgba(217, 251, 30, .76); outline-offset: 2px; }
.tilt-action[hidden] { display: none; }
.reveal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 9px;
  pointer-events: auto;
}
.reveal-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
  font: 700 10px/1 var(--mono);
  letter-spacing: .06em;
}
.reveal-actions button::after { content: "→"; font: 700 24px/1 var(--sans); }
.reveal-actions button + button { border-left: 1px solid var(--ink); }
.reveal-actions .primary-action {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
}
.reveal-actions .share-action { border-left: 0; }
.reveal-actions .share-action::after { content: "↗"; }
.reveal-actions .download-action::after { content: "↓"; }
.reveal-actions button:hover:not(:disabled) { background: var(--buy); filter: none; }
.reveal-actions button:disabled { color: var(--muted); background: var(--panel-2); }
.reveal-actions.has-zupass .zupass-action {
  grid-column: 1 / -1;
  min-height: 52px;
  border-top: 1px solid var(--ink);
  border-left: 0;
  color: var(--ink);
  background: var(--buy);
}
.reveal-actions.has-zupass .zupass-action::after { content: "+"; }
.reveal-actions.has-zupass .zupass-action:hover:not(:disabled) { color: var(--paper); background: var(--ink); }
.reveal-actions.has-zupass .zupass-action:disabled { color: var(--muted); background: var(--panel-2); }
.action-note {
  margin: 0;
  padding: 9px 12px 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 750 9px/1.45 var(--mono);
  letter-spacing: .035em;
  text-align: center;
}
.action-note[data-state="error"] { color: #7b251f; background: rgba(174, 54, 43, .08); }
.action-note[data-state="recovery"] { color: var(--ink); background: rgba(217, 251, 30, .2); }
.zupass-status {
  margin: 0;
  padding: 9px 12px 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 800 9px/1.45 var(--mono);
  letter-spacing: .035em;
  text-align: center;
}
.zupass-status[data-state="saved"] { color: #365000; }
.zupass-status[data-state="error"] { color: #8c201c; }
.zupass-bridge-host { width: 0; height: 0; overflow: visible; }
.reveal-stack[data-rarity="COMMON"] { --foil-opacity: .07; --rarity-accent: #7f8a72; }
.reveal-stack[data-rarity="UNCOMMON"] { --foil-opacity: .18; --rarity-accent: var(--blue); }
.reveal-stack[data-rarity="RARE"] { --foil-opacity: .25; --rarity-accent: var(--violet); }
.reveal-stack[data-rarity="LEGENDARY"] { --foil-opacity: .34; --rarity-accent: var(--gold); }
.reveal-stack[data-rarity="ULTIMATE"] { --foil-opacity: .44; --rarity-accent: var(--buy); }

.how-it-works {
  margin: 18px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  background: var(--panel);
}
.how-it-works summary { color: var(--ink); }
.how-it-works summary span, .how-it-works p { color: var(--muted); }
.how-it-works > div { border-top-color: var(--line); }
.how-it-works strong { color: var(--ink); }
.save-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
}
.save-flow article { min-height: 118px; padding: 14px; background: var(--paper); }
.save-flow article > span { display: block; margin-bottom: 18px; color: var(--muted); font: 800 8px/1 var(--mono); }
.save-flow article > strong { display: block; font: 800 12px/1 var(--mono); letter-spacing: .04em; }
.save-flow article > p { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }

.zupass-onboarding {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 22px 80px rgba(16, 17, 13, .38);
}
.zupass-onboarding::backdrop { background: rgba(16, 17, 13, .64); backdrop-filter: blur(5px); }
.zupass-onboarding-card { padding: 24px; }
.zupass-onboarding-card > span { color: var(--muted); font: 800 8px/1 var(--mono); letter-spacing: .08em; }
.zupass-onboarding-card h2 { max-width: 430px; margin: 10px 0 12px; font: 900 clamp(28px, 6vw, 52px)/.88 var(--sans); letter-spacing: -.055em; }
.zupass-onboarding-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.zupass-permissions { display: grid; gap: 1px; margin: 20px 0; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); }
.zupass-permissions p { display: grid; grid-template-columns: 84px 1fr; gap: 12px; margin: 0; padding: 12px; color: var(--ink); background: var(--paper); }
.zupass-permissions b { font: 850 9px/1.4 var(--mono); letter-spacing: .05em; }
.zupass-permissions span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.zupass-onboarding-card .zupass-link-warning { padding: 12px; border-left: 4px solid var(--buy); color: var(--ink); background: rgba(217, 251, 30, .14); font: 700 10px/1.5 var(--mono); }
.zupass-onboarding-actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8px; margin-top: 20px; }
.zupass-onboarding-actions button { min-height: 50px; border: 1px solid var(--ink); border-radius: 7px; color: var(--ink); background: var(--paper); font: 800 9px/1 var(--mono); letter-spacing: .05em; }
.zupass-onboarding-actions button:last-child { background: var(--buy); }
.zupass-onboarding-actions button:hover { color: var(--paper); background: var(--ink); }
.market-tape { margin: 44px 18px 0; border-color: var(--ink); }
.market-tape > * { border-color: var(--line); color: var(--muted); }
.market-tape > *:last-child, .market-tape b, .market-tape strong, .market-tape > span:first-child b { color: var(--ink); }
.market-tape > *:last-child { background: var(--buy); }

.collection-drawer {
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  box-shadow: -24px -20px 60px rgba(16, 17, 13, .28);
}
.collection-drawer::backdrop { background: rgba(16, 17, 13, .56); }
.drawer-head, .drawer-toolbar { border-color: var(--line); }
.drawer-head h2 { font-family: var(--sans); }
.archive-tabs button.is-active { border-color: var(--ink); color: var(--ink); background: var(--buy); }
.case-rail button { border-color: var(--line); color: var(--muted); background: var(--panel); }
.case-rail button b { color: var(--ink); }
.case-rail button:hover, .case-rail button.is-active { border-color: var(--ink); color: var(--ink); background: var(--buy); }
.case-focus { border-color: var(--line); background: var(--panel); }
.case-focus span, .case-focus h3 { color: var(--ink); }
.case-grid { border-color: var(--line); background: #dedacd; }
.index-card {
  border: 1px solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--rarity-accent, rgba(16, 17, 13, .22)), 0 11px 24px rgba(16, 17, 13, .2), inset 0 0 0 5px var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
.index-card::after { z-index: 4; opacity: calc(var(--foil-opacity) * .72); }
.index-card.is-found { background: var(--paper); }
.index-card.is-found:hover { border-color: var(--ink); box-shadow: 0 0 0 3px var(--rarity-accent), 0 20px 34px rgba(16, 17, 13, .3), inset 0 0 0 5px var(--paper); }
.index-visual { inset: 6px; border-color: rgba(16, 17, 13, .35); border-radius: 9px; background: var(--ink); }
.index-visual::after {
  box-shadow: inset 0 42px 32px -34px rgba(4, 5, 3, .42), inset 0 -42px 32px -34px rgba(4, 5, 3, .36);
}
.index-visual img { filter: saturate(1.02) contrast(1.025); }
.index-card.is-found:hover .index-visual img:not(.index-canonical) { transform: none; filter: saturate(1.02) contrast(1.025); }
.index-copy {
  inset: auto 6px 6px;
  min-height: 82px;
  padding: 9px 10px 10px;
  border: 0;
  border-top: 1px solid rgba(16, 17, 13, .34);
  border-radius: 0 0 9px 9px;
  color: var(--ink);
  background: rgba(246, 241, 229, .98);
}
.index-copy em { color: rgba(16, 17, 13, .6); font-family: var(--card-label); font-weight: 600; letter-spacing: .045em; }
.index-copy strong {
  margin-top: 5px;
  color: var(--ink);
  font-family: var(--card-display);
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 900;
  font-kerning: normal;
  font-optical-sizing: auto;
  line-height: .9;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.index-card[data-title-length="medium"] .index-copy strong {
  font-size: clamp(12px, 1.08vw, 15px);
  line-height: .94;
  letter-spacing: -.03em;
}
.index-card[data-title-length="long"] .index-copy strong {
  font-size: clamp(11px, .98vw, 13px);
  line-height: .97;
  letter-spacing: -.022em;
}
.index-copy small { display: none; }
.index-card.is-found .index-copy em { color: var(--ink); }
.index-card.is-found .index-copy strong { color: var(--ink); }
.index-code {
  display: inline-grid;
  place-items: center;
  top: 11px;
  right: 11px;
  min-width: 30px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--card-label);
  font-size: 7px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .035em;
  text-align: center;
}
.rarity-gem { top: 14px; left: 12px; width: 28px; height: 5px; border: 1px solid var(--ink); background: var(--paper); }
.index-card[data-rarity="COMMON"] { --rarity-accent: #777d70; }
.index-card[data-rarity="UNCOMMON"] { --rarity-accent: var(--blue); border-color: var(--ink); }
.index-card[data-rarity="RARE"] { --rarity-accent: var(--violet); border-color: var(--ink); }
.index-card[data-rarity="LEGENDARY"] { --rarity-accent: var(--gold); border-color: var(--ink); }
.index-card[data-rarity="ULTIMATE"] { --rarity-accent: var(--buy); border-color: var(--ink); }
.locked-visual { background-color: var(--ink); }
.locked-visual + .index-copy { color: var(--paper); background: rgba(16, 17, 13, .95); }
.locked-visual + .index-copy em, .locked-visual + .index-copy strong { color: rgba(246, 241, 229, .58); }
.leaderboard-panel { border-color: var(--line); color: var(--ink); background: var(--panel); }
.leaderboard-head, .leaderboard-panel li { border-color: var(--line); }
.leaderboard-panel strong { color: var(--ink); }
.leaderboard-panel span, .leaderboard-panel > p { color: var(--muted); }

footer { padding-inline: 18px; border-color: var(--ink); color: var(--muted); }
footer strong { color: var(--ink); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 24px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .field-guide-lockup { margin-bottom: 24px; }
  .field-guide-lockup h1 { width: 122%; font-size: clamp(44px, 8vw, 72px); }
  .field-guide-code { writing-mode: initial; }
  .hunt-case-list { display: flex; border-top: 1px solid var(--ink); }
  .hunt-case-list button { flex: 0 0 96px; grid-template-columns: 1fr 10px; padding-inline: 8px; }
  .hunt-case-list button:hover, .hunt-case-list button.is-active { margin: 0; padding-inline: 8px; }
  .hunt-lore { max-width: none; }
  .play-facts { display: flex; }
  .play-facts span { display: inline-flex; }
  .how-link { width: min(320px, 100%); margin-top: 22px; }
  .console-screen { min-height: 760px; background-size: min(720px, 94%) auto; }
}

@media (max-width: 760px) {
  .topbar, main, footer { width: 100%; }
  .topbar { grid-template-columns: 1fr auto; min-height: 58px; padding: 0 12px; }
  .system-state, .sound-button { display: none; }
  .top-actions { gap: 5px; }
  .collection-button, .wallet-button { min-height: 38px; padding: 0 9px; font-size: 7px; }
  main { padding-top: 0; }
  .hero { gap: 0; }
  .hero-copy { padding: 22px 16px; }
  .field-guide-lockup h1 { width: 122%; font-size: clamp(42px, 13vw, 62px); }
  .field-guide-code { display: none; }
  .console { margin: 12px; padding: 8px; border-radius: 15px; }
  .console-screen { min-height: 700px; border-width: 1px; background-size: min(690px, 126%) auto; }
  .console-rail .charge-readout { max-width: 150px; line-height: 1.35; }
  .console-rail .next-search { padding: 7px 8px; font-size: 8px; }
  .console-rail, .console-footer { padding-inline: 3px; }
  .reveal-stack { width: min(580px, calc(100% - 18px)); gap: 18px; padding: 36px 0 20px; }
  .card-return-cue { width: min(350px, 100%); margin-bottom: -6px; }
  .reveal { width: min(350px, 100%); }
  .reveal-controls { width: min(520px, 100%); }
  .reveal-actions button { min-height: 58px; padding-inline: 16px; font-size: 9px; }
  .save-flow { grid-template-columns: 1fr; }
  .save-flow article { min-height: 0; }
  .save-flow article > span { margin-bottom: 8px; }
  .zupass-onboarding-card { padding: 20px; }
  .zupass-onboarding-actions { grid-template-columns: 1fr; }
  .how-it-works { margin: 14px 12px; }
  .market-tape { display: none; }
  .collection-drawer { color: var(--ink); background: var(--paper); }
  footer { padding-inline: 14px; }
}

@media (max-width: 420px) {
  .field-guide-lockup h1 { font-size: 43px; }
  .hunt-button { width: 88vw; }
  .console-screen { min-height: 650px; background-size: 142% auto; }
  .reveal-stack { width: calc(100% - 12px); gap: 14px; padding-top: 38px; }
  .card-return-cue, .reveal { width: min(336px, 100%); }
  .reveal { border-radius: 18px; }
  .reveal-controls { padding: 3px; border-radius: 11px; }
  .reveal-actions { border-radius: 7px; }
  .reveal-actions button { min-height: 54px; padding-inline: 12px; font-size: 8px; }
  .reveal-actions button::after { font-size: 18px; }
}

/* Season 001 progression and fictional-imprint registry. */
.player-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  margin: 18px;
  border-color: var(--ink);
  color: var(--ink);
  background: var(--panel);
}
.player-strip > div { border-color: var(--line); }
.player-strip span { color: var(--muted); }
.player-strip strong { color: var(--ink); }
.player-strip strong b, #editionState { color: var(--ink); }
.open-collection { min-width: 164px; }

.relic-imprint {
  max-width: 100%;
  margin: 5px 0 0;
  overflow: hidden;
  color: rgba(16, 17, 13, .78);
  font: 700 6.75px/1.25 var(--card-label);
  letter-spacing: .03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.index-copy small.index-imprint {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: rgba(16, 17, 13, .58);
  font: 700 5.5px/1.15 var(--card-label);
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imprint-registry {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--panel);
}
.imprint-registry summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 6px 8px 6px 14px;
  cursor: pointer;
  list-style: none;
}
.imprint-registry summary::-webkit-details-marker { display: none; }
.imprint-summary-copy { display: grid; gap: 4px; min-width: 0; }
.imprint-summary-copy b { color: var(--ink); font: 850 9px/1 var(--mono); letter-spacing: .065em; }
.imprint-summary-copy small { overflow: hidden; color: var(--muted); font: 750 6px/1.2 var(--mono); letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
.imprint-summary-toggle {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--buy);
  font: 850 22px/1 var(--sans);
  transition: color 160ms ease, background-color 160ms ease, transform 180ms ease;
}
.imprint-registry[open] .imprint-summary-toggle { color: var(--buy); background: var(--ink); transform: rotate(45deg); }
.imprint-registry > p {
  margin: 0;
  padding: 12px 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 11px/1.5 var(--sans);
}
.imprint-registry ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.imprint-registry li { min-width: 0; padding: 12px; border-right: 1px solid var(--line); }
.imprint-registry li:last-child { border-right: 0; }
.imprint-registry li span,
.imprint-registry li small { color: var(--muted); font: 700 6px/1.35 var(--mono); letter-spacing: .05em; }
.imprint-registry li strong { display: block; margin-top: 7px; color: var(--ink); font: 900 11px/1 var(--sans); }
.imprint-registry li p { min-height: 32px; margin: 7px 0; color: var(--ink); font: 10px/1.35 var(--sans); }
.imprint-registry li small { display: block; }

@media (max-width: 980px) {
  .player-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .player-strip .open-collection { grid-column: 1 / -1; min-height: 48px; }
  .imprint-registry ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imprint-registry li:nth-child(2n) { border-right: 0; }
  .imprint-registry li { border-bottom: 1px solid var(--line); }
  .imprint-registry li:last-child { border-bottom: 0; }
}

@media (max-width: 600px) {
  .player-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px; }
  .player-strip .open-collection { grid-column: 1 / -1; }
  .imprint-summary-copy small { display: none; }
  .imprint-registry ol { grid-template-columns: 1fr; }
  .imprint-registry li { border-right: 0; }
}

@media (max-width: 340px) {
  .reveal[data-title-length="long"] .relic-copy h2,
  .reveal[data-code="020"] .relic-copy h2 {
    font-size: 22px;
    line-height: .96;
    letter-spacing: -.028em;
  }
}

/* Collectible feedback: rewards stay outside the immutable card face. */
.reveal, .index-card { touch-action: pan-y; }
.reveal-stack > .reveal, .reveal-stack > .reveal-controls { position: relative; z-index: 3; }
.reveal-event {
  position: relative;
  z-index: 7;
  top: auto;
  left: auto;
  display: grid;
  width: min(286px, calc(100% - 24px));
  min-width: 0;
  margin: 0 0 -20px;
  padding: 9px 13px 8px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--buy);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .28);
  font-family: var(--mono);
  text-align: center;
  transform: rotate(-1deg);
}
.reveal-event strong { font-size: 12px; line-height: 1; letter-spacing: .08em; }
.reveal-event span { margin-top: 5px; font-size: 7px; line-height: 1.2; letter-spacing: .04em; }
.reveal-event[data-kind="ultimate"] { color: var(--buy); background: var(--ink); box-shadow: 0 0 0 2px var(--buy), 0 12px 34px rgba(217, 251, 30, .28); }

.card-echo-fan {
  position: absolute;
  z-index: 1;
  top: 30px;
  left: 50%;
  width: min(360px, 100%);
  aspect-ratio: 3 / 5;
  pointer-events: none;
  transform: translateX(-50%);
}
.card-echo-fan i {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(217, 251, 30, .68);
  border-radius: 18px;
  background: linear-gradient(rgba(16, 17, 13, .48), rgba(16, 17, 13, .68)), var(--echo-art) center / cover no-repeat;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .34);
  filter: saturate(.72) contrast(1.08);
}
.card-echo-fan i:first-child { transform: translate(-17px, 9px) rotate(-4deg); opacity: .5; }
.card-echo-fan i:last-child { transform: translate(17px, 9px) rotate(4deg); opacity: .72; }
.reveal-stack.is-duplicate .reveal { box-shadow: 0 0 0 3px var(--rarity-accent), 0 0 0 5px var(--ink), 0 17px 0 rgba(0, 0, 0, .17), 0 30px 72px rgba(0, 0, 0, .58), 17px 19px 0 rgba(217, 251, 30, .15), -17px 19px 0 rgba(217, 251, 30, .09); }

/* Clean-room collectible materials: one restrained optical finish spans the printed face. */
.reveal,
.index-card {
  --pointer-x-inverse: 50%;
  --pointer-y-inverse: 50%;
  --catch-x: 50%;
  --catch-y: 50%;
  --pointer-angle: 0deg;
  --pointer-distance: 0;
  --fx-angle: 112deg;
  --fx-origin-x: 50%;
  --fx-origin-y: 50%;
  --fx-hue-a: hsla(75, 88%, 68%, .38);
  --fx-hue-b: hsla(197, 92%, 72%, .32);
  --fx-opacity-rest: .16;
  --fx-opacity-active: .46;
  --fx-class-opacity: .24;
  --fx-relief-size: 34% auto;
  --fx-relief-position: 50% 50%;
  --fx-relief-rotation: 0deg;
  --fx-relief-opacity: .34;
  --fx-etch-size: 228% 228%;
  --fx-art-etch-size: 210% 210%;
  --fx-print-etch-size: 96px 96px;
  --fx-etch-position: 50% 50%;
  --fx-art-etch-position: 50% 50%;
  --fx-print-etch-position: 50% 50%;
  --fx-etch-relief: .45px;
  --fx-etch-relief-negative: -.45px;
  --fx-etch-opacity-rest: .045;
  --fx-etch-opacity-active: .11;
  --fx-etch-contrast: 1.12;
  --fx-etch-saturation: .18;
  --fx-etch-hue: 0deg;
  --fx-art-angle-a: 91deg;
  --fx-art-angle-b: 181deg;
  --fx-art-spacing: 19px;
  --fx-art-image: none;
  --fx-subject-mask: none;
  --subject-shift-x: 0px;
  --subject-shift-y: 0px;
  --fx-etch-image: url("./assets/card-foil-guilloche-v1.webp");
  --fx-art-etch-image: url("./assets/card-foil-guilloche-v1.webp");
  --fx-art-opacity-rest: .08;
  --fx-art-opacity-active: .34;
  --fx-art-material:
    linear-gradient(var(--fx-art-angle-a), transparent 12%, rgba(255, 255, 255, .32) 48%, transparent 72%);
  --fx-art-material-size: 210% 210%;
  --fx-art-material-position: var(--pointer-x-inverse) var(--pointer-y-inverse);
  --fx-art-mask-material:
    linear-gradient(var(--fx-art-angle-b), transparent 18%, var(--fx-hue-a) 42%, rgba(255, 255, 255, .64) 51%, var(--fx-hue-b) 62%, transparent 82%);
  --fx-art-mask-size: 230% 230%;
  --fx-art-mask-position: var(--pointer-x) var(--pointer-y-inverse);
  --fx-print-material:
    linear-gradient(var(--fx-angle), var(--ink) 8%, var(--ink) 30%, var(--fx-hue-a) 46%, rgba(255, 255, 255, .82) 51%, var(--fx-hue-b) 58%, var(--ink) 74%);
  --fx-material:
    linear-gradient(var(--fx-angle), transparent 8%, var(--fx-hue-a) 29%, rgba(255, 255, 255, .42) 46%, var(--fx-hue-b) 62%, transparent 83%),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .24), transparent 34%);
  --fx-material-size: 190% 190%, 100% 100%;
  --fx-material-position: var(--pointer-x-inverse) var(--pointer-y-inverse), center;
  --fx-class:
    repeating-linear-gradient(112deg, transparent 0 13px, rgba(246, 241, 229, .12) 14px, transparent 15px 28px);
  --fx-class-size: 100% 100%;
  --fx-class-position: var(--shine-shift-x) var(--shine-shift-y);
  --fx-imprint: linear-gradient(transparent, transparent);
  --fx-imprint-size: 100% 100%;
}

.reveal-art,
.index-visual { contain: paint; }

.reveal,
.index-card { isolation: isolate; }

.reveal.is-inspecting,
.index-card.is-inspecting { will-change: transform; }

.reveal-stack:not([data-rarity="ULTIMATE"]) .reveal-art::before,
.index-card::after { content: none; }

.card-fx {
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--fx-opacity-rest);
  border-radius: inherit;
  border: 0;
  background-image: var(--fx-material);
  background-position: var(--fx-material-position);
  background-repeat: no-repeat;
  background-size: var(--fx-material-size);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--rarity-accent) 11%, transparent);
  mix-blend-mode: soft-light;
  transform: translate3d(0, 0, 0);
  transition: opacity 180ms ease;
}

.card-fx::before,
.card-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 150ms ease-out, filter 180ms ease;
}

.card-fx::before {
  inset: -18%;
  opacity: var(--fx-relief-opacity);
  background:
    linear-gradient(var(--fx-angle),
      rgba(255, 255, 255, .82) 8%,
      rgba(255, 255, 255, .12) 37%,
      rgba(16, 17, 13, .24) 52%,
      rgba(217, 251, 30, .16) 69%,
      rgba(255, 255, 255, .48) 88%);
  -webkit-mask-image: url("/buy-button-capsule.png");
  -webkit-mask-position: var(--fx-relief-position);
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: var(--fx-relief-size);
  -webkit-mask-mode: luminance;
  mask-image: url("/buy-button-capsule.png");
  mask-position: var(--fx-relief-position);
  mask-repeat: repeat;
  mask-size: var(--fx-relief-size);
  mask-mode: luminance;
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 255, 255, .56))
    drop-shadow(1px 1px 0 rgba(16, 17, 13, .32));
  mix-blend-mode: normal;
  transform: translate3d(var(--shine-shift-x, 0), var(--shine-shift-y, 0), 0) rotate(var(--fx-relief-rotation)) scale(1.08);
}

.card-fx::after {
  opacity: calc(var(--fx-class-opacity) * .72);
  background-image:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .52), rgba(255, 255, 255, .08) 12%, transparent 33%),
    var(--fx-class),
    var(--fx-imprint);
  background-position: center, var(--fx-class-position), center;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 100% 100%, var(--fx-class-size), var(--fx-imprint-size);
  box-shadow: none;
  mix-blend-mode: soft-light;
}

/* The registered map follows the card illustration at center/cover. Only the
   spectral field and broad interference print move with the viewer. */
.card-texture {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--fx-etch-opacity-rest);
  border-radius: inherit;
  background-image:
    linear-gradient(var(--pointer-angle), transparent 24%, var(--fx-hue-a) 44%, rgba(255, 255, 255, .7) 50%, var(--fx-hue-b) 57%, transparent 76%),
    var(--fx-etch-image),
    url("./assets/card-foil-interference.webp");
  background-position: center, center, var(--fx-etch-position);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 180% 180%, cover, var(--fx-etch-size);
  background-blend-mode: color-dodge, soft-light, screen;
  filter: contrast(var(--fx-etch-contrast)) saturate(var(--fx-etch-saturation)) hue-rotate(var(--fx-etch-hue));
  mix-blend-mode: soft-light;
  transform: translate3d(0, 0, 0);
  transition: opacity 170ms ease, filter 170ms ease;
}

.card-texture::before,
.card-texture::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background-image: var(--fx-etch-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card-texture::before {
  opacity: .42;
  filter: brightness(.58) contrast(1.38) grayscale(.22);
  mix-blend-mode: multiply;
  transform: translate3d(var(--fx-etch-relief), var(--fx-etch-relief), 0);
}

.card-texture::after {
  opacity: .5;
  filter: brightness(2.25) contrast(1.34) saturate(.52);
  mix-blend-mode: screen;
  transform: translate3d(var(--fx-etch-relief-negative), var(--fx-etch-relief-negative), 0);
}

.reveal:is(:hover, :focus-visible, .is-inspecting) > .card-texture { opacity: var(--fx-etch-opacity-active); }
.index-card .card-texture { opacity: calc(var(--fx-etch-opacity-rest) * .68); }
.index-card.is-found:is(:hover, :focus-visible, .is-inspecting) > .card-texture { opacity: calc(var(--fx-etch-opacity-active) * .84); }
.reveal.is-inspecting > .card-texture,
.index-card.is-inspecting > .card-texture { will-change: opacity, background-position, filter; }

/* The full-bleed illustration is a second optical plane: its pixels catch light differently from the paper and print. */
.card-art-fx {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--fx-art-opacity-rest);
  border-radius: inherit;
  background-image: var(--fx-art-material);
  background-position: var(--fx-art-material-position);
  background-repeat: no-repeat;
  background-size: var(--fx-art-material-size);
  box-shadow: inset 0 0 20px rgba(16, 17, 13, .12);
  mix-blend-mode: screen;
  transition: opacity 170ms ease, filter 170ms ease;
}

.card-art-fx::before,
.card-art-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-art-fx::before {
  opacity: .84;
  background-image: var(--fx-art-mask-material);
  background-position: var(--fx-art-mask-position);
  background-repeat: no-repeat;
  background-size: var(--fx-art-mask-size);
  -webkit-mask-image: var(--fx-art-image);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-mode: luminance;
  mask-image: var(--fx-art-image);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-mode: luminance;
  filter: contrast(1.18) saturate(1.08);
  mix-blend-mode: color-dodge;
}

.card-art-fx::after {
  opacity: .54;
  background-image:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .72), rgba(255, 255, 255, .12) 14%, transparent 35%),
    linear-gradient(var(--pointer-angle), transparent 28%, rgba(255, 255, 255, .16) 49%, transparent 64%),
    var(--fx-art-etch-image),
    url("./assets/card-foil-interference.webp");
  background-position: center, center, center, var(--fx-art-etch-position);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, cover, var(--fx-art-etch-size);
  background-blend-mode: screen, soft-light, overlay, color-dodge;
  mix-blend-mode: soft-light;
}

.reveal .card-fx { opacity: var(--fx-opacity-rest); }
.reveal:is(:hover, :focus-visible, .is-inspecting) .card-fx { opacity: var(--fx-opacity-active); }
.reveal:is(:hover, :focus-visible, .is-inspecting) .card-fx::after { opacity: var(--fx-class-opacity); }
.index-card .card-fx { opacity: calc(var(--fx-opacity-rest) * .56); }
.index-card.is-found:is(:hover, :focus-visible, .is-inspecting) .card-fx { opacity: calc(var(--fx-opacity-active) * .82); }
.index-card.is-found:is(:hover, :focus-visible, .is-inspecting) .card-fx::after { opacity: calc(var(--fx-class-opacity) * .86); }
.reveal:is(:hover, :focus-visible, .is-inspecting) .card-art-fx { opacity: var(--fx-art-opacity-active); }
.index-card .card-art-fx { opacity: calc(var(--fx-art-opacity-rest) * .48); }
.index-card .card-art-fx::before { opacity: 0; }
.index-card.is-found:is(:hover, :focus-visible, .is-inspecting) .card-art-fx { opacity: calc(var(--fx-art-opacity-active) * .76); }
.index-card.is-found:is(:hover, :focus-visible, .is-inspecting) .card-art-fx::before { opacity: .72; }
.reveal.is-inspecting .card-fx,
.reveal.is-inspecting .card-fx::before,
.index-card.is-inspecting .card-fx,
.index-card.is-inspecting .card-fx::before { will-change: opacity, background-position, transform, filter; }

.reveal.is-inspecting .card-art-fx,
.index-card.is-inspecting .card-art-fx { will-change: opacity, background-position, filter; }

/* Semantic depth cards separate the printed subject from the foil field. The
   environment carries the stronger traveling spectrum; the subject stays
   matte, receives a minute parallax lift, and keeps the illustration legible. */
.reveal[data-depth-mode="semantic"] .card-art-fx,
.reveal[data-depth-mode="semantic"]:is(:hover, :focus-visible, .is-inspecting) .card-art-fx,
.index-card[data-depth-mode="semantic"] .card-art-fx,
.index-card[data-depth-mode="semantic"].is-found:is(:hover, :focus-visible, .is-inspecting) .card-art-fx {
  opacity: 1;
  background: none;
  box-shadow: none;
  mix-blend-mode: normal;
}

[data-depth-mode="semantic"] .card-art-fx::before {
  opacity: .22;
  background-image:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .76), transparent 29%),
    var(--fx-art-mask-material),
    linear-gradient(var(--pointer-angle), transparent 22%, rgba(255, 255, 255, .24) 48%, transparent 68%),
    var(--fx-art-etch-image),
    url("./assets/card-foil-interference.webp");
  background-position:
    center,
    var(--fx-art-mask-position),
    center,
    center,
    var(--fx-art-etch-position);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size:
    100% 100%,
    var(--fx-art-mask-size),
    180% 180%,
    cover,
    var(--fx-art-etch-size);
  background-blend-mode: screen, screen, soft-light, overlay, color-dodge;
  -webkit-mask-image: linear-gradient(#fff 0 0), var(--fx-subject-mask);
  -webkit-mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 100% 100%, cover;
  -webkit-mask-mode: alpha, alpha;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#fff 0 0), var(--fx-subject-mask);
  mask-position: center, center;
  mask-repeat: no-repeat, no-repeat;
  mask-size: 100% 100%, cover;
  mask-mode: alpha;
  mask-composite: exclude;
  filter: contrast(1.08) saturate(1.14);
  mix-blend-mode: screen;
  transition: opacity 170ms ease, filter 170ms ease;
}

[data-depth-mode="semantic"] .card-art-fx::after {
  opacity: .17;
  background-image: var(--fx-art-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: normal;
  -webkit-mask-image: var(--fx-subject-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-mode: alpha;
  mask-image: var(--fx-subject-mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-mode: alpha;
  filter:
    contrast(1.045)
    saturate(.96)
    drop-shadow(0 1px 1px rgba(4, 5, 3, .42))
    drop-shadow(0 0 1px rgba(246, 241, 229, .42));
  mix-blend-mode: normal;
  transform: translate3d(var(--subject-shift-x), var(--subject-shift-y), 0) scale(1.003);
  transition: opacity 170ms ease, transform 150ms ease-out, filter 170ms ease;
}

.reveal[data-depth-mode="semantic"]:is(:hover, :focus-visible, .is-inspecting) .card-art-fx::before {
  opacity: .68;
}

.reveal[data-depth-mode="semantic"]:is(:hover, :focus-visible, .is-inspecting) .card-art-fx::after {
  opacity: .3;
}

.index-card[data-depth-mode="semantic"] .card-art-fx::before { opacity: .14; }
.index-card[data-depth-mode="semantic"] .card-art-fx::after { opacity: .12; }
.index-card[data-depth-mode="semantic"].is-found:is(:hover, :focus-visible, .is-inspecting) .card-art-fx::before { opacity: .54; }
.index-card[data-depth-mode="semantic"].is-found:is(:hover, :focus-visible, .is-inspecting) .card-art-fx::after { opacity: .24; }

/* Paper and print sit directly beneath the shared laminate, like one finished card. */
.relic-copy {
  z-index: auto;
}

.relic-head,
.relic-foot {
  position: relative;
  z-index: 5;
  transform: none;
}

.index-card .index-copy {
  position: absolute;
  z-index: 5;
  inset: auto 6px 6px;
  width: auto;
  transform: none;
}

.relic-head::after,
.relic-foot::after,
.index-card .index-copy::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .105;
  background-image:
    linear-gradient(var(--fx-angle), transparent 20%, rgba(255, 255, 255, .62) 48%, var(--fx-hue-a) 54%, transparent 80%),
    url("./assets/card-foil-guilloche-v1.webp");
  background-position: var(--pointer-x-inverse) var(--pointer-y), var(--fx-print-etch-position);
  background-repeat: no-repeat, repeat;
  background-size: 230% 230%, var(--fx-print-etch-size);
  background-blend-mode: soft-light, multiply;
  mix-blend-mode: multiply;
}

/* Full-art cards: the image stays continuous while the information bands fade into it. */
.reveal .relic-head {
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(246, 241, 229, .8) 0%, rgba(246, 241, 229, .46) 63%, rgba(246, 241, 229, 0) 100%);
}

.reveal[data-code="088"] .relic-head {
  background: linear-gradient(180deg, rgba(246, 241, 229, .98) 0%, rgba(246, 241, 229, .88) 63%, rgba(246, 241, 229, 0) 100%);
}

.reveal[data-code="069"] .relic-head {
  background: linear-gradient(180deg, rgba(246, 241, 229, .96) 0%, rgba(246, 241, 229, .82) 63%, rgba(246, 241, 229, 0) 100%);
}

.reveal .relic-foot {
  border-top: 0;
  background: linear-gradient(0deg, rgba(246, 241, 229, .84) 0%, rgba(246, 241, 229, .54) 68%, rgba(246, 241, 229, 0) 100%);
}

.index-card .index-copy {
  border-top: 0;
  background: linear-gradient(0deg, rgba(246, 241, 229, .86) 0%, rgba(246, 241, 229, .56) 68%, rgba(246, 241, 229, 0) 100%);
}

.reveal > .card-fx { border-radius: 17px; }
.index-card > .card-fx { border-radius: 13px; }
.reveal-art > .card-art-fx { border-radius: 11px; }
.index-visual > .card-art-fx { border-radius: 8px; }

.relic-head > *,
.relic-foot > *,
.index-copy > * {
  position: relative;
  z-index: 8;
}

.relic-copy h2,
.index-copy strong {
  color: var(--ink);
  background-color: var(--ink);
  background-image: var(--fx-print-material), url("./assets/card-foil-guilloche-v1.webp");
  background-position: var(--pointer-x-inverse) var(--pointer-y), var(--fx-print-etch-position);
  background-repeat: no-repeat, repeat;
  background-size: 230% 230%, var(--fx-print-etch-size);
  background-blend-mode: color-dodge, soft-light;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter 170ms ease;
}

.reveal:is(:hover, :focus-visible, .is-inspecting) .relic-copy h2,
.index-card.is-found:is(:hover, :focus-visible, .is-inspecting) .index-copy strong {
  filter: brightness(1.08) contrast(1.08);
}

.reveal[data-code="086"] .relic-copy h2,
.reveal[data-code="088"] .relic-copy h2,
.index-card[data-code="086"] .index-copy strong,
.index-card[data-code="088"] .index-copy strong {
  color: var(--ink);
  background-image: none;
  -webkit-text-fill-color: var(--ink);
}

.reveal[data-code="069"] .relic-copy h2,
.index-card[data-code="069"] .index-copy strong {
  color: var(--ink);
  background-image: none;
  -webkit-text-fill-color: var(--ink);
}

/* Busy full-art scenes keep their continuous image while the lore receives a
   compact paper lift. The wash is scoped to the two deliberately dense cards. */
.reveal[data-code="009"] .relic-copy blockquote,
.reveal[data-code="070"] .relic-copy blockquote,
.reveal[data-code="086"] .relic-copy blockquote,
.reveal[data-code="088"] .relic-copy blockquote {
  display: inline-block;
  max-width: calc(100% - 16px);
  padding: 4px 7px 5px;
  border-left: 3px solid var(--rarity-color);
  border-radius: 2px;
  color: var(--ink);
  background: rgba(246, 241, 229, .86);
  box-shadow: 0 1px 0 rgba(246, 241, 229, .78), 0 5px 14px rgba(16, 17, 13, .12);
  text-shadow: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.reveal[data-code="069"] .relic-copy blockquote {
  display: inline-block;
  max-width: calc(100% - 16px);
  padding: 4px 7px 5px;
  border-left: 3px solid var(--rarity-color);
  border-radius: 2px;
  color: var(--ink);
  background: rgba(246, 241, 229, .84);
  box-shadow: 0 1px 0 rgba(246, 241, 229, .74), 0 5px 14px rgba(16, 17, 13, .12);
  text-shadow: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.reveal-code,
.index-code,
.rarity-gem,
.stack-count { z-index: 8; }

/* TRACE: dynamic archival pearl with a card-specific BUY-button relief. */
.reveal[data-rarity="COMMON"],
.index-card[data-rarity="COMMON"] {
  --fx-etch-opacity-rest: .045;
  --fx-etch-opacity-active: .11;
  --fx-etch-saturation: .18;
  --fx-opacity-rest: .19;
  --fx-opacity-active: .36;
  --fx-class-opacity: .22;
  --fx-material:
    linear-gradient(var(--fx-angle), transparent 7%, var(--fx-hue-a) 27%, rgba(255, 255, 255, .5) 43%, rgba(217, 251, 30, .2) 51%, var(--fx-hue-b) 64%, transparent 84%),
    radial-gradient(ellipse at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .28), transparent 39%);
  --fx-material-size: 188% 188%, 100% 100%;
  --fx-material-position: var(--pointer-x-inverse) var(--pointer-y-inverse), center;
}

/* REVERSE: the body shines while the illustration keeps a calmer clear coat. */
.reveal[data-holo-mode="reverse"],
.index-card[data-holo-mode="reverse"] {
  --fx-art-opacity-rest: .055;
  --fx-art-opacity-active: .18;
  --fx-art-material:
    linear-gradient(var(--fx-art-angle-a), transparent 8%, rgba(255, 255, 255, .2) 36%, rgba(217, 251, 30, .12) 49%, rgba(255, 255, 255, .26) 58%, transparent 82%);
  --fx-art-material-size: 210% 210%;
  --fx-art-material-position: var(--pointer-x) var(--pointer-y);
  --fx-art-mask-material:
    linear-gradient(var(--fx-art-angle-b), transparent 18%, rgba(255, 255, 255, .4) 45%, var(--fx-hue-a) 52%, transparent 78%);
  --fx-art-mask-size: 245% 245%;
  --fx-art-mask-position: var(--pointer-x-inverse) var(--pointer-y-inverse);
}

/* SIGNAL: a directional acid-lime and electric-blue transmission. */
.reveal[data-rarity="UNCOMMON"],
.index-card[data-rarity="UNCOMMON"] {
  --fx-etch-opacity-rest: .065;
  --fx-etch-opacity-active: .16;
  --fx-etch-saturation: .34;
  --fx-opacity-rest: .12;
  --fx-opacity-active: .44;
  --fx-class-opacity: .23;
  --fx-material:
    linear-gradient(116deg, transparent 13%, rgba(140, 186, 255, .08) 30%, rgba(140, 186, 255, .62) 45%, rgba(217, 251, 30, .58) 52%, rgba(255, 255, 255, .34) 57%, transparent 76%),
    radial-gradient(circle at var(--pointer-x-inverse) var(--pointer-y), rgba(217, 251, 30, .38), transparent 38%);
  --fx-material-size: 230% 230%, 125% 125%;
  --fx-material-position: var(--pointer-x-inverse) var(--pointer-y-inverse), center;
}

/* COUNTERFLOW: two diagonal films travel in opposite directions across the art. */
.reveal[data-holo-mode="counterflow"],
.index-card[data-holo-mode="counterflow"] {
  --fx-art-opacity-rest: .095;
  --fx-art-opacity-active: .42;
  --fx-art-material:
    linear-gradient(var(--fx-art-angle-a), transparent 12%, rgba(140, 186, 255, .08) 31%, rgba(140, 186, 255, .7) 47%, transparent 61%),
    linear-gradient(var(--fx-art-angle-b), transparent 18%, rgba(217, 251, 30, .62) 48%, rgba(255, 255, 255, .28) 53%, transparent 72%);
  --fx-art-material-size: 235% 235%, 245% 245%;
  --fx-art-material-position: var(--pointer-x) var(--pointer-y-inverse), var(--pointer-x-inverse) var(--pointer-y);
  --fx-art-mask-material:
    linear-gradient(var(--fx-angle), transparent 14%, var(--fx-hue-b) 44%, rgba(255, 255, 255, .72) 51%, var(--fx-hue-a) 58%, transparent 84%);
  --fx-art-mask-size: 255% 255%;
  --fx-art-mask-position: var(--pointer-x-inverse) var(--pointer-y);
}

/* INCIDENT: two interfering fields create a restrained prism fault. */
.reveal[data-rarity="RARE"],
.index-card[data-rarity="RARE"] {
  --fx-etch-opacity-rest: .085;
  --fx-etch-opacity-active: .21;
  --fx-etch-saturation: .52;
  --fx-opacity-rest: .17;
  --fx-opacity-active: .5;
  --fx-class-opacity: .2;
  --fx-material:
    conic-gradient(from var(--pointer-angle) at var(--pointer-x) var(--pointer-y), transparent 0 9%, rgba(140, 186, 255, .58) 16%, rgba(194, 165, 255, .64) 27%, rgba(255, 182, 112, .48) 38%, rgba(217, 251, 30, .44) 48%, transparent 63% 100%),
    url("./assets/card-foil-interference.webp");
  --fx-material-size: 175% 175%, 150% 150%;
  --fx-material-position: var(--pointer-x-inverse) var(--pointer-y-inverse), var(--pointer-x) var(--pointer-y);
}

/* RADIANT: an original criss-cross lattice, softened by the illustration's luminance. */
.reveal[data-holo-mode="radiant"],
.index-card[data-holo-mode="radiant"] {
  --fx-art-opacity-rest: .14;
  --fx-art-opacity-active: .44;
  --fx-art-material:
    repeating-linear-gradient(var(--fx-art-angle-a), transparent 0 calc(var(--fx-art-spacing) - 2px), rgba(140, 186, 255, .32) calc(var(--fx-art-spacing) - 1px), transparent var(--fx-art-spacing)),
    repeating-linear-gradient(var(--fx-art-angle-b), transparent 0 calc(var(--fx-art-spacing) + 5px), rgba(217, 251, 30, .25) calc(var(--fx-art-spacing) + 6px), transparent calc(var(--fx-art-spacing) + 8px));
  --fx-art-material-size: 155% 155%, 165% 165%;
  --fx-art-material-position: var(--pointer-x) var(--pointer-y-inverse), var(--pointer-x-inverse) var(--pointer-y);
  --fx-art-mask-material:
    conic-gradient(from var(--pointer-angle) at var(--pointer-x) var(--pointer-y), transparent 0 12%, var(--fx-hue-a) 22%, rgba(255, 255, 255, .74) 32%, var(--fx-hue-b) 43%, transparent 58% 100%);
  --fx-art-mask-size: 175% 175%;
  --fx-art-mask-position: var(--pointer-x-inverse) var(--pointer-y-inverse);
}

/* MYTH: warm-gold diffraction with a slow, deep bloom. */
.reveal[data-rarity="LEGENDARY"],
.index-card[data-rarity="LEGENDARY"] {
  --fx-etch-opacity-rest: .115;
  --fx-etch-opacity-active: .29;
  --fx-etch-saturation: .72;
  --fx-opacity-rest: .21;
  --fx-opacity-active: .58;
  --fx-class-opacity: .3;
  --fx-material:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 252, 218, .86), rgba(232, 188, 98, .5) 13%, transparent 35%),
    repeating-linear-gradient(124deg, transparent 0 20px, rgba(232, 188, 98, .34) 22px 25px, rgba(217, 251, 30, .2) 27px 30px, transparent 33px 52px),
    url("./assets/card-foil-interference.webp");
  --fx-material-size: 125% 125%, 190% 190%, 145% 145%;
  --fx-material-position: center, var(--pointer-x-inverse) var(--pointer-y), var(--pointer-x) var(--pointer-y-inverse);
}

/* MYTHIC: warm diffraction in the body, opposed spectral engraving in the illustration. */
.reveal[data-holo-mode="mythic"],
.index-card[data-holo-mode="mythic"] {
  --fx-art-opacity-rest: .18;
  --fx-art-opacity-active: .48;
  --fx-art-material:
    linear-gradient(var(--fx-art-angle-a), transparent 12%, rgba(232, 188, 98, .18) 30%, rgba(255, 247, 196, .82) 48%, transparent 64%),
    repeating-linear-gradient(var(--fx-art-angle-b), transparent 0 20px, rgba(217, 251, 30, .28) 22px 24px, rgba(140, 186, 255, .22) 25px 27px, transparent 29px 48px);
  --fx-art-material-size: 250% 250%, 185% 185%;
  --fx-art-material-position: var(--pointer-x) var(--pointer-y-inverse), var(--pointer-x-inverse) var(--pointer-y);
  --fx-art-mask-material:
    linear-gradient(var(--fx-angle), transparent 9%, rgba(140, 186, 255, .5) 38%, rgba(255, 255, 255, .9) 49%, rgba(232, 188, 98, .76) 60%, transparent 86%);
  --fx-art-mask-size: 260% 260%;
  --fx-art-mask-position: var(--pointer-x-inverse) var(--pointer-y);
}

/* ULTIMATE keeps its bespoke five-edition ceremony beneath a restrained full-face finish. */
.reveal[data-rarity="ULTIMATE"],
.index-card[data-rarity="ULTIMATE"] {
  --fx-etch-opacity-rest: .15;
  --fx-etch-opacity-active: .38;
  --fx-etch-saturation: .92;
  --fx-opacity-rest: .28;
  --fx-opacity-active: .72;
  --fx-class-opacity: .34;
  --fx-material:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .94), rgba(217, 251, 30, .72) 12%, transparent 31%),
    conic-gradient(from var(--pointer-angle) at var(--pointer-x-inverse) var(--pointer-y), transparent, rgba(140, 186, 255, .64), rgba(255, 154, 217, .5), rgba(217, 251, 30, .78), transparent 67%),
    url("./assets/card-foil-interference.webp");
  --fx-material-size: 125% 125%, 165% 165%, 145% 145%;
  --fx-material-position: center, var(--pointer-x-inverse) var(--pointer-y-inverse), var(--pointer-x) var(--pointer-y);
}

.reveal[data-holo-mode="apex"],
.index-card[data-holo-mode="apex"] {
  --fx-art-opacity-rest: .08;
  --fx-art-opacity-active: .3;
  --fx-art-material:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .58), rgba(217, 251, 30, .2) 16%, transparent 34%);
  --fx-art-material-size: 100% 100%;
  --fx-art-material-position: center;
  --fx-art-mask-material: linear-gradient(transparent, transparent);
}

.reveal.is-pressed {
  cursor: grabbing;
  transform: perspective(1300px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(var(--card-lift, 0)) scale(.992);
  transition-duration: 72ms;
}

.index-card.is-pressed {
  transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(var(--card-lift, 0)) scale(.988);
  transition-duration: 72ms;
}

.is-material-catching .card-fx { animation: material-catch-face 340ms cubic-bezier(.16, .84, .2, 1); }
.is-material-catching .card-texture { animation: material-catch-etch 340ms cubic-bezier(.16, .84, .2, 1); }
.is-material-catching .card-art-fx {
  opacity: var(--fx-art-opacity-active);
  animation: material-catch-art 340ms cubic-bezier(.16, .84, .2, 1);
}
.is-material-catching:not([data-depth-mode="semantic"]) .card-art-fx::after {
  background-image:
    radial-gradient(circle at var(--catch-x) var(--catch-y), rgba(255, 255, 255, .9), rgba(255, 255, 255, .2) 12%, transparent 34%),
    linear-gradient(var(--pointer-angle), transparent 28%, rgba(255, 255, 255, .16) 49%, transparent 64%),
    var(--fx-art-etch-image),
    url("./assets/card-foil-interference.webp");
  background-position: center, center, center, var(--fx-art-etch-position);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, cover, var(--fx-art-etch-size);
  background-blend-mode: screen, soft-light, overlay, color-dodge;
  animation: material-catch-glare 340ms cubic-bezier(.16, .84, .2, 1);
}
.is-material-catching[data-depth-mode="semantic"] .card-art-fx::before {
  opacity: .72;
  filter: brightness(1.14) contrast(1.12) saturate(1.22);
  animation: material-catch-glare 340ms cubic-bezier(.16, .84, .2, 1);
}
.is-material-catching .relic-copy h2,
.is-material-catching .index-copy strong { animation: material-catch-ink 340ms cubic-bezier(.16, .84, .2, 1); }

@keyframes material-catch-face {
  0% { filter: brightness(.92) saturate(.9); }
  38% { filter: brightness(1.24) saturate(1.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62), inset 0 0 34px color-mix(in srgb, var(--rarity-accent) 28%, transparent); }
  100% { filter: none; }
}

@keyframes material-catch-etch {
  0%, 100% { opacity: var(--fx-etch-opacity-rest); filter: contrast(var(--fx-etch-contrast)) saturate(var(--fx-etch-saturation)) hue-rotate(var(--fx-etch-hue)); }
  44% { opacity: calc(var(--fx-etch-opacity-active) * 1.12); filter: contrast(1.42) brightness(1.18) saturate(calc(var(--fx-etch-saturation) + .18)) hue-rotate(var(--fx-etch-hue)); }
}

@keyframes material-catch-art {
  0% { filter: brightness(.9) saturate(.9); }
  42% { filter: brightness(1.3) saturate(1.2); }
  100% { filter: none; }
}

@keyframes material-catch-glare {
  0% { opacity: .08; transform: scale(.78); }
  44% { opacity: .92; transform: scale(1); }
  100% { opacity: .54; transform: scale(1.08); }
}

@keyframes material-catch-ink {
  0%, 100% { filter: none; }
  44% { filter: brightness(1.34) contrast(1.12); }
}

/* The Ultimate carries the real polished object, so it does not repeat the relief watermark. */
.reveal[data-rarity="ULTIMATE"] .card-fx::before,
.index-card[data-rarity="ULTIMATE"] .card-fx::before { opacity: 0; }

/* RELIC, OPERATOR, and INCIDENT remain recognizable even at the same rarity. */
.reveal[data-class="RELIC"],
.index-card[data-class="RELIC"] {
  --fx-etch-contrast: 1.08;
  --fx-class:
    repeating-linear-gradient(112deg, transparent 0 13px, rgba(246, 241, 229, .14) 14px, transparent 15px 28px),
    repeating-linear-gradient(22deg, transparent 0 31px, rgba(217, 251, 30, .06) 32px, transparent 34px 62px);
  --fx-class-size: 100% 100%, 100% 100%;
}

.reveal[data-class="OPERATOR"],
.index-card[data-class="OPERATOR"] {
  --fx-etch-contrast: 1.2;
  --fx-class:
    repeating-radial-gradient(circle at var(--pointer-x) var(--pointer-y), transparent 0 11px, rgba(217, 251, 30, .13) 12px, transparent 13px 24px),
    linear-gradient(90deg, transparent 49.6%, rgba(140, 186, 255, .14) 50%, transparent 50.4%);
  --fx-class-size: 100% 100%, 100% 100%;
}

.reveal[data-class="INCIDENT"],
.index-card[data-class="INCIDENT"] {
  --fx-etch-contrast: 1.32;
  --fx-class:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(246, 241, 229, .12) 7px, transparent 8px 14px),
    linear-gradient(90deg, transparent 0 43%, rgba(255, 123, 123, .11) 46%, rgba(140, 186, 255, .14) 52%, transparent 56%);
  --fx-class-size: 100% 100%, 100% 100%;
}

/* The five art imprints alter the substrate geometry; the per-card seed alters angle, colour and phase. */
.reveal[data-finish-family="shutter"],
.index-card[data-finish-family="shutter"] {
  --fx-etch-hue: -8deg;
  --fx-imprint: repeating-linear-gradient(90deg, transparent 0 17px, rgba(16, 17, 13, .12) 18px, rgba(255, 255, 255, .1) 19px, transparent 21px 38px);
  --fx-imprint-size: 100% 100%;
}

.reveal[data-finish-family="tape"],
.index-card[data-finish-family="tape"] {
  --fx-etch-hue: 10deg;
  --fx-imprint: repeating-linear-gradient(0deg, transparent 0 20px, rgba(16, 17, 13, .1) 21px, rgba(255, 255, 255, .12) 22px, transparent 24px 44px);
  --fx-imprint-size: 100% 100%;
}

.reveal[data-finish-family="phosphor"],
.index-card[data-finish-family="phosphor"] {
  --fx-etch-hue: 24deg;
  --fx-imprint: repeating-radial-gradient(circle at var(--fx-origin-x) var(--fx-origin-y), transparent 0 17px, rgba(217, 251, 30, .1) 18px, rgba(16, 17, 13, .08) 19px, transparent 21px 38px);
  --fx-imprint-size: 100% 100%;
}

.reveal[data-finish-family="proof"],
.index-card[data-finish-family="proof"] {
  --fx-etch-hue: -18deg;
  --fx-imprint:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(16, 17, 13, .09) 23px, transparent 24px 46px),
    repeating-linear-gradient(-45deg, transparent 0 28px, rgba(255, 255, 255, .1) 29px, transparent 30px 58px);
  --fx-imprint-size: 100% 100%, 100% 100%;
}

.reveal[data-finish-family="afterimage"],
.index-card[data-finish-family="afterimage"] {
  --fx-etch-hue: 16deg;
  --fx-imprint: repeating-radial-gradient(ellipse at var(--fx-origin-x) var(--fx-origin-y), transparent 0 25px, rgba(16, 17, 13, .1) 26px, rgba(255, 255, 255, .1) 27px, transparent 29px 52px);
  --fx-imprint-size: 100% 100%;
}

.reveal[data-rarity="COMMON"].is-new .card-fx::before { animation: trace-material-on 680ms cubic-bezier(.2, .72, .2, 1) both; }
.reveal[data-rarity="UNCOMMON"].is-new .card-fx::before { animation: signal-material-on 860ms cubic-bezier(.16, .86, .22, 1) both; }
.reveal[data-rarity="RARE"].is-new .card-fx::before { animation: incident-material-on 1080ms cubic-bezier(.12, .84, .18, 1) both; }
.reveal[data-rarity="LEGENDARY"].is-new .card-fx::before { animation: myth-material-on 1380ms cubic-bezier(.12, .78, .15, 1) both; }

@keyframes trace-material-on {
  0% { opacity: 0; transform: translate3d(-28%, 0, 0) scale(1.08); filter: brightness(.72); }
  58% { opacity: 1; transform: translate3d(9%, 0, 0) scale(1.05); filter: brightness(1.18); }
  100% { opacity: .96; transform: translate3d(var(--shine-shift-x, 0), var(--shine-shift-y, 0), 0) scale(1.04); filter: none; }
}

@keyframes signal-material-on {
  0% { opacity: 0; transform: translate3d(-34%, 18%, 0) rotate(-7deg) scale(1.18); filter: brightness(.65) saturate(.8); }
  52% { opacity: 1; transform: translate3d(8%, -4%, 0) rotate(2deg) scale(1.08); filter: brightness(1.25) saturate(1.15); }
  100% { opacity: .96; transform: translate3d(var(--shine-shift-x, 0), var(--shine-shift-y, 0), 0) scale(1.04); filter: none; }
}

@keyframes incident-material-on {
  0% { opacity: 0; transform: scale(.9) rotate(-5deg); filter: brightness(.55) saturate(.7); }
  36% { opacity: .92; transform: scale(1.12) rotate(3deg); filter: brightness(1.28) saturate(1.2); }
  68% { opacity: .5; transform: scale(1.02) rotate(-1deg); filter: brightness(.96); }
  100% { opacity: .96; transform: translate3d(var(--shine-shift-x, 0), var(--shine-shift-y, 0), 0) scale(1.04); filter: none; }
}

@keyframes myth-material-on {
  0% { opacity: 0; transform: scale(.7); filter: brightness(.45) saturate(.72); }
  44% { opacity: 1; transform: scale(1.16); filter: brightness(1.4) saturate(1.16); }
  72% { opacity: .58; transform: scale(1.02); filter: brightness(1.02); }
  100% { opacity: .96; transform: translate3d(var(--shine-shift-x, 0), var(--shine-shift-y, 0), 0) scale(1.04); filter: none; }
}

.ultimate-ceremony {
  position: absolute;
  z-index: 0;
  top: -80px;
  left: 50%;
  width: min(680px, 118%);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translateX(-50%);
}
.ultimate-ceremony::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 251, 30, .34), rgba(217, 251, 30, .07) 28%, rgba(0, 0, 0, .86) 62%, transparent 69%);
  filter: blur(2px);
}
.ultimate-ceremony i { position: absolute; inset: 18%; border: 1px solid rgba(217, 251, 30, .42); border-radius: 50%; }
.ultimate-ceremony i:nth-child(2) { inset: 27%; border-style: dashed; transform: rotate(24deg); }
.ultimate-ceremony i:nth-child(3) { inset: 36%; border-width: 2px; box-shadow: 0 0 44px rgba(217, 251, 30, .4); }
.ultimate-ceremony span { position: absolute; right: 0; bottom: 17%; left: 0; color: var(--buy); font: 800 7px/1 var(--mono); letter-spacing: .16em; text-align: center; }
.reveal-stack[data-rarity="ULTIMATE"] .reveal {
  box-shadow: 0 0 0 3px var(--buy), 0 0 0 6px var(--ink), 0 0 46px rgba(217, 251, 30, .46), 0 36px 90px rgba(0, 0, 0, .7), inset 0 0 0 7px var(--paper);
}
.reveal-stack[data-rarity="ULTIMATE"] .reveal::before {
  display: block;
  inset: -28%;
  opacity: .48;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .92), rgba(217, 251, 30, .42) 13%, transparent 31%),
    repeating-linear-gradient(118deg, transparent 0 19px, rgba(139, 207, 255, .36) 21px 24px, transparent 27px 42px),
    url("./assets/card-foil-interference.webp") center / 145% 145%;
  mix-blend-mode: screen;
  animation: ultimate-foil-idle 8s ease-in-out infinite;
}
.reveal-stack[data-rarity="ULTIMATE"] .reveal-art::before {
  content: none;
  display: none;
}
.reveal-stack[data-rarity="ULTIMATE"] #ultimateButton { animation: ultimate-button-float 5.4s ease-in-out infinite; }
.ultimate-serial {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 31%;
  min-width: 66px;
  padding: 7px 9px;
  border: 1px solid var(--buy);
  border-radius: 999px;
  color: var(--buy);
  background: rgba(16, 17, 13, .88);
  box-shadow: 0 0 22px rgba(217, 251, 30, .32);
  font: 700 11px/1 var(--card-label);
  letter-spacing: .08em;
  text-align: center;
}
.reveal-stack.is-awarding .ultimate-ceremony { animation: ultimate-room-on 1.8s cubic-bezier(.16, .86, .22, 1) both; }
.reveal-stack.is-awarding .reveal.is-new { animation: ultimate-award-in 1.8s cubic-bezier(.16, .86, .22, 1) both; }

@keyframes ultimate-room-on {
  0%, 22% { opacity: 0; transform: translateX(-50%) scale(.35); filter: brightness(0); }
  48% { opacity: 1; transform: translateX(-50%) scale(1.08); filter: brightness(1.65); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); filter: none; }
}
@keyframes ultimate-award-in {
  0%, 22% { opacity: 0; transform: perspective(1300px) rotateX(76deg) scale(.18, .05); filter: brightness(0); }
  58% { opacity: 1; transform: perspective(1300px) rotateX(-5deg) scale(1.04); filter: brightness(1.8); }
  100% { opacity: 1; transform: perspective(1300px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); filter: none; }
}
@keyframes ultimate-foil-idle { 0%, 100% { opacity: .34; background-position: 50% 50%, 0 0, 50% 50%; } 50% { opacity: .68; background-position: 50% 50%, 64px -42px, 62% 38%; } }
@keyframes ultimate-button-float {
  0%, 100% { transform: translate(calc(-50% + var(--button-shift-x, 0px)), calc(-52.72% + var(--button-shift-y, 0px))) scale(1); filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 20px rgba(217, 251, 30, .36)); }
  50% { transform: translate(calc(-50% + var(--button-shift-x, 0px)), calc(-61.72% + var(--button-shift-y, 0px))) scale(1.018); filter: drop-shadow(0 28px 20px rgba(0, 0, 0, .42)) drop-shadow(0 0 25px rgba(217, 251, 30, .46)); }
}

/* One compact binder summary and two collection modes. */
.collection-status-bar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid var(--ink);
  border-radius: 9px;
  background: rgba(246, 241, 229, .96);
  box-shadow: 0 8px 22px rgba(16, 17, 13, .12);
  backdrop-filter: blur(10px);
}
.collection-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; border: 1px solid var(--line); border-radius: 6px; }
.collection-summary span { display: grid; gap: 4px; min-width: 0; padding: 8px 10px; border-right: 1px solid var(--line); color: var(--muted); font: 700 6px/1 var(--mono); letter-spacing: .06em; }
.collection-summary span:last-child { border-right: 0; }
.collection-summary b { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.collection-mode { display: grid; grid-template-columns: 1fr 1fr; min-width: 150px; padding: 3px; border: 1px solid var(--ink); border-radius: 7px; background: var(--panel-2); }
.collection-mode button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font: 800 8px/1 var(--mono); cursor: pointer; }
.collection-mode button.is-active { color: var(--ink); background: var(--buy); box-shadow: inset 0 0 0 1px var(--ink); }
.case-grid.is-stack-view { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-radius: 13px; }
.index-card.is-stack { box-shadow: 5px 5px 0 var(--paper), 6px 6px 0 var(--ink), 10px 10px 0 rgba(217, 251, 30, .62), 11px 11px 0 var(--ink), 0 20px 34px rgba(16, 17, 13, .25), inset 0 0 0 5px var(--paper); }
.index-card.is-stack:hover { box-shadow: 7px 7px 0 var(--paper), 8px 8px 0 var(--ink), 13px 13px 0 rgba(217, 251, 30, .78), 14px 14px 0 var(--ink), 0 24px 40px rgba(16, 17, 13, .3), inset 0 0 0 5px var(--paper); }
.stack-count { position: absolute; z-index: 4; top: 42px; right: 11px; min-width: 38px; padding: 7px 8px 6px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--buy); font: 700 12px/1 var(--card-label); font-variant-numeric: tabular-nums; text-align: center; }
.index-card.is-stack .index-copy { min-height: 112px; }
.index-copy small.index-history { display: grid; gap: 3px; margin-top: 8px; color: rgba(16, 17, 13, .7); font: 700 8px/1.3 var(--mono); }
.index-history span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-copy small.index-best { display: block; margin-top: 7px; color: var(--ink); font: 700 8px/1.3 var(--card-label); letter-spacing: .03em; }
.locked-visual { overflow: hidden; background: var(--ink); }
.locked-preview { opacity: .26; filter: grayscale(1) brightness(.4) contrast(1.8) blur(2px) !important; transform: scale(1.08); }
.locked-silhouette { position: absolute; z-index: 2; top: 48%; left: 50%; width: 40%; aspect-ratio: 1.85; border: 2px solid rgba(217, 251, 30, .74); border-radius: 999px; box-shadow: 0 0 24px rgba(217, 251, 30, .17); transform: translate(-50%, -50%); }
.locked-silhouette::before { content: ""; position: absolute; top: 50%; left: 50%; width: 32%; height: 3px; border-radius: 4px; background: rgba(217, 251, 30, .74); transform: translate(-50%, -50%); }
.locked-silhouette::after { content: "?"; position: absolute; top: calc(100% + 14px); left: 50%; color: rgba(246, 241, 229, .72); font: 700 16px/1 var(--card-label); transform: translateX(-50%); }
.collection-empty { display: grid; grid-column: 1 / -1; place-items: center; align-content: center; min-height: 280px; padding: 32px; color: var(--ink); text-align: center; }
.collection-empty strong { padding: 10px 13px; border: 1px solid var(--ink); border-radius: 999px; background: var(--buy); font: 900 11px/1 var(--mono); letter-spacing: .07em; }
.collection-empty span { margin-top: 12px; color: var(--muted); font: 12px/1.4 var(--sans); }

/* The public board starts only when comparison is meaningful. */
.leaderboard-profile { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, .8fr); gap: 12px 24px; align-items: end; padding: 18px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(112deg, rgba(217, 251, 30, .17), transparent 48%); }
.leaderboard-profile > div { display: grid; gap: 5px; }
.leaderboard-profile span { color: var(--muted); font: 800 7px/1 var(--mono); letter-spacing: .12em; }
.leaderboard-profile strong { color: var(--ink); font: 900 clamp(16px, 2vw, 23px)/.95 var(--sans); letter-spacing: -.035em; }
.leaderboard-profile small { max-width: 540px; color: var(--muted); font: 11px/1.35 var(--sans); }
.leaderboard-profile form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.leaderboard-profile input, .leaderboard-profile button { min-height: 42px; border: 1px solid var(--ink); color: var(--ink); font: 850 9px/1 var(--mono); letter-spacing: .055em; }
.leaderboard-profile input { min-width: 0; padding: 0 12px; border-radius: 8px 0 0 8px; background: var(--paper); }
.leaderboard-profile button { padding: 0 14px; border-left: 0; border-radius: 0 8px 8px 0; background: var(--buy); cursor: pointer; }
.leaderboard-profile input:focus-visible, .leaderboard-profile button:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(217, 251, 30, .7); outline-offset: 2px; }
.leaderboard-profile input:disabled, .leaderboard-profile button:disabled { cursor: not-allowed; opacity: .5; }
.leaderboard-profile > p { grid-column: 2; min-height: 10px; margin: -7px 0 0; padding: 0; color: var(--muted); font: 750 7px/1.3 var(--mono); letter-spacing: .045em; }
.leaderboard-head, .leaderboard-panel li { grid-template-columns: 48px minmax(180px, 1fr) 80px 80px minmax(130px, .8fr); }
.leaderboard-panel li span:last-child { color: var(--ink); font-weight: 800; }
.leaderboard-panel li.is-self { background: rgba(217, 251, 30, .16); box-shadow: inset 3px 0 0 var(--buy); }
.leaderboard-empty::before { display: none; }
.leaderboard-early { display: grid !important; grid-template-columns: 1fr !important; place-items: center; align-content: center; gap: 10px; min-height: 240px; padding: 36px !important; text-align: center; }
.leaderboard-early > * { grid-column: 1 !important; }
.leaderboard-early strong { padding: 10px 13px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--buy); font: 900 11px/1 var(--mono); letter-spacing: .07em; }
.leaderboard-early span { margin-top: 13px; color: var(--ink) !important; font: 850 10px/1 var(--mono); }
.leaderboard-early small { margin-top: 9px; color: var(--muted); font: 11px/1.4 var(--sans); }

@media (max-width: 760px) {
  .collection-status-bar { grid-template-columns: 1fr; top: -1px; }
  .collection-summary span { padding: 7px 6px; }
  .collection-summary b { font-size: 8px; }
  .collection-mode { min-width: 0; }
  .case-grid.is-stack-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reveal-event { top: auto; width: min(270px, calc(100% - 24px)); min-width: 0; margin-bottom: -6px; }
  .card-echo-fan { top: 38px; width: min(350px, calc(100% - 20px)); }
  .leaderboard-head { grid-template-columns: 34px minmax(110px, 1fr) 52px 52px; }
  .leaderboard-panel li { grid-template-columns: 34px minmax(110px, 1fr) 52px 52px; min-height: 70px; padding-block: 9px; }
  .leaderboard-head span:last-child { display: none; }
  .leaderboard-panel li span:last-child { display: block; grid-row: 2; grid-column: 2 / -1; margin-top: 5px; font-size: 7px; }
}

@media (max-width: 420px) {
  .pressprint { padding: 7px 8px 6px; }
  .pressprint header { align-items: flex-start; }
  .pressprint header span { font-size: 8px; }
  .pressprint-stats { gap: 6px; }
  .pressprint-stats i { font-size: 7px; }
  .pressprint > p:not(.visually-hidden) { font-size: 8px; }
  .pressprint-stats b { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .tilt-action { display: none !important; }
  .reveal,
  .index-card,
  .reveal.is-pressed,
  .index-card.is-pressed { transform: none !important; }
  .reveal:hover .reveal-image,
  .index-card.is-found:hover .index-visual img:not(.index-canonical) { transform: none !important; }
  .card-fx { transition: none !important; }
  .card-texture {
    opacity: calc(var(--fx-etch-opacity-rest) * .6) !important;
    filter: contrast(var(--fx-etch-contrast)) saturate(calc(var(--fx-etch-saturation) * .5)) hue-rotate(var(--fx-etch-hue)) !important;
    transition: none !important;
  }
  .card-texture::before,
  .card-texture::after { transform: none !important; }
  .reveal .card-fx { opacity: calc(var(--fx-opacity-rest) * .48); }
  .index-card .card-fx { opacity: calc(var(--fx-opacity-rest) * .28); }
  .card-fx::before,
  .card-fx::after,
  .card-texture,
  .card-texture::before,
  .card-texture::after,
  .card-art-fx,
  .card-art-fx::before,
  .card-art-fx::after,
  .relic-copy h2,
  .index-copy strong {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
  .reveal .card-art-fx { opacity: calc(var(--fx-art-opacity-rest) * .72); }
  .index-card .card-art-fx { opacity: calc(var(--fx-art-opacity-rest) * .4); }
  .reveal[data-depth-mode="semantic"] .card-art-fx,
  .index-card[data-depth-mode="semantic"] .card-art-fx { opacity: 1; }
  .reveal[data-depth-mode="semantic"] .card-art-fx::before { opacity: .16; }
  .reveal[data-depth-mode="semantic"] .card-art-fx::after { opacity: .14; }
  .index-card[data-depth-mode="semantic"] .card-art-fx::before { opacity: .1; }
  .index-card[data-depth-mode="semantic"] .card-art-fx::after { opacity: .1; }
  .card-fx::after { opacity: calc(var(--fx-class-opacity) * .42); }
  .reveal-stack[data-rarity="ULTIMATE"] .reveal::before,
  .reveal-stack[data-rarity="ULTIMATE"] .reveal-art::before,
  .reveal-stack[data-rarity="ULTIMATE"] #ultimateButton,
  .reveal-stack.is-awarding .ultimate-ceremony,
  .reveal-stack.is-awarding .reveal.is-new { animation: none !important; }
  .reveal-stack.is-awarding .ultimate-ceremony { opacity: 1; transform: translateX(-50%); filter: none; }
  .pressprint.is-reading .pressprint-stats u { animation: none !important; }
}

@keyframes pressprint-fill { from { transform: scaleX(0); filter: brightness(2); } to { transform: scaleX(1); filter: none; } }
  .leaderboard-profile { grid-template-columns: 1fr; align-items: start; }
  .leaderboard-profile > p { grid-column: 1; margin-top: -5px; }

/* Mobile hunt clarity: every story area stays visible and explains itself in place. */
#topCollectionCountMobile { display: none; }
.selected-case {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 11px 13px 12px;
  border-left: 4px solid var(--ink);
  color: var(--ink);
  background: rgba(246, 241, 229, .5);
}
.selected-case > span { color: rgba(16, 17, 13, .6); font: 800 7px/1 var(--mono); letter-spacing: .09em; }
.selected-case > strong { font: 900 16px/.98 var(--sans); letter-spacing: -.025em; }
.selected-case > p { margin: 1px 0 0; color: var(--ink); font: 600 11px/1.35 var(--sans); letter-spacing: 0; text-transform: none; }
.press-bank {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 9px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 rgba(16, 17, 13, .1);
  font-variant-numeric: tabular-nums;
}
.press-bank > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 23px;
  padding: 5px 9px 4px;
  color: var(--paper);
  background: var(--ink);
  font: 800 6px/1 var(--mono);
  letter-spacing: .09em;
}
.press-bank > header strong { color: var(--buy); font: inherit; }
.press-bank > header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.press-bank-grid { display: grid; grid-template-columns: .82fr 1fr 1.2fr; }
.press-bank-metric {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 10px 8px;
  border-right: 1px solid rgba(16, 17, 13, .3);
}
.press-bank-metric:last-child { border-right: 0; }
.press-bank-metric > span { color: rgba(16, 17, 13, .62); font: 800 6px/1 var(--mono); letter-spacing: .08em; }
.press-bank-metric > strong,
.press-bank-metric > time {
  overflow: hidden;
  color: var(--ink);
  font: 900 19px/.92 var(--sans);
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.press-bank-metric > strong small { margin-left: 2px; font: 750 9px/1 var(--mono); letter-spacing: 0; }
.press-bank-metric > small { overflow: hidden; color: rgba(16, 17, 13, .66); font: 750 6px/1 var(--mono); letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.press-bank-next > time { font: 800 13px/1 var(--mono); letter-spacing: -.025em; }
.press-bank-meter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 88px; height: 5px; margin-top: 1px; }
.press-bank-meter i { display: block; min-width: 0; border: 1px solid rgba(16, 17, 13, .42); background: rgba(16, 17, 13, .08); transition: background-color 180ms ease, transform 180ms ease; }
.press-bank-meter i.is-filled { background: var(--buy); transform: translateY(-1px); }
.press-bank[data-state="empty"] .press-bank-next { color: var(--paper); background: var(--ink); }
.press-bank[data-state="empty"] .press-bank-next > span,
.press-bank[data-state="empty"] .press-bank-next > small { color: rgba(246, 241, 229, .68); }
.press-bank[data-state="empty"] .press-bank-next > time { color: var(--buy); }
.press-bank[data-state="full"] .press-bank-stored { background: rgba(217, 251, 30, .56); }
.press-bank[data-state="searching"] > header span { color: var(--buy); }
.how-link { cursor: pointer; background: transparent; }
.how-link span { display: inline-block; transition: transform 180ms ease; }
.how-link[aria-expanded="true"] { color: var(--paper); background: var(--ink); }
.how-link[aria-expanded="true"] span { transform: rotate(45deg); }
.how-panel {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
}
.how-panel ol { display: grid; margin: 0; padding: 0; list-style: none; }
.how-panel li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 11px 12px; border-bottom: 1px solid rgba(16, 17, 13, .22); }
.how-panel li b { font: 900 8px/1.3 var(--mono); letter-spacing: .06em; }
.how-panel li span { font: 600 10px/1.35 var(--sans); letter-spacing: 0; text-transform: none; }
.how-panel > p { margin: 0; padding: 10px 12px; color: rgba(16, 17, 13, .7); background: rgba(217, 251, 30, .28); font: 700 9px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    min-height: 62px;
    padding: 0 max(10px, env(safe-area-inset-left)) 0 max(10px, env(safe-area-inset-right));
  }
  .back-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 8px; }
  .top-actions { width: 100%; justify-content: flex-end; }
  .collection-button, .wallet-button { min-height: 44px; padding-inline: 11px; font-size: 8px; }
  .collection-button { min-width: 62px; }
  .wallet-button { min-width: 74px; }
  .collection-label, #topCollectionCount { display: none; }
  #topCollectionCountMobile { display: inline; margin: 0; color: var(--ink); font-size: 9px; }

  .hero-copy { padding: 20px 14px 18px; }
  .field-guide-lockup { margin-bottom: 24px; }
  .hero-copy > .eyebrow { margin-bottom: 7px; }
  .hunt-case-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: none;
    overflow: visible;
    gap: 0;
    padding: 0;
    border: 1px solid var(--ink);
    border-radius: 8px;
  }
  .hunt-case-list button {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(12px, auto);
    place-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 5px 3px;
    border-right: 1px solid rgba(16, 17, 13, .35);
    border-bottom: 1px solid rgba(16, 17, 13, .35);
    text-align: center;
  }
  .hunt-case-list button:nth-child(5n) { border-right: 0; }
  .hunt-case-list button:nth-child(n + 6) { border-bottom: 0; }
  .hunt-case-list button:hover, .hunt-case-list button.is-active { margin: 0; padding: 5px 3px; }
  .hunt-case-list button span { font-size: 13px; letter-spacing: -.04em; }
  .hunt-case-list button small {
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    font: 850 7px/1.08 var(--mono);
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .hunt-case-list button i { display: none; }
  .selected-case { min-height: 78px; margin-top: 10px; padding: 10px 12px; }
  .selected-case > strong { font-size: 18px; }
  .selected-case > p { font-size: 11px; }

  .press-bank { width: 100%; margin-top: 12px; box-shadow: 3px 3px 0 rgba(16, 17, 13, .1); }
  .press-bank > header { min-height: 22px; padding-inline: 8px; }
  .press-bank-metric { min-height: 56px; padding: 7px 8px; }
  .press-bank-metric > strong { font-size: 18px; }
  .press-bank-next > time { font-size: 12px; }
  .how-link { width: 100%; min-height: 52px; margin-top: 13px; }
  .how-panel li { grid-template-columns: 68px minmax(0, 1fr); padding: 10px 11px; }

  .player-strip { display: none; }
  .console { margin: 10px 8px 16px; }
  .console-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .console-rail > span:first-child {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-height: 24px;
    box-sizing: border-box;
    align-items: center;
    overflow: hidden;
    padding: 5px 8px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    background: var(--buy);
    font: 850 8px/1 var(--mono);
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .console-rail .energy-rail { display: none; }
  .console-screen { min-height: clamp(520px, 68svh, 650px); }
  .wallet-access {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
    margin: auto 8px max(8px, env(safe-area-inset-bottom));
    border-radius: 18px 18px 10px 10px;
  }
  .wallet-access-card { padding: 20px 18px max(18px, env(safe-area-inset-bottom)); }
  .wallet-access-card h2 { font-size: clamp(30px, 10vw, 42px); }
  .wallet-access-actions button, .wallet-provider-list button { min-height: 52px; }
}

@media (max-width: 390px) {
  .topbar { gap: 5px; }
  .back-link { font-size: 7px; }
  .collection-button, .wallet-button { padding-inline: 8px; }
  .hero-copy { padding-inline: 12px; }
  .press-bank-metric { padding-inline: 6px; }
  .press-bank-metric > small { font-size: 5.5px; }
  .press-bank-next > time { font-size: 11px; }
  .hunt-case-list button { min-height: 50px; padding-inline: 2px; }
  .hunt-case-list button:hover, .hunt-case-list button.is-active { padding-inline: 2px; }
  .hunt-case-list button small { font-size: 6.5px; }
}

/* Low-brain hunt loop: brand, press, reward first; configuration stays explicit and secondary. */
.hero {
  grid-template-columns: 286px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}
.hero-intro {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding: 32px 22px 0;
  border-right: 1px solid var(--ink);
  color: var(--ink);
  background: var(--buy);
}
.hero-copy {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  padding: 0 22px 26px;
}
.console {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.area-picker {
  width: 100%;
  color: var(--ink);
}
.area-picker > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 11px 10px 11px 12px;
  border: 1px solid var(--ink);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 4px 4px 0 rgba(16, 17, 13, .1);
  cursor: pointer;
  list-style: none;
}
.area-picker > summary::-webkit-details-marker { display: none; }
.area-picker > summary:hover { background: #fffef7; }
.selected-case {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin: 0;
  padding: 0 0 0 9px;
  border-left: 4px solid var(--buy);
  background: transparent;
}
.selected-case > span:first-child { color: rgba(16, 17, 13, .6); font: 800 7px/1 var(--mono); letter-spacing: .08em; }
.selected-case > strong { overflow: hidden; font: 900 18px/.98 var(--sans); letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.selected-case > .selected-case-line { display: -webkit-box; overflow: hidden; color: rgba(16, 17, 13, .78); font: 600 10px/1.3 var(--sans); letter-spacing: 0; text-transform: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.area-picker-action {
  display: grid;
  justify-items: end;
  gap: 7px;
  max-width: 58px;
  color: var(--ink);
  font: 850 7px/1.12 var(--mono);
  letter-spacing: .045em;
  text-align: right;
}
.area-picker-action b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 900 17px/1 var(--sans); transition: transform 180ms ease, color 180ms ease, background-color 180ms ease; }
.area-picker[open] .area-picker-action b { color: var(--paper); background: var(--ink); transform: rotate(45deg); }
.area-picker-panel {
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 4px 4px 0 rgba(16, 17, 13, .1);
}
.area-picker-panel > p { margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--ink); font: 850 7px/1 var(--mono); letter-spacing: .08em; }
.area-picker .hunt-case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: visible;
  border: 0;
}
.area-picker .hunt-case-list button {
  grid-template-columns: 30px minmax(0, 1fr) 8px;
  gap: 5px;
  min-width: 0;
  min-height: 43px;
  margin: 0;
  padding: 0 7px;
  border-right: 1px solid rgba(16, 17, 13, .32);
  border-bottom: 1px solid rgba(16, 17, 13, .32);
}
.area-picker .hunt-case-list button:nth-child(2n) { border-right: 0; }
.area-picker .hunt-case-list button:nth-child(n + 9) { border-bottom: 0; }
.area-picker .hunt-case-list button:hover,
.area-picker .hunt-case-list button.is-active { margin: 0; padding: 0 7px; }
.area-picker .hunt-case-list button span { font-size: 13px; }
.area-picker .hunt-case-list button small { display: block; color: inherit; font-size: 6px; white-space: normal; }
.area-picker .hunt-case-list button i { width: 7px; height: 7px; }

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .hero-intro {
    grid-column: 1;
    grid-row: 1;
    padding: 24px 24px 0;
    border-right: 0;
  }
  .console {
    grid-column: 1;
    grid-row: 2;
  }
  .hero-copy {
    grid-column: 1;
    grid-row: 3;
    padding: 20px 24px 24px;
    border-right: 0;
    border-top: 1px solid var(--ink);
  }
}

@media (max-width: 760px) {
  .hero-intro { padding: 13px 16px 11px; }
  .hero-intro .field-guide-lockup { margin: 0; }
  .hero-intro .field-guide-lockup h1 {
    display: flex;
    width: auto;
    gap: .2em;
    font-size: clamp(30px, 9.6vw, 40px);
    line-height: .86;
    letter-spacing: -.075em;
    transform: none;
  }
  .hero-intro .field-guide-lockup h1 span { display: inline; }
  .hero-intro .field-guide-lockup p { margin-top: 8px; font-size: 7px; }
  .hero-copy { padding: 14px 12px 18px; }
  .console { margin: 8px 8px 10px; }
  .console-rail {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding: 3px 2px 8px;
  }
  .console-rail > span:first-child { min-height: 27px; padding: 6px 9px; font-size: 7px; }
  .console-rail > span:last-child { display: none; }
  .console-rail .energy-rail { display: flex; min-width: 0; gap: 5px; }
  .console-rail .charge-readout {
    display: inline-flex;
    max-width: 150px;
    min-height: 27px;
    align-items: center;
    overflow: hidden;
    padding: 6px 8px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    background: var(--paper);
    font: 850 7px/1.15 var(--mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .console-rail .next-search { min-height: 27px; padding: 5px 7px; border-color: var(--ink); color: var(--paper); background: var(--ink); font-size: 7px; }
  .console-rail .next-search span { min-width: 48px; }
  .console-screen { min-height: clamp(430px, 60svh, 560px); background-size: min(650px, 137%) auto; }
  .hunt-button { width: min(430px, 91vw); }
  .press-instruction {
    bottom: 18px;
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    background: var(--buy);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .38);
    font: 900 10px/1 var(--mono);
    letter-spacing: .055em;
  }
  .area-picker > summary { min-height: 82px; }
  .selected-case { min-height: 0; padding: 0 0 0 9px; }
  .selected-case > strong { font-size: 19px; }
  .area-picker .hunt-case-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-picker .hunt-case-list button {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 48px;
    padding: 6px 8px;
    text-align: left;
  }
  .area-picker .hunt-case-list button:hover,
  .area-picker .hunt-case-list button.is-active { padding: 6px 8px; }
  .area-picker .hunt-case-list button span { font-size: 14px; }
  .area-picker .hunt-case-list button small { display: block; font: 850 7px/1.1 var(--mono); -webkit-line-clamp: initial; }
  .area-picker .hunt-case-list button i { display: none; }
  .press-bank { margin-top: 10px; }
  .how-link { min-height: 44px; margin-top: 10px; opacity: .78; }
}

@media (max-width: 390px) {
  .hero-intro { padding-inline: 12px; }
  .hero-copy { padding-inline: 9px; }
  .console { margin-inline: 6px; }
  .console-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .console-rail .charge-readout { width: 100%; max-width: none; justify-content: center; font-size: 6.5px; }
  .console-rail .next-search { width: 100%; justify-content: center; }
  .console-screen { min-height: clamp(415px, 59svh, 525px); }
  .area-picker .hunt-case-list button,
  .area-picker .hunt-case-list button:hover,
  .area-picker .hunt-case-list button.is-active { padding-inline: 6px; }
}