@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --crd-bg: radial-gradient(circle at top left, #1c1d29 0%, #09090f 65%, #050507 100%);
  --crd-card: rgba(18, 19, 29, 0.88);
  --crd-card-soft: rgba(18, 19, 29, 0.65);
  --crd-border: rgba(255, 255, 255, 0.08);
  --crd-border-strong: rgba(255, 255, 255, 0.14);
  --crd-text: rgba(244, 245, 255, 0.92);
  --crd-muted: rgba(244, 245, 255, 0.66);
  --crd-faint: rgba(244, 245, 255, 0.38);
  --crd-accent-from: #be6ef1;
  --crd-accent-to: #8fb2e8;
  --crd-accent-hover-from: #c884f4;
  --crd-accent-hover-to: #9dc4f5;
  --crd-glow: 0 24px 60px rgba(143, 178, 232, 0.18);

  --crd-cyan: #4de4f8;
  --crd-blue: #40b7fa;
  --crd-pink: #f23b97;
  --crd-orange: #ff891c;

  /* Signal colours. Green reads "sealed costs less than the parts", pink the reverse.
     --ok matches the green already used in find/styles.css. */
  --ok: #65d39b;
  --warn: var(--crd-pink);

  --rail: 300px;
  --gutter: clamp(20px, 4vw, 56px);
  --measure: 62ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  /* The decorative orbs are deliberately larger than the viewport and sit outside it.
     `clip` contains them without creating a scroll container, which `hidden` would do,
     and which would break the sticky rail on the product page. */
  overflow-x: clip;
  color: var(--crd-text);
  background: var(--crd-bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

@media (hover: none) and (pointer: coarse) {
  body { background-attachment: scroll; }
}

a { color: inherit; }

/* ── Background orbs ─────────────────────────────────────── */

.bg-orb {
  position: fixed;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(90px);
  z-index: 0;
}

.orb-a {
  width: 420px; height: 420px;
  top: -160px; left: -120px;
  background: rgba(190, 110, 241, 0.24);
}

.orb-b {
  width: 460px; height: 460px;
  right: -180px; bottom: -200px;
  background: rgba(143, 178, 232, 0.15);
}

/* ── Shell ───────────────────────────────────────────────── */

.topbar, .shell, .site-footer { position: relative; z-index: 1; }

.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}

/* ── Topbar ──────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-crd {
  font-family: "Hyperspace Race", "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, var(--crd-accent-from), var(--crd-accent-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wordmark-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crd-faint);
}

.game-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.game-tab {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--crd-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.game-tab:hover:not(:disabled) {
  color: var(--crd-text);
  background: rgba(255, 255, 255, 0.05);
}

.game-tab[aria-selected="true"] {
  color: var(--crd-text);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--crd-border-strong);
}

.game-tab:disabled { color: var(--crd-faint); cursor: not-allowed; }

.game-tab .soon {
  margin-left: 7px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crd-cyan);
  opacity: 0.8;
}

/* ── Editorial section label ─────────────────────────────── */

.rule-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crd-faint);
}

.rule-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--crd-border-strong), transparent);
}

/* ── Intro ───────────────────────────────────────────────── */

.intro { padding: 32px 0 44px; max-width: var(--measure); }

.intro h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.intro h1 em {
  font-style: normal;
  background-image: linear-gradient(120deg, var(--crd-accent-from), var(--crd-accent-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intro p { margin: 0; color: var(--crd-muted); font-size: 16px; }

/* ── Numerals ────────────────────────────────────────────── */

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Cents sit back so the dollars carry the scan. */
.num .cents { font-size: 0.76em; opacity: 0.55; }
.num .dash { color: var(--crd-faint); }

/* ── Ledger (index product list) ─────────────────────────── */

.ledger { display: flex; flex-direction: column; }

.ledger-head,
.ledger-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 112px 132px 132px 108px;
  align-items: center;
  gap: 20px;
}

.ledger-head {
  padding: 0 16px 8px;
  border-bottom: 1px solid var(--crd-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crd-faint);
}

/* ── Sorting ─────────────────────────────────────────────── */

.section-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.section-bar .rule-label { flex: 1; }

/* The header buttons are the sort control on desktop; this select takes over once they
   are hidden. */
.sort-control { display: none; align-items: center; gap: 8px; margin-bottom: 18px; }

.sort-control label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crd-faint);
}

.sort-control select { width: auto; padding: 7px 10px; font-size: 13px; }

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin: 0 -6px;
  border: none;
  border-radius: 7px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.sort-btn:hover { color: var(--crd-text); background: rgba(255, 255, 255, 0.06); }
.sort-btn:focus-visible { outline: 2px solid var(--crd-accent-from); outline-offset: 1px; }
.sort-btn.is-active { color: var(--crd-text); }

/* Right-aligned columns put the caret on the left so the labels stay flush to the edge. */
.ledger-head .r .sort-btn { flex-direction: row-reverse; }

.sort-caret {
  width: 9px;
  height: 6px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.sort-btn:hover .sort-caret { opacity: 0.45; }
.sort-caret.is-on { opacity: 1; color: var(--crd-accent-from); }
.sort-caret.up { transform: rotate(180deg); }

.ledger-date { font-size: 13px; color: var(--crd-muted); }

/* Shown only when the Released column is hidden. */
.meta-date { display: none; }

.ledger-head .r,
.ledger-row .r { text-align: right; }

/* Long product names must wrap rather than widen the grid track. */
.ledger-row > * { min-width: 0; }
.ledger-name, .ledger-meta { display: block; overflow-wrap: anywhere; }

.ledger-row {
  padding: 16px;
  border-bottom: 1px solid var(--crd-border);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}

.ledger-row:hover { background: rgba(255, 255, 255, 0.035); }

.ledger-row:focus-visible {
  outline: 2px solid var(--crd-accent-from);
  outline-offset: -2px;
}

.ledger-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--crd-border);
  background: var(--crd-card-soft);
  object-fit: cover;
}

.ledger-name { font-weight: 700; font-size: 15px; }

.ledger-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--crd-faint);
}

.ledger-price { font-size: 17px; font-weight: 700; }

.ledger-verdict { font-size: 17px; font-weight: 800; }

/* Direction is carried by a word, not a +/− sign, which reads as profit-and-loss. */
.spread-value { display: block; }

.spread-word {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crd-faint);
}

.breakdown tfoot .spread-subject,
.breakdown tfoot .spread-value,
.breakdown tfoot .spread-word { display: inline; }
.breakdown tfoot .spread-word { margin-left: 5px; }

/* Names what the percentage is about, since it sits beside the contents total rather
   than beside the sealed price it describes. */
.spread-subject {
  margin-right: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crd-faint);
}

/* ── Signal colours ──────────────────────────────────────── */

.is-discount { color: var(--ok); }
.is-premium { color: var(--warn); }
.is-even { color: var(--crd-muted); }

/* ── Badges ──────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-market { background: rgba(143, 178, 232, 0.18); color: var(--crd-accent-to); border: 1px solid rgba(143, 178, 232, 0.3); }
.badge-lowest { background: rgba(255, 137, 28, 0.16); color: var(--crd-orange); border: 1px solid rgba(255, 137, 28, 0.28); }
.badge-none   { background: rgba(255, 255, 255, 0.06); color: var(--crd-faint); border: 1px solid var(--crd-border); }
.badge-purple { background: rgba(190, 110, 241, 0.18); color: var(--crd-accent-from); border: 1px solid rgba(190, 110, 241, 0.3); }
.badge-cyan   { background: rgba(77, 228, 248, 0.16); color: var(--crd-cyan); border: 1px solid rgba(77, 228, 248, 0.28); }

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: none;
  border-radius: 14px;
  background-image: linear-gradient(120deg, var(--crd-accent-from), var(--crd-accent-to));
  color: #050507;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, box-shadow 0.15s;
}

.btn:hover { filter: brightness(1.08); box-shadow: 0 6px 24px rgba(190, 110, 241, 0.32); }
.btn:focus-visible { outline: 2px solid var(--crd-accent-to); outline-offset: 3px; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  background-image: none;
  border: 1px solid var(--crd-border);
  color: var(--crd-text);
  font-weight: 700;
}

.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); box-shadow: none; }

/* ── Inputs ──────────────────────────────────────────────── */

.input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--crd-border);
  border-radius: 10px;
  background: var(--crd-card-soft);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  color: var(--crd-text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder { color: var(--crd-muted); }

.input:focus {
  border-color: var(--crd-accent-from);
  box-shadow: 0 0 0 3px rgba(190, 110, 241, 0.2);
}

/* The native dropdown list is drawn by the OS, so its options need a colour that is not
   the page's near-black on near-black. */
select.input option { background: #12131d; color: var(--crd-text); }

/* ── Product page layout ─────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 0 20px;
  font-size: 13px;
  color: var(--crd-faint);
}

.breadcrumb a { color: var(--crd-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--crd-text); }

.product-layout {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* Grid items default to min-width:auto, which lets the table's intrinsic width push the
   column (and the whole page) wider than the viewport. Allowing them to shrink is what
   lets .table-scroll actually do its job. */
.product-layout > * { min-width: 0; }

.rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; }

.rail-art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  border: 1px solid var(--crd-border);
  background: var(--crd-card-soft);
  object-fit: cover;
}

.rail h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.rail-set { margin: 6px 0 0; font-size: 13px; color: var(--crd-faint); }

.rail-facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 4px 0 0;
  border-top: 1px solid var(--crd-border);
}

.rail-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--crd-border);
  font-size: 13px;
}

.rail-facts dt { color: var(--crd-faint); }
.rail-facts dd { margin: 0; font-weight: 700; }

/* ── Verdict module ──────────────────────────────────────── */

.verdict {
  padding: 30px;
  border: 1px solid var(--crd-border);
  border-radius: 24px;
  background: var(--crd-card);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: var(--crd-glow);
}

/* Sized to hold the longest realistic headline ("Sealed is 100% cheaper than the
   parts.") on one line at the container's width. */
.verdict-headline {
  margin: 0 0 26px;
  font-size: clamp(21px, 3.1vw, 35px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 56px;
  padding-top: 22px;
  border-top: 1px solid var(--crd-border);
}

.figure { display: flex; flex-direction: column; gap: 2px; }

.figure-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crd-faint);
}

.figure-value { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.figure-value.sealed-side { color: var(--crd-accent-from); }

/* ── Breakdown table ─────────────────────────────────────── */

/* Wide content scrolls inside its own container so the page body never does. */
.table-scroll { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.breakdown { width: 100%; border-collapse: collapse; }

.breakdown caption { text-align: left; }

.breakdown th {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--crd-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crd-faint);
  text-align: left;
}

.breakdown th.r, .breakdown td.r { text-align: right; }

.breakdown td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--crd-border);
  vertical-align: middle;
}

.breakdown tbody tr { transition: background 0.15s; }
.breakdown tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* Two rows: the contents total (which is what the share column sums to), then the sealed
   price with the spread beside it. The spread sits next to the sealed price because that
   is the figure it describes. */
.breakdown tfoot td {
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: none;
  font-weight: 800;
  font-size: 17px;
}

.breakdown tfoot tr:first-child td { padding-top: 18px; }

.item { display: flex; align-items: center; gap: 13px; min-width: 0; }

/* Name and collector number are separate lines. Both are spans, so without an explicit
   block they flow inline and the number ends up beside the name. */
.item-name, .item-sub { display: block; }

.item-name { font-weight: 700; line-height: 1.3; }
.item-name a { text-decoration: none; }
.item-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.item-sub { font-size: 12px; line-height: 1.3; color: var(--crd-faint); }

/* Component tiles. TCGplayer has no artwork for most promo singles, so the tile is
   built from the card's own data, its collector number tinted by card colour,
   rather than a grey placeholder box. */
.tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  border: 1px solid var(--crd-border-strong);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--crd-text);
  text-align: center;
  overflow: hidden;
}

.tile img { width: 100%; height: 100%; object-fit: cover; }

.tile[data-color="Red"]    { background: linear-gradient(140deg, rgba(242,59,151,0.28), rgba(242,59,151,0.06)); }
.tile[data-color="Green"]  { background: linear-gradient(140deg, rgba(101,211,155,0.28), rgba(101,211,155,0.06)); }
.tile[data-color="Blue"]   { background: linear-gradient(140deg, rgba(64,183,250,0.28), rgba(64,183,250,0.06)); }
.tile[data-color="Purple"] { background: linear-gradient(140deg, rgba(190,110,241,0.28), rgba(190,110,241,0.06)); }
.tile[data-color="Black"]  { background: linear-gradient(140deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03)); }
.tile[data-color="Yellow"] { background: linear-gradient(140deg, rgba(255,137,28,0.28), rgba(255,137,28,0.06)); }

.qty { color: var(--crd-muted); font-weight: 700; }
.qty-1 { color: var(--crd-faint); font-weight: 400; }

/* Share bar sits inside the row so weight-of-value reads without a separate chart. */
.share {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.share-bar {
  width: 74px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.share-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--crd-accent-from), var(--crd-accent-to));
}

.share-pct { font-size: 12px; color: var(--crd-muted); min-width: 38px; text-align: right; }

/* ── Chart ───────────────────────────────────────────────── */

.chart-wrap { position: relative; }

.chart { display: block; width: 100%; height: auto; overflow: visible; }

.chart-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 40px 28px;
  border: 1px dashed var(--crd-border-strong);
  border-radius: 18px;
  color: var(--crd-muted);
  font-size: 14px;
  text-align: center;
}

.chart-empty strong { color: var(--crd-text); font-size: 15px; }

.chart-legend {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--crd-muted);
}

.chart-legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 7px;
  border-radius: 2px;
  vertical-align: middle;
}

/* ── Notes / callouts ────────────────────────────────────── */

.note {
  padding: 18px 20px;
  border: 1px solid var(--crd-border);
  border-radius: 16px;
  background: var(--crd-card-soft);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  color: var(--crd-muted);
  font-size: 13.5px;
}

.note strong { color: var(--crd-text); }
.note p { margin: 0 0 10px; max-width: 78ch; }
.note p:last-child { margin-bottom: 0; }
.note ul { margin: 0; padding-left: 18px; }
.note li { margin: 3px 0; max-width: 78ch; }

.section { margin-top: 52px; }

/* ── States ──────────────────────────────────────────────── */

.state {
  padding: 56px 20px;
  text-align: center;
  color: var(--crd-muted);
}

.state.error { color: var(--warn); }

.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.11), rgba(255,255,255,0.05));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 40px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px var(--gutter) 56px;
  border-top: 1px solid var(--crd-border);
  color: var(--crd-faint);
  font-size: 12.5px;
  line-height: 1.6;
}

.site-footer p { margin: 0; }
.site-footer a { color: var(--crd-muted); }

.footer-legal { max-width: 62ch; }

.updated {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1040px) {
  .product-layout { grid-template-columns: 1fr; gap: 32px; }
  .rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .rail-art { width: 168px; height: 168px; }
  .rail-head { flex: 1 1 260px; }
  .rail-facts { flex: 1 1 100%; }
}

@media (max-width: 860px) {
  .ledger-head { display: none; }

  /* Both prices move onto a second line, labelled, since the column headers are gone.
     The verdict column is a fixed width: with `auto` price columns and a spanning name,
     a 1fr verdict track gets squeezed to zero and its text spills out of the row. */
  .ledger-row {
    grid-template-columns: 48px minmax(0, 1fr) 88px;
    grid-template-areas:
      "thumb name   verdict"
      "thumb sealed parts";
    gap: 8px 14px;
    padding: 14px 12px;
  }

  .ledger-row .c-thumb { grid-area: thumb; align-self: start; }
  .ledger-row .c-name { grid-area: name; }
  .ledger-row .c-sealed { grid-area: sealed; text-align: left; }
  .ledger-row .c-parts { grid-area: parts; text-align: right; }
  .ledger-row .c-verdict { grid-area: verdict; text-align: right; }

  /* The column and its sort button are gone here, so the select takes over and the date
     moves into the meta line. */
  .ledger-row .c-released { display: none; }
  .meta-date { display: inline; }
  .sort-control { display: flex; }
  .section-bar { flex-wrap: wrap; align-items: center; }
  .section-bar .rule-label { flex: 1 1 100%; }

  .ledger-row .c-sealed, .ledger-row .c-parts { font-size: 14px; }

  .ledger-row .c-sealed::before,
  .ledger-row .c-parts::before {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--crd-faint);
  }

  .ledger-row .c-sealed::before { content: "Sealed"; }
  .ledger-row .c-parts::before { content: "Contents"; }

  .ledger-thumb { width: 48px; height: 48px; }

  .breakdown .col-listings, .breakdown .col-basis { display: none; }
  .verdict { padding: 22px; }
  .topbar { flex-wrap: wrap; gap: 14px; }
  .game-tabs { margin-left: 0; width: 100%; }

  /* Full-width CTA once the rail has collapsed into the flow. */
  .rail .btn { flex: 1 1 100%; }
}

@media (max-width: 620px) {
  /* Share-of-value is the first thing to go: the verdict module above already carries
     the headline number, and Extended is what a phone reader is scanning for. */
  .breakdown .col-share { display: none; }
  .breakdown th, .breakdown td { padding-left: 8px; padding-right: 8px; }
  .breakdown tfoot td { font-size: 15px; }
  .item { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}