/* Barlow Condensed (SIL OFL 1.1, see static/fonts/BarlowCondensed-OFL.txt):
   finish badges and the "Hot right now" heading. */
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

/* CardTraderDeals stylesheet. Dark is the default; [data-theme="light"] overrides. */

:root,
:root[data-theme="dark"] {
  --bg:#0f1115;
  --card:#181b22;
  --card2:#1f232c;
  --line:#262b35;
  --fg:#e6e8ec;
  --mut:#9aa3b2;
  --accent:#4b9fff;
  --on-accent:#0b1220;
  --ok:#9be7b4;
  --bad:#e78b8b;
  --warnc:#e7b34d;
  --ref-glow:rgba(91,205,132,.10);
  --ref-glow-edge:rgba(91,205,132,.22);
  --shadow:0 10px 30px rgba(0,0,0,.65);
}

:root[data-theme="light"] {
  --bg:#f5f6f8;
  --card:#ffffff;
  --card2:#eef0f4;
  --line:#d8dde5;
  --fg:#1b1f27;
  --mut:#5d6675;
  --accent:#1a66d0;
  --on-accent:#ffffff;
  --ok:#1d7a44;
  --bad:#b03030;
  --warnc:#9a6a05;
  --ref-glow:rgba(29,122,68,.08);
  --ref-glow-edge:rgba(29,122,68,.18);
  --shadow:0 10px 24px rgba(20,25,40,.18);
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:14px/1.4 system-ui, sans-serif;
}

/* ---------- header ---------- */

header {
  display:flex;
  align-items:center;
  gap:20px;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:9px; color:var(--fg); text-decoration:none; font-weight:700; }
.brand svg { width:28px; height:28px; display:block; }
.brand .wordmark { height:34px; width:auto; display:block; }
.brand .wordmark-light { display:none; }
:root[data-theme="light"] .brand .wordmark-dark { display:none; }
:root[data-theme="light"] .brand .wordmark-light { display:block; }

header nav { display:flex; gap:4px; flex-wrap:wrap; }
header nav a {
  color:var(--mut);
  text-decoration:none;
  padding:6px 10px;
  border-radius:0;
  position:relative;
}
header nav a:hover { color:var(--fg); background:var(--card); }
header nav a::before {
  content:"";
  position:absolute;
  left:2px; top:50%;
  width:4px; height:4px;
  margin-top:-2px;
  background:var(--accent);
  opacity:0;
}
header nav a:hover::before { opacity:1; }

/* Desktop: the drawer wrapper disappears so both nav groups and the page
   sprite share the header row in this order. */
.navpanel { display:contents; }
.navpanel-head, .navbackdrop, .themebtn.navtoggle { display:none; }
header nav.nav-main { order:1; }
header .pagesprite { order:2; }
header nav.nav-more { order:3; }
header .spacer { order:4; }
header .hbtns { order:5; }
header nav a[aria-current="page"] { color:var(--fg); }
header nav a[aria-current="page"]::before { opacity:1; }

/* "Other games" dropdown at the end of the second nav group */
.navmenu { position:relative; }
.navmenu summary {
  list-style:none;
  cursor:pointer;
  color:var(--mut);
  padding:6px 10px;
  display:flex;
  align-items:center;
  gap:7px;
  user-select:none;
}
.navmenu summary::-webkit-details-marker { display:none; }
.navmenu summary::after {
  content:"";
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
}
.navmenu[open] summary::after { transform:rotate(180deg); }
.navmenu summary:hover,
.navmenu[open] summary { color:var(--fg); background:var(--card); }
.navmenu summary:focus-visible { outline:1px solid var(--accent); outline-offset:-1px; }
.navmenu-list {
  position:absolute;
  left:0;
  top:calc(100% + 4px);
  z-index:60;
  min-width:100%;
  display:flex;
  flex-direction:column;
  padding:4px;
  background:var(--card);
  border:1px solid var(--line);
  border-top:2px solid var(--accent);
  box-shadow:var(--shadow);
}
.navmenu-list a { white-space:nowrap; color:var(--fg); }
.navmenu-list a:hover { background:var(--card2); }

/* "Under construction" placeholder for the sealed pages */
.construction {
  max-width:560px;
  margin:48px auto;
  padding:28px 22px;
  text-align:center;
  border:1px solid var(--line);
  background:var(--card);
}
.construction-sign { width:128px; height:auto; image-rendering:pixelated; display:block; margin:0 auto 18px; }
.construction h1 { margin:0 0 10px; font-size:22px; }
.construction p { margin:0 auto 10px; max-width:440px; color:var(--mut); line-height:1.5; }
.construction .applybtn { display:inline-flex; margin-top:10px; text-decoration:none; }

/* Sealed deals (both games) */
.sealed-page { max-width:1200px; margin:0 auto; }
.sealed-page > h1 { margin:8px 0 4px; font-size:24px; }
/* Page headings that replaced an h2 keep the h2 size. */
.page-h1 { font-size:1.5em; margin:.83em 0; }
.deals-h1 { max-width:1200px; margin:8px auto 4px; font-size:24px; }
.sealed-filters { display:flex; flex-direction:column; gap:10px; }
.sealed-filter-row { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-end; }
.sealed-filter-row .field { flex:1 1 160px; min-width:130px; }
.sealed-filter-row .sealed-search { flex:2 1 260px; }
.sealed-filter-row .filter-group { display:flex; flex-wrap:wrap; align-items:center; gap:0; }
.sealed-filter-row .grouplabel { width:100%; margin-bottom:4px; }
.sealed-count { min-height:1.4em; color:var(--mut); font-size:12px; }
.sealed-table-wrap { width:100%; overflow-x:auto; }
.sealed-table td.name { display:table-cell; }
.sealed-table .sealed-name { display:flex; align-items:center; }
.sealed-table .pmin, .sealed-table .pnext { white-space:nowrap; }
.sealed-table img.sealed-img { width:48px; height:42px; object-fit:contain; background:var(--card2); }
.sealed-table .col-type { white-space:nowrap; }
.sealed-empty { margin-top:24px; }

/* pixel strip under the header */
.pixelbar {
  height:4px;
  background:repeating-linear-gradient(90deg,
    #e8e0c8 0 4px, #3b7dd8 4px 8px, #4a4458 8px 12px,
    #d4442f 12px 16px, #3fa45b 16px 20px, transparent 20px 24px);
  image-rendering:pixelated;
  opacity:.85;
}

.spacer { flex:1 1 auto; }

/* Page sprite after the nav: 64px art shown 1:1, the negative margin lets it
   fill the header padding instead of making the header taller. */
.pagesprite { width:64px; height:64px; margin:-12px 0; image-rendering:pixelated; display:block; flex:0 0 auto; }
.pagesprite.pagesprite-help { width:56px; height:56px; margin:-8px 0; }

/* 16px sprite shown at 2x so the pixel grid stays crisp */
.mascot { width:32px; height:32px; image-rendering:pixelated; display:block; flex:0 0 auto; }

.themebtn {
  background:var(--card);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:0;
  min-height:38px;
  padding:6px 12px;
  cursor:pointer;
  font:inherit;
  display:flex;
  align-items:center;
  gap:7px;
}
.themebtn:hover { border-color:var(--accent); }
.themebtn svg { width:16px; height:16px; }
.themebtn .i-sun { color:#ffcc33; }
:root[data-theme="light"] .themebtn .i-sun { display:none; }
:root[data-theme="dark"] .themebtn .i-moon,
:root:not([data-theme="light"]) .themebtn .i-moon { display:none; }

.hbtns { display:flex; gap:6px; align-items:center; }
.langbtn { gap:4px; }
.langbtn span { color:var(--mut); }
.langbtn span.on { color:var(--fg); font-weight:700; }
.langbtn .sep { color:var(--line); }
.lopt { display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.1; font-size:12px; }
.lopt svg { width:16px; height:10px; display:block; outline:1px solid var(--line); }
.lopt:not(.on) svg { opacity:.45; }

main { padding:20px; max-width:1200px; margin:0 auto; }

.ad {
  background:var(--card);
  border:1px dashed var(--line);
  color:var(--mut);
  text-align:center;
  padding:10px;
  margin:14px 0;
  font-size:12px;
}
/* Slots stay in the templates but show nothing until they get content. */
.ad:empty { display:none; }

/* ---------- carousel ---------- */

.carousel { margin:4px 0 20px; }
.carousel-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.carousel-head h2 {
  display:flex; align-items:center; gap:8px; margin:0;
  font:700 22px/1 "Barlow Condensed", system-ui, sans-serif; text-transform:uppercase; letter-spacing:.05em;
  color:#ffb02e; text-shadow:0 0 10px rgba(255,120,30,.35);
}
:root[data-theme="light"] .carousel-head h2 { color:#c2410c; text-shadow:none; }
/* Pixel flame: 3 frames of 10x14 in img/flame.png, shown at 2x. */
.hot-flame {
  display:inline-block; width:20px; height:28px; flex:0 0 20px;
  background:url("../img/flame.png") 0 0 / 60px 28px no-repeat; image-rendering:pixelated;
  animation:hot-flame .45s steps(3) infinite;
}
.carousel-head h2 .hot-flame:last-child { transform:scaleX(-1); animation-delay:-.15s; }
@keyframes hot-flame { to { background-position:-60px 0; } }
/* The flame flickers in place, so it keeps playing with reduced motion. */
.carousel-head .navbtns { margin-left:auto; display:flex; gap:6px; }
.carousel-head button {
  background:var(--card); color:var(--fg); border:1px solid var(--line);
  border-radius:0; width:30px; height:30px; cursor:pointer; font:inherit; line-height:1;
}
.carousel-head button:hover { border-color:var(--accent); }

.carousel-track {
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.cdeal {
  flex:0 0 160px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  text-decoration:none;
  color:var(--fg);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cdeal:hover { border-color:var(--accent); }
.cdeal img { width:100%; height:120px; object-fit:cover; object-position:top center;
  border-radius:6px; display:block; }
.cdeal .cname { font-size:12px; font-weight:600; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cdeal .cprice { font-size:13px; }
.cdeal .cprice s { color:var(--mut); }
.cdeal .cpct {
  align-self:flex-start;
  background:var(--accent); color:var(--on-accent);
  border-radius:0; padding:1px 7px; font-size:11px; font-weight:700;
}
.cdeal-owner { flex:0 0 160px; display:flex; flex-direction:column; gap:4px; }
.cdeal-owner .cdeal { flex:1 1 auto; }
.cdeal-owner .deal-copy { align-self:stretch; }

/* ---------- controls ---------- */

form.filters { margin-bottom:10px; }
.pokemon-page { max-width:1200px; margin:0 auto; }
.pokemon-page > h1 { margin:8px 0 4px; font-size:24px; }
.pokemon-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
.pokemon-filters .field { flex:1 1 150px; min-width:130px; }
.pokemon-warning-control { align-self:flex-end; }
.pokemon-result-count { min-height:1.4em; color:var(--mut); font-size:12px; }
.pokemon-table-wrap { width:100%; overflow-x:auto; }
.pokemon-table { min-width:720px; }
.pokemon-table .pokemon-number { display:block; color:var(--mut); font-size:11px; }
.pokemon-variant { min-width:0; }
.pokemon-mobile-variant { display:none; }
.pokemon-variant[data-variant]:not([data-variant=""]) { color:var(--fg); }
.col-ref a { color:inherit; text-decoration:underline dotted var(--mut); text-underline-offset:2px; }
.filter-main { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:8px 24px; align-items:stretch; }
.filter-top, .filter-primary { display:flex; flex-direction:column; justify-content:space-between; gap:10px; min-width:0; }
.filter-primary { grid-column:2; grid-row:1; }
.filter-main .filter-footer { grid-column:1 / -1; grid-row:2; }
.filter-top .deal-search { max-width:none; margin-bottom:0; }
.filter-top .sortbar, .filter-primary .row.btns { margin-bottom:0; }
.filter-primary .row.btns .tog > span { min-height:38px; padding:4px 8px; }
.deal-search { position:relative; max-width:420px; margin:0 0 14px; }
.deal-search .field, .deal-search input { width:100%; }
.deal-search-menu {
  position:absolute; z-index:30; top:100%; left:0; right:0; max-height:300px; overflow:auto;
  background:var(--card); border:1px solid var(--line); box-shadow:0 8px 24px #0003;
}
.deal-search-menu[hidden] { display:none; }
.deal-search-menu button { display:flex; flex-direction:column; gap:2px; width:100%; padding:9px 10px;
  text-align:left; border:0; border-bottom:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; cursor:pointer; }
.deal-search-menu button:hover, .deal-search-menu button[aria-selected="true"] { background:var(--card2); }
.deal-search-menu small, .deal-search-empty { color:var(--mut); font-size:12px; }
.deal-search-empty { padding:10px; }
.deal-search-help { margin-top:6px; color:var(--mut); font-size:12px; line-height:1.45; }
.deal-search-help summary { cursor:pointer; }
.deal-search-help p { margin:6px 0; }
.deal-search-help code { color:var(--fg); white-space:normal; overflow-wrap:anywhere; }

.sortbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.sortbar .lbl { color:var(--mut); font-size:12px; margin-right:4px; }
.sortbtn {
  background:var(--card); color:var(--mut); border:1px solid var(--line);
  border-radius:0; padding:8px 12px; min-height:38px; cursor:pointer; font:inherit;
}
.sortbtn:hover { color:var(--fg); border-color:var(--accent); }
.sortbtn.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }

.row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:10px; }

label.field { display:flex; flex-direction:column; font-size:12px; color:var(--mut); gap:4px; }
input, select {
  background:var(--card); color:var(--fg); border:1px solid var(--line);
  border-radius:0; padding:8px 10px; min-height:38px; font:inherit;
}
input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* toggle buttons: a real button look, driven by a hidden checkbox/radio */
.tog { display:inline-flex; position:relative; cursor:pointer; }
.tog input { position:absolute; opacity:0; width:0; height:0; }
.tog > span {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  min-width:52px; min-height:44px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:0;
  background:var(--card);
  color:var(--fg);
  font-size:12px;
  line-height:1.15;
  text-align:center;
  user-select:none;
  transition:background .12s, border-color .12s;
}
.tog > span .flag { font-size:15px; }
.tog:hover > span { border-color:var(--accent); }
.tog input:checked + span {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  font-weight:600;
}
.tog input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.tog.wide > span { min-width:auto; }

.toggroup { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filter-main .grouplabel { margin-bottom:3px; }
.filter-primary .tog > span { min-height:36px; padding:3px 8px; }
.filter-top .filter-region .tog > span { min-height:36px; padding:3px 8px; }
.filter-languages { display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:2px; }
.filter-languages .grouplabel { grid-column:1 / -1; }
.filter-languages .tog { width:100%; }
.filter-languages .tog > span { width:100%; min-width:0; min-height:0; aspect-ratio:1; flex-direction:column; gap:0; padding:2px 1px; font-size:11px; }
.filter-languages .flag { font-size:13px; }
.country-filter { border:1px solid var(--line); background:var(--card); }
.country-filter > summary { cursor:pointer; padding:9px 12px; color:var(--fg); font-size:12px; font-weight:600; }
.country-filter[open] > summary { border-bottom:1px solid var(--line); }
.country-options { padding:10px 12px 12px; }
.grouplabel { color:var(--mut); font-size:12px; width:100%; display:flex; align-items:center; gap:8px; }
.clearbtn {
  background:none; border:1px solid var(--line); color:var(--mut);
  font-size:11px; padding:3px 8px; border-radius:0; cursor:pointer; font-family:inherit;
}
.clearbtn:hover { color:var(--fg); border-color:var(--accent); }

details.adv { border:1px solid var(--line); border-radius:0; background:var(--card); margin:10px 0; }
.filter-footer { display:flex; flex-direction:column; gap:8px; min-width:0; }
.filter-footer .adv { width:100%; min-width:0; margin:0; }
.filter-footer .applybar { align-self:flex-start; }
.advbody .row .field { min-width:0; max-width:100%; }
.advbody .row .field > :is(input, select) { min-width:0; max-width:100%; }
details.adv > summary {
  cursor:pointer; padding:10px 14px; font-weight:600; list-style:none;
  display:flex; align-items:center; gap:8px; min-height:44px;
}
details.adv > summary::-webkit-details-marker { display:none; }
details.adv > summary::after { content:"+"; margin-left:auto; color:var(--mut); font-size:16px; }
details.adv[open] > summary::after { content:"-"; }
.advbody { padding:0 14px 14px; display:flex; flex-direction:column; gap:14px; }

.applybar { display:flex; align-items:center; flex-wrap:wrap; }

/* Buttons sit flush in a bar. The -1px margins collapse the doubled border
   where two buttons meet, and the active one is raised so its accent border
   is the one you see on both of its shared edges. */
.sortbar, .applybar, .toggroup, .row.btns { gap:0; }
.sortbar .sortbtn,
.applybar > *,
.toggroup .tog > span,
.row.btns .tog > span { margin:0 -1px -1px 0; }
.sortbar .sortbtn, .tog > span, .applybar > * { position:relative; }
.sortbar .sortbtn:hover, .tog:hover > span, .applybar > *:hover { z-index:1; }
.sortbar .sortbtn.active, .tog input:checked + span, .tog input:focus-visible + span { z-index:2; }
.sortbar .lbl { margin-right:10px; }
.grouplabel { margin-bottom:6px; }
.applybtn {
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);
  border-radius:0; padding:9px 18px; min-height:40px; font:inherit; font-weight:600; cursor:pointer;
}
.resetbtn {
  background:var(--card); color:var(--mut); border:1px solid var(--line);
  border-radius:0; padding:9px 14px; min-height:40px; font:inherit; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
}
.resetbtn:hover { color:var(--fg); }
.tour-launch { margin:0 0 16px; }
.tour-launch .applybtn { display:inline-flex; align-items:center; text-decoration:none; }

/* ---------- feedback ---------- */

.feedback-page { max-width:1000px; margin:0 auto; }
.feedback-intro { margin-bottom:18px; }
.feedback-intro h1 { margin:0 0 6px; font-size:24px; }
.feedback-intro p { margin:0; color:var(--mut); }
.feedback-grid { display:grid; grid-template-columns:minmax(0, 2fr) minmax(240px, 1fr); gap:16px; }
.feedback-panel { background:var(--card); border:1px solid var(--line); padding:20px; min-width:0; }
.feedback-panel h2 { margin:0 0 16px; font-size:18px; }
.feedback-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.feedback-fields .field:last-child { grid-column:1 / -1; }
.feedback-fields input, .feedback-fields textarea { width:100%; }
.feedback-fields textarea {
  background:var(--bg); color:var(--fg); border:1px solid var(--line);
  border-radius:0; padding:10px 12px; font:inherit; resize:vertical; min-height:170px;
}
.feedback-fields textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.feedback-note { color:var(--mut); font-size:12px; }
.feedback-status { min-height:1.4em; margin:12px 0 0; color:var(--ok); }
.feedback-status-error { color:var(--bad); }
.feedback-coffee p { color:var(--mut); }
.feedback-coffee-link { display:inline-flex; align-items:center; text-decoration:none; margin-top:8px; }
.feedback-changelog { margin-top:16px; }
.feedback-changelog ol { list-style:none; margin:0; padding:0; }
.feedback-changelog li { padding:12px 0; border-top:1px solid var(--line); }
.feedback-changelog li:first-child { padding-top:0; border-top:0; }
.feedback-changelog time { display:block; color:var(--mut); font-size:12px; margin-bottom:3px; }
.feedback-changelog strong { display:block; }
.feedback-changelog li p { margin:4px 0 0; color:var(--mut); }
.feedback-changelog li.changelog-highlight { padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--warnc); border-radius:6px; background:var(--card); }
.feedback-changelog li.changelog-highlight + li { border-top:0; margin-top:8px; }
.feedback-changelog li.changelog-highlight p { color:var(--fg); }
.faq-section { margin-top:32px; scroll-margin-top:16px; }
.faq-section details.faq { scroll-margin-top:16px; }
.feedback-form button:disabled, .feedback-panel button:disabled { opacity:.6; cursor:wait; }
@media (max-width:700px) {
  .feedback-grid, .feedback-fields { grid-template-columns:1fr; }
  .feedback-fields .field:last-child { grid-column:auto; }
}

/* ---------- optional first-visit tour ---------- */

.tour-invite,
.tour-card {
  position:fixed;
  z-index:1002;
  display:flex;
  align-items:flex-end;
  gap:10px;
  max-width:min(430px, calc(100vw - 24px));
}
.tour-invite { right:20px; bottom:20px; }
.tour-card { left:20px; top:20px; visibility:hidden; }
.tour-card[hidden],
.tour-spotlight[hidden] { display:none !important; }
.tour-owl {
  width:64px;
  height:64px;
  flex:0 0 auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.tour-bubble {
  position:relative;
  min-width:0;
  padding:14px;
  border:1px solid var(--accent);
  background:var(--card);
  color:var(--fg);
  box-shadow:var(--shadow);
}
.tour-bubble::after {
  content:"";
  position:absolute;
  left:-8px;
  bottom:18px;
  width:14px;
  height:14px;
  background:var(--card);
  border-left:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
  transform:rotate(45deg);
}
.tour-bubble p { margin:0; line-height:1.45; }
.tour-progress { display:block; margin-bottom:5px; color:var(--mut); font-size:11px; }
.tour-actions { display:flex; flex-wrap:wrap; gap:0; margin-top:12px; }
.tour-actions button {
  min-height:36px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:0;
  background:var(--card2);
  color:var(--fg);
  font:inherit;
  font-size:12px;
  cursor:pointer;
  margin:0 -1px -1px 0;
}
.tour-actions button:hover,
.tour-actions button:focus-visible { position:relative; z-index:1; border-color:var(--accent); outline:none; }
.tour-actions .tour-primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.tour-close {
  position:absolute;
  right:5px;
  top:3px;
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  color:var(--mut);
  font:20px/1 system-ui,sans-serif;
  cursor:pointer;
}
.tour-close:hover { color:var(--fg); }
.tour-spotlight {
  position:fixed;
  z-index:1001;
  display:none;
  pointer-events:none;
  border:2px solid var(--accent);
  box-shadow:0 0 0 9999px rgba(6,9,14,.72), 0 0 24px rgba(75,159,255,.45);
  transition:top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
:root[data-theme="light"] .tour-spotlight { box-shadow:0 0 0 9999px rgba(20,25,40,.55), 0 0 22px rgba(26,102,208,.35); }
body.tour-open { overflow-x:hidden; }

@media (prefers-reduced-motion:reduce) {
  .tour-spotlight, .navpanel { transition:none; }
}

/* ---------- table ---------- */

table { width:100%; border-collapse:collapse; }
th, td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { color:var(--mut); font-weight:500; white-space:nowrap; }
th[title] { cursor:help; text-decoration:underline dotted var(--mut); text-underline-offset:3px; }
.table-sort { display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:none; color:inherit; font:inherit; text-decoration:none; cursor:pointer; white-space:nowrap; }
.table-sort:hover, .table-sort:focus-visible { color:var(--accent); }
.table-sort:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sort-indicator { display:inline-block; width:10px; text-align:center; font-size:10px; }
.sort-indicator::after { content:"↕"; opacity:.55; }
th[aria-sort="ascending"] .sort-indicator::after { content:"▲"; opacity:1; }
th[aria-sort="descending"] .sort-indicator::after { content:"▼"; opacity:1; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.below-reference td {
  background:var(--ref-glow);
  box-shadow:inset 0 1px 0 var(--ref-glow-edge), inset 0 -1px 0 var(--ref-glow-edge);
}
tr.below-reference td:first-child { box-shadow:inset 1px 0 0 var(--ref-glow-edge), inset 0 1px 0 var(--ref-glow-edge), inset 0 -1px 0 var(--ref-glow-edge); }
tr.below-reference td:last-child { box-shadow:inset -1px 0 0 var(--ref-glow-edge), inset 0 1px 0 var(--ref-glow-edge), inset 0 -1px 0 var(--ref-glow-edge); }

/* Name cells stay table cells (so their borders span the whole row); the
   image and name are laid out by the inner .name-content flex box. */
td.name { display:table-cell; }
.name-content { display:flex; align-items:center; }
/* Prices never break between the amount and the euro sign. */
.pmin, .pnext { white-space:nowrap; }
.name a { color:var(--fg); text-decoration:none; }
.name a:hover { color:var(--accent); }
.deal-copy {
  margin-left:6px; padding:3px 6px; border:1px solid var(--accent);
  background:var(--card); color:var(--accent); font:inherit; font-size:11px;
  cursor:pointer; white-space:nowrap;
}
.deal-copy:hover, .deal-copy:focus-visible { background:var(--accent); color:var(--on-accent); }
.thumb { position:relative; display:inline-block; margin-right:8px; flex:0 0 auto; }
img.card { height:42px; border-radius:3px; vertical-align:middle; display:block; }
.card-zoom {
  display:none; position:absolute; left:52px; top:-60px; width:240px;
  border-radius:10px; box-shadow:var(--shadow); z-index:50; pointer-events:none;
}
.thumb:hover .card-zoom { display:block; }

.badge { display:inline-block; padding:1px 6px; border-radius:0; font-size:11px; }
.foil { background:#3a2a4d; color:#ecdcff; }
:root[data-theme="light"] .foil { background:#ede2ff; color:#4a2d85; }

/* Finish badges: 12px pixel icon + label. Each finish has its own colors. */
.badge.finish { display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font:600 12px/14px "Barlow Condensed", system-ui, sans-serif; text-transform:uppercase; letter-spacing:.04em; }
:root:not([data-theme="light"]) .badge.finish { text-shadow:0 1px 1px rgba(0,0,0,.55); }
.finish-ico { display:inline-block; width:12px; height:12px; flex:0 0 12px; background:no-repeat center / 12px 12px; image-rendering:pixelated; }
.finish-foil .finish-ico { background-image:url("../img/finish/foil.png"); }
.finish-holo .finish-ico { background-image:url("../img/finish/holo.png"); }
.finish-reverse .finish-ico { background-image:url("../img/finish/reverse.png"); }
.finish-special .finish-ico { background-image:url("../img/finish/special.png"); }
.finish-first .finish-ico { background-image:url("../img/finish/first.png"); }
.finish-graded .finish-ico { background-image:url("../img/finish/graded.png"); }
.finish-holo { background:#3d3215; color:#ffe08a; }
.finish-reverse { background:#16304a; color:#b9e0ff; }
.finish-special { background:#3f1739; color:#ffc2f0; }
.finish-first { background:#33281a; color:#f7d58f; }
.finish-graded { background:#1d3326; color:#b5ecc7; }
:root[data-theme="light"] .finish-holo { background:#fff1c4; color:#5e4000; }
:root[data-theme="light"] .finish-reverse { background:#dcefff; color:#164878; }
:root[data-theme="light"] .finish-special { background:#ffe0f7; color:#741765; }
:root[data-theme="light"] .finish-first { background:#f8ead0; color:#5a3c0c; }
:root[data-theme="light"] .finish-graded { background:#dcf3e4; color:#17552e; }
.pokemon-variant .badge.finish, .pokemon-mobile-variant .badge.finish { margin:1px 4px 1px 0; }
.variant-rest { display:inline-block; margin:1px 0; }

/* Shiny badges (Magic foil, Pokémon holo and special rarities): a light sweep
   moves across the badge background and two pixel sparkles twinkle. Both sit
   behind the text (z-index -1 inside an isolated badge). */
.finish-foil, .finish-holo, .finish-special { position:relative; overflow:hidden; isolation:isolate; }
.finish-foil::after, .finish-holo::after, .finish-special::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, var(--badge-sheen) 50%, transparent 70%) no-repeat;
  background-size:250% 100%; background-position:160% 0;
  animation:badge-sheen 3.2s ease-in-out infinite;
}
.finish-foil::before, .finish-holo::before, .finish-special::before {
  content:""; position:absolute; z-index:-1; pointer-events:none; width:2px; height:2px;
  top:3px; right:5px; background:var(--badge-spark);
  box-shadow:-14px 8px 0 var(--badge-spark), -31px 1px 0 var(--badge-spark);
  animation:badge-twinkle 1.6s steps(1, end) infinite;
}
/* Foil and special also shift through a faint rainbow underneath. */
.finish-foil, .finish-special {
  background-image:linear-gradient(90deg, rgba(255,120,220,.22), rgba(255,210,100,.22), rgba(120,240,200,.22), rgba(120,180,255,.22), rgba(200,150,255,.22), rgba(255,120,220,.22));
  background-size:300% 100%; animation:badge-rainbow 6s linear infinite;
}
.finish-foil { --badge-sheen:rgba(150,90,210,.45); --badge-spark:#fff4fd; }
.finish-holo { --badge-sheen:rgba(200,150,30,.45); --badge-spark:#fff8d6; }
.finish-special { --badge-sheen:rgba(190,60,170,.45); --badge-spark:#ffffff; }
:root[data-theme="light"] .finish-foil { --badge-sheen:rgba(176,120,255,.45); --badge-spark:#b07de8; }
:root[data-theme="light"] .finish-holo { --badge-sheen:rgba(255,186,30,.55); --badge-spark:#e0a400; }
:root[data-theme="light"] .finish-special { --badge-sheen:rgba(235,90,210,.4); --badge-spark:#e14fd0; }
tr:nth-child(3n+2) .badge.finish::after { animation-delay:-1.1s; }
tr:nth-child(3n) .badge.finish::after { animation-delay:-2.2s; }
tr:nth-child(2n) .badge.finish::before { animation-delay:-.8s; }
@keyframes badge-sheen {
  0%, 40% { background-position:160% 0; }
  100% { background-position:-60% 0; }
}
@keyframes badge-twinkle {
  0%, 100% { opacity:0; }
  25% { opacity:1; box-shadow:-14px 8px 0 transparent, -31px 1px 0 var(--badge-spark); }
  50% { opacity:1; box-shadow:-14px 8px 0 var(--badge-spark), -31px 1px 0 transparent; }
  75% { opacity:0; }
}
@keyframes badge-rainbow { to { background-position:300% 0; } }
/* Reduced motion: the sweeping sheen and rainbow stop; the sparkles only
   blink in place, so they keep playing. */
@media (prefers-reduced-motion:reduce) {
  .finish-foil, .finish-special { animation:none; }
  .finish-foil::after, .finish-holo::after, .finish-special::after { animation:none; display:none; }
}

/* Foil glint: a light sweep across the small card image, tinted per finish. */
.thumb.glint::after {
  content:""; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, var(--glint, rgba(255,255,255,.6)) 50%, transparent 65%) no-repeat;
  background-size:300% 100%; background-position:150% 0; mix-blend-mode:screen;
  animation:card-glint 5s ease-in-out infinite;
}
.thumb.glint-foil { --glint:rgba(255,190,245,.65); }
.thumb.glint-holo { --glint:rgba(255,228,140,.7); }
.thumb.glint-reverse { --glint:rgba(160,215,255,.7); }
.thumb.glint-special { --glint:rgba(255,160,235,.7); }
tr:nth-child(3n+2) .thumb.glint::after { animation-delay:-1.7s; }
tr:nth-child(3n) .thumb.glint::after { animation-delay:-3.3s; }
@keyframes card-glint {
  0%, 55% { background-position:150% 0; }
  100% { background-position:-50% 0; }
}
@media (prefers-reduced-motion:reduce) {
  .thumb.glint::after { animation:none; display:none; }
}

/* CardTrader-style condition chips */
.cond {
  display:inline-block; min-width:26px; text-align:center;
  padding:2px 6px; border-radius:0;
  font-size:11px; font-weight:700; letter-spacing:.3px; color:#fff;
}
.cond-MT { background:#0f7a3d; }
.cond-NM { background:#3a9d51; }
.cond-SP { background:#8fae1f; }
.cond-MP { background:#cf9a1c; }
.cond-PL { background:#d97b24; }
.cond-HP { background:#c9512c; }
.cond-PO { background:#a92f2f; }
.cond-XX { background:#6b7280; }

.condlang { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.condlang .flag { font-size:15px; }

.st-active { color:var(--ok); }
.st-sold_or_removed { color:var(--bad); }
.st-repriced { color:var(--warnc); }
.pmin { color:var(--ok); font-weight:600; }
.pnext { color:var(--bad); }
.pref { color:var(--mut); }
.warn { color:var(--warnc); cursor:help; margin-left:2px; }
.sub { display:block; color:var(--mut); font-size:11px; }
th.col-copies, td.col-copies { width:70px; min-width:70px; padding-left:4px; padding-right:4px; }
th.col-delivery, td.col-delivery { width:180px; min-width:180px; }
.seller-country { display:inline-block; max-width:100%; padding:3px 7px; border:1px solid var(--accent); color:var(--accent); font-size:12px; font-weight:700; }
.delivery-ready { display:block; width:max-content; margin-top:4px; padding:2px 6px; background:#f5c94c; color:#332500; font-size:11px; font-weight:700; white-space:nowrap; }
a.deal { color:var(--accent); text-decoration:none; white-space:nowrap; }
/* Pokémon tables have a Variant column more than Magic: let headings, rarity
   badges and the seller country wrap so the table stays inside the page. */
table[data-game="pokemon"] th, table[data-game="pokemon"] .table-sort { white-space:normal; }
table[data-game="pokemon"] th.col-delivery, table[data-game="pokemon"] td.col-delivery { width:auto; min-width:0; }
.pokemon-variant .badge.finish, .pokemon-mobile-variant .badge.finish { white-space:normal; }
/* Magic comparison in a better condition than the minimum ("vs NM"). */
.cond-vs { cursor:help; margin-top:2px; }
.cond-vs .cond { min-width:0; padding:0 4px; font-size:10px; }
/* Pokémon reference computed from CardTrader listings (no Cardmarket price). */
.ref-ct { font-style:italic; }
.ref-src { margin-left:4px; padding:0 3px; border:1px solid var(--line); font-size:9px; font-style:normal; letter-spacing:.3px; vertical-align:1px; }

/* Tablet widths: the full deal table does not fit, so tighten it and drop the
   least important columns until the phone layout (720px and below) takes over. */
@media (min-width:721px) and (max-width:1100px) {
  table[data-deal-table] th, table[data-deal-table] .table-sort { white-space:normal; }
  table[data-deal-table] th, table[data-deal-table] td { padding:8px 6px; }
  table[data-deal-table] th.col-delivery, table[data-deal-table] td.col-delivery { width:auto; min-width:0; }
  table[data-deal-table] .col-copies { display:none; }
}
@media (min-width:721px) and (max-width:960px) {
  table[data-deal-table] .col-ref { display:none; }
}
@media (min-width:721px) and (max-width:800px) {
  table[data-deal-table] .col-variant { display:none; }
  table[data-deal-table] .pokemon-mobile-variant { display:block; margin-top:4px; font-size:10px; }
}

@media (max-width:960px) {
  .filter-main { display:flex; flex-direction:column; gap:10px; }
  .filter-top, .filter-primary { width:100%; justify-content:flex-start; gap:8px; }
  .filter-languages { display:flex; flex-wrap:wrap; gap:0; align-items:center; }
  .filter-languages .tog { width:auto; }
  .filter-languages .tog > span { width:auto; min-width:52px; min-height:44px; aspect-ratio:auto; flex-direction:column; gap:1px; padding:3px 8px; }
  .filter-footer { display:block; width:100%; min-width:0; }
  .filter-footer .adv { margin:0 0 8px; }
}
@media (min-width:961px) and (max-width:1200px) {
  .filter-languages { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .filter-languages .tog > span { min-height:42px; }
}
a.help {
  color:var(--accent); text-decoration:none; font-size:11px;
  border:1px solid var(--line); border-radius:50%; padding:0 5px;
}

.pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin:16px 0; }
.pagination a { color:var(--accent); text-decoration:none; padding:8px 12px; }
.pagination .disabled { color:var(--line); padding:8px 12px; }

.explain-img { max-width:100%; border-radius:8px; display:block; margin:12px 0; }
details.faq { border-bottom:1px solid var(--line); }
details.faq > summary {
  cursor:pointer; padding:12px 0; font-weight:600; list-style:none;
  display:flex; align-items:center; gap:10px;
}
details.faq > summary::-webkit-details-marker { display:none; }
details.faq > summary::after { content:"+"; margin-left:auto; color:var(--mut); font-size:16px; }
details.faq[open] > summary::after { content:"-"; }
details.faq > summary:hover { color:var(--accent); }
.faqa { padding:0 0 12px; }
.faqa > :first-child { margin-top:0; }
.formula { background:var(--card); border:1px solid var(--line); padding:10px 14px;
  overflow-x:auto; font:13px/1.6 ui-monospace, Consolas, monospace; white-space:pre; }

/* ---------- watchlist ---------- */

.watchlist { display:flex; flex-direction:column; gap:16px; }
.watchlist-intro { max-width:760px; }
.watchlist-intro h2, .watchlist-intro h1 { margin-bottom:6px; }
.watchlist-intro p { margin:6px 0; }
.watchlist-intro a { color:var(--accent); }
.watchlist-game-picker { display:flex; flex-wrap:wrap; gap:0; margin-top:12px; }
.watchlist-game-picker a { display:inline-flex; align-items:center; min-height:38px; padding:7px 14px; border:1px solid var(--line); color:var(--mut); text-decoration:none; }
.watchlist-game-picker a[aria-current="page"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }

.watchlist-form { position:relative; }
.watchlist-step {
  background:var(--card);
  border:1px solid var(--line);
  padding:18px;
}
.watchlist-step > h3,
.watchlist-review-heading h3 { margin:0; }
.watchlist-input-grid {
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(240px, 1fr);
  gap:18px;
  margin-top:14px;
}
.watchlist-list-field { min-width:0; }
.watchlist-textarea {
  width:100%;
  min-height:220px;
  resize:vertical;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:0;
  padding:10px 12px;
  font:13px/1.5 ui-monospace, Consolas, monospace;
}
.watchlist-textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.watchlist-side-fields { display:flex; flex-direction:column; gap:14px; }
.watchlist-side-fields input { width:100%; }
.watchlist-format {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  background:var(--card2);
  border-left:3px solid var(--accent);
  color:var(--mut);
  font-size:12px;
}
.watchlist-format strong { color:var(--fg); }
.watchlist-format code { color:var(--fg); overflow-wrap:anywhere; }
.watchlist-line-count { margin:0; color:var(--mut); font-size:12px; }
.watchlist-line-count.is-over-limit { color:var(--bad); font-weight:600; }
.watchlist-actions { display:flex; gap:0; margin-top:16px; }

.watchlist-hp {
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.watchlist-alert {
  border:1px solid var(--line);
  padding:10px 12px;
  margin-bottom:12px;
}
.watchlist-alert-error { border-color:var(--bad); color:var(--bad); }

.watchlist-review-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.watchlist-review-heading p { margin:4px 0 0; }
.watchlist-summary { display:flex; flex-wrap:wrap; gap:0; }
.watchlist-stat {
  min-width:96px;
  padding:7px 10px;
  border:1px solid var(--line);
  margin:0 -1px -1px 0;
  text-align:center;
}
.watchlist-stat strong { display:block; color:var(--fg); font-size:18px; line-height:1.1; }
.watchlist-stat span { color:var(--mut); font-size:11px; }
.watchlist-stat-ok strong { color:var(--ok); }
.watchlist-stat-bad strong { color:var(--bad); }

.watchlist-unrecognized {
  margin:0 0 14px;
  padding:10px 12px;
  background:var(--card2);
  border-left:3px solid var(--bad);
}
.watchlist-unrecognized ul { margin:7px 0 0; padding-left:22px; }
.watchlist-unrecognized li + li { margin-top:7px; }
.watchlist-unrecognized code { overflow-wrap:anywhere; }
.watchlist-rejection-reason { display:block; color:var(--mut); font-size:12px; }

.watchlist-source {
  border:1px solid var(--line);
  margin:0 0 14px;
}
.watchlist-source > summary {
  cursor:pointer;
  padding:9px 12px;
  color:var(--mut);
  font-weight:600;
  list-style:none;
}
.watchlist-source > summary::-webkit-details-marker { display:none; }
.watchlist-source > summary::after { content:"+"; float:right; }
.watchlist-source[open] > summary::after { content:"-"; }
.watchlist-source-body { padding:0 12px 12px; }
.watchlist-source-body .watchlist-textarea { min-height:140px; }
.watchlist-source-body .watchlist-line-count { margin:6px 0 10px; }

.watchlist-bulk {
  padding:12px;
  margin-bottom:12px;
  background:var(--card2);
  border:1px solid var(--line);
}
.watchlist-selection-tools {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
}
.watchlist-selection-tools strong { margin-right:4px; }
.watchlist-selection-status { color:var(--mut); font-size:12px; margin-left:auto; }
.watchlist-bulk-fields { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
.watchlist-bulk-fields label.field { min-width:150px; }
.watchlist-bulk-fields select { width:100%; }
.watchlist-bulk-apply { min-height:38px; }
.watchlist-bulk-status { min-height:16px; margin:7px 0 0; }

.watchlist-table-wrap {
  position:relative;
  width:100%;
  overflow-x:auto;
  border:1px solid var(--line);
  margin-bottom:16px;
  scrollbar-width:thin;
}
.watchlist-table { min-width:940px; }
.watchlist-table th,
.watchlist-table td { background:var(--bg); }
.watchlist-table tbody tr.is-selected td { background:var(--card2); }
.watchlist-table tbody tr:last-child td { border-bottom:0; }
.watchlist-table select { width:100%; min-width:120px; }
.watchlist-table .watchlist-expansion-select { min-width:230px; }
.watchlist-select-cell { width:42px; text-align:center; }
.watchlist-check-label { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.watchlist-check-label input { width:18px; height:18px; min-height:0; padding:0; accent-color:var(--accent); }
.watchlist-card-cell { display:flex; align-items:center; min-width:220px; }
.watchlist-card-name { font-weight:600; overflow-wrap:anywhere; }
.watchlist-thumb img[hidden] { display:none !important; }
.watchlist-quantity { font-variant-numeric:tabular-nums; }

.watchlist-save {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
  justify-content:flex-end;
}
.watchlist-save label.field { min-width:280px; }
.watchlist-save input { width:100%; }
.watchlist-current-deals { margin-top:16px; padding:16px; border:1px solid var(--line); background:var(--card2); }
.watchlist-current-deals[hidden] { display:none; }
.watchlist-current-deals h3 { margin:0 0 12px; }
.watchlist-deal-group { padding:10px 0; border-top:1px solid var(--line); }
.watchlist-deal-group h4 { margin:0 0 6px; }
.watchlist-deal-group p { margin:0; }
.watchlist-deal-group ul { margin:0; padding-left:18px; }
.watchlist-deal-group li { margin:5px 0; }
.watchlist-deal-group a { color:var(--accent); margin-left:8px; }
.watchlist-consent { margin:8px 0 0; text-align:right; }
.watchlist-review-stale { margin:10px 0 0; color:var(--warnc); text-align:right; }
.watchlist-sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.watchlist button:disabled { opacity:.5; cursor:not-allowed; }

.watchlist-status-page {
  max-width:660px;
  margin:36px auto;
  padding:24px;
  background:var(--card);
  border:1px solid var(--line);
  text-align:center;
}
.watchlist-status-page h2 { margin:10px 0; }
.watchlist-status-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:2px solid var(--accent);
  color:var(--accent);
  font:700 24px/1 ui-monospace, Consolas, monospace;
}
.watchlist-status-ok { border-color:var(--ok); color:var(--ok); }
.watchlist-status-bad { border-color:var(--bad); color:var(--bad); }
.watchlist-dev-link {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:18px 0;
  padding:12px;
  border:1px dashed var(--warnc);
  color:var(--mut);
}
.watchlist-dev-link strong { color:var(--warnc); }
.watchlist-dev-link .applybtn,
.watchlist-status-actions .applybtn { display:inline-flex; align-items:center; text-decoration:none; }
.watchlist-status-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin-top:20px; }
.watchlist-status-actions > * { margin:0 -1px -1px 0; }

footer.site {
  max-width:1200px; margin:0 auto; padding:16px 20px 32px;
  border-top:1px solid var(--line); color:var(--mut); font-size:12px;
}

/* ---------- mobile ---------- */

@media (max-width:720px) {
  main { padding:12px; }
  header { padding:10px 12px; gap:8px 10px; }
  header nav a { padding:6px 8px; font-size:13px; }
  .spacer { display:none; }
  .brand .wordmark { height:26px; }
  .mascot { display:none; }
  /* Row 1: logo, page sprite (centered), switches. Row 2: the menu. */
  .brand { order:1; }
  .pagesprite { order:2; margin:-10px auto -4px; }
  .pagesprite.pagesprite-help { margin:-6px auto 0; }
  .hbtns { order:3; margin-left:auto; }
  .pagesprite ~ .hbtns { margin-left:0; }
  .themebtn { min-width:40px; padding:6px 10px; }
  .themebtn .tlabel { display:none; }
  footer.site { padding:14px 12px 28px; }

  /* only image+name, min, next best, language flag and condition survive */
  .col-exp, .col-variant, .col-ref, .col-copies, .col-delivery, .col-status, .col-market, .mob-hide { display:none; }
  .sealed-table .col-type { display:none; }
  .sealed-table img.sealed-img { width:40px; height:36px; }
  .pokemon-mobile-variant { display:block; margin-top:4px; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }

  .pokemon-page { min-width:0; }
  .pokemon-filters { align-items:stretch; }
  .pokemon-filters .field { flex:1 1 calc(50% - 8px); min-width:0; }
  .pokemon-filters .applybtn, .pokemon-filters .resetbtn { flex:1 1 45%; justify-content:center; text-align:center; }

  th, td { padding:6px 4px; }
  th { font-size:10px; }
  img.card { height:36px; }
  .card-zoom { display:none !important; }
  .name { font-size:12px; line-height:1.2; }
  .name-content > span:last-child { min-width:0; overflow-wrap:break-word; }
  td.name .deal-copy { display:block; margin:4px 0 0; }
  .thumb { margin-right:5px; }
  .sub { font-size:10px; white-space:nowrap; }
  .watchlist .sub,
  .watchlist-status-page .sub { white-space:normal; }
  td.num, th.num { font-size:12px; white-space:nowrap; }
  .condlang { gap:4px; }
  .cond { min-width:22px; padding:2px 4px; font-size:10px; }
  .condlang .flag { font-size:13px; }

  .cdeal { flex:0 0 140px; }
  .cdeal-owner { flex-basis:140px; }
  .tog > span { min-width:56px; min-height:46px; }
  .filter-primary .row.btns .tog > span, .filter-primary .tog > span { min-height:46px; }
  .sortbar { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .sortbtn { white-space:nowrap; }
  .tour-invite { left:12px; right:12px; bottom:12px; }
  .tour-card { left:12px; right:12px; max-width:none; }
  .tour-owl { width:52px; height:52px; }
  .tour-bubble { padding:12px; }

  .watchlist-step { padding:12px; }
  .watchlist-input-grid { grid-template-columns:1fr; gap:12px; }
  .watchlist-review-heading { flex-direction:column; gap:12px; }
  .watchlist-summary { width:100%; }
  .watchlist-stat { flex:1 1 90px; }
  .watchlist-selection-status { flex-basis:100%; margin-left:0; }
  .watchlist-bulk-fields { align-items:stretch; }
  .watchlist-bulk-fields label.field { flex:1 1 140px; }
  .watchlist-bulk-apply { flex:1 1 100%; }
  .watchlist-table { min-width:850px; }
  .watchlist-save { justify-content:stretch; }
  .watchlist-save label.field,
  .watchlist-save .applybtn { width:100%; min-width:0; }
  .watchlist-consent { text-align:left; }
  .watchlist-review-stale { text-align:left; }
  .watchlist-status-page { margin:18px auto; padding:18px 12px; }
}

/* Laptop widths: tighten the header so the full menu stays on one row. */
@media (min-width:1201px) and (max-width:1400px) {
  header { gap:12px; }
  header nav a, .navmenu summary { padding:6px 8px; font-size:13px; }
  .themebtn .tlabel { display:none; }
}

/* Below that, the menu moves into a side drawer opened by the three-line button. */
@media (max-width:1200px) {
  header .spacer { display:none; }
  header .pagesprite { margin:-12px auto; }
  header .pagesprite.pagesprite-help { margin:-8px auto; }
  header .pagesprite ~ .hbtns { margin-left:0; }
  header .hbtns { margin-left:auto; }
  .themebtn.navtoggle { display:flex; justify-content:center; min-width:40px; padding:6px 10px; }
  .navpanel {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(300px, 86vw);
    z-index:1100;
    overflow-y:auto;
    background:var(--bg);
    border-left:1px solid var(--line);
    box-shadow:var(--shadow);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .2s ease, visibility .2s;
  }
  body.nav-open { overflow:hidden; }
  body.nav-open .navpanel { transform:none; visibility:visible; }
  .navpanel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 8px 12px 18px;
    border-bottom:4px solid transparent;
    border-image:repeating-linear-gradient(90deg, #e8e0c8 0 4px, #3b7dd8 4px 8px, #4a4458 8px 12px, #d4442f 12px 16px, #3fa45b 16px 20px, transparent 20px 24px) 4;
    font-weight:700;
  }
  .navclose {
    width:40px; height:40px;
    border:0;
    background:transparent;
    color:var(--mut);
    font:26px/1 system-ui, sans-serif;
    cursor:pointer;
  }
  .navclose:hover { color:var(--fg); }
  header nav.nav-main, header nav.nav-more { flex-direction:column; flex-wrap:nowrap; gap:0; padding:8px 0; }
  header nav.nav-more { border-top:1px solid var(--line); }
  header nav a, .navmenu summary { padding:12px 18px; font-size:15px; }
  header nav a::before { left:8px; }
  header nav a[aria-current="page"] { background:var(--card); }
  .navmenu-list {
    position:static;
    margin:0 18px 6px;
    padding:0;
    border:0;
    border-left:2px solid var(--accent);
    background:transparent;
    box-shadow:none;
  }
  .navbackdrop { display:block; position:fixed; inset:0; z-index:1099; background:rgba(6,9,14,.6); }
  .navbackdrop[hidden] { display:none; }
}

/* Phones: one compact header row. */
@media (max-width:720px) {
  header .pagesprite { margin:-10px auto -4px; }
  header .pagesprite.pagesprite-help { margin:-6px auto 0; }
  .brand .wordmark { height:22px; }
  .hbtns { gap:4px; }
  .themebtn.langbtn { padding:4px 6px; }
}
@media (max-width:380px) {
  header { gap:6px; }
  .brand .wordmark { height:19px; }
  header .pagesprite { width:56px; height:56px; }
}

@media (max-width:380px) {
  .sortbar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  .sortbar .lbl { grid-column:1 / -1; margin-right:0; }
  .sortbar .sortbtn { min-width:0; padding:6px 4px; white-space:normal; }
  table[data-deal-table] th,
  table[data-deal-table] .table-sort { white-space:normal; }
}