/* ==========================================================================
   Completionist — set progress, the Living Dex, artist galleries, binders.
   Loaded by templates/completionist/*.html only.

   Same material as the landing and the app skin: dark grey panels that get
   lighter as they rise, the logo's ice→lavender, and rainbow foil on the
   things a collector would be proud of (a complete set, a caught Pokémon, a
   filled pocket). Motion is transform/opacity only and stops for
   prefers-reduced-motion.
   ========================================================================== */
[hidden] { display: none !important; }
:root {
  --cp-rainbow: linear-gradient(90deg, #ff9fc4, #ffe08a 20%, #8fe9a6 40%, #9fe3f5 60%, #cec6f6 80%, #ff9fc4);
  --cp-irid: linear-gradient(100deg, #f4fbff 0%, #bfe9ff 16%, #f2ccff 32%, #fff1b8 48%, #b6ffe4 64%, #9fdcff 80%, #f4fbff 100%);
  --cp-surface: linear-gradient(180deg, rgba(40, 43, 50, 0.62), rgba(23, 25, 29, 0.46));
  --cp-rim: inset 0 0 0 1px var(--line), 0 30px 60px -42px rgba(0, 0, 0, 0.85);
  --cp-card-r: 4.6% / 3.35%;
  --cp-heart: #ffe08a;   /* the wishlist star: the rainbow's gold */
  --cp-glitter: url("../img/sh-glitter.webp");
}
:root[data-theme="light"] {
  --cp-surface: linear-gradient(180deg, #ffffff, #f7f8fb);
  --cp-rim: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(40, 44, 50, 0.35);
  --cp-heart: #a8740c;
}

/* ------------------------------------------------------------ page head */
.cp-head { align-items: flex-end; }
.cp-head .eyebrow a { color: inherit; text-decoration: none; }
.cp-head .eyebrow a:hover { color: var(--ink); }
.cp-lede { margin: 0.45rem 0 0; max-width: 40rem; }
.cp-section-h {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; margin: 0 0 0.7rem;
}
.cp-block { display: block; margin-top: 0.15rem; }
.cp-of { font-size: 0.55em; color: var(--muted); font-weight: 700; letter-spacing: -0.01em; }
.cp-foot-note { margin: 1.6rem 0 0; max-width: 60rem; line-height: 1.5; }
.cp-foot-note a { color: var(--ice); }
.cp-abbr { text-decoration: none; cursor: help; color: var(--ice); margin-left: 1px; }

/* -------------------------------------------------------- segmented ctl */
.cp-seg {
  display: inline-flex; padding: 3px; border-radius: 999px; gap: 2px; max-width: 100%; overflow-x: auto;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); scrollbar-width: none;
}
.cp-seg::-webkit-scrollbar { display: none; }
.cp-seg a {
  padding: 0.38rem 0.85rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 0.15s, background 0.15s;
}
.cp-seg a:hover { color: var(--ink); text-decoration: none; }
.cp-seg a.on { background: var(--cp-irid); background-size: 180% 100%; color: #101115; font-weight: 800;
  box-shadow: 0 6px 18px -8px rgba(191, 232, 247, 0.6); }
:root[data-theme="light"] .cp-seg a.on { background: var(--ink); color: #fff; box-shadow: none; }

.cp-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; margin: 1.6rem 0 1.1rem; }
.cp-toolbar .field { min-width: 9.5rem; }
.cp-toolbar .field select, .cp-toolbar .field input { padding: 0.5rem 0.8rem; font-size: 0.88rem; }
.cp-toolbar .cp-seg { align-self: flex-end; }
.cp-count { align-self: flex-end; padding-bottom: 0.55rem; }

/* ---------------------------------------------------------------- rings */
.cp-rings { position: relative; display: inline-grid; place-items: center; flex: none; width: 64px; aspect-ratio: 1; }
.cp-rings svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cp-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.075); stroke-width: 6; }
.cp-ring-track.in { stroke-width: 4.5; stroke: rgba(255, 255, 255, 0.06); }
.cp-ring-bar { fill: none; stroke: url(#cp-rb); stroke-width: 6; stroke-linecap: round; animation: cp-ring-in 1.1s var(--ease) both; }
.cp-ring-bar.in { stroke: url(#cp-ice); stroke-width: 4.5; animation-delay: 0.12s; }
.cp-ring-bar.is-zero { visibility: hidden; }
.cp-rings b { position: relative; font-weight: 900; font-size: 0.86rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.cp-rings b small { font-size: 0.62em; font-weight: 800; opacity: 0.7; }
.cp-rings b svg { width: 1.2em; height: 1.2em; --ico-stroke: url(#sh-ico-g); filter: drop-shadow(0 0 4px rgba(191, 232, 247, 0.7)); }
.cp-rings.is-done svg { filter: drop-shadow(0 0 6px rgba(255, 190, 230, 0.45)); }
:root[data-theme="light"] .cp-ring-track { stroke: rgba(20, 24, 28, 0.08); }
@keyframes cp-ring-in { from { stroke-dasharray: 0 100; } }
.cp-rings-sm { width: 44px; }
.cp-rings-sm b { font-size: 0.7rem; }
.cp-rings-md { width: 68px; }
.cp-rings-lg { width: 92px; }
.cp-rings-lg b { font-size: 1.15rem; }
.cp-rings-xl { width: 148px; }
.cp-rings-xl b { font-size: 1.9rem; }

/* ---------------------------------------------------- the foil sticker */
.cp-seal {
  --seal: 66px;
  position: absolute; z-index: 3; top: -12px; right: -10px; width: var(--seal); height: var(--seal);
  display: grid; place-items: center; transform: rotate(-14deg); pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
}
.cp-seal-in {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; color: #121317; font-weight: 900; font-size: calc(var(--seal) * 0.12); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.05; text-align: center;
  background: var(--cp-glitter) 0 0 / 60px 60px, conic-gradient(from 20deg, #ffd6ec, #fff1b8, #c9ffe4, #c6ecff, #e5dcff, #ffd6ec);
  background-blend-mode: soft-light, normal;
  clip-path: polygon(50.0% 0.0%, 57.0% 5.6%, 65.5% 2.4%, 70.4% 9.9%, 79.4% 9.5%, 81.8% 18.2%, 90.5% 20.6%, 90.1% 29.6%, 97.6% 34.5%, 94.4% 43.0%, 100.0% 50.0%, 94.4% 57.0%, 97.6% 65.5%, 90.1% 70.4%, 90.5% 79.4%, 81.8% 81.8%, 79.4% 90.5%, 70.4% 90.1%, 65.5% 97.6%, 57.0% 94.4%, 50.0% 100.0%, 43.0% 94.4%, 34.5% 97.6%, 29.6% 90.1%, 20.6% 90.5%, 18.2% 81.8%, 9.5% 79.4%, 9.9% 70.4%, 2.4% 65.5%, 5.6% 57.0%, 0.0% 50.0%, 5.6% 43.0%, 2.4% 34.5%, 9.9% 29.6%, 9.5% 20.6%, 18.2% 18.2%, 20.6% 9.5%, 29.6% 9.9%, 34.5% 2.4%, 43.0% 5.6%);
}
.cp-seal-in i { font-style: normal; font-size: 1.5em; line-height: 1; margin-bottom: 0.05em; }
.cp-seal-in::after {
  content: ""; position: absolute; inset: -40% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.9) 50%, transparent 58%);
  transform: translateX(-60%); animation: cp-glint 5s ease-in-out infinite;
}
.cp-seal-master .cp-seal-in { background: var(--cp-glitter) 0 0 / 60px 60px, conic-gradient(from 0deg, #ff9fc4, #ffe08a, #8fe9a6, #9fe3f5, #cec6f6, #ff9fc4); }
.cp-seal-tile { top: auto; right: 10px; bottom: -18px; --seal: 70px; transform: rotate(-12deg); }
.cp-seal-sm { --seal: 44px; position: relative; top: auto; right: auto; display: inline-grid; vertical-align: middle; margin-left: 0.3rem; }
@keyframes cp-glint { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }

/* ---------------------------------------------------------------- hearts */
.cp-heart {
  --cp-fill: none;
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; cursor: pointer;
  border-radius: 50%; border: 0; background: rgba(12, 13, 16, 0.55); color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 0.15s var(--ease), color 0.15s;
}
.cp-heart svg { width: 16px; height: 16px; }
.cp-heart:hover { color: var(--cp-heart); transform: scale(1.08); }
.cp-heart.on { --cp-fill: var(--cp-heart); color: var(--cp-heart); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, 0.5); }
.cp-heart.pop { animation: cp-pop 0.4s var(--ease); }
:root[data-theme="light"] .cp-heart { background: rgba(255, 255, 255, 0.9); }
@keyframes cp-pop { 40% { transform: scale(1.3); } }

/* ============================================================ hub (/progress) */
.cp-summary { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem; }
.cp-summary .stat { display: flex; flex-direction: column; justify-content: center; }
.cp-sum-main { flex-direction: row !important; align-items: center; gap: 1.1rem; }
.cp-sum-main .value, .dx-hero-main .value { font-size: clamp(1.6rem, 3.4vw, 2.3rem) !important; }
.cp-summary .value svg, .dx-hero .value svg { width: 1.05em; height: 1.05em; color: var(--pos); }
.cp-summary .sub a { color: var(--ice); font-weight: 700; }
.cp-sum-all { margin-top: 0.45rem !important; padding-top: 0.45rem; border-top: 1px dashed var(--line-2); }

.cp-closest { margin-top: 1.7rem; }
.cp-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0.7rem; }
.cp-near {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.9rem; border-radius: 18px;
  background: var(--cp-surface); box-shadow: var(--cp-rim); color: var(--ink); text-decoration: none;
  transition: transform 0.18s var(--ease);
}
.cp-near:hover { transform: translateY(-2px); text-decoration: none; }
.cp-near-text { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.86rem; line-height: 1.3; min-width: 0; }
.cp-near-set { color: var(--ice); }

.cp-setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); gap: 0.95rem; }
.cp-set {
  position: relative; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;
  padding: 1rem 1.05rem 0.95rem; border-radius: 20px; color: var(--ink); text-decoration: none;
  background: var(--cp-surface); box-shadow: var(--cp-rim); transition: transform 0.2s var(--ease);
}
.cp-set::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--cp-rainbow); opacity: 0; transition: opacity 0.25s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cp-set:hover { transform: translateY(-3px); text-decoration: none; }
.cp-set:hover::before, .cp-set:focus-visible::before { opacity: 0.8; }
.cp-set.is-complete { background: linear-gradient(160deg, rgba(191, 232, 247, 0.1), rgba(206, 198, 246, 0.05) 40%, rgba(23, 25, 29, 0.46)); }
.cp-set.is-complete::before { opacity: 0.6; }
.cp-set.is-new { opacity: 0.86; }
.cp-set-top { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; min-height: 68px; margin-bottom: 0.2rem; }
.cp-set-logo { flex: 1; min-width: 0; height: 54px; display: flex; align-items: center; }
.cp-set-logo img { max-height: 54px; max-width: 100%; object-fit: contain; object-position: left center; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.cp-set-logo.has-img .cp-set-mono { display: none; }
.cp-set-logo.is-broken .cp-set-mono { display: grid; }
.cp-set-mono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-weight: 900; font-size: 1.05rem;
  background: var(--surface-2); color: var(--ice); letter-spacing: -0.02em; box-shadow: inset 0 0 0 1px var(--line-2); }
.cp-set-name { font-weight: 800; font-size: 1rem; line-height: 1.2; letter-spacing: -0.015em; }
.cp-set-meta { font-size: 0.74rem; color: var(--muted); }
.cp-set-count { font-size: 0.76rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.cp-set-count b { font-weight: 800; color: var(--ink); }
.cp-set-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin-top: auto; padding-top: 0.6rem; border-top: 1px dashed var(--line-2); font-size: 0.84rem;
}
.cp-set .cp-set-foot { margin-top: 0.45rem; }
.cp-away b { font-weight: 900; font-size: 1.15rem; letter-spacing: -0.02em; }
.cp-cost { font-weight: 900; font-size: 1.02rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cp-cost small { font-weight: 600; color: var(--muted); font-size: 0.72rem; }
.cp-mkt { font-size: 0.7rem; color: var(--muted); line-height: 1.35; }
.cp-set.is-complete .cp-set-foot { font-weight: 700; font-size: 0.8rem; }
.cp-empty h2 { margin-top: 0.4rem; }

/* ====================================================== tracker (/progress/<set>) */
.cp-trk-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 2.6rem); align-items: center;
  padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: 24px; background: var(--cp-surface); box-shadow: var(--cp-rim);
  position: relative; overflow: hidden;
}
.cp-trk-hero::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--cp-rainbow); opacity: 0.45;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cp-trk-rings { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.cp-trk-logo { max-width: 180px; max-height: 64px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); }
.cp-trk-rings .cp-seal { top: auto; bottom: -6px; right: -14px; --seal: 70px; }
.cp-trk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.6rem; margin: 0; }
.cp-trk-stats > div { min-width: 0; }
.cp-trk-stats dt { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 0.3rem; }
.cp-trk-stats dd { margin: 0; font-size: 1rem; line-height: 1.35; }
.cp-trk-stats dd > b { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cp-trk-cost dd > b { background: var(--cp-irid); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .cp-trk-cost dd > b { background: none; color: var(--ink); }

.cp-filterbar { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.cp-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr)); gap: 1rem 0.85rem; }
.cp-card { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.cp-card[hidden] { display: none; }
.cp-card-art {
  position: relative; display: block; aspect-ratio: 63 / 88; border-radius: var(--cp-card-r); overflow: hidden; isolation: isolate;
  background: #16171b; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.8); transition: transform 0.22s var(--ease);
}
.cp-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.45s, opacity 0.45s; }
.cp-card-art::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 159, 196, 0.5) 38%, rgba(255, 224, 138, 0.5) 44%,
    rgba(143, 233, 166, 0.5) 50%, rgba(159, 227, 245, 0.55) 56%, rgba(206, 198, 246, 0.5) 62%, transparent 72%);
  mix-blend-mode: color-dodge; transform: translateX(-70%); transition: transform 0.75s var(--ease), opacity 0.3s;
}
.cp-card.is-owned .cp-card-art { box-shadow: 0 0 0 2px rgba(191, 232, 247, 0.55), 0 12px 26px -14px rgba(0, 0, 0, 0.8); }
.cp-card.is-owned .cp-card-art:hover::after { opacity: 1; transform: translateX(70%); }
.cp-card-art:hover { transform: translateY(-4px) rotate(-0.8deg); }
.cp-card.is-missing .cp-card-art { box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.2); outline: 1px dashed rgba(211, 238, 248, 0.28); outline-offset: -5px; }
.cp-card.is-missing .cp-card-art img { filter: grayscale(1) brightness(0.5); opacity: 0.62; }
.cp-card.is-missing .cp-card-art:hover img { filter: grayscale(0.4) brightness(0.8); opacity: 0.9; }
:root[data-theme="light"] .cp-card.is-missing .cp-card-art img { filter: grayscale(1) brightness(1.05) contrast(0.8); opacity: 0.45; }
.cp-card-no, .cp-card-qty {
  position: absolute; z-index: 3; bottom: 5px; padding: 0.05rem 0.35rem; border-radius: 5px; font-size: 0.64rem; font-weight: 800;
  background: rgba(9, 10, 12, 0.78); color: #dfefff; font-variant-numeric: tabular-nums;
}
.cp-card-no { left: 5px; }
.cp-card-qty { right: 5px; background: var(--cp-irid); color: #101115; }
.cp-card.just-added .cp-card-art { animation: cp-caught 0.8s var(--ease); }
@keyframes cp-caught { 0% { transform: scale(0.94); } 45% { transform: scale(1.05) rotate(-1.5deg); } 100% { transform: none; } }
.cp-card-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.cp-card-name { margin: 0; font-weight: 700; font-size: 0.84rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-prints { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.cp-pr {
  display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.5rem 0.2rem 0.4rem; border-radius: 999px;
  font: inherit; font-size: 0.7rem; font-weight: 700; line-height: 1.3; white-space: nowrap; cursor: pointer;
  color: var(--ink-dim); background: transparent; border: 1px dashed rgba(211, 238, 248, 0.38);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease);
}
.cp-pr svg { width: 0.95em; height: 0.95em; }
button.cp-pr:hover { border-style: solid; border-color: var(--ice); color: var(--ink); background: rgba(191, 232, 247, 0.08); transform: translateY(-1px); }
.cp-pr.own { border: 0; background: var(--cp-irid); background-size: 200% 100%; color: #101115; cursor: default; }
.cp-pr.own small { font-size: 0.9em; opacity: 0.75; }
:root[data-theme="light"] .cp-pr.own { background: #d8f0fa; }
.cp-pr[disabled] { opacity: 0.55; cursor: progress; }
.cp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; min-height: 32px; }
.cp-price { font-weight: 800; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.cp-price small { font-weight: 600; color: var(--muted); font-size: 0.68rem; }
.cp-none { text-align: center; color: var(--muted); }

.cp-shop { margin-top: 2rem; scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.cp-shop h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; }
.cp-shop h2 svg { width: 1.2rem; height: 1.2rem; }
.cp-shop-table tfoot td { border-top: 1px solid var(--line-2); padding: 0.75rem 0.9rem; }
.cp-shop-table tr.is-bought td { opacity: 0.45; text-decoration: line-through; }
.cp-shop-textwrap { margin-top: 1rem; }
.cp-shop-textwrap textarea { font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; min-height: 8rem; color: var(--ink-dim); }
.cp-show-sm { display: none; }

/* a set just completed: sparkles burst from the rings */
.cp-burst { position: absolute; left: 90px; top: 50%; width: 0; height: 0; z-index: 7; pointer-events: none; }
.cp-burst i {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: #fff;
  -webkit-mask: var(--spark-mask) center / contain no-repeat; mask: var(--spark-mask) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(191, 232, 247, 0.9));
  transform: rotate(calc(var(--k) * 25.7deg)) translateY(0) scale(0.2); opacity: 0;
  animation: cp-burst 1.3s var(--ease) forwards; animation-delay: calc(var(--k) * 18ms);
}
.cp-burst i:nth-child(3n) { background: #ffe08a; }
.cp-burst i:nth-child(3n+1) { background: #ff9fc4; }
@keyframes cp-burst {
  30% { opacity: 1; }
  100% { transform: rotate(calc(var(--k) * 25.7deg)) translateY(-120px) scale(1); opacity: 0; }
}

/* ================================================================ Living Dex */
.dx-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0.9rem; }
.dx-hero-main { display: flex; align-items: center; gap: 1.1rem; }
.dx-hero-cost .value { font-size: clamp(1.5rem, 3vw, 2.1rem) !important; }
.dx-gens { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0.5rem; }
.dx-gen {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.65rem 0.55rem; border-radius: 14px; min-width: 0;
  background: var(--cp-surface); box-shadow: var(--cp-rim); color: var(--ink); text-decoration: none; transition: transform 0.15s var(--ease);
}
.dx-gen:hover { transform: translateY(-2px); text-decoration: none; }
.dx-gen.on { box-shadow: inset 0 0 0 1.5px var(--ice), 0 12px 30px -18px rgba(191, 232, 247, 0.6); }
.dx-gen-h { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-gen-h b { color: var(--ink); font-weight: 900; font-size: 0.86rem; margin-right: 0.15rem; }
.dx-gen .progress { height: 5px; }
.dx-gen.is-done .progress > span { background: var(--cp-rainbow); }
.dx-notice { margin: 1.1rem 0 0; }
.dx-next { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.dx-next-item { padding: 0.5rem 0.7rem 0.5rem 0.5rem; gap: 0.65rem; }
.dx-next-art { position: relative; flex: none; width: 52px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #15161a; }
.dx-next-art img { position: absolute; left: -35%; top: -24%; width: 170%; max-width: none; height: auto; }
.dx-toolbar { margin-top: 1.4rem; }

.dx-sec { margin-top: 1.8rem; }
.dx-sec[hidden] { display: none; }
.dx-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.8rem;
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); }
.dx-sec-h h2 { margin: 0; font-size: 1.15rem; font-weight: 900; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.dx-roman { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.7rem; padding: 0 0.45rem; border-radius: 9px;
  font-size: 0.8rem; background: var(--cp-irid); background-size: 200% 100%; color: #101115; }
.dx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 122px), 1fr)); gap: 0.6rem; }
.dx-tile { position: relative; min-width: 0; }
.dx-tile[hidden] { display: none; }
.dx-link {
  display: flex; flex-direction: column; height: 100%; padding-bottom: 0.55rem; border-radius: 16px; overflow: hidden;
  background: var(--cp-surface); box-shadow: var(--cp-rim); color: var(--ink); text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.dx-link:hover { transform: translateY(-3px); text-decoration: none; }
.dx-art {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 42%, rgba(191, 232, 247, 0.16), transparent 62%), #15161a;
}
/* the card's illustration window, not the whole card: on almost every card
   it spans 7-93% of the width and 11-52% of the height, so the image is
   scaled to 120% and shifted until that window fills the tile */
.dx-art img { position: absolute; left: -12%; top: -28.1%; width: 124%; height: auto; max-width: none; transition: filter 0.5s var(--ease), transform 0.5s var(--ease), opacity 0.5s; }
.dx-no { padding: 0.45rem 0.6rem 0; font-size: 0.64rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.dx-name { padding: 0 0.6rem; font-weight: 800; font-size: 0.85rem; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-sub { padding: 0.1rem 0.6rem 0; font-size: 0.74rem; font-weight: 700; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-sub small { font-weight: 600; color: var(--muted); font-size: 0.9em; }
/* caught: in colour, with an ice rim and a foil pass on hover */
.dx-tile.is-caught .dx-link { box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.4), 0 16px 34px -26px rgba(191, 232, 247, 0.55); }
.dx-tile.is-caught .dx-art::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 159, 196, 0.45) 40%, rgba(255, 224, 138, 0.45) 46%,
    rgba(143, 233, 166, 0.45) 52%, rgba(159, 227, 245, 0.5) 58%, transparent 68%);
  mix-blend-mode: color-dodge; opacity: 0; transform: translateX(-70%); transition: transform 0.8s var(--ease), opacity 0.3s;
}
.dx-tile.is-caught .dx-link:hover .dx-art::after { opacity: 1; transform: translateX(70%); }
.dx-tile.is-caught .dx-no { color: var(--ice); }
/* missing: "Who's that Pokémon?" — the art as a shadow on an ice spotlight,
   revealed while you hover it */
.dx-tile.is-missing .dx-art { background: radial-gradient(circle at 50% 45%, rgba(191, 232, 247, 0.34), rgba(206, 198, 246, 0.12) 45%, #121317 75%); }
.dx-tile.is-missing .dx-art img { filter: grayscale(1) brightness(0.55) contrast(2.6) sepia(0.5) hue-rotate(170deg) saturate(1.4); opacity: 0.88; }
.dx-tile.is-missing .dx-link:hover .dx-art img, .dx-tile.is-missing .dx-link:focus-visible .dx-art img { filter: none; opacity: 1; transform: scale(1.04); }
.dx-tile.is-missing .dx-art.has-img::before {
  content: "?"; position: absolute; z-index: 2; right: 8px; bottom: 2px; font-weight: 900; font-size: 1.9rem; line-height: 1;
  color: transparent; background: var(--cp-irid); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); transition: opacity 0.3s;
}
.dx-tile.is-missing .dx-link:hover .dx-art::before { opacity: 0; }
.dx-q { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; font-weight: 900; color: var(--faint); }
.dx-heart { position: absolute; z-index: 4; top: 6px; right: 6px; width: 30px; height: 30px; }
:root[data-theme="light"] .dx-tile.is-missing .dx-art img { filter: grayscale(1) brightness(0.45) contrast(2.4) sepia(0.5) hue-rotate(170deg) saturate(1.4); }

/* ======================================================= one species */
.sp-no { font-size: 0.5em; color: var(--muted); font-weight: 800; letter-spacing: -0.01em; vertical-align: 0.35em; margin-right: 0.1em; font-variant-numeric: tabular-nums; }
.sp-types { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.55rem 0 0; }
.sp-types .chip { padding: 0.22rem 0.7rem; font-size: 0.76rem; }
.sp-hero { grid-template-columns: auto minmax(0, 1fr); }
.sp-hero-art { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.sp-card {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --int: 0;
  position: relative; display: block; width: clamp(140px, 17vw, 200px); aspect-ratio: 600 / 825; overflow: hidden; isolation: isolate;
  border-radius: var(--cp-card-r); background: #15161a; transform: perspective(900px) rotateX(var(--ry)) rotateY(var(--rx)) rotate(-2deg);
  transition: transform 0.35s var(--ease); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(191, 232, 247, 0.35);
}
.sp-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.5s var(--ease); }
.sp-foil {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: var(--cp-glitter), repeating-linear-gradient(112deg, hsl(350 95% 72%) 0%, hsl(40 100% 70%) 4.5%, hsl(80 95% 70%) 9%, hsl(165 95% 70%) 13.5%, hsl(200 100% 72%) 18%, hsl(265 95% 76%) 22.5%, hsl(350 95% 72%) 27%);
  background-size: 160px 160px, 320% 320%; background-position: calc(var(--mx) * 0.7) calc(var(--my) * 0.7), var(--mx) var(--my);
  background-blend-mode: screen; mix-blend-mode: color-dodge; filter: brightness(0.62) contrast(1.35) saturate(1.15);
  opacity: calc(0.14 + var(--int) * 0.5); transition: opacity 0.45s;
}
.sp-card.is-shadow img { filter: grayscale(1) brightness(0.55) contrast(2.6) sepia(0.5) hue-rotate(170deg) saturate(1.4); }
.sp-card.is-shadow:hover img, .sp-card.is-shadow:focus-visible img { filter: none; }
.sp-hero-cap { margin: 0; text-align: center; max-width: 13rem; }
.sp-hero-main { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); min-width: 0; }
.sp-hero-rings { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sp-hero .cp-trk-stats { flex: 1; min-width: 0; }
.cp-card-meta { margin: -0.2rem 0 0; font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================ artists */
.cp-public { width: min(78rem, 100%); margin: 0 auto; padding: 1.2rem 0 1rem; }
.cp-public-cta { margin-top: 1.4rem; }
.ag-spot {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.2rem, 4vw, 3rem); align-items: center;
  padding: clamp(1rem, 3vw, 1.8rem); border-radius: 26px; background: var(--cp-surface); box-shadow: var(--cp-rim); position: relative; overflow: hidden;
}
.ag-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--cp-rainbow); opacity: 0.5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ag-spot-art { display: block; }
.ag-spot .ag-canvas { aspect-ratio: 16 / 11; border-radius: 6px; box-shadow: 0 0 0 10px #22252c, 0 0 0 11px rgba(255, 255, 255, 0.08), 0 36px 60px -30px #000; margin: 11px; }
.ag-kicker { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 0.5rem; }
.ag-kicker svg { width: 1rem; height: 1rem; }
.ag-spot h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -0.04em; margin: 0 0 0.6rem; }
.ag-spot h2 a { color: var(--ink); text-decoration: none; }
.ag-spot p { margin: 0 0 0.8rem; line-height: 1.55; }
.ag-spot p a { color: var(--ice); }

.ag-toolbar .ag-search { flex: 1 1 16rem; }
.ag-go { align-self: flex-end; }
.ag-wall {
  list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.8rem, 2vw, 1.3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 176px), 1fr)); grid-auto-flow: dense;
}
.ag-item { min-width: 0; }
.ag-item[hidden] { display: none; }
.ag-item.ag-xl { grid-column: span 2; grid-row: span 2; }
.ag-frame {
  display: flex; flex-direction: column; height: 100%; padding: 9px 9px 0; border-radius: 8px; text-decoration: none; color: var(--ink);
  background: linear-gradient(150deg, #30333b, #1d1f24 55%, #26282f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 26px 44px -28px #000;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.ag-frame:hover { transform: translateY(-4px) rotate(-0.4deg); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.35), 0 34px 60px -30px rgba(0, 0, 0, 0.9), 0 0 40px -18px rgba(191, 232, 247, 0.45); }
:root[data-theme="light"] .ag-frame { background: linear-gradient(150deg, #ffffff, #eef0f4); box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -24px rgba(40, 44, 50, 0.45); }
/* The canvas shows a card's illustration window only (see .dx-art): the image
   is scaled (--w) and shifted (--x, --y) until that window — 7-93% of the
   card's width, 11-52% of its height — covers the canvas's aspect ratio. */
.ag-canvas {
  --w: 129.8%; --x: -14.9%; --y: -26.2%;
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; border-radius: 3px;
  background: #121317; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.ag-item.ag-xl .ag-canvas { aspect-ratio: 1; --w: 173%; --x: -36.5%; --y: -26.2%; }
.ag-spot .ag-canvas { --w: 129.8%; --x: -14.9%; --y: -28.5%; }
.ag-canvas img { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none; transition: transform 0.6s var(--ease); transform-origin: 50% 30%; }
.ag-frame:hover .ag-canvas img { transform: scale(1.04); }
.ag-sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.22) 46%, transparent 58%);
  transform: translateX(-60%); transition: transform 0.9s var(--ease), opacity 0.3s;
}
.ag-frame:hover .ag-sheen { opacity: 1; transform: translateX(60%); }
.ag-blank { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 2rem; }
.ag-plate { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.2rem 0.7rem; min-width: 0; }
.ag-plate b { font-size: 0.9rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-item.ag-xl .ag-plate b { font-size: 1.1rem; }
.ag-plate small { font-size: 0.72rem; color: var(--muted); }
.ag-own { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; }
.ag-own .progress { height: 4px; }
.ag-own small { font-size: 0.68rem; }
.ag-own.has small { color: var(--ice); font-weight: 700; }

.ag-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 2.8rem); align-items: center; margin-bottom: 1.2rem; }
.ag-hero-art { display: block; width: clamp(150px, 22vw, 240px); }
.ag-hero-card { position: relative; display: block; border-radius: var(--cp-card-r); overflow: hidden; isolation: isolate;
  transform: rotate(-3deg); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(191, 232, 247, 0.4); }
.ag-hero-card img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 825; object-fit: cover; }
.ag-hero-card .ag-sheen { opacity: 1; animation: cp-sweep 6s ease-in-out infinite; }
.ag-name { font-size: clamp(2rem, 5vw, 3.4rem) !important; margin: 0 0 0.5rem !important; }
.ag-known { margin: 0 0 1rem; line-height: 1.55; max-width: 44rem; }
.ag-stats { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.ag-stat { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-radius: 18px; background: var(--cp-surface); box-shadow: var(--cp-rim); font-size: 0.9rem; line-height: 1.35; }
.ag-stat a { color: var(--ink); }
.ag-stat-l { letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.ag-big { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ag-big svg { width: 1em; height: 1em; color: var(--pos); vertical-align: -0.12em; }
.ag-sets { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.4rem; }
.ag-sets .chip span { font-size: 0.75rem; }
.ag-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); gap: 1.1rem 0.85rem; }
.ag-card { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ag-card-art { position: relative; display: block; aspect-ratio: 63 / 88; border-radius: var(--cp-card-r); overflow: hidden; background: #16171b;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.8); transition: transform 0.22s var(--ease); }
.ag-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ag-card-art:hover { transform: translateY(-4px) rotate(-0.8deg); }
.ag-card.is-owned .ag-card-art { box-shadow: 0 0 0 2px rgba(191, 232, 247, 0.55), 0 12px 26px -14px rgba(0, 0, 0, 0.8); }
.ag-card.is-missing .ag-card-art img { filter: saturate(0.35) brightness(0.72); }
.ag-card.is-missing .ag-card-art:hover img { filter: none; }
.ag-card-art .owned-badge { position: absolute; top: 6px; right: 6px; border-radius: 999px; font-size: 0.66rem; padding: 0.12rem 0.44rem; font-weight: 900; background: var(--cp-irid); color: #101115; }
.ag-card-name { font-weight: 700; font-size: 0.84rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-card-meta { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; min-height: 32px; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.cp-pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.6rem; }
@keyframes cp-sweep { 0%, 50% { transform: translateX(-60%); } 80%, 100% { transform: translateX(60%); } }

/* ================================================================ binder */
.bd-pick { align-items: flex-end; }
.bd-pick-f { display: flex; align-items: flex-end; gap: 0.5rem; }
.bd-pick .chip { align-self: flex-end; padding: 0.5rem 0.9rem; }
.bd-pick .chip svg { width: 1em; height: 1em; }
.bd { position: relative; margin-top: 0.4rem; }
/* without script: every page, stacked two across */
.bd-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 1.2rem; }
.bd-inside { display: none; }
.bd-page {
  position: relative; padding: clamp(10px, 1.6vw, 18px) clamp(10px, 1.6vw, 18px) clamp(26px, 3vw, 34px); border-radius: 14px;
  background: linear-gradient(150deg, #262930, #1b1d22 60%, #16171a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 60px -34px rgba(0, 0, 0, 0.9);
}
:root[data-theme="light"] .bd-page, :root[data-theme="light"] .bd-inside { background: linear-gradient(150deg, #3a3e48, #2a2d34); }
.bd-pockets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(5px, 0.9vw, 9px); }
.bd-pocket {
  position: relative; aspect-ratio: 63 / 88; padding: 4.5%; border-radius: 5px;
  background: rgba(211, 238, 248, 0.045); box-shadow: inset 0 0 0 1px rgba(211, 238, 248, 0.13);
}
/* the sleeve: a top seam and a streak of light across the plastic */
.bd-pocket::before { content: ""; position: absolute; z-index: 3; left: 7%; right: 7%; top: 3.2%; height: 1px; background: rgba(255, 255, 255, 0.18); pointer-events: none; }
.bd-pocket::after {
  content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(122deg, transparent 18%, rgba(255, 255, 255, 0.13) 30%, transparent 42%, transparent 62%, rgba(255, 255, 255, 0.06) 72%, transparent 82%);
}
.bd-card { position: relative; display: block; width: 100%; height: 100%; border-radius: var(--cp-card-r); overflow: hidden; isolation: isolate; background: #141519;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.9); transition: transform 0.25s var(--ease); }
.bd-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-card:hover { transform: translateY(-3%); }
.bd-card:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
/* foil: glitter and rainbow bands held still, with one band of light
   sweeping across now and then (transform only) */
.bd-foil { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit;
  background: var(--cp-glitter) 0 0 / 110px 110px, repeating-linear-gradient(112deg, hsl(350 95% 72%) 0%, hsl(40 100% 70%) 4.5%, hsl(80 95% 70%) 9%, hsl(165 95% 70%) 13.5%, hsl(200 100% 72%) 18%, hsl(265 95% 76%) 22.5%, hsl(350 95% 72%) 27%);
  background-blend-mode: screen; mix-blend-mode: color-dodge; opacity: 0.2; filter: brightness(0.6) contrast(1.3); }
.bd-card::after {
  content: ""; position: absolute; inset: -10% -60%; z-index: 3; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.1) 54%, transparent 60%);
  transform: translateX(-70%); animation: cp-pocket-sweep 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.45s);
}
@keyframes cp-pocket-sweep { 0%, 62% { transform: translateX(-70%); } 88%, 100% { transform: translateX(70%); } }
.bd-var { position: absolute; z-index: 4; left: 50%; bottom: 4%; transform: translateX(-50%); padding: 0.05rem 0.4rem; border-radius: 5px;
  font-size: clamp(0.5rem, 0.8vw, 0.62rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  background: var(--cp-irid); color: #101115; box-shadow: 0 3px 8px -3px #000; }
.bd-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; width: 100%; height: 100%;
  padding: 8%; border-radius: 6px; text-align: center; text-decoration: none; color: var(--ink-dim); overflow: hidden; isolation: isolate;
  border: 1.5px dashed rgba(211, 238, 248, 0.3); background: radial-gradient(circle at 50% 38%, rgba(191, 232, 247, 0.06), transparent 70%);
  transition: border-color 0.2s, color 0.2s;
}
.bd-slot:hover { border-color: rgba(211, 238, 248, 0.6); color: var(--ink); text-decoration: none; }
/* the missing card itself, greyed right back behind its number */
.bd-ghost { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
  filter: grayscale(1) brightness(0.62) contrast(0.95); opacity: 0.36; transition: opacity 0.3s, filter 0.3s; }
.bd-slot:hover .bd-ghost { opacity: 0.6; filter: grayscale(0.5) brightness(0.75); }
.bd-slot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 45%, rgba(13, 14, 17, 0.62), rgba(13, 14, 17, 0.12) 75%); }
.bd-slot-price { margin-top: 0.15rem; padding: 0.05rem 0.4rem; border-radius: 5px; font-size: clamp(0.56rem, 0.9vw, 0.72rem); font-weight: 900;
  font-variant-numeric: tabular-nums; color: #101115; background: var(--cp-irid); box-shadow: 0 3px 8px -3px #000; white-space: nowrap; }
.bd-slot-no { font-weight: 900; font-size: clamp(0.95rem, 2.1vw, 1.55rem); letter-spacing: -0.03em; color: var(--ink-dim); font-variant-numeric: tabular-nums; line-height: 1; }
.bd-slot-name { font-size: clamp(0.56rem, 0.95vw, 0.74rem); font-weight: 700; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bd-slot-var { font-size: clamp(0.5rem, 0.8vw, 0.64rem); color: var(--ice); font-weight: 700; line-height: 1.2; }
.bd-folio { position: absolute; bottom: clamp(6px, 0.9vw, 10px); left: 0; right: 0; text-align: center; font-size: 0.7rem; font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums; }

/* with script: a real binder — two pages open on a spine with rings */
.bd.is-book .bd-book {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 auto;
  width: min(100%, calc((100vh - 250px) * var(--bd-ratio, 1.43) * 0.97)); min-width: min(100%, 640px);
  padding: clamp(10px, 1.4vw, 16px); border-radius: 20px; perspective: 2600px; touch-action: pan-y;
  background: linear-gradient(160deg, #2c2f37, #1a1c20 55%, #22242a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 60px 90px -50px rgba(0, 0, 0, 0.95);
}
.bd.is-book .bd-page, .bd.is-book .bd-inside { display: none; }
.bd.is-book .at-left, .bd.is-book .at-right { display: block; grid-row: 1; }
.bd.is-book .at-left { grid-column: 1; border-radius: 12px 3px 3px 12px; box-shadow: inset -18px 0 24px -20px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.bd.is-book .at-right { grid-column: 2; border-radius: 3px 12px 12px 3px; box-shadow: inset 18px 0 24px -20px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.bd.is-book .bd-book::before {    /* the spine and its rings */
  content: ""; position: absolute; z-index: 6; left: 50%; top: 9%; bottom: 9%; width: 22px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #ffffff 0 1.5px, #caced8 2.5px, #66728d 6px, #363a44 8px, transparent 9px) 50% 0 / 22px 33.33% repeat-y;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}
.bd.is-book .bd-inside.at-left {
  display: grid; place-items: center; background: linear-gradient(150deg, #23262d, #17181c 70%);
}
.bd-inside-in { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 1.5rem; text-align: center; }
.bd-inside-logo { max-width: 72%; max-height: 110px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6)); }
.bd-inside-mark { opacity: 0.9; }
.bd-inside-title { margin: 0; font-weight: 900; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.03em; }
.bd-inside-brand { display: flex; align-items: center; gap: 0.35rem; margin: 0.6rem 0 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.bd-blank { background: linear-gradient(150deg, #202227, #16171b) !important; }
.bd.is-single .bd-book { grid-template-columns: 1fr; width: min(100%, 460px); min-width: 0; padding: 8px; }
.bd.is-single .bd-book::before { display: none; }
.bd.is-single .at-right { grid-column: 1; border-radius: 12px; }
.bd.is-single .bd-page.in-next { animation: cp-page-next 0.35s var(--ease); }
.bd.is-single .bd-page.in-prev { animation: cp-page-prev 0.35s var(--ease); }
@keyframes cp-page-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes cp-page-prev { from { opacity: 0; transform: translateX(-28px); } }

/* the page being turned: a leaf hinged on the spine, a page on each face */
.bd-leaf {
  position: absolute; z-index: 5; top: clamp(10px, 1.4vw, 16px); bottom: clamp(10px, 1.4vw, 16px); left: 50%; width: calc(50% - clamp(10px, 1.4vw, 16px));
  transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 0.72s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.bd-leaf > .bd-face { position: absolute; inset: 0; display: block !important; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bd-leaf > .bd-face.back { transform: rotateY(180deg); }
.bd-leaf > .bd-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 30%); }

.bd-nav { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 1.1rem auto 0; max-width: 640px; }
.bd-nav[hidden] { display: none; }
.bd-nav .iconbtn { display: inline-flex; align-items: center; justify-content: center; }
.bd-nav .iconbtn svg { width: 14px; height: 14px; }
.bd-nav .iconbtn svg + svg { margin-left: -9px; }
.bd-turn {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--cp-irid); background-size: 200% 100%; color: #101115; box-shadow: 0 10px 24px -10px rgba(191, 232, 247, 0.6);
  transition: transform 0.15s var(--ease), opacity 0.15s;
}
.bd-turn svg { width: 22px; height: 22px; }
.bd-turn:hover { transform: translateY(-2px); }
.bd-turn:disabled, .bd-nav .iconbtn:disabled { opacity: 0.35; cursor: default; transform: none; }
.bd-where { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.bd-where b { font-size: 0.86rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bd-where input[type="range"] { width: 100%; padding: 0; border: 0; background: transparent; accent-color: var(--ice); height: 20px; }
.bd-hint { text-align: center; margin: 0.7rem 0 0; }

/* ============================================================== phones */
@media (max-width: 900px) {
  .cp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-sum-main { grid-column: 1 / -1; }
  .dx-hero { grid-template-columns: minmax(0, 1fr); }
  .dx-gens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-trk-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cp-trk-stats { width: 100%; }
  .ag-spot, .ag-hero, .sp-hero { grid-template-columns: minmax(0, 1fr); }
  .sp-hero-main { flex-direction: column; align-items: stretch; }
  .ag-hero-art { justify-self: center; }
}
@media (max-width: 640px) {
  .cp-toolbar .field { flex: 1 1 42%; min-width: 0; }
  .cp-toolbar .cp-seg { flex: 1 1 100%; }
  .cp-seg { flex-wrap: wrap; border-radius: 18px; overflow: visible; }
  .cp-summary .stat { padding: 0.9rem; }
  .cp-rings-lg { width: 76px; }
  .cp-rings-xl { width: 120px; }
  .cp-rings-xl b { font-size: 1.5rem; }
  .cp-trk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  .cp-trk-cost { grid-column: 1 / -1; }
  .cp-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.7rem; }
  .cp-hide-sm { display: none; }
  .cp-show-sm { display: inline; }
  .cp-set-top { min-height: 60px; }
  .dx-gens { gap: 0.35rem; }
  .dx-gen { padding: 0.5rem; }
  .dx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
  .dx-name { font-size: 0.76rem; padding: 0 0.45rem; }
  .dx-no, .dx-sub { padding-left: 0.45rem; padding-right: 0.45rem; }
  .dx-sub { font-size: 0.68rem; }
  .dx-heart { width: 26px; height: 26px; top: 4px; right: 4px; }
  /* the heart stays small on the tile, but a thumb gets a 40px target */
  .dx-heart::after { content: ""; position: absolute; inset: -7px; }
  .dx-heart svg { width: 13px; height: 13px; }
  .ag-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-item.ag-xl { grid-row: span 1; }
  .ag-item.ag-xl .ag-canvas { aspect-ratio: 16 / 9; --w: 122%; --x: -11%; --y: -44%; }
  .ag-stat { flex: 1 1 100%; }
  .bd-pick-f { flex: 1 1 40%; min-width: 0; }
  .bd-pick-f .field { flex: 1; min-width: 0; }
  .cp-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.6rem; padding-bottom: 0.3rem; scrollbar-width: none; }
  .cp-strip::-webkit-scrollbar { display: none; }
  .cp-near { flex: 0 0 82%; scroll-snap-align: start; }
  .bd-nav .iconbtn { display: none; }
}

/* ========================================================= light theme
   The ice accents are pale by design; on white they take the deep ice. */
:root[data-theme="light"] .cp-near-set, :root[data-theme="light"] .cp-summary .sub a,
:root[data-theme="light"] .cp-abbr, :root[data-theme="light"] .cp-foot-note a,
:root[data-theme="light"] .ag-spot p a, :root[data-theme="light"] .ag-own.has small,
:root[data-theme="light"] .bd-slot-var, :root[data-theme="light"] .dx-tile.is-caught .dx-no { color: var(--ice-deep); }
:root[data-theme="light"] .cp-rings b svg { --ico-stroke: var(--pos); filter: none; }
:root[data-theme="light"] .cp-set.is-complete { background: linear-gradient(160deg, #eef8fc, #f4f1ff 45%, #ffffff); }
:root[data-theme="light"] .cp-near { background: var(--panel); }
:root[data-theme="light"] .dx-gen.on { box-shadow: inset 0 0 0 1.5px var(--ice-deep); }
:root[data-theme="light"] .bd-slot { color: #c9d3de; }
:root[data-theme="light"] .bd-slot-no { color: #f2f6fc; }

@media (prefers-reduced-motion: reduce) {
  .cp-ring-bar, .cp-seal-in::after, .bd-card::after, .ag-hero-card .ag-sheen,
  .bd.is-single .bd-page.in-next, .bd.is-single .bd-page.in-prev, .cp-card.just-added .cp-card-art { animation: none; }
  .bd-leaf { transition: none; }
}