/* Bill's Archive: shared top-10 components. Markup: render.py + SPEC.md.
   Scope: selectors start with .t10-*, custom properties are --t10-*; page tokens read with fallbacks.
   Accents: site purple + gold/silver/bronze (ranks 1-3) + electric yellow (TCGplayer button).
   Rarity colour only on the rarity pill. Scans never tinted at rest. Layout = container queries. */

/* ---------- 1. tokens ---------- */
.t10-entry, .t10-podium-wrap, .t10-table-wrap, .t10-note, .t10-missed, .t10-shelf-wrap {
  --t10-panel: var(--bg-secondary, #12121a);
  --t10-line: var(--border-color, #2a2a3a);
  --t10-tx: var(--text-primary, #f0f0f5);
  --t10-tx2: var(--text-secondary, #ccccdd);
  --t10-mu: var(--text-muted, #9e9eb8);
  --t10-acc: var(--accent-synergy, #9b6dff); /* site purple: the one accent */
  --t10-acc-hi: #c3aaff; /* the same purple, lightened for text */
  --t10-yel: var(--accent-electric, #ffe14d); /* TCGplayer button + focus ring */
  --t10-dm: 'DM Sans', system-ui, sans-serif;
  --t10-mono: 'Space Mono', ui-monospace, monospace;
  --t10-metal: var(--t10-acc-hi); /* tier colour; ranks 4+ = purple */
  --t10-g1: rgba(255,255,255,.05); /* glass fill */
  --t10-g2: rgba(255,255,255,.1); /* glass hairline */
}
/* medal metals: m1 highlight, m2 body, m3 shade; ink = text on the coin */
.t10-r1 { --t10-m1: #fff6cf; --t10-m2: #ffd75e; --t10-m3: #d99a14; --t10-metal: #ffd75e; --t10-ink: #2b1d00; }
.t10-r2 { --t10-m1: #ffffff; --t10-m2: #dfe4ee; --t10-m3: #9aa3b5; --t10-metal: #dfe4ee; --t10-ink: #161a24; }
.t10-r3 { --t10-m1: #ffe3c9; --t10-m2: #f0a468; --t10-m3: #c7773a; --t10-metal: #f0a468; --t10-ink: #2a1204; }

/* ---------- 2. primitives ---------- */
.t10-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* medal: rank as text ("#1"); metal coin 1-3, glass chip 4+ */
.t10-medal {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 2.35em; height: 2.35em; padding: 0 .55em; border-radius: 999px;
  font: 800 1rem/1 var(--t10-dm); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--t10-tx); background: var(--t10-g1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.t10-medal-h { font-size: max(10px, .72em); font-weight: 700; opacity: .75; margin-right: .06em; }
.t10-top3 .t10-medal {
  color: var(--t10-ink);
  background: linear-gradient(145deg, var(--t10-m1) 0%, var(--t10-m2) 24%, var(--t10-m3) 50%, var(--t10-m1) 64%, var(--t10-m3) 84%, var(--t10-m2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.35);
}
.t10-medal--sm { font-size: .8rem; }

/* estimate typography: superscript currency in the tier metal, muted decimals. Solid colours only. */
.t10-amt, .t10-amt2 {
  font-family: var(--t10-dm); font-variant-numeric: tabular-nums;
  color: var(--t10-tx); white-space: nowrap;
}
.t10-cur {
  position: relative; top: -.72em; margin-right: .08em;
  font-size: max(11px, .5em); font-weight: 700; letter-spacing: 0; color: var(--t10-metal);
}
.t10-dec { font-size: max(11px, .56em); font-weight: 700; letter-spacing: 0; color: var(--t10-mu); }

/* missing value: dashed n/a pill (+ .t10-sr "not available") */
.t10-na {
  display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 .55rem;
  border: 1px dashed rgba(255,255,255,.34); border-radius: 999px;
  font: 700 .75rem/1 var(--t10-dm); letter-spacing: .04em; text-transform: none; font-style: normal;
  color: var(--t10-mu); white-space: nowrap;
}

/* pills: rarity (family colour), language, era */
.t10-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.t10-rar, .t10-lang, .t10-era {
  display: inline-flex; align-items: center; min-height: 1.55rem; padding: .15rem .6rem; border-radius: 999px;
  font: 700 .6875rem/1.1 var(--t10-dm); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.t10-rar {
  --t10-fc: var(--t10-acc-hi); max-width: 100%; white-space: normal; /* wraps inside the pill at large text, never sticks out */
  color: var(--t10-fc);
  background: color-mix(in srgb, var(--t10-fc) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t10-fc) 40%, transparent);
}
.t10-rar.t10-fam-sir { --t10-fc: #dca4ff; }
.t10-rar.t10-fam-gold { --t10-fc: #ffd75e; }
.t10-rar.t10-fam-ultra { --t10-fc: #ff9a6e; }
.t10-rar.t10-fam-illus { --t10-fc: #6fe9df; }
.t10-rar.t10-fam-legend { --t10-fc: #ff8fbd; }
.t10-rar.t10-fam-secret { --t10-fc: #6ddc9a; }
.t10-rar.t10-fam-promo { --t10-fc: #b9a0ff; }
.t10-rar.t10-fam-holo { --t10-fc: #aec4ff; }
.t10-rar abbr { text-decoration: none; }
.t10-rar-s { display: none; }
/* JP: solid white chip, dark ink (neutral, stands apart from the glass era pill; no flag red) */
.t10-lang { color: #120d22; background: #f3f0fa; font-weight: 800; }
.t10-era { color: var(--t10-tx2); background: var(--t10-g1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

/* value bar: width = value / list max (ties are identical) */
.t10-bar, .t10-tbar { display: block; height: 5px; border-radius: 999px; background: rgba(255,255,255,.07); }
.t10-bar > span, .t10-tbar > span {
  display: block; height: 100%; width: calc(var(--t10-v, 0) * 100%); min-width: 4px; border-radius: inherit;
  background: var(--t10-acc);
}
.t10-top3 .t10-bar > span, .t10-top3 .t10-tbar > span { background: linear-gradient(90deg, var(--t10-m3), var(--t10-m2) 70%, var(--t10-m1)); }

/* ---------- 3. the scan: true colours at rest ---------- */
.t10-scan {
  position: relative; display: block; width: 100%; max-width: var(--t10-w, 100%); margin-inline: auto;
  border-radius: 4.6% / 3.3%; background: #0d0d14;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 20px 38px -22px #000;
}
.t10-scan--land { border-radius: 3.3% / 4.6%; }
.t10-scan img {
  display: block; width: 100%; height: auto; margin: 0; border-radius: inherit;
}
.t10-scan--noar img { aspect-ratio: 63 / 88; object-fit: contain; }
/* sheen: fine pointer + hover/focus only, one short sweep */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .t10-scan::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.13) 46%, rgba(255,255,255,.2) 50%,
      rgba(255,255,255,.13) 54%, transparent 68%) 110% 0 / 250% 100% no-repeat;
  }
  .t10-scan:hover::after, .t10-pod-a:focus-visible .t10-scan::after, .t10-tile-a:focus-visible .t10-scan::after {
    opacity: 1; background-position: -10% 0; transition: background-position .75s ease-out, opacity .2s;
  }
  /* ba-top10.js sets --t10-px/py (-1..1): gentle tilt */
  .t10-js .t10-scan {
    transform: perspective(900px) rotateX(calc(var(--t10-py, 0) * -5deg)) rotateY(calc(var(--t10-px, 0) * 7deg));
    transition: transform .6s cubic-bezier(.22, .9, .3, 1);
  }
  .t10-js .t10-scan.t10-live { transition-duration: .12s; }
}

/* ---------- 4. entry: article.t10-entry ---------- */
.t10-entry {
  display: block; container: t10e / inline-size; margin: 2.25rem 0;
  scroll-margin-top: var(--anchor-offset, 4.5rem);
}
/* narrow base (< 540px): head across, scan beside price, body below */
.t10-e {
  position: relative;
  display: grid; gap: .9rem 1rem; padding: 1.1rem; align-items: start;
  grid-template-columns: minmax(0, clamp(104px, 40%, 170px)) minmax(0, 1fr);
  grid-template-areas: "head head" "media price" "body body";
  border: 1px solid var(--t10-line); border-radius: 18px;
  background: radial-gradient(120% 70% at 0 0, rgba(155,109,255,.09), transparent 60%), var(--t10-panel);
  box-shadow: 0 30px 60px -44px rgba(0,0,0,.95);
}
.t10-e-head { grid-area: head; }
.t10-e-media { grid-area: media; }
.t10-e-price { grid-area: price; }
.t10-e-body { grid-area: body; }
.t10-e > * { min-width: 0; }
/* ranks 1-3: metal-tinted border + a metal lip inside the top edge */
.t10-top3 > .t10-e {
  border-color: color-mix(in srgb, var(--t10-metal) 34%, var(--t10-line));
  box-shadow: 0 26px 60px -48px var(--t10-metal), 0 30px 60px -44px rgba(0,0,0,.95);
}
.t10-top3 > .t10-e::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--t10-m2) 30%, var(--t10-m1) 50%, var(--t10-m2) 70%, transparent);
}
/* scan halo = box-shadow, never an overlay */
.t10-e-media .t10-scan { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 22px 40px -22px #000, 0 0 44px -16px var(--t10-metal); }
/* heading: out-specifies .article-body h2/h3 and main h2/h3 */
.t10-entry .t10-name {
  display: flex; align-items: center; gap: .7rem; margin: 0; padding: 0; border: 0; border-image: none;
  font: 800 clamp(1.15rem, .95rem + 1.5cqi, 1.55rem)/1.15 var(--t10-dm); letter-spacing: -.02em;
  color: var(--t10-tx);
}
.t10-entry .t10-name .t10-medal { font-size: clamp(.9rem, .8rem + .5cqi, 1.05rem); }
.t10-name-t { min-width: 0; overflow-wrap: break-word; }
.t10-entry .t10-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .5rem 0 0; padding: 0;
  font: 500 .82rem/1.45 var(--t10-dm); color: var(--t10-mu);
}
/* number as a tag: no separator to dangle when the line wraps */
.t10-entry .t10-num { padding: 0 .4rem; border-radius: 5px; background: var(--t10-g1); color: var(--t10-tx2); font-weight: 600; }

/* price block */
.t10-e-price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem 1.4rem; }
.t10-price { flex: 1 1 10rem; min-width: 0; }
.t10-price-k {
  display: block; margin-bottom: .45rem;
  font: 700 .6875rem/1.2 var(--t10-dm); letter-spacing: .12em; text-transform: uppercase; color: var(--t10-mu);
}
.t10-e-price .t10-amt { display: block; font-size: clamp(1.75rem, 1.3rem + 2.4cqi, 2.3rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.t10-top3 .t10-e-price .t10-amt { font-size: clamp(2rem, 1.4rem + 3.2cqi, 2.85rem); }
/* 1,000,000+ (render adds t10-long): one step down so it fits the narrow price column */
.t10-e-price .t10-amt.t10-long { font-size: clamp(1.45rem, 1.05rem + 2.4cqi, 2rem); }
.t10-top3 .t10-e-price .t10-amt.t10-long { font-size: clamp(1.7rem, 1.15rem + 3.2cqi, 2.45rem); }
.t10-alts { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin-top: .5rem; font: 600 .875rem/1.3 var(--t10-dm); color: var(--t10-tx2); font-variant-numeric: tabular-nums; }
.t10-alt-c { margin-right: .1rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; color: var(--t10-mu); } /* sourced alt: "USD $1,452.35" */
.t10-price .t10-bar { margin-top: .85rem; max-width: 22rem; }
/* extra prices (PSA 10, Raw ...) as slab tiles */
.t10-entry .t10-xps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.t10-xp {
  min-width: min(7rem, 100%); max-width: 100%; padding: .55rem .8rem .6rem; border-radius: 11px;
  background: var(--t10-g1); box-shadow: inset 0 0 0 1px var(--t10-g2);
}
.t10-entry .t10-xp dt { font: 700 .6875rem/1.3 var(--t10-dm); letter-spacing: .12em; text-transform: uppercase; color: var(--t10-mu); }
.t10-entry .t10-xp dd { margin: .3rem 0 0; }
.t10-xp .t10-amt2 { font-size: 1.2rem; font-weight: 800; line-height: 1.1; }

/* body: facts, moves (card text), prose, buttons */
.t10-e-body::before {
  content: ""; display: block; height: 1px; margin-bottom: 1.1rem;
  background: linear-gradient(90deg, var(--t10-acc), transparent 70%); opacity: .5;
}
.t10-entry .t10-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; }
.t10-fact {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; max-width: 100%; padding: .3rem .65rem; border-radius: 7px;
  background: var(--t10-g1); box-shadow: inset 0 0 0 1px var(--t10-g2); font-family: var(--t10-dm); line-height: 1.3;
}
.t10-entry .t10-fact dt { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t10-mu); }
.t10-entry .t10-fact dd { min-width: 0; margin: 0; font-size: .84rem; font-weight: 600; color: var(--t10-tx); overflow-wrap: anywhere; }
.t10-entry .t10-moves {
  list-style: none; margin: 0 0 1rem; padding: 0; border-radius: 13px;
  background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px var(--t10-g2);
}
.t10-entry .t10-move { margin: 0; padding: .75rem .95rem; }
.t10-entry .t10-move + .t10-move { border-top: 1px solid rgba(255,255,255,.06); }
.t10-move-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; font: 700 .92rem/1.3 var(--t10-dm); color: var(--t10-tx); }
.t10-move-k {
  align-self: center; padding: .3rem .45rem; border-radius: 4px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: var(--t10-acc-hi); background: color-mix(in srgb, var(--t10-acc) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t10-acc) 50%, transparent);
}
.t10-move-n { flex: 1 1 8rem; min-width: 0; }
.t10-move-d { margin-left: auto; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--t10-yel); white-space: nowrap; }
.t10-entry .t10-move-t { margin-top: .3rem; font: .78rem/1.65 var(--t10-mono); color: var(--t10-tx2); }
/* prose: Space Mono; links keep the page's own style */
.t10-entry .t10-prose { font: .86rem/1.78 var(--t10-mono); color: var(--t10-tx2); }
.t10-entry .t10-prose p { margin: 0 0 .85rem; font-size: inherit; line-height: inherit; color: inherit; }
.t10-entry .t10-prose > :last-child { margin-bottom: 0; }
/* buttons: out-specify "main a", ".article-body a(:hover)" */
.t10-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.t10-entry .t10-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 40px; padding: .55rem 1.1rem; border-radius: 10px;
  font: 700 .86rem/1.15 var(--t10-dm); text-decoration: none; opacity: 1;
}
.t10-entry .t10-btn--tcg { color: #17130a; background: var(--t10-yel); box-shadow: 0 10px 26px -14px var(--t10-yel); }
.t10-entry .t10-btn--ebay { color: var(--t10-tx); background: var(--t10-g1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.t10-entry .t10-btn:hover { opacity: 1; text-decoration: none; filter: brightness(1.08); }

@container t10e (max-width: 539.98px) {
  /* #1-#3 and landscape scans stack: head, big scan (~220px), price, body */
  .t10-top3 > .t10-e, .t10-entry--land > .t10-e {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "price" "body";
  }
  .t10-top3 .t10-e-media .t10-scan { width: min(100%, 220px); }
  /* brief 4+: scan left, name + price right */
  .t10-entry--brief.t10-rn > .t10-e {
    grid-template-areas: "media head" "media price" "media body"; grid-template-rows: auto auto 1fr;
  }
}
/* large text (rem query: 272px at a 16px root, 340px at 125%): 4+ stack like #1-#3, so name and price keep their width */
@container t10e (max-width: 17rem) {
  .t10-rn > .t10-e, .t10-entry--brief.t10-rn > .t10-e {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "price" "body"; grid-template-rows: none;
  }
  .t10-rn .t10-e-media .t10-scan { width: min(100%, 180px); }
}
@container t10e (max-width: 400px) {
  .t10-e { padding: 1rem .95rem; gap: .85rem .9rem; border-radius: 16px; }
}
/* rarity: short form (abbr with title) under 25rem, i.e. 400px at a 16px root and earlier with enlarged text */
@container t10e (max-width: 25rem) {
  .t10-rar-l { display: none; }
  .t10-rar-s { display: inline; }
}

/* wide (>= 540px): scan column left (sticky), everything else right */
@container t10e (min-width: 540px) {
  .t10-entry > .t10-e {
    grid-template-columns: clamp(170px, 28cqi, 224px) minmax(0, 1fr);
    grid-template-areas: "media head" "media price" "media body"; grid-template-rows: auto auto 1fr;
    gap: 1.05rem 1.6rem; padding: 1.5rem;
  }
  .t10-top3 > .t10-e { grid-template-columns: clamp(200px, 33cqi, 262px) minmax(0, 1fr); }
  .t10-entry--land > .t10-e { grid-template-columns: clamp(240px, 40cqi, 300px) minmax(0, 1fr); }
  .t10-e-media { position: sticky; top: calc(var(--anchor-offset, 4.5rem) + .5rem); align-self: start; }
}
/* brief (>= 660px): one balanced row, scan | name | price, centred on the scan */
@container t10e (min-width: 660px) {
  .t10-entry--brief > .t10-e {
    grid-template-columns: clamp(150px, 22cqi, 184px) minmax(0, 1fr) auto;
    grid-template-areas: "media . ." "media head price" "media body price" "media . .";
    grid-template-rows: 1fr auto auto 1fr; row-gap: .6rem; align-items: center;
  }
  .t10-entry--brief .t10-e-media { position: static; }
  .t10-entry--brief .t10-e-body { align-self: start; }
  .t10-entry--brief .t10-e-body::before { display: none; }
  .t10-entry--brief .t10-e-price { flex-direction: column; align-items: flex-end; text-align: right; padding-left: 1.4rem; border-left: 1px solid var(--t10-g2); }
  .t10-entry--brief .t10-price { flex: none; min-width: 10.5rem; }
  .t10-entry--brief .t10-price .t10-bar { margin-left: auto; }
  .t10-entry--brief .t10-xps { align-self: stretch; justify-content: flex-end; }
  .t10-entry--brief .t10-xp { flex: 1 1 7rem; }
  .t10-entry--brief .t10-alts { justify-content: flex-end; }
}

/* ---------- 5. podium: purple spotlight stage, places 2-1-3 ---------- */
.t10-podium-wrap { display: block; container: t10p / inline-size; margin: 2.5rem 0 2.75rem; }
.t10-pod-stage {
  position: relative; isolation: isolate;
  padding: clamp(1.1rem, 4cqi, 2.2rem) clamp(.6rem, 3.2cqi, 2.2rem) clamp(.9rem, 3cqi, 1.6rem);
  border-radius: 24px;
  background:
    radial-gradient(55% 60% at 50% -6%, rgba(155,109,255,.34), transparent 72%),
    conic-gradient(from 180deg at 50% -20%, transparent 164deg, rgba(195,170,255,.07) 172deg, transparent 180deg,
      rgba(255,255,255,.05) 188deg, transparent 196deg),
    radial-gradient(60% 30% at 50% 78%, rgba(155,109,255,.16), transparent 70%),
    linear-gradient(#100c1c, #0b0a12 62%, #0a0a0f);
  box-shadow: inset 0 0 0 1px var(--t10-g2), 0 40px 80px -60px rgba(155,109,255,.8);
}
/* basis caption from the data: "Top 3 · Market price · USD" */
.t10-podium-wrap .t10-pod-basis {
  display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 0 0 clamp(1rem, 4cqi, 2rem);
  font: 700 .6875rem/1.3 var(--t10-dm); letter-spacing: .16em; text-transform: uppercase; text-align: center; color: var(--t10-acc-hi);
}
.t10-pod-basis::before, .t10-pod-basis::after { content: ""; flex: 0 1 2.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--t10-acc)); }
.t10-pod-basis::after { transform: scaleX(-1); }
.t10-podium-wrap .t10-pod-list {
  display: grid; grid-template-columns: 1fr 1.16fr 1fr;
  column-gap: clamp(.45rem, 2.6cqi, 1.8rem); align-items: end; list-style: none; margin: 0; padding: 0;
}
.t10-pod { display: grid; grid-row: span 2; grid-template-rows: subgrid; margin: 0; padding: 0; min-width: 0; }
.t10-pod.t10-r2 { order: -1; } /* shows 2-1-3 */
.t10-podium-wrap .t10-pod-a {
  display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0;
  color: inherit; text-decoration: none; opacity: 1; border-radius: 16px;
}
.t10-podium-wrap .t10-pod-a:hover { opacity: 1; text-decoration: none; }
.t10-pod-card {
  position: relative; display: block; align-self: end; justify-self: center;
  width: min(100%, 168px); margin-bottom: 1.15rem; transition: transform .35s cubic-bezier(.22, .9, .3, 1);
}
.t10-pod.t10-r1 .t10-pod-card { width: min(100%, 222px); }
/* pool of medal light under the card */
.t10-pod-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1.1rem; height: 2.2rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--t10-metal), transparent); opacity: .45;
}
.t10-pod .t10-scan {
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 26px 50px -24px #000, 0 0 44px -14px var(--t10-metal);
  -webkit-box-reflect: below 2px linear-gradient(transparent 84%, rgba(255,255,255,.16)); /* optional floor mirror */
}
/* plinths: equal-height captions, metal lip, coin on the edge */
.t10-pod-cap {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1rem .6rem 1.1rem; border-radius: 4px 4px 14px 14px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--t10-metal);
}
.t10-pod.t10-r1 .t10-pod-cap { background: linear-gradient(180deg, rgba(255,215,94,.15), rgba(255,215,94,.03) 70%, transparent); }
.t10-pod-cap .t10-medal { font-size: clamp(.82rem, .7rem + .8cqi, 1rem); margin-top: -1.9em; }
.t10-pod-name { font: 700 clamp(.84rem, .72rem + .7cqi, 1rem)/1.25 var(--t10-dm); color: var(--t10-tx); overflow-wrap: anywhere; }
.t10-pod.t10-r1 .t10-pod-name { font-size: clamp(.9rem, .76rem + .9cqi, 1.12rem); font-weight: 800; }
.t10-pod-sub { font: .75rem/1.3 var(--t10-dm); color: var(--t10-mu); }
.t10-pod-price { margin-top: auto; padding-top: .3rem; }
.t10-pod-price .t10-amt { font-size: clamp(1.05rem, .8rem + 1.7cqi, 1.55rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.t10-pod.t10-r1 .t10-pod-price .t10-amt { font-size: clamp(1.2rem, .85rem + 2.4cqi, 1.95rem); }
.t10-pod .t10-pod-price .t10-amt.t10-long { font-size: clamp(.9rem, .66rem + 1.4cqi, 1.3rem); }
.t10-pod.t10-r1 .t10-pod-price .t10-amt.t10-long { font-size: clamp(1rem, .7rem + 2cqi, 1.6rem); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .t10-podium-wrap .t10-pod-a:hover .t10-pod-card { transform: translateY(-6px); }
}
@container t10p (max-width: 30rem) { /* 480px at a 16px root */
  .t10-pod-sub, .t10-pod .t10-rar { display: none; }
  .t10-pod-card { margin-bottom: .85rem; }
  .t10-pod-cap { padding: .85rem .3rem .8rem; gap: .3rem; }
}
/* < 360px (22.5rem): three compact scoreboard rows (thumb | medal | name | price) */
@container t10p (max-width: 22.49rem) {
  .t10-pod-stage { padding: .9rem .6rem .7rem; border-radius: 18px; }
  .t10-podium-wrap .t10-pod-basis { margin-bottom: .75rem; letter-spacing: .1em; }
  .t10-pod-basis::before, .t10-pod-basis::after { display: none; }
  .t10-podium-wrap .t10-pod-list { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; }
  .t10-podium-wrap .t10-pod { display: block; order: 0; }
  .t10-podium-wrap .t10-pod-a {
    display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: 2.9rem minmax(0, 1fr);
    align-items: center; gap: .7rem; padding: .45rem .7rem .45rem .45rem; border-radius: 12px;
    background: var(--t10-g1); box-shadow: inset 0 0 0 1px var(--t10-g2), inset 3px 0 0 var(--t10-metal);
  }
  .t10-podium-wrap .t10-pod .t10-pod-card { width: 100%; margin: 0; }
  .t10-pod-card::after { display: none; }
  .t10-pod .t10-scan { -webkit-box-reflect: unset; box-shadow: 0 0 0 1px var(--t10-g2); }
  /* flex-wrap, like the restacked table: the name claims >= 6rem, else the price drops to its own
     right-aligned line (a 3-column grid split "Umbreo|n Holo" at 125% text on a 390px phone) */
  .t10-podium-wrap .t10-pod .t10-pod-cap {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .15rem .55rem;
    padding: 0; background: none; box-shadow: none; text-align: left;
  }
  .t10-pod-cap .t10-medal { margin-top: 0; font-size: .82rem; }
  .t10-podium-wrap .t10-pod-name { flex: 1 1 6rem; min-width: 0; font-size: .9rem; font-weight: 700; }
  .t10-podium-wrap .t10-pod-price { margin: 0 0 0 auto; padding: 0; }
  .t10-podium-wrap .t10-pod .t10-pod-price .t10-amt { font-size: 1.1rem; }
  .t10-podium-wrap .t10-pod .t10-pod-price .t10-amt.t10-long { font-size: .95rem; }
}
/* large text (17rem = 272px at a 16px root): medal, name and price stack beside the thumb */
@container t10p (max-width: 17rem) {
  .t10-podium-wrap .t10-pod .t10-pod-cap { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .t10-podium-wrap .t10-pod-cap > * { flex: none; max-width: 100%; margin-left: 0; } /* overflow-wrap:anywhere (base rule) keeps a long single word inside */
}
/* extreme squeeze (10.25rem: 150% text on a 280px phone, 200% text on phones or beside the desktop rail):
   the thumb sits above the caption, so names and prices get the whole row instead of splitting mid-word */
@container t10p (max-width: 10.25rem) {
  .t10-podium-wrap .t10-pod-a { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .t10-podium-wrap .t10-pod .t10-pod-card { width: 2.9rem; justify-self: start; }
}

/* ---------- 6. quick-reference table ---------- */
.t10-table-wrap { display: block; container: t10t / inline-size; margin: 1.4rem 0 2.4rem; }
.t10-tscroll {
  overflow-x: auto; border-radius: 16px;
  background: var(--t10-panel); box-shadow: inset 0 0 0 1px var(--t10-line);
}
.t10-table {
  width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; background: none;
  font: .86rem/1.35 var(--t10-dm); font-variant-numeric: tabular-nums; color: var(--t10-tx2);
}
.t10-table th, .t10-table td { padding: .7rem .6rem; text-align: left; vertical-align: middle; border: 0; background: none; }
.t10-table thead th {
  padding-block: .8rem .7rem; white-space: nowrap; vertical-align: bottom;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t10-mu);
  border-bottom: 1px solid var(--t10-line); background: rgba(155,109,255,.08);
}
.t10-table tbody tr + tr > * { border-top: 1px solid var(--t10-g1); }
.t10-table .t10-c-rank { width: 1%; padding-right: .15rem; white-space: nowrap; }
.t10-table tbody .t10-c-name { min-width: 7rem; font-weight: 700; color: var(--t10-tx); }
.t10-table .t10-c-num { text-align: right; white-space: nowrap; }
.t10-table tbody .t10-c-num { font-weight: 600; }
.t10-table tbody .t10-c-main { font-size: .95rem; font-weight: 800; color: var(--t10-tx); }
.t10-table tbody .t10-top3 > :first-child { box-shadow: inset 3px 0 0 var(--t10-metal); }
.t10-table :is(.rarity-tag, .era-pill) { font-size: .6875rem; } /* page-supplied pills: never < 11px */
:where(.t10-table .era-pill) {
  display: inline-block; padding: .2rem .55rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  font-weight: 700; line-height: 1.2; letter-spacing: .04em; white-space: nowrap; color: var(--t10-tx2); background: var(--t10-g1);
}
/* name link: >= 24px target; beats main a / .article-body a(:hover) */
.t10-table .t10-tlink { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-decoration: none; opacity: 1; }
.t10-table .t10-tlink:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--t10-acc); text-underline-offset: 3px; }
.t10-table .t10-tbar { height: 3px; margin-top: .3rem; max-width: 9rem; }
/* optional footnote (tbl["note_html"]): inside the wrap so an ad never splits table and note */
.t10-table-wrap .t10-table-note { margin: .65rem .35rem 0; font: italic .78rem/1.6 var(--t10-dm); color: var(--t10-mu); }
@container t10t (width >= 27.5rem) { /* 440px at a 16px root */
  .t10-table :is(th, td):first-child { padding-left: .85rem; }
  .t10-table :is(th, td):last-child { padding-right: .85rem; }
}
/* 6+ columns (--wide): tighter type so they still fit 440px (27.5rem) */
@container t10t (width < 40rem) { /* 640px at a 16px root */
  .t10-table-wrap--wide .t10-table { font-size: .8rem; }
  .t10-table-wrap--wide :is(th, td) { padding-inline: .4rem; }
  .t10-table-wrap--wide thead th { white-space: normal; letter-spacing: .06em; }
  .t10-table-wrap--wide tbody .t10-c-name { min-width: 5.5rem; }
  .t10-table-wrap--wide tbody .t10-c-main { font-size: .86rem; }
}
/* < 27.5rem (440px): rows restack. Line 1 = medal | name | primary price (never off-screen);
   line 2+ = the other cells as labelled chips (data-label), full width, wrapping freely. */
@container t10t (width < 27.5rem) { /* 440px at a 16px root; earlier with enlarged text, so the primary price never starts off-screen */
  .t10-table, .t10-table thead, .t10-table tbody { display: block; }
  .t10-table tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; padding: .55rem .75rem .65rem; }
  .t10-table tr > * { display: block; padding: 0; border: 0; }
  .t10-table tbody tr + tr { border-top: 1px solid var(--t10-g1); }
  .t10-table tbody tr + tr > * { border-top: 0; }
  .t10-table thead tr { padding-block: .7rem .55rem; border-bottom: 1px solid var(--t10-line); background: rgba(155,109,255,.08); }
  .t10-table thead th { padding: 0; border: 0; background: none; white-space: normal; }
  .t10-table thead th:not(.t10-c-rank, .t10-c-name, .t10-c-main) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .t10-table .t10-c-rank { min-width: 2.35rem; width: auto; }
  /* the name claims >= 6rem before the price; at large text the price wraps to its own right-aligned line
     instead of squeezing the name into mid-word breaks (flex: 1 1 0 split "Morpek|o ex" at 150%).
     overflow-wrap:anywhere only splits a single word longer than the whole row (never real names). */
  .t10-table tr > .t10-c-name { order: 1; flex: 1 1 6rem; min-width: 0; overflow-wrap: anywhere; }
  .t10-table .t10-c-main { order: 2; flex: none; margin-left: auto; text-align: right; }
  .t10-table tbody tr::after { content: ""; order: 3; flex: 0 0 100%; }
  .t10-table tbody td:not(.t10-c-rank, .t10-c-main) {
    order: 4; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; max-width: 100%;
    margin: .35rem .35rem 0 0; padding: .1rem .45rem; border-radius: 6px; background: var(--t10-g1);
    font-size: .8rem; font-weight: 600; color: var(--t10-tx2); text-align: left; white-space: normal;
  }
  .t10-table tbody td:not(.t10-c-rank, .t10-c-main)::before {
    content: attr(data-label); content: attr(data-label) / ""; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t10-mu);
  }
  .t10-table tbody .t10-top3 > :first-child { box-shadow: none; }
  .t10-table tbody .t10-top3 { box-shadow: inset 3px 0 0 var(--t10-metal); }
  .t10-table .t10-tbar { max-width: 7rem; }
}

/* ---------- 7. price-source note + just missed the cut ---------- */
.t10-note {
  display: block; position: relative; margin: 1.8rem 0; padding: 1rem 1.25rem 1.05rem 3.2rem; border-radius: 16px;
  background: linear-gradient(120deg, rgba(155,109,255,.09), transparent 60%), var(--t10-panel);
  box-shadow: inset 0 0 0 1px rgba(155,109,255,.22);
}
.t10-note-i {
  position: absolute; left: 1.05rem; top: 1.1rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--t10-acc-hi);
}
.t10-note-i::before { content: "i"; font: 800 .8rem/1 var(--t10-dm); color: var(--t10-acc-hi); }
.t10-note .t10-note-body { overflow-wrap: break-word; }
.t10-note .t10-note-body p { margin: 0 0 .55rem; font-size: .86rem; line-height: 1.72; color: var(--t10-tx2); }
.t10-note .t10-note-body > :last-child { margin-bottom: 0; }

.t10-missed { display: block; container: t10m / inline-size; margin: 1.1rem 0 2.2rem; }
.t10-missed-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@container t10m (min-width: 560px) { .t10-missed-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t10-missed .t10-missed-in > * {
  margin: 0; padding: 1.05rem 1.15rem 1.1rem; border-radius: 16px;
  font-size: .84rem; line-height: 1.72; color: var(--t10-tx2);
  background: var(--t10-panel); box-shadow: inset 0 0 0 1px var(--t10-line);
}
.t10-missed .t10-missed-in > p > strong:first-child {
  display: block; margin-bottom: .4rem; font: 700 .98rem/1.35 var(--t10-dm); color: var(--t10-tx);
}
/* "View on TCGplayer" text link at the end of a just-missed card (same look as the Chaos Rising page's own rule) */
.t10-missed .t10-missed-in a.tcg-link {
  color: var(--t10-yel); font-family: var(--t10-dm); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.t10-missed .t10-missed-in a.tcg-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* a lead-in sentence with no bold card title is intro text, not a card: full width, no panel */
.t10-missed .t10-missed-in > p:not(:has(> strong:first-child)) {
  grid-column: 1 / -1; padding: 0 .1rem; background: none; box-shadow: none;
}

/* ---------- 8. shelf (ranks 11+) ---------- */
.t10-shelf-wrap { display: block; container: t10s / inline-size; margin: 2rem 0 2.4rem; }
.t10-shelf-wrap .t10-shelf {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0;
}
@container t10s (min-width: 460px) { .t10-shelf-wrap .t10-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; } }
.t10-tile { margin: 0; padding: 0; min-width: 0; }
.t10-shelf-wrap .t10-tile-a {
  display: flex; flex-direction: column; gap: .65rem; height: 100%; padding: .7rem .7rem .8rem; border-radius: 14px;
  color: inherit; text-decoration: none; opacity: 1;
  background: var(--t10-panel); box-shadow: inset 0 0 0 1px var(--t10-line); transition: transform .3s cubic-bezier(.22, .9, .3, 1);
}
.t10-shelf-wrap .t10-tile-a:hover { opacity: 1; text-decoration: none; }
.t10-tile-card { display: grid; place-items: center; width: 100%; max-width: 190px; margin: 0 auto; aspect-ratio: 63 / 88; }
.t10-tile-cap { display: flex; flex-direction: column; gap: .25rem; min-width: 0; font-family: var(--t10-dm); }
.t10-tile-cap .t10-medal { align-self: flex-start; margin-bottom: .15rem; }
.t10-tile-name { font-size: .88rem; font-weight: 700; line-height: 1.25; color: var(--t10-tx); overflow-wrap: anywhere; }
.t10-tile-set { font-size: .75rem; line-height: 1.35; color: var(--t10-mu); }
.t10-tile-val { margin-top: auto; padding-top: .2rem; font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--t10-tx); }

/* ---------- 9. focus, pointer, motion ---------- */
.t10-entry .t10-btn:focus-visible, .t10-podium-wrap .t10-pod-a:focus-visible, .t10-table .t10-tlink:focus-visible,
.t10-tscroll:focus-visible, .t10-shelf-wrap .t10-tile-a:focus-visible { outline: 2px solid var(--t10-yel); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .t10-shelf-wrap .t10-tile-a:hover { transform: translateY(-4px); }
}
@media (pointer: coarse) {
  .t10-entry .t10-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .t10-scan, .t10-pod-card, .t10-shelf-wrap .t10-tile-a { transition: none; transform: none; }
}