/* DojoPacks · Trainer HQ. A dark command centre in the logo's colours: navy ink, the ball's blue
   for interface and progress, and yellow only for rewards (a ready pack, tokens, a big pull, the
   one action that pays out). */
:root {
  --navy: #141a2e; --bg0: #0f1426; --bg: #141a2e; --s1: #1a2139; --s2: #222b47; --s3: #2c3759;
  --line: rgba(150, 172, 235, .10); --line2: rgba(150, 172, 235, .18); --line3: rgba(150, 172, 235, .30);
  --tx: #e9edf7; --tx2: #aeb8d3; --tx3: #7d89ac;
  --b: #4b84d5; --b2: #3e5fac; --b3: #2f468c; --bl: #8aaeee; --btint: rgba(75, 132, 213, .16);
  --y: #ffcb05; --y2: #ffdb4d; --y3: #f4af01; --ytint: rgba(255, 203, 5, .12);
  --ok: #3fcf8e; --bad: #ff7b7b;
  /* Rarity tiers, tuned to read on navy. */
  --t-common: #8f9abb; --t-uncommon: #4cc38a; --t-rare: #62a6ff; --t-holo: #2fd0e6; --t-double: #a98bff;
  --t-ultra: #ff9a3d; --t-ir: #ff70b8; --t-sir: #ff5d6c; --t-secret: #ffd23f;
  --side: 232px; --r: 14px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* The logo's zigzag seam, as a divider and as the timer bar's teeth. */
  --seam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 6 6 2l6 4' fill='none' stroke='%23344270' stroke-width='1.4'/%3E%3C/svg%3E");
  --seam-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M0 7.5 5 2.5l5 5' fill='none' stroke='%23141a2e' stroke-width='1.8'/%3E%3C/svg%3E");
  /* Older names, still used by the owner dashboard. */
  --panel: var(--s1); --panel-2: var(--s2); --muted: var(--tx3); --text: var(--tx); --accent: var(--y); --radius: var(--r);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--tx);
  font: 14px/1.45 var(--sans); font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--bl); text-decoration: none; }
a:hover { color: #b3cbf6; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.2; }
kbd {
  font: 600 10.5px/1 var(--mono); display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 5px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line2); border-bottom-width: 2px; color: var(--tx2);
}
code { font: 500 .92em var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--s3); color: var(--tx); }
mark { background: none; color: var(--y); font-weight: 600; }
:focus-visible { outline: 2px solid var(--bl); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; padding: 8px 12px; border-radius: 8px; background: var(--y); color: var(--navy); font-weight: 700; }
.skip:focus { left: 8px; }
.mono { font-family: var(--mono); }
.muted { color: var(--tx3); }
.small { font-size: 12.5px; }
.y { color: var(--y); }
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.spk { width: 14px; height: 14px; flex: none; color: var(--y); }
.coin { width: 18px; height: 18px; flex: none; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.spread { justify-content: space-between; }
.row.nowrap { flex-wrap: nowrap; }
.grow { flex: 1; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--bl); font-weight: 550; }
.linkbtn:hover { color: #b3cbf6; }
.av-none { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--s3); color: var(--tx2); font-weight: 700; flex: none; }
.js .nojs-only { display: none; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 14px 12px 12px;
  background: var(--bg0); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; z-index: 20;
}
/* When it's taller than the screen it scrolls, rather than squashing what's in it. */
.side > * { flex-shrink: 0; }
.main { min-width: 0; display: flex; flex-direction: column; }
.view { flex: 1; width: 100%; max-width: 1220px; padding: 22px 32px 120px; margin: 0 auto; }
.foot { padding: 20px 32px 28px; color: var(--tx3); font-size: 12px; border-top: 1px solid var(--line); text-align: center; }
.foot a { color: var(--tx2); }
.foot p + p { margin-top: 8px; }
.foot .foot-dc { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #dfe2ff; }
.foot-dc:hover, .foot-dc:hover .dc { color: #fff; }
.side-h { display: flex; align-items: flex-start; gap: 6px; }
.brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 2px 6px 12px; font-weight: 750; font-size: 15.5px; letter-spacing: -.01em; color: var(--tx); }
.brand:hover { color: var(--tx); }
.brand img { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.brand small { margin-left: auto; font: 700 9.5px/1 var(--mono); letter-spacing: .08em; color: var(--tx3); border: 1px solid var(--line2); padding: 4px 5px; border-radius: 5px; }
.sbtn {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 7px 0 10px; margin-bottom: 12px; border-radius: 9px;
  background: var(--s1); border: 1px solid var(--line); color: var(--tx3); font-size: 13px; width: 100%;
}
.sbtn span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbtn:hover { border-color: var(--line3); color: var(--tx2); }
.snav { display: flex; flex-direction: column; gap: 1px; }
.snav a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--tx2); font-weight: 500; font-size: 13.5px; }
.snav a:hover { background: rgba(255, 255, 255, .04); color: var(--tx); }
.snav a.on { background: var(--s2); color: var(--tx); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.snav a.on .i { color: var(--bl); }
.snav .sc { margin-left: auto; opacity: 0; transition: opacity .15s; font: 600 10px var(--mono); letter-spacing: .12em; color: var(--tx3); }
.snav a:hover .sc { opacity: 1; }
.snav svg.sc { width: 13px; height: 13px; }
.badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--b); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.badge + .sc { display: none; }
.seam { height: 8px; margin: 14px 8px; background: var(--seam) repeat-x left center / 12px 8px; }
.slabel {
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px 6px; font-size: 10.5px; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tx3);
}
.slabel span { font: 500 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--tx2); }
.srow { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 10px; border-radius: 8px; color: var(--tx2); font-size: 13px; }
.srow:hover { background: rgba(255, 255, 255, .04); color: var(--tx); }
.srow .lg { width: 38px; height: 20px; object-fit: contain; flex: none; }
.srow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.srow .lg + .nm { flex: 0 1 auto; }
.srow .cnt { margin-left: auto; font: 500 11px var(--mono); color: var(--tx3); }
.new { font-style: normal; font-size: 9.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: var(--ytint); color: var(--y); flex: none; }
.slot { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: var(--btint); color: var(--bl); flex: none; }
.spacer { flex: 1; min-height: 14px; }
.spack { padding: 12px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); margin-bottom: 8px; }
.spack.login p { font-size: 12.5px; color: var(--tx2); margin: 8px 0 12px; }
.spack.login .btn + .btn { margin-top: 6px; }
.sp-h { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); }
.sp-h > span { display: inline-flex; align-items: center; gap: 6px; }
.sp-h .def { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; color: var(--tx2); }
.sp-h .def img { height: 13px; width: auto; max-width: 34px; }
.sp-t { font: 700 28px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.03em; margin: 9px 0 10px; color: var(--tx); }
.spack .btn { margin-top: 10px; }
.spack.ready { border-color: rgba(255, 203, 5, .45); background: linear-gradient(180deg, rgba(255, 203, 5, .11), rgba(255, 203, 5, .02)), var(--s1); box-shadow: 0 8px 24px -10px rgba(255, 203, 5, .35); }
.spack.ready .sp-t { color: var(--y); }
.spack.ready .sp-h { color: var(--y2); }
/* What's shown depends on whether the free pack is ready; app.js flips .ready when the timer runs out. */
[data-pack]:not(.ready) [data-when-ready], [data-pack].ready [data-when-waiting] { display: none !important; }
/* The daily claim, under the free pack: yellow while it's waiting (a reward), quiet once it's claimed. */
.sdaily { margin-bottom: 8px; }
.sdaily .btn { margin: 0; }
.sdaily p { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--s1); border: 1px solid var(--line); color: var(--tx2); font-size: 12px; }
.sdaily p .i { width: 13px; height: 13px; color: var(--y); }
.sdaily p b { display: block; color: var(--tx); font-weight: 650; }
.sdaily p small { display: block; color: var(--tx3); font-size: 11.5px; }
.sdaily .sd-s { margin-top: 6px; padding: 0 2px; background: none; border: 0; color: var(--tx3); font-size: 11.5px; }
[data-daily]:not(.ready) [data-when-ready], [data-daily].ready [data-when-waiting] { display: none !important; }
.pill-f { margin: 0; }
button.pill { cursor: pointer; }
.zz { position: relative; height: 10px; border-radius: 5px; background: var(--s3); overflow: hidden; }
.zz i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #5b8fdc, #3e5fac); border-radius: 5px; transition: width 1s linear; }
.zz::after { content: ""; position: absolute; inset: 0; background: var(--seam-ink) repeat-x 0 0 / 10px 10px; opacity: .85; }
.ready .zz i { background: linear-gradient(180deg, #ffe066, #ffcb05 55%, #f4af01); }
.stok {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--s1);
  border: 1px solid var(--line); text-align: left; margin-bottom: 10px; color: var(--tx);
}
.stok:hover { border-color: var(--line3); color: var(--tx); }
.stok b { font-size: 17px; font-weight: 750; color: var(--y); letter-spacing: -.01em; }
.stok .u { font-size: 11px; font-weight: 750; color: var(--y3); margin-left: -3px; }
.stok small { margin-left: auto; font-size: 11px; color: var(--tx3); text-align: right; line-height: 1.2; }
.me { display: flex; align-items: center; gap: 6px; padding: 2px 0 0; }
.me > img, .me > .av-none { width: 28px; height: 28px; border-radius: 50%; }
.me .ibtn.sm { width: 26px; height: 28px; }
.me .who { min-width: 0; flex: 1; }
.me b { display: block; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { display: block; font-size: 11px; color: var(--tx3); white-space: nowrap; }
.me form { display: contents; }
.ftg { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line2); background: none; color: var(--tx2); font-size: 11.5px; font-weight: 600; }
.ftg:hover { color: var(--tx); border-color: var(--line3); }
.sw { position: relative; width: 24px; height: 14px; border-radius: 7px; background: var(--s3); flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #b9c2dc; transition: transform .2s; }
.on > .sw, [aria-pressed="true"] > .sw { background: var(--b); }
.on > .sw::after, [aria-pressed="true"] > .sw::after { transform: translateX(10px); background: #fff; }
.ibtn {
  width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--line2);
  background: var(--s1); color: var(--tx2); flex: none; padding: 0;
}
.ibtn:hover { color: var(--tx); border-color: var(--line3); }
.ibtn.sm { width: 28px; height: 28px; border-radius: 8px; }
.ibtn.menu { position: relative; }
.mdot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--b); box-shadow: 0 0 0 2px var(--s1); }

/* top bar */
.top {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 32px;
  background: rgba(20, 26, 46, .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--tx3); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--tx3); }
.crumbs a:hover { color: var(--tx); }
.crumbs b { color: var(--tx); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumbs .i { width: 13px; height: 13px; opacity: .6; }
.tb-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tsearch {
  display: flex; align-items: center; gap: 8px; width: 310px; height: 34px; padding: 0 7px 0 10px; border-radius: 9px;
  background: var(--s1); border: 1px solid var(--line2); color: var(--tx3); font-size: 13px; text-align: left;
}
.tsearch > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsearch kbd { display: inline-flex; gap: 3px; white-space: nowrap; width: auto; padding: 0 5px; }
.tsearch:hover { border-color: var(--line3); color: var(--tx2); }
.pill {
  display: none; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 16px; background: var(--s1);
  border: 1px solid var(--line2); font: 600 12.5px var(--mono); color: var(--tx); white-space: nowrap;
}
.pill:hover { color: var(--tx); border-color: var(--line3); }
.pill .i { width: 14px; height: 14px; color: var(--tx3); }
.pill.ready { background: var(--y); border-color: var(--y2); color: var(--navy); }
.pill.ready .i { color: var(--navy); }
.pill.tok b { color: var(--y); }
.m-only { display: none !important; }
.addbot {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 9px; flex: none; white-space: nowrap;
  border: 1px solid rgba(88, 101, 242, .45); background: rgba(88, 101, 242, .14); color: #dfe2ff; font-size: 13px; font-weight: 600;
}
.addbot:hover { background: rgba(88, 101, 242, .26); border-color: rgba(129, 140, 255, .7); color: #fff; }
.dc { width: 18px; height: 18px; flex: none; color: #9aa2ff; }
.addbot:hover .dc { color: #fff; }
.pause-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 20px; font-size: 13px;
  background: repeating-linear-gradient(135deg, #25304f 0 14px, #212b48 14px 28px); border-bottom: 1px solid var(--line2);
}
.pause-banner .i { color: var(--bl); }
/* A Pack Rush is a reward: yellow. */
.rush-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 20px; font-size: 13px;
  background: var(--ytint); border-bottom: 1px solid rgba(255, 203, 5, .3);
}
.rush-banner b { color: var(--y); }
.rush-banner .spk { width: 16px; height: 16px; flex: none; color: var(--y); }

/* ---------- buttons, inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 9px;
  border: 1px solid var(--line2); background: var(--s2); color: var(--tx); font-weight: 550; font-size: 13.5px; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s; text-decoration: none;
}
.btn:hover { background: var(--s3); border-color: var(--line3); color: var(--tx); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 15px; height: 15px; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; gap: 6px; }
.btn.lg { height: 44px; padding: 0 18px; font-size: 14.5px; border-radius: 11px; font-weight: 650; }
.btn.full { width: 100%; }
.btn.primary { background: linear-gradient(180deg, #4a72c4, #3e5fac); border-color: #5a7fcb; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn.primary:hover { background: linear-gradient(180deg, #5580d0, #4467b6); color: #fff; }
.btn.reward {
  background: linear-gradient(180deg, #ffd633, #ffcb05 60%, #f6be00); border-color: #ffe066; color: var(--navy); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 22px -10px rgba(255, 203, 5, .7);
}
.btn.reward:hover { background: linear-gradient(180deg, #ffe066, #ffd21f 60%, #f8c400); color: var(--navy); }
.btn.reward .plus { font-family: var(--mono); font-weight: 700; padding: 2px 6px; border-radius: 5px; background: rgba(20, 26, 46, .12); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--tx2); }
.btn.ghost:hover { background: rgba(255, 255, 255, .05); color: var(--tx); }
.btn.danger { color: #ffb0b0; }
.btn.discord { background: #5865f2; border-color: #6d78f4; color: #fff; }
.btn.discord:hover { background: #6974f4; color: #fff; }
.btn[disabled], .btn.off { opacity: .45; cursor: not-allowed; transform: none; }
.btn kbd { background: rgba(0, 0, 0, .18); border-color: rgba(0, 0, 0, .2); color: inherit; opacity: .85; }
.btn.reward kbd { background: rgba(20, 26, 46, .1); border-color: rgba(20, 26, 46, .22); color: var(--navy); }
.paused .needs-run { opacity: .55; }
.dd {
  appearance: none; -webkit-appearance: none; height: 34px; padding: 0 30px 0 11px; border-radius: 9px;
  background: var(--s1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d89ac' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 14px;
  border: 1px solid var(--line2); color: var(--tx); font-size: 13px; cursor: pointer; max-width: 100%;
}
.dd:hover { border-color: var(--line3); }
.dd.full { width: 100%; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); flex: none; }
.seg > label, .seg > button {
  height: 28px; padding: 0 11px; border-radius: 7px; border: 0; background: none; color: var(--tx2); font-size: 13px; font-weight: 550;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.seg > label:hover, .seg > button:hover { color: var(--tx); }
.seg > label input { position: absolute; opacity: 0; pointer-events: none; }
.seg > label:focus-within { outline: 2px solid var(--bl); outline-offset: 1px; }
.seg > .on, .seg > label:has(input:checked) { background: var(--s3); color: var(--tx); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06); }
.seg.icons > button { padding: 0 8px; }
.search {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 7px 0 10px; border-radius: 9px; background: var(--s1);
  border: 1px solid var(--line2); color: var(--tx3); min-width: 170px; flex: 1; max-width: 280px;
}
.search:focus-within { border-color: var(--b); box-shadow: 0 0 0 3px var(--btint); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--tx); font-size: 13.5px; }
.search input::placeholder { color: var(--tx3); }
.search input::-webkit-search-cancel-button { filter: invert(.6); }
input[type=text], input:not([type]), input[type=number], input[type=date], textarea {
  border-radius: 9px; border: 1px solid var(--line2); background: var(--bg0); color: var(--tx); padding: 7px 10px;
}
input:focus, textarea:focus { outline: none; border-color: var(--b); box-shadow: 0 0 0 3px var(--btint); }
.search input:focus { box-shadow: none; }

/* ---------- page + tiles ---------- */
.pg-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pg-h h1 { font-size: 25px; font-weight: 750; }
.pg-h .sub { margin-top: 5px; color: var(--tx2); font-size: 13.5px; max-width: 760px; }
.pg-h .sub a { color: var(--tx2); border-bottom: 1px dashed var(--line3); }
.pg-h .sub a:hover { color: var(--tx); }
.pg-h .desc { margin-top: 8px; color: var(--tx2); }
.pg-act { display: flex; gap: 8px; flex-wrap: wrap; }
.who-h { display: flex; align-items: center; gap: 14px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.dash > div { min-width: 0; }
.s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.dash > div > .tile { height: 100%; }
.tile, .panel {
  position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0) 50%), var(--s1);
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 1px 2px rgba(0, 0, 0, .25); min-width: 0;
}
.th {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 11px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tx3); min-height: 20px;
}
.th > span:not(.r) { display: inline-flex; align-items: center; gap: 8px; }
.th .i { width: 15px; height: 15px; }
.th .r { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 12.5px; color: var(--tx3); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.th .r b { color: var(--tx2); font-weight: 600; }
.th a.r, .th .r a { color: var(--bl); }
.th .x { margin-left: 6px; width: 24px; height: 24px; border-radius: 6px; border: 0; background: none; color: var(--tx3); display: grid; place-items: center; padding: 0; }
.th .x:hover { background: var(--s3); color: var(--tx); }
.tile.ready {
  border-color: rgba(255, 203, 5, .42); background: radial-gradient(120% 90% at 100% 0, rgba(255, 203, 5, .13), transparent 60%), var(--s1);
  box-shadow: 0 10px 30px -14px rgba(255, 203, 5, .4), inset 0 1px 0 rgba(255, 230, 135, .08);
}
.tile.ready .th { color: var(--y2); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.tc { color: var(--tier); background: color-mix(in srgb, var(--tier) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tier) 32%, transparent); }
.td { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tier); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier) 18%, transparent); }
.t-common { --tier: var(--t-common); } .t-uncommon { --tier: var(--t-uncommon); } .t-rare { --tier: var(--t-rare); }
.t-holo { --tier: var(--t-holo); } .t-double { --tier: var(--t-double); } .t-ultra { --tier: var(--t-ultra); }
.t-ir { --tier: var(--t-ir); } .t-sir { --tier: var(--t-sir); } .t-secret { --tier: var(--t-secret); }
.t-reverse { --tier: #9cf; }
.bar { height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--b2), var(--b)); }
.bar.done i { background: linear-gradient(90deg, var(--y3), var(--y)); }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .rt { fill: none; stroke: var(--s3); }
.ring .rf { fill: none; stroke: var(--b); stroke-linecap: round; }
.ring.done .rf { stroke: var(--y); }
.ring b { font-size: 11px; font-weight: 700; letter-spacing: -.02em; }
.ring b small { font-size: 8px; color: var(--tx3); font-weight: 600; }
.av { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.empty { text-align: center; padding: 36px 20px; color: var(--tx2); }
.empty h3 { font-size: 17px; color: var(--tx); margin-bottom: 6px; }
.empty p { max-width: 440px; margin: 0 auto 14px; font-size: 13.5px; }
.empty-note { font-size: 13px; color: var(--tx3); }
.coach { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--btint); border: 1px solid rgba(75, 132, 213, .35); font-size: 13.5px; }
.coach > .i { color: var(--bl); margin-top: 2px; }
.coach > div { flex: 1; }
.coach .row { margin-top: 8px; }
.hide-coach [data-dismissable="coach"], .hide-checklist [data-dismissable="checklist"] { display: none; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 650; background: rgba(63, 207, 142, .12); color: #8fe6bd; border: 1px solid rgba(63, 207, 142, .25); white-space: nowrap; }
.tag .i { width: 12px; height: 12px; }
.tag.off { background: var(--s2); color: var(--tx3); border-color: var(--line2); }

/* Focus mode: the home page in one column, essentials only. New players start in it. */
.focus-note { display: none; text-align: center; color: var(--tx3); font-size: 13px; padding: 18px 0 0; }
[data-focus="on"] .home, :root:not([data-focus="off"]) .home[data-focus-default="on"] { --focused: 1; }
[data-focus="on"] .home .dash, :root:not([data-focus="off"]) .home[data-focus-default="on"] .dash { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto; }
[data-focus="on"] .home .dash > div, :root:not([data-focus="off"]) .home[data-focus-default="on"] .dash > div { grid-column: 1 / -1; }
[data-focus="on"] .home .nf, :root:not([data-focus="off"]) .home[data-focus-default="on"] .nf { display: none; }
[data-focus="on"] .home .hello, [data-focus="on"] .home .welcome { max-width: 760px; margin-left: auto; margin-right: auto; }
:root:not([data-focus="off"]) .home[data-focus-default="on"] .welcome { max-width: 760px; margin-left: auto; margin-right: auto; }
[data-focus="on"] .focus-note, :root:not([data-focus="off"]) .home[data-focus-default="on"] ~ .focus-note { display: block; }
[data-focus="on"] .ftg .sw, :root:not([data-focus="off"]) body:has(.home[data-focus-default="on"]) .ftg .sw { background: var(--b); }
[data-focus="on"] .ftg .sw::after, :root:not([data-focus="off"]) body:has(.home[data-focus-default="on"]) .ftg .sw::after { transform: translateX(10px); background: #fff; }

/* ---------- home ---------- */
.hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hello h1 { font-size: 25px; font-weight: 750; }
.hello .sub { margin-top: 5px; color: var(--tx2); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.hello .sub > span { display: inline-flex; align-items: center; gap: 6px; }
.hello .sub .i { width: 14px; height: 14px; color: var(--tx3); }
.hello .sub a { color: var(--bl); }
.hello .hint { font-size: 12px; color: var(--tx3); display: flex; align-items: center; gap: 5px; }
.pk-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pk-t { font: 750 48px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.tile.ready .pk-t { color: var(--y); }
.pk-sub { font-size: 12.5px; color: var(--tx3); text-align: right; line-height: 1.5; }
.pk-sub b { color: var(--tx2); font-weight: 600; }
.tile .acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tile .acts .btn { flex: 1; }
.bal-n { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.bal-n b { font-size: 36px; font-weight: 800; letter-spacing: -.035em; color: var(--y); line-height: 1.05; }
.bal-n span { font-weight: 750; color: var(--y3); font-size: 14px; }
.bal-sub { font-size: 12.5px; color: var(--tx3); margin-bottom: 14px; }
.bal-sub b { color: var(--tx2); font-weight: 600; }
.rep-sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--tx3); }
[data-tokens] { transition: text-shadow .3s; }
.bump { text-shadow: 0 0 18px rgba(255, 203, 5, .8); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stats > div { padding: 9px 10px; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); }
.stats b { display: block; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.stats span { font-size: 11.5px; color: var(--tx3); white-space: nowrap; }
.rot-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 16px; align-items: center; gap: 14px; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; color: var(--tx); }
.landing .rot-row, .rot-row:not(:has(.ring)) { grid-template-columns: minmax(0, 1fr) auto 16px; }
.rot-row + .rot-row { border-top: 1px solid var(--line); }
.rot-row:hover { background: rgba(255, 255, 255, .03); color: var(--tx); }
.rot-row > .chev { color: var(--tx3); }
.rot-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rot-name img { width: 62px; height: 30px; object-fit: contain; flex: none; }
.rot-name b { font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rot-name small { display: block; font-size: 12px; color: var(--tx3); margin-top: 2px; }
.rot-miss { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ghost-card { width: 34px; aspect-ratio: 245 / 342; border-radius: 3px; overflow: hidden; background: var(--bg0); outline: 1px dashed var(--line3); outline-offset: 1px; flex: none; }
.ghost-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55); opacity: .75; }
.rot-miss .more { font: 600 11.5px var(--mono); color: var(--tx3); padding-left: 2px; white-space: nowrap; }
.closest { margin-top: 10px; padding: 11px 12px; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); font-size: 12.5px; color: var(--tx3); display: flex; flex-direction: column; gap: 4px; }
.closest b { display: flex; align-items: center; gap: 6px; color: var(--tx); font-weight: 600; }
.closest a { color: var(--tx2); font-weight: 550; }
.closest a:hover { color: var(--tx); }
.togo { font-size: 11px; font-weight: 700; color: var(--y); background: var(--ytint); padding: 2px 6px; border-radius: 5px; letter-spacing: 0; }
.match { padding: 12px; border-radius: 11px; background: var(--bg0); border: 1px solid var(--line); }
.match + .match { margin-top: 10px; }
.mt-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 10px; }
.mt-cards > .i { color: var(--tx3); }
.fig { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--tx3); }
.fig:hover { color: var(--tx2); }
.fig .cap { font-size: 11.5px; line-height: 1.3; min-width: 0; }
.fig .cap b { display: block; color: var(--tx); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb { display: block; width: 36px; aspect-ratio: 245 / 342; border-radius: 3px; overflow: hidden; flex: none; background: var(--s2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.strip { display: flex; gap: 12px; overflow-x: auto; padding: 10px 2px 8px; margin: -6px -2px 0; scrollbar-width: thin; scrollbar-color: var(--s3) transparent; }
.mini { flex: none; width: 96px; color: var(--tx2); position: relative; }
.mini:hover { color: var(--tx); }
.mini .art { box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7); transition: transform .18s; }
.mini:hover .art { transform: translateY(-3px); }
.mini.missing .art img { filter: grayscale(.85) brightness(.7); }
.mini-l { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.mini-l span:last-child { overflow: hidden; text-overflow: ellipsis; }
.rare-tag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 5px; border-radius: 10px; background: var(--y); color: var(--navy); font-size: 10px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px -2px rgba(255, 203, 5, .5);
}
.rare-tag .spk { color: var(--navy); width: 11px; height: 11px; }
.bmini { display: flex; gap: 12px; }
.bmini a { flex: 1; min-width: 0; max-width: 170px; color: var(--tx); }
.bmini .cov { position: relative; aspect-ratio: 1 / 1.05; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #25305a, #1a2140); border: 1px solid var(--line2); }
.bmini .cov img { position: absolute; top: 9%; left: 50%; height: 82%; width: auto; max-width: none; border-radius: 5px; box-shadow: 0 10px 20px rgba(0, 0, 0, .55); transform: translateX(-50%) rotate(-4deg); transition: transform .2s; }
.bmini a:hover .cov img { transform: translateX(-50%) rotate(0deg) scale(1.03); }
.bmini b { display: block; font-size: 12.5px; font-weight: 600; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmini small { color: var(--tx3); font-size: 11.5px; }
.drop-tile .big, .drop .big { font: 650 30px/1.1 var(--mono); letter-spacing: -.03em; margin-bottom: 4px; }
.drop-bar { margin-top: 14px; font-size: 12.5px; color: var(--tx3); display: flex; flex-direction: column; gap: 6px; }
.drop-bar b { color: var(--tx); }
.log { display: flex; flex-direction: column; }
.log-i { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; }
.log-i + .log-i { border-top: 1px solid var(--line); }
.log-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--s2); color: var(--bl); position: relative; }
.log-ic.y { color: var(--y); background: var(--ytint); }
.log-ic::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--b); border: 2px solid var(--s1); }
.log-i b { font-weight: 650; font-size: 13.5px; }
.log-i p { font-size: 12.5px; color: var(--tx3); margin-top: 1px; }
.away form.r { margin-left: auto; }
.hero h2 { font-size: 20px; font-weight: 750; margin-bottom: 6px; }
.hero > p { font-size: 13px; color: var(--tx2); margin-bottom: 14px; }
.hero .th > span:not(.r) b { color: inherit; font-family: var(--mono); }
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pick button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 11px;
  border: 1.5px solid var(--line2); background: var(--bg0); color: var(--tx); text-align: center;
}
.pick button:hover { border-color: var(--line3); }
.pick button.on { border-color: var(--y); background: linear-gradient(180deg, rgba(255, 203, 5, .10), transparent), var(--bg0); box-shadow: 0 0 0 3px rgba(255, 203, 5, .12); }
.pick img { height: 32px; width: auto; max-width: 90%; object-fit: contain; }
.pick b { font-size: 12.5px; font-weight: 650; }
.pick small { font-size: 11px; color: var(--tx3); }
.pick .rd { position: absolute; top: 7px; right: 7px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line3); }
.pick .on .rd { border: 4px solid var(--y); }
.pick .new, .pick .slot { position: absolute; top: 6px; left: 6px; }
.fine { font-size: 11.5px; color: var(--tx3); margin-top: 8px; text-align: center; }
.flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 100% { box-shadow: 0 10px 30px -14px rgba(255, 203, 5, .4); } 30% { box-shadow: 0 0 0 4px rgba(255, 203, 5, .5); } }
.welcome { display: flex; gap: 18px; align-items: flex-start; padding: 6px 2px 4px; margin-bottom: 16px; }
.welcome .wl { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bl); margin-bottom: 4px; }
.welcome h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.lede { font-size: 14.5px; line-height: 1.6; color: var(--tx2); max-width: 680px; }
.lede b { color: var(--tx); font-weight: 600; }
.fp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding-top: 8px; }
.fp .mini { width: auto; }
.fp .mini.first { grid-column: span 2; grid-row: span 2; }
.fp-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--tx2); }
.fp-foot a { display: inline-flex; align-items: center; gap: 5px; }
.reveal .mini { animation: rise .3s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.steps { list-style: none; margin: 0; padding: 0; }
.checklist .bar { margin-bottom: 6px; }
.step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; }
.step + .step { border-top: 1px solid var(--line); }
.step .ck { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line3); display: grid; place-items: center; color: transparent; }
.step .ck .i { width: 13px; height: 13px; stroke-width: 3; }
.step.done .ck { background: var(--ok); border-color: var(--ok); color: #0b2a1c; }
.step.done b { color: var(--tx3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
.step.cur .ck { border-color: var(--b); box-shadow: 0 0 0 3px var(--btint); }
.step b { font-weight: 600; font-size: 13.5px; }
.step p { font-size: 12.5px; color: var(--tx3); margin-top: 1px; }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.how > div, .how > li { padding: 12px; border-radius: 11px; background: var(--bg0); border: 1px solid var(--line); font-size: 12.5px; color: var(--tx2); }
.how b { display: flex; align-items: center; gap: 7px; color: var(--tx); font-size: 13px; margin-bottom: 4px; }
.how .i { color: var(--bl); }
.how .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--y); color: var(--navy); font-size: 11px; font-weight: 800; }

/* landing (logged out) */
.hero-l { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 18px 0 28px; }
.hero-l h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.035em; margin-bottom: 14px; }
.hero-l .lede { margin-bottom: 20px; }
.hero-fan { position: relative; height: 300px; }
.hero-fan .art { position: absolute; top: 20px; left: 50%; width: 160px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9); }
.hero-fan .art:nth-child(1) { transform: translateX(-50%) rotate(-2deg); z-index: 3; }
.hero-fan .art:nth-child(2) { transform: translateX(-118%) rotate(-12deg) translateY(18px); z-index: 2; }
.hero-fan .art:nth-child(3) { transform: translateX(18%) rotate(10deg) translateY(18px); z-index: 1; }
.hero-ball { position: absolute; right: 4%; bottom: 0; width: 96px; z-index: 4; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .6)); }

/* ---------- cards + rarity effects ---------- */
.art { position: relative; display: block; aspect-ratio: 245 / 342; border-radius: 4.8% / 3.4%; overflow: hidden; background: var(--s2); isolation: isolate; color: var(--tx); }
.art img { width: 100%; height: 100%; object-fit: cover; }
/* Rarity effects on .fx cards. Each tier sets how strong the layers are, so the effect climbs
   with rarity: commons get nothing, uncommons a faint glare under the pointer, rares a glow and a
   glint now and then, holos and up a rainbow foil, ultra rares and up glitter, special
   illustration and secret rares a spinning border and a pulse. Secret rares are gold.
   ::before is the foil, ::after the light. At rest they drift on their own; while a pointer is
   over a card, app.js sets .fx-on, --px/--py (0..1) and --gx/--gy (%) and they follow it. */
:root {
  /* Dark gaps between the bands leave the art alone (black does nothing under colour-dodge). */
  --foil-rainbow: repeating-linear-gradient(115deg, #000 0%, #5c1f2e 2%, #5c4a14 3.5%, #1f5c2a 5%, #144a5c 6.5%, #2e1f5c 8%, #000 10%, #000 13%);
  --foil-pastel: repeating-linear-gradient(115deg, #000 0%, #5c3a4a 2.5%, #5c5435 4%, #3a5c45 5.5%, #35505c 7%, #4a3f5c 8.5%, #000 11%, #000 13%);
  --foil-gold: repeating-linear-gradient(115deg, #000 0%, #4d3300 2%, #8c6a00 4%, #6b5000 5%, #2e1f00 7%, #000 9%, #000 11%);
  --ring-rainbow: #ff5252, #ffd93b, #6bff8a, #4fd8ff, #8b7bff, #ff6bd6, #ff5252;
  --ring-gold: #8a6500, #ffd700, #fff6c2, #ffb300, #8a6500, #ffd700, #fff6c2, #ffb300, #8a6500;
  /* Sparse white specks: fractal noise thresholded on its alpha. */
  --glitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 12 -9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.t-uncommon { --fx-glare: .14; }
.t-rare { --fx-glare: .2; --fx-glint: .22; --fx-glint-every: 10s; --fx-glow: 4px; }
.t-holo { --fx-glare: .22; --fx-glint: .26; --fx-glint-every: 8s; --fx-glow: 7px; --fx-foil: .45; }
.t-double { --fx-glare: .24; --fx-glint: .3; --fx-glint-every: 7s; --fx-glow: 9px; --fx-foil: .55; }
.t-ultra { --fx-glare: .26; --fx-glint: .34; --fx-glint-every: 6s; --fx-glow: 11px; --fx-foil: .6; --fx-glitter: var(--glitter); --fx-sparkles: 4; }
.t-ir { --fx-glare: .26; --fx-glint: .34; --fx-glint-every: 6s; --fx-glow: 11px; --fx-foil: .65; --fx-foil-bg: var(--foil-pastel); --fx-glitter: var(--glitter); --fx-sparkles: 6; }
.t-sir { --fx-glare: .28; --fx-glint: .38; --fx-glint-every: 5s; --fx-glow: 13px; --fx-foil: .7; --fx-glitter: var(--glitter); --fx-ring: var(--ring-rainbow); --fx-sparkles: 9; }
.t-secret {
  --fx-glare: .3; --fx-glint: .42; --fx-glint-every: 4s; --fx-glow: 15px; --fx-foil: .75; --fx-foil-bg: var(--foil-gold);
  --fx-glitter: var(--glitter); --fx-ring: var(--ring-gold); --fx-spark: #ffe27a; --fx-sparkles: 12;
}
/* Out of step, so a page of holos doesn't shimmer in unison. */
:nth-child(2n) > .fx, .fx:nth-child(2n) { --fx-delay: -1.7s; }
:nth-child(3n) > .fx, .fx:nth-child(3n) { --fx-delay: -3.9s; }
:nth-child(5n) > .fx, .fx:nth-child(5n) { --fx-delay: -5.3s; }
.fx { box-shadow: 0 0 calc(var(--fx-glow, 0px) * var(--fx-scale, 1)) color-mix(in srgb, var(--tier) 70%, transparent); }
/* A collection page or binder can hold hundreds of cards: skip rendering (and animating) the ones
   off screen. Their size comes from aspect-ratio, so nothing jumps when they scroll in. */
.ct .art.fx, .pocket.fx { content-visibility: auto; }
.fx::before, .fx::after { position: absolute; z-index: 1; pointer-events: none; }
/* Foil: a sheet 1.5x the card, colour-dodged onto the art. It slides at most 16% of its size
   (drift 8% + pointer 8%), so an edge never shows; any bigger costs phones GPU memory per card. */
.fx:is(.t-holo, .t-double, .t-ultra, .t-ir, .t-sir, .t-secret)::before {
  content: ""; inset: -25%;
  background: var(--fx-glitter, none) 0 0 / 160px 160px, var(--fx-foil-bg, var(--foil-rainbow));
  mix-blend-mode: color-dodge; opacity: var(--fx-foil);
  animation: fx-drift 9s ease-in-out var(--fx-delay, 0s) infinite alternate;
  transition: opacity .3s, transform .2s ease-out;
}
.fx.fx-on::before {
  opacity: calc(var(--fx-foil) * 1.25); animation-play-state: paused;
  transform: translate(calc((var(--px) - .5) * -16%), calc((var(--py) - .5) * -16%));
}
/* Light: a glint sweeps across every --fx-glint-every; under the pointer, a glare follows it. */
.fx:is(.t-rare, .t-holo, .t-double, .t-ultra, .t-ir, .t-sir, .t-secret)::after {
  content: ""; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / var(--fx-glint)) 50%, transparent 62%);
  translate: -100% 0;
  animation: fx-glint var(--fx-glint-every) ease-in-out var(--fx-delay, 0s) infinite;
}
.fx.fx-on:not(.t-common)::after {
  content: ""; inset: 0; translate: none; animation: none;
  background: radial-gradient(circle at var(--gx) var(--gy), rgb(255 255 255 / var(--fx-glare)), transparent 60%);
}
.fx:is(.t-sir, .t-secret) { animation: fx-pulse 2.4s ease-in-out var(--fx-delay, 0s) infinite alternate; }
/* The two rarest tiers get a spinning rainbow (or gold) border. */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:is(.art, .pocket).fx:is(.t-sir, .t-secret) {
  border: 2px solid transparent;
  background: linear-gradient(var(--s2), var(--s2)) padding-box, conic-gradient(from var(--fx-angle), var(--fx-ring)) border-box;
  animation: fx-spin 4s linear infinite, fx-pulse 2.4s ease-in-out var(--fx-delay, 0s) infinite alternate;
}
/* Card page: app.js scatters --fx-sparkles of these over the card. */
.spark {
  position: absolute; z-index: 2; width: var(--size, 16px); aspect-ratio: 1; translate: -50% -50%; scale: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 12%, var(--fx-spark, #fff) 35%, transparent 70%);
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  animation: fx-twinkle 3s ease-in-out infinite;
}
@keyframes fx-drift { from { translate: -8% -5%; } to { translate: 8% 5%; } }
@keyframes fx-glint { 0% { translate: -100% 0; } 25%, 100% { translate: 100% 0; } }
@keyframes fx-pulse { to { box-shadow: 0 0 calc(var(--fx-glow) * var(--fx-scale, 1) * 1.8) var(--tier); } }
@keyframes fx-spin { to { --fx-angle: 360deg; } }
@keyframes fx-twinkle { 0%, 60%, 100% { scale: 0; rotate: 0deg; } 30% { scale: 1; rotate: 90deg; } }

/* ---------- collection ---------- */
/* The set bar: every set, the rotation's sets and the one on show as tabs, then the set picker (all of
   them, up to 125, searchable) and binders. The tabs scroll sideways on a narrow screen. */
.setbar { position: relative; z-index: 35; display: flex; align-items: center; gap: 6px; margin: 0 0 14px; }
.setbar:has(.spick[open]) { z-index: 90; }
.stabs { flex: 0 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-left: -4px; padding: 2px 4px; }
.stabs::-webkit-scrollbar { display: none; }
.stabs { --fl: #000; --fr: #000; -webkit-mask-image: linear-gradient(90deg, var(--fl), #000 48px, #000 calc(100% - 48px), var(--fr)); mask-image: linear-gradient(90deg, var(--fl), #000 48px, #000 calc(100% - 48px), var(--fr)); }
.stabs.more-l { --fl: transparent; }
.stabs.more-r { --fr: transparent; }
.stab { flex: none; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 11px 0 9px; border-radius: 11px; border: 1px solid var(--line); background: var(--s1); color: var(--tx2); font-size: 13px; font-weight: 550; }
.stab:hover { border-color: var(--line3); color: var(--tx); }
.stab.on { background: var(--s2); border-color: var(--line3); color: var(--tx); box-shadow: inset 0 -2px 0 var(--b); }
.stab img { height: 20px; width: 40px; object-fit: contain; }
.stab .tx { display: flex; flex-direction: column; gap: 3px; min-width: 60px; }
.stab .tx > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.stab .cnt { font: 500 11px var(--mono); color: var(--tx3); margin-left: auto; padding-left: 6px; }
.stab .mb, .sp-p .mb { display: block; height: 3px; border-radius: 2px; background: var(--s3); overflow: hidden; }
.stab .mb i, .sp-p .mb i { display: block; height: 100%; background: var(--b); }
.stab .mb.done i, .sp-p .mb.done i { background: var(--y); }
.rdot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.stab > .i { width: 15px; height: 15px; }
.stab-sep { flex: none; width: 1px; background: var(--line2); margin: 8px 2px; }
.spick { position: relative; flex: none; }
.spick > summary { list-style: none; cursor: pointer; user-select: none; }
.spick > summary::-webkit-details-marker { display: none; }
.sp-btn { gap: 8px; padding: 0 9px 0 11px; color: var(--tx); }
.sp-btn .tx { min-width: 0; }
.sp-btn .dn { width: 13px; height: 13px; color: var(--tx3); transform: rotate(90deg); transition: transform .15s; }
.spick[open] > .sp-btn { background: var(--s2); border-color: var(--line3); box-shadow: inset 0 -2px 0 var(--b); }
.spick[open] > .sp-btn .dn { transform: rotate(-90deg); }
.sp-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(440px, calc(100vw - 32px)); max-height: min(580px, calc(100vh - 150px));
  display: flex; flex-direction: column; background: var(--s1); border: 1px solid var(--line3); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .35); animation: sp-in .14s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sp-in { from { opacity: 0; transform: translateY(-6px); } }
.sp-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; }
.sp-head .search { flex: 1; max-width: none; background: var(--bg0); }
html:not(.js) .sp-head .search, html:not(.js) .sp-chips, html:not(.js) .setfind { display: none; }
.sp-chips { flex: none; display: flex; gap: 6px; padding: 0 10px 10px; border-bottom: 1px solid var(--line2); overflow-x: auto; scrollbar-width: none; }
.sp-chips button { flex: none; height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--line2); background: none; color: var(--tx2); font-size: 12px; font-weight: 600; }
.sp-chips button:hover { color: var(--tx); border-color: var(--line3); }
.sp-chips button.on { background: var(--btint); border-color: rgba(75, 132, 213, .55); color: var(--tx); }
.sp-chips span, .setfind .seg span { font: 500 11px var(--mono); color: var(--tx3); margin-left: 3px; }
.sp-list { overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 8px; scrollbar-width: thin; scrollbar-color: var(--s3) transparent; }
.sp-g h4 {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 10px 8px 5px; background: var(--s1);
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3);
}
.sp-g h4 span { font-family: var(--mono); letter-spacing: 0; margin-left: 4px; }
.sp-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 84px; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 9px; color: var(--tx2); }
.sp-row:hover, .sp-row:focus-visible { background: var(--s2); color: var(--tx); }
.sp-row:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--b); }
.sp-row.on { background: var(--btint); }
.sp-row img, .sp-nologo { width: 52px; height: 24px; object-fit: contain; }
.sp-t { min-width: 0; }
.sp-t b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-t small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 15px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-p { display: flex; flex-direction: column; gap: 4px; }
.sp-p .cnt { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font: 500 11.5px var(--mono); color: var(--tx3); }
.sp-p .cnt .i { width: 12px; height: 12px; color: var(--y); stroke-width: 2.4; }
.sp-empty { padding: 26px; text-align: center; color: var(--tx3); font-size: 13px; }
/* sets page: the same search and filters over the grid */
.setfind { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.setfind .search { flex: 1 1 260px; max-width: 420px; }
.setfind .seg > button { border: 0; background: none; }
.setfind .seg > button.on { background: var(--s3); color: var(--tx); }
.filtering .setcard.mystery { display: none; }
.sethead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 16px 20px; margin-bottom: 14px; }
.sh-logo { width: 120px; height: 56px; object-fit: contain; }
.sh-all { display: grid; place-items: center; color: var(--bl); }
.sh-all .i { width: 34px; height: 34px; stroke-width: 1.4; }
.sh-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-title h2 { font-size: 21px; font-weight: 750; }
.sh-title .muted { font-size: 12.5px; }
.sh-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tx2); }
.sh-bar .bar { flex: 1; height: 8px; border-radius: 4px; }
.sh-bar b { color: var(--tx); font-size: 15px; }
.sh-stats { display: flex; gap: 6px; }
.sh-stats > * { padding: 8px 12px; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); min-width: 92px; color: var(--tx); }
.sh-stats > a:hover { border-color: var(--line3); color: var(--tx); }
.sh-stats b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.sh-stats span { font-size: 11.5px; color: var(--tx3); }

/* ---------- trainer profile: the top of /u/{id} (profile_head.html) and /profile ---------- */
.prof { display: grid; gap: 14px; padding: 18px 20px; margin-bottom: 18px; }
.prof-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.prof-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.prof-id .avatar { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--line3); }
.prof-ph { display: grid; place-items: center; background: var(--s3); color: var(--tx2); font-size: 26px; font-weight: 700; }
.prof-id h1 { font-size: 25px; font-weight: 750; overflow-wrap: anywhere; }
.prof-title { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--y2); font-size: 13.5px; font-weight: 650; }
.prof-title img { height: 18px; width: auto; max-width: 64px; object-fit: contain; }
.prof .sub { margin-top: 4px; color: var(--tx2); font-size: 13px; }
.prof-streak { display: inline-flex; align-items: center; gap: 4px; color: var(--tx); }
.prof-streak .i { width: 14px; height: 14px; color: var(--y); }
.prof-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.prof-stats > * { padding: 8px 12px; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); min-width: 92px; color: var(--tx); }
.prof-stats > a:hover { border-color: var(--line3); color: var(--tx); }
.prof-stats b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.prof-stats span { font-size: 11.5px; color: var(--tx3); }
.prof-emblems { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.prof-emblems li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--ytint); border: 1px solid rgba(255, 203, 5, .25); color: var(--y2); font-size: 12px; font-weight: 650; }
.prof-emblems img { height: 16px; width: auto; max-width: 48px; object-fit: contain; }
.prof-cards { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.prof-card { display: block; color: var(--tx2); }
.prof-card .thumb { position: relative; width: 76px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 1px var(--tier, transparent); }
.prof-card .rv { position: absolute; right: 3px; bottom: 3px; padding: 0 3px; border-radius: 3px; background: rgba(0, 0, 0, .6); }
.prof-card.best { display: flex; align-items: flex-end; gap: 10px; }
.prof-card.best .thumb { width: 92px; }
.prof-card .cap { max-width: 160px; font-size: 12px; line-height: 1.35; }
.prof-card .cap small { display: block; color: var(--y); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.prof-card .cap b { display: block; color: var(--tx); font-size: 13.5px; }
.prof-show { min-width: 0; }
.prof-show-h { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--tx2); font-size: 12.5px; font-weight: 600; }
.prof-show-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.prof-hint { align-self: center; }
.coll-h { margin-bottom: 12px; }
.coll-h h2 { font-size: 19px; font-weight: 700; }
.prof-form { display: grid; gap: 20px; max-width: 640px; padding: 18px 20px; }
.prof-form fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.prof-form legend { margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.prof-form label { display: grid; gap: 5px; color: var(--tx2); font-size: 12.5px; font-weight: 600; }
.prof-form .bad { color: var(--bad); }
@media (max-width: 640px) {
  .prof { padding: 14px; }
  .prof-id .avatar { width: 52px; height: 52px; }
  .prof-card .thumb { width: 60px; }
  .prof-card.best .thumb { width: 76px; }
}
.tools { position: sticky; top: 56px; z-index: 30; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; margin-bottom: 4px; background: linear-gradient(var(--bg) 82%, rgba(20, 26, 46, 0)); }
.res-h { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tx3); margin: 2px 0 12px; }
.res-h b { color: var(--tx2); font-weight: 600; }
.res-h .r { margin-left: auto; display: flex; align-items: center; gap: 5px; margin-right: 6px; }
.res-h .dens { margin-left: auto; }
.res-h .r + .dens { margin-left: 0; }
.res-h .dens button { height: 26px; }
.browse-results { scroll-margin-top: 120px; }
.browse-results .group { margin: 24px 0 10px; font-size: 13px; color: var(--tx3); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 20px; }
/* Density: comfortable and compact grids, or a table. The table is the same markup laid out as rows. */
:root:not([data-density]) .dens [data-arg="comfortable"], [data-density="comfortable"] .dens [data-arg="comfortable"],
[data-density="compact"] .dens [data-arg="compact"], [data-density="table"] .dens [data-arg="table"] {
  background: var(--s3); color: var(--tx); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cw, 122px), 1fr)); gap: var(--gap, 18px 14px); }
[data-density="compact"] .grid { --cw: 84px; --gap: 9px; }
.grid .thead, .ct .cols { display: none; }
.ct { position: relative; min-width: 0; }
.ct .art { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 20px -10px rgba(0, 0, 0, .7); transition: transform .18s ease, box-shadow .18s, outline-color .15s; }
.ct.own .art:hover { transform: translateY(-3px); }
.ct.picked .art { outline: 2.5px solid var(--bl); outline-offset: 3px; }
.ct.kb .art { outline: 2px solid #fff; outline-offset: 3px; }
.ct.picked.kb .art { outline-color: #cfe0ff; }
.ct.miss .art {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 8px, transparent 8px 16px), var(--bg0);
  border: 1.5px dashed color-mix(in srgb, var(--tier) 38%, var(--line2)); box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 10px 8px;
}
.ct.miss .art:hover { border-color: color-mix(in srgb, var(--tier) 60%, var(--line3)); }
.miss .mn { font: 600 13px var(--mono); color: var(--tx3); }
.miss .mname { font-size: 12.5px; font-weight: 600; color: var(--tx2); line-height: 1.2; }
.miss .mr { font-size: 10px; font-weight: 700; color: var(--tier); text-transform: uppercase; letter-spacing: .05em; }
.miss .mr.ms { color: var(--tx3); }
.ct.miss .art { position: relative; }
.radar-mark { position: absolute; top: 5px; right: 6px; z-index: 3; font-size: 14px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
[data-density="compact"] .miss :is(.mname, .mr) { display: none; }
.q { position: absolute; right: 5px; bottom: 5px; z-index: 3; display: flex; gap: 3px; }
.q span { font: 700 10.5px/1 var(--mono); padding: 4px 5px; border-radius: 5px; background: rgba(10, 14, 28, .84); color: #fff; border: 1px solid rgba(255, 255, 255, .14); }
.q .rv { color: #a8e7ff; }
.rv { font: 700 10px var(--mono); color: #a8e7ff; }
.chk {
  position: absolute; left: 6px; top: 6px; z-index: 5; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(10, 14, 28, .72); border: 1.5px solid rgba(255, 255, 255, .6); color: transparent; opacity: 0; transition: opacity .12s, background .12s; padding: 0;
}
.chk .i { width: 13px; height: 13px; stroke-width: 3.2; }
.ct:hover .chk, .selecting .chk, .ct.picked .chk, .ct.kb .chk, .chk:focus-visible { opacity: 1; }
.ct.picked .chk { background: var(--b); border-color: #9dbcf0; color: #fff; }
[data-density="compact"] .chk { width: 18px; height: 18px; left: 4px; top: 4px; border-radius: 5px; }
.meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; min-width: 0; }
.meta .no { font: 500 10.5px var(--mono); color: var(--tx3); }
.meta .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx2); }
[data-density="compact"] .meta { display: none; }
/* Table density */
[data-density="table"] .grid { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--s1); }
[data-density="table"] .grid .thead, [data-density="table"] .ct {
  display: grid; grid-template-columns: 30px 30px 48px minmax(120px, 1fr) 170px 76px 64px 64px 56px 64px 90px; align-items: center; gap: 0 10px; padding: 0 10px;
}
[data-density="table"] .grid .thead { min-height: 34px; background: var(--bg0); border-bottom: 1px solid var(--line2); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
[data-density="table"] .ct { min-height: 38px; border-bottom: 1px solid var(--line); font-size: 13px; }
[data-density="table"] .ct:last-child { border-bottom: 0; }
[data-density="table"] .ct:hover { background: rgba(255, 255, 255, .025); }
[data-density="table"] .ct.picked { background: var(--btint); }
[data-density="table"] .ct.kb { box-shadow: inset 2px 0 0 #fff; }
[data-density="table"] .ct .chk { position: static; opacity: 1; width: 16px; height: 16px; border-radius: 4px; background: none; border-color: var(--line3); grid-column: 1; }
[data-density="table"] .ct.picked .chk { background: var(--b); border-color: var(--b); }
[data-density="table"] .ct .art { grid-column: 2; width: 21px; border-radius: 2px; box-shadow: none; outline: 0 !important; transform: none !important; }
[data-density="table"] .ct .art.fx { animation: none; border: 0; }
[data-density="table"] .ct .art.fx::before, [data-density="table"] .ct .art.fx::after, [data-density="table"] .ct .q { display: none; }
[data-density="table"] .ct.miss .art { padding: 0; border: 1px dashed var(--line3); background: none; }
[data-density="table"] .ct.miss .art > * { display: none; }
[data-density="table"] .ct .meta { display: contents; }
[data-density="table"] .ct .meta .td { display: none; }
[data-density="table"] .ct .meta .no { grid-column: 3; font-size: 12px; }
[data-density="table"] .ct .meta .nm { grid-column: 4; color: var(--tx); font-weight: 550; font-size: 13px; }
[data-density="table"] .ct.miss .meta .nm { color: var(--tx3); font-weight: 400; }
[data-density="table"] .ct .cols { display: contents; }
[data-density="table"] .ct .cols > span, [data-density="table"] .thead > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-density="table"] .ct .cols .c-rar { grid-column: 5; }
.cols .n, .thead .n { text-align: right; font-family: var(--mono); font-size: 12px; }
.cols .z { color: var(--tx3); }
.cols .val { color: var(--y); }
.ct:not(.own) .chk { display: none; }
/* Highlighting pulled cards (?pulled=1): what set milestones count stays bright, the rest dims and
   holds still. A badge says why: traded in, or pulled and since traded away. */
.tgl {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px 0 11px; border-radius: 9px; flex: none;
  background: var(--s1); border: 1px solid var(--line2); color: var(--tx2); font-size: 13px; font-weight: 550; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tgl:hover { border-color: var(--line3); color: var(--tx); }
.tgl input { position: absolute; opacity: 0; pointer-events: none; }
.tgl:has(input:focus-visible) { outline: 2px solid var(--bl); outline-offset: 1px; }
.tgl .i { width: 15px; height: 15px; }
.tgl:has(input:checked) { background: var(--btint); border-color: rgba(75, 132, 213, .55); color: var(--tx); }
.tgl:has(input:checked) .i { color: var(--bl); }
.hl-bar { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; margin: -2px 0 14px; border-radius: 11px; background: var(--btint); border: 1px solid rgba(75, 132, 213, .35); font-size: 13px; color: var(--tx2); }
.hl-bar .i { color: var(--bl); flex: none; margin-top: 1px; }
.hl-bar b { color: var(--tx); }
.hl .ct:not(.pl) .art { opacity: .3; filter: grayscale(1); box-shadow: none; }
.hl .ct:not(.pl) .art.fx { animation: none; }
.hl .ct:not(.pl) .art.fx::before, .hl .ct:not(.pl) .art.fx::after { display: none; }
.hl .ct:not(.pl):hover .art { opacity: .7; }
.hl .ct:not(.pl) .meta { opacity: .5; }
.hl .ct.miss.pl .art { border-style: solid; border-color: color-mix(in srgb, var(--bl) 55%, transparent); background: var(--btint); }
.hl-b {
  position: absolute; top: 8px; left: 50%; translate: -50% 0; z-index: 4; display: inline-flex; align-items: center; gap: 3px; pointer-events: none;
  padding: 3px 6px; border-radius: 5px; background: rgba(10, 14, 28, .88); border: 1px solid var(--line3); color: var(--tx2);
  font: 700 9.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.hl-b.on { background: var(--b2); border-color: var(--bl); color: #fff; }
.hl-b .i { width: 10px; height: 10px; stroke-width: 3.2; }
[data-density="compact"] .hl-b { top: 5px; padding: 2px 4px; font-size: 8.5px; }
/* In a table row, at the end of the name's cell: positioned, so it takes no cell of its own. */
[data-density="table"] .hl-b { grid-area: 1 / 4 / 2 / 5; top: 50%; left: auto; right: 0; translate: 0 -50%; }
[data-density="table"] .ct:has(.hl-b) .nm { padding-right: 78px; }
[data-density="table"] .hl .ct:not(.pl) { opacity: .45; }
[data-density="table"] .hl .ct:not(.pl) .art, [data-density="table"] .hl .ct:not(.pl) .meta { opacity: 1; }

/* ---------- card page ---------- */
.cardpage { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 44px; align-items: start; }
.cp-art { position: sticky; top: 80px; }
/* Tilts toward the pointer; app.js sets the variables. pan-y keeps vertical swipes scrolling on phones. */
[data-tilt] { perspective: 1100px; touch-action: pan-y pinch-zoom; user-select: none; -webkit-touch-callout: none; }
.tilt {
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  transform: translate(var(--tx, 0), var(--ty, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  border-radius: 4.5% / 3.2%; --fx-scale: 2.2;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 calc(var(--fx-glow, 0px) * 2) color-mix(in srgb, var(--tier) 60%, transparent);
}
.tilting .tilt { transition-duration: .1s; }
.tilt .mname { display: grid; place-items: center; height: 100%; font-weight: 700; color: var(--tx2); }
.cp-hint { text-align: center; font-size: 12px; color: var(--tx3); margin-top: 14px; }
.cp-nav { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.cp-info h1 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 10px; }
.cp-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.setchip { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px 0 6px; border-radius: 7px; background: var(--s2); border: 1px solid var(--line2); color: var(--tx2); font-size: 12.5px; font-weight: 550; }
.setchip:hover { color: var(--tx); border-color: var(--line3); }
.setchip img { height: 14px; width: auto; max-width: 36px; }
.pulled { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; background: var(--ytint); border: 1px solid rgba(255, 203, 5, .3); color: var(--y2); font-size: 12.5px; font-weight: 600; margin-bottom: 16px; }
.ladder { display: flex; align-items: center; gap: 4px; margin: 4px 0 18px; }
.ladder span { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--tier) 30%, var(--s2)); }
.ladder span.on { background: var(--tier); height: 10px; box-shadow: 0 0 12px var(--tier); }
.ladder-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tx3); margin-top: -12px; margin-bottom: 18px; }
.cp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.cp-stats > div { padding: 12px 14px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); }
.cp-stats b { display: block; font-size: 21px; font-weight: 750; letter-spacing: -.02em; }
.cp-stats span { font-size: 12px; color: var(--tx3); }
.copies { margin-bottom: 18px; }
.cp-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px auto; gap: 12px; align-items: center; padding: 10px 0; font-size: 13.5px; }
.cp-row + .cp-row { border-top: 1px solid var(--line); }
.cp-row > b { font: 700 15px var(--mono); text-align: right; }
.you-have { font-size: 12.5px; color: var(--tx3); margin-top: 6px; }
.cp-none { font-size: 15px; display: block; margin-bottom: 6px; }
.radar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.radar form { margin-bottom: 6px; }
.radar-on { margin: 0; color: var(--bl); font-weight: 600; }
.copies .row { margin-top: 12px; }
.note { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; color: var(--tx3); }
.note .i { width: 15px; height: 15px; margin-top: 1px; }
.h3 { font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); margin: 22px 0 10px; }

/* ---------- DGS slabs ---------- */
/* The label's fonts, under names of their own so they never stand in for the site's. They never
   change (a new version would get a new file name), so they aren't linked with ?v=. */
@font-face { font-family: "DGS Oswald"; font-weight: 500; font-display: swap; src: url(/static/fonts/oswald-500.ttf) format("truetype"); }
@font-face { font-family: "DGS Oswald"; font-weight: 600; font-display: swap; src: url(/static/fonts/oswald-600.ttf) format("truetype"); }
@font-face { font-family: "DGS Oswald"; font-weight: 700; font-display: swap; src: url(/static/fonts/oswald-700.ttf) format("truetype"); }
@font-face { font-family: "DGS Inter"; font-weight: 600; font-display: swap; src: url(/static/fonts/inter-600.ttf) format("truetype"); }
@font-face { font-family: "DGS Inter"; font-weight: 700; font-display: swap; src: url(/static/fonts/inter-700.ttf) format("truetype"); }
/* A slab with thickness: the face in front, and layers of plastic behind it that show as its edge
   when it tilts (a real slab is about 7% as thick as it is wide). */
.slab3d { position: relative; display: block; aspect-ratio: 3 / 5; transform-style: preserve-3d; --depth: 30px; }
.slab3d .sl-face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: translateZ(calc(var(--depth) / 2)); }
.slab3d .sl-edge {
  position: absolute; inset: .6% 1%; border-radius: 5% / 3%; pointer-events: none;
  transform: translateZ(calc(var(--depth) / 2 - var(--i) * var(--depth) / 12));
  background: color-mix(in srgb, #56627a calc(var(--i) * 6%), #c4ced9); border: 1px solid rgba(255, 255, 255, .22);
}
.slab3d .sl-edge:nth-child(12) { box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .85); }
.slab3d .sl-glare {
  position: absolute; inset: .6% 1%; border-radius: 5% / 3%; pointer-events: none; transform: translateZ(calc(var(--depth) / 2 + 1px));
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .28) 48%, transparent 58%) no-repeat;
  background-size: 300% 300%; background-position: calc(50% - var(--mx, 0) * 90%) calc(50% - var(--my, 0) * 90%);
  opacity: 0; transition: opacity .3s;
}
.tilting .slab3d .sl-glare { opacity: 1; }
.tilt.slab3d { box-shadow: none; border-radius: 0; }
.page-slab .cp-art { max-width: 360px; }
.dgs-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: #f08a80; margin-bottom: 8px; }
.grade-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; background: #c62828; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.grade-chip.pristine { background: linear-gradient(90deg, #b8892a, #f3dc8a 45%, #d4a93a); color: #141416; }
.sl-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 13.5px; }
.sl-row + .sl-row { border-top: 1px solid var(--line); }
.sl-row > span { color: var(--tx3); }
.sl-row a { color: var(--tx); }
.dgs .slab-strip { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.slab-mini { width: 84px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--tx2); text-align: center; }
.slab-mini .slab3d { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); transition: transform .18s; }
.slab-mini:hover .slab3d { transform: translateY(-3px); }
.dgs .row { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.slab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 26px 20px; }
.slab-tile { display: flex; flex-direction: column; gap: 10px; color: var(--tx); min-width: 0; }
.slab-tile .slab3d { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); transition: transform .18s; }
.slab-tile:hover .slab3d { transform: translateY(-4px); }
.st-cap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-cap b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cap small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "DGS": a card with slabs, and slabs in trades. */
.dgs-b { display: inline-block; padding: 3px 5px; border-radius: 4px; background: #c62828; color: #fff; font: 700 9.5px/1 var(--mono); letter-spacing: .04em; vertical-align: 1px; }
.art .dgs-b { position: absolute; left: 5px; bottom: 5px; z-index: 3; }
[data-density="table"] .ct .dgs-b { display: none; }
.tb-q.dgs-q { background: #c62828; color: #fff; }
.tb-q.dgs-q.gold { background: linear-gradient(90deg, #b8892a, #f3dc8a 45%, #d4a93a); color: #141416; }
.thumb.slabbed { box-shadow: 0 0 0 2px #c5cfda, 0 0 0 3px #8e9bad; }

/* ---------- trades ---------- */
.tr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.tr-sec { font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.tr-sec .n { font-family: var(--mono); color: var(--tx2); }
.trade + .tr-sec { margin-top: 24px; }
.trade + .trade { margin-top: 12px; }
.trade { border-radius: var(--r); border: 1px solid var(--line); background: var(--s1); padding: 14px 16px; position: relative; scroll-margin-top: 80px; }
.trade.pending.in { border-color: rgba(75, 132, 213, .5); box-shadow: 0 0 0 3px rgba(75, 132, 213, .08); }
.tile .trade { border: 0; padding: 0; background: none; box-shadow: none; }
.trade header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.trade header img { width: 30px; height: 30px; border-radius: 50%; }
.trade header b { font-weight: 650; font-size: 14px; }
.trade header b a { color: var(--tx); }
.trade header small { display: block; color: var(--tx3); font-size: 12px; }
.st { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.st-pending { background: var(--btint); color: var(--bl); }
.st-accepted { background: rgba(63, 207, 142, .13); color: #8fe6bd; }
.st-declined, .st-cancelled, .st-expired, .st-failed { background: rgba(255, 123, 123, .1); color: #ffaaaa; }
.tnote { font-size: 13px; color: var(--tx2); padding: 8px 12px; border-radius: 10px; background: var(--bg0); margin-bottom: 12px; border: 1px solid var(--line); }
.tswap { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.tarrow { display: grid; place-items: center; height: 100%; color: var(--tx3); }
.tl { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); margin-bottom: 8px; }
.tcards { display: flex; flex-wrap: wrap; gap: 10px; }
.tcard { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 10px 6px 6px; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); max-width: 100%; color: var(--tx); }
.tcard:hover { border-color: var(--line3); color: var(--tx); }
.tcard .thumb { width: 40px; }
.tc-t { min-width: 0; }
.tcard b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard small { display: flex; align-items: center; gap: 5px; color: var(--tx3); font-size: 11px; white-space: nowrap; }
.tcard .qq { font: 700 12px var(--mono); color: var(--tx); margin-left: auto; padding-left: 6px; }
.tcard .lastc { color: #ffb0b0; }
.tempty { font-size: 12.5px; color: var(--tx3); padding: 8px 0; }
.tv { font-size: 11.5px; color: var(--tx3); margin-top: 7px; }
.impact { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--tx2); padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, .025); }
.impact.good { background: var(--ytint); color: var(--y2); }
.impact.bad { background: rgba(255, 123, 123, .08); color: #ffb7b7; }
.trade footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.trade.closed { opacity: .8; padding: 12px 14px; }
.trade.closed .tnote, .trade.closed .tv { display: none; }
.trade.closed .tcard { padding: 4px 8px 4px 4px; }
.trade.closed .tcard .thumb { width: 28px; }
.tr-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
.with { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--tx2); }
.with .dd { flex: 1; min-width: 0; }
.partners { display: flex; flex-wrap: wrap; gap: 6px; }
.partner { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--bg0); border: 1px solid var(--line); color: var(--tx2); font-size: 12.5px; }
.partner:hover { color: var(--tx); border-color: var(--line3); }
.partner img, .partner .av-none { width: 22px; height: 22px; border-radius: 50%; font-size: 11px; }
/* trade builder: an offer per side over the cards to pick from */
.tb-swaps { margin-bottom: 14px; }
.sw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.sw-list .match + .match { margin-top: 0; }
.match .btn.on { color: var(--tx2); }
.match .btn.on .i { color: var(--ok); }
.tb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.tb-zone {
  display: flex; flex-direction: column; justify-content: center; min-height: 86px; padding: 8px; margin-bottom: 12px; border-radius: 12px;
  background: var(--bg0); border: 1.5px dashed var(--line3); transition: border-color .15s, background .15s, box-shadow .15s;
}
.tb-zone:focus { outline: none; }
.tb-zone.has { justify-content: flex-start; border-style: solid; border-color: var(--line2); }
.drag-in.drag-give [data-side="give"] .tb-zone, .drag-in.drag-want [data-side="want"] .tb-zone { border-color: var(--b); background: var(--btint); }
.tb-zone.over { border-color: var(--bl); box-shadow: 0 0 0 3px var(--btint); }
.tb-hint { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--tx3); font-size: 12.5px; text-align: center; }
.tb-picks { display: flex; flex-direction: column; gap: 6px; }
.tb-pick {
  display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 5px; border-radius: 9px; background: var(--s2);
  border: 1px solid var(--line); cursor: grab; animation: pick-in .2s cubic-bezier(.2, .8, .2, 1);
}
@keyframes pick-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.tb-pick .thumb { width: 30px; }
.tp-t { flex: 1; min-width: 0; }
.tp-t b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-t small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tx3); white-space: nowrap; overflow: hidden; }
.tp-t .lastc { color: #ffb0b0; }
.tp-t .newc { color: var(--y2); }
.qpill { display: inline-flex; align-items: center; height: 30px; padding: 0 1px; border-radius: 15px; background: var(--bg0); border: 1px solid var(--line2); flex: none; }
.qpill button { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: none; color: var(--tx2); }
.qpill button:hover:not([disabled]) { background: var(--s3); color: var(--tx); }
.qpill button[disabled] { opacity: .3; cursor: not-allowed; }
.qpill button .i { width: 14px; height: 14px; }
.qpill b { min-width: 18px; text-align: center; font: 700 12.5px var(--mono); }
.tb-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tb-tools .search { max-width: none; }
.tb-show .n { font: 500 11px var(--mono); color: var(--tx3); }
.tb-pool {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; align-content: start; max-height: 52vh;
  overflow-y: auto; padding: 2px 4px 2px 2px; border-radius: 10px; scrollbar-width: thin; scrollbar-color: var(--s3) transparent;
}
.tb-pool > .empty-note { grid-column: 1 / -1; padding: 6px 2px; }
.drag-out .tb-pool.over { box-shadow: inset 0 0 0 2px rgba(255, 123, 123, .45); background: rgba(255, 123, 123, .05); }
.tb-card { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 5px; border-radius: 10px; border: 1px solid transparent; }
.js .tb-card { cursor: grab; user-select: none; -webkit-user-select: none; }
.js .tb-card:hover { background: rgba(255, 255, 255, .035); border-color: var(--line2); }
.tb-card .thumb { position: relative; width: 100%; border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.tb-card .thumb img { pointer-events: none; }
.tb-q { position: absolute; top: 4px; right: 4px; padding: 3px 5px; border-radius: 5px; background: rgba(15, 20, 38, .86); font: 700 10.5px/1 var(--mono); color: var(--tx); }
.tb-flag { position: absolute; left: 4px; bottom: 4px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.tb-flag.slot { background: #24365f; }
.tb-flag.new { background: #3b3518; }
.tb-cap { min-width: 0; padding: 0 1px; }
.tb-cap b { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-cap small { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; }
.tb-cap .td { width: 6px; height: 6px; box-shadow: none; }
.tb-card input { width: 100%; height: 28px; padding: 0 6px; text-align: center; font-family: var(--mono); }
.js .tb-card input { display: none; }
:root:not(.js) .tb-zone, :root:not(.js) .tb-show { display: none; }
.tb-card.picked { background: var(--btint); border-color: rgba(75, 132, 213, .5); }
.tb-card[data-in]::after {
  content: attr(data-in) " in offer"; position: absolute; left: 50%; top: 34%; transform: translateX(-50%); padding: 3px 7px; border-radius: 6px;
  background: var(--b2); color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.tb-card.all-in .thumb img { opacity: .45; }
.tb-card.nope { animation: nope .35s; }
@keyframes nope { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.tb-foot textarea { width: 100%; min-height: 58px; resize: vertical; margin-bottom: 10px; }
.bfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--tx3); flex-wrap: wrap; }
.bfoot b { color: var(--y); }

/* ---------- sets ---------- */
.drop { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 14px; }
.drop .th { margin-bottom: 6px; }
.drop .drop-bar { flex: 1; min-width: 220px; margin: 0; }
.drop .bar { height: 8px; }
.drop .slots { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.drop .slots b { color: var(--tx2); }
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.setcard { display: flex; flex-direction: column; gap: 12px; padding: 16px; color: var(--tx); transition: transform .15s, border-color .15s; }
a.setcard:hover { transform: translateY(-2px); border-color: var(--line3); color: var(--tx); }
.setcard .top2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.setcard .top2 img { height: 44px; width: auto; max-width: 140px; object-fit: contain; }
.setcard b { font-size: 15px; font-weight: 700; }
.setcard small { color: var(--tx3); font-size: 12px; }
.setcard.mystery { border-style: dashed; align-items: center; justify-content: center; text-align: center; color: var(--tx3); min-height: 170px; }
.setcard.mystery .q2 { font: 700 34px var(--mono); color: var(--tx2); }

/* ---------- binders ---------- */
.binders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 18px; }
.binder { display: block; color: var(--tx); text-align: left; }
.binder:hover { color: var(--tx); }
.b-cover {
  position: relative; aspect-ratio: 5 / 4; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #2a3768, #1a2244 60%, #151b36);
  border: 1px solid var(--line2); display: grid; place-items: center; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8); transition: transform .18s;
}
a.binder:hover .b-cover { transform: translateY(-3px); }
.b-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .04)); border-right: 1px solid rgba(255, 255, 255, .06); }
.b-cover .art { height: 82%; width: auto; border-radius: 5px; box-shadow: 0 10px 22px rgba(0, 0, 0, .55); }
.b-vis { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 650; padding: 3px 7px; border-radius: 6px; background: rgba(10, 14, 28, .7); color: var(--tx2); }
.b-vis .i { width: 12px; height: 12px; }
.b-meta { margin-top: 9px; }
.b-meta b { display: block; font-size: 14px; font-weight: 650; }
.b-meta small { color: var(--tx3); font-size: 12px; }
.binder.add .b-cover { background: var(--bg0); border: 1.5px dashed var(--line3); color: var(--tx3); display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.binder.add .b-cover::before { display: none; }
.binder.add .b-cover > .i { width: 24px; height: 24px; }
.binder.add input { width: 100%; }
/* A binder's pages, two side by side like an open binder. */
.pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; }
.page { padding: 16px; border-radius: 14px; background: linear-gradient(135deg, #202a50, #171e3a); border: 1px solid var(--line2); }
.page h3 { margin: 0 0 10px; font-size: 11px; color: var(--tx3); text-transform: uppercase; letter-spacing: .07em; }
.pockets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pocket { position: relative; display: block; aspect-ratio: 245 / 342; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); }
.pocket.filled { background: var(--s2); border-color: transparent; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8); }
.pocket.filled img { width: 100%; height: 100%; object-fit: cover; }
.rev-badge { position: absolute; z-index: 3; left: 5px; bottom: 5px; font: 700 10.5px/1 var(--mono); padding: 4px 5px; border-radius: 5px; background: rgba(10, 14, 28, .84); color: #a8e7ff; border: 1px solid rgba(255, 255, 255, .14); }
/* binder editor (binder-edit.js) */
.binder-meta { display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 16px; }
.binder-meta label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tx3); font-weight: 600; }
.binder-meta input, .binder-meta select, .picker-filters input, .picker-filters select { height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line2); background: var(--bg0); color: var(--tx); }
.binder-meta .actions { display: flex; gap: 8px; align-items: center; }
.editor { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.editor .picker { position: sticky; top: 70px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.picker-filters { display: grid; gap: 6px; }
.picker-filters .check { font-size: 12.5px; color: var(--tx3); display: flex; gap: 6px; align-items: center; }
.picker-count { margin: 0; font-size: 12.5px; }
.picker-results { overflow-y: auto; display: grid; gap: 4px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--s3) transparent; }
.pick-card {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; text-align: left; background: var(--bg0); border: 1px solid var(--line);
  border-left: 3px solid var(--tier); border-radius: 9px; padding: 5px 8px; color: var(--tx); font-size: 12.5px;
}
.pick-card:hover { border-color: var(--line3); border-left-color: var(--tier); }
.pick-card img { width: 36px; border-radius: 3px; }
.pick-card.placed { opacity: .35; }
.hide-placed-on .pick-card.placed { display: none; }
.binder-pages > .muted { font-size: 12.5px; margin-bottom: 12px; }
.binder-pages .pocket { cursor: pointer; }
.binder-pages .pocket.selected { outline: 2.5px solid var(--y); outline-offset: 2px; }
.binder-pages .pocket.over { outline: 2.5px dashed var(--y); }
/* Dragging is done in JS (binder-edit.js); keep long-presses from selecting text or opening the image menu. */
.binder-pages .pocket, .pick-card { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.binder-pages .pocket.dragging, .pick-card.dragging { opacity: .4; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 100; width: 90px; pointer-events: none; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); opacity: .9; }
.drag-ghost img { width: 100%; display: block; }
.pocket .remove, .pocket .cover-btn {
  position: absolute; z-index: 4; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(10, 14, 28, .8);
  color: #fff; font-size: 14px; line-height: 1; display: none; padding: 0;
}
.pocket .remove { right: 4px; font-size: 16px; }
.pocket .cover-btn { left: 4px; }
.pocket:hover .remove, .pocket:hover .cover-btn, .pocket.cover .cover-btn { display: block; }
.pocket.cover .cover-btn { color: var(--y); }
.page-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.modal { border: 1px solid var(--line3); border-radius: 16px; padding: 0; background: var(--s1); color: var(--tx); width: min(420px, calc(100vw - 32px)); box-shadow: 0 40px 90px -10px rgba(0, 0, 0, .7); }
.modal::backdrop { background: rgba(6, 9, 20, .62); backdrop-filter: blur(3px); }
.modal form { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 20px; }
.modal img { width: 100%; border-radius: 6px; }
.modal h3 { margin: 0 0 6px; }
.modal .actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.modal .btn.ok { background: linear-gradient(180deg, #4a72c4, #3e5fac); border-color: #5a7fcb; color: #fff; }
.danger-zone { margin-top: 32px; }

/* ---------- overlays ---------- */
.ov { position: fixed; inset: 0; z-index: 80; background: rgba(6, 9, 20, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; }
.ov.on { display: block; animation: fade .14s ease; }
@keyframes fade { from { opacity: 0; } }
.pal {
  position: absolute; left: 50%; top: 11vh; transform: translateX(-50%); width: min(660px, calc(100vw - 24px)); background: var(--s1);
  border: 1px solid var(--line3); border-radius: 16px; box-shadow: 0 40px 90px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .4); overflow: hidden;
  animation: pop .16s cubic-bezier(.2, .8, .2, 1);
}
@keyframes pop { from { opacity: 0; transform: translate(-50%, -8px) scale(.98); } }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--line2); }
.pal-in .i { width: 18px; height: 18px; color: var(--tx3); }
.pal-in input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--tx); font-size: 16px; padding: 0; box-shadow: none; }
.pal-in input::placeholder { color: var(--tx3); }
.pal-list { max-height: min(440px, 58vh); overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--s3) transparent; }
.pal-g { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); padding: 10px 10px 5px; }
.pi { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 9px; cursor: pointer; min-height: 42px; }
.pi.on { background: var(--s3); }
.pi-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--s2); border: 1px solid var(--line); display: grid; place-items: center; flex: none; color: var(--tx2); overflow: hidden; }
.pi-ic.rw { background: var(--ytint); color: var(--y); border-color: rgba(255, 203, 5, .25); }
.pi-ic .thumb { width: 22px; border-radius: 2px; }
.pi-ic img.lg { width: 26px; height: auto; }
.pi-ic img.av { width: 30px; height: 30px; }
.pi-t { flex: 1; min-width: 0; }
.pi-t b { display: block; font-weight: 550; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-t small { display: block; color: var(--tx3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-k { display: flex; gap: 3px; }
.pi-go { color: var(--tx3); font-size: 12px; opacity: 0; width: 14px; }
.pi.on .pi-go { opacity: 1; }
.pal-f { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line2); font-size: 11.5px; color: var(--tx3); background: var(--bg0); }
.pal-f span { display: inline-flex; align-items: center; gap: 5px; }
.pal-f .pal-try { margin-left: auto; }
.pal-empty { padding: 28px; text-align: center; color: var(--tx3); font-size: 13px; }
.dlg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
  overflow: auto; background: var(--s1); border: 1px solid var(--line3); border-radius: 16px; box-shadow: 0 40px 90px -10px rgba(0, 0, 0, .7); padding: 22px;
}
.dlg.wide { width: min(640px, calc(100vw - 24px)); }
.dlg h3 { font-size: 19px; font-weight: 750; margin-bottom: 6px; }
.dlg > p { font-size: 13.5px; color: var(--tx2); margin-bottom: 14px; }
.keys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.keys-grid h4 { grid-column: 1 / -1; margin: 12px 0 4px; font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.keys-grid h4:first-child { margin-top: 4px; }
.kr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--tx2); border-bottom: 1px solid var(--line); }
.kr span:last-child { display: flex; gap: 3px; align-items: center; font-size: 11px; color: var(--tx3); }
.sum { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.sum-r { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; }
.sum-r + .sum-r { border-top: 1px solid var(--line); }
.sum-r .c { margin-left: auto; font: 500 12px var(--mono); color: var(--tx3); }
.sum-r .v { font: 700 12.5px var(--mono); color: var(--y); min-width: 70px; text-align: right; }
.hiwarn { display: flex; gap: 10px; padding: 11px 12px; border-radius: 11px; background: rgba(255, 154, 61, .1); border: 1px solid rgba(255, 154, 61, .35); color: #ffd3a8; font-size: 12.5px; margin: 12px 0; }
.hiwarn .i { color: var(--t-ultra); margin-top: 1px; }
.hiwarn b { color: #ffe2c4; }
.hiwarn ul { margin: 4px 0 0; padding-left: 16px; }
.total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 2px; font-size: 13.5px; color: var(--tx2); }
.total b { font: 800 26px var(--mono); letter-spacing: -.03em; color: var(--y); }
.dlg-act { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
/* sell sheet: the sell form (sell_form.html) in a drawer; a bottom sheet on phones */
.scrim { position: fixed; inset: 0; z-index: 84; background: rgba(6, 9, 20, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 85; width: min(440px, 100vw); background: var(--s1); border-left: 1px solid var(--line3);
  transform: translateX(102%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column;
  box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .6); visibility: hidden;
}
.sheet.on { transform: none; visibility: visible; }
.sheet .sellf, .sell-page .sellf { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sell-page { max-width: 560px; margin: 0 auto; padding: 0; }
.sh-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.sh-h h3 { font-size: 18px; font-weight: 750; }
.sh-h p { font-size: 12.5px; color: var(--tx3); margin-top: 3px; }
.sh-h .ibtn { margin-left: auto; }
.sh-b { flex: 1; overflow-y: auto; padding: 16px 20px; }
.sh-f { padding: 14px 20px; border-top: 1px solid var(--line2); background: var(--bg0); }
.sell-page .sh-f { border-radius: 0 0 var(--r) var(--r); }
.sh-f .total { padding: 0 0 10px; }
.repeat-card {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 203, 5, .35);
  background: linear-gradient(180deg, rgba(255, 203, 5, .09), rgba(255, 203, 5, .02)); color: var(--tx); text-align: left; margin-bottom: 16px;
}
.repeat-card:hover { border-color: var(--y); }
.repeat-card .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--y); color: var(--navy); flex: none; }
.repeat-card b { display: block; font-size: 13.5px; }
.repeat-card small { color: var(--tx3); font-size: 12px; }
.repeat-card .v { margin-left: auto; font: 700 13px var(--mono); color: var(--y); white-space: nowrap; }
.fl { display: block; font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); margin: 0 0 8px; }
#sell-set { margin-bottom: 16px; }
.tier-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg0); color: var(--tx); margin-bottom: 6px; font-size: 13px; cursor: pointer; }
.tier-opt:hover { border-color: var(--line3); }
.tier-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tier-opt:focus-within { outline: 2px solid var(--bl); outline-offset: 1px; }
.tier-opt .cb { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line3); display: grid; place-items: center; color: transparent; flex: none; }
.tier-opt .cb .i { width: 12px; height: 12px; stroke-width: 3.2; }
.tier-opt:has(input:checked) { border-color: rgba(75, 132, 213, .5); background: linear-gradient(0deg, var(--btint), var(--btint)), var(--bg0); }
.tier-opt:has(input:checked) .cb { background: var(--b); border-color: var(--b); color: #fff; }
.tier-opt .nm { flex: 1; display: flex; align-items: center; gap: 8px; }
.tier-opt .hi { font-size: 9.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--t-ultra); border: 1px solid rgba(255, 154, 61, .4); padding: 1px 5px; border-radius: 4px; }
.tier-opt .c { font: 500 12px var(--mono); color: var(--tx3); min-width: 52px; text-align: right; }
.tier-opt .v { font: 700 12.5px var(--mono); color: var(--y); min-width: 64px; text-align: right; }
/* bulk bar: what's selected on the collection page */
.bulk {
  position: fixed; z-index: 60; bottom: 18px; left: calc(var(--side) + (100vw - var(--side)) / 2); transform: translate(-50%, calc(100% + 40px));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1); display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 8px; background: #0b1020;
  border: 1px solid var(--line3); border-radius: 14px; box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .5);
  width: max-content; max-width: calc(100vw - var(--side) - 40px);
}
.bulk.on { transform: translate(-50%, 0); }
.bulk:not(.on) { visibility: hidden; }
.bulk .cnt { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.bulk .cnt .ck { width: 22px; height: 22px; border-radius: 6px; background: var(--b); display: grid; place-items: center; color: #fff; }
.bulk .cnt .ck .i { width: 13px; height: 13px; stroke-width: 3.2; }
.bulk .cnt small { font-weight: 500; color: var(--tx3); font-size: 12.5px; }
.bulk .div { width: 1px; height: 24px; background: var(--line2); }
.bulk .hiw { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #ffc88f; padding: 0 6px; white-space: nowrap; }
.bulk .hiw .i { width: 14px; height: 14px; }
/* toasts and the g-chord hint */
.toasts { position: fixed; top: 68px; right: 20px; z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 10px 10px 10px 14px; border-radius: 12px; background: #0b1020;
  border: 1px solid var(--line3); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7); font-size: 13px; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s;
}
.toast.in { opacity: 1; transform: none; }
.toast > .i { color: var(--bl); }
.toast.reward { border-color: rgba(255, 203, 5, .45); }
.toast.reward > .spk { width: 16px; height: 16px; }
.toast.bad { border-color: rgba(255, 123, 123, .4); }
.toast.bad > .i { color: var(--bad); }
.toast .tt { flex: 1; }
.toast .tt small { display: block; color: var(--tx3); font-size: 12px; }
.chord {
  position: fixed; left: calc(var(--side) + (100vw - var(--side)) / 2); bottom: 24px; transform: translateX(-50%); z-index: 98; display: none; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 12px; background: #0b1020; border: 1px solid var(--line3); font-size: 12px; color: var(--tx3); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7); white-space: nowrap;
}
.chord.on { display: flex; }
.chord span { display: inline-flex; gap: 5px; align-items: center; }

/* ---------- error page ---------- */
.error-page img { margin: 0 auto 12px; }
.error-page h1 { font-size: 40px; margin-bottom: 6px; }

/* ---------- owner dashboard (/admin) ----------
   Chart colours are validated for this dark panel: free/earned blue, bought orange, spent red; owner
   tests are de-emphasised gray. Status is always icon + colour. */
.admin { --s-free: #3987e5; --s-bought: #d95926; --s-sealed: #b3842b; --s-owner: #6b7385; --s-earned: #3987e5; --s-spent: #e66767; --grid: #2a3352; --axis: #3a4568; }
.admin h1 { font-size: 25px; font-weight: 750; }
.admin h2 { margin: 36px 0 12px; font-size: 18px; }
.admin h3 { margin: 0 0 8px; font-size: 15px; }
.admin h3.inline { display: inline; }
.admin section > .panel, .admin section > details.panel { margin-bottom: 16px; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.admin-head h1 { margin: 0 0 4px; }
.admin-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.admin-toc a { padding: 4px 12px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); color: var(--tx2); font-size: 13px; }
.admin-toc a:hover { color: var(--tx); border-color: var(--line3); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.admin-grid.halves { grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); }
.admin .scroll { overflow-x: auto; }
.admin details > summary { cursor: pointer; }
.admin p { margin: 0 0 8px; }
.admin h4 { margin: 0; font-size: 14px; }
.row-acts { display: flex; gap: 6px; align-items: center; }
.row-acts form { display: contents; }
/* The overrides panel's form: fix a set, or change an override (admin.js fills it in for Edit). */
.override-form, .rush-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 10px; padding-top: 14px; border-top: 1px solid var(--grid); }
.override-form > h4, .override-form > p, .override-form > .wide, .override-form > .row-acts, .rush-form > p, .rush-form > .row-acts { grid-column: 1 / -1; }
.override-form label, .rush-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tx3); font-weight: 600; }
.override-form .dd, .override-form input, .rush-form input { width: 100%; height: 34px; font-size: 13px; }
.rush-form { margin-top: 0; padding-top: 0; border-top: 0; }
.rush-on { padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: var(--s2); }
.rush-on form { margin-top: 6px; }
.rush-now { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; padding-top: 14px; border-top: 1px solid var(--grid); }
.rush-now p { margin: 0; }
/* Economics (/admin/economics): its settings, then a wait per player and rarity (admin.js swaps the results in). */
.econ-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; margin-top: 18px; }
.econ-form > .wide { grid-column: span 2; }
.econ-form > p { grid-column: 1 / -1; margin: 0; }
.econ-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tx3); font-weight: 600; }
.econ-form label.check { flex-direction: row; align-items: center; gap: 8px; min-height: 34px; color: var(--tx2); font-size: 13px; font-weight: 500; }
.econ-form .dd, .econ-form input[type=text], .econ-form input[type=number] { width: 100%; height: 34px; font-size: 13px; }
#econ-results { transition: opacity .15s; }
.econ-form[aria-busy="true"] + #econ-results { opacity: .6; }
.forecast th, .forecast td { vertical-align: top; }
.forecast tbody th { font-weight: 600; }
/* The player column stays put while the rarities scroll sideways. */
.forecast tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--s1); }
.forecast small { display: block; color: var(--tx3); font-size: 11.5px; font-weight: 500; }
.forecast td.wait strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.forecast td.never strong { color: var(--tx3); font-weight: 500; }
.econ-notes { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 640px) { .econ-form > .wide { grid-column: 1 / -1; } }
/* Its simulation: a form whose sliders move number boxes (the boxes are what's sent), and results that dim while new ones come. */
.sim-form { display: grid; gap: 14px; }
.sim-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: end; }
.sim-row > p { grid-column: 1 / -1; margin: 0; }
.sim-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tx3); font-weight: 600; }
.sim-form .dd, .sim-form input[type=number] { height: 34px; font-size: 13px; }
.sim-form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; min-width: 0; }
.sim-form legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--tx3); }
.sim-boxes { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sim-form .sim-boxes label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--tx2); font-size: 13px; font-weight: 500; }
.sim-boxes > p { flex-basis: 100%; margin: 0; }
.sim-prices { display: grid; gap: 8px; }
.sim-prices > p { margin: 4px 0 0; }
.knob { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(120px, 2fr) 11.5em minmax(140px, auto); gap: 6px 12px; align-items: center; }
.sim-form .knob label { font-size: 13px; color: var(--tx2); font-weight: 550; }
.knob input[type=range] { width: 100%; accent-color: var(--b); }
.knob-value { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx3); white-space: nowrap; }
.knob input[type=number] { width: 104px; }
.sim-form .knob.changed label { color: var(--tx); }
.knob.changed input[type=number] { border-color: var(--b); background: var(--btint); }
.tag.whatif { background: var(--btint); color: var(--bl); border-color: rgba(75, 132, 213, .35); }
.sim-progress:empty { display: none; }
.sim-results { margin-top: 16px; transition: opacity .15s; }
.sim-results[aria-busy="true"] { opacity: .55; }
.sim-results > .panel, .sim-schedule > .panel, .sim-schedule > details.panel { margin-bottom: 14px; }
.sim-summary p:last-child { margin-bottom: 0; }
.sim-schedule h3 .muted { font-weight: 500; }
.admin h4.inline { display: inline; }
@media (max-width: 640px) { .knob { grid-template-columns: 1fr auto; } .knob input[type=range] { grid-column: 1 / -1; } }
/* Every set (/admin/sets): sets by series, then a set's cards at a size worth looking at. Its own
   classes, not the collection's .grid/.ct, so the player's density setting leaves it alone. */
.set-series h2 small { font: 500 13px var(--mono); }
.set-head { display: flex; align-items: center; gap: 16px; }
.set-head img { height: 56px; width: auto; max-width: 180px; object-fit: contain; }
.t-none { --tier: var(--tx3); }
.cardwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 14px; }
.cw { min-width: 0; }
.cw .art { box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .7); transition: transform .18s ease; }
.cw a.art:hover { transform: translateY(-3px); }
.cw .art.noimg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 8px; text-align: center; border: 1.5px dashed var(--line2); background: var(--bg0); box-shadow: none; }
.noimg .mn { font: 600 13px var(--mono); color: var(--tx3); }
.noimg .mname { font-size: 12.5px; font-weight: 600; color: var(--tx2); line-height: 1.2; }
.noimg .mr { font-size: 10px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .05em; }
.cw .cap { display: grid; gap: 5px; margin-top: 8px; font-size: 12.5px; }
.cw .l1, .cw .l2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cw .no { font: 500 10.5px var(--mono); color: var(--tx3); }
.cw .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx2); }
.cw .l2 { font-size: 11.5px; color: var(--tx3); }
.cw .l2 > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox { border: 1px solid var(--line3); border-radius: 16px; padding: 16px; background: var(--s1); color: var(--tx); box-shadow: 0 40px 90px -10px rgba(0, 0, 0, .7); }
.lightbox::backdrop { background: rgba(6, 9, 20, .8); backdrop-filter: blur(3px); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; height: min(78vh, 825px); width: auto; max-width: calc(100vw - 64px); aspect-ratio: 600 / 825; object-fit: contain; border-radius: 4.8% / 3.4%; }
.lightbox figcaption { margin-top: 10px; font-size: 13.5px; color: var(--tx2); text-align: center; }
.lb-acts { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
/* A set's lucky packs: their tiles on the set's page, and the slot editor (lucky-edit.js). Slots in a
   row in the pack's order, the selected one outlined in yellow (a reward); the set's cards below. */
.lucky-tiles .tile { gap: 6px; }
.lucky-tiles .tile .value { font-size: 17px; line-height: 1.35; }
.lucky-tiles .row-acts { margin-top: auto; padding-top: 6px; }
.lucky-page .panel { margin: 16px 0; }
.lucky-page h2 { margin: 0 0 10px; font-size: 16px; }
.lucky-page h3 { margin: 22px 0 10px; }
.lucky-page .seg > a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; color: var(--tx2); font-size: 13px; }
.lucky-page .seg > a.on { background: var(--s3); color: var(--tx); }
.lucky-odds label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.lucky-odds input { width: 130px; height: 34px; }
.lucky-odds p { margin: 8px 0 0; }
.lucky-contents { display: grid; gap: 10px; }
.lucky-contents label.check { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--tx2); }
.lucky-contents b { color: var(--tx); }
.lucky-editor { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.lucky-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.lucky-bar p { margin: 0; max-width: 560px; }
.lucky-bar .row-acts { flex-wrap: wrap; }
.lucky-slots { list-style: none; margin: 0; padding: 4px 2px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 10px; }
.lslot { min-width: 0; display: flex; flex-direction: column; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line2); cursor: pointer; }
.lslot.selected { outline: 2.5px solid var(--y); outline-offset: 2px; }
.lslot.over { outline: 2.5px dashed var(--y); outline-offset: 2px; }
.lslot.dragging { opacity: .4; }
.lslot.blank { border-style: dashed; }
.lslot-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; border-bottom: 1px solid var(--line); cursor: grab; }
.lslot-no { font: 700 13px var(--mono); color: var(--tx); min-width: 18px; }
.lslot-count { flex: 1; font-size: 11.5px; color: var(--tx3); white-space: nowrap; }
.lslot .x { width: 22px; height: 22px; border-radius: 6px; border: 0; background: none; color: var(--tx3); padding: 0; font-size: 15px; line-height: 1; }
.lslot .x:hover:not(:disabled) { background: var(--s3); color: var(--tx); }
.lslot .x:disabled { opacity: .3; cursor: default; }
.lslot-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 8px; min-height: 92px; align-content: start; }
.lslot-hint { grid-column: 1 / -1; align-self: center; text-align: center; font-size: 12px; padding: 22px 0; }
.lcard { position: relative; }
.lslot-more { display: grid; place-items: center; aspect-ratio: 245 / 342; border-radius: 4px; background: var(--s2); color: var(--tx2); font: 700 13px var(--mono); }
.lcard .art { border-radius: 4px; }
.lcard.gone .art { outline: 2px solid #d03b3b; }
.lcard-x { position: absolute; top: -5px; right: -5px; display: none; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 0; background: #d03b3b; color: #fff; font-size: 12px; line-height: 18px; }
.lcard:hover .lcard-x, .lcard-x:focus-visible { display: block; }
.lucky-status { margin: 4px 0 0; color: var(--tx3); }
.lucky-status.bad { color: #ffb0b0; }
.lucky-preview { margin: 10px 0 0; padding: 12px; border-radius: 10px; background: var(--bg0); }
.lucky-roll { display: flex; align-items: center; gap: 8px; overflow-x: auto; }
.lucky-own { flex: 0 0 auto; max-width: 110px; font-size: 12px; }
.lucky-card { flex: 0 0 92px; margin: 0; text-align: center; }
.lucky-card figcaption { margin-top: 4px; font: 600 11px var(--mono); }
.lucky-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 14px 10px; }
.lpick { position: relative; display: grid; gap: 5px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.lpick .art { box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .7); transition: transform .15s ease; }
.lpick:hover .art { transform: translateY(-2px); }
.lpick.in .art { outline: 2.5px solid var(--y); outline-offset: 2px; }
.lpick.in::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--y); color: var(--navy); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.lpick-cap { display: flex; gap: 5px; min-width: 0; font-size: 11.5px; }
.lpick-cap .no { font: 500 10.5px var(--mono); color: var(--tx3); }
.lpick-cap .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx2); }
.lpick-in { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(15, 20, 38, .85); color: var(--y2); font: 600 10.5px var(--mono); }
.lucky-save { position: sticky; bottom: 0; z-index: 5; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.health { list-style: none; margin: 0; display: grid; gap: 8px; }
.health li { display: grid; grid-template-columns: 110px 22px 1fr; gap: 8px; align-items: baseline; }
.health .label { color: var(--tx3); }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.status i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; color: #111; background: var(--c); }
.status.ok { --c: #0ca30c; }
.status.warn { --c: #fab219; }
.status.bad { --c: #d03b3b; }
.status.bad i { color: #fff; }
.status.info { --c: #8b93a7; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin: 16px 0; }
.tiles .tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.tile .label, .tile .note { color: var(--tx3); font-size: 13px; }
.tile .value { font-size: 28px; font-weight: 650; line-height: 1.2; }
.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data th, .data td { padding: 6px 8px; border-bottom: 1px solid var(--grid, var(--line)); text-align: left; vertical-align: baseline; white-space: nowrap; }
.data thead th { color: var(--tx3); font-weight: 600; font-size: 12.5px; }
.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tier); margin-right: 8px; }
/* Column charts: one scale, hairline grid, thin bars with 4px rounded data ends, 2px gaps. */
.viz { margin: 0; }
.viz figcaption p { margin: 0 0 8px; }
.viz-legend { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--tx3); }
.viz-legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.viz-plot { position: relative; height: 170px; margin: 0 0 26px 48px; border-bottom: 1px solid var(--axis); }
.viz-plot.diverging { border-bottom: 0; }
.viz-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--grid); height: 0; }
.viz-grid span { position: absolute; right: calc(100% + 6px); transform: translateY(-50%); font-size: 11px; color: var(--tx3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.viz-plot.diverging .viz-grid[style="bottom: 50%"] { border-top-color: var(--axis); }
.viz-cols { position: absolute; inset: 0; display: flex; gap: 2px; }
.viz-col { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 4px; outline: none; }
.viz-col:hover, .viz-col:focus-visible { background: rgba(255, 255, 255, .05); }
.viz-col:focus-visible { box-shadow: 0 0 0 2px var(--y); }
.viz-bar { width: 100%; max-width: 24px; display: flex; flex-direction: column; gap: 2px; }
.viz-bar > i { display: block; flex: 1 1 0; min-height: 1px; }
.viz-bar > i:first-child { border-radius: 4px 4px 0 0; }
.viz-half { height: 50%; width: 100%; display: flex; justify-content: center; }
.viz-half.up { align-items: flex-end; }
.viz-half.down { align-items: flex-start; }
.viz-half.down .viz-bar > i:first-child { border-radius: 0 0 4px 4px; }
.viz-x { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--tx3); white-space: nowrap; }
.viz-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; pointer-events: none; }
.viz-col:hover .viz-bar, .viz-col:focus-visible .viz-bar { filter: brightness(1.2); }
.s-free { background: var(--s-free); } .s-bought { background: var(--s-bought); } .s-owner { background: var(--s-owner); }
.s-sealed { background: var(--s-sealed); }
.s-earned { background: var(--s-earned); } .s-spent { background: var(--s-spent); }
.viz-table { margin-top: 4px; font-size: 13px; }
.viz-table summary { color: var(--tx3); }
.viz-table table { margin-top: 8px; }
.viz-tip { position: fixed; z-index: 50; pointer-events: none; background: #0b1020; border: 1px solid var(--axis, var(--line3)); border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); min-width: 120px; }
.viz-tip .title { color: var(--tx3); margin-bottom: 4px; }
.viz-tip .row { display: flex; align-items: center; gap: 8px; }
.viz-tip .row strong { font-variant-numeric: tabular-nums; }
.viz-tip .row span { color: var(--tx3); }
.viz-tip .key { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.viz-tip .key.s-free { background: #3987e5; } .viz-tip .key.s-bought { background: #d95926; } .viz-tip .key.s-owner { background: #6b7385; }
.viz-tip .key.s-sealed { background: #b3842b; }
.viz-tip .key.s-earned { background: #3987e5; } .viz-tip .key.s-spent { background: #e66767; }
/* Horizontal bars (command use): value at the end, rounded at the data end only. */
.hbars { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hbars li { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.hbars .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .track { height: 12px; }
.hbars .track i { display: block; height: 100%; min-width: 2px; background: var(--s-free); border-radius: 0 4px 4px 0; }
.hbars .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .dash .s4 { grid-column: span 6; }
  .dash .s5, .dash .s7, .dash .s8 { grid-column: span 12; }
  .tr-layout { grid-template-columns: minmax(0, 1fr); }
  .tr-side { position: static; }
}
@media (max-width: 1000px) {
  .sethead { grid-template-columns: auto minmax(0, 1fr); }
  .sh-stats { grid-column: 1 / -1; }
  .editor { grid-template-columns: 1fr; }
  .editor .picker { position: static; max-height: none; }
  .picker-results { max-height: 55vh; }
  .binder-meta { grid-template-columns: 1fr; }
  .pocket .remove, .pocket .cover-btn { display: block; }
  .hero-l { grid-template-columns: 1fr; }
  .hero-fan { height: 260px; }
}
@media (max-width: 860px) {
  :root { --side: 0px; }
  .app { grid-template-columns: 1fr; }
  /* The sidebar becomes a drawer, opened by the top bar's menu button (app.js adds .on; #side without JS). */
  .side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 86; width: min(300px, 86vw); height: auto;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
    border-right-color: var(--line2); box-shadow: 0 0 40px rgba(0, 0, 0, .5); overscroll-behavior: contain;
    transform: translateX(-102%); visibility: hidden; transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s .22s;
  }
  .side.on, .side:target { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  .snav a { height: 42px; }
  .srow { min-height: 40px; }
  .snav span.sc, .sbtn kbd { display: none; }
  .top { padding: 0 14px; gap: 8px; }
  .tsearch, .d-only { display: none !important; }
  .m-only { display: inline-flex !important; }
  .ibtn.m-only { display: inline-grid !important; }
  .pill { display: inline-flex; }
  .view { padding: 16px 14px 120px; }
  .foot { padding: 18px 14px calc(28px + env(safe-area-inset-bottom)); }
  .dash { gap: 12px; }
  .dash > div { grid-column: span 12 !important; }
  .hello h1, .pg-h h1 { font-size: 22px; }
  .pk-t { font-size: 38px; }
  /* Fixed rows, so nothing squeezes in beside the toggles: search, then the toggles, then the dropdowns
     (sort gets the most room: "Card number" is the longest default). */
  .tools { top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 6px; }
  .tools .search, .tools .seg, .tools .nojs-only { grid-column: 1 / -1; }
  /* The search shares its row with the highlight. */
  .tools .search { grid-column: 1 / 3; }
  .tools .tgl { grid-row: 1; grid-column: 3; justify-content: center; }
  .tools .tgl kbd { display: none; }
  .tools .search { max-width: none; min-width: 0; }
  .tools .seg { overflow-x: auto; scrollbar-width: none; }
  .tools .seg > label { flex: 1 0 auto; justify-content: center; padding: 0 6px; }
  .tools .dd { width: 100%; min-width: 0; padding: 0 22px 0 9px; background-position: right 6px center; }
  .res-h .r { display: none; }
  .grid { --cw: 100px; --gap: 14px 10px; }
  [data-density="compact"] .grid { --cw: 66px; --gap: 7px; }
  [data-density="table"] .grid .thead, [data-density="table"] .ct { grid-template-columns: 22px 24px 36px minmax(0, 1fr) 46px 46px; gap: 0 7px; padding: 0 8px; }
  [data-density="table"] .ct .cols .c-rar, [data-density="table"] .hm, [data-density="table"] .thead > span:nth-child(5) { display: none; }
  .sethead { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .sh-logo { width: 76px; height: 40px; }
  .sh-title { margin-bottom: 8px; gap: 8px; }
  .sh-title h2 { font-size: 18px; }
  .sh-title .muted { display: none; }
  .sh-stats > * { flex: 1; min-width: 0; padding: 7px 10px; }
  .sh-stats b { font-size: 15px; }
  .rot-row { grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 10px; }
  .rot-miss { display: none; }
  .rot-name img { width: 48px; }
  .cardpage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cp-art { position: static; max-width: 280px; margin: 0 auto; width: 100%; }
  .cp-info h1 { font-size: 28px; }
  .cp-stats { gap: 6px; }
  .cp-stats > div { padding: 10px; }
  .cp-stats b { font-size: 17px; }
  .fp { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .how { grid-template-columns: 1fr; }
  .welcome { gap: 12px; }
  .welcome .wl { width: 44px; height: 44px; }
  .welcome h1 { font-size: 23px; }
  .lede { font-size: 14px; }
  .bulk { left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); gap: 4px; padding: 6px; }
  .bulk .lbl, .bulk .div, .bulk .hiw span, .bulk .cnt small { display: none; }
  .chord { left: 50%; }
  .toasts { top: 62px; left: 12px; right: 12px; align-items: stretch; }
  .toast { max-width: none; }
  .sheet { top: auto; width: 100vw; height: 88vh; border-left: 0; border-top: 1px solid var(--line3); border-radius: 18px 18px 0 0; transform: translateY(102%); }
  .sheet.on { transform: none; }
  .tswap { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tarrow { height: auto; transform: rotate(90deg); }
  .trade footer form { flex: 1; }
  .trade footer .btn { width: 100%; }
  .keys-grid { grid-template-columns: 1fr; }
  .stats b { font-size: 17px; }
  .binders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pages { grid-template-columns: minmax(0, 1fr); }
  .crumbs a, .crumbs .i { display: none; }
  .btn kbd, .th .r kbd { display: none; }
  .log-i { padding: 10px 0; gap: 10px; }
  .log-i p { display: none; }
  .log-i .btn { height: 28px; padding: 0 9px; font-size: 12px; }
  .pg-h { margin-bottom: 14px; }
  .hero h2 { font-size: 18px; }
  .tb-cols { grid-template-columns: minmax(0, 1fr); }
  .tb-pool { max-height: 46vh; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .tb-swaps .th .r { display: none; }
  .pal-f .pal-try { display: none; }
  .addbot { width: 34px; padding: 0; justify-content: center; }
  .addbot span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* The picker and binders on a row, the tabs under them at full width. */
  .setbar { flex-wrap: wrap; }
  .setbar .stabs { order: 1; flex: 1 1 100%; margin-right: -4px; }
  .spick { flex: 1; position: static; }
  .sp-btn { width: 100%; justify-content: center; }
  .sp-btn kbd { display: none; }
  .spick[open]::before { content: ""; position: fixed; inset: 0; background: rgba(6, 9, 20, .55); animation: fade .14s ease; }
  .sp-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 84vh; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom); animation: sp-up .22s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes sp-up { from { transform: translateY(40%); opacity: 0; } }
  .sp-row { min-height: 50px; }
  .setfind .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
}
@media (max-width: 420px) {
  .hello .sub { font-size: 12.5px; }
  .pill .i { display: none; }
  .sh-stats > div:last-child { display: none; }
}
@media (max-width: 359px) {
  .tools .dd { font-size: 12px; padding: 0 19px 0 7px; background-position: right 4px center; }
}
@media (max-width: 800px) { .health li { grid-template-columns: 90px 22px 1fr; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fx::after { translate: -100% 0; }
}
.av-none.av { width: 22px; height: 22px; font-size: 11px; }

/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 22px; }
.shop-item { display: flex; flex-direction: column; gap: 6px; }
.shop-item .em { font-size: 28px; line-height: 1; }
.shop-item h3 { font-size: 15px; font-weight: 700; }
.shop-item p { color: var(--tx2); font-size: 13px; flex: 1; }
.shop-item .ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.shop-note { margin: -4px 0 10px; }
.shop-tiers .ladder { margin: 6px 0 0; }
.shop-tiers .ladder-l { margin: 4px 0 0; flex-wrap: wrap; column-gap: 8px; }
.shop-tiers .ladder-l span { white-space: nowrap; }
.shop-set { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; margin: 2px 0 8px; color: var(--tx2); }
.shop-set img { height: 28px; max-width: 110px; object-fit: contain; }
.shop-confirm { margin-bottom: 20px; border-color: var(--b); }
.shop-confirm h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.shop-confirm > p, .shop-form p { color: var(--tx2); margin: 6px 0; }
.shop-chip { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-weight: 600; }
.shop-chip img { height: 44px; max-width: 160px; object-fit: contain; }
.shop-form .qty { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 8px 0 2px; }
.shop-form input[type=number] { width: 84px; }
.shop-bag ul { margin: 4px 0 8px; padding-left: 18px; color: var(--tx2); }
.shop-set .tag { margin-left: 2px; }
.shop-sets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.shop-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 12px; }
.shop-row .lg img { display: block; width: 76px; height: 30px; object-fit: contain; }
.shop-row .nm b { display: block; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-row .nm small { display: block; color: var(--tx3); font-size: 12px; }
.shop-row .by { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.shop-row .by b { font: 600 12px var(--mono); }
@media (max-width: 640px) {
  .shop-row { grid-template-columns: 60px minmax(0, 1fr); }
  .shop-row .lg img { width: 60px; }
  .shop-row .by { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Milestones: progress is blue, a reached milestone (its reward paid) is yellow */
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 22px; }
.ms { display: flex; flex-direction: column; gap: 8px; }
.ms.done { border-color: var(--y3); background: linear-gradient(180deg, var(--ytint), transparent 70%); }
.ms-h { display: flex; align-items: center; gap: 10px; }
.ms-h .em { font-size: 24px; line-height: 1; }
.ms-h h3 { font-size: 15px; font-weight: 700; flex: 1; }
.ms-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--y); color: var(--navy); }
.ms-ok .i { width: 14px; height: 14px; }
.ms > p { color: var(--tx2); font-size: 13px; flex: 1; }
.ms-reward { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.ms-ft { font-size: 12px; color: var(--tx3); }
.ms.done .ms-ft { color: var(--y3); font-weight: 600; }
.ms-how { align-items: flex-start; line-height: 1.7; }
.tgl.demo { height: 24px; padding: 0 8px; gap: 5px; vertical-align: 1px; font-size: 12.5px; cursor: default; background: var(--btint); border-color: rgba(75, 132, 213, .55); color: var(--tx); }
.tgl.demo .i { width: 13px; height: 13px; color: var(--bl); }
.hl-b.demo { position: static; translate: none; vertical-align: 1px; }
.ms-sets { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ms-sets li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 10px; }
.ms-sets a { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-sets img { height: 26px; max-width: 90px; object-fit: contain; }
.ms-sets b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }