/* deck.cheap — design based on the "Seline Analytics" style from Refero Styles:
   warm-stone canvas, flat white cards with 1px hairlines, ONE accent (gold #f2b134), pill controls,
   Inter at 14px / 1.64 for dense data. The dark theme is derived from the same stone scale. */

@font-face { font-family: 'Inter'; src: url('/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root, :root[data-theme='light'] {
  color-scheme: light;
  --bg: #fafaf9;            /* canvas */
  --surface: #ffffff;       /* cards, inputs, menus */
  --surface-2: #f5f5f4;     /* hover rows */
  --line: #e8e6e5;          /* hairlines */
  --line-strong: #d6d3d1;
  --text: #0c0a09;
  --text-2: #78716c;
  --text-3: #a8a29e;
  --accent: #f2b134;        /* gold: the only chromatic fill */
  --accent-edge: #d99a1f;
  --accent-ink: #92580a;    /* accent for text/links (5.8:1 on white) */
  --accent-wash: #fdf0cf;
  --focus: #92580a;         /* focus ring: needs 3:1, gold fill alone is too light */
  --on-accent: #0c0a09;
  --good: #15803d; --warn: #b42318; --bad: #b91c1c; /* warnings are red, so they never read as the gold accent */
  --overlay: rgba(12, 10, 9, .55);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .05);
  --shadow-float: 0 12px 45px rgba(17, 12, 46, .12);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0c0a09; --surface: #1c1917; --surface-2: #292524;
  --line: #292524; --line-strong: #44403c;
  --text: #fafaf9; --text-2: #a8a29e; --text-3: #78716c;
  --accent: #f2b134; --accent-edge: #d99a1f; --accent-ink: #f5c25a; --accent-wash: rgba(242, 177, 52, .16); --focus: #f5c25a;
  --on-accent: #0c0a09;
  --good: #86d9a0; --warn: #f08a80; --bad: #f08a80;
  --overlay: rgba(0, 0, 0, .7);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-float: 0 12px 45px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 14px/1.64 Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'calt' 1, 'rlig' 1; letter-spacing: .004em;
}
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--text); }
h1, h2, h3 { font-weight: 400; letter-spacing: -.025em; margin: 0; }
h1 { margin: 24px 0 4px; font-size: 32px; line-height: 1.25; }
.num, td, .value, .d-row { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 72px; }
.wrap.narrow { max-width: 680px; }

/* Header and controls */
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; }
.logo { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.logo span { color: var(--accent-ink); }
a.logo:hover { color: var(--text); }
.tag { color: var(--text-2); margin: 4px 0 20px; font-size: 16px; line-height: 1.69; max-width: 70ch; }
.controls { display: flex; gap: 8px; align-items: center; }

/* Buttons: pills. The cyan filled button is the only chromatic fill. */
button, a.btn, a.lb-link { font: inherit; }
button { color: var(--text); cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button.primary, a.lb-link, button.lb-details {
  background: var(--accent); border: 1px solid var(--accent-edge); color: var(--on-accent);
  border-radius: 8px; padding: 8px 18px; font-weight: 500; text-decoration: none; cursor: pointer;
}
button.primary:hover, a.lb-link:hover, button.lb-details:hover { background: var(--accent-edge); color: var(--on-accent); }
.row { display: flex; gap: 8px; margin: 12px 0 24px; flex-wrap: wrap; }
.row > button:not(.primary), a.btn {
  background: transparent; border: 1px solid var(--line-strong); color: var(--text);
  border-radius: 8px; padding: 8px 18px; text-decoration: none; display: inline-block;
}
.row > button:not(.primary):hover, a.btn:hover { background: var(--surface-2); color: var(--text); }
a.lb-link[hidden], button.lb-details[hidden] { display: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Inputs */
textarea, form input {
  width: 100%; padding: 8px 12px; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 6px; font: inherit;
}
textarea::placeholder, form input::placeholder { color: var(--text-2); }
textarea { min-height: 200px; resize: vertical; font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 13px; line-height: 1.6; }
textarea:focus, form input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
form label { display: block; margin: 14px 0 4px; color: var(--text-2); font-size: 13px; font-weight: 500; }
form textarea { min-height: 150px; font-family: inherit; font-size: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Notices */
.notice { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; color: var(--text-2); font-size: 13px; }
.notice.warn { border-color: var(--warn); color: var(--warn); background: transparent; }
.miss { color: var(--warn); }

/* Totals */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.total { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; box-shadow: var(--shadow-card); }
.total .label { color: var(--text-2); font-size: 13px; }
.total .value { font-size: 32px; line-height: 1.25; font-weight: 400; letter-spacing: -.025em; margin: 2px 0; }
.total .value::selection { background: var(--accent-wash); }

/* Data table */
.scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { color: var(--text-2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2) { text-align: left; }
tbody td:nth-child(2) { min-width: 200px; }
td small { color: var(--text-2); display: block; font-size: 12px; line-height: 1.5; }
td a { text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }

/* Card thumbnails, name link, previews */
td .thumb { float: left; margin-right: 10px; line-height: 0; }
td .thumb img { border-radius: 4px; border: 1px solid var(--line); background: #000; }
button.thumb { background: none; border: 0; padding: 0; cursor: pointer; }
button.name-link { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
button.name-link:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
#preview { position: fixed; z-index: 50; width: 260px; aspect-ratio: 5/7; border-radius: 12px; box-shadow: var(--shadow-float); pointer-events: none; display: none; background: #000; }
#preview.on { display: block; }

/* Pickers (language, region, currency, theme): ghost pills */
.picker { position: relative; }
.pick-btn, .theme-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-width: 64px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; font-weight: 500; line-height: 1;
}
.pick-btn:hover, .theme-btn:hover { background: var(--surface-2); }
.pick-btn::after { content: '▾'; color: var(--text-2); font-size: 11px; }
.flag { width: 22px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); object-fit: cover; flex: none; }
.pick-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 4px; list-style: none; min-width: 220px; max-height: 320px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-float); }
.pick-list[hidden] { display: none; }
.pick-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.pick-list li:hover, .pick-list li.active { background: var(--surface-2); }
.pick-list li[aria-selected='true'] { color: var(--accent-ink); font-weight: 500; }
.theme-btn { min-width: 36px; width: 36px; padding: 0; }
.theme-btn .ico { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* In-page card popup (lightbox) and details panel */
#lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--overlay); padding: 16px; }
#lightbox[hidden] { display: none; }
.lb-box { display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 100%; }
#lightbox .lb-box img { max-height: 80vh; max-width: min(92vw, 520px); height: auto; width: auto; aspect-ratio: 5/7; border-radius: 10px; box-shadow: var(--shadow-float); background: #000; cursor: default; }
.lb-close { position: absolute; top: 12px; right: 16px; width: 40px; height: 40px; padding: 0; font-size: 26px; line-height: 1; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; }
#details { position: fixed; inset: 0; z-index: 110; background: var(--overlay); overflow-y: auto; padding: 24px 12px 40px; display: flex; justify-content: center; align-items: flex-start; }
#details[hidden] { display: none; }
.d-panel { width: 100%; max-width: 960px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 24px; box-shadow: var(--shadow-float); }
.d-panel h2 { margin: 0 44px 2px 0; font-size: 32px; line-height: 1.25; }
.d-sub { margin: 0 0 16px; color: var(--text-2); }
.d-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.d-art img { width: 100%; aspect-ratio: 5/7; border-radius: 12px; background: #000; }
.d-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.d-sec h3 { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.d-sec p { margin: 0 0 8px; }
.d-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.d-row:last-child { border-bottom: 0; }
.d-k { color: var(--text-2); flex: none; }
.d-row span:last-child { text-align: right; }
.st-legal, .st-living_legend { color: var(--good); } .st-banned, .st-suspended { color: var(--bad); } .st-restricted { color: var(--warn); } .st-not_legal { color: var(--text-3); }
.d-table th, .d-table td { text-align: left; white-space: nowrap; }
.d-table th:last-child, .d-table td:last-child { text-align: right; }
@media (max-width: 700px) { .d-grid { grid-template-columns: 1fr; } .d-art { max-width: 260px; margin: 0 auto; } }

/* Privacy notice */
#cookieNotice { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 920px; margin: 0 auto; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow-float); }
#cookieNotice strong { font-size: 13px; }
#cookieNotice p { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
#cookieNotice .cn-actions button { padding: 6px 14px; font-size: 13px; }
#cookieNotice .cn-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
#cookieNotice a { white-space: nowrap; }
@media (max-width: 560px) { #cookieNotice { flex-direction: column; align-items: stretch; } #cookieNotice .cn-actions { justify-content: space-between; } .cards { grid-template-columns: 1fr; } }

/* Text pages and footer */
.legal h2 { font-size: 20px; line-height: 1.4; margin: 28px 0 6px; letter-spacing: -.01em; }
.legal p { margin: 0 0 10px; color: var(--text); max-width: 75ch; }
h2[id] { scroll-margin-top: 16px; }
footer { margin-top: 40px; color: var(--text-2); font-size: 13px; }
footer p { margin: 4px 0; }

/* Price source tabs (above the results) */
.src-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.src-bar > span { color: var(--text-2); font-size: 13px; font-weight: 500; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; }
.seg-btn { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-weight: 500; line-height: 1; }
.seg-btn:hover { background: var(--surface-2); }
.seg-btn.on, .seg-btn.on:hover { background: var(--text); color: var(--bg); }
.seg-btn .flag { width: 18px; height: 13px; }

/* ---- Display type: Inter Tight stands in for Roobert (Seline's heading face), weight 400, tight tracking ---- */
@font-face { font-family: 'Inter Tight'; src: url('/fonts/InterTightVariable-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
h1, h2, h3, .total .value { font-family: 'Inter Tight', Inter, ui-sans-serif, system-ui, sans-serif; }
h1.hero { margin: 28px 0 8px; font-size: clamp(32px, 6.4vw, 52px); line-height: 1.12; letter-spacing: -.021em; max-width: 18ch; }
/* One highlighted phrase per headline: Seline's signature accent */
h1.hero mark { background: var(--accent-wash); color: var(--accent-ink); padding: 2px 8px; border-radius: 4px; }

/* Source + version bars, totals comparison, per-card version select */
.bars { display: flex; gap: 8px 24px; flex-wrap: wrap; margin: 4px 0 8px; }
.bars .src-bar { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { display: flex; align-items: baseline; gap: 8px; padding: 5px 12px; background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); }
.chip span { color: var(--text-2); font-size: 13px; }
.chip strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.chip:hover { background: var(--surface-2); }
.chip.on { border-color: var(--accent); background: var(--accent-wash); }
:root[data-theme='dark'] .chip.on strong { color: var(--accent-ink); }
select.ver { width: 100%; min-width: 190px; max-width: 300px; padding: 5px 8px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; }
select.ver:focus { outline: 2px solid var(--focus); outline-offset: 0; }
td:nth-child(3), th:nth-child(3) { text-align: left; }

/* Logo: monogram "d" with a gold coin (the dot of .cheap) */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo .mark { flex: none; color: var(--text); }
.logo .coin { fill: var(--accent); }
.logo .wm { font-family: 'Inter Tight', Inter, ui-sans-serif, system-ui, sans-serif; }

/* Stable layout: the results table never reflows when the price text or the chosen version changes */
table.results { table-layout: fixed; min-width: 860px; }
table.results th:nth-child(1), table.results td:nth-child(1) { width: 34px; padding-right: 0; text-align: center; }
table.results th:nth-child(2), table.results td:nth-child(2) { width: 40px; padding-right: 0; white-space: nowrap; }
table.results th:nth-child(3), table.results td:nth-child(3) { width: 290px; }
table.results th:nth-child(4), table.results td:nth-child(4) { width: 270px; }
table.results td { overflow-wrap: anywhere; }
table.results select.ver { width: 100%; max-width: none; min-width: 0; }
td .thumb img { width: 44px; height: 62px; object-fit: cover; }
.cards { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr); }
.cards .total { min-height: 120px; }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* Summary: one card — the total on the left, the three alternatives as tiles on the right */
.summary { display: grid; grid-template-columns: minmax(230px, .75fr) minmax(0, 1.6fr); margin: 14px 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-card); }
.sum-main { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 18px 24px; border-right: 1px solid var(--line); }
.sum-main .label, .sum-compare > .label { color: var(--text-2); font-size: 13px; }
.sum-main .value { font: 400 38px/1.15 'Inter Tight', Inter, sans-serif; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.sum-compare { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 20px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { display: block; text-align: left; padding: 10px 14px; background: transparent; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); }
.tile:hover { background: var(--surface-2); }
.tile span { display: block; color: var(--text-2); font-size: 12px; }
.tile strong { display: block; font: 500 18px/1.4 'Inter Tight', Inter, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.tile.on { border-color: var(--accent); background: var(--accent-wash); }
:root[data-theme='dark'] .tile.on strong { color: var(--accent-ink); }
.tile.na strong { color: var(--text-3); }
@media (max-width: 800px) { .summary { grid-template-columns: 1fr; } .sum-main { border-right: 0; border-bottom: 1px solid var(--line); } .tiles { grid-template-columns: 1fr; } }

/* Same height with or without prices: reserve every line a state can use */
.summary { min-height: 150px; }
.sum-main .value { height: 44px; display: flex; align-items: center; }
.sum-main .value.na, td .na { color: var(--text-3); }
#mTotal { min-height: 1.64em; }
.tile strong { min-height: 1.4em; }
table.results td { height: 84px; }
td .na { display: block; font-weight: 500; }

/* ---- How it works: steps + looping demo (CSS only, 12 s loop, respects reduced motion) ---- */
.how { margin: 8px 0 12px; }
.how h2 { font-size: 20px; line-height: 1.4; letter-spacing: -.01em; margin: 0 0 12px; }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.steps strong { font-weight: 500; }
.steps p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.step-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-wash); color: var(--accent-ink); }
.demo-frame { display: grid; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-float); }
.demo-cap { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.demo-input { min-height: 74px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; font: 12px/1.6 ui-monospace, 'SF Mono', Consolas, monospace; }
.demo-input .l { display: block; width: 0; overflow: hidden; white-space: nowrap; }
.demo-btn { justify-self: start; padding: 5px 16px; background: var(--accent); border: 1px solid var(--accent-edge); border-radius: 8px; color: var(--on-accent); font-size: 12px; font-weight: 500; }
.demo-out { display: grid; gap: 4px; opacity: 0; }
.demo-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; justify-self: start; padding: 3px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px; font-weight: 500; }
.demo-seg span { position: relative; z-index: 1; padding: 3px 14px; text-align: center; }
.demo-seg .pill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--text); border-radius: 8px; }
.demo-seg .s1 { color: var(--bg); } .demo-seg .s2 { color: var(--text); }
.sw { display: inline-grid; justify-items: end; } .sw b { grid-area: 1 / 1; font-weight: 500; font-variant-numeric: tabular-nums; } .sw .b { opacity: 0; }
.demo-total { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0 2px; }
.demo-total small { color: var(--text-2); font-size: 12px; }
.demo-total .sw b { font: 400 26px/1.2 'Inter Tight', Inter, sans-serif; letter-spacing: -.02em; }
.demo-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; }
@media (max-width: 800px) { .how-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) {
  .demo .l1 { animation: t1 12s steps(28, end) infinite; } .demo .l2 { animation: t2 12s steps(30, end) infinite; } .demo .l3 { animation: t3 12s steps(25, end) infinite; }
  .demo-btn { animation: press 12s infinite; } .demo-out { animation: outShow 12s infinite; }
  .demo-seg .pill { animation: pill 12s infinite; } .demo-seg .s1 { animation: c1 12s infinite; } .demo-seg .s2 { animation: c2 12s infinite; }
  .sw .a { animation: swA 12s infinite; } .sw .b { animation: swB 12s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .demo .l1 { width: var(--w1, 25ch); } .demo .l2 { width: var(--w2, 31ch); } .demo .l3 { width: var(--w3, 26ch); } .demo-out { opacity: 1; }
}
@keyframes t1 { 0% { width: 0 } 7% { width: var(--w1, 25ch) } 95% { width: var(--w1, 25ch) } 100% { width: 0 } }
@keyframes t2 { 0%, 7% { width: 0 } 14% { width: var(--w2, 31ch) } 95% { width: var(--w2, 31ch) } 100% { width: 0 } }
@keyframes t3 { 0%, 14% { width: 0 } 21% { width: var(--w3, 26ch) } 95% { width: var(--w3, 26ch) } 100% { width: 0 } }
@keyframes press { 0%, 26% { transform: none } 28% { transform: scale(.92) } 31%, 100% { transform: none } }
@keyframes outShow { 0%, 31% { opacity: 0; transform: translateY(6px) } 37%, 92% { opacity: 1; transform: none } 98%, 100% { opacity: 0; transform: translateY(6px) } }
@keyframes pill { 0%, 52% { transform: none } 58%, 100% { transform: translateX(100%) } }
@keyframes c1 { 0%, 52% { color: var(--bg) } 58%, 100% { color: var(--text) } }
@keyframes c2 { 0%, 52% { color: var(--text) } 58%, 100% { color: var(--bg) } }
@keyframes swA { 0%, 52% { opacity: 1 } 58%, 100% { opacity: 0 } }
@keyframes swB { 0%, 52% { opacity: 0 } 58%, 100% { opacity: 1 } }

/* Details panel: tabs, symbols, chips, caption */
.d-tabs { margin: 0 0 14px; }
.d-cap { margin: 8px 0 0; text-align: center; color: var(--text-2); font-size: 12px; line-height: 1.5; }
.d-note { margin: 8px 0 0; color: var(--text-3); font-size: 12px; }
.d-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.d-chip { padding: 1px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px; white-space: nowrap; }
.d-row { align-items: baseline; }
.d-sec p strong { font-weight: 600; }
.sym { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin: 0 1px; padding: 0 3px; border-radius: 8px; font-size: 10px; font-weight: 600; line-height: 1; vertical-align: 1px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); }
.sym-p { background: var(--accent-wash); border-color: var(--accent-edge); color: var(--accent-ink); }
.sym-r { background: var(--surface-2); }

/* More version tabs and tiles: wrap instead of overflowing */
.seg { flex-wrap: wrap; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }

/* The demo is a recording: nothing in it reacts to the mouse, and a pointer shows what is being "clicked" */
.demo-frame { position: relative; pointer-events: none; user-select: none; cursor: default; }
.demo .cursor { position: absolute; left: 62%; top: 82%; opacity: 0; fill: var(--text); stroke: var(--surface); stroke-width: 1.4; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .demo .cursor { animation: pointer 12s infinite; }
  /* numbers switch at once: no cross-fade, so two values are never drawn on top of each other */
  .sw .a { animation: swA 12s step-end infinite; } .sw .b { animation: swB 12s step-end infinite; }
}
@media (prefers-reduced-motion: reduce) { .demo .cursor { display: none; } }
@keyframes swA { 0%, 54.9% { opacity: 1 } 55%, 100% { opacity: 0 } }
@keyframes swB { 0%, 54.9% { opacity: 0 } 55%, 100% { opacity: 1 } }
@keyframes pointer {
  0% { left: 62%; top: 82%; opacity: 0 }
  8% { left: 62%; top: 82%; opacity: 1 }
  24% { left: 13%; top: 40% }
  31% { left: 13%; top: 40% }
  34% { left: 13%; top: 40% }
  50% { left: 31%; top: 52% }
  60% { left: 31%; top: 52%; opacity: 1 }
  66%, 100% { left: 31%; top: 52%; opacity: 0 }
}
.demo-seg .pill { animation-timing-function: ease-in-out; }
@keyframes pill { 0%, 54% { transform: none } 58%, 100% { transform: translateX(100%) } }
@keyframes c1 { 0%, 54% { color: var(--bg) } 55%, 100% { color: var(--text) } }
@keyframes c2 { 0%, 54% { color: var(--text) } 55%, 100% { color: var(--bg) } }

/* Tab switch timeline (12 s loop): pointer arrives ~46%, pill slides 50-54%, label colours flip at its midpoint (52%), numbers swap at 54% */
@keyframes pill { 0%, 50% { transform: none } 54%, 100% { transform: translateX(100%) } }
@keyframes c1 { 0%, 51.9% { color: var(--bg) } 52%, 100% { color: var(--text) } }
@keyframes c2 { 0%, 51.9% { color: var(--text) } 52%, 100% { color: var(--bg) } }
@keyframes swA { 0%, 53.9% { opacity: 1 } 54%, 100% { opacity: 0 } }
@keyframes swB { 0%, 53.9% { opacity: 0 } 54%, 100% { opacity: 1 } }
@keyframes pointer {
  0% { left: 62%; top: 82%; opacity: 0 }
  8% { left: 62%; top: 82%; opacity: 1 }
  24% { left: 13%; top: 40% }
  34% { left: 13%; top: 40% }
  46% { left: 31%; top: 52% }
  60% { left: 31%; top: 52%; opacity: 1 }
  66%, 100% { left: 31%; top: 52%; opacity: 0 }
}

/* Comparison tiles size to their number and wrap, so large values never spill out of the box */
.summary { grid-template-columns: minmax(230px, .6fr) minmax(0, 1.8fr); }
.tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.tile { flex: 1 1 max-content; min-width: 128px; }
.tile strong { font-size: 17px; }
@media (max-width: 800px) { .summary { grid-template-columns: 1fr; } }

/* Brazil: link-only rows and actions */
a.tile.act, button.tile.act { display: grid; place-items: center; text-align: center; min-height: 44px; padding: 8px 16px; font: 500 14px/1.3 Inter, sans-serif; text-decoration: none; color: var(--text); }
a.tile.act:hover { color: var(--text); }
.pill-link { display: inline-block; padding: 5px 14px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pill-link:hover { background: var(--surface-2); color: var(--text); }
.sum-main .value:not(.na) { overflow-wrap: anywhere; }

.src-bar[hidden] { display: none; }

.d-only { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.d-only strong { color: var(--text); font-weight: 500; }

/* Version picker: a button per row and ONE shared menu above the page (never clipped by the table) */
button.ver-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 10px; font: inherit; font-size: 13px; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; }
button.ver-btn:hover { background: var(--surface-2); }
button.ver-btn::after { content: '▾'; margin-left: auto; flex: none; color: var(--text-2); font-size: 11px; }
.ver-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vmenu { position: fixed; z-index: 120; margin: 0; padding: 4px; list-style: none; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-float); font-size: 13px; }
#vmenu[hidden] { display: none; }
#vmenu li { padding: 7px 10px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#vmenu li.active, #vmenu li:hover { background: var(--surface-2); }
#vmenu li[aria-selected='true'] { color: var(--accent-ink); font-weight: 500; }

/* ---- Card shadows: layered (contact + soft + deep), so a card lifts off the page in both themes ---- */
:root { --shadow-art: 0 1px 2px rgba(12, 10, 9, .20), 0 10px 20px -6px rgba(12, 10, 9, .30), 0 30px 60px -14px rgba(12, 10, 9, .42); }
:root[data-theme='dark'] { --shadow-art: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 24px -6px rgba(0, 0, 0, .75), 0 34px 70px -14px rgba(0, 0, 0, .9); }
#preview { display: block; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); box-shadow: var(--shadow-art); transition: opacity .15s ease, transform .15s ease, visibility 0s .15s; }
#preview.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#lightbox .lb-box img, .d-art img { box-shadow: var(--shadow-art); }
td .thumb img { transition: transform .15s ease, box-shadow .15s ease; }
button.thumb:hover img, button.thumb:focus-visible img { transform: translateY(-2px); box-shadow: 0 8px 16px -4px rgba(12, 10, 9, .45); }
@media (prefers-reduced-motion: no-preference) {
  #lightbox:not([hidden]) .lb-box { animation: pop .18s ease-out; }
  @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
}
@media (prefers-reduced-motion: reduce) { #preview, td .thumb img { transition: none; } }

/* Deck link field */
.linkbar { display: flex; gap: 8px; margin: 0 0 10px; }
.linkbar input { flex: 1; min-width: 0; }
.linkbar .primary { flex: none; }
#linkMsg .notice { margin: 0 0 10px; }
/* How it works: steps stretch to the height of the demo, text never clipped */
.how-grid { align-items: stretch; }
.steps { grid-auto-rows: 1fr; }
.steps li { align-items: center; }
.demo-input { overflow: hidden; }

/* How it works, more visual: numbered flow with a connecting line, card thumbnails, soft glow behind the demo */
.steps { position: relative; counter-reset: st; }
.steps::before { content: ''; position: absolute; left: 35px; top: 40px; bottom: 40px; width: 2px; background: linear-gradient(var(--accent), var(--line)); border-radius: 2px; }
.steps li { position: relative; padding: 16px 18px; transition: transform .15s; }
.steps li:hover { transform: translateX(2px); }
.step-ico { position: relative; width: 44px; height: 44px; background: linear-gradient(135deg, var(--accent-wash), var(--surface)); border: 1px solid var(--accent-edge); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.step-ico::after { counter-increment: st; content: counter(st); position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; }
.steps strong { font-size: 15px; }
.demo { position: relative; isolation: isolate; }
.demo::before { content: ''; position: absolute; inset: 8% -4% -6%; background: radial-gradient(60% 60% at 50% 50%, var(--accent-wash), transparent 70%); opacity: .9; z-index: -1; filter: blur(14px); }
.demo-row { align-items: center; }
.demo-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-row .thumb { flex: none; width: 22px; height: 30px; border-radius: 3px; border: 1px solid var(--line-strong); background: linear-gradient(160deg, #ddd, #9aa); position: relative; }
.demo-row .thumb::after { content: ''; position: absolute; left: 3px; right: 3px; top: 3px; height: 13px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.demo-row .thumb.p-red { background: linear-gradient(160deg, #f08a7e, #b3261e); }
.demo-row .thumb.p-blue { background: linear-gradient(160deg, #8fb6f2, #2457b5); }
.demo-row .thumb.p-none { background: linear-gradient(160deg, #f2d27a, #b3862a); }

/* Wide screens: use the width. Formats in columns, tighter rows, wider panel */
@media (min-width: 900px) {
  .d-panel { max-width: 1120px; padding: 20px 24px; }
  .d-grid { grid-template-columns: 230px 1fr; gap: 18px; }
  .d-sec { padding: 12px 16px; margin-bottom: 10px; }
  .d-row { padding: 4px 0; }
  .d-fmts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .d-fmts .d-row:nth-last-child(1) { border-bottom: 0; }
}
@media (min-width: 1200px) { .d-fmts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.linkbar[hidden] { display: none; }
.sym-svg { display: inline-block; width: 18px; height: 18px; margin: 0 1px; vertical-align: -4px; }

/* Big totals (e.g. a whole collection) stay on one line: the left column grows to fit the number */
.summary { grid-template-columns: minmax(230px, max-content) minmax(0, 1fr); }
.sum-main .value, .sum-main .value:not(.na) { height: auto; min-height: 44px; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 800px) { .summary { grid-template-columns: 1fr; } .sum-main .value { font-size: clamp(26px, 9vw, 38px); } }

/* Card colour (pitch) pill in the details header */
.pitch-pill { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; padding: 2px 10px 2px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text); background: var(--surface); vertical-align: 1px; }
.pitch-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset; }
.pitch-red { --pc: #d62a2a; } .pitch-yellow { --pc: #f2c200; } .pitch-blue { --pc: #2f6fd6; }

/* Card colour as a coloured bar under the title (like FaBrary) */
.pitch-bar { display: inline-block; margin: 0 0 14px; padding: 2px 16px; border-radius: 8px; background: var(--pc); color: #fff; font-size: 12px; font-weight: 600; }
.pitch-yellow.pitch-bar { color: #1c1917; }
.pitch-bar { display: block; width: fit-content; margin: 0 0 18px; }
.d-tabs { margin-top: 0; }
.d-grid[hidden], .d-prints[hidden] { display: none !important; }

/* Zoom on the card art in the details panel */
.d-art img.zoomable { cursor: zoom-in; }
#zoom { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay); cursor: zoom-out; }
#zoom[hidden] { display: none; }
#zoom img { max-height: 94vh; max-width: 94vw; aspect-ratio: 5/7; object-fit: contain; border-radius: 10px; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }

/* The card stays on the left; the right column shows either the card details or the printings */
.d-grid > .d-art { grid-column: 1; grid-row: 1; }
.d-grid > .d-main, .d-grid > .d-prints { grid-column: 2; grid-row: 1; min-width: 0; }
.d-main[hidden] { display: none !important; }
.d-prints .scroll { max-width: 100%; }
@media (max-width: 700px) { .d-grid > .d-art, .d-grid > .d-main, .d-grid > .d-prints { grid-column: 1; grid-row: auto; } }

/* Game picker next to the logo */
header { gap: 12px; }
.gamepick { margin-right: auto; }
.gamepick .pick-btn { font-weight: 500; }
.gamepick .pick-list { left: 0; right: auto; min-width: 230px; }
.gamepick[hidden] { display: none; }

/* Magic mana symbols */
.sym.mana { color: #1c1917; border: 1px solid rgba(0, 0, 0, .35); font-weight: 700; }
.m-W { background: #f8f3d4; } .m-U { background: #b9d6ec; } .m-B { background: #b8aca5; } .m-R { background: #eba58a; } .m-G { background: #a7c79c; } .m-C, .m-N { background: #d3cbc7; }

.mana-img { width: 18px; height: 18px; margin: 0 1px; vertical-align: -3px; }

/* Price history chart in the card panel */
.hist-svg { display: block; width: 100%; height: auto; }
.hist-line { fill: none; stroke: var(--accent-edge); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hist-cap { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.hist-cap .up { color: var(--warn); }
.hist-cap .down { color: var(--good); }

/* Hover: every secondary button changes colour (gold wash + gold edge); a link drawn as a button is never underlined */
button, a.pill-link, a.tile, .pick-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
td a.pill-link, td a.pill-link:hover, a.tile.act:hover { text-decoration: none; }
.pill-link:hover, a.tile.act:hover, button.tile.act:hover, button.tile:not(.on):not(.na):hover, .row button:not(.primary):hover,
.pick-btn:hover, .theme-btn:hover, button.ver-btn:hover, .seg-btn:not(.on):hover, .lb-close:hover, .hand-close:hover {
  background: var(--accent-wash); border-color: var(--accent-edge); color: var(--accent-ink);
}

/* Selected option of a segmented control: a dark grey (not pure black) so it does not pull the eye away from the prices */
:root { --sel: #44403c; --on-sel: #fafaf9; }
:root[data-theme='dark'] { --sel: #d6d3d1; --on-sel: #0c0a09; }
.seg-btn.on, .seg-btn.on:hover { background: var(--sel); color: var(--on-sel); }

/* Demo: version switch left, total right, on one line */
.demo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.demo-head .demo-seg { justify-self: auto; }
.demo-head .demo-total { display: block; padding: 0; text-align: right; }
.demo-head .demo-total small { display: block; }

/* Price history chart: period tabs, tooltip line, area under the line */
.hist-tabs { margin-bottom: 8px; }
.hist-tip { min-height: 22px; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.hist-chart { touch-action: pan-y; cursor: crosshair; }
.hist-area { fill: var(--accent-wash); stroke: none; }
.hist-dot { fill: var(--accent-edge); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Result actions (share, copy, CSV) and the "I already own it" checkbox */
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
button.pill-link { font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; background: var(--surface); }
.own-sum { margin: 4px 0 10px; font-weight: 500; }
/* Checkbox "I already own it": rounded, gold when marked, a dash when only some are marked */
input.own { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface); cursor: pointer; vertical-align: middle; transition: background-color .12s ease, border-color .12s ease; }
input.own:hover { border-color: var(--accent-edge); background: var(--accent-wash); }
input.own:checked, input.own:indeterminate { background: var(--accent); border-color: var(--accent-edge); }
input.own::after { content: ''; width: 5px; height: 10px; margin-top: -2px; border: solid var(--on-accent); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) scale(0); transition: transform .12s ease; }
input.own:checked::after { transform: rotate(45deg) scale(1); }
input.own:indeterminate::after { width: 10px; height: 0; margin-top: 0; border-width: 2.2px 0 0 0; transform: scale(1); }
input.own:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
th.own-col, td.own-col { text-align: center; }
.share-link { flex: 1 1 260px; min-width: 0; padding: 6px 12px; border-radius: 8px; font-size: 13px; }

/* Contrast: the small label on the selected (gold wash) tile was 4.2:1; the accent text colour is 5.2:1 */
.tile.on span { color: var(--accent-ink); }
.d-note { color: var(--text-2); } /* was the lightest grey (2.5:1); the secondary text colour passes 4.5:1 */

/* Price alert form: compact, one row */
.alert-box { margin: 4px 0 12px; padding: 12px 14px; border: 1px solid var(--accent-edge); border-radius: 10px; background: var(--accent-wash); display: grid; gap: 8px; max-width: 760px; }
.alert-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }
.alert-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.alert-amount { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.alert-amount input { width: 110px; }
.alert-row input[type=email] { flex: 1 1 200px; min-width: 0; }
.alert-box input { padding: 7px 12px; }
.alert-box[hidden], .own-sum[hidden], .result-actions:empty { display: none; } /* a display rule must not undo the hidden attribute */

/* ---- A quieter look: fewer rounded pills, softer shadows, no glows, no highlighter, steps as plain text ---- */
:root { --shadow-card: 0 1px 2px rgba(12, 10, 9, .05); --shadow-float: 0 4px 14px rgba(12, 10, 9, .08); }
h1.hero mark { background: none; padding: 0; border-radius: 0; color: var(--accent-ink); }
.demo::before { display: none; }
.alert-box { background: var(--surface); border-color: var(--line-strong); }
.steps { position: static; gap: 14px; grid-auto-rows: auto; }
.steps::before { display: none; }
.steps li { padding: 0; border: 0; background: none; box-shadow: none; align-items: flex-start; gap: 12px; transition: none; }
.steps li:hover { transform: none; }
.step-ico { width: auto; height: auto; min-width: 1.2em; background: none; border: 0; border-radius: 0; box-shadow: none; display: block; font-weight: 600; color: var(--text-2); font-size: 15px; place-items: unset; }
.step-ico svg { display: none; }
.step-ico::after { display: none; }
.steps strong { font-size: 15px; font-weight: 600; }
.steps p { font-size: 14px; line-height: 1.5; }
.step-ico::before { counter-increment: st; content: counter(st) '.'; }

#list::placeholder { font-style: italic; } /* a hint, clearly not text the person typed */
.restored { margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.restored[hidden] { display: none; }

/* Steps: plain text, no numbers or icons, close together */
.step-ico, .step-ico::before { display: none; }
.steps { gap: 12px; grid-auto-rows: auto; align-content: start; }
.steps li { gap: 0; }
.steps p { margin: 3px 0 0; }

/* Steps as a ruled list: every step has the same space above and below, whatever the width or the text length */
.steps { gap: 0; align-content: start; grid-auto-rows: auto; }
.steps li { padding: 16px 0; border-top: 1px solid var(--line); }
.steps li:first-child { padding-top: 4px; border-top: 0; }
.steps li:last-child { padding-bottom: 4px; }
.steps strong { display: block; margin-bottom: 4px; }
.steps p { margin: 0; }

/* Compare two decks */
.cmp-box { gap: 10px; min-width: 0; grid-template-columns: minmax(0, 1fr); max-width: none; }
.cmp-box textarea { min-height: 110px; width: 100%; box-sizing: border-box; }
.cmp-help { margin: 0; font-size: 13px; color: var(--text-2); }
.cmp-totals { margin: 6px 0 0; font-size: 14px; color: var(--text-2); }
.cmp-totals strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cmp-side { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); overflow: hidden; }
.cmp-side h3 { margin: 0; padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--line); }
.cmp-side h3 strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-side.buy h3 { background: var(--accent-wash); border-bottom-color: var(--accent-edge); }
.cmp-side.buy h3 span { color: var(--accent-ink); font-weight: 600; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp-table td { padding: 7px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table .q { width: 1%; white-space: nowrap; color: var(--text-2); padding-right: 0; }
.cmp-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-empty { margin: 0; padding: 12px 14px; color: var(--text-2); }
@media (max-width: 800px) { .cmp-sides { grid-template-columns: minmax(0, 1fr); } }
.cmp-have { margin: 8px 0 0; }
.cmp-box .result-actions { margin: 12px 0 0; }

/* Phones: the results table becomes one block per card (name, version, price stacked) instead of a 860px table to scroll sideways */
@media (max-width: 700px) {
  .scroll:has(table.results) { overflow: visible; background: none; border: 0; }
  table.results { min-width: 0; table-layout: auto; display: block; }
  table.results thead, table.results tbody { display: block; }
  table.results thead tr { display: block; padding: 4px 4px 8px; }
  table.results thead th { display: none; border: 0; padding: 0; }
  table.results thead th.own-col { display: block; width: auto; text-align: left; }
  table.results tbody tr { display: grid; grid-template-columns: 34px 34px minmax(0, 1fr); column-gap: 4px; align-items: start; margin: 0 0 10px; padding: 12px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
  table.results tbody td { display: block; width: auto !important; height: auto; padding: 0; border: 0; min-width: 0; }
  table.results td:nth-child(1) { grid-column: 1; grid-row: 1; padding-top: 2px; }
  table.results td:nth-child(2) { grid-column: 2; grid-row: 1; padding-top: 2px; }
  table.results td:nth-child(3) { grid-column: 3; grid-row: 1; }
  table.results td:nth-child(4) { grid-column: 3; grid-row: 2; margin-top: 8px; }
  table.results td:nth-child(5) { grid-column: 3; grid-row: 3; margin-top: 8px; text-align: left; }
  table.results td:nth-child(4):empty { display: none; }
  .cmp-table td { padding: 7px 6px; }
  .cmp-table td:first-child { padding-left: 10px; } .cmp-table td:last-child { padding-right: 10px; }
  .cmp-table td:nth-child(2) { overflow-wrap: anywhere; }
  .cmp-side h3 { padding: 10px; }
}
.cmp-table { table-layout: fixed; }
.cmp-table td.q { width: 46px; }
.cmp-table td.num { width: 104px; }
.cmp-table td { overflow-wrap: anywhere; }
.d-chips { min-width: 0; flex: 1 1 0; } /* a long list of editions wraps inside the row instead of pushing past the screen */
.d-chip { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }

/* Long card names (One Piece: "Gum-Gum Fire-Fist Pistol Red Hawk") wrap in their own column beside the picture */
.namecell { display: flex; align-items: flex-start; gap: 10px; }
.namecell .thumb { float: none; margin: 0; flex: none; }
.nametxt { min-width: 0; flex: 1 1 auto; }
.nametxt > button.name-link, .nametxt > span { display: block; text-align: left; overflow-wrap: anywhere; }
.nametxt > small { display: block; }

#noteSum[hidden] { display: none; }
#rows small:not(.miss) { color: var(--text-2); }

/* Questions: title on the left, an accordion on the right (stacked on a phone). The text is in the HTML even when an item is closed. */
.seo { margin: 56px 0 8px; }
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 48px; align-items: start; }
.faq-head h2 { margin: 0; font-size: 24px; letter-spacing: -.01em; position: sticky; top: 24px; }
.faq-list { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.faq summary::after { content: '+'; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text-2); font-size: 16px; line-height: 1; }
.faq details[open] summary::after { content: '−'; background: var(--text); border-color: var(--text); color: var(--bg); }
.faq summary:hover h3 { color: var(--accent-ink); }
.faq details p { margin: 0 0 18px; padding-right: 42px; max-width: 64ch; color: var(--text-2); line-height: 1.65; }
@media (max-width: 800px) { .faq { grid-template-columns: 1fr; } .faq-head h2 { position: static; } }

/* Site footer: brand, games, languages, site links; the legal line and the year below */
.site-footer { margin: 56px 0 0; padding: 36px 0 28px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14px; }
.ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px 36px; }
.ft-brand p { margin: 12px 0 0; max-width: 28ch; line-height: 1.5; }
.ft-h { margin: 0 0 12px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer li a { color: var(--text); text-decoration: none; }
.site-footer li a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer li a[aria-current] { font-weight: 600; }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.ft-bottom p { margin: 0; }
.ft-bottom p:first-child { max-width: 90ch; }
@media (max-width: 800px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }