/* ==========================================================================
   Relic Collectibles - the show pages, dealt as cards
   Loaded ONLY by /events/, /events/card-show and /events/collectibles-show.

   Everything here is namespaced .tcg-* and every token is prefixed --tcg-.
   Nothing in this file may restyle a shared class: the storefront, the
   portal and the blog all read assets/relic.css and must not move when this
   file changes.

   The lane: a real holo card in a top-loader on a glass counter. Beveled
   frame, title bar, art window, type line, rules box, set symbol. Steve's
   ruling 2026-09-02: the foil is a FULL rainbow holo, the way a Pokemon holo
   reads, not a polite sheen. The rainbow lives in three places - a foil ring
   round the card, a cosmos-holo art window with real sparkle, and a body
   foil that sweeps under the text - and it follows the pointer.

   All of the holo tokens (--holo-h1..h8, --holo-d1..d8, --holo-blend,
   --holo-a/b, --holo-spark-a/glare-a, --holo-veil, --holo-sparkle,
   --holo-gal-0/1/2) and the pointer-tracking machinery (--holo-mx/my/rx/ry,
   the .holo host class, .holo-tilt, @keyframes holo-wander, relic-holo.js)
   now live in assets/relic-holo.css and assets/relic-holo.js, loaded right
   after relic.css/relic.js on every public page - this file reads those
   tokens, it does not declare them. .tcg-card and .tcg-pack carry the extra
   classes "holo holo-tilt" / "holo" so they pick up that shared layer. The
   paper and clay ink stay; the holo is printed onto them, which is why
   body-foil blend modes are MULTIPLY on light paper and LIGHTEN on dark
   stock: neither can push ink past its contrast floor (see relic-holo.css).

   Colour identity, both verified at 4.5:1 or better on every text pair in
   both themes before shipping:
     Sports and TCG -> the brand clay (red dirt), gold in dark theme.
     Collectibles   -> verdigris, the patina on an old relic.
   ========================================================================== */

:root {
  /* Sports and TCG borrows the house accent so the pages stay Relic's. */
  --tcg-both:       var(--clay);
  --tcg-both-deep:  var(--clay-deep);
  --tcg-both-tint:  var(--clay-tint);
  --tcg-both-line:  var(--clay-line);

  /* Collectibles: verdigris. Its own hue so the two show types are told
     apart at a glance, never by colour alone (every card is labelled too). */
  --tcg-coll:       oklch(0.470 0.090 200);
  --tcg-coll-deep:  oklch(0.420 0.085 200);
  --tcg-coll-tint:  oklch(0.962 0.024 196);
  --tcg-coll-line:  oklch(0.880 0.048 198);

  /* Card stock and the printed frame. */
  --tcg-stock:      var(--paper);
  --tcg-stock-2:    var(--paper-2);
  --tcg-bevel:      oklch(1 0 0 / 0.75);
  --tcg-emboss:     oklch(0.19 0.014 58 / 0.10);

  /* The pack: the one drenched surface on these pages. It is dark in BOTH
     themes, so its accent cannot be the paper-facing clay -- clay on this
     ground measures 3.18:1 and fails. The pack gets the logo's gold, which
     measures 9.56:1, and the collectibles pack gets a lifted verdigris. */
  --tcg-pack-bg:      oklch(0.205 0.020 48);
  --tcg-pack-fg:      oklch(0.975 0.006 84);
  --tcg-pack-fg-2:    oklch(0.855 0.012 82);
  --tcg-pack-line:    oklch(1 0 0 / 0.16);
  --tcg-pack-accent:  oklch(0.800 0.128 86);
  --tcg-pack-accent-c: oklch(0.800 0.085 195);

  --tcg-card-r:     16px;
  --tcg-ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tcg-coll:       oklch(0.800 0.085 195);
    --tcg-coll-deep:  oklch(0.880 0.070 195);
    --tcg-coll-tint:  oklch(0.290 0.045 199);
    --tcg-coll-line:  oklch(0.430 0.060 197);
    --tcg-bevel:      oklch(1 0 0 / 0.07);
    --tcg-emboss:     oklch(0 0 0 / 0.45);
    --tcg-pack-bg:    oklch(0.145 0.014 62);
    --tcg-pack-line:  oklch(1 0 0 / 0.12);
  }
}
:root[data-theme="dark"] {
  --tcg-coll:       oklch(0.800 0.085 195);
  --tcg-coll-deep:  oklch(0.880 0.070 195);
  --tcg-coll-tint:  oklch(0.290 0.045 199);
  --tcg-coll-line:  oklch(0.430 0.060 197);
  --tcg-bevel:      oklch(1 0 0 / 0.07);
  --tcg-emboss:     oklch(0 0 0 / 0.45);
  --tcg-pack-bg:    oklch(0.145 0.014 62);
  --tcg-pack-line:  oklch(1 0 0 / 0.12);
}

/* Per-kind identity. Set once on any card or badge; every child reads it. */
.tcg-k-both { --tcg-id: var(--tcg-both); --tcg-id-deep: var(--tcg-both-deep);
              --tcg-id-tint: var(--tcg-both-tint); --tcg-id-line: var(--tcg-both-line); }
.tcg-k-coll { --tcg-id: var(--tcg-coll); --tcg-id-deep: var(--tcg-coll-deep);
              --tcg-id-tint: var(--tcg-coll-tint); --tcg-id-line: var(--tcg-coll-line); }
/* Tournament nights (2026-09-05): a third identity, violet, so a tournament
   card never reads as a show card. Same token shape as the two above. */
.tcg-k-tour { --tcg-tour: oklch(0.520 0.170 300); --tcg-tour-deep: oklch(0.450 0.160 300);
              --tcg-tour-tint: oklch(0.955 0.030 300); --tcg-tour-line: oklch(0.860 0.070 300);
              --tcg-id: var(--tcg-tour); --tcg-id-deep: var(--tcg-tour-deep);
              --tcg-id-tint: var(--tcg-tour-tint); --tcg-id-line: var(--tcg-tour-line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tcg-k-tour { --tcg-tour: oklch(0.800 0.110 300); --tcg-tour-deep: oklch(0.880 0.090 300);
              --tcg-tour-tint: oklch(0.290 0.060 300); --tcg-tour-line: oklch(0.430 0.080 300); }
}
:root[data-theme="dark"] .tcg-k-tour { --tcg-tour: oklch(0.800 0.110 300); --tcg-tour-deep: oklch(0.880 0.090 300);
              --tcg-tour-tint: oklch(0.290 0.060 300); --tcg-tour-line: oklch(0.430 0.080 300); }
.tcg-k-tour .tcg-art { --holo-gal-0: oklch(0.18 0.06 300); --holo-gal-1: oklch(0.44 0.16 300); --holo-gal-2: oklch(0.40 0.18 250); }
.tcg-k-tour .tcg-badge::before,
.tcg-badge.tcg-k-tour::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ==========================================================================
   The pack. Hero as a foil wrapper, crimped top and bottom, torn open.
   ========================================================================== */

.tcg-packwrap { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 5vw, 3.5rem); }

.tcg-pack {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--tcg-pack-bg);
  color: var(--tcg-pack-fg);
  padding: clamp(2rem, 5.5vw, 4.25rem) clamp(1.4rem, 4.5vw, 3.5rem);
  box-shadow: var(--shadow-2);
}

/* The crimped seal, top and bottom, the way a wrapper is heat-sealed. */
.tcg-pack::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(90deg,
      var(--tcg-pack-line) 0 1px, transparent 1px 9px) top    / 100% 14px no-repeat,
    repeating-linear-gradient(90deg,
      var(--tcg-pack-line) 0 1px, transparent 1px 9px) bottom / 100% 14px no-repeat;
}

/* The wrapper foil: deep rainbow bands and sparkle, following the pointer
   (relic-holo.js) or wandering on their own on a touch screen. LIGHTEN caps
   the bands at their own luminance, so the pack copy keeps its ratio. */
.tcg-pack::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(farthest-corner circle at var(--holo-pos), oklch(1 0 0 / 0.10), transparent 55%),
    var(--holo-sparkle) 0 0 / 200px 200px,
    var(--holo-bands-deep) var(--holo-pos) / 240% 240%;
  mix-blend-mode: lighten;
  opacity: 0.95;
}

.tcg-pack .tcg-eyebrow {
  font-size: var(--t--1); font-weight: 640; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--tcg-pack-accent);
}
.tcg-pack.tcg-k-coll .tcg-eyebrow { color: var(--tcg-pack-accent-c); }

.tcg-pack h1 {
  font-size: var(--t-5);
  letter-spacing: -0.048em;
  line-height: 0.98;
  max-width: 16ch;
  text-wrap: balance;
  margin-block: 0.75rem 1rem;
}
.tcg-pack .tcg-lede {
  font-size: var(--t-1); line-height: 1.45; letter-spacing: -0.015em;
  color: var(--tcg-pack-fg-2);
  max-width: 46ch;
}
.tcg-pack-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.9rem; }

/* Buttons on the pack ground. The house .btn tokens are paper-facing, so
   the two variants used here get their own values rather than an override
   that would follow .btn onto other pages. */
.tcg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  height: var(--control-h); padding: 0 1.7rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 640; letter-spacing: -0.012em;
  text-decoration: none; cursor: pointer;
  transition: transform var(--fast) var(--tcg-ease),
              background-color var(--fast) var(--tcg-ease),
              border-color var(--fast) var(--tcg-ease);
}
.tcg-btn:hover { transform: translateY(-1px); }
.tcg-btn:active { transform: translateY(0) scale(0.985); }
.tcg-btn-solid { background: var(--clay); color: #fff; }
:root[data-theme="dark"] .tcg-btn-solid { color: var(--on-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tcg-btn-solid { color: var(--on-accent); }
}
.tcg-btn-solid:hover { background: var(--clay-deep); }
.tcg-btn-line {
  background: transparent; color: var(--tcg-pack-fg);
  border-color: oklch(1 0 0 / 0.34);
}
.tcg-btn-line:hover { background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0 / 0.6); }

/* The countdown, stamped along the seal. Not a stat grid: one honest line. */
.tcg-clock {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--tcg-pack-line);
  color: var(--tcg-pack-fg-2);
  font-size: 0.98rem;
}
.tcg-clock-lab {
  font-size: var(--t--1); font-weight: 640; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--tcg-pack-fg-2);
}
.tcg-clock-val {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 680; letter-spacing: -0.02em;
  color: var(--tcg-pack-fg);
}
.tcg-clock-val span { font-size: 0.68em; font-weight: 560; color: var(--tcg-pack-fg-2); }
.tcg-clock-when { color: var(--tcg-pack-fg-2); }

/* Three cards fanned out of the torn pack. Decoration, hidden from AT.
   The box is given a real size and the cards are placed inside it with
   left/top: an unsized absolute box anchors its children at its right edge
   and they fan off-canvas, which reads as a stray sliver, not a fan. */
.tcg-fan {
  position: absolute; right: clamp(1.5rem, 3.5vw, 4rem); top: 50%;
  translate: 0 -50%;
  width: 20rem; height: 15.5rem;
  display: none;
  pointer-events: none;
}
/* Only once the pack is wide enough that the fan cannot reach the copy. */
@media (min-width: 1180px) { .tcg-fan { display: block; } }
.tcg-fan i {
  position: absolute; display: block;
  width: 9.5rem; height: 13.3rem;
  border-radius: 12px;
  background:
    var(--holo-sparkle) 0 0 / 110px 110px,
    var(--holo-bands-vivid) var(--holo-pos) / 300% 300%,
    radial-gradient(90% 110% at 20% 10%, var(--holo-gal-1), transparent 62%),
    var(--holo-gal-0);
  border: 3px solid oklch(0.96 0.12 100);
  box-shadow: 0 18px 40px oklch(0 0 0 / 0.45);
  opacity: 0.95;
}
.tcg-fan i:nth-child(1) { left: 0;      top: 1.1rem; rotate: -14deg; }
.tcg-fan i:nth-child(2) { left: 4.7rem; top: 0;      rotate:  -2deg; }
.tcg-fan i:nth-child(3) { left: 9.5rem; top: 1.3rem; rotate:  10deg; }

/* ==========================================================================
   The card
   ========================================================================== */

.tcg-hand {
  display: grid;
  gap: clamp(1.1rem, 2.6vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  margin: 0; padding: 0;
}
/* One card should not stretch to the full band on a wide screen. */
.tcg-hand-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* The pointer-host gradients (--holo-ang/pos/bands/bands-deep/bands-vivid/
   ring) are declared on the .holo host class itself in relic-holo.css -
   .tcg-card and .tcg-pack carry that class in the markup and read the
   result below via var(). */

.tcg-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--tcg-card-r);
  /* The 6px pad IS the foil ring. A common card wears it under a veil;
     the rare (next show) wears it bare, see below. */
  background:
    linear-gradient(var(--holo-veil), var(--holo-veil)),
    var(--holo-ring);
  border: 1px solid var(--tcg-emboss);
  padding: 6px;
  box-shadow: var(--shadow-1);
  transform: perspective(1100px);
  transition: transform var(--med) var(--tcg-ease),
              box-shadow var(--med) var(--tcg-ease);
  will-change: transform;
}
/* The printed bevel: a card is stock, a frame, then the art. */
.tcg-card-in {
  display: flex; flex-direction: column; flex: 1;
  border-radius: calc(var(--tcg-card-r) - 5px);
  background: var(--tcg-stock);
  border: 1px solid var(--tcg-bevel);
  box-shadow: inset 0 0 0 1px var(--tcg-emboss);
  padding: clamp(0.9rem, 2.2vw, 1.15rem);
  gap: 0.85rem;
  overflow: hidden;
}

/* No-JS and keyboard fallback for the tilt. With relic-holo.js live the
   transform is pointer-driven instead (see "Live" at the end of the file). */
.tcg-card:hover,
.tcg-card:focus-within {
  transform: perspective(1100px) rotateX(2.4deg) rotateY(-3.4deg) translateY(-7px) scale(1.012);
  box-shadow: var(--shadow-2);
}
@media (hover: none) {
  .tcg-card:hover { transform: perspective(1100px); box-shadow: var(--shadow-1); }
  .tcg-card:active { transform: perspective(1100px) rotateX(1.6deg) rotateY(-2deg) scale(0.99); }
}

/* Body foil: the rainbow printed into the stock, under the ink. */
.tcg-card::before {
  content: "";
  position: absolute; inset: 6px;
  z-index: 1;
  border-radius: calc(var(--tcg-card-r) - 5px);
  background: var(--holo-bands) var(--holo-pos) / 320% 320%;
  mix-blend-mode: var(--holo-blend);
  opacity: var(--holo-a);
  pointer-events: none;
  transition: opacity var(--med) var(--tcg-ease);
}
/* Sparkle and glare: the top-loader catching the light. Dark theme only
   by token; on white paper white specks are nothing but paint cost. */
.tcg-card::after {
  content: "";
  position: absolute; inset: 6px;
  z-index: 1;
  border-radius: calc(var(--tcg-card-r) - 5px);
  background:
    radial-gradient(farthest-corner circle at var(--holo-pos), oklch(1 0 0 / var(--holo-glare-a)), transparent 55%),
    var(--holo-sparkle) 0 0 / 160px 160px;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--med) var(--tcg-ease);
}
.tcg-card:hover::before,
.tcg-card:focus-within::before,
.tcg-card[data-holo-hover]::before { opacity: var(--holo-b); }
.tcg-card:hover::after,
.tcg-card:focus-within::after,
.tcg-card[data-holo-hover]::after { opacity: var(--holo-spark-a); }

/* The next show is the rare pull: bare ring, foil lit, and a glow. */
.tcg-card[data-rarity="rare"] { background: var(--holo-ring); }
.tcg-card[data-rarity="rare"]::before { opacity: var(--holo-b); }
.tcg-card[data-rarity="rare"]::after { opacity: calc(var(--holo-spark-a) * 0.6); }
.tcg-card[data-rarity="rare"],
.tcg-card[data-rarity="rare"]:hover {
  box-shadow: var(--shadow-2), 0 14px 44px oklch(0.62 0.20 305 / 0.28), 0 4px 18px oklch(0.84 0.13 205 / 0.22);
}

/* Title bar: the date is the card's name. */
.tcg-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
}
.tcg-name {
  font-size: clamp(1.2rem, 1.02rem + 0.7vw, 1.45rem);
  font-weight: 680; letter-spacing: -0.032em;
  line-height: 1.1;
}
.tcg-name a { text-decoration: none; }
.tcg-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--tcg-card-r); }
.tcg-year { display: block; font-size: 0.8rem; font-weight: 560; color: var(--ink-3); letter-spacing: 0; margin-top: 0.2rem; }

/* The cost corner. It carries the table price, and it says so out loud so
   nobody reads it as an admission fee. Admission is free and stays free. */
.tcg-cost {
  flex: none;
  display: grid; place-items: center; align-content: center;
  width: 3.35rem; height: 3.35rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--tcg-id-tint, var(--paper-2)), var(--tcg-id-tint, var(--paper-2))) padding-box,
    var(--holo-ring) border-box;
  border: 2px solid transparent;
  color: var(--tcg-id-deep, var(--ink));
  line-height: 1;
  text-align: center;
}
.tcg-cost b { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.03em; }
.tcg-cost small { font-size: 0.56rem; font-weight: 620; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 0.12rem; }

/* Art window: the cosmos holo. A galaxy ground, the vivid rainbow sweeping
   across it, sparkle on top, and a glare that follows the pointer. This is
   the one place the holo is loud, and nothing is written on it. */
.tcg-art {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: 9px;
  border: 1px solid oklch(1 0 0 / 0.28);
  background:
    radial-gradient(farthest-corner circle at var(--holo-pos), oklch(1 0 0 / 0.42), transparent 48%),
    var(--holo-sparkle) 0 0 / 120px 120px,
    var(--holo-bands-vivid) var(--holo-pos) / 300% 300%,
    radial-gradient(80% 110% at 18% 12%, var(--holo-gal-1), transparent 62%),
    radial-gradient(70% 100% at 84% 88%, var(--holo-gal-2), transparent 60%),
    var(--holo-gal-0);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.25), inset 0 0 34px oklch(0 0 0 / 0.35);
  display: grid; place-items: center;
  overflow: hidden;
}
.tcg-k-coll .tcg-art { --holo-gal-0: oklch(0.20 0.05 230); --holo-gal-1: oklch(0.46 0.13 200); --holo-gal-2: oklch(0.42 0.17 290); }
.tcg-art svg {
  width: clamp(2.4rem, 8vw, 3.1rem); height: auto;
  color: oklch(0.985 0.01 90);
  filter: drop-shadow(0 2px 10px oklch(0 0 0 / 0.55));
}

/* Type line: the strip under the art that says what the card is. */
.tcg-typeline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem;
  font-size: 0.86rem; font-weight: 620; color: var(--ink-2);
  letter-spacing: -0.005em;
}
.tcg-typeline .tcg-dot { color: var(--ink-3); }

.tcg-badge {
  display: inline-flex; align-items: center; gap: 0.34rem;
  padding: 0.24rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--tcg-id-tint, var(--paper-2));
  border: 1px solid var(--tcg-id-line, var(--line));
  color: var(--tcg-id-deep, var(--ink-2));
  font-size: 0.78rem; font-weight: 640; white-space: nowrap;
}
.tcg-badge::before {
  content: ""; width: 0.5rem; height: 0.5rem; flex: none;
  background: var(--tcg-id, var(--ink-3));
  /* Two shapes, so the type is never carried by colour alone. */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.tcg-k-coll .tcg-badge::before,
.tcg-badge.tcg-k-coll::before { clip-path: circle(50%); }

/* Rules box: the abilities. */
.tcg-abilities {
  display: grid; gap: 0.55rem;
  padding: 0.8rem 0.85rem;
  border-radius: 9px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  font-size: 0.92rem; color: var(--ink-2); line-height: 1.45;
  margin-top: auto;
}
.tcg-ability b { color: var(--ink); font-weight: 660; }
.tcg-flavor {
  padding-top: 0.55rem; margin-top: 0.1rem;
  border-top: 1px solid var(--line-soft);
  font-style: italic; font-size: 0.86rem; color: var(--ink-3);
}

/* The footer strip: set symbol, collector number. */
.tcg-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tcg-setmark { display: inline-flex; align-items: center; gap: 0.4rem; }
.tcg-setmark svg { width: 0.85rem; height: 0.85rem; color: var(--tcg-id, var(--ink-3)); }

/* ==========================================================================
   The two starter decks on the hub: one big card per show type
   ========================================================================== */

.tcg-card-lg .tcg-card-in { gap: 1.05rem; padding: clamp(1.1rem, 2.6vw, 1.5rem); }
.tcg-card-lg .tcg-name { font-size: var(--t-2); letter-spacing: -0.04em; }
.tcg-card-lg .tcg-art { aspect-ratio: 16 / 9; }
.tcg-card-lg .tcg-art svg { width: clamp(3rem, 10vw, 4.25rem); }

/* ==========================================================================
   The binder. Nine-pocket page, built by page-tcg.js from RELIC_SHOWS.
   The static <table> under it is what crawlers and no-JS visitors get.
   ========================================================================== */

.tcg-binder {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  padding: clamp(0.75rem, 2vw, 1.1rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) padding-box,
    repeating-linear-gradient(180deg,
      transparent 0 calc(50% - 1px), var(--line-soft) calc(50% - 1px) 50%, transparent 50%);
  list-style: none; margin: 0;
}
/* The three rings down the left edge, on a page wide enough to show them. */
@media (min-width: 720px) {
  .tcg-binder { padding-left: 2.4rem; position: relative; }
  .tcg-binder::before {
    content: ""; position: absolute; left: 1.05rem; top: 12%; bottom: 12%;
    width: 6px; border-radius: 3px;
    background:
      radial-gradient(circle at 50% 12%, var(--ink-3) 0 3px, transparent 3px),
      radial-gradient(circle at 50% 50%, var(--ink-3) 0 3px, transparent 3px),
      radial-gradient(circle at 50% 88%, var(--ink-3) 0 3px, transparent 3px);
    opacity: 0.5;
  }
}

.tcg-pocket {
  position: relative;
  display: flex; flex-direction: column; gap: 0.3rem;
  min-height: 7.5rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  /* the sleeve: a faint gloss over the pocket */
  box-shadow: inset 0 1px 0 var(--tcg-bevel);
  transition: transform var(--fast) var(--tcg-ease), border-color var(--fast) var(--tcg-ease);
}
.tcg-pocket:hover { transform: translateY(-2px); border-color: var(--tcg-id-line, var(--line)); }
.tcg-pocket-num {
  font-size: 0.66rem; font-weight: 660; letter-spacing: 0.08em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.tcg-pocket-date {
  font-size: 1.02rem; font-weight: 680; letter-spacing: -0.028em; color: var(--ink);
  line-height: 1.15;
}
.tcg-pocket-yr { font-size: 0.76rem; font-weight: 560; color: var(--ink-3); }
.tcg-pocket-kind {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-size: 0.74rem; font-weight: 620; color: var(--tcg-id-deep, var(--ink-2));
}
.tcg-pocket-kind::before {
  content: ""; width: 0.44rem; height: 0.44rem; flex: none;
  background: var(--tcg-id, var(--ink-3));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.tcg-pocket.tcg-k-coll .tcg-pocket-kind::before { clip-path: circle(50%); }

/* Collected: a show that has already happened. Dimmed, and stamped. */
.tcg-pocket[data-state="past"] { opacity: 0.55; background: var(--paper-2); }
.tcg-pocket[data-state="past"] .tcg-pocket-date { color: var(--ink-2); }
.tcg-pocket[data-state="past"]::after {
  content: "Collected";
  position: absolute; right: 0.6rem; top: 0.55rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.1rem 0.28rem;
  rotate: -8deg;
}
/* Next up: the pocket you actually care about. */
.tcg-pocket[data-state="next"] {
  --holo-mx: 50; --holo-my: 50;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    conic-gradient(from 200deg, oklch(0.75 0.18 25), oklch(0.92 0.17 100), oklch(0.84 0.12 205),
      oklch(0.66 0.21 305), oklch(0.75 0.18 25)) border-box;
  box-shadow: 0 6px 22px oklch(0.62 0.20 305 / 0.18);
}
.tcg-pocket[data-state="next"] .tcg-pocket-num { color: var(--tcg-id-deep); }

.tcg-binder-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.25rem;
  margin-top: 1.1rem;
}
.tcg-legend {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  font-size: 0.86rem; color: var(--ink-2);
}
.tcg-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tcg-legend i {
  width: 0.55rem; height: 0.55rem; display: block;
  background: var(--tcg-both);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.tcg-legend i.tcg-i-coll { background: var(--tcg-coll); clip-path: circle(50%); }

/* ==========================================================================
   Play this card: the table reservation action
   ========================================================================== */

.tcg-play {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--tcg-both-line);
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-1);
}
.tcg-play-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.tcg-play-head h3 { font-size: var(--t-1); letter-spacing: -0.03em; }
.tcg-play-head p { color: var(--ink-2); font-size: 0.95rem; margin-top: 0.4rem; }

.tcg-action {
  display: inline-flex; align-items: center; gap: 0.7rem;
  height: var(--control-h); padding: 0 0.6rem 0 1.5rem;
  border-radius: var(--r-pill);
  background: var(--clay); color: #fff;
  border: 0; cursor: pointer;
  font-size: 1rem; font-weight: 660; letter-spacing: -0.012em;
  transition: transform var(--fast) var(--tcg-ease), background-color var(--fast) var(--tcg-ease);
}
:root[data-theme="dark"] .tcg-action { color: var(--on-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tcg-action { color: var(--on-accent); }
}
.tcg-action:hover { background: var(--clay-deep); transform: translateY(-1px); }
.tcg-action:active { transform: translateY(0) scale(0.985); }
.tcg-action[data-busy="1"] { pointer-events: none; opacity: 0.6; }
/* The cost orb is a pseudo-element, not a child: page-vendor.js swaps the
   button's textContent while sending, and a child span would not survive it. */
.tcg-action[data-cost]::after {
  content: attr(data-cost);
  display: inline-grid; place-items: center;
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  background: oklch(1 0 0 / 0.22);
  font-size: 0.82rem; font-weight: 720; letter-spacing: -0.02em;
}
:root[data-theme="dark"] .tcg-action[data-cost]::after { background: oklch(0 0 0 / 0.18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tcg-action[data-cost]::after { background: oklch(0 0 0 / 0.18); }
}

/* ==========================================================================
   Focus, motion, and the small screen
   ========================================================================== */

.tcg-card:focus-within,
.tcg-pocket:focus-within { outline: 2px solid var(--tcg-id, var(--clay)); outline-offset: 3px; }
.tcg-name a:focus-visible,
.tcg-btn:focus-visible,
.tcg-action:focus-visible,
.tcg-disclose:focus-visible {
  outline: 2px solid var(--clay); outline-offset: 3px; border-radius: var(--r-pill);
}
.tcg-card:has(.tcg-name a:focus-visible) { outline: none; }

.tcg-disclose {
  display: inline-flex; align-items: center; gap: 0.45rem;
  height: var(--control-h-sm); padding: 0 1.15rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--fast) var(--tcg-ease), background-color var(--fast) var(--tcg-ease);
}
.tcg-disclose:hover { border-color: var(--ink-3); background: var(--paper-2); }

@media (prefers-reduced-motion: reduce) {
  .tcg-card, .tcg-pack { animation: none !important; }
  .tcg-card, .tcg-card::after, .tcg-pocket, .tcg-btn, .tcg-action { transition: none; }
  .tcg-card:hover, .tcg-card:focus-within, .tcg-card:active { transform: none; }
  .tcg-pocket:hover { transform: none; }
  .tcg-btn:hover, .tcg-action:hover { transform: none; }
}

@media (max-width: 30rem) {
  /* One column of cards, and a pocket grid that stays two wide at 390px
     rather than collapsing to a single tall ribbon. */
  .tcg-hand { grid-template-columns: minmax(0, 1fr); }
  .tcg-binder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .tcg-pocket { min-height: 6.75rem; padding: 0.6rem 0.62rem; }
  .tcg-pocket-date { font-size: 0.95rem; }
  .tcg-fan { display: none; }
  .tcg-pack { padding-inline: 1.15rem; }
  .tcg-pack-cta .tcg-btn { width: 100%; }
}

/* ==========================================================================
   Live: the pointer. relic-holo.js sets html[data-holo-live] on a fine
   pointer and writes --holo-mx/--holo-my (0-100) and --holo-rx/--holo-ry
   (the tilt) on whichever .holo element the pointer is over. The registered
   properties, the .holo host block, the .holo.holo-tilt transform/transition
   rules and @keyframes holo-wander all live in relic-holo.css now - .tcg-card
   and .tcg-pack carry classes "holo holo-tilt" / "holo" so they pick that up
   automatically, including the wander animation and its nth-child stagger.

   What stays here: .tcg-card's OWN foil pseudo-elements (::before/::after,
   declared above) are not .holo-foil - they are tighter to this card's
   6px-padding ring trick - so their touch-fallback "stay lit, there is no
   hover on a phone" pin has to stay local too. */
@media (hover: none) {
  .tcg-card::before { opacity: var(--holo-b); }
  .tcg-card::after { opacity: var(--holo-spark-a); }
}

/* The rarity star on the next show's collector number. */
.tcg-star { color: var(--clay); font-style: normal; font-size: 0.9rem; line-height: 0; vertical-align: -0.05em; margin-right: 0.15rem; }