/* holoquest prototype · v0.2
   Dark collector's-catalogue look: real card scans are the hero, glass is quiet, type does the work.
   Order: tokens → base → shell → type → controls → cards → data → overlays → motion → responsive. */

:root {
  /* Starter town: warm cream, warm ink, and the four Kanto starter colours */
  --bg: #fbf6ee;
  --ink-rgb: 35, 31, 26;
  --paper-rgb: 255, 255, 255;
  --shadow-rgb: 92, 64, 30;
  --paper: #fffcf6;
  --on-text: #fffaf2;
  --text-hover: #2f2a23;
  --hi: rgba(255, 255, 255, 0.7);
  --skel: #ece4d6;
  --skel-2: #e6dccb;
  --scrim: rgba(var(--ink-rgb), 0.3);
  --surface: rgba(var(--paper-rgb), 0.5);
  --surface-2: rgba(var(--ink-rgb), 0.05);
  --surface-3: rgba(var(--ink-rgb), 0.09);
  --card: rgba(var(--paper-rgb), 0.42);
  --line: rgba(var(--ink-rgb), 0.08);
  --line-2: rgba(var(--ink-rgb), 0.16);
  --text: #231f1a;
  --text-2: rgba(var(--ink-rgb), 0.64);
  --text-3: rgba(var(--ink-rgb), 0.44);
  --fire: #ff7a2f;
  --water: #2f9bff;
  --grass: #2fbf71;
  --electric: #ffc53d;
  --up: #1f9e5a;
  --down: #e5484d;
  --warn: #c98a00;
  --accent: var(--text);
  /* the old holo foil becomes the starter rainbow: fire → electric → grass → water */
  --foil: linear-gradient(115deg, #ff7a2f 0%, #ffc53d 33%, #2fbf71 66%, #2f9bff 100%);
  --foil-soft: linear-gradient(115deg, rgba(255, 122, 47, 0.14), rgba(255, 197, 61, 0.14), rgba(47, 191, 113, 0.12), rgba(47, 155, 255, 0.14));
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --font: "Inter", ui-sans-serif, system-ui, sans-serif;      /* body copy */
  --display: "Roboto", ui-sans-serif, system-ui, sans-serif;  /* titles */
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-card: inset 0 1px 0 var(--hi), 0 12px 28px -14px rgba(var(--shadow-rgb), 0.28);
  /* Liquid glass: see-through, blurred and colour-boosted behind, a bright top edge and a soft rim */
  --glass-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.24));
  --glass-bg-hover: linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34));
  --glass-edge: rgba(255, 255, 255, 0.62);
  --glass-blur: blur(30px) saturate(190%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.35), 0 10px 30px -14px rgba(var(--shadow-rgb), 0.22), 0 1px 2px rgba(var(--shadow-rgb), 0.05);
  --glass-thick: rgba(255, 252, 246, 0.95); /* menus and pop-ups: same glass, thicker so text stays crisp */
  --control-bg: rgba(255, 255, 255, 0.5);        /* buttons and inputs: small frosted pills */
  --control-bg-hover: rgba(255, 255, 255, 0.72);
  --press: 0 4px 0 rgba(var(--ink-rgb), 0.16);
  color-scheme: light;
}
/* Starter town at night: warm charcoal, light warm text, the same starter colours glowing softly.
   Set on <html data-theme="dark"> by the inline script in index.html (Light / Dark / Match my device). */
:root[data-theme="dark"] {
  --bg: #15120f;
  --ink-rgb: 244, 238, 228;
  --paper-rgb: 38, 34, 30;
  --shadow-rgb: 0, 0, 0;
  --paper: #23201c;
  --on-text: #17140f;
  --text: #f4eee4;
  --text-hover: #ffffff;
  --hi: rgba(255, 255, 255, 0.06);
  --skel: #2b2722;
  --skel-2: #221f1b;
  --scrim: rgba(0, 0, 0, 0.55);
  --card: rgba(38, 34, 30, 0.72);
  --surface: rgba(38, 34, 30, 0.7);
  --glass-bg: rgba(38, 34, 30, 0.72);
  --glass-bg-hover: rgba(38, 34, 30, 0.86);
  --glass-edge: rgba(38, 34, 30, 0.85);
  --glass-blur: blur(40px) saturate(140%);
  --glass-shadow: inset 0 1px 0 var(--hi), 0 12px 28px -14px rgba(0, 0, 0, 0.28);
  --glass-thick: rgba(38, 34, 30, 0.94);
  --control-bg: var(--paper);
  --control-bg-hover: var(--paper);
  --up: #4fd18c;
  --down: #ff6b6f;
  --warn: #f2b84b;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* atmosphere: drifting starter-colour orbs (js/orbs.js draws them on #orbs; .orbs-css is the fallback) */
#orbs, .orbs-css { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; display: block; }
.orbs-css { overflow: hidden; }
.orbs-css i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(80px); opacity: 0.25; animation: orbDrift 26s ease-in-out infinite alternate; }
.orbs-css i:nth-child(1) { background: var(--fire); left: -12vmax; top: -14vmax; }
.orbs-css i:nth-child(2) { background: var(--water); right: -14vmax; top: 6vmax; animation-delay: -8s; }
.orbs-css i:nth-child(3) { background: var(--grass); left: 22vw; bottom: -22vmax; animation-delay: -15s; }
.orbs-css i:nth-child(4) { background: var(--electric); right: 18vw; bottom: 8vh; width: 28vmax; height: 28vmax; animation-delay: -4s; }
@keyframes orbDrift { to { transform: translate(6vw, -4vh) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .orbs-css i { animation: none; } }
/* frosted glass with Pikachu walking on top (js/glass.js): sign-in and Home only, fades over the orbs */
#glassBg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; background: #fbf6ee; }
#glassBg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.7s ease-in-out; }
#glassBg img.on { opacity: 1; }
#glassBg::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(251, 246, 238, 0.22); } /* a soft wash so text stays easy to read */
:root[data-glass] #glassBg { opacity: 1; }
:root[data-theme="dark"] #glassBg { filter: brightness(0.32) saturate(0.85); }
:root[data-theme="dark"] #glassBg::after { background: none; }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

b, strong, th, h4, h5, h6 { font-weight: 600; }
/* titles in Roboto: page and section headings, card names */
h1, h2, h3, h4, .display, .tile .nm, .tc-id h2, .modal-h h2 { font-family: var(--display); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(var(--ink-rgb), 0.367); }
:focus-visible { outline: 2px solid rgba(var(--ink-rgb), 0.735); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgba(var(--ink-rgb), 0.147) transparent; }
img { -webkit-user-drag: none; }

.mono, .num { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: -0.02em; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.up { color: var(--up); }
.down { color: var(--down); }
.warn { color: var(--warn); }
.hidden { display: none !important; }
.ic { flex: none; }

/* ---------- glass ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
a.glass, .glass.hoverable { transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease); }
a.glass:hover, .glass.hoverable:hover { background: var(--glass-bg-hover); box-shadow: var(--glass-shadow), 0 18px 34px -16px rgba(var(--shadow-rgb), 0.3); }
.panel { padding: 22px; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-h h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.panel-h .muted { font-size: 15px; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 2px;
  padding: 22px 14px 18px;
  border-right: 1px solid var(--glass-edge);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: blur(28px);
  z-index: 30;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 2px 10px 26px; }
.logo .mark { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--accent); box-shadow: inset 0 -2px 0 rgba(var(--shadow-rgb), 0.072); transform: rotate(-8deg); }
.logo .word { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.logo .word i { font-style: normal; font-weight: 400; color: var(--text-2); }
.nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.nav a {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px; border-radius: 6px;
  color: var(--text-2); font-weight: 500;
  transition: color 0.25s;
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); }
.nav a svg { width: 18px; height: 18px; }
.nav .badge { margin-left: auto; }
.nav-ind {
  position: absolute; left: 0; right: 0; height: 40px; border-radius: 6px; z-index: 0;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.45s var(--spring), opacity 0.2s;
}
.nav-ind::before { content: ""; position: absolute; left: -14px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sidebar .spacer { flex: 1; }
.side-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 2px 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.side-tool { display: flex; align-items: center; gap: 9px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); font: 500 15px var(--font); cursor: pointer; transition: background 0.2s, color 0.2s; }
.side-tool:hover { background: var(--surface-2); color: var(--text); }
.side-tool.cur-btn { font-family: var(--mono); letter-spacing: 0.02em; }
.side-tools .cur-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.me-row { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-radius: 7px; transition: background 0.2s; }
.me-row:hover { background: var(--surface); }
.me-row .meta { line-height: 1.25; min-width: 0; }
.me-row .meta b { display: block; font-size: 15.5px; }
.me-row .meta span { font-size: 15px; color: var(--text-2); }
.src-note { font-size: 14px; color: var(--text-3); padding: 8px 10px 0; line-height: 1.4; }
.src-note b { color: var(--text-2); font-weight: 500; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 40px;
  border-bottom: 1px solid var(--glass-edge);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.search {
  flex: 1; display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text-3); transition: border-color 0.2s, background 0.2s;
}
.search:hover, .search:focus-within { border-color: var(--line-2); background: var(--surface-2); }
.search input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); min-width: 0; }
.search input::placeholder { color: var(--text-3); }
button.search { cursor: text; text-align: left; max-width: 560px; }
kbd { font-family: var(--mono); font-size: 14px; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 6px; }
.topbar .spacer { flex: 1; }
.view { padding: 34px 40px 96px; max-width: 1360px; margin: 0 auto; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; }
h1 { font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 1.05; letter-spacing: -0.035em; }
h1 em, h2 em { font-style: normal; font-weight: 400; color: var(--text-3); }
h2 { font-size: 20px; letter-spacing: -0.02em; font-weight: 600; line-height: 1.25; }
h2.display { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.035em; }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.page-h p { margin: 8px 0 0; color: var(--text-2); max-width: 640px; }
.eyebrow { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.eyebrow a:hover { color: var(--text); }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 15.5px; color: var(--text-3); margin-bottom: 18px; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 6px;
  border: 1px solid rgba(var(--ink-rgb), 0.1); background: var(--control-bg);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  font-weight: 600; font-size: 16px; cursor: pointer; white-space: nowrap;
  transition: transform 0.2s var(--spring), background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:hover { background: var(--control-bg-hover); border-color: rgba(var(--ink-rgb), 0.18); }
.btn:active { transform: scale(0.96); }
.btn.primary { background: var(--text); color: var(--on-text); border-color: transparent; box-shadow: 0 6px 20px -6px rgba(var(--ink-rgb), 0.175), inset 0 -1px 0 rgba(var(--shadow-rgb), 0.048); }
.btn.primary:hover { background: var(--text); transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(var(--ink-rgb), 0.18); }
.btn.primary:active { transform: scale(0.96); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 15px; border-radius: 4px; }
.btn.block { width: 100%; }
.btn.danger { color: var(--down); }
.btn.danger-solid { background: var(--down); color: #1a0509; border-color: transparent; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.quiet:hover { background: var(--surface-2); color: var(--text); }
.btn[disabled] { opacity: 0.38; pointer-events: none; }
.icon-btn { width: 38px; padding: 0; }
.btn.sm.icon-btn { width: 30px; }
.heart.on { color: #ff8fb8; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--line); background: transparent;
  font-size: 15px; font-weight: 500; color: var(--text-2); cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.on { background: var(--surface-3); color: var(--text); border-color: rgba(var(--ink-rgb), 0.231); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.seg { position: relative; display: inline-flex; padding: 3px; gap: 2px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.seg button, .seg a { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; height: 30px; padding: 0 12px; border-radius: 4px; color: var(--text-2); font-size: 15px; font-weight: 550; cursor: pointer; transition: background 0.25s, color 0.2s; }
.seg button:hover, .seg a:hover { color: var(--text); }
.seg button.on, .seg a.on { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.084) inset, 0 2px 8px rgba(var(--shadow-rgb), 0.12); }

.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.pill.up { color: var(--up); border-color: rgba(78, 227, 160, 0.3); background: rgba(78, 227, 160, 0.08); }
.pill.down { color: var(--down); border-color: rgba(255, 111, 134, 0.3); background: rgba(255, 111, 134, 0.06); }
.pill.warn { color: var(--warn); border-color: rgba(246, 198, 111, 0.3); background: rgba(246, 198, 111, 0.06); }
.pill.solid { background: var(--text); color: var(--on-text); border-color: transparent; }
.pill.holo { color: var(--text); border: 0; background: var(--accent); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 14px; font-weight: 600; background: var(--accent); color: var(--on-text); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 15px; font-weight: 550; color: var(--text-2); }
.input {
  height: 42px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid rgba(var(--ink-rgb), 0.12); background: var(--control-bg);
  outline: none; width: 100%;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.input:focus { border-color: var(--water); background: var(--paper); box-shadow: 0 0 0 4px rgba(47, 155, 255, 0.16); }
.input[disabled] { opacity: 0.5; }
select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23231f1a' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
select.input option, select.input optgroup { background: var(--paper); }
.check { display: flex; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; color: var(--text-2); }
.check:hover { color: var(--text); }
.check input { width: 16px; height: 16px; accent-color: #231f1a; }

/* ---------- layout helpers ---------- */
.row { display: flex; gap: 16px; align-items: center; }
.row.top { align-items: flex-start; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 22px; align-items: start; }
.stack-sm > * + * { margin-top: 8px; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; padding-top: 0; }
.list-row:last-child { padding-bottom: 0; }
.list-row .t { font-weight: 550; }
.list-row .s { font-size: 15px; color: var(--text-2); }
a.list-row, .list-row.clickable { transition: opacity 0.2s; }
a.list-row:hover .t, .list-row.clickable:hover .t { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.clickable { cursor: pointer; }
.hscroll { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; scroll-snap-type: x proximity; }
.hscroll > * { scroll-snap-align: start; }

/* ---------- avatar ---------- */
.avatar { border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); flex: none; background: var(--surface); }
.avatar.shop { border-radius: 30%; display: grid; place-items: center; font-weight: 600; background: linear-gradient(135deg, rgba(var(--ink-rgb), 0.189), rgba(var(--ink-rgb), 0.147)); }

/* ---------- card art ---------- */
.cardart {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --hov: 0;
  position: relative; flex: none;
  width: var(--w, 120px); aspect-ratio: 63 / 88;
  border-radius: calc(var(--w, 120px) * 0.045);
  background: var(--skel);
  overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-card);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s var(--ease), box-shadow 0.4s;
}
.cardart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(1.03); transition: opacity 0.5s, transform 0.8s var(--ease); }
.cardart.ld img { opacity: 1; transform: none; }
.cardart:not(.ld):not(.noimg):not(.err)::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--paper-rgb), 0.55) 50%, transparent 70%) 0 0 / 250% 100%, var(--skel);
  animation: shimmer 1.4s linear infinite;
}
.ca-fallback { display: none; position: absolute; inset: 0; padding: 10%; place-content: end start; gap: 2px; background: linear-gradient(160deg, var(--skel), var(--skel-2)); font-size: max(10px, calc(var(--w, 120px) * 0.08)); }
.ca-fallback b { font-weight: 600; line-height: 1.15; }
.ca-fallback span { font-family: var(--mono); font-size: 0.8em; color: var(--text-3); }
.cardart.noimg .ca-fallback, .cardart.err .ca-fallback { display: grid; }
.cardart.noimg::before, .cardart.err::before { display: none; }
/* light sheen on every card, rainbow foil on Rare+ */
.cardart::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.28), transparent 45%);
  mix-blend-mode: overlay; opacity: var(--hov); transition: opacity 0.4s;
}
.cardart .glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(255, 0, 132, 0.5) 0%, rgba(252, 164, 0, 0.5) 5%, rgba(255, 255, 0, 0.45) 10%, rgba(0, 255, 138, 0.45) 15%, rgba(0, 207, 255, 0.5) 20%, rgba(204, 76, 250, 0.5) 25%, rgba(255, 0, 132, 0.5) 30%) calc(var(--mx) * 1.6) calc(var(--my) * 1.2) / 300% 300%;
  mix-blend-mode: color-dodge; opacity: calc(var(--hov) * 0.32); filter: brightness(0.75) contrast(1.4);
  transition: opacity 0.4s;
}
.cardart.tilt:hover { --hov: 1; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 22px 40px -14px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08); z-index: 2; }
.cardart.holo.tilt:hover { box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.cardart.hero { --hov: 0.35; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.cardart.hero.holo { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); }

/* missing card: faded real art + number */
.ghost {
  position: relative; flex: none; container-type: inline-size;
  width: var(--w, 120px); aspect-ratio: 63 / 88;
  border-radius: calc(var(--w, 120px) * 0.045);
  border: 1px dashed rgba(var(--ink-rgb), 0.21);
  background: rgba(var(--ink-rgb), 0.021);
  overflow: hidden; cursor: pointer;
  transition: border-color 0.3s, transform 0.5s var(--ease), background 0.3s;
}
.ghost img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(0.9); opacity: 0.28; transition: opacity 0.5s, filter 0.5s; }
.ghost:hover { border-color: rgba(var(--ink-rgb), 0.441); transform: translateY(-2px); }
.ghost:hover img { opacity: 0.42; filter: grayscale(0.2); }
.gh-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; padding: 9%; background: linear-gradient(180deg, transparent 35%, rgba(var(--paper-rgb), 0.86)); font-size: 14px; line-height: 1.3; }
.gh-in b { font-family: var(--mono); font-weight: 500; font-size: 1.1em; color: var(--text); }
.gh-name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-price { color: var(--text-3); font-size: 0.95em; }
@container (max-width: 76px) { .gh-in { display: none; } }

.tile { display: flex; flex-direction: column; gap: 10px; cursor: pointer; min-width: 0; }
.tile .cardart { width: 100%; }
.tile .nm { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .st { font-size: 15px; color: var(--text-2); }
.tile-meta { padding: 0 2px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 28px 20px; }

/* price placeholder while a live price loads */
.px.loading { display: inline-block; min-width: 54px; height: 0.95em; border-radius: 3px; vertical-align: -0.1em; background: linear-gradient(100deg, rgba(var(--ink-rgb), 0.063) 30%, rgba(var(--ink-rgb), 0.168) 50%, rgba(var(--ink-rgb), 0.063) 70%) 0 0 / 250% 100%; animation: shimmer 1.2s linear infinite; }
.px.none { color: var(--text-3); font-family: var(--font); font-size: 0.9em; }
.px.fresh { animation: flash 1s var(--ease); }

/* ---------- progress + meters ---------- */
.bar { height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.084); overflow: hidden; }
.bar > i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--accent); border-radius: 6px; transform-origin: left; }
.meter { position: relative; height: 34px; }
.meter .track { position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.084); }
.meter .fair { position: absolute; top: 13px; height: 8px; border-radius: 6px; background: rgba(78, 227, 160, 0.35); }
.meter .mid { position: absolute; left: 50%; top: 6px; width: 2px; height: 22px; background: var(--line-2); }
.meter .knob { position: absolute; top: 5px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--text); box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.2); transition: left 0.6s var(--spring); }
.ring { --p: 0.5; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--text) calc(var(--p) * 360deg), rgba(var(--ink-rgb), 0.084) 0); -webkit-mask: radial-gradient(circle, transparent 25px, #000 26px); mask: radial-gradient(circle, transparent 25px, #000 26px); }

/* ---------- table ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr[data-card] { cursor: pointer; transition: background 0.15s; }
.table tbody tr[data-card]:hover { background: rgba(var(--ink-rgb), 0.032); }
.table .r { text-align: right; }

/* ---------- price chart ---------- */
.chart { display: block; overflow: visible; }
.chart .pt-v { font: 500 14px var(--mono); fill: var(--text-2); }
.chart .pt-k { font: 500 13.5px var(--font); fill: var(--text-3); letter-spacing: 0.04em; }
.chart-empty { height: 120px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: var(--r-md); }
.price-big { font-family: var(--display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.05em; }
.src-table td:first-child { width: 42%; }
.src-soon td { color: var(--text-3); }

/* ---------- 3D binder ---------- */
.binder-stage { perspective: 2400px; display: grid; place-items: center; padding: 34px 12px 22px; }
.binder { position: relative; display: flex; transform: rotateX(9deg); transform-style: preserve-3d; }
.bpage {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px;
  background: linear-gradient(180deg, #1d1d25, #121218);
  border: 1px solid var(--line); border-radius: 8px 3px 3px 8px;
  box-shadow: 0 34px 70px -20px rgba(0, 0, 0, 0.75), inset 0 1px 0 var(--hi);
}
.bpage.right { border-radius: 3px 8px 8px 3px; }
.pocket { position: relative; width: 102px; aspect-ratio: 63 / 88; border-radius: 8px; padding: 3px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.pocket .cardart { --w: 96px !important; }
.pocket::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(130deg, rgba(255, 255, 255, 0.12), transparent 38%); pointer-events: none; z-index: 3; }
.leaf { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; z-index: 5; transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.2, 1); }
.leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .face.back { transform: rotateY(180deg); }
.leaf .face .bpage { height: 100%; }
.leaf .shade { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), transparent 60%); opacity: 0; transition: opacity 0.85s; }

/* ---------- overlays ---------- */
.modal-root { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: var(--scrim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(10px); animation: fadeIn 0.25s var(--ease) both; }
.modal {
  width: min(840px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 30px;
  border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background: var(--glass-thick);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge);
  box-shadow: 0 40px 100px -20px rgba(var(--shadow-rgb), 0.32), inset 0 1px 0 var(--hi);
  animation: pop 0.45s var(--spring) both;
}
.modal.narrow { width: min(460px, 100%); }
.modal-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-root.out { animation: fadeOut 0.18s ease both; }
.modal-root.out .modal { animation: popOut 0.18s ease both; }
.toasts { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: var(--r-md); background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--line-2);  color: var(--text); font-weight: 550; box-shadow: 0 18px 40px -10px rgba(var(--shadow-rgb), 0.28); animation: toastIn 0.5s var(--spring) both; }
.toast .ic { color: var(--up); }
.toast.info .ic { color: var(--warn); }
.toast.out { animation: toastOut 0.25s ease both; }

/* command palette */
.modal-root.pal { place-items: start center; padding-top: 12vh; }
.modal.palette { width: min(640px, 100%); padding: 0; overflow: hidden; }
.palette .pal-in { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.palette .pal-in input { flex: 1; background: none; border: 0; outline: 0; font-size: 17px; color: var(--text); }
.palette .pal-res { max-height: 52vh; overflow: auto; padding: 8px; }
.palette .pal-sec { font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 10px 12px 6px; }
.palette .pal-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.palette .pal-row.on { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.palette .pal-row .t { font-weight: 550; }
.palette .pal-row .s { font-size: 15px; color: var(--text-3); }
.palette .pal-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }

/* ---------- demo controls (play the other trainer) ---------- */
.demo { border: 1px dashed rgba(246, 198, 111, 0.4); border-radius: var(--r-md); padding: 14px 16px; background: rgba(246, 198, 111, 0.04); }
.demo .eyebrow { color: var(--warn); display: flex; align-items: center; gap: 8px; }
.demo .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 10px var(--warn); }

/* ---------- phone frame (hunt is a phone moment) ---------- */
.phone { width: 404px; max-width: 100%; margin: 0 auto; padding: 22px 20px; border-radius: var(--r-lg); border: 1px solid var(--line-2); box-shadow: 0 0 0 8px rgba(var(--ink-rgb), 0.032), 0 50px 100px -30px rgba(var(--shadow-rgb), 0.36), inset 0 1px 0 var(--hi); }
.phone .notch { width: 110px; height: 26px; border-radius: 6px; background: #000; margin: -6px auto 16px; }
.scan-hit { animation: pop 0.5s var(--spring) both; }
.scan-hit.need { border-color: rgba(78, 227, 160, 0.45) !important; box-shadow: 0 0 0 4px rgba(78, 227, 160, 0.08), 0 20px 50px -20px rgba(var(--shadow-rgb), 0.2); }

/* ---------- misc ---------- */
.stat b { display: block; font-size: 24px; font-weight: 500; letter-spacing: -0.03em; font-family: var(--mono); font-feature-settings: "tnum"; }
.stat > span { font-size: 15px; color: var(--text-2); }
.stat.big b { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -0.05em; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 15.5px; padding: 6px 0; }
.kv span:first-child { color: var(--text-2); }
.empty { padding: 44px; text-align: center; color: var(--text-2); }
.code-big { font-family: var(--mono); font-size: 46px; letter-spacing: 0.22em; font-weight: 500; text-align: center; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars { display: flex; gap: 6px; justify-content: center; cursor: pointer; }
.stars span { color: var(--text-3); transition: color 0.15s, transform 0.3s var(--spring); }
.stars span.on { color: var(--text); }
.stars span:hover { transform: scale(1.18) rotate(-6deg); }
.timeline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--text-3); }
.timeline .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text-3); transition: all 0.4s; }
.timeline .done { color: var(--text); }
.timeline .done .dot { background: var(--text); border-color: var(--text); box-shadow: 0 0 10px rgba(var(--ink-rgb), 0.18); }
.timeline .line { width: 28px; height: 1px; background: var(--line-2); }
.quiet-value { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); padding: 0 14px; height: 34px; border: 1px solid var(--line); border-radius: 6px; transition: color 0.2s, border-color 0.2s; }
.quiet-value:hover { color: var(--text); border-color: var(--line-2); }
.trust-badge { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px 6px 10px; border-radius: var(--r-md); position: relative; background: rgba(var(--paper-rgb), 0.86); }
.trust-badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--line-2); pointer-events: none; }
.trust-badge span { font: 600 13px var(--mono); color: var(--text-3); }
.trust-badge b { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.trust-badge i { font-style: normal; font-size: 14px; color: var(--text-2); }
.set-logo { height: 44px; max-width: 160px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(var(--shadow-rgb), 0.24)); }
.set-sym { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; opacity: 0.85; }
.hero-hunt { position: relative; overflow: hidden; }
.hero-hunt .glow { display: none; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.965); } }
@keyframes popOut { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(0.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
@keyframes shimmer { from { background-position: 125% 0, 0 0; } to { background-position: -125% 0, 0 0; } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes flash { from { color: #fff; } }
@keyframes deal { from { opacity: 0; transform: translateY(18px) rotate(-2deg) scale(0.96); } }

/* page entrance: sections rise in sequence, grids deal in like cards on a table */
.view.enter .rv { animation: rise 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.view.enter .deal > * { animation: deal 0.6s var(--ease) both; animation-delay: calc(120ms + var(--j, 0) * 28ms); }
.view.enter .bar > i { animation: grow 1.2s var(--ease) both 0.25s; }
.chart .line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.view.enter .chart .line { animation: draw 1.4s var(--ease) both 0.3s; }
.view.enter .chart .area { animation: fadeIn 1s ease both 0.8s; }
.view.enter .chart .pt { animation: pop 0.5s var(--spring) both; animation-delay: calc(0.5s + var(--i) * 0.18s); }

/* route changes cross-fade; a clicked card morphs into the detail page */
::view-transition-old(root) { animation: 0.22s ease both fadeOut; }
::view-transition-new(root) { animation: 0.32s var(--ease) both fadeIn; }
::view-transition-group(card-hero) { animation-duration: 0.55s; animation-timing-function: var(--ease); }
::view-transition-old(card-hero), ::view-transition-new(card-hero) { animation-duration: 0.55s; }
.sidebar { view-transition-name: sidebar; }
.topbar { view-transition-name: topbar; }
::view-transition-group(sidebar), ::view-transition-group(topbar) { animation: none; }

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

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; bottom: 0; top: auto; height: auto; width: 100%; flex-direction: row; padding: 6px; border-right: 0; border-top: 1px solid var(--line); }
  .sidebar .logo, .sidebar .spacer, .sidebar .me-row, .sidebar .side-tools, .src-note, .nav-ind { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav a { flex-direction: column; gap: 3px; font-size: 13px; height: auto; padding: 6px; }
  .nav a.active { background: var(--surface-2); }
  .nav .badge { display: none; }
  .topbar { padding: 12px 16px; }
  .view { padding: 22px 16px 110px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 20px 14px; }
  h1 { font-size: 36px; }
  .page-h { flex-wrap: wrap; align-items: flex-start; }
}

/* ---------- price ladder (card page) ---------- */
.ladder-track { position: relative; height: 54px; margin: 0 6px; }
.ladder-track::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 2px; border-radius: 2px; background: rgba(var(--ink-rgb), 0.084); }
.ladder-track > i { position: absolute; top: 31px; height: 8px; border-radius: 8px; background: var(--accent); opacity: 0.18; transform-origin: left; }
.view.enter .ladder-track > i { animation: grow 1s var(--ease) both 0.2s; }
.ladder-track .lp { position: absolute; top: 29px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--paper); border: 2px solid rgba(var(--ink-rgb), 0.788); }
.ladder-track .lp.main { background: var(--text); border-color: var(--text); }
.ladder-track .lp.stale { border-style: dashed; border-color: rgba(var(--ink-rgb), 0.315); }
.view.enter .ladder-track .lp { animation: pop 0.5s var(--spring) both; animation-delay: calc(0.4s + var(--i) * 0.08s); }
.ladder-track .lm { position: absolute; top: 0; transform: translateX(-50%); font: 500 15px var(--mono); white-space: nowrap; }
.ladder-track .lm::after { content: ""; position: absolute; left: 50%; top: 20px; width: 1px; height: 10px; background: rgba(var(--ink-rgb), 0.42); }
.ladder-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 20px; margin-top: 12px; font-size: 15px; color: var(--text-2); }
.ladder-legend > div { display: flex; align-items: center; gap: 8px; }
.ladder-legend b { margin-left: auto; font-weight: 500; color: var(--text); }
.ladder-legend .faint b { color: var(--text-3); }
.ladder-legend .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(var(--ink-rgb), 0.788); flex: none; }
.ladder-legend .dot.main { background: var(--text); }
.ladder-legend .dot.stale { border-style: dashed; border-color: rgba(var(--ink-rgb), 0.315); }

/* ---------- profile photo ---------- */
.avatar.initials { display: grid; place-items: center; font-weight: 600; letter-spacing: -0.02em; background: linear-gradient(135deg, rgba(var(--ink-rgb), 0.231), rgba(var(--ink-rgb), 0.189)); color: var(--text); }
.photo-drop { position: relative; width: 112px; height: 112px; flex: none; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--text-3); background: var(--surface); border: 1.5px dashed var(--line-2); transition: border-color 0.2s, transform 0.3s var(--spring), background 0.2s; }
.photo-drop:hover, .photo-drop.over { border-color: rgba(var(--ink-rgb), 0.735); background: var(--surface-2); transform: scale(1.03); }
.photo-drop img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.photo-edit { position: absolute; right: 4px; bottom: 4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--on-text); box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.2); }
.av-pick { border: 0; background: none; padding: 0; border-radius: 50%; outline: 1px solid var(--line); outline-offset: 3px; opacity: 0.7; transition: opacity 0.2s, outline-color 0.2s; }
.av-pick:hover { opacity: 1; }
.av-pick.on { opacity: 1; outline: 2px solid var(--paper); }

/* ---------- graded panel ---------- */
.graded-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.grade-cell { padding: 14px; border-radius: var(--r-md); background: rgba(var(--ink-rgb), 0.032); border: 1px solid var(--line); min-height: 92px; }
.grade-cell.skel { background: linear-gradient(100deg, rgba(var(--ink-rgb), 0.032) 30%, rgba(var(--ink-rgb), 0.084) 50%, rgba(var(--ink-rgb), 0.032) 70%) 0 0 / 250% 100%; animation: shimmer 1.3s linear infinite; }
.grade-name { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); }
.grade-price { font-size: 20px; font-weight: 500; margin: 6px 0 4px; letter-spacing: -0.03em; }
.view.enter .grade-cell { animation: rise 0.5s var(--ease) both; }
.code-hint { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: rgba(var(--paper-rgb), 0.85); border: 1px solid var(--line); font: 15px/1.6 var(--mono); color: var(--text-2); white-space: pre-wrap; }

/* ---------- trade sides: cash ---------- */
.trade-side { display: flex; flex-direction: column; }
.cash { margin-top: 14px; }
.cash-amt { font-size: 22px; font-weight: 500; letter-spacing: -0.04em; }
.cash-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; color: var(--text-3); }
.cash.big { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 0; min-height: 128px; }
.cash.big .cash-amt { font-family: var(--display); font-size: 52px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.view.enter .cash.big .cash-amt { animation: rise 0.6s var(--ease) both 0.15s; }

/* ---------- trades inbox buckets ---------- */
.inbox-tabs { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.inbox-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 12px; border: 0; border-radius: 5px; background: none; color: var(--text-2); font-size: 16px; font-weight: 550; cursor: pointer; text-align: left; transition: background 0.2s, color 0.2s; }
.inbox-tabs button:hover { color: var(--text); background: var(--surface); }
.inbox-tabs button.on { color: var(--text); background: var(--surface-3); box-shadow: inset 0 1px 0 var(--hi); }
.inbox-tabs .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; display: inline-grid; place-items: center; font: 600 14px var(--mono); color: var(--text-2); background: var(--surface-2); }

/* ---------- help: info buttons + popover ---------- */
.info-btn { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; margin-left: 2px; vertical-align: -4px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; transition: color 0.2s, background 0.2s; }
.info-btn:hover, .info-btn:focus-visible { color: var(--text); background: var(--surface-2); }
h1 .info-btn { vertical-align: 8px; }
.info-pop { position: fixed; z-index: 80; width: min(320px, calc(100vw - 24px)); padding: 14px 16px; border-radius: var(--r-md); background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -16px rgba(var(--shadow-rgb), 0.32); font-size: 15.5px; line-height: 1.55; animation: pop 0.3s var(--spring) both; }
.info-pop b { display: block; font-size: 16px; margin-bottom: 4px; }
.info-pop p { margin: 0; color: var(--text-2); }

/* ---------- help: guided tour ---------- */
.tour-root { position: fixed; inset: 0; z-index: 75; }
.tour-hole { position: fixed; border-radius: var(--r-md); box-shadow: 0 0 0 9999px rgba(var(--shadow-rgb), 0.288), 0 0 0 1.5px rgba(var(--ink-rgb), 0.18); transition: all 0.5s var(--ease); pointer-events: none; }
.tour-card { position: fixed; width: 340px; padding: 18px 18px 16px; border-radius: var(--r-md); background: var(--glass-thick); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(var(--shadow-rgb), 0.36); transition: left 0.5s var(--ease), top 0.5s var(--ease), opacity 0.25s; }
.tour-card.moving { opacity: 0; }
.tour-card h3 { font-size: 17px; letter-spacing: -0.02em; margin: 10px 0 6px; }
.tour-card p { margin: 0 0 14px; color: var(--text-2); line-height: 1.55; }
.tour-dots { display: flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.189); transition: all 0.3s; }
.tour-dots i.past { background: rgba(var(--ink-rgb), 0.525); }
.tour-dots i.on { width: 18px; height: 10px; border-radius: 3px; background: var(--accent); }

/* ---------- onboarding welcome ---------- */
.welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 20px; }
.welcome-item { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-md); background: rgba(var(--ink-rgb), 0.032); border: 1px solid var(--line); }
.welcome-item b { font-size: 16px; }
.welcome-item p { margin: 4px 0 0; font-size: 15px; color: var(--text-2); line-height: 1.5; }
.welcome-ic { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: linear-gradient(135deg, rgba(var(--ink-rgb), 0.168), rgba(var(--ink-rgb), 0.147)); border: 1px solid var(--line); }
@media (max-width: 960px) { .welcome-grid { grid-template-columns: 1fr; } .tour-card { width: calc(100vw - 24px); } }

/* ---------- meetup time picker ---------- */
.when { display: flex; flex-direction: column; gap: 12px; }
.when-days { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.when-days::-webkit-scrollbar { display: none; }
.when-day { position: relative; flex: none; width: 54px; padding: 8px 0 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.25s var(--spring); }
.when-day span { font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.when-day b { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; }
.when-day:hover { border-color: var(--line-2); color: var(--text); }
.when-day.on { background: var(--text); color: var(--on-text); border-color: transparent; transform: translateY(-1px); }
.when-day.on span { color: rgba(var(--ink-rgb), 0.55); }
.when-day i { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--text); }
.when-times { display: flex; flex-wrap: wrap; gap: 6px; }
.when-times .chip[disabled] { opacity: 0.3; pointer-events: none; text-decoration: line-through; }
.when-custom { gap: 6px; padding-right: 6px; }
.when-custom input { background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; outline: none; width: 92px; color-scheme: dark; }
.when-picked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 30px; font-size: 15px; }
.when-picked .chip button { border: 0; background: none; padding: 0; margin-left: 2px; color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.when-picked .chip button:hover { color: var(--text); }
.time-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.time-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; text-align: left; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.time-opt > span { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.time-opt b { color: var(--text); font-weight: 600; }
.time-opt span span { font-size: 15px; }
.time-opt:hover { border-color: var(--line-2); }
.time-opt.on { border-color: rgba(var(--ink-rgb), 0.63); background: rgba(var(--ink-rgb), 0.084); color: var(--text); box-shadow: 0 0 0 3px rgba(var(--ink-rgb), 0.105); }


/* =====================================================================
   Holo foil + glass. Small doses: edges, bars, badges, the logo, and a
   faint wash behind frosted glass. Shimmer only moves on hover / entry.
   ===================================================================== */
@keyframes foilShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* faint foil haze behind everything (very low, so glass panels pick up colour) */
body::after {
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(159, 216, 255, 0.07), transparent 60%),
    radial-gradient(800px 520px at 100% 6%, rgba(255, 216, 154, 0.05), transparent 60%),
    radial-gradient(900px 600px at 70% 115%, rgba(158, 240, 214, 0.05), transparent 60%),
    linear-gradient(180deg, rgba(var(--paper-rgb), 0.86), rgba(var(--paper-rgb), 0.9));
}

/* logo: a tiny foil card under glass */
.logo .mark { position: relative; overflow: hidden; background: var(--foil); background-size: 220% 220%; box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.18), 0 4px 14px rgba(var(--shadow-rgb), 0.18); }
.logo .mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(var(--paper-rgb), 0.65), rgba(var(--ink-rgb), 0.053) 45%, rgba(var(--ink-rgb), 0.263)); backdrop-filter: blur(2px); }
.logo:hover .mark { animation: foilShift 2.4s ease-in-out infinite alternate; }

/* reusable foil hairline edge for glass surfaces */
.foil-edge { position: relative; }
.foil-edge::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--foil); background-size: 200% 200%; opacity: 0.45; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.foil-edge:hover::before { opacity: 0.7; animation: foilShift 3s ease-in-out infinite alternate; }

/* hero hunt panel: foil edge + a soft foil wash in the corner, under the glass */
.hero-hunt { background: var(--glass-bg); }
.hero-hunt .glow { display: none; }

/* progress bars: liquid foil in a glass tube */
.bar { height: 7px; background: rgba(var(--ink-rgb), 0.063); box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), 0.2), inset 0 0 0 1px rgba(var(--ink-rgb), 0.053); }
.bar > i { position: relative; background: var(--foil); background-size: 200% 100%; opacity: 0.9; }
.bar > i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(var(--paper-rgb), 0.55), rgba(var(--ink-rgb), 0) 70%); }
.view.enter .bar > i { animation: grow 1.2s var(--ease) both 0.25s, foilShift 1.6s var(--ease) both 0.25s; }

/* badges + active nav marker */
.badge { background: var(--foil); background-size: 200% 100%; color: var(--on-text); box-shadow: inset 0 1px 0 var(--hi), 0 2px 8px rgba(var(--shadow-rgb), 0.14); }
.nav-ind::before { background: var(--foil); background-size: 100% 300%; }

/* rarity / memory pill: glass with a foil edge, light text (not a solid sticker) */
.pill.holo { position: relative; color: var(--text); border: 0; background: var(--foil-soft); backdrop-filter: blur(8px); }
.pill.holo::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--foil); opacity: 0.7; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* trust badge: foil hairline */
.trust-badge { background: rgba(var(--paper-rgb), 0.86); backdrop-filter: blur(10px); }
.trust-badge::before { border: 0; padding: 1px; background: var(--foil); opacity: 0.75;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* meetup code + small markers */
.code-big { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tour-dots i.on { background: var(--foil); }
.when-day i { background: var(--foil); }
.ladder-track > i { background: var(--foil); opacity: 0.3; }
.tour-hole { box-shadow: 0 0 0 9999px rgba(var(--shadow-rgb), 0.288), 0 0 0 1.5px rgba(159, 216, 255, 0.55), 0 0 30px rgba(158, 240, 214, 0.18); }

/* selected time / avatar / photo states pick up a cool foil tint */
.time-opt.on { border-color: rgba(159, 216, 255, 0.45); background: linear-gradient(115deg, rgba(159, 216, 255, 0.08), rgba(158, 240, 214, 0.06)); box-shadow: 0 0 0 3px rgba(159, 216, 255, 0.08); }
.avatar.initials, .avatar.shop, .welcome-ic { background: var(--foil-soft); }

/* ---------- camera scanner ---------- */
.scan-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
.scan-stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: #050507; border: 1px solid var(--line); }
.scan-stage video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; top: 7%; bottom: 7%; left: 50%; aspect-ratio: 63 / 88; transform: translateX(-50%); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(5, 5, 7, 0.45); }
.scan-frame i { position: absolute; width: 26px; height: 26px; border: 2.5px solid #fff; }
.scan-frame i:nth-child(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.scan-frame i:nth-child(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.scan-frame i:nth-child(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.scan-frame i:nth-child(4) { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.scan-frame::after { content: ""; position: absolute; left: 6%; right: 6%; height: 2px; top: 0; border-radius: 2px; background: var(--foil); box-shadow: 0 0 12px rgba(159, 216, 255, 0.6); animation: scanLine 2.4s ease-in-out infinite alternate; }
@keyframes scanLine { from { top: 4%; } to { top: 96%; } }
.scan-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.scan-outline polygon { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; stroke-linejoin: round; transition: stroke 0.2s; }
.scan-outline.on polygon { fill: rgba(78, 227, 160, 0.1); stroke: #4ee3a0; stroke-width: 3; }
.scan-msg { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--r-sm); background: rgba(9, 9, 11, 0.75); backdrop-filter: blur(10px); font-size: 15px; white-space: nowrap; }
.scan-stage.flash::before { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; animation: fadeOut 0.4s ease both; }
.scan-busy { display: flex; gap: 6px; padding: 20px 0; }
.scan-busy span { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); animation: pop 0.6s ease-in-out infinite alternate; }
.scan-busy span:nth-child(2) { animation-delay: 0.15s; }
.scan-busy span:nth-child(3) { animation-delay: 0.3s; }
@media (max-width: 760px) { .scan-wrap { grid-template-columns: 1fr; } }

/* ---------- trade conversation ---------- */
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding: 4px 2px 8px; scroll-behavior: smooth; }
.bubble { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.bubble > div { padding: 9px 13px; border-radius: 8px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.bubble.them > div { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 0; }
.bubble.me { align-self: flex-end; }
.bubble.me > div { background: var(--foil-soft), rgba(var(--ink-rgb), 0.084); border: 1px solid rgba(var(--ink-rgb), 0.147); border-bottom-right-radius: 0; backdrop-filter: blur(10px); }
.bubble .avatar { flex: none; }
.view.enter .bubble, .bubble:last-child { animation: rise 0.35s var(--ease) both; }
.sys { align-self: center; font-size: 14px; color: var(--text-3); padding: 4px 10px; border-radius: var(--r-sm); background: rgba(var(--ink-rgb), 0.026); }
.composer { display: flex; gap: 8px; margin-top: 10px; }
.chat-locked { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md); border: 1px dashed var(--line-2); color: var(--text-2); font-size: 15px; }
.typing { display: flex; gap: 4px; padding: 13px 14px !important; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: pop 0.6s ease-in-out infinite alternate; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--foil); box-shadow: 0 0 8px rgba(159, 216, 255, 0.6); flex: none; }
textarea.input { line-height: 1.5; }
.scan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; max-height: 340px; overflow-y: auto; padding: 2px; }
.scan-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--text-3); font: 500 13.5px var(--mono); cursor: pointer; }
.scan-pick:hover .cardart { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.8), 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.scan-pick:hover span { color: var(--text); }
.setup-hint { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.setup-hint summary { cursor: pointer; color: var(--text-3); width: fit-content; }
.setup-hint summary:hover { color: var(--text); }
.setup-hint ol { margin: 10px 0 0; padding-left: 18px; line-height: 1.7; }
.setup-hint a { text-decoration: underline; text-underline-offset: 2px; }

/* ladder legend v2: grouped by source, one line per price */
.ladder-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 32px; margin-top: 16px; }
.lg-group { display: flex; flex-direction: column; gap: 2px; }
.lg-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.lg-head span { color: var(--text-3); font-weight: 600; }
.lg-head em { margin-left: auto; font-style: normal; font-size: 13px; letter-spacing: 0.04em; color: var(--warn); }
.lg-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15.5px; white-space: nowrap; }
.lg-k { color: var(--text-2); }
.lg-row b { margin-left: auto; font-weight: 500; color: var(--text); }
.lg-group.is-stale .lg-k, .lg-group.is-stale b { color: var(--text-3); }
.grade-cell.thin { opacity: 0.55; border-style: dashed; }
.grade-cell.thin:hover { opacity: 0.9; }

/* ---------- verified sales + asking ---------- */
.sales-list { display: flex; flex-direction: column; }
.sale-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.sale-row:first-child { border-top: 0; padding-top: 0; }
.sale-row .t { font-size: 16px; }
.sale-row .s { font-size: 15px; color: var(--text-3); margin-top: 1px; }
.sale-ic { width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center; background: var(--foil-soft); border: 1px solid var(--line); flex: none; }
.ask-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.ask-row:first-of-type { border-top: 0; }
.ask-row img { width: 34px; height: 46px; object-fit: cover; border-radius: 3px; background: var(--surface); flex: none; }
.ask-row .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-stats { display: flex; gap: 28px; margin-bottom: 14px; }

/* ---------- wishlist ---------- */
.wish-list { display: flex; flex-direction: column; gap: 10px; }
.wish-row { display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; border-radius: var(--r-lg); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.wish-row:hover { border-color: var(--line-2); }
.wish-name { font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wish-where { margin-top: 8px; font-size: 15px; color: var(--up); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wish-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 120px; }
.wish-price .num { font-size: 16px; }
.wish-actions { display: flex; gap: 6px; align-items: center; }
@media (max-width: 760px) { .wish-row { flex-wrap: wrap; } .wish-price { align-items: flex-start; } }

/* =====================================================================
   v0.3 layout system: one way to do headers, stat strips, toolbars,
   empty states and sticky actions, so every page reads the same.
   ===================================================================== */

/* page header: eyebrow → title → one line of context; actions sit on the baseline */
.page-h { margin-bottom: 26px; }
.page-h .eyebrow + h1 { margin-top: 10px; }
.page-h .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
.page-h .with-info { display: inline-flex; align-items: center; gap: 4px; }

/* sidebar: grouped nav */
.nav-label { padding: 16px 12px 6px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.nav-mobile { display: none !important; }
.me-row { border: 1px solid transparent; }
.me-row.active { background: var(--surface-2); border-color: var(--line); }
.topbar .btn.quiet { color: var(--text-3); }
.topbar .btn.quiet:hover { color: var(--text); }

/* stat strip: equal columns with hairline dividers; label on top, number below */
.statbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 0; overflow: hidden; margin-bottom: 20px; }
.statbar > .stat { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 18px 22px 20px; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); min-width: 0; }
.statbar > .stat > span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.statbar > .stat b { font-size: 24px; line-height: 1.1; }
.statbar > .stat .sub { font-size: 15px; color: var(--text-3); }
.statbar > a.stat { transition: background 0.2s; }
.statbar > a.stat:hover { background: var(--surface); }
.statbar > .stat.wide { grid-column: span 2; }
.statbar > .stat.wide .bar { margin-top: 8px; }

/* toolbar: filters on the left, sort on the right */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.tb-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tb-label { font-size: 15px; font-weight: 550; color: var(--text-3); margin-right: 2px; white-space: nowrap; }
.tb-count { font: 500 15px var(--mono); color: var(--text-3); white-space: nowrap; }
.tb-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; flex: none; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 48px 2px 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; }

/* quiet type label (Event, Show, Restock…) so only real signals get a coloured pill */
.tag { font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }

/* empty states: say what's missing and what to do next */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 56px 24px; }
.empty-state .es-ic { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 10px; background: var(--foil-soft); border: 1px solid var(--line); color: var(--text); }
.empty-state h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.empty-state p { margin: 0; max-width: 400px; color: var(--text-2); }
.empty-state .row { margin-top: 16px; justify-content: center; }

/* sticky action bar (trade builder) */
.action-bar { position: sticky; bottom: 16px; z-index: 15; display: flex; align-items: center; gap: 22px; margin-top: 18px; padding: 12px 12px 12px 22px; border-radius: var(--r-md); background: var(--glass-thick); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: 0 24px 60px -18px rgba(var(--shadow-rgb), 0.3), inset 0 1px 0 var(--hi); }
.action-bar .ab-k { font-size: 14px; color: var(--text-3); }
.action-bar .ab-v { font: 500 16px var(--mono); letter-spacing: -0.02em; }

/* ---------- onboarding: brand on the left, one question at a time on the right ---------- */
.ob { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 72px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 48px 40px; }
.ob-hero .logo { padding: 0 0 44px; }
/* two lines: the text shrinks with the column (10cqi ≈ the longer line filling it); only a very narrow column wraps */
.ob-hero { container-type: inline-size; }
.ob-hero h1 { font-size: clamp(30px, 10cqi, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.ob-hero h1 em { display: block; }
.ob-hero > p { margin: 18px 0 0; font-size: 17px; color: var(--text-2); text-wrap: balance; } /* full column width: two even lines */
.ob-fan { position: relative; height: 270px; margin: 44px 0 0 18px; }
.ob-fan > div { position: absolute; top: 0; transform-origin: 50% 120%; animation: deal 0.9s var(--ease) both; }
.ob-fan > div:nth-child(1) { left: 0; transform: rotate(-9deg) translateY(18px); animation-delay: 0.1s; }
.ob-fan > div:nth-child(2) { left: 118px; z-index: 2; animation-delay: 0.2s; }
.ob-fan > div:nth-child(3) { left: 236px; transform: rotate(9deg) translateY(18px); animation-delay: 0.3s; }
.ob-points { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 34px; font-size: 15px; color: var(--text-2); }
.ob-points span { white-space: nowrap; }
.ob-points span { display: inline-flex; align-items: center; gap: 8px; }
.ob-panel { display: flex; flex-direction: column; min-height: 470px; padding: 34px 36px 28px; }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.ob-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 180px; }
.ob-progress i { height: 4px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.147); transition: background 0.4s; }
.ob-progress i.on { background: var(--text); }
.ob-progress i.now { background: var(--foil); }
.ob-body { flex: 1; animation: rise 0.45s var(--ease) both; }
.ob-body h1 { font-size: 34px; }
.ob-body > p { margin: 10px 0 0; color: var(--text-2); }
.ob-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.ob-photo { display: flex; align-items: center; gap: 22px; margin: 28px 0 26px; }
.ob-hint { font-size: 15px; color: var(--text-3); }
.ob-check { font-size: 15px; color: var(--up); display: inline-flex; align-items: center; gap: 4px; }
.ob-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ob-style { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 550; cursor: pointer; text-align: left; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.ob-style:hover { border-color: var(--line-2); color: var(--text); }
.ob-style.on { color: var(--text); border-color: rgba(159, 216, 255, 0.45); background: linear-gradient(115deg, rgba(159, 216, 255, 0.08), rgba(158, 240, 214, 0.06)); }
.ob-style .ck { margin-left: auto; width: 18px; height: 18px; border-radius: 3px; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.ob-style.on .ck { background: var(--text); border-color: transparent; color: var(--on-text); }
.ob .welcome-grid { margin: 24px 0 0; }

/* ---------- home: hunt hero in two columns ---------- */
.hunt-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 44px; align-items: stretch; }
.hunt-main { display: flex; flex-direction: column; min-width: 0; }
.hunt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hunt-top select.input { width: auto; max-width: 230px; height: 32px; font-size: 15px; padding-left: 12px; border-radius: 4px; background-position: right 10px center; padding-right: 30px; }
.hunt-title { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.hunt-title .set-logo { height: 40px; }
.hunt-big { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.hunt-big b { font-family: var(--display); font-size: 52px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.hunt-big .of { font: 500 20px var(--mono); color: var(--text-3); }
.hunt-big .pct { margin-left: auto; font-size: 15.5px; color: var(--text-2); }
.hunt-main .bar { margin-top: 14px; }
.hunt-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-top: 1px solid var(--line); }
.hunt-mini > div { padding: 14px 0 0; }
.hunt-mini > div + div { padding-left: 18px; box-shadow: -1px 0 0 var(--line); }
.hunt-mini b { display: block; font: 500 18px var(--mono); letter-spacing: -0.02em; }
.hunt-mini span { font-size: 15px; color: var(--text-2); }
.hunt-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 24px; }
.hunt-side { display: flex; flex-direction: column; min-width: 0; }
.hunt-next { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.hunt-next > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hunt-next .pill { align-self: flex-start; }
.hunt-next .nearby-no { font-size: 14px; color: var(--text-3); height: 22px; line-height: 22px; }
@media (max-width: 1180px) { .hunt-grid { grid-template-columns: 1fr; gap: 28px; } }

/* feed rows: tag + title on one line, quieter actions */
.feed-row { padding: 14px 0 !important; }
.feed-row .row { gap: 8px; }

/* ---------- wishlist rows: aligned columns ---------- */
.wish-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px auto; gap: 20px; align-items: center; padding: 12px 16px 12px 12px; }
.wish-price { min-width: 0; }
.wish-price .btn { margin-top: 2px; }
.wish-where { margin-top: 6px; }
@media (max-width: 760px) { .wish-row { grid-template-columns: 56px minmax(0, 1fr); } .wish-price, .wish-actions { grid-column: 2; align-items: flex-start; } }

/* ---------- trades: deal summary under give/get ---------- */
.deal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 14px 0 16px; padding: 11px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: 15.5px; color: var(--text-2); }
.deal-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.deal-meta > span + span { padding-left: 20px; box-shadow: -1px 0 0 var(--line); }
.reply-panel { border-color: rgba(var(--ink-rgb), 0.168); }
.trade-side .cardart { --w: 84px !important; }
.cash.big { min-height: 112px; }
.cash.big .cash-amt { font-size: 46px; }
.inbox-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; }
.inbox-item:hover { background: var(--surface); }
.inbox-item.on { background: var(--surface-2); border-color: var(--line-2); }
.inbox-list { display: flex; flex-direction: column; gap: 2px; }

/* ---------- card page ---------- */
.card-side { width: 360px; flex: none; gap: 14px; position: sticky; top: 96px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

@media (max-width: 960px) {
  .nav-label { display: none; }
  .nav-mobile { display: flex !important; }
  .ob { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 16px 40px; min-height: 0; }
  .ob-hero .logo { padding-bottom: 20px; }
  .ob-fan, .ob-points { display: none; }
  .ob-panel { min-height: 0; padding: 24px 20px 20px; }
  .statbar > .stat.wide { grid-column: auto; }
  .hunt-next { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .action-bar { bottom: 84px; flex-wrap: wrap; gap: 12px; }
  .card-side { width: 100%; position: static; }
}
.post.match { border-color: rgba(78, 227, 160, 0.32); }
.post .tag { margin-left: 4px; }
button.search .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-wrap { overflow-x: auto; }
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .topbar { gap: 8px; }
  .topbar .btn.quiet { font-size: 0; gap: 0; width: 34px; padding: 0; }
  .search kbd { display: none; }
  .table-wrap .table { min-width: 620px; }
  .page-h .actions { width: 100%; }
}
button.search { min-width: 0; }
@media (max-width: 960px) {
  .card-layout { flex-direction: column; gap: 24px !important; }
  .card-layout > .grow { width: 100%; }
  .card-side .cardart.hero { --w: min(360px, 100%) !important; margin: 0 auto; }
}
.trades-inbox { width: 330px; flex: none; }
@media (max-width: 960px) {
  .trades-layout { flex-direction: column; }
  .trades-inbox, .trades-layout > .grow { width: 100%; }
  .trades-layout .row.top { flex-direction: column; }
  .trades-layout .trade-side { width: 100%; }
}
@media (max-width: 960px) {
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .panel-h { flex-wrap: wrap; }
  .feed-row .row .clickable { display: none; }
  .post .row { flex-wrap: wrap; }
  .builder-sides { flex-direction: column; }
  .builder-sides > div:nth-child(2) { transform: rotate(90deg); align-self: center; }
  .hero-hunt .glow { display: none; }
}
.field, .when { min-width: 0; }
.when-days { max-width: 100%; }

/* =====================================================================
   v0.4 reading size: closer to Collectr. Bigger type, taller controls,
   bigger card tiles, wider pages on big screens. Hover/tilt untouched.
   ===================================================================== */
.app { grid-template-columns: 268px minmax(0, 1fr); }
/* one content column: the page and the top bar's contents share the same edges (like Collectr) */
:root { --col: 1416px; } /* 1320px of content + 48px gutters */
.view { max-width: var(--col); padding: 38px 48px 110px; }
.topbar { padding: 16px 0; }
.topbar-in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; max-width: var(--col); margin: 0 auto; padding: 0 48px; }
.topbar-in > * { flex-shrink: 0; }
.topbar-in > button.search { flex-shrink: 1; min-width: 120px; }
@media (max-width: 1280px) { #resetDemo { font-size: 0; gap: 0; width: 42px; padding: 0; justify-content: center; } #resetDemo svg { width: 16px; height: 16px; } }
.search { height: 46px; }

/* sidebar */
.logo .word { font-size: 21px; }
.logo .mark { width: 26px; height: 26px; }
.nav a { height: 46px; font-size: 16px; gap: 14px; }
.nav a svg { width: 20px; height: 20px; }
.nav-ind { height: 46px; }
.nav-ind::before { top: 13px; bottom: 13px; }
.me-row .meta b { font-size: 16px; }
.me-row .meta span { font-size: 15px; }

/* headings */
h1 { font-size: 46px; }
h2 { font-size: 23px; }
h2.display { font-size: 32px; }
.panel-h h3 { font-size: 18px; }
.page-h p { font-size: 16px; }
.panel { padding: 26px; }

/* controls */
.btn { height: 44px; padding: 0 18px; font-size: 16px; border-radius: 6px; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 15px; border-radius: 5px; }
.icon-btn { width: 44px; }
.btn.sm.icon-btn { width: 36px; }
.chip { height: 38px; padding: 0 16px; font-size: 15.5px; }
.seg { padding: 4px; border-radius: 6px; }
.seg button { height: 36px; padding: 0 14px; font-size: 15.5px; }
.input { height: 48px; font-size: 16.5px; }
.pill { height: 25px; padding: 0 10px; font-size: 13.5px; }
.badge { min-width: 22px; height: 22px; font-size: 13.5px; }
.eyebrow { font-size: 14px; }
.info-btn { width: 22px; height: 22px; }
.info-btn svg { width: 15px; height: 15px; }
.info-pop { font-size: 15.5px; width: min(360px, calc(100vw - 24px)); }
.info-pop b { font-size: 16px; }

/* card tiles: bigger art, readable name + price */
.tiles { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 36px 24px; }
.tile { gap: 12px; }
.tile .nm { font-size: 17px; letter-spacing: -0.01em; }
.tile .st { font-size: 15.5px; }
.tile .num { font-size: 16.5px; }
.tile-meta .row { margin-top: 2px; }

/* numbers */
.stat b { font-size: 28px; }
.statbar > .stat { padding: 22px 26px 24px; }
.statbar > .stat b { font-size: 29px; }
.price-big { font-size: 64px; }
.grade-price { font-size: 23px; }
.hunt-big b { font-size: 60px; }
.hunt-mini b { font-size: 21px; }

/* lists + tables */
.list-row { padding: 14px 0; }
.list-row .t { font-size: 16px; }
.table td { padding: 14px 16px; }
.table th { padding: 14px 16px; }
.wish-row { grid-template-columns: 72px minmax(0, 1fr) 170px auto; padding: 14px 18px 14px 14px; }
.wish-name { font-size: 18px; }
.wish-price .num { font-size: 19px; }
.inbox-tabs button { height: 44px; font-size: 16.5px; }
.trades-inbox { width: 360px; }
.bubble > div { font-size: 16.5px; }
.lg-row { font-size: 16px; }
.time-opt b { font-size: 16px; }
.when-day { width: 60px; }
.when-day b { font-size: 20px; }
.ob-body h1 { font-size: 38px; }
.ob-panel { min-height: 520px; }
.tour-card { width: 380px; }
.tour-card h3 { font-size: 19px; }
.welcome-item b { font-size: 16.5px; }

@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .view { padding: 22px 16px 110px; }
  .topbar { padding: 12px 16px; }
  .nav a { height: auto; font-size: 12.5px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 14px; }
  h1 { font-size: 36px; }
  .wish-row { grid-template-columns: 64px minmax(0, 1fr); }
}
/* one more step toward Collectr on the things people scan most */
.tiles { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 40px 26px; }
.tile .nm { font-size: 20px; font-weight: 600; }
.tile .num { font-size: 18px; font-weight: 500; }
.tile .st { font-size: 16.5px; }
.nav a { font-size: 17px; height: 48px; }
.nav-ind { height: 48px; }
.nav-ind::before { top: 14px; bottom: 14px; }
.statbar > .stat > span { font-size: 15.5px; }
.list-row .s { font-size: 15.5px; }
.muted, .faint { font-size: inherit; }
@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 14px; }
  .tile .nm { font-size: 16px; }
  .tile .num { font-size: 16px; }
  .nav a { font-size: 12.5px; height: auto; }
}
.split { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
/* subtitles run the full width (one line on desktop) instead of wrapping at a fixed measure */
.page-h p { max-width: none; }
.page-h > div:first-child { flex: 1 1 auto; min-width: 0; }

/* card page: compact side panels under the card */
.side-panel { padding: 16px 18px; border-radius: var(--r-md); }
.side-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.side-h h4 { margin: 0; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.side-h > span { font-size: 15px; color: var(--text-3); }
.side-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.side-h + .side-row { border-top: 0; padding-top: 6px; }
.side-row .t { font-size: 15.5px; font-weight: 550; }
.side-row .s { font-size: 14px; color: var(--text-3); margin-top: 1px; }
.side-row .num { font-size: 16px; }
a.side-row { color: inherit; transition: opacity 0.2s; }
a.side-row:hover .t { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.side-empty { font-size: 15px; color: var(--text-2); line-height: 1.5; }
.side-cost { width: 130px; height: 30px; padding: 0 10px; font-size: 15px; margin-top: 4px; }
/* profit / loss under a tile keeps its colour (tile text colour was overriding it) */
.tile .st.up, .tile .up { color: var(--up); }
.tile .st.down, .tile .down { color: var(--down); }
.tile-meta .row .st .num:not(.up):not(.down):not(.none) { color: var(--text); }

/* =====================================================================
   v0.5 accounts: sign in / sign up, bigger onboarding, location picker,
   currency picker + switcher, account settings
   ===================================================================== */
.btn.lg { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 7px; }
.btn.busy { opacity: 0.6; pointer-events: none; }
.link-btn { border: 0; background: none; padding: 0; color: var(--text-2); font: inherit; font-size: 15.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link-btn:hover { color: var(--text); }

/* bigger onboarding + auth panel */
.ob { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 64px; max-width: 1280px; }
.ob-panel { min-height: 600px; padding: 38px 42px 30px; border-radius: 10px; }
.ob-body h1 { font-size: 40px; letter-spacing: -0.04em; }
.ob-body > p { font-size: 16.5px; line-height: 1.55; margin-top: 12px; max-width: 520px; }
.ob-top { margin-bottom: 34px; }
.ob-progress { width: 220px; }
.ob-progress i { height: 5px; }
.ob-foot { margin-top: 32px; padding-top: 22px; }
.ob-hint { font-size: 15px; color: var(--text-3); }
.photo-drop { width: 148px; height: 148px; }
.photo-edit { width: 34px; height: 34px; right: 6px; bottom: 6px; }
.ob-photo { gap: 28px; margin: 34px 0 32px; }
.av-pick { outline-offset: 4px; }

/* how do you collect: big option cards */
.ob-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.ob-style { height: auto; min-height: 84px; padding: 16px 18px; gap: 14px; border-radius: 9px; align-items: center; }
.ob-style .os-ic { flex: none; width: 46px; height: 46px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); transition: background 0.2s, color 0.2s; }
.ob-style.on .os-ic { background: var(--foil-soft); color: var(--text); border-color: rgba(var(--ink-rgb), 0.21); }
.ob-style .os-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-style .os-t b { font-size: 17px; font-weight: 600; color: var(--text); }
.ob-style .os-t span { font-size: 15px; color: var(--text-3); font-weight: 450; }
.ob-style .ck { width: 22px; height: 22px; border-radius: 4px; flex: none; }

/* trainer name with @ prefix */
.name-box { position: relative; }
.name-box span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 18px; }
.name-box .input { padding-left: 36px; height: 56px; font-size: 18px; font-weight: 550; }
.name-msg { font-size: 15px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; min-height: 22px; }
.name-msg.ok { color: var(--up); }
.name-msg.bad { color: var(--down); }

/* location picker */
.loc { display: flex; flex-direction: column; gap: 18px; }
.loc .input { height: 52px; font-size: 16px; }
.loc-sub { position: relative; }
.loc-box { position: relative; display: flex; align-items: center; }
.loc-box > .ic { position: absolute; left: 16px; color: var(--text-3); pointer-events: none; }
.loc-box .input { padding-left: 44px; padding-right: 140px; }
.loc-ok { position: absolute; right: 14px; display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; color: var(--up); }
.loc-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; padding: 6px; border-radius: var(--r-md); background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -16px rgba(var(--shadow-rgb), 0.34); max-height: 320px; overflow-y: auto; }
.loc-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-radius: 5px; background: none; color: var(--text); text-align: left; cursor: pointer; font-size: 16.5px; }
.loc-opt span { font-size: 15px; color: var(--text-3); white-space: nowrap; }
.loc-opt:hover, .loc-opt.on { background: var(--surface-2); }
.loc-none { margin-top: 8px; font-size: 15px; color: var(--text-3); }
.loc-radius { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.loc-radius button { height: 48px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: 600 16px var(--font); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.loc-radius button:hover { border-color: var(--line-2); color: var(--text); }
.loc-radius button.on { color: var(--on-text); background: var(--text); border-color: transparent; }

/* currency picker */
.cur-hero { display: flex; align-items: center; gap: 16px; width: 100%; margin-top: 28px; padding: 18px 20px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; transition: border-color 0.2s, background 0.2s; }
.cur-hero:hover { border-color: var(--line-2); }
.cur-hero.on, .cur-opt.on { border-color: rgba(159, 216, 255, 0.5); background: linear-gradient(115deg, rgba(159, 216, 255, 0.09), rgba(158, 240, 214, 0.06)); }
.cur-hero .grow { display: flex; flex-direction: column; gap: 2px; }
.cur-hero b { font-size: 17px; }
.cur-hero .grow span { font-size: 15px; color: var(--text-3); }
.cur-sym { flex: none; min-width: 54px; height: 54px; padding: 0 10px; border-radius: 7px; display: grid; place-items: center; background: var(--foil-soft); border: 1px solid var(--line); font: 600 19px var(--display); }
.cur-hero .ck { width: 22px; height: 22px; border-radius: 4px; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.cur-hero.on .ck { background: var(--text); border-color: transparent; color: var(--on-text); }
.cur-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.cur-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.cur-opt:hover { border-color: var(--line-2); }
.cur-opt b { font: 600 16px var(--mono); }
.cur-opt span { font-size: 14px; color: var(--text-3); }
.cur-preview { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 16px; border-radius: var(--r-md); background: rgba(var(--ink-rgb), 0.026); border: 1px dashed var(--line-2); font-size: 16px; color: var(--text-2); }
.cur-preview b { color: var(--text); font-size: 16px; }

/* top bar: currency switcher + demo tag */
.cur-wrap { position: relative; }
.cur-btn { font-family: var(--mono); letter-spacing: 0.02em; }
.cur-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 340px; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(var(--shadow-rgb), 0.36); animation: pop 0.25s var(--spring) both; }
.cur-grid.sm { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.cur-grid.sm .cur-opt { padding: 9px 4px; }
.demo-tag { height: 28px; padding: 0 12px; border-radius: var(--r-sm); display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); border: 1px solid rgba(246, 198, 111, 0.35); background: rgba(246, 198, 111, 0.06); }

/* sign in / sign up */
.auth-panel { min-height: 0; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin-bottom: 30px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); }
.auth-tabs a { height: 44px; display: grid; place-items: center; border-radius: 5px; font-weight: 600; font-size: 16.5px; color: var(--text-2); transition: background 0.25s, color 0.2s; }
.auth-tabs a:hover { color: var(--text); }
.auth-tabs a.on { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.084) inset, 0 2px 8px rgba(var(--shadow-rgb), 0.12); }
#authForm, .auth-form { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
#authForm .input, .auth-form .input { height: 54px; font-size: 16.5px; }
#authForm label, .auth-form label { font-size: 15px; }
.pw-box { position: relative; }
.pw-box .input { padding-right: 52px; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 5px; background: none; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
.pw-eye:hover { color: var(--text); background: var(--surface-2); }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.pw-meter i { height: 4px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.105); transition: background 0.3s; }
.pw-meter[data-s="1"] i:nth-child(-n+1) { background: var(--down); }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-s="3"] i:nth-child(-n+3), .pw-meter[data-s="4"] i { background: var(--up); }
.pw-hint { font-size: 15px; color: var(--text-3); }
.pw-hint.ok { color: var(--up); }
.pw-hint.bad { color: var(--down); }
.auth-row .check { padding: 0; font-size: 15.5px; }
.auth-msg { padding: 12px 14px; border-radius: 6px; font-size: 15.5px; line-height: 1.5; }
.auth-msg.err { color: #ffd0d8; background: rgba(255, 111, 134, 0.08); border: 1px solid rgba(255, 111, 134, 0.3); }
.auth-msg.info { color: var(--text-2); background: var(--surface); border: 1px solid var(--line-2); }
.auth-msg a { text-decoration: underline; text-underline-offset: 3px; color: var(--text); }
.auth-terms { margin: 0; font-size: 15px; color: var(--text-3); line-height: 1.5; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; color: var(--text-3); font-size: 15px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-social { display: flex; flex-direction: column; gap: 10px; }
.auth-social .btn { justify-content: center; gap: 12px; }
.auth-social .pill { margin-left: 4px; }
.auth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--text-3); }
.auth-foot a { color: var(--text); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-dot { color: var(--line-2); }

/* account settings */
.set-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.settings .panel-h + .set-row { border-top: 0; padding-top: 4px; }
.set-ic { flex: none; width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.set-row .t { font-weight: 600; font-size: 16px; }
.set-row .s { font-size: 15px; color: var(--text-3); margin-top: 2px; }
.set-select { width: 260px; height: 40px; font-size: 15.5px; }

@media (max-width: 960px) {
  .ob { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ob-panel { min-height: 0; padding: 24px 20px 20px; }
  .ob-body h1 { font-size: 30px; }
  .ob-styles { grid-template-columns: 1fr; }
  .cur-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loc-radius { grid-template-columns: repeat(3, 1fr); }
  .cur-menu { right: -60px; width: min(340px, calc(100vw - 24px)); }
  .demo-tag { display: none; }
  .set-row { flex-wrap: wrap; }
  .set-select { width: 100%; }
}
.me-wrap { position: relative; }
.me-wrap .me-row { padding-right: 44px; }
.me-out { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 5px; background: none; color: var(--text-3); cursor: pointer; display: grid; place-items: center; transition: color 0.2s, background 0.2s; }
.me-out:hover { color: var(--text); background: var(--surface-2); }
#exitDemo { border-color: rgba(246, 198, 111, 0.35); color: var(--warn); }
@media (max-width: 960px) { .me-wrap { display: none; } }
.loc-promise { list-style: none; margin: 18px 0 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--text-2); }
.loc-promise li { display: flex; gap: 10px; align-items: flex-start; }
.loc-promise .ic { margin-top: 3px; color: var(--up); }
.loc-promise b { color: var(--text); font-weight: 600; }
.ob-body { position: relative; z-index: 2; } .ob-foot { position: relative; z-index: 1; }
.ob-body { animation: none; }
.ob-body.anim { animation: rise 0.45s var(--ease) both; }
/* top bar: search keeps its width; the gap before the right-hand buttons absorbs the squeeze */
button.search { flex: 1 1 auto; min-width: 240px; }
.topbar .spacer { flex: 0 1 48px; }
@media (max-width: 960px) { button.search { min-width: 0; } }
.tiles { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* top bar: search gets a sensible width first, the gap pushes the rest to the right edge */
button.search { flex: 1 1 480px; max-width: 640px; min-width: 240px; }
.topbar .spacer { flex: 1 1 0; }
@media (max-width: 960px) { button.search { flex: 1 1 auto; min-width: 0; } }

/* tour: sample-collection banner */
.tour-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-md); background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--line-2); font-size: 15px; color: var(--text-2); box-shadow: 0 12px 30px -10px rgba(var(--shadow-rgb), 0.32); white-space: nowrap; }

/* =====================================================================
   v0.6 consumer feel: friendlier and bigger. Numbers in the same sans as
   everything else (tabular), labels in normal case, roomier controls.
   ===================================================================== */
:root { --mono: "Geist", ui-sans-serif, system-ui, sans-serif; --r-md: 16px; --r-lg: 22px; }
body { font-size: 17px; font-variant-numeric: tabular-nums; }
.num, .mono { letter-spacing: -0.015em; font-weight: 550; }
kbd, .code-hint, pre { font-family: "Geist Mono", ui-monospace, monospace; }

/* labels: no more tiny ALL CAPS */
.eyebrow { font-size: 15px; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.pill { height: 28px; padding: 0 12px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.tag { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.table th { font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 550; }
.lg-head { font-size: 14.5px; letter-spacing: 0; text-transform: none; }
.grade-name { font-size: 15px; letter-spacing: 0; }
.nav-label { font-size: 13.5px; letter-spacing: 0.02em; text-transform: none; font-weight: 600; }
.palette .pal-sec, .when-day span, .demo-tag { letter-spacing: 0.02em; text-transform: none; }
.when-day span { font-size: 13px; }

/* type */
h1 { font-size: 50px; }
h2 { font-size: 25px; }
h2.display { font-size: 34px; }
.panel-h h3 { font-size: 20px; }
.page-h p { font-size: 17.5px; }
.list-row .t { font-size: 17px; }
.list-row .s { font-size: 15.5px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }

/* controls: bigger, rounder, easier to hit */
.btn { height: 48px; padding: 0 20px; font-size: 16px; font-weight: 600; border-radius: 7px; }
.btn.sm { height: 40px; padding: 0 16px; font-size: 15px; border-radius: 6px; }
.btn.lg { height: 56px; font-size: 17px; border-radius: 8px; }
.icon-btn { width: 48px; }
.btn.sm.icon-btn { width: 40px; }
.chip { height: 42px; padding: 0 18px; font-size: 15.5px; }
.seg { border-radius: 7px; }
.seg button { height: 40px; padding: 0 16px; font-size: 15.5px; border-radius: 5px; }
.input { height: 52px; font-size: 16.5px; border-radius: 6px; }
.topbar .btn.sm { height: 42px; }
.search { height: 50px; font-size: 16px; }
.panel { padding: 28px; }
.glass { border-radius: var(--r-lg); }

/* ---------- Market listings: the card is the hero ---------- */
.listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.listings.one { grid-template-columns: 1fr; }
.listing { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: border-color 0.3s, transform 0.4s var(--ease); }
.listing:hover { border-color: var(--line-2); transform: translateY(-2px); }
.listing.match { border-color: rgba(78, 227, 160, 0.35); }
.ls-art { position: relative; height: 340px; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, rgba(var(--ink-rgb), 0.074), transparent 70%), rgba(var(--paper-rgb), 0.3); border-bottom: 1px solid var(--line); }
.ls-stack { position: relative; width: 210px; height: 293px; }
.ls-c { position: absolute; inset: 0; cursor: pointer; transition: transform 0.5s var(--ease); }
.ls-c .cardart { --w: 210px !important; }
.ls-type, .ls-match { position: absolute; top: 14px; height: 32px; padding: 0 14px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ls-type { left: 14px; background: rgba(9, 9, 11, 0.6); border: 1px solid var(--line-2); color: var(--text); }
.ls-type.selling { color: #9ef0d6; }
.ls-type.wanted { color: #ffd89a; }
.ls-type.trade { color: #9fd8ff; }
.ls-match { right: 14px; background: rgba(78, 227, 160, 0.16); border: 1px solid rgba(78, 227, 160, 0.4); color: var(--up); }
.ls-body { padding: 20px 22px 6px; display: flex; flex-direction: column; gap: 6px; }
.ls-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.ls-title span { font-weight: 500; color: var(--text-3); font-size: 0.8em; }
.ls-sub { font-size: 15px; color: var(--text-3); }
.ls-price { margin-top: 6px; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ls-price span { font-size: 15px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.ls-price em, .ls-wants em { font-style: normal; font-size: 15px; font-weight: 550; color: var(--text-3); letter-spacing: 0; }
.ls-wants { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.ls-wants b { font-weight: 600; }
.ls-note { margin: 6px 0 0; font-size: 15.5px; color: var(--text-2); }
.ls-foot { margin-top: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.ls-seller { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); color: inherit; }
.ls-seller b { display: block; font-size: 16.5px; }
.ls-seller span { font-size: 14.5px; color: var(--text-3); }
a.ls-seller:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.ls-spot { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); }
@media (max-width: 960px) {
  .listings { grid-template-columns: 1fr; }
  h1 { font-size: 36px; }
  .btn { height: 46px; }
}

/* =====================================================================
   v0.7 game feel: empty spots are card-shaped inventory slots, and
   buttons have a little physical "press".
   ===================================================================== */
.slots-wrap { padding: 4px 0; }
.slots-head { margin-bottom: 22px; }
.slots-head h3 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; }
.slots-head p { margin: 8px 0 0; max-width: 620px; font-size: 17px; color: var(--text-2); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 20px; }
.slot { position: relative; aspect-ratio: 63 / 88; border-radius: 16px; border: 2px dashed rgba(var(--ink-rgb), 0.147); background: rgba(var(--ink-rgb), 0.016); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center; color: var(--text-2); font: inherit; transition: transform 0.45s var(--spring), border-color 0.3s, background 0.3s, box-shadow 0.3s; }
.slot.empty i { width: 26px; height: 26px; border-radius: 50%; border: 2px dashed rgba(var(--ink-rgb), 0.126); }
.slot.empty { opacity: 0.8; }
.slot.act { cursor: pointer; color: var(--text); border-color: rgba(var(--ink-rgb), 0.315); background: linear-gradient(165deg, rgba(var(--ink-rgb), 0.074), rgba(var(--ink-rgb), 0.016)); }
.slot.act b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.slot-sub { font-size: 14.5px; color: var(--text-3); line-height: 1.35; }
.slot-plus { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; background: var(--foil-soft); border: 1px solid rgba(var(--ink-rgb), 0.231); box-shadow: inset 0 1px 0 var(--hi); transition: transform 0.5s var(--spring), background 0.3s; }
.slot.act:hover { transform: translateY(-6px) rotate(-1.2deg); border-style: solid; border-color: rgba(159, 216, 255, 0.6); background: linear-gradient(165deg, rgba(159, 216, 255, 0.1), rgba(158, 240, 214, 0.04)); box-shadow: 0 0 34px rgba(158, 240, 214, 0.16), 0 24px 44px -18px rgba(var(--shadow-rgb), 0.34); }
.slot.act:hover .slot-plus { transform: scale(1.12); background: var(--foil); color: var(--on-text); }
.slot.act:active { transform: translateY(-2px) scale(0.98); }
.slot.act.first { animation: slotGlow 2.8s ease-in-out infinite; }
.slot.act.first:hover { animation: none; }
@keyframes slotGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(159, 216, 255, 0); } 50% { box-shadow: 0 0 0 6px rgba(159, 216, 255, 0.07), 0 0 28px rgba(158, 240, 214, 0.1); } }
.tiles .tile-slot { aspect-ratio: 63 / 88; align-self: start; }
.binder-slot { aspect-ratio: auto; min-height: 260px; }
.hero-hunt .slots-wrap { position: relative; }

/* buttons: chunky game buttons with a press shadow underneath that sinks when clicked */
.btn { box-shadow: 0 4px 0 rgba(var(--ink-rgb), 0.12), 0 8px 16px -10px rgba(var(--shadow-rgb), 0.3); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(var(--ink-rgb), 0.12), 0 12px 20px -12px rgba(var(--shadow-rgb), 0.35); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(var(--ink-rgb), 0.12); transition-duration: 0.06s; }
.btn.primary { background: var(--text); color: var(--on-text); border-color: transparent; box-shadow: 0 4px 0 #000, 0 10px 20px -10px rgba(var(--ink-rgb), 0.5); }
.btn.primary:hover { background: var(--text-hover); box-shadow: 0 6px 0 #000, 0 14px 24px -12px rgba(var(--ink-rgb), 0.5); }
.btn.primary:active { box-shadow: 0 0 0 #000; }
.btn.quiet, .btn.quiet:active { box-shadow: none; }
@media (max-width: 960px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
/* one row of pockets that trails off to the right (no orphan second row) */
.slots { display: flex; gap: 20px; overflow: hidden; padding: 14px 14px 18px; margin: -14px -14px -18px; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.slots .slot { flex: none; width: 196px; }
@media (max-width: 960px) {
  .slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; -webkit-mask-image: none; mask-image: none; margin: 0; padding: 0; }
  .slots .slot { width: auto; }
  .slots .slot.empty:nth-child(n+5) { display: none; }
}

/* ---------- real map (Leaflet) ---------- */
.nearby-map { height: 360px; border-radius: var(--r-md); overflow: hidden; background: var(--skel); border: 1px solid var(--line); }
.nearby-map .leaflet-container { background: var(--skel); font: inherit; }
.leaflet-control-attribution { background: rgba(var(--paper-rgb), 0.85) !important; color: var(--text-3) !important; font-size: 11px !important; }
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-control-zoom a { background: var(--paper) !important; color: var(--text) !important; border-color: var(--line-2) !important; }
.map-me i { display: block; width: 22px; height: 22px; border-radius: 50%; background: #7fe7ff; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(127, 231, 255, 0.25), 0 0 24px rgba(127, 231, 255, 0.6); }
.map-pin { transition: transform 0.3s var(--spring); }
.map-pin:hover { transform: scale(1.12); z-index: 1000 !important; }
.map-pin .avatar { border: 2px solid #9ef0d6; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
.map-pin.shop .avatar { border-color: #ffd89a; }
.leaflet-popup-content-wrapper { background: var(--paper); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: 0 20px 50px -14px rgba(var(--shadow-rgb), 0.35); }
.leaflet-popup-tip { background: var(--paper); }
.leaflet-popup-content { margin: 12px 14px; font-size: 15px; }
.map-pop { display: flex; gap: 12px; align-items: center; }
.map-pop b { display: block; font-size: 16px; }
.map-pop span { display: block; color: var(--text-3); font-size: 13.5px; margin: 2px 0 4px; }
.map-pop a { color: #9fd8ff; font-weight: 600; font-size: 14px; }
.leaflet-tooltip { background: var(--paper); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); font: 600 14px var(--font); }
.map-off { height: 100%; display: grid; place-items: center; color: var(--text-3); }

/* listing stacks: positions by data-pos so flipping animates; front card on top */
.ls-c { transition: transform 0.5s var(--ease), opacity 0.25s; touch-action: pan-y; }
.ls-stack { touch-action: pan-y; cursor: grab; }
.ls-stack:active { cursor: grabbing; }
.ls-c[data-pos="0"] { z-index: 3; }
.ls-c[data-pos="1"] { z-index: 2; }
.ls-c[data-pos="2"] { z-index: 1; }
.ls-stack.n2 .ls-c[data-pos="1"] { transform: translateX(34px) rotate(7deg) scale(0.94); }
.ls-stack.n3 .ls-c[data-pos="1"] { transform: translateX(46px) rotate(9deg) scale(0.9); }
.ls-stack.n3 .ls-c[data-pos="2"] { transform: translateX(-46px) rotate(-9deg) scale(0.9); }
.listing:hover .ls-stack.n2 .ls-c[data-pos="1"] { transform: translateX(50px) rotate(10deg) scale(0.94); }
.listing:hover .ls-stack.n3 .ls-c[data-pos="1"] { transform: translateX(62px) rotate(12deg) scale(0.9); }
.listing:hover .ls-stack.n3 .ls-c[data-pos="2"] { transform: translateX(-62px) rotate(-12deg) scale(0.9); }
.ls-c.fly { transform: translateX(-135%) rotate(-18deg) !important; opacity: 0; transition: transform 0.22s ease-in, opacity 0.22s ease-in; }
.ls-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 4; }
.ls-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.294); transition: width 0.3s var(--ease), background 0.3s; }
.ls-dots i.on { width: 20px; background: var(--foil); }
/* OpenStreetMap tiles, turned into a dark map that matches the app */
.map-tiles-dark { filter: saturate(0.75) sepia(0.12) brightness(1.03); }

/* ---------- card grid size (S / M / L), set by --tile-min ---------- */
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 160px), 1fr)); gap: 18px; }
.tiles[style*="--tile-min"] { grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); }
.tiles.size-s { gap: 24px 14px; }
.tiles.size-s .tile .nm { font-size: 15.5px; }
.tiles.size-s .tile .num, .tiles.size-s .tile .st { font-size: 14px; }
.tiles.size-l .tile .nm { font-size: 22px; }
.set-grid.size-s { gap: 12px; }
.set-grid.size-s .gh-in { font-size: 12.5px; }
.set-grid.size-l { gap: 24px; }
.set-grid.size-l .gh-in { font-size: 16px; }
.size-seg button { width: 44px; justify-content: center; padding: 0; }
.sort-select { width: auto; height: 46px; font-size: 15.5px; padding-right: 40px; }
@media (max-width: 960px) {
  .tiles[style*="--tile-min"] { grid-template-columns: repeat(auto-fill, minmax(calc(var(--tile-min) * 0.7), 1fr)); }
  .set-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--tile-min, 160px) * 0.7), 1fr)); }
}

/* hover pop for small card thumbnails */
.peek { position: fixed; z-index: 90; pointer-events: none; padding: 12px; border-radius: var(--r-md); background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--line-2); box-shadow: 0 30px 70px -18px rgba(var(--shadow-rgb), 0.36), 0 0 0 1px rgba(var(--ink-rgb), 0.032);  animation: peekIn 0.22s var(--spring) both; }
.peek .cardart { --w: 240px !important; }
.peek-meta { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px 2px; max-width: 240px; }
.peek-meta b { font-size: 17px; }
.peek-meta span { font-size: 14px; color: var(--text-3); }
.peek-meta .peek-px { font-size: 20px; font-weight: 600; color: var(--text); margin-top: 4px; }
@keyframes peekIn { from { opacity: 0; transform: scale(0.92) translateY(6px); } }
[data-peek] { cursor: zoom-in; }

/* listing badges always sit above the cards flipping through */
.ls-type, .ls-match { z-index: 6; }

/* tile actions live on the card art: ♡ top-right, + bottom-right */
.tile-art { position: relative; }
.tile-ov { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tile-btn { position: absolute; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(9, 9, 11, 0.72); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; pointer-events: auto; opacity: 0; transform: scale(0.85); transition: opacity 0.2s, transform 0.3s var(--spring), background 0.2s; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.tile-btn.wish { top: 10px; right: 10px; }
.tile-btn.add { bottom: 10px; right: 10px; background: #f5f5f7; color: #0b0b0e; border-color: transparent; }
.tile:hover .tile-btn, .tile-btn.wish.on, .tile-btn:focus-visible { opacity: 1; transform: none; }
.tile-btn:hover { transform: scale(1.1) !important; }
.tile-btn.wish.on { color: #ff8fb8; }
.tiles.size-s .tile-btn { width: 34px; height: 34px; }
@media (hover: none) { .tile-btn { opacity: 1; transform: none; } }

/* wishlist grid tiles */
.tile-btn.star { top: 10px; left: 10px; color: var(--text-2); }
.tile-btn.star.on { opacity: 1; transform: none; color: #ffd89a; border-color: rgba(255, 216, 154, 0.5); }
.tile-btn.star.on svg { fill: currentColor; }
.tile-btn.x { top: 10px; right: 10px; }
.wish-tile-where { font-size: 14.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.wish-max { margin-top: 10px; width: 100%; height: 38px; border-radius: 6px; border: 1px dashed var(--line-2); background: transparent; color: var(--text-2); font: 600 14.5px var(--font); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.wish-max:hover { border-color: rgba(var(--ink-rgb), 0.42); color: var(--text); }
.wish-max.set { border-style: solid; color: var(--text); background: var(--surface); }
.wish-max.over { border-color: rgba(246, 198, 111, 0.45); color: var(--warn); }
.wish-tiles .tile-meta .st { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* quick tooltips */
.tip { position: fixed; z-index: 95; max-width: 280px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(var(--ink-rgb), 0.95); color: var(--on-text); font: 600 14px/1.4 var(--font); box-shadow: 0 12px 30px -8px rgba(var(--shadow-rgb), 0.28); pointer-events: none; animation: tipIn 0.16s var(--ease) both; }
.tip::after { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.tip.above::after { bottom: -4px; }
.tip.below::after { top: -4px; }
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } }

/* v0.8 framed: tiles sit in their own pocket and filters live in one panel, so pages read as tidy boards
   instead of loose floating cards */
.tile { padding: 10px 10px 14px; border-radius: var(--r-md); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); transition: border-color 0.25s, background 0.25s, box-shadow 0.3s; }
.tile:hover { border-color: var(--glass-edge); background: var(--glass-bg-hover); box-shadow: var(--glass-shadow), 0 22px 44px -22px rgba(var(--shadow-rgb), 0.32); }
.tile-meta { padding: 0 6px; }
.tiles, .tiles[style*="--tile-min"] { gap: 20px; }
.tiles.size-s { gap: 14px; }
.tiles.size-s .tile { padding: 8px 8px 12px; border-radius: 8px; }
.tiles.size-s .tile-meta { padding: 0 4px; }
.tiles.size-l { gap: 24px; }
.tiles .tile-slot { aspect-ratio: auto; align-self: stretch; min-height: 220px; border-radius: 10px; }

/* toolbars become one framed bar */
.toolbar { padding: 10px 12px 10px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); margin-bottom: 22px; }

/* Explore: search, popular sets and filters in one panel */
.filter-panel { padding: 18px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.filter-panel .toolbar { padding: 16px 0 0; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
/* calmer: popular sets read as a quiet row of links, not a wall of bordered buttons */
.filter-panel .chips.scroll { gap: 2px; }
.filter-panel .chips.scroll .chip { height: 34px; padding: 0 12px; border-color: transparent; background: none; box-shadow: none; color: var(--text-2); }
.filter-panel .chips.scroll .chip:hover { background: var(--surface-2); color: var(--text); }
.filter-panel .chips.scroll .chip.on { background: var(--surface-3); color: var(--text); }
/* set line under a tile: one line on roomy tiles, wraps to two on narrow ones (never more) */
.tile-set { margin-top: 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.nowrap { white-space: nowrap; }
.wish-tiles .tile-meta .st.tile-set { white-space: normal; }

/* binder tiles: condition tag on the art (like a grading label) + when you got it */
.cond-tag { display: inline-block; cursor: default; padding: 4px 9px; border-radius: var(--r-sm); font: 600 13px/1.2 var(--font); letter-spacing: 0.02em; color: #0b0b0e; background: #9ef0d6; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.cond-tag.c-lp { background: #9fd8ff; }
.cond-tag.c-mp { background: #ffd89a; }
.cond-tag.c-hp { background: #ffb38a; }
.cond-tag.c-dmg { background: #ff9a9a; }
.tiles.size-s .cond-tag { bottom: 7px; left: 7px; padding: 3px 7px; font-size: 12px; }
.tile-got { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--text-3); font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.tile-got span { overflow: hidden; text-overflow: ellipsis; }
.tile-got svg { flex: none; opacity: 0.8; }
.tiles.size-s .tile-got svg { display: none; }
.tile-ov .cond-tag { position: absolute; bottom: 10px; left: 10px; pointer-events: auto; }
.tiles.size-s .tile-ov .cond-tag { bottom: 7px; left: 7px; }

/* trade detail: each card with its details, not just a thumbnail */
.trade-cards { display: flex; flex-direction: column; gap: 6px; margin: 4px -10px 0; }
.trade-card { display: flex; gap: 18px; align-items: flex-start; padding: 10px; border-radius: 8px; color: inherit; text-decoration: none; transition: background 0.2s; }
.trade-card:hover { background: var(--surface); }
.trade-side .trade-card .cardart { flex: none; }
.trade-side .trade-cards:not(.many) .cardart { --w: 116px !important; }
.trade-side .trade-cards.many .cardart { --w: 76px !important; }
.tc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
.tc-name { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.tc-set { color: var(--text-2); font-size: 15.5px; }
.tc-rarity { color: var(--text-3); font-size: 14.5px; }
.tc-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tc-check { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 14px; }
.tc-px { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; font-size: 18px; font-weight: 600; }
.tc-px small { color: var(--text-3); font-size: 14px; font-weight: 500; }
.tc-paid { color: var(--text-3); font-size: 14.5px; }
.trade-cards.many .tc-name { font-size: 17px; }
.trade-cards.many .tc-tags { margin-top: 4px; }
.trade-cards.many .tc-px { margin-top: 4px; font-size: 16.5px; }
/* market listings: a clear strip on top for the Selling/Trade and "Matches you" tags, so they never sit on the card */
.ls-art { height: auto; padding: 60px 0 32px; }
.ls-type, .ls-match { top: 16px; }

/* graded: one grading company at a time */
.grader-sel { width: auto; height: 38px; font-size: 15px; font-weight: 600; padding-left: 14px; border-radius: 6px; background-position: right 12px center; padding-right: 34px; }
.raw-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 15px; }
.raw-line b { color: var(--text); font-size: 17px; font-weight: 600; }

/* card page: your copies (when you own the card) */
.owned-panel { border-color: rgba(158, 240, 214, 0.22); }
.owned-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: var(--r-md); overflow: hidden; background: var(--line); border: 1px solid var(--line); margin-bottom: 14px; }
.owned-sum > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; background: rgba(var(--paper-rgb), 0.7); }
.owned-sum span { color: var(--text-3); font-size: 14.5px; }
.owned-sum b { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.owned-sum em { font-style: normal; font-size: 13.5px; }
.copy-list { display: flex; flex-direction: column; }
.copy-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.copy-row:first-child { border-top: 0; }
.copy-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.copy-main b { font-size: 16.5px; font-weight: 600; }
.copy-where { color: var(--text-2); font-size: 15px; margin-left: 4px; }
.copy-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-sub { color: var(--text-3); font-size: 14.5px; }
.copy-sub .link-btn { font-size: 14.5px; }
.copy-val { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 16.5px; font-weight: 600; }
.copy-val > span:last-child { font-size: 14.5px; font-weight: 500; }
.copy-acts { display: flex; gap: 6px; }
.copy-acts .btn.icon-btn.danger:hover { border-color: rgba(255, 107, 129, 0.5); background: rgba(255, 107, 129, 0.08); }
.owned-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
.owned-ft { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.sold-log { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 14.5px; color: var(--text-2); }
.sell-sum { margin-top: 16px; padding: 12px 14px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-size: 15.5px; }
.sell-sum b { font-size: 17px; }
@media (max-width: 720px) {
  .copy-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .copy-acts { grid-column: 1 / -1; justify-content: flex-end; }
  .owned-sum b { font-size: 19px; }
}
.sold-log.col { flex-direction: column; margin-top: 0; font-size: 15.5px; gap: 8px; }
.binder-keys { font-size: 14px; margin-left: 6px; }

/* hunt mode (desktop): checker on the left, what you still need on the right */
.hunt-desk { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 24px; align-items: start; }
.hunt-check { position: sticky; top: 96px; transition: border-color 0.3s, box-shadow 0.3s; }
.hunt-check.need { border-color: rgba(78, 227, 160, 0.45); box-shadow: 0 0 0 4px rgba(78, 227, 160, 0.07), 0 20px 50px -20px rgba(var(--shadow-rgb), 0.2); }
.hunt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 16px 30px; color: var(--text-3); }
.hunt-empty b { color: var(--text); font-size: 18px; font-weight: 600; margin-top: 6px; }
.hunt-empty span { font-size: 15.5px; max-width: 300px; }
.hunt-result { margin-top: 18px; animation: pop 0.45s var(--spring) both; }
.hunt-miss { margin-top: 18px; color: var(--text-2); }
.hunt-hit { display: flex; gap: 20px; align-items: flex-start; }
.hunt-hit-art { flex: none; }
.hunt-hit-art .cardart { --w: 150px !important; }
.hunt-hit-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hunt-hit-info h2 { margin: 6px 0 0; font-size: 24px; letter-spacing: -0.02em; }
.hunt-px { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.hunt-px > div { display: flex; flex-direction: column; gap: 2px; }
.hunt-px span { color: var(--text-3); font-size: 14px; }
.hunt-px b { font-size: 20px; font-weight: 600; }
.hunt-ask { height: 56px; font-size: 22px; font-weight: 600; }
.hunt-verdict { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 11px 14px; border-radius: 6px; font-weight: 600; font-size: 15.5px; background: var(--surface); border: 1px solid var(--line); }
.hunt-verdict.up { color: var(--up); border-color: rgba(78, 227, 160, 0.3); background: rgba(78, 227, 160, 0.06); }
.hunt-verdict.warn { color: var(--warn); border-color: rgba(246, 198, 111, 0.35); background: rgba(246, 198, 111, 0.06); }
.hunt-verdict.down { color: var(--down); border-color: rgba(255, 107, 129, 0.35); background: rgba(255, 107, 129, 0.06); }
.hunt-list { min-width: 0; }
.hunt-list .tile { cursor: pointer; }
.hunt-list .tile.checking { border-color: rgba(158, 240, 214, 0.6); box-shadow: 0 0 0 3px rgba(158, 240, 214, 0.12); }
.hunt-near { display: inline-flex; align-items: center; gap: 3px; font-size: 14.5px; font-weight: 600; }
@media (max-width: 1100px) { .hunt-desk { grid-template-columns: 1fr; } .hunt-check { position: static; } }

/* home feed: card-first tiles, same family as Market listings */
.feed-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.ls-sub2 { font-size: 15.5px; color: var(--text-2); }
.ls-follow { font-size: 14.5px; color: var(--text-3); }
.ls-follow span { color: var(--text-3); opacity: 0.8; }
.ls-type.event, .ls-type.show { color: #ffd89a; }
.ls-type.restock { color: #9ef0d6; }
.ls-type.memory { background: var(--foil); color: #0b0b0e; border-color: transparent; }
.feed-tile .ls-title { font-size: 20px; }

/* wants QR */
.qr-wrap { display: grid; place-items: center; gap: 12px; }
.qr-box { width: 260px; height: 260px; display: grid; place-items: center; padding: 10px; border-radius: 16px; background: #fff; }
.qr-box svg { width: 100%; height: 100%; }
.qr-box .faint { color: #555; text-align: center; padding: 0 12px; }

/* ---------- side menu: full or slim icon rail ---------- */
.app { transition: grid-template-columns 0.35s var(--ease); }
.side-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.side-top .logo { min-width: 0; }
.side-toggle { flex: none; width: 36px; height: 36px; margin-top: -6px; display: grid; place-items: center; border-radius: 5px; border: 1px solid transparent; background: none; color: var(--text-3); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.side-toggle:hover { color: var(--text); background: var(--surface); border-color: var(--line); }
.app.nav-min { grid-template-columns: 84px minmax(0, 1fr); }
.app.nav-min .sidebar { padding-left: 12px; padding-right: 12px; }
.app.nav-min .side-top { flex-direction: column; align-items: center; gap: 10px; margin-bottom: 14px; }
.app.nav-min .side-top .logo { padding: 2px 0 0; }
.app.nav-min .side-toggle { margin-top: 0; }
.app.nav-min .logo .word,
.app.nav-min .nav a > span:not(.badge),
.app.nav-min .me-row .meta,
.app.nav-min .me-out { display: none; }
.app.nav-min .nav-label { height: 1px; margin: 10px 10px; padding: 0; font-size: 0; overflow: hidden; background: var(--line); }
.app.nav-min .nav a { justify-content: center; padding: 0; }
.app.nav-min .nav .badge { position: absolute; top: 3px; right: 5px; margin: 0; transform: scale(0.85); }
.app.nav-min .nav-ind::before { left: -12px; }
.app.nav-min .side-tools { grid-template-columns: 1fr; }
.app.nav-min .side-tool { justify-content: center; padding: 0; }
.app.nav-min .side-tool span { display: none; }
.app.nav-min .me-row { justify-content: center; padding: 10px 0; }
.app.nav-min .me-wrap .me-row { padding-right: 0; }

/* phones: the menu is a bottom bar that always fits */
@media (max-width: 960px) {
  .app.nav-min { grid-template-columns: 1fr; }
  .side-top, .me-wrap { display: none !important; }
  .nav { gap: 0; }
  .nav a { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 11px; }
  .nav a > span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* phones: a compact top bar (icons only, the extras tucked away) */
@media (max-width: 960px) {
  .topbar { gap: 8px; padding: 10px 12px; }
  .topbar .spacer, #helpTour, #resetDemo, #demoTag, button.search kbd { display: none !important; }
  #scanTop, #exitDemo { font-size: 0; gap: 0; width: 42px; padding: 0; justify-content: center; flex: none; }
  #scanTop svg, #exitDemo svg { width: 18px; height: 18px; }
  .cur-btn { flex: none; padding: 0 10px; }
  #otherTime { white-space: normal; text-align: left; height: auto; }
}
/* phones: nothing in a page may push it wider than the screen */
.split > *, .hunt-desk > *, .card-layout > *, .trades-layout > * { min-width: 0; }
.owned-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .hunt-desk { grid-template-columns: minmax(0, 1fr); }
  .card-layout { flex-direction: column; }
  .card-side { width: 100%; position: static; }
  .owned-sum > div { padding: 12px; }
  .owned-sum b { font-size: 18px; overflow-wrap: anywhere; }
  .copy-row { grid-template-columns: auto minmax(0, 1fr); }
  .copy-val { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 8px; }
  .copy-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .binder-keys { display: none; }
}
@media (max-width: 960px) { .price-big { font-size: clamp(36px, 11vw, 56px) !important; } }
@media (max-width: 960px) { .page-h [data-view="3d"] { display: none; } }

/* ---------- 3D binder: side arrows, drag to flip, full screen ---------- */
.binder-shell { position: relative; overflow: hidden; }
.binder-stage { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; padding: 34px 110px 18px; }
.binder-shell.dragging .binder-stage { cursor: grabbing; }
.binder-stage .pocket[data-card] { cursor: pointer; }
.pocket { width: var(--pw, 102px); }
.pocket .cardart { --w: calc(var(--pw, 102px) - 6px) !important; }
.bnav { position: absolute; top: calc(50% - 50px); z-index: 6; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--ink-rgb), 0.063); border: 1px solid var(--line-2); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; box-shadow: 0 10px 30px -10px rgba(var(--shadow-rgb), 0.32); transition: transform 0.35s var(--spring), background 0.2s, opacity 0.2s, box-shadow 0.3s; }
.bnav.prev { left: 24px; }
.bnav.next { right: 24px; }
.bnav:hover:not(:disabled) { background: rgba(var(--ink-rgb), 0.147); transform: scale(1.08); box-shadow: 0 0 0 6px rgba(159, 216, 255, 0.08), 0 14px 34px -10px rgba(var(--shadow-rgb), 0.36); }
.bnav:active:not(:disabled) { transform: scale(0.95); }
.bnav:disabled { opacity: 0.22; cursor: default; }
.binder-foot { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 4px 22px 22px; font-size: 15.5px; }
.binder-foot .num { font-weight: 600; }
.binder-foot .binder-keys { font-size: 14.5px; margin: 0; }
/* full screen */
html.binder-full-on, html.binder-full-on body { overflow: hidden; }
html.binder-full-on .view, html.binder-full-on .main { transform: none !important; animation: none !important; filter: none !important; }
.binder-shell.full { position: fixed; inset: 0; z-index: 90; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; background: radial-gradient(120% 90% at 50% 35%, #1b1b23, #060608 75%); backdrop-filter: none; -webkit-backdrop-filter: none; animation: fadeIn 0.3s var(--ease) both; }
.binder-shell.full .binder-stage { flex: 1; padding: 8px 120px; }
.binder-top { display: flex; align-items: baseline; gap: 14px; padding: 20px 24px 0; font-size: 17px; }
.binder-top .btn { margin-left: auto; align-self: center; }
.binder-shell.full .bnav { width: 76px; height: 76px; top: calc(50% - 38px); }
.binder-shell.full .bnav.prev { left: 32px; }
.binder-shell.full .bnav.next { right: 32px; }

/* card page: back to where you came from */
.card-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.card-nav .crumbs { margin: 0; }

/* v0.9 · card number under the name on tiles (49/151) */
.tile .nm-no { margin-top: 1px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles.size-s .tile .nm-no { font-size: 12.5px; }

/* v0.9 · price movement, Collectr style: ▲ price, then "+A$38.23 (9.19%)" in grey underneath */
.pmove { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-now { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.pm-arr { flex: none; fill: currentColor; }
.pm-rise .pm-arr { color: var(--up); }
.pm-fall .pm-arr { color: var(--down); transform: rotate(180deg); }
.pm-chg { font-size: 0.86em; color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
/* In a narrow tile the (%) wraps onto a hidden second line, so the amount always shows in full. */
.tile .pm-chg { display: flex; flex-wrap: wrap; column-gap: 0.3em; line-height: 1.35; height: 1.35em; overflow: hidden; }
.tile .pm-chg > span:first-child { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tile-meta .row:has(.pmove) { align-items: flex-start; }
.tile-meta .row > .st { min-width: 0; flex: 1 1 auto; }
.tile-meta .row .pmove .num { color: var(--text); }
.tiles.size-s .pm-arr { width: 8px; height: 7px; }
.pmove.big .pm-now { gap: 12px; }
.pmove.big .pm-arr { width: 18px; height: 15px; }
.pmove.big .pm-chg { font-size: 17px; margin-top: 8px; }
/* how many copies you own, on the art (bottom-right), so the price line keeps the full tile width */
.tile-ov .qty-tag { position: absolute; bottom: 10px; right: 10px; padding: 4px 9px; border-radius: 4px; font: 600 13px/1.2 var(--font); color: #fff; background: rgba(9, 9, 11, 0.78); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); pointer-events: auto; cursor: default; }
.tiles.size-s .tile-ov .qty-tag { bottom: 7px; right: 7px; padding: 3px 7px; font-size: 12px; }

/* v0.9 · New post: picked cards as thumbnails + a card picker with images */
.pk-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pk-card { position: relative; width: 104px; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pk-sel { cursor: default; }
.pk-art { position: relative; margin-bottom: 6px; }
.pk-art .cardart { --w: 104px !important; width: 104px; }
.pk-card:not(.pk-sel):hover .pk-art { transform: translateY(-3px); }
.pk-card:not(.pk-sel) .pk-art { transition: transform 0.25s var(--spring); }
.pk-nm { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-sub { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pk-x { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(9, 9, 11, 0.85); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.pk-x:hover { background: var(--down); color: #0b0b0e; border-color: transparent; }
.pk-tag { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; font: 600 11px/1.3 var(--font); color: #0b0b0e; background: #9ef0d6; }
.pk-add { width: 104px; aspect-ratio: 63 / 88; border-radius: 9px; border: 1.5px dashed rgba(var(--ink-rgb), 0.231); background: rgba(var(--ink-rgb), 0.026); color: var(--text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: 600 13px/1.2 var(--font); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.pk-add:hover, .pk-add.on { border-color: rgba(var(--ink-rgb), 0.525); color: var(--text); background: rgba(var(--ink-rgb), 0.053); }
.pk-plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--ink-rgb), 0.074); }
.pk-pop { margin-top: 12px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line, rgba(var(--ink-rgb), 0.105)); background: rgba(var(--paper-rgb), 0.83); animation: fadeIn 0.18s ease both; }
.pk-pop .search { margin-bottom: 12px; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; max-height: 330px; overflow-y: auto; padding: 4px 4px 2px; justify-items: start; }
.pk-hint, .pk-empty { grid-column: 1 / -1; font-size: 14px; }
.pk-empty { padding: 18px 0; text-align: center; }

/* v0.9 · meetup spot picker (card shops · any place via search · decide later) */
.spot-cur { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line, rgba(var(--ink-rgb), 0.105)); background: rgba(var(--ink-rgb), 0.032); }
.spot-cur.warn { border-color: rgba(255, 216, 154, 0.45); }
.spot-cur b, .spot-opt b { display: block; font-weight: 600; }
.spot-cur .grow > span, .spot-opt .grow > span { display: block; color: var(--text-2); font-size: 14.5px; margin-top: 2px; }
.spot-ic { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(var(--ink-rgb), 0.063); color: var(--text-2); }
.spot-maps { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.spot-maps:hover { color: var(--text); }
.spot-warn { font-size: 14px; margin-top: 8px; }
.spot-pop { margin-top: 10px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line, rgba(var(--ink-rgb), 0.105)); background: rgba(var(--paper-rgb), 0.83); display: flex; flex-direction: column; gap: 6px; animation: fadeIn 0.18s ease both; }
.spot-pop .search { margin-bottom: 4px; }
.spot-res { display: flex; flex-direction: column; gap: 4px; }
.spot-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 6px; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.spot-opt:hover { background: rgba(var(--ink-rgb), 0.053); }
.spot-opt.on { border-color: rgba(var(--ink-rgb), 0.294); background: rgba(var(--ink-rgb), 0.053); }
.spot-opt .pill { flex: none; }
.spot-sec { margin: 8px 2px 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.spot-msg { padding: 8px 4px; font-size: 14.5px; }
.spot-foot { margin-top: 6px; gap: 12px; font-size: 13.5px; align-items: flex-end; }
.spot-attr { white-space: nowrap; color: var(--text-3); font-size: 12.5px; }
.spot-line { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spot-line .spot-maps { font-size: 13px; }

/* v0.9 · fine print under suggested prices */
.price-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--text-3); }
.price-hint .ic { flex: none; margin-top: 2px; }

/* v0.9 · binder: money in one quiet line under the collector stats */
.money-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: -6px 4px 22px; font-size: 14.5px; color: var(--text-3); }
.money-line > span { display: inline-flex; align-items: center; gap: 6px; }
.money-line b { color: var(--text-2); font-weight: 600; }
.money-line a { color: var(--warn); }
.money-line a:hover { text-decoration: underline; }
/* a segmented control that fills its row (e.g. "A set | Custom rule") */
.seg.seg-wide { display: flex; width: 100%; }
.seg.seg-wide > button { flex: 1 1 0; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }

/* v0.9 · custom set binder: pick a Pokémon (sprite grid) */
.pkmn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; margin-top: 10px; padding: 2px; }
.pkmn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; border-radius: var(--r-md); border: 1px solid var(--line, rgba(var(--ink-rgb), 0.105)); background: rgba(var(--ink-rgb), 0.026); color: inherit; font: inherit; cursor: pointer; text-align: center; transition: background 0.15s, border-color 0.15s; }
.pkmn:hover { background: rgba(var(--ink-rgb), 0.063); }
.pkmn.on { border-color: rgba(var(--ink-rgb), 0.63); background: rgba(var(--ink-rgb), 0.095); }
.pkmn img, .pk-sprite { image-rendering: pixelated; }
.pkmn b { font-size: 14px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkmn span { font-size: 12.5px; color: var(--text-3); }
.pkmn-msg { grid-column: 1 / -1; padding: 16px 4px; font-size: 14.5px; }
.pk-sprite { flex: none; margin: -10px -6px -10px 0; }
/* a search box stacked in a column (field, picker pop-ups) keeps its full height */
.field > .search, .col > .search, .spot-pop > .search, .pk-pop > .search { flex: none; color: var(--text); font-weight: 400; }
/* card shop pin on the "Your area" map (people are never drawn) */
.map-shop { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #0b0b0e; background: #ffd89a; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
.map-pop .map-shop { display: grid; margin: 0; color: #0b0b0e; }

/* v0.9 · date of birth (onboarding + one-time gate) */
.dob-row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 10px; }
.sprite-pick { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--ink-rgb), 0.053); border: 1px solid var(--line, rgba(var(--ink-rgb), 0.105)); }
.sprite-pick img { width: 64px; height: 64px; image-rendering: pixelated; }
.av-pick.on .sprite-pick { border-color: var(--text); background: rgba(var(--ink-rgb), 0.126); }

/* v0.9 · settings: on/off switch, own-amount input, unblock chip */
.switch { flex: none; width: 46px; height: 26px; border-radius: var(--r-sm); border: 1px solid var(--line, rgba(var(--ink-rgb), 0.147)); background: rgba(var(--ink-rgb), 0.084); position: relative; cursor: pointer; transition: background 0.2s, border-color 0.2s; padding: 0; }
.switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 4px; background: var(--paper); box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.3); transition: transform 0.25s var(--spring), background 0.2s; }
.switch.on { background: var(--up); border-color: transparent; }
.switch.on i { transform: translateX(20px); background: var(--paper); }
.set-amt { width: 96px; height: 38px; }
.chip-x { border: 0; background: none; color: inherit; padding: 0 0 0 4px; cursor: pointer; display: inline-grid; place-items: center; }

/* v0.9 · binder cover: your Trainer Card colour + texture around the pages, favourite Pokémon sticker */
.book-cover { --cover: #1f2937; position: relative; padding: 16px; border-radius: 22px; transform: rotateX(9deg); transform-style: preserve-3d;
  background: var(--cover); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.35); }
.book-cover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay; opacity: 0.55; }
.book-cover.tex-leather::before { background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.35), transparent 45%), repeating-radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px); }
.book-cover.tex-canvas::before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 4px); }
.book-cover.tex-glitter::before { opacity: 0.9; mix-blend-mode: screen; background-image: radial-gradient(rgba(255, 255, 255, 0.85) 0.8px, transparent 1.2px), radial-gradient(rgba(255, 255, 255, 0.5) 0.6px, transparent 1px); background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px; animation: glitter 6s linear infinite; }
@keyframes glitter { to { background-position: 18px 9px, -9px 19px; } }
@media (prefers-reduced-motion: reduce) { .book-cover.tex-glitter::before { animation: none; } }
.book-cover .binder { transform: none; }
.book-sticker { position: absolute; top: -26px; left: -18px; width: 72px; height: 72px; image-rendering: pixelated; transform: rotate(-10deg) translateZ(2px); z-index: 7; pointer-events: none;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); }

/* ---------- v0.9 · Trainer Card ---------- */
.tcard { --tc: #2b3a55; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; width: min(560px, 100%); aspect-ratio: 1.6; perspective: 1600px; position: relative;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.6s var(--ease); }
.tcard.tilting { transition: transform 0.12s linear; }
.tcard.mini { width: 100%; max-width: 300px; aspect-ratio: 1.75; perspective: none; transform: none; }
.tcard-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.2, 1); }
.tcard.flipped .tcard-inner { transform: rotateY(180deg); }
.tc-face { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 20px 22px; display: flex; flex-direction: column;
  background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--tc), #fff 14%), var(--tc) 55%, color-mix(in srgb, var(--tc), #000 28%));
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tcard.mini .tc-face { border-radius: 16px; padding: 12px 14px; }
.tc-back { transform: rotateY(180deg); }
.ink-light .tc-face { color: #fff; }
.ink-dark .tc-face { color: #121216; }
.tc-shine, .tc-glare { position: absolute; inset: 0; pointer-events: none; }
.tc-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.24), transparent 46%); opacity: 0; transition: opacity 0.4s; }
.tcard.tilting .tc-glare { opacity: 1; }
.fin-glossy .tc-shine { background: linear-gradient(115deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 32%, transparent 48%, rgba(255, 255, 255, 0.08) 78%, transparent); }
.fin-matte .tc-shine { background: repeating-radial-gradient(circle at 40% 30%, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px); }
.fin-matte .tc-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.1), transparent 50%); }
.fin-holo .tc-shine { background: linear-gradient(115deg, rgba(255, 216, 154, 0.5), rgba(158, 240, 214, 0.45), rgba(159, 216, 255, 0.5), rgba(255, 216, 154, 0.45)); background-size: 300% 300%; mix-blend-mode: overlay; animation: tcHolo 7s ease-in-out infinite alternate; }
.fin-holo .tc-shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%); background-size: 250% 100%; animation: tcSweep 4.5s ease-in-out infinite; }
.fin-holo.tilting .tc-shine { animation: none; background-position: var(--mx) var(--my); }
@keyframes tcHolo { to { background-position: 100% 100%; } }
@keyframes tcSweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.tc-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tc-top-r { display: flex; align-items: center; gap: 8px; }
.tc-brand { font: 600 11px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.tc-title, .tc-lv { font: 600 12.5px/1 var(--font); padding: 6px 10px; border-radius: 99px; border: 0; color: inherit; background: rgba(255, 255, 255, 0.18); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.tc-lv { background: rgba(0, 0, 0, 0.22); letter-spacing: 0.04em; }
.ink-dark .tc-title { background: rgba(0, 0, 0, 0.1); }
.ink-dark .tc-lv { background: rgba(0, 0, 0, 0.16); }
.tcard.mini .tc-title { font-size: 11px; padding: 4px 8px; }
.tc-main { position: relative; flex: 1; display: flex; align-items: center; gap: 12px; min-height: 0; }
.tc-who { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }
.tc-who .avatar { flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); }
.tc-id { min-width: 0; flex: 1; }
.tc-id h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard.mini .tc-id h2 { font-size: 16px; }
.tc-bio { margin: 6px 0 0; font-size: 14.5px; line-height: 1.38; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tc-mon { position: relative; flex: none; width: 76px; display: grid; place-items: center; align-self: flex-end; }
.tc-mon img { width: 76px; height: 76px; image-rendering: pixelated; position: relative; z-index: 1; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3)); }
.tc-mon i { position: absolute; bottom: 8px; width: 54px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); }
.tc-bottom { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tc-show { display: flex; gap: 8px; min-height: 8px; }
.tc-slot { width: 64px; aspect-ratio: 63 / 88; border-radius: 6px; cursor: pointer; padding: 0; border: 0; background: none; color: inherit; transition: transform 0.25s var(--spring); }
.tc-slot:hover { transform: translateY(-5px) rotate(-2deg); }
.tc-slot .cardart { --w: 64px !important; }
.tc-slot.empty { display: grid; place-items: center; border: 1.5px dashed rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); }
.ink-dark .tc-slot.empty { border-color: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.04); }
.tc-stats { display: flex; gap: 18px; text-align: right; }
.tc-stats b { display: block; font-size: 22px; line-height: 1.1; }
.tc-stats span { font-size: 11.5px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.08em; }
.tc-back-in { position: relative; flex: 1; display: flex; align-items: center; gap: 22px; }
.tc-qr { flex: none; width: 44%; aspect-ratio: 1; background: #fff; border-radius: 14px; padding: 10px; display: grid; place-items: center; color: #555; font-size: 13px; text-align: center; }
.tc-qr svg { width: 100%; height: 100%; }
.tc-back-txt { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.tc-back-txt > span:not(.tc-brand) { opacity: 0.85; }
.tc-code { font: 600 24px/1 var(--mono, ui-monospace, monospace); letter-spacing: 0.04em; }
.tc-back .btn { color: inherit; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); }
.ink-dark .tc-back .btn { border-color: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.06); }

/* the stage: your card big in the middle, lit in its own colour, partner Pokémon on the floor beside it */
.tc-head { margin-bottom: 0; }
.stage { --tc: #2b3a55; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 34px 0 46px; transition: transform 0.35s var(--ease); }
.stage-glow { position: absolute; left: 50%; top: 46%; width: min(900px, 96%); height: 76%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tc), transparent 55%), transparent); filter: blur(30px); opacity: 0.9; }
.stage-floor { position: absolute; left: 50%; bottom: 22px; width: min(860px, 94%); height: 54px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--shadow-rgb), 0.28), transparent); }
.stage-card { position: relative; z-index: 1; width: min(640px, 100%); perspective: 1400px; }
.stage-card .tcard { width: 100%; }
.stage .tc-face { padding: 24px 26px; border-radius: 26px; }
.stage-mon { position: relative; z-index: 2; flex: none; width: 210px; margin-left: -18px; margin-bottom: -16px; }
.partner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; }
button.partner { cursor: pointer; }
.partner img { width: 200px; height: 200px; image-rendering: pixelated; position: relative; z-index: 1; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.45)); animation: hop 5.5s var(--ease) infinite; transform-origin: 50% 100%; }
.partner > i { width: 120px; height: 18px; margin-top: -30px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); filter: blur(2px); animation: hopShadow 5.5s var(--ease) infinite; }
.partner-name { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--text-2); }
button.partner:hover img { animation: hop 0.6s var(--spring) 1; }
button.partner:hover .partner-name { color: var(--text); }
@keyframes hop { 0%, 82%, 100% { transform: translateY(0) scale(1, 1); } 86% { transform: translateY(2px) scale(1.06, 0.94); } 91% { transform: translateY(-26px) scale(0.97, 1.04); } 96% { transform: translateY(0) scale(1.04, 0.96); } }
@keyframes hopShadow { 0%, 82%, 100% { transform: scale(1); opacity: 1; } 91% { transform: scale(0.7); opacity: 0.55; } }
.partner.empty .partner-q { position: relative; display: grid; place-items: center; width: 200px; height: 200px; }
.partner.empty .partner-q img { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.35)); opacity: 0.85; animation: none; }
.partner.empty .partner-q b { position: absolute; z-index: 2; font: 600 72px/1 var(--display); color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 255, 255, 0.35); animation: qBob 2.4s ease-in-out infinite; }
.partner.empty .partner-name { color: var(--text); }
@keyframes qBob { 50% { transform: translateY(-6px) rotate(-6deg); } }
.stage-actions { display: flex; justify-content: center; gap: 10px; margin: -6px 0 14px; position: relative; z-index: 2; }
.stage-actions.quiet-row { margin: -10px 0 22px; gap: 4px; }
.tc-err { min-height: 22px; text-align: center; color: var(--down); font-size: 14.5px; margin-bottom: 8px; }

/* tap to edit (your own card) */
.tcard [data-edit] { cursor: pointer; position: relative; }
.tcard [data-edit]:hover, .tcard [data-edit]:focus-visible { outline: 1.5px dashed rgba(255, 255, 255, 0.65); outline-offset: 4px; border-radius: 8px; }
.ink-dark .tcard [data-edit]:hover, .ink-dark [data-edit]:focus-visible { outline-color: rgba(0, 0, 0, 0.45); }
.tc-av { padding: 0; border: 0; background: none; border-radius: 50% !important; flex: none; }
.tc-av-ed { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }
.tc-bio.add { display: block; margin-top: 8px; padding: 6px 12px; border: 1.5px dashed rgba(255, 255, 255, 0.5); border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: inherit; font: 500 14px/1.2 var(--font); opacity: 0.95; -webkit-line-clamp: unset; }
.ink-dark .tc-bio.add { border-color: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.04); }
.tc-bio-edit { margin-top: 6px; }
.tc-bio-in { width: 100%; resize: none; font: 14.5px/1.38 var(--font); color: inherit; background: rgba(0, 0, 0, 0.25); border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 10px; padding: 8px 10px; outline: none; }
.ink-dark .tc-bio-in { background: rgba(255, 255, 255, 0.5); border-color: rgba(0, 0, 0, 0.3); }
.tc-bio-n { display: block; font-size: 12px; opacity: 0.75; margin-top: 4px; }
.pulse { animation: pulseRing 2.2s ease-out infinite; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(255, 197, 61, 0.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 197, 61, 0); } }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; max-height: min(56vh, 520px); overflow-y: auto; margin-top: 14px; padding: 4px; }
.slot-pick { position: relative; padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; transition: transform 0.2s var(--spring); }
.slot-pick:hover { transform: translateY(-3px); }
.slot-pick .cardart { --w: 100% !important; }
.slot-pick.on { border-color: var(--paper); }
.slot-pick.pinned::after { content: "Pinned"; position: absolute; left: 6px; top: 6px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: rgba(9, 9, 11, 0.85); color: #fff; }
.av-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.av-opt { padding: 3px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.av-opt.on { border-color: var(--paper); }
.av-opt .avatar { width: 64px; height: 64px; }
.av-sprite { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 50%; background: var(--surface-2); }
/* popover + drawer (live on <body>, so a page redraw doesn't close them) */
.pop { position: absolute; z-index: 60; width: 280px; padding: 6px; border-radius: var(--r-md); background: var(--glass-thick); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: 0 24px 48px -16px rgba(var(--shadow-rgb), 0.35); animation: popIn 0.18s var(--ease); }
.pop-h { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.pop-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 5px; background: none; color: var(--text); font: 500 15px/1.25 var(--font); text-align: left; }
button.pop-item { cursor: pointer; }
button.pop-item:hover, button.pop-item:focus-visible { background: var(--surface-2); outline: none; }
.pop-item.on b { color: var(--text); }
.pop-item.locked { color: var(--text-3); }
.pop-item small { display: block; font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.pop-ic { flex: none; width: 16px; display: grid; place-items: center; padding-top: 1px; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } }
.drawer { position: fixed; z-index: 55; top: 0; right: 0; bottom: 0; width: min(360px, 100%); padding: 20px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
  background: var(--glass-thick); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-left: 1px solid var(--glass-edge); box-shadow: -24px 0 48px -20px rgba(var(--shadow-rgb), 0.32); transform: translateX(105%); transition: transform 0.25s var(--ease); }
.drawer.in { transform: none; }
.drawer-h { display: flex; align-items: center; justify-content: space-between; }
.drawer-h h3 { margin: 0; font-size: 20px; }
body.drawer-open .stage { transform: translateX(-160px); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); background: var(--sw); cursor: pointer; display: grid; place-items: center; color: var(--text-2); position: relative; padding: 0; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }
.swatch.custom { background: conic-gradient(#b5442b, #c08a2b, #7a8b2a, #2a7f62, #1f6f8b, #2b3a55, #b5442b); color: #fff; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tc-owned { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 210px; overflow-y: auto; margin-top: 10px; padding: 2px; }
.tc-own { border: 2px solid transparent; border-radius: 8px; padding: 0; background: none; cursor: pointer; }
.tc-own.on { border-color: #fff; }
.tc-own .cardart { --w: 60px !important; }

/* trophy shelf */
.shelf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; max-width: 1180px; margin: 0 auto; }
.shelf.two { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); max-width: 980px; }
.shelf-tile { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 10px; background: var(--surface); backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px); border: 1px solid var(--line); color: inherit; text-decoration: none;
  box-shadow: inset 0 -10px 0 -6px rgba(var(--ink-rgb), 0.032), 0 18px 30px -22px rgba(var(--shadow-rgb), 0.36); }
.shelf-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.shelf-h h3 { margin: 0; font-size: 17px; }
.shelf-h > span { color: var(--text-3); font-size: 14px; }
.shelf-go { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14.5px; font-weight: 500; text-decoration: none; margin-top: auto; }
.shelf-binder { transition: transform 0.3s var(--spring), border-color 0.2s; }
.shelf-binder:hover { transform: translateY(-3px); border-color: var(--line-2); }
.shelf-binder:hover .shelf-go, .shelf-tile a.shelf-go:hover { color: var(--text); }
.shelf-book-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex: 1; }
.mini-book { --cover: #1f2937; position: relative; width: 86px; height: 110px; border-radius: 6px 12px 12px 6px; background-color: var(--cover); flex: none; display: flex; align-items: flex-end; padding: 8px 8px 8px 14px;
  box-shadow: inset 7px 0 0 rgba(0, 0, 0, 0.28), inset -1px 0 0 rgba(255, 255, 255, 0.12), 0 14px 22px -10px rgba(0, 0, 0, 0.8); transform: rotate(-3deg); transition: transform 0.3s var(--spring); }
.shelf-binder:hover .mini-book { transform: rotate(0) translateY(-4px); }
.mini-book span { font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-book img { position: absolute; right: -14px; top: -16px; width: 58px; height: 58px; image-rendering: pixelated; transform: rotate(8deg);
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.mini-book.tex-canvas { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px); }
.mini-book.tex-glitter { background-image: radial-gradient(rgba(255, 255, 255, 0.7) 0.8px, transparent 1.2px); background-size: 8px 8px; }
.mini-book.tex-leather { background-image: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.18), transparent 50%); }
.face-row { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.face-stack { display: flex; padding-left: 10px; }
.face-stack .avatar { margin-left: -10px; box-shadow: 0 0 0 3px var(--paper); transition: transform 0.25s var(--spring); }
.face-stack:hover .avatar { transform: translateY(-3px); }
.face-add { width: 46px; height: 46px; border-radius: var(--r-sm); border: 1.5px dashed var(--line-2); background: var(--surface-2); color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.face-add:hover { border-color: rgba(var(--ink-rgb), 0.525); }
.shelf-facts { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.shelf-facts b { display: block; font-size: 24px; line-height: 1.1; }
.shelf-facts span { font-size: 13.5px; color: var(--text-3); }
.shelf-facts .up span { color: var(--up); }
.tc-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 0; font-size: 14px; color: var(--text-3); }
.tc-privacy a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
/* badge case: gym-badge medals; earned ones are metal, locked ones dim */
.badge-case { display: grid; grid-template-columns: repeat(4, 52px); gap: 12px 14px; justify-content: start; }
.medal { --m1: #8a8f98; --m2: #3c4048; position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: rgba(var(--ink-rgb), 0.3);
  background: rgba(var(--ink-rgb), 0.04); border: 1.5px dashed rgba(var(--ink-rgb), 0.16); outline: none; transition: transform 0.25s var(--spring); }
.medal.on { color: rgba(0, 0, 0, 0.62); border: 0; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85), transparent 34%), linear-gradient(145deg, var(--m1), var(--m2));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.28), inset 0 -4px 6px rgba(0, 0, 0, 0.3), 0 8px 14px -6px rgba(0, 0, 0, 0.8); }
.medal.on::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%); background-size: 260% 100%; background-position: 120% 0; transition: background-position 0.7s var(--ease); pointer-events: none; }
.medal.on:hover::before, .medal.on:focus-visible::before { background-position: -30% 0; }
.medal:hover, .medal:focus-visible { transform: translateY(-3px) rotate(-6deg); }
.medal::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 220px; padding: 6px 10px; border-radius: 4px;
  background: var(--text); border: 0; color: var(--on-text); font-size: 12.5px; font-weight: 500; line-height: 1.3; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 5; }
.medal:hover::after, .medal:focus-visible::after { opacity: 1; transform: translateX(-50%); }
.tone-bronze { --m1: #e2a571; --m2: #8a4f27; } .tone-silver { --m1: #eef1f5; --m2: #8b939e; } .tone-gold { --m1: #ffe08a; --m2: #b27a12; }
.tone-red { --m1: #ff9a7e; --m2: #a5321f; } .tone-green { --m1: #a8eab4; --m2: #2c7a45; } .tone-aqua { --m1: #a6f2e4; --m2: #1c8378; }
.tone-blue { --m1: #a9d6ff; --m2: #2a62a8; } .tone-amber { --m1: #ffcf8a; --m2: #b3651c; }
@media (prefers-reduced-motion: reduce) {
  .fin-holo .tc-shine, .fin-holo .tc-shine::after, .partner img, .partner > i, .partner.empty .partner-q b, .pulse { animation: none; }
  .tcard-inner, .tcard { transition: none; }
}
@media (max-width: 900px) {
  .stage { padding-top: 64px; }
  .stage-mon { position: absolute; right: 2%; top: 0; width: 110px; margin: 0; }
  .partner img, .partner.empty .partner-q { width: 104px; height: 104px; }
  .partner > i { width: 64px; height: 10px; margin-top: -16px; }
  .partner.empty .partner-q b { font-size: 44px; }
  .partner-name { display: none; }
  .shelf, .shelf.two { grid-template-columns: 1fr; }
  body.drawer-open .stage { transform: none; }
}

/* ---------- v0.9 · Friends ---------- */
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px 18px; }
.friend { display: block; transition: transform 0.3s var(--spring); }
.friend:hover { transform: translateY(-4px) rotate(-0.6deg); }
.friend .tcard.mini { max-width: none; }
.req-row { display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 6px; }
.req { flex: none; width: 260px; display: flex; flex-direction: column; gap: 10px; }
.af-show { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.af-qr { width: min(300px, 100%); border-radius: var(--r-md); padding: 14px; }
.af-show .col { align-items: center; max-width: 340px; }
.af-show .tc-code { font-size: 30px; letter-spacing: 0.06em; }
.af-show .row { justify-content: center; flex-wrap: wrap; }
.seg.seg-wide > button { white-space: nowrap; min-width: 0; }
.af-scan { position: relative; border-radius: 8px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.af-scan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-frame { position: absolute; inset: 18% 24%; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 9px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); }
.af-asks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.af-code-in { font: 600 22px/1 var(--mono, ui-monospace, monospace); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.toast-act { pointer-events: auto; margin-left: 6px; }
/* card page · in your area */
.area-n { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 12px; }
.area-n b { font-size: 30px; line-height: 1; }
.area-n span { color: var(--text-2); font-size: 15px; }
.area-note { font-size: 13px; margin-top: 8px; line-height: 1.4; }
.owned-hide { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, rgba(var(--ink-rgb), 0.084)); }

/* ---------- v0.9 · Requests (asks) + request chat ---------- */
.sec-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 19px; }
.ask-card { display: flex; gap: 22px; padding: 20px 22px; margin-bottom: 14px; }
.ask-art { flex: none; cursor: pointer; }
.ask-main { flex: 1; min-width: 0; }
.ask-main h3 { margin: 4px 0 8px; font-size: 22px; }
.ask-offer { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ask-swap { display: flex; gap: 6px; margin-top: 8px; }
.ask-swap span { cursor: pointer; }
.ask-note { margin: 10px 0 0; color: var(--text-2); font-style: italic; }
.ask-from { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14.5px; flex-wrap: wrap; }
.chat-page { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.chat-head { display: flex; gap: 18px; align-items: flex-start; }
/* ---------- collectors in your area ---------- */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.coll { --tc: #2b3a55; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line, rgba(var(--ink-rgb), 0.105));
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc), transparent 72%), rgba(var(--ink-rgb), 0.021) 60%); transition: transform 0.3s var(--spring), border-color 0.2s; }
.coll:hover { transform: translateY(-3px); border-color: rgba(var(--ink-rgb), 0.263); }
.coll-top { display: flex; align-items: center; gap: 10px; }
.coll-top b { display: block; }
.coll-top span { font-size: 13.5px; color: var(--text-3); }
.coll-mon { width: 48px; height: 48px; image-rendering: pixelated; }
.coll-show { display: flex; gap: 6px; }
.coll-show .cardart { --w: 52px !important; }

/* ---------- sort dropdown ---------- */
.sort-dd { position: relative; }
.sort-btn { gap: 8px; }
.sort-btn .sort-k { color: var(--text-3); font-weight: 500; }
.sort-btn b { font-weight: 600; }
.sort-btn svg:last-child { transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.sort-btn[aria-expanded="true"] svg:last-child { transform: rotate(-90deg); }
.sort-list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 45; min-width: 250px; padding: 6px; border-radius: var(--r-md); background: var(--glass-thick); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 48px -16px rgba(var(--shadow-rgb), 0.35); display: flex; flex-direction: column; animation: popIn 0.16s var(--ease); }
.sort-list[hidden] { display: none; }
.sort-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 6px; background: none; font: 500 15.5px/1.2 var(--font); color: var(--text-2); text-align: left; cursor: pointer; white-space: nowrap; }
.sort-opt:hover, .sort-opt:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.sort-opt.on { color: var(--text); font-weight: 600; }
.sort-ck { width: 16px; display: grid; place-items: center; flex: none; }
/* lift whatever holds an open sort list above the cards that follow it */
.glass:has(.sort-list:not([hidden])), .toolbar:has(.sort-list:not([hidden])), section:has(.sort-list:not([hidden])) { position: relative; z-index: 40; }

/* card grids: a fixed number per row. Medium = 7, Large = 5 (fewer on narrower screens) */
.tiles.size-m, .tiles.size-m[style*="--tile-min"], .set-grid.size-m { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tiles.size-l, .tiles.size-l[style*="--tile-min"], .set-grid.size-l { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles.size-m .tile .nm { font-size: 16px; }
.tiles.size-l .tile .nm { font-size: 19px; }
@media (max-width: 1280px) {
  .tiles.size-m, .tiles.size-m[style*="--tile-min"], .set-grid.size-m { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tiles.size-l, .tiles.size-l[style*="--tile-min"], .set-grid.size-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tiles.size-m, .tiles.size-m[style*="--tile-min"], .set-grid.size-m { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.size-l, .tiles.size-l[style*="--tile-min"], .set-grid.size-l { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* languages Roboto/Inter don't cover: their Noto font fills in (loaded by js/i18n.js only when picked) */
:root:lang(ja) { --font: "Inter", "Noto Sans JP", sans-serif; --display: "Roboto", "Noto Sans JP", sans-serif; }
:root:lang(zh-Hans) { --font: "Inter", "Noto Sans SC", sans-serif; --display: "Roboto", "Noto Sans SC", sans-serif; }
:root:lang(zh-Hant) { --font: "Inter", "Noto Sans TC", sans-serif; --display: "Roboto", "Noto Sans TC", sans-serif; }
:root:lang(ko) { --font: "Inter", "Noto Sans KR", sans-serif; --display: "Roboto", "Noto Sans KR", sans-serif; }
:root:lang(th) { --font: "Inter", "Noto Sans Thai", sans-serif; --display: "Roboto", "Noto Sans Thai", sans-serif; line-height: 1.6; }
/* CJK doesn't use letter-spacing or uppercase eyebrows */
:root:lang(ja) *, :root:lang(zh-Hans) *, :root:lang(zh-Hant) *, :root:lang(ko) * { letter-spacing: normal !important; }
/* sits in the page's right gutter, so its right edge lines up with the sign-in panel's */
.ob { position: relative; }
.lang-corner { position: absolute; top: 18px; right: 40px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--r-sm); background: var(--card); backdrop-filter: blur(20px); border: 1px solid var(--line); color: var(--text-2); }
.lang-corner select { border: 0; background: none; font: 500 14.5px var(--font); color: var(--text); outline: none; cursor: pointer; }
@media (max-width: 960px) { .lang-corner { right: 16px; } }

/* trade builder: pick any card you own */
.choose-tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 92px; aspect-ratio: 63 / 88; border: 1.5px dashed var(--line-2); color: var(--text-2); font-size: 13.5px; text-align: center; padding: 8px; border-radius: 6px; transition: border-color 0.2s, color 0.2s; }
.choose-tile:hover, .choose-tile:focus-visible { border-color: var(--text-2); color: var(--text); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 14px; margin-top: 16px; max-height: 56vh; overflow: auto; padding: 2px; }
.pick-tile { all: unset; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; }
.pick-tile.on, .pick-tile:hover { opacity: 1; }
.pick-tile .t { font-size: 14.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-tile .faint { font-size: 13px; }

/* Japanese cards: a small JP tag before the printed name */
.jp-tag { display: inline-block; margin-right: 6px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 16px; vertical-align: 1px; color: var(--text-2); }
.pill.jp { font-weight: 600; }

/* Japanese card showing the English printing's picture (same artwork): marked on the picture */
.en-mark { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 3; padding: 4px 10px; border-radius: 999px; background: rgba(20, 20, 24, 0.72); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.en-mark.sm { bottom: 5%; padding: 1px 6px; font-size: 10px; }
.cardart.hero .en-mark { font-size: 14px; padding: 6px 14px; }

/* Supporter chip: people who chipped in on Ko-fi (supporters.py). Warm gold, quiet, no animation */
.sup-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px 2px 7px; border-radius: 999px; vertical-align: middle;
  background: linear-gradient(180deg, #f6dc8a, #e2b34b); color: #5a3d00; border: 1px solid rgba(150, 105, 10, 0.35);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 18px; white-space: nowrap; }
.sup-chip svg { fill: currentColor; stroke: none; }
.tc-id .sup-chip { margin: 4px 0 0; }

/* "Sample": made-up trainers, shops and posts (isSample in ui.js). Plain and readable, never mistaken for a badge you earn */
.sample-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 0 8px; height: 20px; border-radius: 6px; vertical-align: middle;
  background: rgba(var(--ink-rgb), 0.08); border: 1px dashed rgba(var(--ink-rgb), 0.35); color: var(--text-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
h1 .sample-tag, h1 + .sample-tag, h2 .sample-tag { height: 24px; font-size: 12.5px; }
.ls-type .sample-tag { margin-left: 4px; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); color: #fff; height: 20px; }
.ls-report { align-self: center; margin-top: 2px; padding: 4px 8px; border: 0; background: none; color: var(--text-3); font: inherit; font-size: 13.5px; cursor: pointer; border-radius: 6px; }
.ls-report:hover { color: var(--text-2); background: rgba(var(--ink-rgb), 0.05); }
.sample-note { margin: -4px 0 12px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px dashed rgba(var(--ink-rgb), 0.3);
  background: rgba(var(--ink-rgb), 0.04); color: var(--text-2); font-size: 14.5px; line-height: 1.45; max-width: 560px; }
.set-row[hidden], .btn[hidden] { display: none; }

/* ---------- Send feedback: guided pop-up + the owner's inbox (feedback.js) ---------- */
.fb-steps { display: flex; gap: 6px; margin: -6px 0 18px; }
.fb-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-2); transition: background 0.3s var(--ease); }
.fb-steps i.on { background: var(--water); }
.fb-sub { margin: -8px 0 16px; }
.fb-label { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin: 18px 0 8px; }
.fb-label .faint { font-weight: 400; }
.fb-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fb-face { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; transition: transform 0.25s var(--spring), border-color 0.2s, background 0.2s; }
.fb-face .e { font-size: 28px; line-height: 1; filter: grayscale(0.55); opacity: 0.8; transition: filter 0.2s, opacity 0.2s, transform 0.3s var(--spring); }
.fb-face .l { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.fb-face:hover .e { filter: none; opacity: 1; transform: scale(1.12); }
.fb-face.on { border-color: var(--electric); background: rgba(255, 197, 61, 0.16); color: var(--text); }
.fb-face.on .e { filter: none; opacity: 1; transform: scale(1.18); }
.fb-kinds { display: flex; flex-direction: column; gap: 6px; }
.fb-kind, .fb-picked, .fb-drop { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--spring); }
.fb-kind:hover, .fb-drop:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateX(2px); }
.fb-kind.on { border-color: var(--water); }
.fb-kind .e, .fb-picked .e, .fb-recap .e { font-size: 22px; line-height: 1; }
.fb-kind b, .fb-drop b { display: block; font-weight: 600; }
.fb-kind .s, .fb-drop .s { display: block; font-size: 14px; color: var(--text-2); }
.fb-kind > svg { color: var(--text-2); }
.fb-picked { padding: 8px 12px; margin-bottom: 4px; }
.fb-picked .faint { margin-left: auto; font-size: 14px; text-decoration: underline; }
.fb-q { display: block; }
.fb-q textarea { height: auto; padding: 10px 14px; resize: vertical; min-height: 64px; }
.fb-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-modal .chip { white-space: nowrap; }
.fb-chips { gap: 6px; }
.fb-modal .chip { height: 34px; padding: 0 12px; font-size: 14.5px; }
.fb-drop { border-style: dashed; color: var(--text-2); }
.fb-drop > svg { flex: none; }
.fb-shot { display: flex; align-items: flex-end; gap: 10px; }
.fb-shot img { max-width: 60%; max-height: 160px; border: 1px solid var(--line-2); display: block; }
.fb-foot { justify-content: space-between; gap: 10px; margin-top: 22px; }
.fb-recap { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); background: var(--surface); }
.fb-recap .faint { font-size: 14px; }
.fb-contact { margin-top: 14px; color: var(--text); }
.fb-note { font-size: 14px; margin-top: 8px; }
.fb-thanks { text-align: center; padding: 6px 0 4px; }
.fb-thanks .e { font-size: 56px; line-height: 1; animation: pop 0.6s var(--spring) both; }
.fb-thanks h3 { margin: 14px 0 6px; }
.fb-thanks .btn { margin-top: 18px; min-width: 140px; justify-content: center; }
.fb-modal .modal-h:has(h2:empty) { margin-bottom: 0; }
.fb-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 14px; }
.fb-avg { display: flex; align-items: center; gap: 10px; }
.fb-avg .e { font-size: 34px; line-height: 1; }
.fb-avg b { font-size: 20px; }
.fb-sum .chip b { margin-left: 4px; font-weight: 600; }
.fb-rate { font-size: 22px; line-height: 1; }
.fb-answers { display: grid; gap: 10px; margin: 12px 0 0; }
.fb-answers .faint { font-size: 13.5px; }
.fb-answers p, .fb-text { margin: 2px 0 0; white-space: pre-wrap; }
.fb-text { margin: 12px 0 0; }
.fb-loves { margin: 10px 0 0; }
.fb-shot-slot { margin-top: 12px; }
.fb-shot-img { max-width: min(420px, 100%); max-height: 300px; border: 1px solid var(--line-2); cursor: zoom-in; display: block; }
.fb-item.done { opacity: 0.6; }
@media (max-width: 960px) { .fb-face .l { font-size: 11px; } .fb-face .e { font-size: 26px; } }

/* Support holoquest: sidebar link (full width under the tools) and the one-time Home card */
.side-tools .side-tool.support, .side-tools .side-tool.wide { grid-column: 1 / -1; text-decoration: none; }
.side-tools .side-tool.support svg { color: #c99a2e; }
.side-tool[hidden], .support-ask[hidden] { display: none; }
.support-ask h3 svg { color: #c99a2e; vertical-align: -2px; margin-right: 4px; }

/* ---------- admin dashboard (#/admin, admins only) ---------- */
.ad-tabs { flex-wrap: wrap; }
.ad-tabs .ad-count { font-variant-numeric: tabular-nums; color: var(--text-3); font-weight: 600; }
#adBody { transition: opacity 0.2s; }
.ad-attn { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ad-attn a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; color: var(--text);
  background: rgba(255, 176, 60, 0.14); border: 1px solid rgba(214, 140, 30, 0.35); font-weight: 600; font-size: 15px; }
.ad-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 1360px) { .ad-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-kpi { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px 46px; border-radius: var(--r-md, 14px); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); }
.ad-kpi > span { color: var(--text-2); font-size: 14px; }
.ad-kpi > b { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.ad-kpi > em { font-style: normal; color: var(--text-3); font-size: 13px; }
.ad-kpi .ad-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38px; }
.ad-delta { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-3); }
.ad-delta span { font-weight: 400; }
.ad-delta.up { color: #2f9f63; }
.ad-delta.down { color: #d9503f; }
.ad-grid { gap: 16px; margin-bottom: 16px; }
.ad-panel .panel-h { margin-bottom: 8px; }
.ad-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ad-line span { color: var(--text-2); }
.ad-line b { font-weight: 600; text-align: right; }
.ad-sub { margin: 16px 0 8px; color: var(--text-3); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ad-sub .faint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ad-note { font-size: 13.5px; margin: 10px 0 0; }
.ad-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ad-mini > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(var(--ink-rgb), 0.04); }
.ad-mini span { color: var(--text-3); font-size: 13px; }
.ad-mini b { font-size: 17px; font-weight: 600; }
/* charts */
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; font-size: 13.5px; color: var(--text-2); }
.ch-legend i, .ch-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.ch-legend b { color: var(--text); font-weight: 600; margin-left: 2px; }
.ch-plot { position: relative; cursor: crosshair; }
.ch-plot svg { display: block; width: 100%; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-max { position: absolute; top: -2px; left: 0; font-size: 11.5px; color: var(--text-3); pointer-events: none; }
.ch-max.r { left: auto; right: 0; }
.ch-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(var(--ink-rgb), 0.35); pointer-events: none; }
.ch-tip { position: absolute; top: 8px; transform: translateX(-50%); min-width: 140px; padding: 8px 10px; border-radius: 8px; pointer-events: none; z-index: 2;
  background: var(--surface-3, #fff); border: 1px solid var(--line-2, var(--line)); box-shadow: 0 6px 20px rgba(var(--shadow-rgb), 0.2); font-size: 13px; }
.ch-tip > b { display: block; margin-bottom: 4px; }
.ch-tip div { display: flex; align-items: center; gap: 0; color: var(--text-2); }
.ch-tip div b { margin-left: auto; padding-left: 12px; color: var(--text); font-weight: 600; }
.ch-x { display: flex; justify-content: space-between; margin-top: 6px; color: var(--text-3); font-size: 12.5px; }
.ad-hbars { display: flex; flex-direction: column; gap: 6px; }
.ad-hbar { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; align-items: center; gap: 10px; font-size: 14.5px; }
.ad-hbar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ad-hbar .l a { color: var(--text); text-decoration: none; }
.ad-hbar .l a:hover { text-decoration: underline; }
.ad-hbar .t { height: 10px; border-radius: 5px; background: rgba(var(--ink-rgb), 0.06); overflow: hidden; }
.ad-hbar .t i { display: block; height: 100%; border-radius: 5px; }
.ad-hbar b { font-weight: 600; min-width: 2ch; text-align: right; }
.ad-hbar b em { font-style: normal; font-weight: 400; color: var(--text-3); margin-left: 6px; font-size: 13px; }
.ad-heat { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 3px; align-items: center; }
.ad-heat i { aspect-ratio: 1; border-radius: 3px; background: rgba(var(--ink-rgb), 0.06); }
.ad-heat .dl { font-size: 12.5px; color: var(--text-3); }
.ad-heat .hl { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.ad-funnel { display: flex; flex-direction: column; gap: 12px; }
.ad-fstep { font-size: 15px; }
.ad-fstep b em { font-style: normal; font-weight: 400; color: var(--text-3); margin-left: 6px; }
.ad-fstep .t { height: 14px; margin-top: 5px; border-radius: 6px; background: rgba(var(--ink-rgb), 0.06); overflow: hidden; }
.ad-fstep .t i { display: block; height: 100%; border-radius: 6px; background: var(--foil); }
.ad-drop { font-size: 12.5px; margin-top: 3px; }
.ad-cohort td, .ad-cohort th { text-align: right; }
.ad-cohort td:first-child, .ad-cohort th:first-child { text-align: left; }
.ad-hours { display: flex; align-items: flex-end; gap: 2px; height: 70px; }
.ad-hours i { flex: 1; border-radius: 2px 2px 0 0; background: rgba(var(--ink-rgb), 0.1); }
.ad-err { font-family: var(--mono); font-size: 13px; word-break: break-word; }
.ad-table { overflow-x: auto; }
/* activity feed + people */
.ad-feedbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ad-feed { padding-top: 6px; }
.ad-feedday { margin: 14px 0 4px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.ad-feedday:first-child { margin-top: 0; }
.ad-feedrow { display: grid; grid-template-columns: 92px 10px auto 1fr; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.ad-feedrow time { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.ad-feedrow .dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.ad-feedrow a { color: var(--text); text-decoration: none; }
.ad-feedrow span { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.ad-people td { vertical-align: top; white-space: nowrap; }
.ad-people td .faint { font-size: 13px; }
.ad-people tr.clickable:hover td { background: rgba(var(--ink-rgb), 0.04); }
.ad-flags .pill { margin: 0 4px 4px 0; }
@media (max-width: 720px) {
  .ad-feedrow { grid-template-columns: 70px 8px 1fr; }
  .ad-feedrow span { grid-column: 3; }
  .ad-hbar { grid-template-columns: minmax(70px, 40%) 1fr auto; }
}