/* ============================================================
   Rare Foil — a collector's-card aesthetic for the Gauntlet app.
   Graphite/paper neutrals, a restrained holo-foil accent spent
   only on primary actions, Fraunces for headings, Work Sans for
   body copy and numbers (tabular figures), Space Mono only for codes people
   read out or type, where 0/O and 1/I must not be confused (.code).
   ============================================================ */

:root {
  --bg: #f2f0f5;
  --card: #ffffff;
  --card-2: #f6f4f8;
  --text: #181620;
  --muted: #6b6578;
  --border: #dad6e2;

  --violet: #6e54c9;
  --violet-strong: #5a41b3;
  --felt: #2f9e83;
  --danger: #c24b5a;
  --info: #3f76b8;
  --on-accent: #ffffff;

  --foil: linear-gradient(120deg, #8b5cf6, #22d3c7, #d4a73a);

  --shadow: 0 1px 0 rgba(24,22,32,.04), 0 10px 24px -16px rgba(24,22,32,.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111014;
    --card: #1a1820;
    --card-2: #221f29;
    --text: #f1eef6;
    --muted: #948fa0;
    --border: #2c2836;

    --violet: #a894f0;
    --violet-strong: #bfacf5;
    --felt: #4fd1ac;
    --danger: #e0717e;
    --info: #7fb2ec;
    --on-accent: #14101c;

    --shadow: 0 1px 0 rgba(0,0,0,.4), 0 14px 28px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg: #111014;
  --card: #1a1820;
  --card-2: #221f29;
  --text: #f1eef6;
  --muted: #948fa0;
  --border: #2c2836;

  --violet: #a894f0;
  --violet-strong: #bfacf5;
  --felt: #4fd1ac;
  --danger: #e0717e;
  --info: #7fb2ec;
  --on-accent: #14101c;

  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 14px 28px -16px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* Tell the browser which theme it is painting, so native scrollbars, select
   dropdowns and any control we have not styled follow the page instead of
   defaulting to light. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Links inherit the accent. Without this a plain <a> gets the browser's
   default #0000EE, which on the dark background is close to unreadable. */
a { color: var(--violet); }
a:hover { color: var(--violet-strong); }
body {
  margin: 0;
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.mono {
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
}

.center-screen {
  min-height: 100vh;
  display: flex;
  /* Column, so the sign-in card's legal links sit under it rather than
     becoming a second item beside it in a row. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 64px;
}

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
.brand {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  cursor: pointer;
}
.icon-btn {
  background: none; border: none; color: var(--text); font-size: 20px; cursor: pointer;
  padding: 4px 8px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
/* Hero cards — the one place the foil accent is spent (join actions, the
   current event's own summary). Everything else stays quiet graphite. */
.card.hero {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--foil) border-box;
}
.auth-card { width: 100%; max-width: 360px; }
.card h2 {
  margin: 24px 0 6px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.005em;
}
/* App cards lead with their heading; article pages run h2s mid-document. */
.card h2:first-child { margin-top: 0; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
textarea, .decklist { font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--violet); outline-offset: 1px; }
#joinCode { font-family: "Space Mono", ui-monospace, monospace; }

.field-label { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.checkbox { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; }
.checkbox input { width: auto; margin: 0; }

.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin: 4px 4px 4px 0;
}
.btn.primary {
  background-image: var(--foil);
  border-color: transparent;
  color: #14101c;
}
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn-link {
  background: none; border: none; color: var(--violet);
  font-size: 13px; cursor: pointer; padding: 4px; text-decoration: underline;
  font-family: "Work Sans", sans-serif;
}

.btn.google {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: #fff; color: #1f1f1f; border-color: #dadce0;
}
.btn.google:hover { background: #f5f5f5; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.google:disabled:hover { background: #fff; }

.divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row.space-between { justify-content: space-between; align-items: center; }
.mt { margin-top: 12px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }

.error-box {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  margin: 8px 0;
}
.success-box {
  background: color-mix(in srgb, var(--felt) 14%, transparent);
  border: 1px solid var(--felt);
  color: var(--felt);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  margin: 8px 0;
}

.list { display: flex; flex-direction: column; gap: 8px; }
.list-item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
}
.list-item.clickable { cursor: pointer; }
.list-item.clickable:hover { border-color: var(--violet); }

.stat-row { display: flex; gap: 16px; margin-top: 12px; }
.stat { text-align: center; flex: 1; }
.stat-value {
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 700;
}
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.table th {
  color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  font-family: "Work Sans", sans-serif;
}
.me-row { background: color-mix(in srgb, var(--violet) 12%, transparent); font-weight: 700; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 600;
  background: var(--card-2); border: 1px solid var(--border); color: var(--text);
}
.badge.ok { background: color-mix(in srgb, var(--felt) 16%, transparent); border-color: transparent; color: var(--felt); }
.badge.warn { background: color-mix(in srgb, var(--info) 16%, transparent); border-color: transparent; color: var(--info); }
.badge.bad { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: transparent; color: var(--danger); }

.join-code {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 18px; font-weight: 700; letter-spacing: 2px;
  padding: 2px 10px; background: var(--card-2); border-radius: 8px;
}

.decklist {
  white-space: pre-wrap; background: var(--card-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px; font-size: 13px; max-height: 240px; overflow-y: auto;
}

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px);
  z-index: 2000; /* above the panels, which sit at 1000 */
  background: var(--card); border: 1px solid var(--border);
  padding: 10px 16px; border-radius: 10px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: all 0.2s ease;
  max-width: 90vw; text-align: center;
  box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--danger); color: var(--danger); }

details summary { cursor: pointer; color: var(--violet); font-weight: 600; margin-bottom: 8px; }

/* Quiet footer — the legal disclaimer has to be reachable, not prominent. */
.app-footer {
  text-align: center;
  padding: 4px 16px 28px;
  margin-top: -48px;
}
.app-footer .btn-link, .app-footer a {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  padding: 4px 2px;
}
.app-footer .btn-link:hover,
.app-footer a:hover { color: var(--violet); text-decoration: underline; }
.footer-sep { color: var(--muted); font-size: 12px; opacity: .5; }
/* Donations sit on their own line so they read as an offer, not another link. */
.footer-support { margin-top: 6px; }
.app-footer .footer-support a { color: var(--violet); }

/* Legal/about pages read as prose, not UI */
.card p { line-height: 1.6; }
.card p + p { margin-top: 10px; }
.card a { color: var(--violet); }

/* ---- Static content pages (guides, about, legal) ---- */
.static-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.static-topbar .brand { text-decoration: none; color: var(--text); }
.static-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.static-nav a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600;
}
.static-nav a:hover { color: var(--violet); }
.static-nav a:last-child { color: var(--violet); }

.static-footer {
  max-width: 640px; margin: 0 auto; padding: 24px 16px 48px;
  border-top: 1px solid var(--border);
}
.static-footer nav { margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.static-footer nav a { color: var(--muted); text-decoration: none; }
.static-footer nav a:hover { color: var(--violet); text-decoration: underline; }
.static-footer p { font-size: 11.5px; line-height: 1.5; }

.card h1 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px; font-weight: 600; margin: 0 0 14px; line-height: 1.2;
}
a.list-item { text-decoration: none; color: inherit; }

/* Guide articles */
.guide-body h2, .guide-body h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  margin: 24px 0 6px;
}
.guide-body h2:first-child, .guide-body h3:first-child { margin-top: 6px; }
.guide-body p { font-size: 14.5px; }
.guide-body ul { margin: 10px 0; padding-left: 20px; }
.guide-body li { font-size: 14.5px; line-height: 1.6; margin-bottom: 6px; }
.guide-body em { color: var(--muted); font-style: normal; }

.link-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.link-row a {
  font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--card-2);
  color: var(--text);
}
.link-row a:hover { border-color: var(--violet); color: var(--violet); }

/* Donation call — present, never pushy */
.link-row a.support-primary {
  background-image: var(--foil);
  border-color: transparent;
  color: #14101c;
  font-weight: 700;
}
.link-row a.support-primary:hover { filter: brightness(1.05); color: #14101c; }

/* The Support page: two equal offers, side by side on anything but a phone. */
.support-buttons {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 18px 0 10px;
}
.support-buttons .btn { flex: 1 1 200px; text-align: center; text-decoration: none; }
.support-buttons a.support-primary {
  background-image: var(--foil);
  border-color: transparent;
  color: #14101c;
  font-weight: 700;
}
.support-buttons a.support-primary:hover { filter: brightness(1.05); color: #14101c; }

/* Deck card-search picker */
.search-wrap { position: relative; }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 5;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); max-height: 240px; overflow-y: auto;
}
.suggestion {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; font-size: 14px; cursor: pointer;
}
.suggestion:hover, .suggestion:active { background: var(--card-2); }
.suggestion + .suggestion { border-top: 1px solid var(--border); }
.suggestion-thumb {
  width: 38px; height: 53px; object-fit: cover; object-position: top;
  border-radius: 3px; flex-shrink: 0; background: var(--card-2);
}
.suggestion-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.suggestion-text strong, .suggestion-text span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-peek {
  background: none; border: none; color: var(--muted);
  font-size: 17px; cursor: pointer; padding: 4px 6px; flex-shrink: 0;
}
.suggestion-peek:hover { color: var(--violet); }

.deck-list { display: flex; flex-direction: column; margin-top: 4px; }
.deck-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.deck-row:last-child { border-bottom: none; }
.deck-row-card {
  display: flex; align-items: center; gap: 9px;
  flex: 1; min-width: 0;
  background: none; border: none; padding: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.deck-row-card:hover .deck-row-name { color: var(--violet); }
.deck-thumb {
  width: 44px; height: 62px; object-fit: cover; object-position: top;
  border-radius: 3px; flex-shrink: 0; background: var(--card-2);
}
.deck-thumb-empty { display: inline-block; border: 1px dashed var(--border); }
.deck-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Delete on the far left and the lock on the far right, well apart: side by
   side, one was too easily tapped for the other. */
.deck-row-remove {
  background: none; border: none; color: var(--danger); line-height: 1;
  cursor: pointer; padding: 4px 6px; display: inline-flex; align-items: center;
}
.deck-row-keep {
  background: none; border: none; color: var(--felt); cursor: pointer; padding: 4px 6px;
  display: inline-flex; align-items: center;
}
.deck-row.kept .deck-row-card { opacity: 0.55; }

/* Swipe right to keep, left to delete: the row slides over a coloured hint. */
.deck-row-wrap { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.deck-row-wrap:last-child { border-bottom: none; }
.deck-row-wrap .deck-row { position: relative; z-index: 1; background: var(--card); border-bottom: none; touch-action: pan-y; }
.swipe-hint {
  position: absolute; inset: 0; display: none; align-items: center; gap: 8px;
  padding: 0 16px; font-weight: 600; color: #fff;
}
.swipe-keep { background: var(--felt); justify-content: flex-start; }
.swipe-del { background: var(--danger); justify-content: flex-end; }
.deck-row-wrap.swiping-keep .swipe-keep, .deck-row-wrap.swiping-del .swipe-del { display: flex; }

/* Keep some copies back, share the rest. */
.keep-split {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 0 10px 40px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.keep-split p { flex-basis: 100%; margin: 0; }
.keep-split .btn { margin-left: auto; }

.undo-bar {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); z-index: 2000;
  display: flex; align-items: center; gap: 14px; max-width: 92vw;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 8px 8px 16px; font-size: 14px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: all 0.2s ease;
}
.undo-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-bar button {
  flex-shrink: 0; background: var(--violet); color: var(--on-accent); border: none;
  border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;
}
.undo-bar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---- Card market ---- */
.market-suggest { margin-top: 6px; }
.market-suggest button { display: block; width: 100%; text-align: left; padding: 8px 10px;
  background: none; border: none; border-bottom: 1px solid var(--border); color: inherit; cursor: pointer; }
.market-shop { display: flex; flex-direction: column; gap: 6px; }
.market-shop .row { gap: 8px; flex-wrap: wrap; }
/* Five tabs on a phone: scroll sideways rather than squash. */
.seg.seg-scroll { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; gap: 8px; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll .btn { flex: 0 0 auto; }
.market-bars { display: flex; align-items: flex-end; gap: 4px; height: 80px; margin-top: 8px; }
.market-bars span { flex: 1; background: var(--violet); border-radius: 3px 3px 0 0; min-height: 2px; }
.market-bars-labels { display: flex; gap: 4px; font-size: 10px; color: var(--muted); }
.market-bars-labels span { flex: 1; text-align: center; }
.stock-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.stock-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-row input { width: 64px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.seg button[aria-pressed="true"] { background: var(--violet); color: var(--on-accent); border-color: var(--violet); }
.qty-stepper {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 100px;
  padding: 3px 6px; font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; font-size: 13px;
}
.qty-stepper button {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: var(--card); color: var(--text); cursor: pointer;
  font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.qty-stepper span { min-width: 14px; text-align: center; }

/* Card detail overlay */
.card-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(8, 7, 11, 0.82);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px 16px; overflow-y: auto;
}
.card-overlay-panel {
  position: relative;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px; max-width: 420px; width: 100%; margin: auto;
}
.card-overlay-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: var(--muted);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.card-overlay-close:hover { color: var(--text); }
/* Full card image, unmodified — the printed copyright and artist credit
   stay legible, per Scryfall's image guidelines. */
.card-overlay-img {
  display: block; width: 100%; max-width: 340px; margin: 4px auto 14px;
  border-radius: 4.75% / 3.5%;
}
/* The prices in a card's detail view: the big figure over the markets. */
.card-detail-prices {
  margin: 12px 0; padding: 10px 12px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 10px;
}
.card-price-main {
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; margin-bottom: 4px;
}
.card-price-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 2px 0; }
.card-flavour { font-style: italic; color: var(--muted); font-size: 14px; margin: 6px 0 10px; }
.card-oracle {
  white-space: pre-wrap; font-family: "Work Sans", sans-serif; font-size: 14px;
  line-height: 1.55; background: var(--card-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px; margin: 10px 0;
}

/* Life counter — restyled to match Rare Foil: graphite halves, a thin
   foil-gradient seam at the divider instead of a flat purple gradient. */
.life-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0c0b0f;
  overscroll-behavior: none;
  z-index: 50;
}
.life-half {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, #201c2c 0%, #0c0b0f 70%);
}
.life-top { transform: rotate(180deg); }
.life-number {
  font-family: "Work Sans", sans-serif;
  font-size: min(26vh, 24vw);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #f1eef6;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.life-zone {
  position: absolute;
  top: 0; bottom: 0; width: 50%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.life-zone-left { left: 0; }
.life-zone-right { right: 0; }
.life-zone:active { background: rgba(255,255,255,0.06); }
.life-divider {
  flex-shrink: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0b0f;
  position: relative;
  z-index: 3;
}
.life-divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--foil);
}
.life-divider::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--foil);
}
.life-reset {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #3a3648;
  background: #1a1820;
  color: #f1eef6;
  font-size: 18px;
  cursor: pointer;
}
.life-back {
  position: absolute;
  bottom: 10px; left: 10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 16px;
  z-index: 4;
}
@keyframes pulsePlus { 0% { color: #4fd1ac; transform: scale(1.08); } 100% { color: #f1eef6; transform: scale(1); } }
@keyframes pulseMinus { 0% { color: #e0717e; transform: scale(1.08); } 100% { color: #f1eef6; transform: scale(1); } }
.pulse-plus { animation: pulsePlus 0.3s ease; display: inline-block; }
.pulse-minus { animation: pulseMinus 0.3s ease; display: inline-block; }

/* --- Life counter: match mode --- */
/* Names sit above each total so a phone passed across the table is never
   ambiguous about whose life is whose. Inherits the half's rotation. */
.life-name {
  color: #f1eef6;
  z-index: 2;
  pointer-events: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.25rem;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.life-done {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}
.life-done:active { background: rgba(255,255,255,0.08); }
/* Deliberately unrotated: whoever is deciding the result holds the phone.
   The [hidden] rule is load-bearing: a class setting display:flex outranks
   the UA stylesheet's [hidden]{display:none}, so without it the overlay
   shows permanently — including on the plain, non-match life counter. */
.life-result[hidden] { display: none; }
.life-result {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  padding: 1.25rem;
}
.life-result-card {
  color: #f1eef6;
  width: min(22rem, 100%);
  background: var(--surface, #1b1a1f);
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
  display: grid;
  gap: 0.5rem;
}
.life-result-card h2 { margin: 0; }

/* ============================================================
   Screen sizes. The shop runs an event from a laptop with an
   iPad alongside while players are on phones, so all three have
   to work properly rather than one being a scaled copy.

   The phone rules above stay the default. Everything here only
   widens or relaxes as the screen allows.

   Note the "#app" scope on the width rules: the app shell and the
   static prose pages (guides, about, terms) share the .container
   class, but they want opposite things. The app should use a big
   screen; an article should not, because long lines of prose are
   harder to read. Only the app is widened.
   ============================================================ */

/* The organizer's player list is six columns wide and used to push the
   whole page sideways on a phone. Scroll the table on its own instead.
   Deliberately not solved with overflow-x:hidden on body, which would
   break every position:sticky element on the page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .table { min-width: 400px; }

/* --- Tablet portrait and up --- */
@media (min-width: 700px) {
  #app .container { max-width: 800px; padding: 24px 24px 72px; }
  .topbar { padding: 14px 24px; }
  .card { padding: 22px; border-radius: 18px; }
  .card h1 { font-size: 30px; }
  .card h2 { font-size: 20px; }
  .table { font-size: 14px; }
  .table th, .table td { padding: 10px 8px; }
  .auth-card { max-width: 400px; }
  /* Articles widen a little, then stop. */
  .container { max-width: 720px; }
  .static-footer { max-width: 720px; }
}

/* --- iPad landscape --- */
@media (min-width: 1024px) {
  /* A single column of cards should not stretch the whole way across a
     laptop, so ordinary screens stop here. */
  #app .container { max-width: 900px; padding: 28px 32px 80px; }
  /* The organizer's screen is the exception: its player table wants room. */
  #app .container.split { max-width: 1010px; }
  .topbar { padding: 16px 32px; }
}

/* --- Laptop. Two columns start here rather than at 1024, because splitting
       an iPad's landscape width would leave the player table narrower than
       it is on the same iPad held in portrait. --- */
@media (min-width: 1200px) {
  #app .container.split {
    max-width: 1200px;
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
  }
  /* Join code, QR and the start/finish buttons stay on screen while the
     organizer scrolls down the player list. */
  #app .container.split > .col-side {
    position: sticky;
    top: 92px;
  }
  #app .container.split > .col-main { min-width: 0; }

  /* With room to breathe, the player list gets a readable table. */
  #app .container.split .table { font-size: 14.5px; }
  #app .container.split .table th,
  #app .container.split .table td { padding: 11px 10px; }
}

/* --- Large laptop and desktop monitor --- */
@media (min-width: 1500px) {
  #app .container { max-width: 960px; }
  #app .container.split {
    max-width: 1320px;
    grid-template-columns: 400px minmax(0, 1fr);
  }
}

/* A player name breaking across two lines makes the list far harder to scan
   than a table that scrolls, so cells hold their line and .table-wrap takes
   the strain. */
.table th, .table td { white-space: nowrap; }

/* Row actions (Reset / Void on a dispute) stay on one line beside the text
   rather than stacking into a column. */
.list-item > .row { flex-shrink: 0; }

/* Activity rows are a timestamp followed by a sentence, not a label and a
   value, so they read left to right instead of being pushed to the edges. */
.list-item.activity-item {
  justify-content: flex-start;
  gap: 10px;
}

/* --- Touch. An iPad is a big screen with fat fingers, so size the
       targets by input device rather than by width. --- */
@media (pointer: coarse) {
  .btn, select, input[type="text"], input[type="email"],
  input[type="password"], input[type="number"] { min-height: 44px; }
  .btn.small { min-height: 36px; }
  .btn-link { padding: 8px 4px; }
  .icon-btn { padding: 8px 12px; }
  .checkbox input[type="checkbox"] { width: 20px; height: 20px; }
  .list-item { padding-top: 14px; padding-bottom: 14px; }
  /* A hover style on touch sticks after the tap and reads as selection. */
  .list-item.clickable:hover { border-color: var(--border); }
}

/* ============================================================
   Landing page (logged out). Richer than the app screens on
   purpose: this is the one surface that has to sell the format
   to someone who has never heard of it.

   All the decoration is CSS. No Magic card art is used here,
   because Scryfall's terms require the artist and copyright
   credited in the same view, uncropped and unedited, and a
   marketing hero is the wrong place to promise that.
   ============================================================ */

.landing-topbar { justify-content: space-between; }
.landing-topbar .topbar-right { gap: 14px; }

/* --- Hero --- */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 20px 64px;
  border-bottom: 1px solid var(--border);
}
/* A single wash of the foil accent behind the headline, kept faint so the
   type stays the loudest thing on the page. */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 130%;
  background: var(--foil);
  opacity: .13;
  filter: blur(70px);
  pointer-events: none;
}
.lp-hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
  align-items: center;
}
.lp-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lp-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 7vw, 62px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
/* The one word the whole proposition turns on. */
.lp-title em {
  font-style: italic;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-lede {
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
  margin: 0 0 26px;
}
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-btn-lg {
  padding: 14px 24px;
  font-size: 15px;
  border-radius: 12px;
  text-decoration: none;
}
a.lp-btn-lg { display: inline-block; }
.lp-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

/* --- Hero art: a booster pack and the three-losses rule, drawn in CSS --- */
.lp-hero-art { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.lp-pack {
  position: relative;
  width: min(230px, 60vw);
  aspect-ratio: 5 / 7;
  border-radius: 14px;
  background: linear-gradient(160deg, #241f33, #14111c 60%);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.65);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-4deg);
}
.lp-pack-foil {
  position: absolute;
  inset: 0;
  background: var(--foil);
  opacity: .55;
  /* A slow sheen across the wrapper, the way foil catches the light. */
  mask-image: linear-gradient(115deg, transparent 30%, #000 48%, transparent 66%);
  -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 48%, transparent 66%);
  mask-size: 280% 100%;
  -webkit-mask-size: 280% 100%;
  animation: lpSheen 6s ease-in-out infinite;
}
@keyframes lpSheen {
  0%, 100% { mask-position: 120% 0; -webkit-mask-position: 120% 0; }
  50%      { mask-position: -20% 0; -webkit-mask-position: -20% 0; }
}
.lp-pack-label { position: relative; text-align: center; color: #f1eef6; }
.lp-pack-word {
  display: block;
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 700; letter-spacing: .22em;
}
.lp-pack-sub {
  display: block; margin-top: 6px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(241,238,246,.66);
}
.lp-tally { display: flex; align-items: center; gap: 8px; }
.lp-tick {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--muted);
}
.lp-tick.won {
  border-color: transparent;
  background-image: var(--foil);
  color: #14101c;
}
.lp-arrow { color: var(--muted); font-size: 18px; }

/* --- Shared section furniture --- */
.lp-section { max-width: 1100px; margin: 0 auto; padding: 56px 20px; }
.lp-h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 22px;
}
.lp-section p { line-height: 1.6; color: var(--muted); }

/* --- Three steps --- */
.lp-steps { display: grid; gap: 18px; }
.lp-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.lp-step-num {
  display: block;
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  background: var(--foil);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 12px;
}
.lp-step h3, .lp-shop-item h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600; font-size: 19px; margin: 0 0 8px;
}
.lp-step p, .lp-shop-item p { margin: 0; font-size: 14.5px; }

/* --- Self-balancing --- */
.lp-balance-inner { display: grid; gap: 28px; align-items: center; }
.lp-quote-card {
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 28px;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--foil) border-box;
  box-shadow: var(--shadow);
}
.lp-quote {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px; line-height: 1.4; color: var(--text) !important;
  margin: 0 0 14px;
}
.lp-quote-by {
  margin: 0; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

/* --- For shops --- */
.lp-shop { display: grid; gap: 18px; margin-bottom: 28px; }
.lp-shop-item {
  border-left: 2px solid transparent;
  border-image: var(--foil) 1;
  padding: 4px 0 4px 18px;
}

/* --- Closing block --- */
.lp-final { text-align: center; padding-bottom: 72px; }
.lp-final .lp-lede { margin-left: auto; margin-right: auto; }
.lp-final .lp-cta { justify-content: center; }

/* --- Footers and the sign-in card's own links --- */
.landing-footer { margin-top: 0; padding: 28px 20px 40px; border-top: 1px solid var(--border); }
.lp-legal, .auth-legal {
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}
.auth-legal { text-align: center; font-size: 12px; max-width: 360px; }
.auth-legal a { color: var(--muted); text-decoration: none; }
.auth-legal a:hover { color: var(--violet); text-decoration: underline; }
.auth-back {
  display: inline-block;
  margin: 0 0 10px;
  padding-left: 0;
  text-decoration: none;
  color: var(--muted);
}
.auth-back:hover { color: var(--violet); }

/* --- Landing at tablet width and up --- */
@media (min-width: 760px) {
  .lp-hero { padding: 76px 32px 84px; }
  .lp-hero-inner { grid-template-columns: 1.15fr .85fr; gap: 56px; }
  .lp-section { padding: 72px 32px; }
  .lp-steps { grid-template-columns: repeat(3, 1fr); }
  .lp-shop { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .lp-balance-inner { grid-template-columns: 1.1fr .9fr; gap: 48px; }
}

/* Respect a reduced-motion preference: the sheen is decoration, not
   information, so it simply stops. */
@media (prefers-reduced-motion: reduce) {
  .lp-pack-foil { animation: none; }
}

/* ============================================================
   Home. The screen used to be six cards of equal weight with no
   sense of what to do first, so these styles exist to create
   rank: one thing leads, the rest support it.
   ============================================================ */

/* Small label above a heading ("Your event"), so the heading itself can be
   the event name rather than a category. */
.eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The two doors offered to a brand-new account. Stacked on a phone, side by
   side as soon as there is room, with a divider between them. */

/* The code box should look like the main action, not an afterthought. */
.join-row { align-items: center; flex-wrap: nowrap; }
.join-row input {
  flex: 1;
  min-width: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 17px;
  letter-spacing: .18em;
  text-align: center;
}
.join-row .btn { flex-shrink: 0; margin: 6px 0; }

/* ============================================================
   Organizer dashboard. The first run is presented as two steps
   rather than a card that says "you have no shop" next to an
   empty page.
   ============================================================ */

/* Step 2 shown before it can be acted on: visible so the page reads as a
   sequence, dimmed so it is clearly not the thing to do yet. */
.step-ahead { opacity: .62; }
.step-ahead h2 { color: var(--muted); }

/* The two numbers that actually define how a night feels, given equal weight
   and room for their explanations. Everything else is behind Advanced. */
.two-numbers { display: grid; gap: 4px 20px; margin-top: 4px; }
.two-numbers p { margin: 2px 0 0; }
@media (min-width: 560px) {
  .two-numbers { grid-template-columns: 1fr 1fr; }
}

/* Collapsed sections should read as a control, not as stray underlined text. */
details > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--violet);
  padding: 6px 0;
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "+ ";
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
}
details[open] > summary::before { content: "\2212 "; }
details.adv > summary { color: var(--muted); }

/* ============================================================
   Player event view. The "next step" strip answers the question
   a player actually has on joining, which is what to do first.
   ============================================================ */

.next-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.next-step-num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 14px;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
/* Something is waiting on this player, so the marker earns the accent. */
.next-step.urgent .next-step-num {
  background-image: var(--foil);
  border-color: transparent;
  color: #14101c;
}
.next-step strong { font-size: 15px; }

/* ============================================================
   Admin overview. Read on a phone as often as a laptop, so
   nothing here is a wide table: rows expand in place instead of
   scrolling sideways.
   ============================================================ */

.admin-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.admin-total { text-align: center; }
@media (min-width: 700px) {
  .admin-totals { grid-template-columns: repeat(6, 1fr); }
}

.adm-tabs { display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.adm-tab {
  flex: 1 1 auto;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--muted);
  font-family: "Work Sans", sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.adm-tab.on { color: var(--text); border-color: var(--violet); }

.adm-row { border-bottom: 1px solid var(--border); }
.adm-row:last-child { border-bottom: 0; }
.adm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 2px;
  cursor: pointer;
}
.adm-title { min-width: 0; }
/* Long emails and shop names truncate rather than forcing the row wider. */
.adm-title strong,
.adm-title .muted {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.adm-chev {
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
  color: var(--muted); width: 12px; text-align: center;
}
.adm-row.open .adm-head strong { color: var(--violet); }
.adm-detail { padding: 0 2px 16px; }

.adm-kv { display: grid; grid-template-columns: 108px 1fr; gap: 6px 12px; margin: 0 0 14px; }
.adm-kv dt { color: var(--muted); font-size: 12px; }
.adm-kv dd { margin: 0; font-size: 13.5px; word-break: break-word; }

.adm-maint {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.adm-maint h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600; font-size: 16px; margin: 0 0 4px;
}
.adm-maint .mono { padding: 2px 0; }

/* Venue type picker: shop or playgroup, chosen before the name is asked for. */
.venue-choice { display: grid; gap: 10px; margin: 10px 0 14px; }
@media (min-width: 520px) {
  .venue-choice { grid-template-columns: 1fr 1fr; }
}
.venue-opt {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-family: "Work Sans", sans-serif;
  cursor: pointer;
}
.venue-opt strong { font-size: 15px; }
.venue-opt.on {
  border-color: transparent;
  background:
    linear-gradient(var(--card-2), var(--card-2)) padding-box,
    var(--foil) border-box;
  border: 1px solid transparent;
}

/* The badge is only worth having if its absence is legible, so unverified
   shops say so in plain words rather than simply lacking a tick. */
.verified-badge { vertical-align: middle; }

/* ============================================================
   Alpha of the Pack. The night's bragging rights, not a
   ranking, so it is a chip beside a name rather than a trophy
   screen of its own.
   ============================================================ */

.alpha-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--foil) border-box;
  font-family: "Work Sans", sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.alpha-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 12px 0 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-2), var(--card-2)) padding-box,
    var(--foil) border-box;
}
.alpha-crown {
  font-size: 26px;
  background: var(--foil);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Why a high-rated player has no crown: they have not played enough yet.
   Without this the top of the standings looks like it lost an argument. */
.ineligible { margin-left: 6px; white-space: nowrap; opacity: .75; }

/* Card values sit beside a card name, quiet enough not to compete with it. */
.price-tag {
  margin-left: auto;
  padding-left: 10px;
  font-family: "Work Sans", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Trading. Two published lists per player, and the point of the
   card is the overlap between them, so a match is loud and an
   unmatched binder stays quiet.
   ============================================================ */

#tradeSearch { margin-bottom: 10px; }

.trade-owner { margin-bottom: 8px; }
/* The row is a <button> so it is reachable by keyboard, which means undoing
   the button defaults that would otherwise centre and shrink its contents. */
.trade-toggle {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  gap: 12px;
}
.trade-hit { color: var(--felt); font-weight: 600; }

.trade-detail {
  padding: 10px 12px 4px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--card-2);
}
.trade-cards { display: flex; flex-direction: column; margin-bottom: 8px; }
.trade-card {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 6px 4px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.trade-card:last-child { border-bottom: none; }
.trade-card:hover .trade-card-name { color: var(--violet); }
.trade-card-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-card.hit .trade-card-name { color: var(--felt); font-weight: 600; }

/* ============================================================
   Camera scanner. Half the screen is the picture and half is
   the answer: the results are what people actually act on, and
   they used to get a sliver while the preview sat in a
   letterboxed column with white either side of it.
   ============================================================ */

body.scanner-open { overflow: hidden; }

.scanner {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom);
}
.scanner-bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.scanner-stage {
  position: relative;
  flex: 1 1 50%;
  min-height: 0;      /* or a flex child refuses to shrink below its content */
  width: 100%;
  background: #000;
  overflow: hidden;
}
/* Cover, not contain: the picture fills the pane edge to edge. guideBoxIn()
   in scanner.js undoes this scaling when it takes the crop, so the rectangle
   read is the rectangle framed. Change one and you must change the other. */
.scanner-video,
.scanner-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* The display: block above beats the browser's own [hidden] rule, so without
   this the first frozen shot never went away and covered the live camera for
   every scan after it. */
.scanner-shot[hidden] { display: none; }
/* Kept in step with GUIDE in scanner.js: 86% wide, 13% tall, 42% down. */
.scanner-guide {
  position: absolute;
  left: 7%; width: 86%;
  top: 42%; height: 13%;
  border: 2px solid var(--felt);
  border-radius: 6px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
/* Card mode. scanner.js sizes the outline in pixels at a real card's shape,
   so only the look is set here. */
.scanner-guide.is-card { border-radius: 12px; }
.scanner-guide span {
  transform: translateY(140%);
  font-size: 12px; color: #fff; text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}
.scanner-panel {
  flex: 1 1 50%;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  background: var(--card);
}
/* Typing, searching and scanning are the same decision, so they sit together
   at the top of the panel. A grid rather than a wrapping flex row: at 390px
   an input and two buttons do not fit on one line, and left to wrap they each
   took a line of their own and ate 114px of the results. */
.scanner-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.scanner-actions input { grid-column: 1 / -1; min-width: 0; }
.scanner-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.scanner-pick { width: 100%; }
.scanner-bar-actions { display: flex; align-items: center; gap: 16px; }

/* Live mode: every card in view is outlined on the picture, so the picture
   gets more of the screen, and there is no single-card guide or Scan button.
   [hidden] needs saying again for anything the rules above display. */
.scanner-guide[hidden],
.scanner-actions [hidden],
.scanner-marks[hidden],
.scanner-bar-actions [hidden] { display: none; }
.scanner-marks {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: manipulation;
}
.scanner.is-live .scanner-stage { flex-basis: 100%; }
/* Checking the list after back: the camera is paused and out of the way. */
.scanner.is-review .scanner-stage { display: none; }
.scanner.is-review .scanner-panel { flex-basis: 100%; }
.scanner.is-live .scanner-panel { flex-basis: 40%; }
.scanner.is-live .scanner-actions { grid-template-columns: 1fr auto; }
.scanner.is-live .scanner-actions input { grid-column: auto; }
.scanner-found { list-style: none; margin: 10px 0 0; padding: 0; }
.scanner-found li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.scanner-found li:last-child { border-bottom: none; }
.scanner-found-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scanner-found-name::before { content: "\2713\00a0"; color: var(--felt); font-weight: 700; }
.scanner-found-count { min-width: 1.5em; text-align: center; font-variant-numeric: tabular-nums; }
.scanner-found-note { display: block; }

.scan-btn { width: 100%; margin-top: 8px; }

/* ============================================================
   The home-screen offer. A convenience, never the thing anyone
   opened the app to do, so it sits quietly below the tools.
   ============================================================ */

.install-card .row { align-items: flex-start; gap: 14px; }
.install-icon {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 11px;
  border: 1px solid var(--border);
}
/* The same offer on a public page, where most people meet Pack League for
   the first time and the browser tab hides half the screen. */
.install-offer { display: flex; gap: 16px; align-items: flex-start; }
.install-offer > img { flex: none; border-radius: 13px; border: 1px solid var(--border); }
.install-offer-text > strong { display: block; font-size: 1.1rem; margin-bottom: 6px; }
.install-benefits {
  margin: 8px 0 12px; padding-left: 18px;
  color: var(--muted); font-size: 0.92rem; line-height: 1.55;
}
.install-benefits li { margin-bottom: 3px; }
.install-how { color: var(--muted); font-size: 0.92rem; margin: 6px 0 0; }
/* On the landing page it is a band of its own rather than a card. */
.lp-install .install-offer {
  max-width: 720px; margin: 0 auto;
  padding: 20px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card, transparent);
}
@media (max-width: 480px) {
  .install-offer { gap: 12px; }
  .install-offer > img { width: 44px; height: 44px; }
}

/* The iOS share glyph, standing in for an icon we are not allowed to ship. */
.ios-share {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px; line-height: 1.4;
  vertical-align: middle;
}

/* ============================================================
   The card pool: what a player opened, one booster at a time.
   The booster being filled in is outlined so it is obvious
   which pack the scanner is adding to.
   ============================================================ */

.pool-editor {
  padding: 12px;
  border: 1px solid var(--violet);
  border-radius: 12px;
  background: var(--card-2);
}
.pool-editor-head { align-items: baseline; }
.pool-actions { justify-content: space-between; align-items: center; }
.deck-row.flagged .deck-row-name { color: var(--danger); }
.deck-row-card .badge { flex-shrink: 0; }

/* Up for trade, inside My pool, and the alert when someone offers a card
   on your want list. */
.pool-offer { border-top: 1px solid var(--border); padding-top: 12px; }
.pool-offer .deck-row .muted { flex-shrink: 0; }
.want-alert { border-color: var(--felt); }
.trade-card .badge { flex-shrink: 0; }

/* ============================================================
   Public event pages: /e/CODE and /events. Read by people who
   have never used the app, often from a link on a shop's socials,
   so the facts lead and the join button is hard to miss.
   ============================================================ */

.public-page { max-width: 640px; }
.public-title { font-family: "Fraunces", Georgia, serif; font-size: 28px; line-height: 1.15; margin: 6px 0 14px; }
.public-head { align-items: center; }
.public-facts { margin: 0 0 14px; display: grid; gap: 12px; }
.public-facts > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.public-facts dt { color: var(--muted); font-size: 13px; padding-top: 2px; }
.public-facts dd { margin: 0; }
.public-text { white-space: pre-wrap; }
.public-format { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.public-format p { margin: 6px 0 0; }
.public-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.public-join { flex: 1; min-width: 180px; text-align: center; }
a.public-row { color: inherit; text-decoration: none; }
.public-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 4px;
}
@media (max-width: 420px) {
  .public-facts > div { grid-template-columns: 1fr; gap: 2px; }
}
/* The public pages' brand and header buttons are links, not buttons. */
.landing-topbar a.brand { color: var(--text); text-decoration: none; }
/* A link dressed as a button reads as a button: without this, ".card a" made
   every one inside a card violet, unlike the buttons beside it. */
a.btn { text-decoration: none; color: var(--text); }
a.btn:hover { color: var(--text); }
.public-follow { border-top: 1px solid var(--border); padding: 12px 0 4px; margin-top: 4px; }
.public-follow p { margin: 6px 0 0; }

/* ============================================================
   The account menu behind the avatar. The bar used to carry the
   whole email address and a Sign out link, and on a phone both
   the brand and the link wrapped onto two lines.
   ============================================================ */

.topbar-right { position: relative; }
.topbar-left .brand { white-space: nowrap; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.avatar-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card-2); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; font-weight: 700;
}
.avatar-btn:hover .avatar { border-color: var(--violet); }
.avatar-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: 244px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55);
  overflow: hidden;
}
.avatar-menu-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.avatar-menu-head strong { font-size: 15px; }
.avatar-menu-item {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; border: none; background: none; cursor: pointer;
  color: var(--text); font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 600;
  text-align: left;
}
.avatar-menu-item:hover { background: var(--card-2); }
.avatar-menu-item.danger { color: var(--danger); }

/* ============================================================
   Event tabs. One long scroll put the thing you need several
   screens away at a table, so the event is four tabs and the bar
   sits in thumb reach at the bottom.
   ============================================================ */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.tabbar-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-family: "Work Sans", sans-serif;
}
.tabbar-tab.on { color: var(--text); }
.tabbar-tab.on::before {
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px;
  height: 2px; border-radius: 2px; background: var(--foil);
}
.tabbar-icon { position: relative; display: grid; place-items: center; }
.tabbar-label { font-size: 11px; font-weight: 600; }
.tabbar-dot {
  position: absolute; top: -2px; right: -5px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--bg);
}
.tabbar-dot.urgent { background: var(--danger); }
.tabbar-dot.open { background: var(--info); }

/* The app's own bar has three places, with Scan raised in the middle: the
   thing a collector reaches for most, under the thumb. */
.tabbar-app { grid-template-columns: 1fr 1fr 1fr; }
.tabbar-main .tabbar-icon {
  width: 56px; height: 56px; margin-top: -26px; border-radius: 50%;
  background: var(--foil); color: #fff;
  box-shadow: 0 6px 18px -6px rgba(110, 84, 201, .7);
  border: 4px solid var(--bg);
}
.tabbar-main.on::before { display: none; }
.tabbar-main .tabbar-label { margin-top: -2px; }

/* The tab bar would sit over the quiet footer, so the footer keeps clear of it. */
main.has-tabbar { padding-bottom: 16px; }
main.has-tabbar + .app-footer {
  margin-top: 0;
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}


/* ============================================================
   Live scanning. A tester could not tell how to stop, or where
   the scanned cards were: both were small underlined words in
   the bar, and the list sat under the camera, half off screen.
   The camera now fills the screen, the controls float over it,
   and the list is a sheet.
   ============================================================ */

.scanner.is-live .scanner-bar { display: none; }
.scanner.is-live .scanner-panel { display: none; }
/* Only while a tapped card is being named, or a set is still loading. */
.scanner.is-live.is-naming .scanner-panel {
  display: block;
  position: absolute; left: 0; right: 0; bottom: 168px; z-index: 3;
  max-height: 46%; overflow-y: auto;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}

.scanner-live {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.scanner-live[hidden] { display: none; }
.scanner-live > * { pointer-events: auto; }
.scanner-live-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 10px 0;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: linear-gradient(rgba(8,7,11,.85), rgba(8,7,11,0));
  pointer-events: none;
}
.scanner-round, .scanner-round-space { width: 44px; height: 44px; }
.scanner-round {
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(8,7,11,.65); border: 1px solid var(--border); color: #f1eef6;
  pointer-events: auto;
}
.scanner-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 100px;
  background: rgba(8,7,11,.65); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: #f1eef6;
}
.scanner-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--felt); }
.scanner.is-paused .scanner-status { border-color: var(--danger); color: var(--danger); }
.scanner.is-paused .scanner-status i { background: var(--danger); }

.scanner-live-bottom {
  padding: 70px 16px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(8,7,11,0), rgba(8,7,11,.88) 42%, rgba(8,7,11,.96));
  pointer-events: none;
}
.scanner-live-bottom > * { pointer-events: auto; }
.scanner-pause-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.scanner-pause {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px; border-radius: 100px; cursor: pointer;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 2px solid var(--felt); color: var(--felt);
  font-family: "Work Sans", sans-serif; font-size: 15px; font-weight: 700;
}
.scanner.is-paused .scanner-pause { border-color: var(--danger); color: var(--danger); }
.scanner-open-list {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 54px; margin: 0; border-radius: 14px; font-size: 16px; font-weight: 700;
}
.scanner-count {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 100px;
  background: rgba(20,16,28,.18); font-size: 15px;
}
.scanner-names { text-align: center; margin: 10px 0 0; color: #cfc9d8; }

/* The list of what was found, over the held picture. */
.scanner-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  max-height: 88%;
  display: flex; flex-direction: column;
  background: var(--card);
  border-top: 1px solid var(--border); border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 40px -14px rgba(0,0,0,.75);
}
.scanner-sheet[hidden] { display: none; }
.scanner-sheet-head { padding: 10px 16px 0; flex: none; }
.scanner-grab { width: 44px; height: 4px; border-radius: 100px; background: var(--border); margin: 0 auto 12px; }
.scanner-sheet-head h2 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 600; }
.scanner-sheet .scanner-found { flex: 1; overflow-y: auto; padding: 8px 16px 0; margin: 0; }
.scanner-sheet-actions {
  flex: none; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.scanner-sheet-actions .btn { margin: 0; height: 52px; font-size: 15px; }

.scanner-found li {
  display: flex; align-items: center; gap: 10px;
  min-height: 68px; padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.scanner-found-card {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.scanner-found-text { flex: 1; min-width: 0; }
.scanner-found-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scanner-found-price { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.scanner-found-drop {
  flex: none; width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 20px; line-height: 1;
}
.scanner-found-drop:hover { color: var(--danger); }

/* ============================================================
   "Where do these go?" after a scan. One sheet, because the
   scanner is reached from several places and the answer is
   different each time.
   ============================================================ */

.sheet-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(8, 7, 11, 0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 640px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--card);
  border-top: 1px solid var(--border); border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 40px -14px rgba(0,0,0,.6);
}
.sheet-head { flex: none; padding: 10px 16px 0; }
.sheet-grab { width: 44px; height: 4px; border-radius: 100px; background: var(--border); margin: 0 auto 12px; }
.sheet-head h2 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 600; }
.sheet-head p { margin: 4px 0 0; }
.sheet-options { flex: 1; overflow-y: auto; padding: 12px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.sheet-option {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 12px; cursor: pointer; text-align: left;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font-family: "Work Sans", sans-serif; font-size: 14px;
}
.sheet-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sheet-option .sheet-tick { color: var(--felt); visibility: hidden; flex: none; }
.sheet-option.on {
  border-color: transparent;
  background: linear-gradient(var(--card-2), var(--card-2)) padding-box, var(--foil) border-box;
}
.sheet-option.on .sheet-tick { visibility: visible; }
.sheet-actions {
  flex: none; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
}
.sheet-actions .btn { margin: 0; height: 52px; font-size: 15px; }

/* ============================================================
   Shared card lists. A link somebody sends a friend: pictures
   first, because that is what makes a lucky booster worth
   sending, and the plain list under it for reading.
   ============================================================ */

.share-btn { display: inline-flex; align-items: center; gap: 6px; }
.share-btn svg { flex: none; }

.share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.share-card { position: relative; margin: 0; }
.share-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 488 / 680;
  border-radius: 4.75% / 3.5%;
  background: var(--card-2);
}
.share-card-blank {
  display: grid; place-items: center;
  aspect-ratio: 488 / 680;
  padding: 10px; text-align: center;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--muted);
  background: var(--card-2);
}
.share-card-qty {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.75); color: #fff;
  font-size: 13px; font-weight: 700;
}
.share-list {
  list-style: none; margin: 0; padding: 12px 0 0;
  border-top: 1px solid var(--border);
  columns: 2 180px; column-gap: 20px;
  font-size: 14px;
}
.share-list li { break-inside: avoid; padding: 2px 0; }
.share-list .mono { display: inline-block; min-width: 1.6em; color: var(--muted); }
@media (max-width: 480px) {
  .share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ============================================================
   A shop's own link, in the organizer's venue list.
   ============================================================ */
.venue-row {
  display: grid; gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.venue-row:last-child { border-bottom: 0; }
.venue-row > .btn-link { justify-self: start; font-size: 13px; }
.slug-editor { display: grid; gap: 6px; }
.slug-input {
  display: flex; align-items: center; gap: 2px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 0 0 0 10px;
}
.slug-input input { border: 0; background: transparent; padding-left: 0; margin: 0; min-width: 0; flex: 1; }
.slug-input input:focus { outline: none; }
.slug-input:focus-within { border-color: var(--violet); }
.hero-title-row { align-items: flex-start; flex-wrap: nowrap; }
.hero-title-row h2 { margin: 0; }
.list-item-actions { align-items: center; gap: 4px; flex-wrap: nowrap; }

/* ============================================================
   Posters. Paper, so always light and always A4 in proportion.
   Every size inside the sheet is in container units (cqw), so
   the same sheet reads the same scaled onto a phone screen as it
   does printed.
   ============================================================ */
.poster-screen {
  min-height: 100vh;
  background: var(--bg);
  padding: 12px 12px 40px;
}
.poster-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 820px; margin: 0 auto 12px;
}
.poster-toolbar .muted { text-align: center; flex: 1; }
.poster-hint { max-width: 820px; margin: 0 auto 12px; color: var(--muted); font-size: 14px; }
.poster-wrap { max-width: 820px; margin: 0 auto; container-type: inline-size; }

.poster-sheet {
  --ink: #16121f;
  --ink-soft: #544d63;
  --rule: #e3dfea;
  --s: 1; /* lowered by fitPoster() until the content fits the page */
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--paper, #fff); color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font-family: "Work Sans", system-ui, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.poster-band { height: calc(2.4cqw * var(--s)); background-image: var(--band, var(--foil)); flex: none; position: relative; z-index: 2; }
.poster-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: calc(6cqw * var(--s)) calc(8cqw * var(--s)) calc(3cqw * var(--s));
  gap: calc(3cqw * var(--s));
}
.poster-eyebrow {
  margin: 0;
  font-size: calc(2.6cqw * var(--s)); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.poster-title {
  margin: calc(-1.5cqw * var(--s)) 0 0;
  font-family: "Fraunces", Georgia, serif; font-weight: 700;
  font-size: calc(9cqw * var(--s)); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.poster-lede {
  margin: 0;
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: calc(4cqw * var(--s)); line-height: 1.2; color: var(--ink);
}
.poster-facts {
  margin: 0; display: grid; gap: calc(1.2cqw * var(--s));
  border-top: calc(0.3cqw * var(--s)) solid var(--rule); padding-top: calc(2.6cqw * var(--s));
}
.poster-facts > div { display: grid; grid-template-columns: calc(16cqw * var(--s)) 1fr; gap: calc(2cqw * var(--s)); }
.poster-facts dt { font-size: calc(2.3cqw * var(--s)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding-top: calc(0.6cqw * var(--s)); }
.poster-facts dd { margin: 0; font-size: calc(3.3cqw * var(--s)); line-height: 1.3; }

.poster-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(3cqw * var(--s));
  counter-reset: step;
}
.poster-steps li {
  counter-increment: step;
  display: grid; gap: calc(0.8cqw * var(--s)); align-content: start;
  border-top: calc(0.3cqw * var(--s)) solid var(--ink); padding-top: calc(1.6cqw * var(--s));
}
.poster-steps li::before {
  content: "0" counter(step);
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; font-size: calc(2.3cqw * var(--s)); font-weight: 700; color: var(--ink-soft);
}
.poster-steps strong { font-size: calc(3.2cqw * var(--s)); line-height: 1.15; }
.poster-steps span { font-size: calc(2.4cqw * var(--s)); line-height: 1.35; color: var(--ink-soft); }

.poster-events { display: grid; gap: calc(1.2cqw * var(--s)); }
.poster-events > strong {
  font-size: calc(2.3cqw * var(--s)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.poster-events ul { list-style: none; margin: 0; padding: 0; }
.poster-events li {
  display: flex; justify-content: space-between; gap: calc(3cqw * var(--s));
  padding: calc(1.2cqw * var(--s)) 0; border-bottom: calc(0.25cqw * var(--s)) solid var(--rule);
  font-size: calc(2.9cqw * var(--s)); line-height: 1.3;
}
.poster-events li span:first-child { font-weight: 600; flex: 1 1 50%; min-width: 0; }
.poster-events li span:last-child { color: var(--ink-soft); text-align: right; flex: 0 1 50%; }

.poster-bottom {
  margin-top: auto;
  display: grid; grid-template-columns: calc(28cqw * var(--s)) 1fr; gap: calc(5cqw * var(--s)); align-items: center;
}
.poster-qr { width: calc(28cqw * var(--s)); aspect-ratio: 1; padding: calc(1.5cqw * var(--s)); border: calc(0.3cqw * var(--s)) solid var(--ink); border-radius: calc(2cqw * var(--s)); background: #fff; }
.poster-qr img, .poster-qr canvas { display: block; width: 100% !important; height: auto !important; }
.poster-cta { display: grid; gap: calc(1.2cqw * var(--s)); }
.poster-cta strong { font-family: "Fraunces", Georgia, serif; font-size: calc(5.4cqw * var(--s)); line-height: 1.05; }
.poster-cta span { font-size: calc(2.9cqw * var(--s)); line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; }
.poster-cta b { color: var(--ink); font-weight: 700; }
.poster-code b { font-family: "Space Mono", monospace; font-size: calc(3.6cqw * var(--s)); letter-spacing: 0.08em; }

.poster-foot {
  flex: none;
  display: flex; justify-content: space-between; gap: calc(4cqw * var(--s)); align-items: flex-end;
  padding: calc(2cqw * var(--s)) calc(8cqw * var(--s)) calc(3cqw * var(--s));
  border-top: calc(0.25cqw * var(--s)) solid var(--rule);
  font-size: calc(1.7cqw * var(--s)); color: var(--ink-soft);
}
.poster-foot span:last-child { text-align: right; max-width: calc(55cqw * var(--s)); }

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { background: #fff !important; }
  .poster-toolbar, .poster-hint, .tabbar, .toast, .hbar { display: none !important; }
  .poster-screen { padding: 0; min-height: 0; background: #fff; }
  .poster-wrap { max-width: none; width: 210mm; margin: 0; }
  .poster-sheet { width: 210mm; height: 297mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}

/* ============================================================
   Shop stats.
   ============================================================ */
.stat-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
  margin-top: 12px;
}
.stat-tile {
  background: var(--card-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px;
}
.stat-tile-value { font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; line-height: 1.1; }
.stat-tile-label { font-size: 13px; font-weight: 600; margin-top: 2px; }
.stat-tile-note { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

.attendance {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
  align-items: end;
  padding-top: 8px;
}
/* Bars are sized in pixels from the page (130px for the busiest night), so
   the count always sits directly on top of its own bar. */
.attendance-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.attendance-num { font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.attendance-bar {
  width: 100%; max-width: 38px; min-height: 3px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--violet); border-radius: 6px 6px 2px 2px; overflow: hidden;
}
.attendance-new { width: 100%; background: var(--teal, #2bd4c4); }
.attendance-date { display: grid; justify-items: center; font-size: 10px; line-height: 1.15; color: var(--muted); max-width: 100%; }
.attendance-date b { font-weight: 600; color: var(--text); }
.attendance-key { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.attendance-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.key-returning { background: var(--violet); }
.key-new { background: var(--teal, #2bd4c4); }

.table-scroll { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stats-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.stats-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.stats-table td:not(:first-child), .stats-table th:not(:first-child) { text-align: right; font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; }
.stats-table tbody tr { cursor: pointer; }
.stats-table tbody tr:hover { background: var(--card-2); }

/* ============================================================
   Weekly leagues.
   ============================================================ */
.repeat-box {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: var(--card-2);
}
.repeat-box > p { margin: 4px 0 0; }
#repeatFields { margin-top: 10px; }
.league-link { display: inline-block; margin-top: 6px; }
.season-table td:nth-child(2), .season-table th:nth-child(2) { text-align: left; font-family: inherit; }
.season-table td:first-child, .season-table th:first-child { text-align: left; width: 2em; color: var(--muted); }
.season-table tbody tr { cursor: default; }
.season-table tr.is-me td { background: color-mix(in srgb, var(--violet) 14%, transparent); }

/* ============================================================
   Shop staff.
   ============================================================ */
.staff-box { display: grid; gap: 6px; justify-items: start; }
.staff-box p { margin: 0; }
.staff-list { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--border); font-size: 13px;
}
.staff-remove {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; font-size: 16px; line-height: 1;
}
.staff-remove:hover { background: var(--border); color: var(--text); }

/* ============================================================
   Event dates.
   ============================================================ */
.when-box, .dates-box {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: var(--card-2);
}
.when-box > p, .dates-box > p { margin: 6px 0 0; }
.dates-box .row { flex-wrap: wrap; }
.event-when { margin-top: 4px; color: var(--text); font-weight: 600; }

/* ============================================================
   The booster counter.
   ============================================================ */
.collect-card { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-color: color-mix(in srgb, var(--violet) 45%, var(--border)); }
.collect-sheet {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: center; padding: 20px;
  background: var(--bg);
}
.collect-inner { width: min(420px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; }
.collect-inner h2 { margin: 0; }
.collect-qr { width: min(300px, 78vw); aspect-ratio: 1; padding: 14px; background: #fff; border-radius: 16px; }
.collect-qr img, .collect-qr canvas { display: block; width: 100% !important; height: auto !important; }
.collect-qr.expired { opacity: 0.2; filter: grayscale(1); }
.collect-code { font-size: 34px; font-weight: 700; letter-spacing: 0.12em; }
.collect-done .collect-burst { font-size: 72px; line-height: 1; animation: collect-pop 600ms ease-out; }
@keyframes collect-pop { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .collect-done .collect-burst { animation: none; } }

.counter-owed { font-size: 18px; margin: 4px 0 12px; }
.counter-owed .mono { font-size: 40px; font-weight: 700; margin-right: 6px; vertical-align: -6px; }
.counter-type input { flex: 1; min-width: 0; font-size: 22px; letter-spacing: 0.1em; text-transform: uppercase; }
.counter-given { border-color: transparent; }

.qr-overlay { position: fixed; inset: 0; z-index: 1300; background: #000; }
.qr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-frame {
  position: absolute; left: 50%; top: 50%; width: min(64vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
}
.qr-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; color: #fff; }
.qr-hint { position: absolute; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; color: #fff; margin: 0; }

/* "hidden" means hidden, even on an element whose class sets a display
   (a hidden .btn used to show anyway). */
[hidden] { display: none !important; }

/* ---- Ratings: the moment after a match, and the rating page ---- */
.stat-link { color: inherit; text-decoration: none; border-radius: 10px; }
.stat-link:hover, .stat-link:focus-visible { background: var(--card-2); }
.stat-link .stat-label { color: var(--violet); }
.player-link { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.player-link:hover { text-decoration-color: var(--violet); }

.rating-moment {
  position: relative;
  display: flex; gap: 14px; align-items: center;
  margin-top: 14px; padding: 12px 40px 12px 14px;
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--card-2);
}
.rating-moment.pop { animation: rm-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.rating-moment.up { border-color: color-mix(in srgb, var(--felt) 50%, transparent); background: color-mix(in srgb, var(--felt) 10%, var(--card)); }
.rating-moment.down { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--card)); }
.rm-delta {
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 30px; line-height: 1;
  min-width: 2.6em; text-align: center;
}
.rating-moment.up .rm-delta { color: var(--felt); }
.rating-moment.down .rm-delta { color: var(--danger); }
.rm-text { min-width: 0; }
.rm-link { display: inline-block; margin-top: 4px; color: var(--violet); }
.rm-close { position: absolute; top: 6px; right: 6px; font-size: 20px; }
@keyframes rm-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rating-moment { animation: none; } }

.rating-line {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  margin-top: 12px; padding: 8px 12px; border-radius: 10px;
  background: var(--card-2); color: var(--muted); text-decoration: none;
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums;
}
.rating-line-go { color: var(--violet); font-family: "Work Sans", sans-serif; white-space: nowrap; }

.rating-headline { display: flex; gap: 18px; align-items: center; margin: 6px 0 4px; }
.rating-big { font-size: 44px; font-weight: 700; line-height: 1; }
.rating-why { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--card-2); font-size: 14px; }
.rating-chart { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.rc-line { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rc-base { stroke: var(--border); stroke-dasharray: 3 3; }
.rc-day { stroke: var(--border); stroke-width: 1; }
.rc-label { fill: var(--muted); font-size: 9px; font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; }
.rc-label.end { text-anchor: end; }
.rc-dot { stroke: var(--card); stroke-width: 1.5; }
.rc-dot.win, .key-dot.win { fill: var(--felt); background: var(--felt); }
.rc-dot.loss, .key-dot.loss { fill: var(--danger); background: var(--danger); }
.rc-dot.draw, .key-dot.draw { fill: var(--muted); background: var(--muted); }
.key-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 2px 0 6px; }
.chart-key { margin-top: 4px; }
.tiny { font-size: 11px; }
.strong { font-weight: 700; }
.rating-match { align-items: center; }
.rating-numbers { display: flex; gap: 14px; text-align: right; flex-shrink: 0; }
.result-pill {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 6px;
  font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--on-accent);
  vertical-align: 1px;
}
.result-pill.win { background: var(--felt); }
.result-pill.loss { background: var(--danger); }
.result-pill.draw { background: var(--muted); }
.static-table tbody tr { cursor: default; }
.static-table td:not(:first-child), .static-table td.nowrap { white-space: nowrap; }
.static-table tbody tr:hover { background: none; }
.static-table tr.is-me td { background: color-mix(in srgb, var(--violet) 14%, transparent); }
.plain-list { margin: 8px 0 0; padding-left: 18px; }
.plain-list li { margin: 4px 0; }
.day-details summary { cursor: pointer; list-style: none; }
.day-details summary::-webkit-details-marker { display: none; }
.day-details[open] summary { border-bottom: none; }
.move { font-size: 12px; font-weight: 700; }
.move.up { color: var(--felt); }
.move.down { color: var(--danger); }
.flag-card { border-color: color-mix(in srgb, var(--info) 45%, var(--border)); }
.flag-row { align-items: center; gap: 12px; }
.flag-row .btn { flex-shrink: 0; }
.poster-lines { white-space: pre-line; }

/* ---- Share the poster as an image ---- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.sheet {
  width: min(560px, 100%);
  max-height: 92vh; overflow-y: auto;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow);
}
@media (min-width: 700px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 18px; border-bottom: 1px solid var(--border); }
}
.sheet h2 { margin: 0 0 4px; }
.seg { display: flex; gap: 8px; margin: 8px 0 12px; }
.seg-btn {
  flex: 1; display: grid; gap: 2px; text-align: center;
  padding: 8px 6px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card-2); color: var(--text);
  font: inherit; cursor: pointer;
}
.seg-btn.on { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.poster-image-preview {
  display: grid; place-items: center;
  background: var(--card-2); border-radius: 12px; padding: 10px;
}
.poster-image-preview canvas {
  width: 100%; max-width: 320px; height: auto;
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* A shop's own look on the poster: a logo, a background photo, its colour. */
.poster-logo {
  align-self: flex-start;
  max-height: calc(11cqw * var(--s)); max-width: calc(45cqw * var(--s));
  width: auto; object-fit: contain;
  margin-bottom: calc(-1cqw * var(--s));
}
.poster-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.poster-bg-veil {
  position: absolute; inset: 0; z-index: 1; background: var(--paper, #fff);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.poster-sheet .poster-steps li::before { color: var(--accent, var(--ink-soft)); }
.poster-foot { position: relative; z-index: 2; }
.pc-thumb { height: 44px; width: auto; max-width: 120px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; }
.pc-thumb.wide { height: 44px; max-width: 170px; object-fit: cover; }
.pc-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 2px 12px; }
.poster-custom-sheet input[type="color"] { width: 54px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-2); }
.poster-custom-sheet input[type="range"] { width: 100%; }
.poster-custom-sheet .seg { flex-wrap: wrap; }
.share-said { margin: 6px 0 0; color: var(--felt); font-weight: 600; }
.share-said.bad { color: var(--danger); }
.share-post-sheet { max-width: 560px; }
.share-post-text {
  width: 100%; margin-top: 10px; resize: vertical;
  font: inherit; line-height: 1.45;
  padding: 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card-2); color: var(--ink);
}
.share-post-sheet .seg { flex-wrap: wrap; }

/* ============================================================
   Shops tab (home) and collection, 2026-09 mobile pass.
   Fewer boxes: section titles sit on the page, and a card only
   wraps things that belong together.
   ============================================================ */
.section-title {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-family: "Work Sans", sans-serif; font-weight: 700;
  margin: 22px 4px 10px;
}
.list-card { padding: 4px 14px; }
.list-card .list-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; padding: 14px 2px; margin: 0; gap: 10px; }
.empty-card p { font-size: 14px; }
.list-card .list-item:last-child { border-bottom: none; }
.empty-card h2 { margin-top: 0; }
.quiet-link { text-align: center; color: var(--muted); font-size: 14px; margin: 24px 0 8px; }

.home-find { margin-bottom: 8px; }
.search-pill {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 100px;
  padding: 0 16px; height: 50px; box-shadow: var(--shadow); color: var(--muted);
}
.search-pill input { flex: 1; min-width: 0; border: none; background: none; box-shadow: none; padding: 0; height: 100%; font-size: 16px; color: var(--text); outline: none; }
.home-find .market-suggest { background: var(--card); border-radius: 12px; overflow: hidden; }
.home-find .market-suggest:empty { display: none; }
.chip {
  flex: none; border: 1px solid var(--border); background: var(--card-2); color: var(--text);
  border-radius: 100px; padding: 8px 14px; font: 600 13px "Work Sans", sans-serif; cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: var(--on-accent); }

.live-banner {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; margin-bottom: 12px; cursor: pointer; color: var(--text);
  background: var(--card); border: 1px solid transparent; border-radius: 16px;
  background-image: linear-gradient(var(--card), var(--card)), var(--foil);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: var(--shadow); font: inherit;
}
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--felt); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--felt) 25%, transparent); }
.live-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.live-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-kicker { font-size: 12px; font-weight: 700; color: var(--felt); text-transform: uppercase; letter-spacing: .05em; }
.live-go { color: var(--muted); font-size: 18px; }

.shop-list { display: flex; flex-direction: column; gap: 10px; }
.shop-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  color: var(--text); text-decoration: none; box-shadow: var(--shadow);
}
.shop-avatar {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--foil); color: #fff; font: 700 20px "Fraunces", serif;
}
.shop-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-tile-text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Collection: value ring and folders ---- */
.col-summary { display: flex; flex-direction: column; align-items: center; margin: 6px 0 4px; }
.col-summary .empty-card { width: 100%; }
.ring-wrap { position: relative; width: 200px; height: 200px; }
.ring-wrap .ring { display: block; }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 30px;
}
.ring-value { font: 700 32px "Work Sans", sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ring-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ring-change { font: 700 13px "Work Sans", sans-serif; font-variant-numeric: tabular-nums; }
.ring-change.up { color: var(--felt); }
.ring-change.down { color: var(--danger); }
.ring-since { font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.col-actions { display: flex; gap: 8px; justify-content: center; margin: 14px 0 0; flex-wrap: wrap; }
#folderList { display: flex; flex-direction: column; gap: 10px; }
.folder-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; color: var(--text);
  padding: 14px 16px 14px 18px; position: relative; overflow: hidden; box-shadow: var(--shadow); font: inherit;
}
.folder-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--folder); }
.folder-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.folder-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-value { font: 700 16px "Work Sans", sans-serif; font-variant-numeric: tabular-nums; flex: none; }

/* ---- Folder page ---- */
.folder-head { margin: 4px 2px 14px; position: relative; }
.folder-title-row { display: flex; align-items: center; gap: 8px; }
.folder-title { font-size: 26px; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.folder-menu { right: 0; top: 44px; }
.seg-full { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.seg-full button { justify-content: center; }
.seg button[aria-pressed="true"] { background: var(--violet); color: var(--on-accent); border-color: var(--violet); }

/* ---- Scan tab ---- */
.big-btn { width: 100%; height: 52px; font-size: 16px; }

/* Card rows in a folder: on a phone the name needs the room more than the
   thumbnail does. */
@media (max-width: 420px) {
  .deck-row { gap: 6px; }
  .deck-thumb { width: 34px; height: 48px; }
  .deck-row .price-tag { font-size: 11px; }
  .deck-row-keep, .deck-row-remove { padding: 4px 3px; }
}

/* The scanner before it knows its layout: dark, a spinner, a way out. */
.scanner-starting { display: none; }
.scanner.is-starting { background: #08070b; }
.scanner.is-starting > :not(.scanner-starting) { visibility: hidden; }
.scanner.is-starting .scanner-starting {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  position: absolute; inset: 0; z-index: 5; color: #f1eef6;
}
.scanner-starting .scanner-round { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; width: 44px; height: 44px; }
.scanner-starting p { margin: 0; font-size: 15px; color: #cfc9da; }

/* Home: four doors. */
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.home-tile {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow);
  color: var(--text); font: 700 16px "Work Sans", sans-serif; cursor: pointer; padding: 12px;
  position: relative; /* for the matches badge */
}
.home-tile svg { color: var(--violet); }
.home-tile:active { transform: scale(.97); }
.home-tile-wide { aspect-ratio: auto; flex-direction: row; width: 100%; height: 64px; margin-top: 12px; gap: 10px; }
#homeInstall { margin-top: 16px; }
.tile-badge {
  position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px;
  background: var(--violet); color: var(--on-accent); font: 700 12px "Work Sans", sans-serif;
}

/* Day and night switch, bottom left, above the tab bar when there is one. */
.theme-toggle {
  position: fixed; left: 14px; z-index: 25;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow); cursor: pointer;
}
body:not(:has(.tabbar)) .theme-toggle { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
body.scanner-open .theme-toggle { display: none; }
/* The life counter is dark either way, and its Back arrow lives in that corner. */
body:has(.life-screen) .theme-toggle { display: none; }
@media print { .theme-toggle { display: none !important; } }
/* In the top bar: a plain icon button beside the account circle. */
.theme-toggle.in-bar {
  position: static; width: 38px; height: 38px; box-shadow: none;
  background: transparent; border: none; color: var(--muted);
}
.theme-toggle.in-bar:hover { color: var(--text); }
#themeSlot { display: inline-flex; }
.topbar-right { display: flex; align-items: center; gap: 4px; }
.name-row { display: flex; gap: 8px; margin: 8px 0; }
.name-row input { flex: 1; min-width: 0; }
.name-row .btn { flex-shrink: 0; font-size: 20px; padding: 0 12px; }

/* Find a card: keep it, one tap either way. */
.find-keep { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }

/* Quick match */
.quick-start { display: flex; flex-direction: column; gap: 10px; }
.quick-option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 16px; background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow); font: inherit;
}
.quick-option svg { color: var(--violet); flex: none; }
.quick-option > span { display: flex; flex-direction: column; gap: 2px; }
#quickBody:not(:empty) { margin-top: 14px; }
.quick-qr-card { text-align: center; }
.quick-qr { display: inline-block; background: #fff; padding: 12px; border-radius: 14px; }
.quick-qr img, .quick-qr canvas { width: min(240px, 64vw) !important; height: auto !important; display: block; }
.quick-code { font-size: 22px; letter-spacing: .2em; margin: 12px 0 4px; }
.casual-row { cursor: pointer; }
.casual-games { padding: 4px 2px 12px; border-bottom: 1px solid var(--border); }
.casual-game { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; }
.casual-game span:first-child { min-width: 64px; }
.casual-game .btn-link { margin-left: auto; }
.quick-score { font: 700 17px "Work Sans", sans-serif; font-variant-numeric: tabular-nums; flex: none; }
.quick-score.up { color: var(--felt); }
.quick-score.down { color: var(--danger); }
.quick-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-mode {
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; text-align: center;
  padding: 18px 10px; background: var(--card-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 16px; cursor: pointer; font: inherit; min-height: 120px;
}

/* Codes people read out or type: join codes, pairing codes, ids. The one
   place the monospace face stays, so 0 and O, 1 and I never look alike. */
.code { font-family: "Space Mono", ui-monospace, monospace; letter-spacing: .04em; }

/* ---- Deck stats: curve, colours, lands ---- */
.deck-stats-card[open] > summary { margin-bottom: 6px; }
.deck-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.deck-stats-row strong { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.deck-stats-label { font-weight: 600; margin: 12px 0 0; }
.curve-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 6px; }
.curve-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.curve-bar em { font-style: normal; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.4; }
.curve-bar i { display: block; background: var(--violet); border-radius: 3px 3px 0 0; min-height: 2px; }
.curve-labels { display: flex; gap: 6px; font-size: 11px; color: var(--muted); }
.curve-labels span { flex: 1; text-align: center; }
.colour-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 6px; border: 1px solid var(--border); }
.colour-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.colour-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mana-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid var(--border); }
.mana-W { background: #f2e6b8; }
.mana-U { background: #3f86d4; }
.mana-B { background: #5b4a5e; }
.mana-R { background: #d9493f; }
.mana-G { background: #3a9a57; }
.mana-C { background: #a8a4ae; }
.deck-stats-card:not(.card) { border-top: 1px solid var(--border); padding-top: 10px; }

/* ---- Checking a deck against the table ---- */
.deck-check-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.tick-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--border); padding: 10px 2px; color: var(--text); font: inherit; cursor: pointer; }
.tick-row .tick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick-box { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--on-accent); }
.tick-row.ticked .tick-box { background: var(--felt); border-color: var(--felt); }
.tick-row.ticked .tick-name { color: var(--muted); }
.deck-call-card { border: 2px solid var(--violet); }
.deck-call-card h2 { margin-top: 0; }

/* ---- One share sheet for every link ---- */
.share-sheet { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: flex-end; justify-content: center; }
.share-backdrop { position: absolute; inset: 0; background: rgba(10, 8, 16, 0.55); animation: share-fade 160ms ease-out; }
.share-panel { position: relative; width: min(480px, 100%); max-height: 92vh; overflow-y: auto; background: var(--card);
  color: var(--text); border-radius: 20px 20px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0,0,0,.35); animation: share-rise 200ms ease-out; display: grid; gap: 10px; }
.share-sheet.closing .share-panel { transform: translateY(100%); transition: transform 180ms ease-in; }
.share-sheet.closing .share-backdrop { opacity: 0; transition: opacity 180ms; }
.share-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 2px; }
.share-panel h2 { margin: 0; font-size: 20px; }
.share-panel h2 .muted { font-size: 15px; font-weight: 500; }
.share-panel textarea { width: 100%; resize: vertical; font: inherit; }
.share-link { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -4px; }
.btn.share-wa { display: flex; align-items: center; justify-content: center; gap: 10px; background: #25d366; color: #0b2e17;
  border-color: #25d366; font-weight: 700; font-size: 16px; padding: 14px; text-decoration: none; }
.btn.share-wa:hover { filter: brightness(1.05); }
.share-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.share-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 12px;
  background: none; border: 0; color: var(--text); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; text-align: center; }
.share-app:hover { background: var(--card-2); }
.share-app-icon { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid var(--border); color: var(--text); font-size: 20px; }
.share-app-icon.share-telegram { background: #2aabee; color: #fff; border-color: #2aabee; }
.share-app-icon.share-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.share-app-icon.share-x { background: #000; color: #fff; border-color: #333; }
.share-qr-wrap { display: grid; justify-items: center; gap: 6px; }
.home-invite { color: var(--violet); }
@keyframes share-rise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes share-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Shop dashboard ---- */
.dash-head { padding: 4px 2px 10px; }
.dash-head .eyebrow { margin: 0; color: var(--violet); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dash-head h1 { margin: 2px 0 4px; font-size: clamp(26px, 6vw, 34px); line-height: 1.1; }
.dash-tabs { margin-bottom: 10px; }
.dash-sub { margin: -2px 0 10px; }
.dash-hero { position: relative; border-radius: 18px; padding: 18px 16px 14px; margin-bottom: 14px; color: var(--text);
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--foil) border-box; border: 2px solid transparent;
  box-shadow: var(--shadow); overflow: hidden; }
.dash-hero::before { content: ""; position: absolute; inset: 0; background: var(--foil); opacity: .08; pointer-events: none; }
.dash-kpis { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
@media (min-width: 640px) { .dash-kpis { grid-template-columns: repeat(4, 1fr); } }
.dash-kpi-value { font-family: "Work Sans", sans-serif; font-variant-numeric: tabular-nums; font-size: clamp(30px, 8vw, 40px); font-weight: 700; line-height: 1; }
.dash-kpi-label { font-weight: 600; font-size: 13px; margin-top: 4px; }
.dash-kpi-note { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dash-hero-line { position: relative; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.dash-hero-line strong { color: var(--text); }
.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 999px;
  background: var(--card-2); color: var(--muted); }
.trend.up { color: var(--felt); background: color-mix(in srgb, var(--felt) 14%, transparent); }
.trend.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.dash-ideas { display: grid; gap: 8px; }
.dash-idea { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border); }
.dash-idea-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dash-idea .btn { flex: none; white-space: nowrap; }
.dash-idea-icon { width: 38px; height: 38px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: var(--violet); }
.dash-idea-icon.dash-stock { background: #d4a73a; }
.dash-idea-icon.dash-sell { background: var(--felt); }
.dash-idea-icon.dash-buy { background: var(--info); }
.dash-idea-icon.dash-people { background: #e0527a; }
.dash-grid { display: grid; gap: 0 14px; }
@media (min-width: 760px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
.dash-grid h2, #marketBody .card > .row h2 { margin: 0; }
.dash-weeks { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 10px; }
.dash-week { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; }
.dash-week i { display: block; width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #8b5cf6, #22b8a7); }
.dash-week-num { font-size: 12px; font-weight: 700; }
.dash-week-label { font-size: 11px; color: var(--muted); }
.dash-bars { display: grid; gap: 10px; margin-top: 8px; }
.dash-bar-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; margin-bottom: 4px; }
.dash-bar { display: flex; align-items: center; gap: 8px; }
.dash-bar i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #8b5cf6, #22d3c7); min-width: 4px; }
.dash-bar span { font-size: 12px; font-weight: 700; color: var(--muted); }
.dash-regulars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dash-regular { display: inline-flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border); }
.dash-regular span { font-size: 12px; color: var(--muted); }
.dash-foot { text-align: center; margin: 4px 12px 18px; }

/* ---- Guided tours ---- */
.tour-layer { position: fixed; inset: 0; z-index: 1500; pointer-events: none; }
.tour-dim { position: fixed; inset: 0; background: rgba(10, 8, 16, 0.6); pointer-events: auto; animation: share-fade 160ms ease-out; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(10, 8, 16, 0.6), 0 0 0 3px var(--violet);
  transition: left 220ms ease, top 220ms ease, width 220ms ease, height 220ms ease; pointer-events: none; }
.tour-spot::after { content: ""; position: absolute; inset: -3px; border-radius: 16px; border: 3px solid #22d3c7; animation: tour-pulse 1.6s ease-out infinite; }
.tour-tip { position: fixed; pointer-events: auto; background: var(--card); color: var(--text); border-radius: 16px; padding: 14px 16px 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.4); border: 1px solid var(--border); max-width: calc(100vw - 24px);
  transition: left 220ms ease, top 220ms ease; animation: tour-in 200ms ease-out; }
.tour-tip.centered { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 32px)) !important;
  border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--foil) border-box; }
.tour-tip h3 { margin: 2px 0 6px; font-size: 18px; }
.tour-tip p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
.tour-count { font-size: 12px; font-weight: 700; color: var(--violet); letter-spacing: .04em; }
.tour-hint { color: var(--felt); font-weight: 600; font-size: 13px !important; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.tour-skip { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; padding: 8px 4px; cursor: pointer; }
.tour-next { background: var(--violet); color: var(--on-accent); border: 0; border-radius: 10px; font: inherit; font-weight: 700;
  padding: 9px 20px; cursor: pointer; margin-left: auto; }
.tour-offer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--foil) border-box; }
@keyframes tour-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes tour-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-tip { transition: none; } .tour-spot::after { animation: none; } }
.invite-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.invite-card-icon { width: 42px; height: 42px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.invite-card-text { flex: 1; min-width: 160px; display: grid; gap: 2px; }
.invite-card .btn { flex: none; margin-left: auto; }
.share-folders { display: grid; gap: 6px; max-height: 45vh; overflow-y: auto; }
.share-folder { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  padding: 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer; }
.share-folder > span { display: grid; gap: 2px; min-width: 0; }
.share-folder svg { flex: none; color: var(--violet); }
#collectionInvite { display: flex; align-items: center; justify-content: center; gap: 8px; }
#shareCollectionBtn { display: inline-flex; align-items: center; gap: 6px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 4px 10px; }
.section-head .section-title { margin: 0; }

/* A big shared list: search, a page of pictures at a time. */
.share-tools { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.share-tools input { flex: 1; }
.share-more { display: block; margin: 4px auto 12px; }
.share-all-list > summary { margin-top: 8px; }
.share-everything { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 14px; }
.share-everything > span { display: grid; gap: 2px; }
.share-everything svg { flex: none; }
.share-or { margin: 4px 2px 0; }
/* Picking cards from a shared list */
.pick-hint { margin: 10px 0 0; color: var(--felt); font-weight: 600; }
.share-grid.pickable .share-card { cursor: pointer; border-radius: 10px; transition: transform 120ms ease; }
.share-grid.pickable .share-card:active { transform: scale(.97); }
.pick-tick { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; color: #fff; background: rgba(0,0,0,.45);
  border: 2px solid rgba(255,255,255,.8); opacity: .75; }
.share-card.picked .pick-tick { background: var(--felt); border-color: var(--felt); opacity: 1; }
.share-card.picked img, .share-card.picked .share-card-blank { outline: 3px solid var(--felt); outline-offset: 2px; }
.pick-bar { position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; display: flex; justify-content: center; padding: 0 12px; }
.pick-bar-inner { width: min(560px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 2px solid var(--felt); border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
body.has-pick-bar main { padding-bottom: 150px; }
.warn-note { color: #d4a73a; font-weight: 600; margin: 6px 0 0; }
.pick-request { border: 2px solid var(--felt); }
.pick-request .share-grid { margin-top: 10px; }
.owner-note { border-left: 4px solid var(--violet); }
.owner-note p { margin: 6px 0 10px; }
.pick-bar-inner input { flex: 1 1 160px; min-width: 0; }

/* New folder: what it's for */
.folder-types { display: grid; gap: 6px; }
.folder-type { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--card-2);
  border: 2px solid var(--border); color: var(--text); font: inherit; cursor: pointer; }
.folder-type[aria-checked="true"] { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, var(--card-2)); }
/* Where a want list starts */
.want-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-left: 4px solid #d4a73a; }
.want-cta-text { display: grid; gap: 3px; flex: 1 1 220px; }
#wantCta .want-cta { margin-top: 14px; }

/* Trading pals */
.pals-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Trade matches on Trades. */
.match-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.match-text { flex: 1 1 220px; min-width: 0; line-height: 1.4; }
.match-text .badge { vertical-align: middle; }
.share-card-have {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px;
  background: var(--felt); color: var(--on-accent); font: 700 11px "Work Sans", sans-serif;
}
.shop-nudge { border-left-color: var(--felt); margin-top: 14px; }

/* The recap of a finished event. */
.recap-card { position: relative; overflow: hidden; }
.recap-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--foil); }
.recap-card #recapShare { display: inline-flex; align-items: center; gap: 6px; }
.recap-card #recapShare svg { width: 16px; height: 16px; }
.recap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.recap-stats div { background: var(--card-2); border-radius: 12px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; }
.recap-stats strong { font: 700 24px "Work Sans", sans-serif; }
.recap-stats span { font-size: 12px; color: var(--muted); }
.recap-podium { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.recap-podium li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card-2); }
.recap-podium li strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-place { font: 700 13px "Work Sans", sans-serif; width: 38px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #1a1408; }
.recap-gold .recap-place { background: #e3c15a; }
.recap-silver .recap-place { background: #c9ccd6; }
.recap-bronze .recap-place { background: #d49a6a; }
.recap-gold { box-shadow: inset 0 0 0 1px #e3c15a; }
.recap-busiest { margin: 6px 0 0; }
.recap-sub { font-size: 15px; margin: 14px 0 8px; }
.recap-pulls { display: flex; flex-direction: column; gap: 8px; }
.recap-pull { display: flex; align-items: center; gap: 10px; }
.recap-pull img, .recap-pull-blank { width: 72px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; background: var(--card-2); }
.recap-rarity { text-transform: capitalize; }
.recap-mine { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); }

/* A new shop's getting-started checklist. */
.checklist-bar { height: 8px; border-radius: 999px; background: var(--card-2); margin: 14px 0 6px; overflow: hidden; }
.checklist-bar span { display: block; height: 100%; background: var(--foil); border-radius: inherit; transition: width .4s ease; }
.checklist { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px; border-radius: 12px; }
.checklist li.done strong { color: var(--muted); font-weight: 600; text-decoration: line-through; text-decoration-color: var(--border); }
.checklist li.next { background: var(--card-2); padding: 12px 10px; }
.checklist-tick {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.checklist li.done .checklist-tick { background: var(--felt); border-color: var(--felt); color: var(--on-accent); }
.checklist li.next .checklist-tick { border-color: var(--violet); }
.checklist-action { margin-top: 10px; }
.checklist-action .btn svg { width: 16px; height: 16px; vertical-align: -3px; }
.checklist-address { gap: 8px; flex-wrap: nowrap; }
.checklist-address input { flex: 1; min-width: 0; margin: 0; }

/* Build a deck: a pasted list against the Collection (deck-want-view.js). */
.dw-summary { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.dw-summary strong { font-size: 18px; }
.dw-sub { font-size: 15px; margin: 14px 0 6px; }
.dw-rows { display: flex; flex-direction: column; }
.dw-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.dw-row:last-child { border-bottom: 0; }
.dw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-have { margin-top: 10px; }
.dw-have summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.dw-done { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }