/* ==========================================================================
   Poke Australia: styles
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg: #04060c;
  --bg-2: #070b17;
  --surface: #0a1122;
  --surface-2: #0e1830;
  --stage: #050913;
  --line: rgba(130, 170, 255, 0.12);
  --line-strong: rgba(130, 170, 255, 0.26);

  --text: #eaf0ff;
  --muted: #9aa7c8;
  --dim: #7d89aa; /* refined from #7581a2: 4.5:1+ on every surface, incl. #0e1830 */

  --blue: #2d6bff;
  --blue-deep: #1240d6;
  --cyan: #5cd6ff;
  --ice: #d4f4ff;
  --sale: #3ee08f;

  /* Logo colours (sampled from the Poke logo) */
  --yellow: #ffcb05; /*       "POKE" letters: primary accent (buttons, eyebrows, focus ring) */
  --yellow-hi: #ffdb4d; /*    top of the button gradient */
  --yellow-lo: #f2b705; /*    bottom of the button gradient */
  --ink: #0b1a3d; /*          text on yellow (9.4:1 or better on every stop) */
  --poke-blue: #3466af; /*    the letters' blue outline: secondary accent */
  --poke-blue-deep: #14346c; /* outline shadow */
  --poke-blue-light: #7aa7ff; /* outline highlight, for text on dark */
  --ember: 255, 122, 46; /*   Charizard's tail flame (rgb triplet, glows only: never text) */

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1200px;

  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* nav (80px) + breathing room */
  -webkit-text-size-adjust: 100%;
}
/* The page behind the large photo view stays put while it's open. The gutter keeps the scrollbar's
   space, so on desktops with classic scrollbars (Windows) the page doesn't shift sideways either.
   (Reserved only while it's open: the closed page lays out exactly as before.) */
html:has(dialog.viewer[open]) { overflow: hidden; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* .is-demo-focus mirrors :focus-visible in the States board frames (test-only) */
.is-demo-focus,
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--yellow); color: var(--ink); font-weight: 800; text-decoration: none;
  transition: top 0.2s;
}
.skip:focus { top: 12px; }

.wrap {
  width: min(var(--maxw), 100% - 32px);
  margin-inline: auto;
}

.i {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Type ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--yellow);
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 12px 2px rgba(255, 203, 5, 0.55);
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.6vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 700;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

.fire-text {
  background: linear-gradient(180deg, #ffffff 0%, var(--ice) 25%, var(--cyan) 55%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(45, 107, 255, 0.55));
}

.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--muted);
  max-width: 34em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.99); }

/* Pokémon yellow with the logo's blue outline as a pressed-in lower edge */
.btn--primary {
  background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 45%, var(--yellow-lo));
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(52, 102, 175, 0.55), 0 8px 24px -10px rgba(255, 203, 5, 0.55);
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(52, 102, 175, 0.6), 0 10px 30px -8px rgba(255, 203, 5, 0.7); transform: translateY(-1px); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(130, 170, 255, 0.45); transform: translateY(-1px); }

.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 0.9rem; }
.btn--block { width: 100%; white-space: normal; text-align: center; }

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 6, 12, 0.9);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 80px;
}

/* Logo + "AUSTRALIA" lockup. The nav logo file has its black background keyed out to transparency
   (the nav is translucent, so a screen-blended black box would show as a faint rectangle) */
.brand { display: inline-flex; align-items: flex-end; gap: 4px; min-height: 44px; text-decoration: none; }
.brand-logo { width: auto; height: 64px; }
.brand-sub {
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.74rem; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--poke-blue-light);
}
.brand .brand-sub { margin-bottom: 11px; } /* level with the POKE letters */

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none; font-weight: 700; font-size: 0.94rem;
  transition: color 0.2s;
}
.nav-links a:not(.btn):hover { color: var(--text); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong);
  cursor: pointer; place-items: center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-inner { height: 72px; }
  .brand-logo { height: 56px; }
  .brand .brand-sub { margin-bottom: 9px; font-size: 0.7rem; }
  .nav-toggle { display: grid; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px 16px 18px;
    background: #05080f;
    box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a:not(.btn) { padding: 12px 4px; font-size: 1.05rem; color: var(--text); }
  .nav-links .btn { margin-top: 8px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 7vw, 96px);
}
.hero-glow {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 50% at 75% 60%, rgba(45, 107, 255, 0.22), transparent 70%),
    radial-gradient(40% 40% at 10% 0%, rgba(92, 214, 255, 0.08), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.fire {
  /* WebGL flame bed (main.js sizes each canvas to where flames can appear and keeps them below the copy) */
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  /* main.js places each canvas with inline styles and sizes its drawing buffer to match: never
     animate that (reduced motion turns every transition into a 0.01ms one, so the canvas would
     still report its previous box right after a resize) */
  transition: none;
  mix-blend-mode: screen;
}
.hero-fire { z-index: -1; }
/* Short licks in front of the slabs' lower edges (main.js places and sizes it over the fan) */
.front-fire { inset: auto; z-index: 4; }
/* Sparks (2D canvas, placed by fire.js over the flame area) */
.fire-sparks { position: absolute; z-index: 4; pointer-events: none; mix-blend-mode: screen; }
.cta .fire-sparks { z-index: -1; }
.fire--fallback .fire-sparks { visibility: hidden; }
/* Live flames sit on pure black: drop the decorative blue washes behind them */
.hero.fire--live .hero-glow { background: var(--bg); }
.cta.fire--live { background: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  /* light up once the slabs have landed */
  .front-fire { animation: front-in 0.9s 1s both; }
}
@keyframes front-in { from { opacity: 0; } }
/* A canvas that can't draw is hidden (a lost WebGL context can paint as a white placeholder) */
.fire.is-off { visibility: hidden; }
/* No WebGL, no highp, software WebGL or context lost: the section shows a still glow where the flames
   would be, with a few soft tongue shapes rising from the bottom edge */
.fire--fallback::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --tongue: rgba(80, 150, 255, 0.13);
  background:
    radial-gradient(5% 26% at 57% 100%, var(--tongue), transparent 75%),
    radial-gradient(5.5% 38% at 62.5% 100%, var(--tongue), transparent 75%),
    radial-gradient(5% 30% at 68% 100%, var(--tongue), transparent 75%),
    radial-gradient(6% 50% at 73.5% 100%, var(--tongue), transparent 75%),
    radial-gradient(5.5% 36% at 79.5% 100%, var(--tongue), transparent 75%),
    radial-gradient(6% 46% at 85% 100%, var(--tongue), transparent 75%),
    radial-gradient(5.5% 32% at 91% 100%, var(--tongue), transparent 75%),
    radial-gradient(6% 40% at 97% 100%, var(--tongue), transparent 75%),
    radial-gradient(46% 42% at 76% 100%, rgba(92, 214, 255, 0.15), transparent 72%),
    radial-gradient(52% 34% at 74% 100%, rgba(45, 107, 255, 0.38), transparent 75%);
}
@media (max-width: 900px) {
  .hero.fire--fallback::after {
    background:
      radial-gradient(11% 36% at 2% 100%, var(--tongue), transparent 75%),
      radial-gradient(10% 24% at 15% 100%, var(--tongue), transparent 75%),
      radial-gradient(11% 30% at 30% 100%, var(--tongue), transparent 75%),
      radial-gradient(10% 22% at 48% 100%, var(--tongue), transparent 75%),
      radial-gradient(11% 28% at 65% 100%, var(--tongue), transparent 75%),
      radial-gradient(10% 25% at 82% 100%, var(--tongue), transparent 75%),
      radial-gradient(11% 38% at 98% 100%, var(--tongue), transparent 75%),
      radial-gradient(60% 22% at 50% 100%, rgba(92, 214, 255, 0.22), transparent 70%),
      radial-gradient(90% 34% at 50% 100%, rgba(45, 107, 255, 0.38), transparent 75%);
  }
}
/* Over the live flames the slabs cast a deep-blue shadow: a black one turns the white-hot flame
   cores behind them grey-olive. (The still fallback glow keeps the plain black shadow.) */
.hero:not(.fire--fallback) .fan-item { filter: drop-shadow(0 -10px 34px rgba(var(--ember), 0.36)) drop-shadow(0 30px 40px rgba(8, 30, 140, 0.45)); }
/* Ghost buttons sit on the flames, so give them a solid backing */
.hero .btn--ghost,
.cta .btn--ghost { background: rgba(4, 6, 12, 0.72); }
.hero .btn--ghost:hover,
.cta .btn--ghost:hover { background: rgba(14, 24, 48, 0.85); }


.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
}
.hero-copy { display: grid; gap: 22px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.motion-toggle {
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(4, 6, 12, 0.88); border: 1px solid var(--line-strong);
  color: var(--text); cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.motion-toggle:hover { background: rgba(14, 24, 48, 0.9); border-color: rgba(130, 170, 255, 0.45); }
.motion-toggle .i { width: 18px; height: 18px; }
.motion-toggle .i-play { display: none; fill: currentColor; stroke: none; }
.motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: block; }
/* Over the flames the focus ring gets a dark halo, so it never sits straight on bright fire */
.hero :focus-visible, .cta :focus-visible, .hero .is-demo-focus, .cta .is-demo-focus { box-shadow: 0 0 0 7px rgba(4, 6, 12, 0.92); }

/* Fanned slabs */
.fan {
  position: relative;
  height: clamp(340px, 40vw, 520px);
  --w: clamp(168px, 17vw, 236px);
}
.fan-item {
  position: absolute; left: 50%; top: 50%;
  width: var(--w);
  translate: -50% -50%;
  transition: transform 0.5s var(--ease-out);
  /* warm backlight on the top edges (the logo's orange halo above its blue flare), shadow below */
  filter: drop-shadow(0 -10px 34px rgba(var(--ember), 0.36)) drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
}
.fan-item.is-c { z-index: 3; transform: translateY(-4%); }
.fan-item.is-l { z-index: 2; transform: translateX(-62%) translateY(4%) rotate(-12deg); }
.fan-item.is-r { z-index: 2; transform: translateX(62%) translateY(4%) rotate(12deg); }
@media (hover: hover) and (pointer: fine) {
  .fan:hover .fan-item.is-l { transform: translateX(-70%) translateY(2%) rotate(-15deg); }
  .fan:hover .fan-item.is-r { transform: translateX(70%) translateY(2%) rotate(15deg); }
  .fan:hover .fan-item.is-c { transform: translateY(-7%); }
}

@media (prefers-reduced-motion: no-preference) {
  .fan-item { animation: fan-in 0.9s var(--ease-out) both; }
  .fan-item.is-l { animation-delay: 0.12s; }
  .fan-item.is-r { animation-delay: 0.22s; }
}
@keyframes fan-in {
  from { opacity: 0; translate: -50% -30%; }
  to { opacity: 1; translate: -50% -50%; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 12px; }
  .fan { height: clamp(250px, 80vw, 420px); --w: clamp(112px, 36vw, 200px); }
  .br-lg { display: none; }
}

/* ---------- Pillars ---------- */

.pillars {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 17, 34, 0.6), rgba(4, 6, 12, 0.6));
}
.pillars-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pillars-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 20px;
}
.pillars-list li + li { border-left: 1px solid var(--line); }
.pillars-list .i {
  width: 38px; height: 38px; padding: 8px; border-radius: 12px;
  color: var(--cyan); background: rgba(45, 107, 255, 0.12); stroke-width: 1.8;
}
.pillars-list strong { display: block; font-size: 0.98rem; line-height: 1.3; }
.pillars-list span { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.4; }

@media (max-width: 900px) {
  .pillars-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars-list li:nth-child(3) { border-left: 0; }
  .pillars-list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .pillars-list li { padding: 16px 10px; gap: 10px; flex-direction: column; align-items: flex-start; }
}

/* ---------- Sections ---------- */

.section { padding: clamp(64px, 9vw, 112px) 0; }
.section--alt {
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(45, 107, 255, 0.12), transparent 70%),
    var(--bg-2);
  border-block: 1px solid var(--line);
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.section-head > div { display: grid; gap: 12px; }
.section-lead { color: var(--muted); max-width: 30em; font-size: 1.02rem; }

/* ---------- Filters ---------- */

.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-bottom: 24px;
}
.seg {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  border: 0; background: transparent; cursor: pointer;
  min-height: 44px; padding: 6px 16px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 700; color: var(--muted); white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] {
  background: var(--blue); color: #fff;
  box-shadow: 0 0 18px -6px rgba(45, 107, 255, 0.8);
}
.seg button:focus-visible, .seg button.is-demo-focus { outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--bg); }
@media (max-width: 400px) {
  .seg button { padding: 6px 9px; font-size: 0.82rem; }
}
/* The number on a filter button: how many cards it would show */
.seg button .n, .quick button .n { margin-left: 2px; font-size: 0.78em; font-weight: 800; font-variant-numeric: tabular-nums; }
.seg button.is-none:not([aria-pressed="true"]), .quick button.is-none:not([aria-pressed="true"]) { color: var(--dim); }
.quick button.is-none:not([aria-pressed="true"]) { border-color: var(--line); }

/* Search box: a pill like the filters */
.search {
  position: relative; display: flex; align-items: center;
  flex: 1 1 240px; max-width: 340px; min-width: 0;
}
.search .i { position: absolute; left: 16px; color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; min-height: 52px; padding: 6px 16px 6px 44px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 1rem; font-weight: 600;
  transition: border-color 0.2s;
}
.search input::placeholder { color: var(--dim); font-weight: 500; }
.search input:hover { border-color: var(--line-strong); }
.search input::-webkit-search-cancel-button { cursor: pointer; }

/* One-tap filters: small pills that switch on and off */
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick[hidden] { display: none; }
.quick button {
  min-height: 44px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); color: var(--muted);
  font: inherit; font-size: 0.88rem; font-weight: 700; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.quick button:hover { color: var(--text); border-color: rgba(130, 170, 255, 0.45); }
.quick button[aria-pressed="true"] { background: rgba(255, 203, 5, 0.12); border-color: var(--yellow); color: var(--yellow); }
.quick button:focus-visible { outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--bg); } /* ring inside the pill: the sliding row on phones would clip an outer one */

/* A text button that reads as a link ("Clear search and filters", "Copy link to this card") */
.link-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--cyan); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ice); }

/* Sort menu: a pill like the filters, with a chevron */
.sort { display: inline-flex; align-items: center; gap: 10px; }
.sort[hidden] { display: none; }
.collection select { max-width: min(320px, 70vw); text-overflow: ellipsis; }
.sort-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sort select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 6px 40px 6px 16px; border-radius: 999px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7c8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
  border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: border-color 0.2s;
}
.sort select:hover { border-color: var(--line-strong); }
.sort select option { background: var(--surface); color: var(--text); }
@media (max-width: 400px) {
  .sort select { font-size: 0.82rem; padding-left: 12px; }
}

/* AUD / USD switch (same pills as the filters) */
.seg--currency button { min-width: 58px; }
/* Large view: the exact AUD price under a converted USD one */
.price-aud { color: var(--muted); font-size: 0.88rem; font-weight: 600; margin-top: -4px; }

/* Card count, with the eBay price freshness line under it */
.filter-meta { margin-left: auto; display: grid; justify-items: end; gap: 2px; text-align: right; }
.filters--count-only .filter-meta { margin-left: 0; justify-items: start; text-align: left; }
.filter-count { color: var(--dim); font-size: 0.9rem; font-weight: 600; }
.sync-note { color: var(--dim); font-size: 0.8rem; font-weight: 500; }
.sync-note time { color: var(--muted); font-weight: 600; }
.fx-note { max-width: 34em; }

@media (max-width: 640px) {
  .filter-meta { margin-left: 0; width: 100%; justify-items: start; text-align: left; }
  .search { flex-basis: 100%; max-width: none; }
  /* Keep the controls short on a phone: quick filters in one row that slides sideways, and the
     sort menu beside the currency switch (its "Sort" label stays for screen readers) */
  .quick { flex-wrap: nowrap; max-width: calc(100% + 6px); overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
  .quick::-webkit-scrollbar { display: none; }
  .sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Card grid ---------- */

/* While the cards wait for the live eBay data */
.empty--loading { color: var(--muted); }
.empty--loading::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--cyan);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .empty--loading::before { animation: none; } }
/* Prices that are old because eBay couldn't be reached */
.sync-note.is-old { color: #ffd36b; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.card {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 24px 50px -24px rgba(45, 107, 255, 0.5);
}
/* Scroll reveal (fire.js adds .has-reveal only when motion is allowed) */
.has-reveal .card,
.has-reveal .store {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s var(--ease-out) var(--d, 0ms), transform 0.35s var(--ease-out) var(--d, 0ms), border-color 0.25s, box-shadow 0.35s;
}
.has-reveal .card.is-in,
.has-reveal .store.is-in { opacity: 1; transform: none; }
.has-reveal .store.is-in:hover { transform: translateY(-3px); transition-delay: 0ms; }

.card-stage {
  position: relative;
  padding: 48px 26px 18px;
  background:
    radial-gradient(90% 55% at 50% 105%, rgba(45, 107, 255, 0.38), transparent 70%),
    radial-gradient(60% 40% at 50% 0%, rgba(92, 214, 255, 0.06), transparent 70%),
    var(--stage);
}

.status {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(4, 6, 12, 0.78); border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.status--for-sale { color: #aef5cf; }
.status--for-sale::before { background: var(--sale); box-shadow: 0 0 8px var(--sale); }
.status--not-for-sale { color: var(--muted); }
.status--not-for-sale::before { background: var(--dim); }
.status--sold { color: var(--text); background: rgba(234, 240, 255, 0.1); }
.status--sold::before { box-sizing: border-box; border: 1.5px solid var(--text); }

/* "x15": how many of this card we have, on its photo (top right; the status is top left) */
.qty {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 3px 11px; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; line-height: 1.2;
  color: var(--ink); background: var(--yellow);
  box-shadow: 0 6px 16px -6px rgba(255, 203, 5, 0.55);
}
/* In the large view it sits top left of the photo: the close button is top right. Its holder takes
   no room in the photo's layout */
.viewer-qty:not([hidden]) { display: contents; }
.viewer-qty .qty { top: 14px; right: auto; left: 14px; font-size: 1.1rem; }

/* The whole photo stage is the button that opens the large photo view */
.stage-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 10px;
}
.stage-btn:focus-visible, .stage-btn.is-demo-focus { outline-offset: 2px; }

/* No photo yet (or an eBay photo that won't load): a dashed slab outline with a plain label */
.photo-empty {
  position: relative;
  height: 100%; max-width: 100%; aspect-ratio: 0.6;
  display: grid; place-items: center; padding: 12px;
  border-radius: 10px; border: 1.5px dashed var(--line-strong);
  background: rgba(130, 170, 255, 0.03);
  color: var(--dim); font-size: 0.78rem; font-weight: 700; text-align: center;
}
.photo-empty span {
  position: absolute; top: 6%; left: 19%; width: 62%; height: 14%;
  border-radius: 6px; border: 1.5px dashed var(--line);
}

/* Sold: greyed, darkened photo, muted name, no glow on hover */
.card--sold .slab-shape img { filter: grayscale(0.55) brightness(0.55); }
.card--sold .card-name { color: var(--muted); }
.card--sold:hover { border-color: var(--line); box-shadow: none; }

.card-info {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line);
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.tag {
  padding: 2px 8px; border-radius: 6px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.tag--grade { color: var(--ice); background: rgba(45, 107, 255, 0.16); border-color: rgba(45, 107, 255, 0.35); }
.tag--offer { color: #aef5cf; background: rgba(62, 224, 143, 0.1); border-color: rgba(62, 224, 143, 0.35); white-space: nowrap; }
/* Price, with eBay's "or Best Offer" beside it (it drops underneath on a narrow card) */
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.card-name { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: balance; }
.card-meta { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.card-store { color: var(--dim); font-size: 0.8rem; font-weight: 600; }

.card-foot {
  margin-top: auto; padding-top: 12px;
  display: grid; gap: 10px;
}
.price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.price small { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.price--muted { font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; color: var(--muted); }
.card-foot .btn { min-height: 44px; padding: 10px 14px; font-size: 0.88rem; }
/* In the grid the eBay button is a quieter yellow: a wall of solid yellow pills would outshine the photos.
   It fills in on hover (keyboard focus gets the yellow ring), and stays solid in the large photo view */
.card-foot .btn--primary {
  background: rgba(255, 203, 5, 0.08); color: var(--yellow);
  border-color: rgba(255, 203, 5, 0.5); box-shadow: none;
}
.card-foot .btn--primary:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: 0 8px 22px -10px rgba(255, 203, 5, 0.6); }
.price--sold { font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; color: var(--dim); line-height: 1.4; }
.price--sold a, .empty a { color: var(--cyan); text-underline-offset: 3px; }
.price--sold a:hover, .empty a:hover { color: var(--ice); }

@media (max-width: 560px) {
  .card-stage { padding: 34px 12px 12px; }
  .status { top: 8px; left: 8px; font-size: 0.64rem; padding: 3px 8px 3px 6px; }
  .qty { top: 8px; right: 8px; font-size: 0.8rem; padding: 2px 8px; }
  .card-info { padding: 12px 12px 14px; gap: 4px; }
  .card-name { font-size: 0.9rem; }
  .card-meta { font-size: 0.78rem; }
  .card-store { font-size: 0.72rem; }
  .tag { font-size: 0.66rem; padding: 2px 6px; }
  .price { font-size: 1rem; }
  .price--muted { font-size: 0.82rem; }
  .price--sold { font-size: 0.82rem; }
  .card-foot .btn { min-height: 44px; padding: 8px 10px; font-size: 0.8rem; gap: 6px; white-space: normal; text-align: center; line-height: 1.2; }
  .hide-sm { display: none; }
}

.empty {
  grid-column: 1 / -1; overflow-wrap: anywhere;
  padding: 48px 16px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}

/* ==========================================================================
   Media: photos, placeholder slabs, placeholder cards
   All sizes inside .media use cqw so they scale with the card width.
   ========================================================================== */

.media {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 5 / 8;
  display: grid; place-items: center;
  perspective: 900px;
}

.tilt {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.media.is-tilting .tilt { transition: transform 0.08s linear; }

/* A photo sits in a box with the slab's own proportions (fire.js reads them), so the shine,
   glare and firelight cover the slab exactly and tilt with it */
.slab-shape {
  position: relative;
  width: min(100%, calc(160cqw * var(--ar, 0.6)));
  aspect-ratio: var(--ar, 0.6);
  border-radius: 6px;
  isolation: isolate;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6));
}
.slab-shape img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 6px;
  outline: 1px solid rgba(255, 255, 255, 0.06); outline-offset: 0;
  transition: filter 0.35s var(--ease-out);
}
.fan .slab-shape { filter: none; }

/* eBay listing photos come in every shape: tight portrait scans, and 3:4 or square snaps of a slab on
   a table. They all get the same frame, a slab-shaped tile the size of your own cut-out slabs.
   A portrait photo fits its full height. A wider one is enlarged only enough to trim the empty table
   at its sides (about 13% a side for a square photo, under 2% for a 3:4 one, so the slab itself is
   never cut), and a blurred copy of the same photo fills what's left above and below.
   --ar is the photo's own shape (fire.js sets it once loaded); the large view always shows the whole photo */
.media--ebay .slab-shape {
  width: min(100%, 96cqw); /* 160cqw x 0.6: the full stage height */
  aspect-ratio: 0.6;
  overflow: hidden;
  background: var(--surface-2);
  outline: 1px solid rgba(255, 255, 255, 0.06); outline-offset: -1px;
}
.media--ebay .slab-shape::after {
  content: ""; position: absolute; inset: -16px; z-index: 0; pointer-events: none;
  background: var(--photo, none) center / cover no-repeat;
  filter: blur(14px) brightness(0.5);
}
.media--ebay .slab-shape img {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 100%; height: auto; max-width: none; /* browsers without CSS min(): fit the width */
  translate: -50% -50%;
  border-radius: 0; outline: 0;
}
@supports (width: calc(100% * min(1 / 0.6, 1 / min(1, 0.7 / 1 + 0.03)))) {
  /* tall photo: (ar / 0.6) of the frame's width, i.e. its full height. Wide photo: the frame shows
     (0.7 / ar + 3%) of the photo's width, centred */
  .media--ebay .slab-shape img { width: calc(100% * min(var(--ar, 0.6) / 0.6, 1 / min(1, 0.7 / var(--ar, 0.6) + 0.03))); }
}
.card--sold .media--ebay .slab-shape::after { filter: blur(14px) brightness(0.3) grayscale(0.55); }

/* Holographic shine: an iridescent band that slides against the pointer, plus a soft glare */
.shine {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 22%, rgba(255, 70, 200, 0.5) 36%, rgba(60, 220, 255, 0.6) 45%, rgba(120, 255, 190, 0.5) 53%, rgba(255, 230, 90, 0.45) 61%, transparent 76%);
  background-size: 260% 260%;
  background-position: calc(100% - var(--mx, 50%)) calc(100% - var(--my, 50%));
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.45s;
}
.shine::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.22), transparent 42%);
}
.media.is-tilting .shine { opacity: 0.42; }
.media.is-sweep:not(.is-tilting) .shine { animation: holo-sweep 1.6s 0.25s var(--ease-out) both; }
@keyframes holo-sweep {
  0% { opacity: 0; background-position: 110% 110%; }
  35% { opacity: 0.38; }
  100% { opacity: 0; background-position: -10% -10%; }
}

/* Firelight: the hero slabs catch blue light from the flames below. fire.js sets its strength (--fl,
   SETTINGS.firelight) once while the flames are live; the flicker is an opacity-only keyframe animation
   that the compositor runs, so nothing on the page is restyled per frame */
.fan .slab-shape::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(130% 55% at 50% 112%, rgba(70, 160, 255, calc(0.55 * var(--fl, 0))), rgba(30, 90, 255, calc(0.18 * var(--fl, 0))) 50%, transparent 75%);
  mix-blend-mode: screen;
  opacity: 0.82;
}
@media (prefers-reduced-motion: no-preference) {
  /* longhands, so the play-state rule below still applies */
  :root:not(.force-reduce, .is-shot) .hero.fire--live .fan .slab-shape::before {
    animation-name: firelight; animation-duration: 11.1s;
    animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  }
}
.motion-paused .fan .slab-shape::before,
.fire--offscreen .fan .slab-shape::before { animation-play-state: paused; }
/* Two slow sines (3 and 7 cycles per loop), keyed at their peaks and troughs */
@keyframes firelight {
  0%, 100% { opacity: 0.89; }
  5.5% { opacity: 0.83; }
  12.4% { opacity: 0.97; }
  21.3% { opacity: 0.67; }
  28.3% { opacity: 0.81; }
  33.5% { opacity: 0.75; }
  41.8% { opacity: 1; }
  50.3% { opacity: 0.75; }
  55.5% { opacity: 0.81; }
  62.4% { opacity: 0.67; }
  71.3% { opacity: 0.97; }
  78.3% { opacity: 0.83; }
  83.5% { opacity: 0.89; }
  91.8% { opacity: 0.64; }
}

/* ---------- Sell & trade ---------- */

.sell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.sell-copy { display: grid; gap: 16px; }
.steps { display: grid; gap: 4px; margin-top: 18px; }
.steps li {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
/* Yellow numerals in a logo-blue outlined tile, like the POKE letters */
.step-n {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--yellow);
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: rgba(45, 107, 255, 0.12); border: 1.5px solid rgba(52, 102, 175, 0.75);
}
.steps h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; margin-bottom: 4px; }
.steps p { color: var(--muted); }
.steps a { color: var(--cyan); text-underline-offset: 3px; }

.buy-panel {
  position: sticky; top: 108px;
  display: grid; gap: 18px;
  padding: 28px;
  border-radius: var(--radius);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(45, 107, 255, 0.18), transparent 70%),
    var(--surface);
  border: 1px solid var(--line-strong);
}
.buy-panel h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 7px 14px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong);
}
.buy-note { color: var(--muted); font-size: 0.95rem; }

@media (max-width: 860px) {
  .sell { grid-template-columns: minmax(0, 1fr); }
  .buy-panel { position: static; padding: 22px; }
}

/* ---------- Stores ---------- */

.stores {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; /* five shops: three, then two */
}
.store {
  position: relative; overflow: hidden;
  display: grid; gap: 10px; align-content: start; grid-template-rows: auto auto 1fr auto; /* the link sits on the bottom edge in every card */
  padding: clamp(24px, 3.5vw, 36px);
  border-radius: var(--radius);
  text-decoration: none;
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(45, 107, 255, 0.22), transparent 70%),
    var(--surface);
  border: 1px solid var(--line-strong);
  transition: border-color 0.25s, transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.store:hover {
  border-color: rgba(92, 214, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 28px 60px -28px rgba(45, 107, 255, 0.7);
}
.store-tag {
  justify-self: start;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan); background: rgba(45, 107, 255, 0.14); border: 1px solid rgba(45, 107, 255, 0.35);
}
.store-handle {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; /* three across: the longest name stays on one line */
  overflow-wrap: anywhere;
}
.store-desc { color: var(--muted); }
.store-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; align-self: end;
  font-weight: 800; color: var(--text);
}
.store:hover .store-cta .i { transform: translate(2px, -2px); }
.store-cta .i { transition: transform 0.25s var(--ease-out); }

@media (max-width: 900px) {
  .stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-handle { font-size: clamp(1.35rem, 3vw, 2rem); }
}
@media (max-width: 640px) {
  .stores { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- CTA band ---------- */

.cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(72px, 10vw, 128px) 0 clamp(136px, 12vw, 150px); /* room for the flame bed under the buttons */
  text-align: center;
  border-top: 1px solid var(--line);
  background: radial-gradient(60% 70% at 50% 100%, rgba(45, 107, 255, 0.25), transparent 70%), var(--bg);
}
.cta-fire { z-index: -1; }
.cta.fire--fallback::after {
  background:
    radial-gradient(5% 56% at 2% 100%, var(--tongue), transparent 75%),
    radial-gradient(4.5% 40% at 8% 100%, var(--tongue), transparent 75%),
    radial-gradient(4.5% 30% at 16% 100%, var(--tongue), transparent 75%),
    radial-gradient(4.5% 22% at 25% 100%, var(--tongue), transparent 75%),
    radial-gradient(4.5% 18% at 36% 100%, var(--tongue), transparent 75%),
    radial-gradient(4.5% 18% at 64% 100%, var(--tongue), transparent 75%),
    radial-gradient(4.5% 22% at 75% 100%, var(--tongue), transparent 75%),
    radial-gradient(4.5% 30% at 84% 100%, var(--tongue), transparent 75%),
    radial-gradient(4.5% 42% at 92% 100%, var(--tongue), transparent 75%),
    radial-gradient(5% 54% at 98% 100%, var(--tongue), transparent 75%),
    radial-gradient(70% 45% at 50% 100%, rgba(45, 107, 255, 0.35), transparent 75%);
}
@media (max-width: 640px) {
  .cta { padding-bottom: clamp(190px, 54vw, 260px); } /* real height for the flames under the buttons */
}
.cta-inner { display: grid; justify-items: center; gap: 20px; }
/* The logo as the Instagram profile picture, so the DM step feels familiar */
.cta-logo {
  width: 104px; height: 104px; border-radius: 50%;
  margin-bottom: -6px;
  background: #000;
  box-shadow: 0 0 0 2px var(--yellow), 0 0 0 5px var(--bg), 0 0 0 6px rgba(52, 102, 175, 0.9), 0 12px 40px -8px rgba(var(--ember), 0.35);
}
.cta h2 { font-size: clamp(1.8rem, 4.4vw, 3.4rem); }
.cta .hero-ctas { justify-content: center; }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--line); background: #03050a; padding: 48px 0 28px; }
.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid var(--line);
}
.footer-brand { display: grid; gap: 10px; max-width: 320px; }
/* Stacked lockup: the full logo with its lens flare, AUSTRALIA under the POKE letters. The wing tip
   lines up with the text column; the flare runs out to the left */
.footer-lockup { display: grid; justify-items: center; width: 352px; margin: -40px 0 4px -63px; }
.footer-logo { width: 100%; height: auto; mix-blend-mode: screen; }
.footer-lockup .brand-sub { margin-top: -18px; font-size: 0.78rem; } /* below the glow under the letters: 4.5:1+ on every pixel */
@media (max-width: 640px) {
  /* smaller on phones, where the CTA's logo is only a scroll away */
  .footer-lockup { width: 272px; margin: -30px 0 4px -49px; }
  .footer-lockup .brand-sub { margin-top: -14px; font-size: 0.72rem; }
}
.footer-brand p { color: var(--muted); font-size: 0.92rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.footer-links div { display: grid; gap: 0; align-content: start; }
.footer-links h3 { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 800; margin-bottom: 4px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.footer-links a:hover { color: var(--text); }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-top: 22px; color: var(--dim); font-size: 0.8rem;
}
.footer-legal p:last-child { max-width: 46em; }

/* ---------- Large photo view ---------- */

.viewer {
  width: min(920px, 100% - 24px); max-width: none; max-height: calc(100dvh - 24px);
  margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); overflow: auto; overscroll-behavior: contain;
}
.viewer::backdrop { background: rgba(2, 3, 8, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.viewer-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.viewer-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(4, 6, 12, 0.78); border: 1px solid var(--line-strong); color: var(--text);
  transition: background-color 0.2s, border-color 0.2s;
}
.viewer-close:hover { background: rgba(14, 24, 48, 0.9); border-color: rgba(130, 170, 255, 0.45); }
.viewer-close .i { width: 22px; height: 22px; }
.viewer-photo {
  display: grid; place-items: center; padding: 28px;
  background:
    radial-gradient(90% 55% at 50% 105%, rgba(45, 107, 255, 0.38), transparent 70%),
    var(--stage);
}
.viewer-photo img {
  max-width: 100%; max-height: min(72dvh, 640px); width: auto; height: auto;
  border-radius: 6px; outline: 1px solid rgba(255, 255, 255, 0.06);
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6));
}
.viewer--sold .viewer-photo img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6)) grayscale(0.55) brightness(0.55); }
.viewer-info { display: grid; gap: 14px; align-content: start; padding: 28px 24px 24px; border-left: 1px solid var(--line); }
.viewer-info .status { position: static; justify-self: start; backdrop-filter: none; background: rgba(255, 255, 255, 0.04); }
.viewer-info .status--sold { background: rgba(234, 240, 255, 0.1); }
.viewer-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; text-wrap: balance; padding-right: 44px; }
.viewer-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 0.92rem; }
.viewer-dl dt { color: var(--dim); font-weight: 700; }
.viewer-dl dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.viewer-photo { position: relative; touch-action: pan-y pinch-zoom; }
.viewer-photo img { transition: opacity 0.15s; }
.viewer-photo.is-loading img { opacity: 0; transition: none; }
.viewer-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(4, 6, 12, 0.78); border: 1px solid var(--line-strong); color: var(--text);
  transition: background-color 0.2s, border-color 0.2s;
}
.viewer-nav[hidden] { display: none; }
.viewer-nav--prev { left: 10px; }
.viewer-nav--next { right: 10px; }
.viewer-nav:hover { background: rgba(14, 24, 48, 0.9); border-color: rgba(130, 170, 255, 0.45); }
.viewer-nav .i { width: 22px; height: 22px; }
.viewer-hint { color: var(--dim); font-size: 0.82rem; margin-top: -6px; }
.viewer-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-top: 8px; border-top: 1px solid var(--line); }
.viewer-share .link-btn { font-size: 0.9rem; }
.viewer-count { color: var(--dim); font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.viewer-price { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.viewer-price small { font-family: var(--font-body); font-size: 0.9rem; color: var(--muted); }
@media (max-width: 700px) {
  .viewer { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .viewer-panel { grid-template-columns: minmax(0, 1fr); }
  .viewer-photo { padding: 56px 20px 20px; }
  .viewer-photo img { max-height: 44dvh; }
  .viewer-dl { order: 1; } /* details after the price and button, so both show without scrolling */
  .viewer-share { order: 2; }
  .viewer-nav--prev { left: 6px; }
  .viewer-nav--next { right: 6px; }
  .viewer-info { border-left: 0; border-top: 1px solid var(--line); padding: 20px 18px 22px; }
  .viewer-title { padding-right: 0; font-size: 1.3rem; }
}

/* ---------- A short confirmation ("Link copied.") ---------- */

.toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60;
  translate: -50% 12px; width: max-content; max-width: min(420px, 100% - 32px); margin: 0; padding: 12px 18px;
  border-radius: 24px; background: var(--yellow); color: var(--ink);
  font-size: 0.92rem; font-weight: 800; text-align: center;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s, translate 0.2s, visibility 0s 0.2s;
}
.toast.is-on { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity 0.2s, translate 0.2s; }

/* ---------- Motion preferences ---------- */

/* TEST-ONLY screenshot hook (?shot=1, see main.js): freeze entrance animations; view=cta hides what's above the CTA */
.is-shot .fan-item, .is-shot .card, .is-shot .front-fire { animation: none !important; }
.is-shot.has-reveal .card { opacity: 1; transform: none; }
.is-shot-cta main > :not(.cta) { display: none; }

.force-reduce { scroll-behavior: auto; }
.force-reduce *, .force-reduce *::before, .force-reduce *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}