/* ==========================================================================
   Decksmith Web — Design System
   --------------------------------------------------------------------------
   A single stylesheet, no build step. Organised as:
     1. Fonts          5. Controls
     2. Tokens         6. Collection
     3. Base           7. Auth
     4. App shell      8. Motion & responsive
   Dark is the signature theme; light is a full parchment counterpart. Every
   colour is a token — no raw hex below the token block.
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Cinzel';
  src: url('/assets/fonts/Cinzel-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Surfaces — obsidian, warmed slightly so gold sits on it naturally */
  --ds-canvas:        #0a0908;
  --ds-canvas-deep:   #060505;
  --ds-surface:       #131110;
  --ds-surface-raise: #1a1715;
  --ds-surface-high:  #221e1a;
  --ds-scrim:         rgba(6, 5, 5, 0.72);

  /* Ink */
  --ds-text:          #f4ecd8;
  --ds-text-soft:     #c3b9a4;
  --ds-text-mute:     #8d8474;
  --ds-text-faint:    #847c6d;

  /* Brand */
  --ds-gold:          #c9a227;   /* accent text */
  --ds-gold-bright:   #f0cd5b;
  --ds-gold-deep:     #8a6d15;

  /* Gold as a FILL. Identical in both themes so the ink on top always passes
     contrast; only the accent-text gold above shifts with the theme. */
  --ds-gold-fill-a:   #f0cd5b;
  --ds-gold-fill-b:   #cfa62a;
  --ds-gold-fill-c:   #a5811a;
  --ds-gold-ink:      #1a1403;
  --ds-gold-wash:     rgba(201, 162, 39, 0.10);
  --ds-gold-wash-2:   rgba(201, 162, 39, 0.18);

  /* Lines */
  --ds-line:          rgba(244, 236, 216, 0.09);
  --ds-line-strong:   rgba(244, 236, 216, 0.16);
  --ds-line-gold:     rgba(201, 162, 39, 0.28);

  /* Status */
  --ds-danger:        #f06a6f;
  --ds-danger-wash:   rgba(229, 72, 77, 0.14);
  --ds-success:       #56c08a;
  --ds-success-wash:  rgba(86, 192, 138, 0.14);

  /* Mana */
  --ds-mana-w: #f6efd8;
  --ds-mana-u: #4a9de0;
  --ds-mana-b: #4a4340;
  --ds-mana-r: #e0584b;
  --ds-mana-g: #4aa863;
  --ds-mana-c: #a49b8c;

  /* Rarity */
  --ds-rarity-common:   #9b9484;
  --ds-rarity-uncommon: #a8bcc9;
  --ds-rarity-rare:     #d9b74a;
  --ds-rarity-mythic:   #e0703a;

  /* Elevation */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --ds-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.7);
  --ds-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  --ds-shadow-gold: 0 12px 40px -12px rgba(201, 162, 39, 0.35);

  /* Geometry */
  --ds-r-xs: 6px;
  --ds-r-sm: 10px;
  --ds-r-md: 14px;
  --ds-r-lg: 20px;
  --ds-r-xl: 28px;
  --ds-r-pill: 999px;

  /* Rhythm — 4pt scale */
  --ds-1: 4px;   --ds-2: 8px;   --ds-3: 12px;  --ds-4: 16px;
  --ds-5: 20px;  --ds-6: 24px;  --ds-8: 32px;  --ds-10: 40px;
  --ds-12: 48px; --ds-16: 64px; --ds-20: 80px;

  /* Type */
  --ds-font-display: 'Cinzel', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --ds-font-serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --ds-font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
                Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ds-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --ds-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-fast: 140ms;
  --ds-base: 240ms;
  --ds-slow: 420ms;

  /* Layers */
  --ds-z-rail: 30;
  --ds-z-topbar: 40;
  --ds-z-sheet: 80;
  --ds-z-toast: 100;

  /* Metrics */
  --ds-rail-w: 248px;
  --ds-topbar-h: 68px;

  --ds-focus: var(--ds-gold-bright);
  --ds-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

[data-theme='light'] {
  color-scheme: light;

  --ds-canvas:        #f4ecd8;
  --ds-canvas-deep:   #eae0c8;
  --ds-surface:       #fffdf6;
  --ds-surface-raise: #fff8e7;
  --ds-surface-high:  #fdf3dd;
  --ds-scrim:         rgba(48, 36, 22, 0.42);

  --ds-text:          #2a1f16;
  --ds-text-soft:     #5d4b3c;
  --ds-text-mute:     #74624f;
  --ds-text-faint:    #796754;

  --ds-gold:          #8a6410;   /* accent text, darkened for cream surfaces */
  --ds-gold-bright:   #a2761a;
  --ds-gold-deep:     #7a5710;
  /* --ds-gold-fill-* and --ds-gold-ink deliberately inherit from :root. */
  --ds-gold-wash:     rgba(162, 118, 26, 0.10);
  --ds-gold-wash-2:   rgba(162, 118, 26, 0.18);

  --ds-line:          rgba(66, 47, 30, 0.12);
  --ds-line-strong:   rgba(66, 47, 30, 0.20);
  --ds-line-gold:     rgba(162, 118, 26, 0.32);

  --ds-danger:        #b3261e;
  --ds-danger-wash:   rgba(179, 38, 30, 0.10);
  --ds-success:       #256841;
  --ds-success-wash:  rgba(37, 104, 65, 0.12);

  --ds-mana-b: #3a3330;
  --ds-mana-c: #8b8172;

  --ds-rarity-common:   #7d7565;
  --ds-rarity-uncommon: #5f7887;
  --ds-rarity-rare:     #9a7714;
  --ds-rarity-mythic:   #b8501f;

  --ds-shadow-sm: 0 1px 2px rgba(74, 55, 34, 0.10);
  --ds-shadow-md: 0 8px 24px -10px rgba(74, 55, 34, 0.24);
  --ds-shadow-lg: 0 24px 60px -22px rgba(74, 55, 34, 0.32);
  --ds-shadow-gold: 0 12px 36px -14px rgba(162, 118, 26, 0.38);

  --ds-focus: var(--ds-gold-deep);
}

/* 3. Base ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ds-canvas);
  color: var(--ds-text);
  font-family: var(--ds-font-ui);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 3px;
  border-radius: var(--ds-r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--ds-gold-wash-2); color: var(--ds-text); }

/* Any component that sets `display` outranks the user-agent's [hidden] rule,
   so an element toggled with el.hidden stays visible. Restore the intent once,
   globally, rather than per component. */
[hidden] { display: none !important; }

.ds-display {
  font-family: var(--ds-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ds-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
}

.ds-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.ds-mono { font-family: var(--ds-font-mono); }

.ds-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ds-skip {
  position: absolute; left: var(--ds-4); top: -60px; z-index: var(--ds-z-toast);
  padding: var(--ds-3) var(--ds-5);
  background: var(--ds-gold-fill-b); color: var(--ds-gold-ink);
  border-radius: var(--ds-r-sm); font-weight: 600;
  transition: top var(--ds-fast) var(--ds-ease);
}
.ds-skip:focus { top: var(--ds-4); }

/* Grain: one shared texture layer that makes flat panels read as printed stock */
.ds-grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--ds-grain);
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
[data-theme='light'] .ds-grain::after { opacity: 0.22; mix-blend-mode: multiply; }

/* 4. App shell ------------------------------------------------------------ */

.ds-app {
  display: grid;
  grid-template-columns: var(--ds-rail-w) minmax(0, 1fr);
  min-height: 100dvh;
}

/* --- Side rail --- */

.ds-rail {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-rail);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--ds-6);
  padding: var(--ds-6) var(--ds-4) var(--ds-5);
  background:
    linear-gradient(180deg, var(--ds-surface) 0%, var(--ds-canvas) 100%);
  border-right: 1px solid var(--ds-line);
}

.ds-rail__brand {
  display: flex;
  align-items: center;
  gap: var(--ds-3);
  padding: var(--ds-1) var(--ds-3);
}

/* The app icon's hammer and anvil (assets/img/icon/mark.png). */
.ds-mark {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 22%;
  overflow: hidden;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 162, 39, 0.28);
}
.ds-mark img { display: block; width: 100%; height: 100%; }

.ds-wordmark {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-text);
  line-height: 1;
}
.ds-wordmark span { color: var(--ds-gold); }

.ds-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-nav__group + .ds-nav__group { margin-top: var(--ds-5); }
.ds-nav__label {
  padding: 0 var(--ds-3) var(--ds-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-text-faint);
}

.ds-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-3);
  min-height: 44px;
  padding: 0 var(--ds-3);
  border-radius: var(--ds-r-sm);
  color: var(--ds-text-soft);
  font-size: 14.5px;
  font-weight: 500;
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}
.ds-nav__item svg { width: 19px; height: 19px; flex: none; opacity: 0.9; }
.ds-nav__item:hover { background: var(--ds-gold-wash); color: var(--ds-text); }

.ds-nav__item.is-active {
  background: linear-gradient(90deg, var(--ds-gold-wash-2), transparent 78%);
  color: var(--ds-text);
  font-weight: 600;
}
.ds-nav__item.is-active::before {
  content: '';
  position: absolute; left: calc(var(--ds-3) * -1);
  top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ds-gold-bright), var(--ds-gold));
}
.ds-nav__item.is-active svg { color: var(--ds-gold); opacity: 1; }

.ds-nav__item.is-soon {
  color: var(--ds-text-mute);
  cursor: default;
}
.ds-nav__item.is-soon:hover { background: transparent; color: var(--ds-text-mute); }

.ds-soon {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-text-faint);
}

.ds-rail__foot { margin-top: auto; display: grid; gap: var(--ds-2); }

.ds-sync {
  display: flex; align-items: center; gap: var(--ds-2);
  padding: var(--ds-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface-raise);
  font-size: 12px;
  color: var(--ds-text-mute);
}
.ds-sync__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ds-success);
  box-shadow: 0 0 0 3px var(--ds-success-wash);
}

/* For accounts that have never signed in from the app: the App Store, where
   the sync status would otherwise read "never". */
.ds-appcard {
  display: flex; align-items: center; gap: var(--ds-3);
  padding: var(--ds-3);
  border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: var(--ds-r-md);
  background: linear-gradient(150deg, var(--ds-gold-wash), transparent 70%), var(--ds-surface-raise);
  color: var(--ds-text-mute);
  transition: border-color var(--ds-fast) var(--ds-ease), background-color var(--ds-fast) var(--ds-ease);
}
.ds-appcard:hover { border-color: var(--ds-gold); }
.ds-appcard__icon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--ds-gold-wash); color: var(--ds-gold);
}
.ds-appcard__title { display: block; font-size: 13px; font-weight: 600; color: var(--ds-text); white-space: nowrap; }
.ds-appcard__sub { display: block; font-size: 11.5px; white-space: nowrap; }

/* --- Top bar --- */

.ds-main { display: flex; flex-direction: column; min-width: 0; }

.ds-topbar {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-topbar);
  display: flex;
  align-items: center;
  gap: var(--ds-4);
  min-height: var(--ds-topbar-h);
  padding: var(--ds-3) var(--ds-8);
  background: color-mix(in srgb, var(--ds-canvas) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ds-line);
}

.ds-topbar__title {
  font-family: var(--ds-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--ds-base) var(--ds-ease), transform var(--ds-base) var(--ds-ease);
}
/* Revealed by [data-ds-topbar-title] once the page heading leaves the viewport */
.ds-topbar__title.is-visible { opacity: 1; transform: none; }
/* Without IntersectionObserver the script reveals it immediately instead. */
.ds-topbar__spacer { margin-left: auto; }

.ds-content {
  flex: 1;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--ds-8) var(--ds-8) var(--ds-20);
}

/* --- Mobile tab bar (mirrors the iOS tab bar) --- */

.ds-tabbar { display: none; }

/* 5. Controls ------------------------------------------------------------- */

.ds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-2);
  min-height: 44px;
  padding: 0 var(--ds-5);
  border: 1px solid transparent;
  border-radius: var(--ds-r-sm);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  transition: transform var(--ds-fast) var(--ds-ease),
              background var(--ds-fast) var(--ds-ease),
              border-color var(--ds-fast) var(--ds-ease),
              box-shadow var(--ds-base) var(--ds-ease);
}
.ds-btn svg { width: 18px; height: 18px; flex: none; }
.ds-btn:active { transform: scale(0.982); }

.ds-btn--primary {
  background: linear-gradient(160deg, var(--ds-gold-fill-a), var(--ds-gold-fill-b) 55%, var(--ds-gold-fill-c));
  color: var(--ds-gold-ink);
  box-shadow: var(--ds-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Specular sweep — a single slow highlight, not a loop */
.ds-btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%,
              rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform var(--ds-slow) var(--ds-ease-out);
}
.ds-btn--primary:hover::after { transform: translateX(120%); }
.ds-btn--primary:hover { box-shadow: 0 16px 44px -12px rgba(201, 162, 39, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4); }

.ds-btn--ghost {
  background: var(--ds-surface-raise);
  border-color: var(--ds-line);
  color: var(--ds-text);
}
.ds-btn--ghost:hover { background: var(--ds-surface-high); border-color: var(--ds-line-strong); }

.ds-btn--quiet {
  background: transparent;
  color: var(--ds-text-soft);
}
.ds-btn--quiet:hover { background: var(--ds-gold-wash); color: var(--ds-text); }

.ds-btn--block { width: 100%; }
.ds-btn[disabled], .ds-btn.is-busy { pointer-events: none; opacity: 0.55; }

.ds-btn__spinner {
  width: 17px; height: 17px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ds-spin 640ms linear infinite;
}
.ds-btn:not(.is-busy) .ds-btn__spinner { display: none; }
.ds-btn.is-busy .ds-btn__text { opacity: 0.75; }

@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Icon-only control — 44px hit area even when the glyph is 18px */
.ds-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-raise);
  color: var(--ds-text-soft);
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease),
              border-color var(--ds-fast) var(--ds-ease);
}
.ds-icon-btn svg { width: 18px; height: 18px; }
.ds-icon-btn:hover { background: var(--ds-surface-high); color: var(--ds-text); border-color: var(--ds-line-strong); }
.ds-icon-btn.is-active { background: var(--ds-gold-wash-2); color: var(--ds-gold); border-color: var(--ds-line-gold); }

/* --- Fields --- */

.ds-field { position: relative; display: block; }

.ds-field__input {
  width: 100%;
  min-height: 56px;
  padding: 22px var(--ds-4) 8px;
  background: var(--ds-surface-raise);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  color: var(--ds-text);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  transition: border-color var(--ds-fast) var(--ds-ease),
              box-shadow var(--ds-fast) var(--ds-ease),
              background var(--ds-fast) var(--ds-ease);
}
.ds-field__input::placeholder { color: transparent; }
.ds-field__input:hover { border-color: var(--ds-line-strong); }
.ds-field__input:focus {
  outline: none;
  border-color: var(--ds-line-gold);
  background: var(--ds-surface-high);
  box-shadow: 0 0 0 4px var(--ds-gold-wash);
}

.ds-field__label {
  position: absolute;
  left: calc(var(--ds-4) + 1px);
  top: 17px;
  font-size: 16px;
  color: var(--ds-text-mute);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}
.ds-field__input:focus + .ds-field__label,
.ds-field__input:not(:placeholder-shown) + .ds-field__label,
.ds-field__input:-webkit-autofill + .ds-field__label {
  transform: translateY(-11px) scale(0.72);
  color: var(--ds-text-soft);
}
.ds-field__input:focus + .ds-field__label { color: var(--ds-gold); }

.ds-field--invalid .ds-field__input { border-color: var(--ds-danger); }
.ds-field--invalid .ds-field__input:focus { box-shadow: 0 0 0 4px var(--ds-danger-wash); }

.ds-field__reveal {
  position: absolute;
  right: var(--ds-2); top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: var(--ds-r-sm);
  background: transparent;
  color: var(--ds-text-mute);
  transition: color var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease);
}
.ds-field__reveal:hover { color: var(--ds-text); background: var(--ds-gold-wash); }
.ds-field__reveal svg { width: 19px; height: 19px; }
.ds-field:has(.ds-field__reveal) .ds-field__input { padding-right: 52px; }

.ds-help { margin-top: var(--ds-2); font-size: 12.5px; color: var(--ds-text-mute); }
.ds-help--error { color: var(--ds-danger); }

/* Search field — used in the topbar and the collection toolbar */
.ds-search { position: relative; flex: 1; min-width: 0; max-width: 440px; }
.ds-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ds-text-mute); pointer-events: none;
}
.ds-search input {
  width: 100%; min-height: 44px;
  padding: 0 84px 0 40px;
  background: var(--ds-surface-raise);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  color: var(--ds-text);
  font-size: 16px;
  transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
.ds-search input::placeholder { color: var(--ds-text-faint); }
.ds-search input:focus {
  outline: none;
  border-color: var(--ds-line-gold);
  box-shadow: 0 0 0 4px var(--ds-gold-wash);
}
.ds-search__hint {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 3px;
  pointer-events: none;
  transition: opacity var(--ds-fast) var(--ds-ease);
}
.ds-search input:focus ~ .ds-search__hint { opacity: 0; }
.ds-kbd {
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  padding: 0 5px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xs);
  background: var(--ds-surface);
  font-family: var(--ds-font-mono);
  font-size: 10.5px;
  color: var(--ds-text-faint);
}
.ds-search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: none; place-items: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: var(--ds-surface-high);
  color: var(--ds-text-mute);
}
.ds-search.has-value .ds-search__clear { display: grid; }
.ds-search.has-value .ds-search__hint { display: none; }
.ds-search__clear svg { position: static; transform: none; width: 13px; height: 13px; color: inherit; }

/* --- Menu (sort, account) --- */

.ds-menu { position: relative; }
.ds-menu__panel {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  z-index: var(--ds-z-sheet);
  min-width: 236px;
  padding: var(--ds-2);
  background: var(--ds-surface-raise);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-lg);
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  visibility: hidden;
  transition: opacity var(--ds-fast) var(--ds-ease),
              transform var(--ds-fast) var(--ds-ease),
              visibility 0s linear var(--ds-fast);
}
.ds-menu[data-open='true'] .ds-menu__panel {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--ds-fast) var(--ds-ease),
              transform var(--ds-fast) var(--ds-ease),
              visibility 0s linear 0s;
}
.ds-menu__item {
  display: flex; align-items: center; gap: var(--ds-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ds-3);
  border: 0; border-radius: var(--ds-r-sm);
  background: transparent;
  color: var(--ds-text-soft);
  font-size: 14px;
  text-align: left;
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}
.ds-menu__item:hover { background: var(--ds-gold-wash); color: var(--ds-text); }
.ds-menu__item.is-selected { color: var(--ds-gold); font-weight: 600; }
.ds-menu__item svg { width: 16px; height: 16px; margin-left: auto; }
.ds-menu__sep { height: 1px; margin: var(--ds-2) var(--ds-3); background: var(--ds-line); }
.ds-menu__head {
  padding: var(--ds-2) var(--ds-3) var(--ds-1);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ds-text-mute);
}

/* --- Chips, badges, pips --- */

.ds-chip {
  display: inline-flex; align-items: center; gap: var(--ds-2);
  min-height: 32px;
  padding: 0 var(--ds-2) 0 var(--ds-3);
  border: 1px solid var(--ds-line-gold);
  border-radius: var(--ds-r-pill);
  background: var(--ds-gold-wash);
  color: var(--ds-text);
  font-size: 12.5px; font-weight: 500;
  transition: background var(--ds-fast) var(--ds-ease);
}
.ds-chip:hover { background: var(--ds-gold-wash-2); }
.ds-chip svg { width: 13px; height: 13px; opacity: 0.7; }

.ds-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: var(--ds-r-pill);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ds-badge--count {
  min-width: 18px; height: 18px;
  justify-content: center;
  padding: 0 5px;
  background: var(--ds-gold-fill-b); color: var(--ds-gold-ink);
}

.ds-rarity-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ds-rarity-common);
}
.ds-rarity-dot[data-rarity='uncommon'] { background: var(--ds-rarity-uncommon); }
.ds-rarity-dot[data-rarity='rare']     { background: var(--ds-rarity-rare); }
.ds-rarity-dot[data-rarity='mythic']   { background: var(--ds-rarity-mythic); }

.ds-pip {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--ds-mana-c);
  color: #1b1713;
  font-size: 9.5px; font-weight: 700;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.28);
}
.ds-pip.is-w { background: var(--ds-mana-w); }
.ds-pip.is-u { background: var(--ds-mana-u); color: #06131f; }
.ds-pip.is-b { background: var(--ds-mana-b); color: #d9d2c8; }
.ds-pip.is-r { background: var(--ds-mana-r); color: #200705; }
.ds-pip.is-g { background: var(--ds-mana-g); color: #04150a; }
.ds-pip.is-hybrid { background: linear-gradient(135deg, var(--ds-mana-w) 50%, var(--ds-mana-u) 50%); }
.ds-pips { display: inline-flex; gap: 3px; align-items: center; }

/* 6. Collection ----------------------------------------------------------- */

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

.ds-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-6);
  flex-wrap: wrap;
  margin-bottom: var(--ds-6);
}
.ds-page-head h1 {
  font-family: var(--ds-font-display);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: 0.005em;
}
.ds-page-head__sub { margin-top: var(--ds-2); color: var(--ds-text-mute); font-size: 14.5px; }

/* --- Stat plinths --- */

.ds-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--ds-3);
  margin-bottom: var(--ds-8);
}

.ds-stat {
  position: relative;
  overflow: hidden;
  padding: var(--ds-5);
  background: linear-gradient(165deg, var(--ds-surface-raise), var(--ds-surface));
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  transition: transform var(--ds-base) var(--ds-ease), border-color var(--ds-base) var(--ds-ease),
              box-shadow var(--ds-base) var(--ds-ease);
}
.ds-stat::before {
  content: '';
  position: absolute; inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-line-gold) 22%, var(--ds-gold) 50%, var(--ds-line-gold) 78%, transparent);
  opacity: 0.5;
  transition: opacity var(--ds-base) var(--ds-ease);
}
.ds-stat:hover {
  transform: translateY(-2px);
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-md);
}
.ds-stat:hover::before { opacity: 1; }

.ds-stat__label { display: block; margin-bottom: var(--ds-3); }
.ds-stat__value {
  display: block;
  font-family: var(--ds-font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ds-stat__value.is-gold {
  background: linear-gradient(120deg, var(--ds-gold-bright), var(--ds-gold) 60%, var(--ds-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ds-stat__value.is-wishlist { color: var(--ds-danger); }
.ds-stat__meta { margin-top: var(--ds-2); font-size: 12.5px; color: var(--ds-text-mute); }

/* Wishlist — same anatomy as the collection page, tinted so it never reads
   as the real collection. Deliberately reuses --ds-danger rather than a new
   token: the same heart-red accent the iOS app uses for this list. */
.ds-wishlist-heart { color: var(--ds-danger); vertical-align: -4px; margin-right: var(--ds-2); }
.ds-stats--wishlist .ds-stat::before { background: var(--ds-danger); }
.ds-grid--wishlist .ds-tile__frame { outline: 1px solid color-mix(in srgb, var(--ds-danger) 35%, transparent); }

/* --- Toolbar --- */

.ds-toolbar {
  position: sticky;
  top: var(--ds-topbar-h);
  z-index: calc(var(--ds-z-topbar) - 1);
  display: flex;
  align-items: center;
  gap: var(--ds-3);
  flex-wrap: wrap;
  padding: var(--ds-3) 0;
  margin-bottom: var(--ds-4);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--ds-canvas) 92%, transparent) 60%,
      transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ds-toolbar__spacer { margin-left: auto; }

.ds-segment {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-raise);
}
.ds-segment a {
  display: grid; place-items: center;
  width: 36px; height: 34px;
  border-radius: 7px;
  color: var(--ds-text-mute);
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}
.ds-segment a svg { width: 17px; height: 17px; }
.ds-segment a:hover { color: var(--ds-text); }
.ds-segment a.is-active {
  background: var(--ds-surface-high);
  color: var(--ds-gold);
  box-shadow: var(--ds-shadow-sm);
}

.ds-activefilters {
  display: flex; align-items: center; gap: var(--ds-2);
  flex-wrap: wrap;
  margin-bottom: var(--ds-5);
}

.ds-result-line {
  display: flex; align-items: baseline; gap: var(--ds-2);
  margin-bottom: var(--ds-4);
  font-size: 13.5px;
  color: var(--ds-text-mute);
}
.ds-result-line strong { color: var(--ds-text); font-weight: 600; }

/* --- Card grid --- */

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--ds-5) var(--ds-4);
}

.ds-tile { position: relative; display: block; }
.ds-tile__link { display: block; color: inherit; border-radius: var(--ds-r-md); }
.ds-tile__link:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 6px; }

.ds-tile__frame {
  position: relative;
  aspect-ratio: 63 / 88;
  border-radius: 4.75% / 3.4%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--ds-surface-high), var(--ds-surface));
  border: 1px solid var(--ds-line);
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-base) var(--ds-ease-out),
              box-shadow var(--ds-base) var(--ds-ease-out),
              border-color var(--ds-base) var(--ds-ease);
}
.ds-tile__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--ds-slow) var(--ds-ease-out);
}

.ds-tile:hover .ds-tile__frame,
.ds-tile:focus-visible .ds-tile__frame {
  transform: translateY(-6px);
  border-color: var(--ds-line-gold);
  box-shadow: var(--ds-shadow-lg), 0 0 0 1px var(--ds-line-gold), var(--ds-shadow-gold);
}
.ds-tile:hover .ds-tile__frame img { transform: scale(1.035); }

/* Bottom scrim carrying the price, revealed on hover */
.ds-tile__wash {
  position: absolute; inset: auto 0 0;
  padding: var(--ds-6) var(--ds-3) var(--ds-3);
  background: linear-gradient(180deg, transparent, rgba(6, 5, 5, 0.88));
  color: #f4ecd8;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--ds-base) var(--ds-ease), transform var(--ds-base) var(--ds-ease);
}
.ds-tile:hover .ds-tile__wash,
.ds-tile:focus-visible .ds-tile__wash { opacity: 1; transform: none; }

.ds-tile__tags {
  position: absolute; inset: var(--ds-2) var(--ds-2) auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ds-1);
  pointer-events: none;
}

.ds-qty {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  border-radius: var(--ds-r-pill);
  background: rgba(6, 5, 5, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 236, 216, 0.18);
  color: #f4ecd8;
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Foil badge: a still iridescence, animated only on hover */
.ds-foil {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  margin-left: auto;
  border-radius: var(--ds-r-pill);
  background: linear-gradient(115deg, #b98cff, #6fd3ff 28%, #7dfcc0 52%, #ffe37d 74%, #ff9ad5);
  background-size: 260% 100%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #1a1206;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
}
.ds-foil svg { width: 13px; height: 13px; }
.ds-tile:hover .ds-foil { animation: ds-foil-shift 2.4s var(--ds-ease) infinite alternate; }
@keyframes ds-foil-shift { to { background-position: 100% 0; } }

.ds-tile__body { padding: var(--ds-3) 2px 0; }
.ds-tile__name {
  font-size: 13.5px; font-weight: 600;
  line-height: 1.32;
  min-height: 2.64em; /* two lines, so every meta row lands on one baseline */
  color: var(--ds-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--ds-fast) var(--ds-ease);
}
.ds-tile:hover .ds-tile__name { color: var(--ds-gold-bright); }
.ds-tile__meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--ds-1);
  font-size: 11.5px;
  color: var(--ds-text-mute);
}
.ds-tile__set {
  font-family: var(--ds-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ds-tile__price { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ds-text-soft); }
.ds-tile__price.is-unknown, .ds-row__price.is-unknown { color: var(--ds-text-faint); font-weight: 500; }

/* --- Card list --- */

.ds-list {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  overflow: hidden;
  background: var(--ds-surface);
}
.ds-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 2.3fr) minmax(0, 1.7fr) minmax(0, 1.2fr) 60px 92px;
  align-items: center;
  gap: var(--ds-4);
  min-height: 64px;
  padding: var(--ds-2) var(--ds-5);
  border-bottom: 1px solid var(--ds-line);
  color: inherit;
  transition: background var(--ds-fast) var(--ds-ease);
}
.ds-row:last-child { border-bottom: 0; }
.ds-row:hover { background: var(--ds-gold-wash); }
.ds-row__thumb {
  width: 44px; aspect-ratio: 63 / 88;
  border-radius: var(--ds-r-xs);
  overflow: hidden;
  background: var(--ds-surface-high);
  border: 1px solid var(--ds-line);
}
.ds-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-row__name { font-size: 14.5px; font-weight: 600; }
.ds-row__sub {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
  font-size: 12px; color: var(--ds-text-mute);
}
/* Type and set stay on one line: a wrapping set name would make every row a
   different height and destroy the scanning rhythm of the list. */
.ds-row__type, .ds-row__set {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-row__type { font-size: 13px; color: var(--ds-text-soft); }
.ds-row__set { font-size: 12.5px; color: var(--ds-text-mute); }
.ds-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-row__qty, .ds-row__price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.ds-row__price { font-weight: 600; }
.ds-row--head {
  min-height: 40px;
  background: var(--ds-surface-raise);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ds-text-mute);
}
.ds-row--head:hover { background: var(--ds-surface-raise); }

/* --- Pagination --- */

.ds-pager {
  display: flex; align-items: center; justify-content: center;
  gap: var(--ds-2);
  margin-top: var(--ds-10);
}
.ds-pager__link {
  display: grid; place-items: center;
  min-width: 40px; height: 40px;
  padding: 0 var(--ds-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-raise);
  color: var(--ds-text-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease),
              border-color var(--ds-fast) var(--ds-ease);
}
.ds-pager__link:hover { background: var(--ds-surface-high); color: var(--ds-text); border-color: var(--ds-line-strong); }
.ds-pager__link.is-current {
  background: var(--ds-gold-fill-b); border-color: var(--ds-gold-fill-b);
  color: var(--ds-gold-ink); font-weight: 700;
}
.ds-pager__link.is-disabled { opacity: 0.35; pointer-events: none; }
.ds-pager__gap { color: var(--ds-text-faint); padding: 0 var(--ds-1); }
.ds-pager svg { width: 16px; height: 16px; }

/* --- Empty state --- */

.ds-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--ds-3);
  padding: var(--ds-20) var(--ds-6);
  border: 1px dashed var(--ds-line-strong);
  border-radius: var(--ds-r-xl);
  background:
    radial-gradient(80% 120% at 50% 0%, var(--ds-gold-wash), transparent 70%),
    var(--ds-surface);
}
.ds-empty__art { color: var(--ds-gold); opacity: 0.55; }
.ds-empty__art svg { width: 68px; height: 68px; }
.ds-empty h2 { font-family: var(--ds-font-display); font-size: 22px; }
.ds-empty p { max-width: 44ch; color: var(--ds-text-mute); font-size: 14.5px; }
.ds-empty__actions { display: flex; gap: var(--ds-3); flex-wrap: wrap; justify-content: center; margin-top: var(--ds-2); }

/* --- App invitation (web-only accounts, once per session) --- */

body:has(.ds-appmodal) { overflow: hidden; }

.ds-appmodal {
  position: fixed; inset: 0;
  z-index: calc(var(--ds-z-sheet) + 5);
  display: grid; place-items: center;
  padding: var(--ds-4);
}
.ds-appmodal__scrim {
  position: absolute; inset: 0;
  background: var(--ds-scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ds-appmodal-fade var(--ds-slow) var(--ds-ease) both;
}
.ds-appmodal__panel {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100dvh - 2 * var(--ds-4));
  overflow: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-xl);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-lg), var(--ds-shadow-gold);
  animation: ds-appmodal-rise 520ms var(--ds-ease-out) 80ms both;
}
@keyframes ds-appmodal-fade { from { opacity: 0; } }
@keyframes ds-appmodal-rise { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

/* Always the dark stage, in both themes — it is where the phone sits. */
.ds-appmodal__visual {
  position: relative;
  display: grid; place-items: center;
  padding: var(--ds-10) var(--ds-6);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 70% 10%, rgba(201, 162, 39, 0.22), transparent 62%),
    radial-gradient(80% 60% at 10% 100%, rgba(224, 112, 58, 0.14), transparent 60%),
    linear-gradient(168deg, #14110d 0%, #0a0908 50%, #060505 100%);
}
.ds-appmodal__glow {
  position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.28), transparent 70%);
  filter: blur(40px);
}
.ds-appmodal__visual img {
  position: relative;
  width: min(230px, 82%); height: auto;
  filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.75));
  animation: ds-float 9s var(--ds-ease) infinite alternate;
}

.ds-appmodal__body { display: grid; align-content: center; gap: var(--ds-4); padding: var(--ds-10) var(--ds-8); }
.ds-appmodal__body h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.12;
}
.ds-appmodal__lead { color: var(--ds-text-mute); font-size: 15px; line-height: 1.6; }

.ds-appmodal__points { display: grid; gap: var(--ds-3); margin: var(--ds-1) 0; padding: 0; list-style: none; }
.ds-appmodal__points li { display: flex; align-items: flex-start; gap: var(--ds-3); font-size: 14px; line-height: 1.5; color: var(--ds-text-soft); }
.ds-appmodal__points svg { flex: none; margin-top: 1px; color: var(--ds-gold); }
.ds-appmodal__points strong { color: var(--ds-text); font-weight: 600; word-break: break-word; }

.ds-appmodal__actions { display: flex; flex-wrap: wrap; gap: var(--ds-3); margin-top: var(--ds-2); }

.ds-appmodal__qr {
  display: flex; align-items: center; gap: var(--ds-4);
  margin-top: var(--ds-2); padding-top: var(--ds-4);
  border-top: 1px solid var(--ds-line);
  font-size: 12.5px; line-height: 1.5; color: var(--ds-text-mute);
}
.ds-appmodal__qr strong { color: var(--ds-text); font-weight: 600; }
.ds-appmodal__qr img {
  flex: none; width: 88px; height: 88px;
  padding: 7px; border-radius: 12px;
  background: #f4ecd8;
}
/* A phone is already the device the code would send you to. */
@media (hover: none), (max-width: 720px) {
  .ds-appmodal__qr { display: none; }
}

@media (max-width: 720px) {
  .ds-appmodal { place-items: end center; padding: var(--ds-3); }
  .ds-appmodal__panel { grid-template-columns: 1fr; border-radius: var(--ds-r-lg); }
  .ds-appmodal__visual { height: 170px; padding: 0; place-items: start center; }
  .ds-appmodal__visual img { width: 128px; margin-top: var(--ds-6); animation: none; }
  .ds-appmodal__body { padding: var(--ds-6) var(--ds-5) var(--ds-5); }
  .ds-appmodal__actions .ds-btn { flex: 1 1 100%; }
}

/* --- Filter sheet --- */

.ds-sheet-scrim {
  position: fixed; inset: 0;
  z-index: var(--ds-z-sheet);
  background: var(--ds-scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ds-base) var(--ds-ease), visibility 0s linear var(--ds-base);
}
.ds-sheet {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--ds-z-sheet) + 1);
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--ds-surface);
  border-left: 1px solid var(--ds-line-strong);
  box-shadow: var(--ds-shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--ds-base) var(--ds-ease), visibility 0s linear var(--ds-base);
}
/* A page can carry more than one drawer (/decks has filters and new-deck), so
   the open state is the sheet's own class, not the body's. The body class
   stays for the things that really are page-wide: the scroll lock and the
   scrim behind whichever sheet is open. */
.ds-sheet.is-open + .ds-sheet-scrim {
  opacity: 1; visibility: visible;
  transition: opacity var(--ds-base) var(--ds-ease), visibility 0s linear 0s;
}
.ds-sheet.is-open {
  transform: none; visibility: visible;
  transition: transform var(--ds-base) var(--ds-ease), visibility 0s linear 0s;
}
body.ds-sheet-open { overflow: hidden; }

.ds-sheet__head {
  display: flex; align-items: center; gap: var(--ds-3);
  padding: var(--ds-5) var(--ds-5) var(--ds-4);
  border-bottom: 1px solid var(--ds-line);
}
.ds-sheet__head h2 { font-family: var(--ds-font-display); font-size: 19px; }
.ds-sheet__body { flex: 1; overflow-y: auto; padding: var(--ds-5); display: grid; gap: var(--ds-6); }
.ds-sheet__foot {
  display: flex; gap: var(--ds-3);
  padding: var(--ds-4) var(--ds-5);
  padding-bottom: calc(var(--ds-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ds-line);
  background: var(--ds-surface-raise);
}
.ds-sheet__foot .ds-btn { flex: 1; }

.ds-fieldset { border: 0; padding: 0; margin: 0; }
.ds-fieldset legend {
  padding: 0 0 var(--ds-3);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ds-text-mute);
}
.ds-optgrid { display: flex; flex-wrap: wrap; gap: var(--ds-2); }

/* Checkbox rendered as a tappable chip */
.ds-opt { position: relative; }
.ds-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-opt > span {
  display: inline-flex; align-items: center; gap: var(--ds-2);
  min-height: 40px;
  padding: 0 var(--ds-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface-raise);
  color: var(--ds-text-soft);
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease),
              color var(--ds-fast) var(--ds-ease);
}
.ds-opt > span:hover { border-color: var(--ds-line-strong); color: var(--ds-text); }
.ds-opt input:checked + span {
  background: var(--ds-gold-wash-2);
  border-color: var(--ds-line-gold);
  color: var(--ds-text);
  font-weight: 600;
}
.ds-opt input:focus-visible + span { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-opt__count { color: var(--ds-text-faint); font-variant-numeric: tabular-nums; font-size: 12px; }

/* Mana pip toggle — larger, tactile, colour-true */
.ds-opt--mana > span {
  width: 44px; height: 44px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
}
.ds-opt--mana .ds-pip { width: 26px; height: 26px; font-size: 13px; }
.ds-opt--mana input:checked + span {
  border-color: var(--ds-gold);
  box-shadow: 0 0 0 3px var(--ds-gold-wash-2);
}

.ds-switch { display: flex; align-items: center; gap: var(--ds-3); min-height: 44px; cursor: pointer; }
.ds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-switch__track {
  position: relative;
  width: 46px; height: 28px; flex: none;
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface-high);
  border: 1px solid var(--ds-line);
  transition: background var(--ds-base) var(--ds-ease), border-color var(--ds-base) var(--ds-ease);
}
.ds-switch__track::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ds-text-mute);
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-base) var(--ds-ease), background var(--ds-base) var(--ds-ease);
}
.ds-switch input:checked + .ds-switch__track { background: var(--ds-gold-fill-b); border-color: var(--ds-gold-fill-b); }
.ds-switch input:checked + .ds-switch__track::after { transform: translateX(18px); background: var(--ds-gold-ink); }
.ds-switch input:focus-visible + .ds-switch__track { outline: 2px solid var(--ds-focus); outline-offset: 3px; }
.ds-switch__text { font-size: 14px; }

/* --- Banner --- */

.ds-banner {
  display: flex; align-items: flex-start; gap: var(--ds-3);
  padding: var(--ds-3) var(--ds-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface-raise);
  font-size: 14px;
}
.ds-banner svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ds-banner--error { border-color: var(--ds-danger); background: var(--ds-danger-wash); color: var(--ds-danger); }
.ds-banner--success { border-color: var(--ds-success); background: var(--ds-success-wash); color: var(--ds-success); }
.ds-banner + .ds-form { margin-top: var(--ds-5); }

/* --- Avatar --- */

.ds-avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ds-gold-fill-a), var(--ds-gold-fill-c));
  color: var(--ds-gold-ink);
  font-weight: 700; font-size: 14px;
  border: 1px solid var(--ds-line-gold);
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* The avatar is a 36px circle by design, but the button around it is 44px:
   `overflow: hidden` on the circle would clip any pseudo-element used to
   stretch the hit area, so the target is a real wrapper instead. */
.ds-avatar-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0; border: 0;
  border-radius: 50%;
  background: transparent;
}
.ds-avatar--lg { width: 46px; height: 46px; font-size: 17px; }

.ds-account { display: flex; align-items: center; gap: var(--ds-3); }
.ds-account__name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.ds-account__mail { font-size: 12px; color: var(--ds-text-mute); }

/* 7. Auth ----------------------------------------------------------------- */

.ds-auth {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  min-height: 100dvh;
}

/* --- Left: the stage --- */

.ds-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ds-10) var(--ds-12);
  background:
    radial-gradient(120% 100% at 78% 8%, rgba(201, 162, 39, 0.16), transparent 58%),
    radial-gradient(90% 80% at 12% 96%, rgba(224, 112, 58, 0.12), transparent 60%),
    linear-gradient(168deg, #14110d 0%, #0a0908 45%, #060505 100%);
  color: #f4ecd8;
  isolation: isolate;
}

/* Two slow-drifting auras give the panel depth without any imagery */
.ds-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
}
.ds-aura--gold {
  width: 48vw; height: 48vw;
  top: -20vw; right: -16vw;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.22), transparent 70%);
  animation: ds-drift-a 32s var(--ds-ease) infinite alternate;
}
.ds-aura--ember {
  width: 40vw; height: 40vw;
  bottom: -16vw; left: -8vw;
  background: radial-gradient(circle, rgba(224, 112, 58, 0.18), transparent 70%);
  animation: ds-drift-b 38s var(--ds-ease) infinite alternate;
}
@keyframes ds-drift-a { to { transform: translate3d(-5%, 7%, 0) scale(1.12); } }
@keyframes ds-drift-b { to { transform: translate3d(7%, -6%, 0) scale(1.08); } }

.ds-stage__top { display: flex; align-items: center; gap: var(--ds-3); }
.ds-stage__foot { display: block; }
.ds-stage__top .ds-wordmark { color: #f4ecd8; }

.ds-stage__lede { max-width: 30ch; }
.ds-stage__lede h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0.004em;
}
.ds-stage__lede h2 em {
  font-style: normal;
  background: linear-gradient(110deg, var(--ds-gold-bright), #f7e6a8 45%, var(--ds-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ds-stage__lede p {
  margin-top: var(--ds-4);
  max-width: 38ch;
  color: rgba(244, 236, 216, 0.62);
  font-size: 15.5px;
  line-height: 1.6;
}

.ds-stage__stats {
  display: flex; gap: var(--ds-10);
  margin-top: var(--ds-8);
  padding-top: var(--ds-5);
  border-top: 1px solid rgba(244, 236, 216, 0.1);
  max-width: 460px;
}
.ds-stage__stat { white-space: nowrap; }
.ds-stage__stat b {
  display: block;
  font-family: var(--ds-font-display);
  font-size: 21px; font-weight: 700;
  color: var(--ds-gold-bright);
}
.ds-stage__stat span {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(244, 236, 216, 0.42);
}

/* --- The card fan: four real cards, held like a hand --- */

.ds-fan {
  position: absolute;
  right: 22%;
  top: 34%;
  transform: translateY(-50%);
  width: min(15.5vw, 240px);
  aspect-ratio: 63 / 88;
  pointer-events: none;
  z-index: -1;
}

/* Each card sits on the one to its left and is lit a little more, so the
   hand reads front to back towards the gold aura in the top-right corner. */
.ds-fan__card {
  position: absolute;
  inset: 0;
  border-radius: 4.8% / 3.4%;
  overflow: hidden;
  background: #0d0b09;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 115%;
  transform: rotate(var(--fan-r)) translateX(var(--fan-x));
  filter: brightness(var(--fan-lit));
  animation: ds-float var(--fan-t) var(--ds-ease) var(--fan-d) infinite alternate;
}
.ds-fan__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Specular streak across the card face */
.ds-fan__card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 34%, rgba(244, 236, 216, 0.12) 47%, transparent 60%);
}

.ds-fan__card:nth-child(1) { --fan-r: -14deg; --fan-x: -22%; --fan-lit: 0.5;  --fan-t: 11s;   --fan-d: 0.6s; }
.ds-fan__card:nth-child(2) { --fan-r: -4.5deg; --fan-x: -7%; --fan-lit: 0.66; --fan-t: 10s;   --fan-d: 0.2s; }
.ds-fan__card:nth-child(3) { --fan-r: 4.5deg; --fan-x: 7%;  --fan-lit: 0.82; --fan-t: 10.5s; --fan-d: 0.9s; }
.ds-fan__card:nth-child(4) {
  --fan-r: 14deg; --fan-x: 22%; --fan-lit: 1; --fan-t: 9s; --fan-d: 0s;
  box-shadow:
    0 50px 110px -30px rgba(0, 0, 0, 0.95),
    0 0 60px -20px rgba(201, 162, 39, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.55);
}

@keyframes ds-float { to { translate: 0 -14px; } }

/* --- Right: the panel --- */

.ds-panel {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: stretch;
  padding: var(--ds-10) var(--ds-12);
  background: var(--ds-canvas);
  border-left: 1px solid var(--ds-line);
}

.ds-panel__inner { width: 100%; max-width: 400px; margin: 0 auto; }

.ds-panel__brand { display: none; align-items: center; gap: var(--ds-3); margin-bottom: var(--ds-8); }

.ds-panel h1 {
  font-family: var(--ds-font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
}
.ds-panel__sub {
  margin-top: var(--ds-3);
  margin-bottom: var(--ds-8);
  color: var(--ds-text-mute);
  font-size: 15px;
  line-height: 1.6;
}

.ds-form { display: grid; gap: var(--ds-4); }
/* Sign-up honeypot: off-screen rather than display:none, which some bots skip. */
.ds-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ds-form__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-3); }

.ds-link {
  color: var(--ds-gold);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--ds-r-xs);
  transition: color var(--ds-fast) var(--ds-ease);
}
.ds-link:hover { color: var(--ds-gold-bright); text-decoration: underline; text-underline-offset: 3px; }

.ds-rule {
  display: flex; align-items: center; gap: var(--ds-4);
  margin: var(--ds-8) 0 var(--ds-5);
  color: var(--ds-text-faint);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.ds-rule::before, .ds-rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-line-strong), transparent);
}

.ds-aside {
  padding: var(--ds-4) var(--ds-5);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  font-size: 13.5px;
  color: var(--ds-text-mute);
  line-height: 1.55;
}
.ds-aside strong { color: var(--ds-text); font-weight: 600; }

.ds-panel__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-4);
  margin-top: var(--ds-10);
  font-size: 12.5px;
  color: var(--ds-text-faint);
}
.ds-panel__foot a:hover { color: var(--ds-text-soft); }

/* Theme toggle: sun/moon crossfade, no layout shift */
.ds-theme-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-raise);
  color: var(--ds-text-mute);
  transition: color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}
.ds-theme-toggle:hover { color: var(--ds-gold); border-color: var(--ds-line-gold); }
.ds-theme-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity var(--ds-base) var(--ds-ease), transform var(--ds-base) var(--ds-ease); }
.ds-theme-toggle .ds-icon-sun { opacity: 1; }
.ds-theme-toggle .ds-icon-moon { opacity: 0; transform: rotate(-40deg) scale(0.8); }
[data-theme='light'] .ds-theme-toggle .ds-icon-sun { opacity: 0; transform: rotate(40deg) scale(0.8); }
[data-theme='light'] .ds-theme-toggle .ds-icon-moon { opacity: 1; transform: none; }

/* 8. Motion & responsive --------------------------------------------------- */

/* Grid items ease in on first paint, staggered by --i (set inline per tile) */
@media (prefers-reduced-motion: no-preference) {
  .ds-reveal {
    animation: ds-rise var(--ds-slow) var(--ds-ease-out) both;
    animation-delay: calc(var(--i, 0) * 26ms);
  }
  @keyframes ds-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ds-tile:hover .ds-tile__frame { transform: none; }
  .ds-tile__wash { opacity: 1; transform: none; }
}

/* --- Tablet --- */
@media (max-width: 1180px) {
  :root { --ds-rail-w: 76px; }
  .ds-rail { padding-inline: var(--ds-3); align-items: stretch; }
  .ds-rail__brand { padding: var(--ds-1); }
  /* Hide the labels, not the status dot — `.ds-sync span` would match both. */
  .ds-rail .ds-wordmark,
  .ds-nav__item span:not(.ds-soon),
  .ds-nav__label,
  .ds-sync span:not(.ds-sync__dot) { display: none; }
  .ds-nav__item { justify-content: center; padding: 0; width: 100%; min-width: 48px; }
  .ds-rail__brand { justify-content: center; }
  .ds-nav__item .ds-soon { display: none; }
  .ds-sync { justify-content: center; }
  .ds-content { padding-inline: var(--ds-6); }
  .ds-topbar { padding-inline: var(--ds-6); }
}

/* --- Auth stacks before the grid does --- */
@media (max-width: 1024px) {
  .ds-auth { grid-template-columns: 1fr; }
  .ds-stage {
    min-height: 300px;
    padding: var(--ds-8) var(--ds-6);
    justify-content: flex-end;
  }
  .ds-stage__stats { display: none; }
  .ds-fan { width: min(22vw, 190px); right: 15%; top: 54%; opacity: 0.8; }
  .ds-panel { border-left: 0; padding: var(--ds-8) var(--ds-6) var(--ds-10); }
  .ds-panel__inner { max-width: 420px; }
}

/* --- Phone --- */
@media (max-width: 760px) {
  body { font-size: 15px; }

  .ds-app { grid-template-columns: 1fr; }
  .ds-rail { display: none; }

  .ds-topbar { padding-inline: var(--ds-4); gap: var(--ds-3); }
  .ds-topbar__title { display: none; }
  .ds-content { padding: var(--ds-6) var(--ds-4) calc(var(--ds-20) + env(safe-area-inset-bottom)); }

  .ds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-2); }
  .ds-stat { padding: var(--ds-4); border-radius: var(--ds-r-md); }

  .ds-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--ds-4) var(--ds-3); }

  /* Touch has no hover: keep the price permanently legible */
  .ds-tile__wash { opacity: 1; transform: none; }

  .ds-row { grid-template-columns: 40px minmax(0, 1fr) 76px; gap: var(--ds-3); padding-inline: var(--ds-4); }
  .ds-row__type, .ds-row__set, .ds-row__qty { display: none; }
  .ds-row--head { display: none; }

  .ds-toolbar { top: var(--ds-topbar-h); gap: var(--ds-2); }
  .ds-search { max-width: none; flex-basis: 100%; }

  .ds-sheet { width: 100vw; }

  /* Bottom tab bar mirrors the iOS tab bar */
  .ds-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--ds-z-topbar);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 6px var(--ds-2) calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ds-canvas) 86%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--ds-line);
  }
  .ds-tabbar > a,
  .ds-tabbar > span {
    display: grid; justify-items: center; align-content: center; gap: 3px;
    min-height: 50px;
    border-radius: var(--ds-r-sm);
    color: var(--ds-text-faint);
    font-size: 10.5px; font-weight: 500;
    text-align: center;
  }
  .ds-tabbar svg { width: 21px; height: 21px; }
  .ds-tabbar .is-active { color: var(--ds-gold); font-weight: 600; }
  .ds-tabbar .is-soon { color: var(--ds-text-mute); }

  .ds-panel__brand { display: flex; }
  /* The panel carries the wordmark on phones, so the stage drops its own. */
  .ds-stage__top { display: none; }
  .ds-stage { min-height: 0; padding: var(--ds-10) var(--ds-4) var(--ds-8); }
  .ds-stage__lede h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .ds-stage__lede p { margin-top: var(--ds-3); font-size: 14.5px; }
  .ds-fan { display: none; }
  .ds-panel__foot { flex-direction: column-reverse; align-items: flex-start; gap: var(--ds-4); }
}

@media (max-width: 400px) {
  .ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-stats { grid-template-columns: 1fr 1fr; }
}

@media print {
  .ds-rail, .ds-topbar, .ds-tabbar, .ds-toolbar, .ds-sheet, .ds-sheet-scrim, .ds-appmodal { display: none !important; }
  body { background: #fff; color: #000; }
}

.ds-menu__account { padding: var(--ds-3); }

/* No-JS fallback: the filter drawer opens as a :target */
.ds-sheet:target { transform: none; visibility: visible; transition-delay: 0s; }
.ds-sheet:target + .ds-sheet-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }

/* 9. Card detail ---------------------------------------------------------- */

/* The card's own art, blurred far past recognition, as ambient light for the
   page. It tells you which card you're on before you read a word. */
.ds-card-ambient {
  position: fixed;
  inset: var(--ds-topbar-h) 0 auto 0;
  height: 62vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 88%);
}
.ds-card-ambient img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(64px) saturate(150%);
  transform: scale(1.35);
  opacity: 0.4;
}
[data-theme='light'] .ds-card-ambient img { filter: blur(64px) saturate(130%); opacity: 0.34; }

.ds-backlink {
  display: inline-flex; align-items: center; gap: var(--ds-2);
  min-height: 40px;
  margin-bottom: var(--ds-5);
  padding: 0 var(--ds-3) 0 var(--ds-2);
  border-radius: var(--ds-r-pill);
  color: var(--ds-text-mute);
  font-size: 13.5px; font-weight: 500;
  transition: color var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease);
}
.ds-backlink:hover { color: var(--ds-text); background: var(--ds-gold-wash); }
.ds-backlink svg { transition: transform var(--ds-fast) var(--ds-ease); }
.ds-backlink:hover svg { transform: translateX(-2px); }

.ds-card-detail {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: var(--ds-12);
  align-items: start;
}

/* --- Artwork --- */

.ds-card-stage { position: sticky; top: calc(var(--ds-topbar-h) + var(--ds-6)); }

.ds-card-3d { perspective: 1400px; }

.ds-card-flipper {
  position: relative;
  aspect-ratio: 63 / 88;
  transform-style: preserve-3d;
  will-change: transform;
}

.ds-card-face {
  position: absolute; inset: 0;
  border-radius: 4.75% / 3.4%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--ds-surface-high);
  box-shadow:
    0 42px 80px -28px rgba(0, 0, 0, 0.75),
    0 0 0 1px var(--ds-line-gold),
    0 0 70px -30px rgba(201, 162, 39, 0.55);
}
.ds-card-face img { width: 100%; height: 100%; object-fit: cover; }
.ds-card-face--back { transform: rotateY(180deg); }

/* A specular highlight that tracks the pointer, driven by --mx/--my */
.ds-card-sheen {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(
    36% 44% at calc(var(--mx, 50%) * 1%) calc(var(--my, 50%) * 1%),
    rgba(255, 255, 255, 0.22), transparent 68%);
  opacity: 0;
  transition: opacity var(--ds-base) var(--ds-ease);
}
.ds-card-3d:hover .ds-card-sheen { opacity: 1; }

/* Foils get a holographic wash that shifts with the same pointer position */
.ds-card-foil {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0.34;
  background: linear-gradient(
    calc(var(--mx, 50) * 2.4deg + 60deg),
    rgba(122, 61, 255, 0.55) 0%,
    rgba(61, 200, 255, 0.5) 22%,
    rgba(80, 255, 176, 0.45) 42%,
    rgba(255, 226, 106, 0.5) 62%,
    rgba(255, 122, 200, 0.55) 82%,
    rgba(122, 61, 255, 0.5) 100%);
  background-size: 260% 260%;
}

.ds-card-stage__actions {
  display: flex; align-items: center; gap: var(--ds-3);
  margin-top: var(--ds-5);
}

.ds-quantity-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-height: 44px;
  padding: 0 var(--ds-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface-raise);
  color: var(--ds-text-soft);
  font-size: 13.5px;
}
.ds-quantity-pill .ds-num { font-size: 17px; font-weight: 700; color: var(--ds-text); }

/* --- Facts column --- */

.ds-card-body { display: grid; gap: var(--ds-8); min-width: 0; }

.ds-card-head h1 {
  margin-top: var(--ds-2);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: 0.004em;
}

.ds-card-line {
  display: flex; align-items: center; gap: var(--ds-3);
  flex-wrap: wrap;
  margin-top: var(--ds-4);
}
.ds-card-type { font-size: 15.5px; color: var(--ds-text-soft); }

.ds-card-tags { display: flex; flex-wrap: wrap; gap: var(--ds-2); margin-top: var(--ds-4); }

.ds-tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px;
  padding: 0 var(--ds-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface-raise);
  color: var(--ds-text-soft);
  font-size: 12.5px; font-weight: 500;
}
.ds-tag--gold { border-color: var(--ds-line-gold); background: var(--ds-gold-wash); color: var(--ds-gold); }
.ds-tag--stats { font-weight: 700; color: var(--ds-text); }

/* --- Value --- */

.ds-value {
  padding: var(--ds-6);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  background: linear-gradient(165deg, var(--ds-surface-raise), var(--ds-surface));
}
.ds-value__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-3); }
.ds-value__main .ds-eyebrow { flex-basis: 100%; margin-bottom: var(--ds-2); }
.ds-value__now {
  font-family: var(--ds-font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(120deg, var(--ds-gold-bright), var(--ds-gold) 60%, var(--ds-gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ds-delta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px var(--ds-3);
  border-radius: var(--ds-r-pill);
  font-size: 13px; font-weight: 600;
}
.ds-delta.is-up   { background: var(--ds-success-wash); color: var(--ds-success); }
.ds-delta.is-down { background: var(--ds-danger-wash);  color: var(--ds-danger); }

.ds-value__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--ds-4);
  margin: var(--ds-6) 0 0;
  padding-top: var(--ds-5);
  border-top: 1px solid var(--ds-line);
}
.ds-value__grid dt {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ds-text-mute);
}
.ds-value__grid dd { margin: var(--ds-1) 0 0; font-size: 15px; font-weight: 600; }

/* --- Oracle text --- */

.ds-oracle {
  padding: var(--ds-5) var(--ds-6);
  border: 1px solid var(--ds-line);
  border-left: 2px solid var(--ds-line-gold);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
}
.ds-oracle h2 { margin-bottom: var(--ds-3); }
.ds-oracle__body {
  font-family: var(--ds-font-serif);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--ds-text);
  max-width: 62ch;
}
.ds-oracle--back .ds-card-type { margin-bottom: var(--ds-3); font-size: 14px; }
.ds-oracle--back .ds-tag { margin-top: var(--ds-3); }

/* --- Fact lists --- */

.ds-section-label { display: block; margin-bottom: var(--ds-4); }

.ds-facts { margin: 0; display: grid; gap: 0; }
.ds-facts > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ds-4);
  padding: var(--ds-3) 0;
  border-bottom: 1px solid var(--ds-line);
}
.ds-facts > div:last-child { border-bottom: 0; }
.ds-facts dt { color: var(--ds-text-mute); font-size: 13.5px; }
.ds-facts dd { margin: 0; font-size: 14.5px; font-weight: 500; text-align: right; }

.ds-decklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-2); }
.ds-decklist > li { display: block; }
.ds-decklist__item {
  display: flex; align-items: center; gap: var(--ds-3);
  min-height: 52px;
  padding: 0 var(--ds-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface-raise);
}
.ds-decklist__name { font-weight: 600; font-size: 14.5px; }
.ds-decklist__meta { font-size: 12.5px; color: var(--ds-text-mute); }
.ds-decklist__qty { margin-left: auto; color: var(--ds-text-soft); font-weight: 600; }
/* Each entry is a link to the deck itself now that decks have pages. */
a.ds-decklist__item { color: inherit; transition: border-color var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease); }
a.ds-decklist__item:hover { border-color: var(--ds-line-gold); background: var(--ds-surface-high); }
a.ds-decklist__item:hover .ds-decklist__name { color: var(--ds-gold-bright); }
a.ds-decklist__item:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-decklist__go { flex: none; color: var(--ds-text-faint); }
a.ds-decklist__item:hover .ds-decklist__go { color: var(--ds-gold); }

/* --- Other printings --- */

.ds-printings { display: flex; flex-wrap: wrap; gap: var(--ds-3); }
.ds-printing {
  position: relative;
  display: grid; justify-items: center; gap: 6px;
  width: 74px;
  transition: transform var(--ds-base) var(--ds-ease-out);
}
.ds-printing:hover { transform: translateY(-4px); }
.ds-printing__thumb {
  width: 74px; aspect-ratio: 63 / 88;
  border-radius: var(--ds-r-xs);
  overflow: hidden;
  background: var(--ds-surface-high);
  border: 1px solid var(--ds-line);
  transition: border-color var(--ds-base) var(--ds-ease), box-shadow var(--ds-base) var(--ds-ease);
}
.ds-printing:hover .ds-printing__thumb {
  border-color: var(--ds-line-gold);
  box-shadow: var(--ds-shadow-md);
}
.ds-printing__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-printing__code {
  font-family: var(--ds-font-mono);
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--ds-text-mute);
}
.ds-printing__foil {
  position: absolute; top: 4px; right: 4px;
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(115deg, #b98cff, #6fd3ff 30%, #7dfcc0 55%, #ffe37d 78%, #ff9ad5);
  color: #1a1206;
}

.ds-card-note {
  padding-top: var(--ds-5);
  border-top: 1px solid var(--ds-line);
  font-size: 13px;
  color: var(--ds-text-mute);
}

@media (max-width: 1024px) {
  .ds-card-detail { grid-template-columns: minmax(0, 1fr); gap: var(--ds-8); }
  .ds-card-stage { position: static; width: min(340px, 100%); margin: 0 auto; }
  .ds-card-stage__actions { justify-content: center; }
}

@media (max-width: 760px) {
  .ds-card-ambient { height: 40vh; }
  .ds-value { padding: var(--ds-5) var(--ds-4); }
  .ds-oracle { padding: var(--ds-4); }
  .ds-facts > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ds-facts dd { text-align: left; }
}

/* 10. Motion handover ------------------------------------------------------
   `.ds-motion` is set by assets/js/motion.js once the module has loaded.
   Under it, CSS steps back from anything Motion drives, so the two never
   fight over the same property. Without the module, the CSS below is the
   whole animation story and everything still works. */

.ds-motion .ds-reveal { animation: none; }

/* Motion animates the drawer's transform; CSS keeps only the visibility
   bookkeeping that makes focus management correct. */
.ds-motion .ds-sheet { transition: visibility 0s linear var(--ds-base); }
.ds-motion .ds-sheet.is-open { transition: visibility 0s linear 0s; }
.ds-motion .ds-sheet-scrim { transition: visibility 0s linear var(--ds-base); }
.ds-motion .ds-sheet.is-open + .ds-sheet-scrim { transition: visibility 0s linear 0s; }
.ds-motion .ds-menu__panel { transition: visibility 0s linear var(--ds-fast); }
.ds-motion .ds-menu[data-open='true'] .ds-menu__panel { transition: visibility 0s linear 0s; }

/* Held back until the arriving card has somewhere to land. */
.ds-tx-pending [data-ds-seq],
.ds-tx-pending .ds-card-ambient,
.ds-tx-pending .ds-backlink { opacity: 0; }

/* The card is the one thing that must not blink during the handover. */
.ds-card-3d { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .ds-tx-pending [data-ds-seq],
  .ds-tx-pending .ds-card-ambient,
  .ds-tx-pending .ds-backlink { opacity: 1; }
  .ds-card-ambient { opacity: 1; }
}

/* 11. Card search --------------------------------------------------------- */

.ds-search--wide { max-width: 620px; flex: 1; }

.ds-starters { max-width: 760px; }
.ds-chip--action {
  min-height: 40px;
  padding-right: var(--ds-3);
  gap: var(--ds-3);
  font-weight: 600;
}
.ds-chip--action code {
  padding: 2px 6px;
  border-radius: var(--ds-r-xs);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  color: var(--ds-text-mute);
  font-size: 11.5px;
  font-weight: 400;
}
.ds-starters__note { margin-top: var(--ds-5); font-size: 13.5px; color: var(--ds-text-mute); }

/* --- Result tile: a card you don't own yet --- */

.ds-tile--result .ds-tile__frame { cursor: default; }

.ds-owned {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-success);
  color: #06140d;
  font-size: 11.5px; font-weight: 700;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
}
[data-theme='light'] .ds-owned { color: #f2fff8; }
.ds-owned.is-hidden { display: none; }
.ds-owned svg { width: 12px; height: 12px; }

/* The add button lives on the artwork, revealed on hover and always present
   for touch and keyboard. */
.ds-tile__add {
  position: absolute;
  inset: auto var(--ds-2) var(--ds-2);
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--ds-base) var(--ds-ease), transform var(--ds-base) var(--ds-ease);
}
.ds-tile--result:hover .ds-tile__add,
.ds-tile--result:focus-within .ds-tile__add { opacity: 1; transform: none; }

.ds-btn--add {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--ds-4);
  font-size: 13.5px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* --- Printing sheet --- */

.ds-sheet--print { width: min(460px, 100vw); }

.ds-print-hero { display: flex; gap: var(--ds-4); align-items: flex-start; }
.ds-print-hero__art {
  position: relative;
  width: 132px; flex: none;
  aspect-ratio: 63 / 88;
  border-radius: 4.75% / 3.4%;
  overflow: hidden;
  background: var(--ds-surface-high);
  border: 1px solid var(--ds-line);
  box-shadow: var(--ds-shadow-md);
}
.ds-print-hero__art img { width: 100%; height: 100%; object-fit: cover; }
.ds-print-hero__skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ds-surface-high) 30%, var(--ds-surface-raise) 50%, var(--ds-surface-high) 70%);
  background-size: 220% 100%;
  animation: ds-shimmer 1.4s linear infinite;
}
@keyframes ds-shimmer { to { background-position: -120% 0; } }
.ds-print-hero__skeleton[hidden] { display: none; }

.ds-print-hero__facts { min-width: 0; }
.ds-print-hero__facts h3 { margin: var(--ds-1) 0 var(--ds-2); font-size: 19px; }
.ds-print-hero__price {
  margin-top: var(--ds-3);
  font-family: var(--ds-font-display);
  font-size: 22px; font-weight: 700;
  color: var(--ds-gold);
}

.ds-printlist { display: grid; gap: 6px; max-height: 264px; overflow-y: auto; padding-right: 4px; }
.ds-print-loading { font-size: 13.5px; color: var(--ds-text-mute); }

.ds-print {
  display: flex; align-items: center; gap: var(--ds-3);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--ds-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-raise);
  color: var(--ds-text-soft);
  text-align: left;
  transition: border-color var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease);
}
.ds-print:hover { background: var(--ds-surface-high); border-color: var(--ds-line-strong); }
.ds-print.is-selected {
  border-color: var(--ds-line-gold);
  background: var(--ds-gold-wash-2);
  color: var(--ds-text);
}
.ds-print__code {
  font-family: var(--ds-font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ds-gold);
  flex: none; min-width: 42px;
}
.ds-print__name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-print__meta { margin-top: 1px; font-size: 11.5px; color: var(--ds-text-mute); }
.ds-print__price { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
.ds-print__owned { flex: none; color: var(--ds-success); }
.ds-print__owned svg { width: 15px; height: 15px; }

.ds-stepper { display: flex; align-items: center; gap: var(--ds-2); }
.ds-stepper .ds-icon-btn { width: 44px; height: 44px; font-size: 19px; line-height: 1; }
.ds-stepper__value {
  width: 72px; height: 44px;
  padding: 0;
  text-align: center;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-raise);
  font-size: 16px; font-weight: 600;
}
.ds-stepper__value::-webkit-outer-spin-button,
.ds-stepper__value::-webkit-inner-spin-button { appearance: none; margin: 0; }
.ds-stepper__value { appearance: textfield; -moz-appearance: textfield; }
.ds-stepper__value:focus { outline: none; border-color: var(--ds-line-gold); box-shadow: 0 0 0 4px var(--ds-gold-wash); }

body.ds-print-open .ds-sheet--print { transform: none; visibility: visible; transition: transform var(--ds-base) var(--ds-ease), visibility 0s linear 0s; }
body.ds-print-open [data-ds-print-scrim] { opacity: 1; visibility: visible; transition: opacity var(--ds-base) var(--ds-ease), visibility 0s linear 0s; }
body.ds-print-open { overflow: hidden; }

/* --- Toasts --- */

.ds-toasts {
  position: fixed;
  left: 50%; bottom: var(--ds-6);
  transform: translateX(-50%);
  z-index: var(--ds-z-toast);
  display: grid; gap: var(--ds-2);
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.ds-toast {
  display: flex; align-items: center; gap: var(--ds-3);
  padding: var(--ds-3) var(--ds-4);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-md);
  background: color-mix(in srgb, var(--ds-surface-raise) 92%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--ds-shadow-lg);
  font-size: 14px;
  pointer-events: auto;
}
.ds-toast svg { flex: none; }
.ds-toast--success svg { color: var(--ds-success); }
.ds-toast--error { border-color: var(--ds-danger); color: var(--ds-danger); }
.ds-toast a { margin-left: auto; color: var(--ds-gold); font-weight: 600; white-space: nowrap; }

@media (max-width: 760px) {
  .ds-sheet--print { width: 100vw; }
  .ds-print-hero__art { width: 104px; }
  /* No hover on touch: the add button is simply always there. */
  .ds-tile__add { opacity: 1; transform: none; }
  .ds-toasts { bottom: calc(var(--ds-16) + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   DECKS
   The shelf and the deck page. A deck is a heavier object than a card — it has
   a face, a size and a state — so it gets a wider tile with the two figures
   you actually scan for: how close it is to legal, and what it is worth.
   ========================================================================== */

/* --- Shared: the meter, used wherever a count runs toward a minimum --- */

.ds-meter {
  display: block;
  height: 4px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-line);
  overflow: hidden;
}
.ds-meter__fill {
  display: block;
  height: 100%;
  width: var(--v, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ds-gold-fill-c), var(--ds-gold-fill-a));
  transition: width var(--ds-slow) var(--ds-ease-out);
}
.ds-meter.is-complete .ds-meter__fill { background: linear-gradient(90deg, var(--ds-gold-deep), var(--ds-success)); }

/* Mana pips at list scale. */
.ds-pips--sm { gap: 2px; }
.ds-pips--sm .ds-pip { width: 15px; height: 15px; font-size: 9px; }

/* --- The shelf --- */

.ds-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--ds-6) var(--ds-5);
}

.ds-deck { position: relative; display: block; }
.ds-deck__link {
  display: block;
  color: inherit;
  border-radius: var(--ds-r-lg);
}
.ds-deck__link:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 6px; }

/* The face: one commander, or a mosaic of what the deck runs. */
.ds-deck__art {
  position: relative;
  display: flex;
  gap: 1px;
  aspect-ratio: 16 / 9;
  border-radius: var(--ds-r-md);
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, var(--ds-surface-high), var(--ds-surface));
  border: 1px solid var(--ds-line);
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-base) var(--ds-ease-out),
              box-shadow var(--ds-base) var(--ds-ease-out),
              border-color var(--ds-base) var(--ds-ease);
}
.ds-deck__art img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* A mosaic of four art crops is busy; a commander is the deck's portrait. */
  object-position: center 32%;
  transition: transform var(--ds-slow) var(--ds-ease-out);
}
.ds-deck__art.is-hero img { object-position: center 28%; }

.ds-deck__blank {
  display: grid; place-items: center;
  width: 100%;
  color: var(--ds-text-faint);
}

.ds-deck__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 5, 5, 0.42) 0%, transparent 38%, rgba(6, 5, 5, 0.72) 100%);
  pointer-events: none;
}

.ds-deck:hover .ds-deck__art,
.ds-deck:focus-within .ds-deck__art {
  transform: translateY(-5px);
  border-color: var(--ds-line-gold);
  box-shadow: var(--ds-shadow-lg), 0 0 0 1px var(--ds-line-gold), var(--ds-shadow-gold);
}
.ds-deck:hover .ds-deck__art img { transform: scale(1.04); }

.ds-deck__tags {
  position: absolute; inset: var(--ds-2) var(--ds-2) auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ds-1);
  pointer-events: none;
}
.ds-deck__format {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: var(--ds-r-pill);
  background: rgba(6, 5, 5, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 236, 216, 0.18);
  color: #f4ecd8;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ds-deck__shared {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  margin-left: auto;
  border-radius: var(--ds-r-pill);
  background: linear-gradient(145deg, var(--ds-gold-fill-a), var(--ds-gold-fill-c));
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--ds-gold-ink);
}
.ds-deck__value {
  position: absolute; right: var(--ds-3); bottom: var(--ds-2);
  color: #f4ecd8;
  font-size: 13px; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.ds-deck__body { padding: var(--ds-3) 2px 0; display: grid; gap: 6px; }
.ds-deck__name {
  font-size: 15px; font-weight: 600;
  line-height: 1.3;
  color: var(--ds-text);
  transition: color var(--ds-fast) var(--ds-ease);
}
.ds-deck:hover .ds-deck__name { color: var(--ds-gold-bright); }
.ds-deck__desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ds-text-mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-deck__meta { display: flex; align-items: center; gap: var(--ds-2); }
.ds-deck__count {
  margin-left: auto;
  font-size: 12px; font-weight: 600;
  color: var(--ds-text-mute);
}
.ds-deck__count.is-complete { color: var(--ds-success); }
.ds-deck__count.is-short { color: var(--ds-text-faint); }

/* --- The shelf in list layout --- */

.ds-shelf--rows { display: block; }
.ds-shelf--rows .ds-deck + .ds-deck { border-top: 1px solid var(--ds-line); }

.ds-deck--row .ds-deck__link,
.ds-deck--head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 168px 96px 84px 96px;
  align-items: center;
  gap: var(--ds-4);
  padding: var(--ds-3) var(--ds-2);
  border-radius: var(--ds-r-sm);
}
.ds-deck--head {
  padding-bottom: var(--ds-2);
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-text-faint);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ds-deck--row .ds-deck__link:hover { background: var(--ds-surface); }

.ds-deck__spine {
  display: grid; place-items: center;
  width: 48px; height: 34px;
  border-radius: var(--ds-r-xs);
  overflow: hidden;
  background: var(--ds-surface-high);
  border: 1px solid var(--ds-line);
}
.ds-deck__spine img { width: 100%; height: 100%; object-fit: cover; }

.ds-deck__title { display: grid; gap: 2px; min-width: 0; }
.ds-deck--row .ds-deck__name { font-size: 14px; }
.ds-deck--row .ds-deck__desc { -webkit-line-clamp: 1; font-size: 12px; }

.ds-deck__cell {
  display: flex; align-items: center; gap: var(--ds-2);
  font-size: 12.5px;
  color: var(--ds-text-mute);
}
.ds-deck__cell--count { justify-content: flex-end; font-weight: 600; }
.ds-deck__cell--value { justify-content: flex-end; color: var(--ds-text-soft); }
.ds-deck__cell--value.is-unknown { color: var(--ds-text-faint); }
.ds-deck__cell--count.is-complete { color: var(--ds-success); }
.ds-deck__cell--count.is-short { color: var(--ds-text-faint); }

/* ==========================================================================
   ONE DECK
   ========================================================================== */

.ds-page-deck .ds-card-ambient { height: 46vh; }

.ds-deck-detail { display: grid; gap: var(--ds-8); }

.ds-deck-head { display: grid; gap: var(--ds-3); max-width: 72ch; }
.ds-deck-head__desc {
  font-family: var(--ds-font-serif);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ds-text-soft);
}
.ds-deck-head .ds-card-tags { margin-top: var(--ds-1); }

.ds-tag--ok {
  border-color: color-mix(in srgb, var(--ds-success) 42%, transparent);
  background: var(--ds-success-wash);
  color: var(--ds-success);
}
.ds-tag--warn { border-color: var(--ds-line-strong); color: var(--ds-text-mute); }

.ds-deck-progress { display: grid; gap: var(--ds-2); max-width: 460px; margin-top: var(--ds-2); }
.ds-deck-progress__label { font-size: 12.5px; color: var(--ds-text-mute); }

.ds-deck-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--ds-10);
  align-items: start;
}
.ds-deck-main { grid-column: 1; grid-row: 1; display: grid; gap: var(--ds-8); min-width: 0; }
.ds-deck-side { grid-column: 2; grid-row: 1; display: grid; gap: var(--ds-5); }

/* --- Commander and companion --- */

.ds-deck-lead { display: grid; gap: var(--ds-3); }
.ds-deck-lead__card {
  display: grid;
  gap: var(--ds-3);
  color: inherit;
}
.ds-deck-lead__card img {
  width: 100%; height: auto;
  border-radius: 4.75% / 3.4%;
  box-shadow: var(--ds-shadow-lg);
  border: 1px solid var(--ds-line);
  transition: transform var(--ds-base) var(--ds-ease-out), box-shadow var(--ds-base) var(--ds-ease-out);
}
a.ds-deck-lead__card:hover img {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-lg), var(--ds-shadow-gold);
}
a.ds-deck-lead__card:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 6px; border-radius: var(--ds-r-md); }
.ds-deck-lead__blank {
  display: grid; place-items: center;
  aspect-ratio: 63 / 88;
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  color: var(--ds-text-faint);
}
.ds-deck-lead__body { display: grid; gap: 2px; }
.ds-deck-lead__name { font-size: 14.5px; font-weight: 600; color: var(--ds-text); }
.ds-deck-lead__type { font-size: 12.5px; color: var(--ds-text-mute); }

/* --- Side plates (statistics, record, notes) --- */

.ds-plate {
  display: grid;
  gap: var(--ds-4);
  padding: var(--ds-5);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  background: linear-gradient(165deg, var(--ds-surface-raise), var(--ds-surface));
}
.ds-plate .ds-section-label { margin: 0; }
.ds-plate__note { font-size: 12px; line-height: 1.5; color: var(--ds-text-faint); }

/* --- Mana curve --- */

.ds-curve { display: flex; align-items: flex-end; gap: 5px; }
.ds-curve__col { flex: 1 1 0; min-width: 0; display: grid; gap: 5px; justify-items: center; }
.ds-curve__count {
  font-size: 10.5px; font-weight: 600;
  color: var(--ds-text-mute);
  min-height: 1em;
}
/* The track carries a definite height, so the bar's percentage has something
   real to resolve against. Sizing the bar off a flexed parent does not work. */
.ds-curve__track {
  display: flex; align-items: flex-end;
  width: 100%; height: 96px;
  border-radius: var(--ds-r-xs);
  background: var(--ds-line);
}
.ds-curve__bar {
  width: 100%;
  height: var(--v, 0%);
  min-height: 3px;
  border-radius: var(--ds-r-xs);
  background: linear-gradient(180deg, var(--ds-gold-fill-a), var(--ds-gold-fill-c));
}
.ds-curve__tick { font-size: 10.5px; color: var(--ds-text-faint); }

/* --- Distribution bars --- */

.ds-split { display: grid; gap: var(--ds-2); }
.ds-split__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: var(--ds-3);
}
.ds-split__row dt { font-size: 12.5px; color: var(--ds-text-soft); }
.ds-split__row dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--ds-3);
}
.ds-split__track {
  display: block;
  height: 8px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-line);
  overflow: hidden;
}
.ds-split__bar {
  display: block;
  height: 100%;
  width: var(--v, 0%);
  min-width: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ds-gold-fill-c), var(--ds-gold-fill-a));
}
.ds-split__num { font-size: 12px; text-align: right; color: var(--ds-text-mute); }

.ds-split--colors .ds-split__row { grid-template-columns: 24px minmax(0, 1fr); }
/* Each bar runs from a deepened mix of its mana token to the token itself, so
   the five read as one family and neither theme needs its own values. */
.ds-split__bar.is-w { background: linear-gradient(90deg, color-mix(in srgb, var(--ds-mana-w) 68%, #6b6350), var(--ds-mana-w)); }
.ds-split__bar.is-u { background: linear-gradient(90deg, color-mix(in srgb, var(--ds-mana-u) 62%, #10243a), var(--ds-mana-u)); }
.ds-split__bar.is-b { background: linear-gradient(90deg, color-mix(in srgb, var(--ds-mana-b) 62%, #100d0c), var(--ds-mana-b)); }
.ds-split__bar.is-r { background: linear-gradient(90deg, color-mix(in srgb, var(--ds-mana-r) 62%, #3d100c), var(--ds-mana-r)); }
.ds-split__bar.is-g { background: linear-gradient(90deg, color-mix(in srgb, var(--ds-mana-g) 62%, #0e2716), var(--ds-mana-g)); }

/* --- Match record --- */

.ds-record { display: flex; align-items: baseline; gap: var(--ds-4); }
.ds-record__rate {
  font-family: var(--ds-font-display);
  font-size: 34px; font-weight: 700;
  color: var(--ds-gold);
  line-height: 1;
}
.ds-record__tally { display: flex; gap: var(--ds-3); font-size: 12.5px; color: var(--ds-text-mute); }
.ds-record__tally .is-win { color: var(--ds-success); }
.ds-record__tally .is-loss { color: var(--ds-danger); }

.ds-matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ds-matches__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-3);
  padding: var(--ds-2) 0;
  border-top: 1px solid var(--ds-line);
  font-size: 12.5px;
}
.ds-matches__result { font-weight: 600; }
.ds-matches__result.is-win { color: var(--ds-success); }
.ds-matches__result.is-loss { color: var(--ds-danger); }
.ds-matches__result.is-draw { color: var(--ds-text-mute); }
.ds-matches__who { display: grid; gap: 1px; min-width: 0; color: var(--ds-text-soft); }
.ds-matches__event { font-size: 11px; color: var(--ds-text-faint); }
.ds-matches__when { color: var(--ds-text-faint); white-space: nowrap; }

/* --- The list itself --- */

.ds-decksheet { display: grid; gap: var(--ds-3); }
.ds-decksheet__head {
  display: flex; align-items: baseline; gap: var(--ds-3);
  padding-bottom: var(--ds-2);
  border-bottom: 1px solid var(--ds-line);
}
.ds-decksheet__count {
  margin-left: auto;
  font-size: 13px; font-weight: 600;
  color: var(--ds-text-mute);
}
.ds-decksheet__list { list-style: none; margin: 0; padding: 0; display: grid; }

.ds-deckcard__link {
  display: grid;
  grid-template-columns: 30px 44px minmax(0, 1fr) auto auto 8px 74px;
  align-items: center;
  gap: var(--ds-3);
  padding: 7px var(--ds-2);
  border-radius: var(--ds-r-sm);
  color: inherit;
  transition: background var(--ds-fast) var(--ds-ease);
}
a.ds-deckcard__link:hover { background: var(--ds-surface); }
a.ds-deckcard__link:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }

.ds-deckcard__qty { font-size: 12.5px; font-weight: 700; color: var(--ds-text-mute); }
.ds-deckcard__thumb {
  display: block;
  width: 44px; height: 30px;
  border-radius: var(--ds-r-xs);
  overflow: hidden;
  background: var(--ds-surface-high);
  border: 1px solid var(--ds-line);
}
.ds-deckcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-deckcard__name {
  font-size: 13.5px; font-weight: 500;
  color: var(--ds-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--ds-fast) var(--ds-ease);
}
a.ds-deckcard__link:hover .ds-deckcard__name { color: var(--ds-gold-bright); }
.ds-deckcard__type {
  font-size: 11.5px;
  color: var(--ds-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 22ch;
}
.ds-deckcard__price { font-size: 12.5px; text-align: right; color: var(--ds-text-soft); }
.ds-deckcard__price.is-unknown { color: var(--ds-text-faint); }
.ds-deckcard.is-missing .ds-deckcard__name { color: var(--ds-text-mute); }
.ds-deckcard.is-missing .ds-deckcard__thumb { border-style: dashed; }

.ds-empty--inline { padding: var(--ds-10) var(--ds-6); }
.ds-fieldset__note { margin-top: var(--ds-2); font-size: 12px; line-height: 1.5; color: var(--ds-text-faint); }

/* Light mode: the scrims and badges above artwork stay dark on purpose — they
   sit on photography, not on the page, in both themes. Only the mosaic seams
   and the black colour bar need adjusting. */
[data-theme='light'] .ds-deck__art { gap: 1px; background: var(--ds-surface-high); }
[data-theme='light'] .ds-page-deck .ds-card-ambient img { filter: blur(64px) saturate(130%); opacity: 0.3; }

/* --- Responsive --- */

@media (max-width: 1180px) {
  .ds-deck-cols { grid-template-columns: minmax(0, 1fr); gap: var(--ds-8); }
  /* Source order puts the summary first, which is what a phone wants: what
     the deck is, before the hundred lines of what is in it. */
  .ds-deck-main { grid-column: 1; grid-row: 2; }
  .ds-deck-side { grid-column: 1; grid-row: 1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .ds-deck-lead__card img { max-width: 260px; }
}

@media (max-width: 900px) {
  .ds-deck--row .ds-deck__link,
  .ds-deck--head { grid-template-columns: 48px minmax(0, 1fr) 84px 92px; }
  /* Format and colours fold away first; the name, the count and the value are
     what a narrow shelf is actually read for. Scoped to the direct child —
     a descendant selector here would take the pips inside the tiles with it. */
  .ds-deck--row .ds-deck__link > span:nth-child(3),
  .ds-deck--row .ds-deck__link > span:nth-child(4),
  .ds-deck--head > span:nth-child(3),
  .ds-deck--head > span:nth-child(4) { display: none; }
}

@media (max-width: 760px) {
  .ds-shelf { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ds-5) var(--ds-4); }
  .ds-page-deck .ds-card-ambient { height: 38vh; }
  .ds-deck-side { grid-template-columns: minmax(0, 1fr); }
  .ds-deck-lead__card img { max-width: 220px; }
  .ds-plate { padding: var(--ds-4); }
  .ds-deckcard__link { grid-template-columns: 28px minmax(0, 1fr) auto 66px; gap: var(--ds-2); }
  .ds-deckcard__thumb,
  .ds-deckcard__type,
  .ds-deckcard .ds-rarity-dot { display: none; }
  .ds-decksheet__list { gap: 1px; }
}

/* ==========================================================================
   COMMUNITY
   Other people's decks, and the three ways you can respond to them. The
   vocabulary of the deck shelf carries over — a shared deck is still a deck —
   so this section adds only what is genuinely new: people, activity, the
   social controls, and the conversation.
   ========================================================================== */

/* --- Buttons and avatars the community needs --- */

.ds-btn--sm { min-height: 34px; padding: 0 var(--ds-3); font-size: 13px; }

.ds-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.ds-avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.ds-avatar--xl { width: 88px; height: 88px; font-size: 32px; font-family: var(--ds-font-display); }

.ds-link--quiet {
  border: 0; background: none; padding: 0;
  color: var(--ds-text-faint);
  font-size: 12.5px; cursor: pointer;
}
.ds-link--quiet:hover { color: var(--ds-danger); }

/* --- The hub --- */

.ds-community {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ds-10);
  align-items: start;
}
.ds-community__main { display: grid; gap: var(--ds-8); min-width: 0; }
.ds-community__side { display: grid; gap: var(--ds-5); }

.ds-section-label__more { float: right; font-size: 12px; text-transform: none; letter-spacing: 0; }

/* --- Activity feed --- */

.ds-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ds-feed__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-3);
  padding: var(--ds-3) var(--ds-2);
  border-bottom: 1px solid var(--ds-line);
  font-size: 13.5px;
}
.ds-feed__item:last-child { border-bottom: 0; }
.ds-feed__icon {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ds-gold-wash);
  color: var(--ds-gold);
}
.ds-feed__icon[data-type='liked_deck'] { color: var(--ds-danger); background: var(--ds-danger-wash); }
.ds-feed__text { color: var(--ds-text-mute); min-width: 0; }
.ds-feed__actor { color: var(--ds-text); font-weight: 600; }
.ds-feed__actor:hover, .ds-feed__deck:hover { color: var(--ds-gold-bright); }
.ds-feed__deck { color: var(--ds-gold); font-weight: 500; }
.ds-feed__when { color: var(--ds-text-faint); font-size: 12px; white-space: nowrap; }

/* --- People --- */

.ds-people { display: grid; gap: var(--ds-2); }
.ds-people:not(.ds-people--compact) { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }

.ds-person {
  display: flex; align-items: center; gap: var(--ds-3);
  padding: var(--ds-2);
  border: 1px solid transparent;
  border-radius: var(--ds-r-md);
  transition: background var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}
.ds-person:hover { background: var(--ds-surface); border-color: var(--ds-line); }
.ds-person__link { display: flex; align-items: center; gap: var(--ds-3); min-width: 0; flex: 1; color: inherit; }
.ds-person__link:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; border-radius: var(--ds-r-sm); }
.ds-person__body { display: grid; gap: 1px; min-width: 0; }
.ds-person__name {
  font-size: 14px; font-weight: 600; color: var(--ds-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--ds-fast) var(--ds-ease);
}
.ds-person:hover .ds-person__name { color: var(--ds-gold-bright); }
.ds-person__meta { font-size: 12px; color: var(--ds-text-mute); }
.ds-person__bio {
  font-size: 12px; color: var(--ds-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-person__action { flex: none; margin-left: auto; }

.ds-people--compact .ds-person__bio { display: none; }

/* --- Byline: whose deck this is --- */

.ds-byline { display: flex; align-items: center; gap: var(--ds-2); min-width: 0; color: inherit; }
.ds-byline__name {
  font-size: 12.5px; font-weight: 600; color: var(--ds-text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--ds-fast) var(--ds-ease);
}
.ds-byline:hover .ds-byline__name { color: var(--ds-gold-bright); }
.ds-deck-head__owner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ds-3);
  margin-top: var(--ds-2);
}
.ds-deck-head__owner .ds-byline { margin-right: auto; }

.ds-byline--lg { gap: var(--ds-3); }
.ds-byline--lg .ds-byline__name { display: block; font-size: 15px; color: var(--ds-text); }
.ds-byline__meta { display: block; font-size: 12.5px; color: var(--ds-text-mute); }

/* --- Like --- */

/* The like form is a wrapper, not a box: `display: contents` lets its button
   sit directly in the parent's flex row instead of nesting a layout inside it. */
.ds-likeform { display: contents; }

.ds-like {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 var(--ds-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface-raise);
  color: var(--ds-text-mute);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: color var(--ds-fast) var(--ds-ease),
              border-color var(--ds-fast) var(--ds-ease),
              background var(--ds-fast) var(--ds-ease);
}
.ds-like:hover { color: var(--ds-danger); border-color: var(--ds-danger); }
.ds-like:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
/* The heart is a stroked icon; liking fills it. */
.ds-like.is-liked { color: var(--ds-danger); border-color: var(--ds-danger); background: var(--ds-danger-wash); }
.ds-like.is-liked svg { fill: currentColor; }
.ds-like--sm { min-height: 28px; padding: 0 10px; font-size: 12px; gap: 4px; }
.ds-like__count { font-variant-numeric: tabular-nums; }

/* --- A shared deck tile --- */

.ds-deck--shared { display: flex; flex-direction: column; height: 100%; }
.ds-deck--shared .ds-deck__link { flex: 1; }
.ds-deck--shared .ds-deck__body { padding-bottom: var(--ds-2); }
.ds-deck--shared .ds-deck__social { margin-top: auto; }
.ds-deck__social {
  display: flex; align-items: center; gap: var(--ds-2);
  padding: 0 2px;
  min-width: 0;
}
.ds-deck__social .ds-byline { flex: 1; min-width: 0; }
.ds-deck__social .ds-like { margin-left: auto; }
.ds-deck__comments {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ds-text-faint);
}
.ds-deck__when { flex: 1; font-size: 12px; color: var(--ds-text-faint); }

.ds-shelf--tight { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

/* --- Format chips on discover --- */

.ds-activefilters--formats { flex-wrap: wrap; margin-bottom: var(--ds-4); }
.ds-chip.is-active {
  border-color: var(--ds-line-gold);
  background: var(--ds-gold-wash-2);
  color: var(--ds-gold);
  font-weight: 600;
}

/* --- Profile --- */

.ds-profile {
  display: flex; align-items: center; gap: var(--ds-6);
  flex-wrap: wrap;
  margin-bottom: var(--ds-6);
}
.ds-profile__body { flex: 1; min-width: 240px; }
.ds-profile__body h1 { font-family: var(--ds-font-display); font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; }
.ds-profile__bio {
  margin-top: var(--ds-2);
  max-width: 60ch;
  font-family: var(--ds-font-serif);
  font-size: 15px; line-height: 1.6;
  color: var(--ds-text-soft);
}
.ds-profile__figures {
  display: flex; flex-wrap: wrap; gap: var(--ds-6);
  margin-top: var(--ds-4);
}
.ds-profile__figures dt {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ds-text-faint);
}
.ds-profile__figures dd { margin-top: 2px; font-size: 17px; font-weight: 600; color: var(--ds-text); }
.ds-profile__action { flex: none; margin-left: auto; }

/* The base segment sizes its children as 36px icon squares. A segment whose
   children are words has to undo that, or the labels stack on top of one
   another — which is exactly what happened the first time. */
.ds-segment--text > a {
  display: inline-flex; align-items: center; gap: 5px;
  width: auto; height: 34px;
  padding: 0 var(--ds-4);
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
}
.ds-segment--tabs { margin-bottom: var(--ds-6); }
.ds-segment--tabs .ds-num { color: var(--ds-text-faint); font-weight: 500; }

/* --- Comments --- */

.ds-comments { display: grid; gap: var(--ds-4); }
.ds-comments__empty { font-size: 13.5px; color: var(--ds-text-faint); }
.ds-comments__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-4); }
.ds-comments__replies {
  list-style: none;
  margin: var(--ds-3) 0 0;
  padding: 0 0 0 var(--ds-6);
  display: grid; gap: var(--ds-3);
  border-left: 1px solid var(--ds-line);
}

.ds-commentform {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ds-3);
}
.ds-commentform textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--ds-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit; font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.ds-commentform textarea:focus-visible {
  outline: 2px solid var(--ds-focus); outline-offset: 1px;
  border-color: var(--ds-line-gold);
}
.ds-commentform textarea::placeholder { color: var(--ds-text-faint); }
.ds-commentform--reply { grid-template-columns: minmax(0, 1fr) auto; margin-top: var(--ds-2); }

.ds-comment { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--ds-3); }
.ds-comment__body { min-width: 0; }
.ds-comment__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ds-2); }
.ds-comment__who { font-size: 13.5px; font-weight: 600; color: var(--ds-text); }
.ds-comment__who:hover { color: var(--ds-gold-bright); }
.ds-comment__when, .ds-comment__edited { font-size: 11.5px; color: var(--ds-text-faint); }
.ds-comment__edited { font-style: italic; }
.ds-comment__text {
  margin-top: 3px;
  font-size: 14px; line-height: 1.55;
  color: var(--ds-text-soft);
  overflow-wrap: anywhere;
}
.ds-comment__actions { display: flex; align-items: center; gap: var(--ds-4); margin-top: var(--ds-2); }

/* The reply box opens without JavaScript: <details> is the whole mechanism. */
.ds-reply summary {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
}
.ds-reply summary::-webkit-details-marker { display: none; }
.ds-reply[open] summary { color: var(--ds-text-faint); }

/* --- Responsive --- */

@media (max-width: 1180px) {
  .ds-community { grid-template-columns: minmax(0, 1fr); gap: var(--ds-8); }
  .ds-community__side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}

@media (max-width: 760px) {
  .ds-community__side { grid-template-columns: minmax(0, 1fr); }
  .ds-shelf--tight { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .ds-profile { gap: var(--ds-4); }
  .ds-profile__action { margin-left: 0; width: 100%; }
  .ds-profile__action .ds-btn { width: 100%; }
  .ds-profile__figures { gap: var(--ds-5); }
  .ds-commentform { grid-template-columns: minmax(0, 1fr) auto; }
  .ds-commentform > .ds-avatar { display: none; }
  .ds-comments__replies { padding-left: var(--ds-4); }
  .ds-feed__item { grid-template-columns: 30px minmax(0, 1fr); }
  .ds-feed__when { grid-column: 2; }
}

/* ==========================================================================
   PROFILE
   Your own account. The left column is a form, the right is a set of facts;
   the plate and field components carry over from everywhere else, so this
   section only adds the two things that are new: a select, and a tidy list.
   ========================================================================== */

.ds-identity {
  display: flex; align-items: center; gap: var(--ds-5);
  flex-wrap: wrap;
  margin-bottom: var(--ds-6);
}
.ds-identity__body { min-width: 0; }
.ds-identity__name {
  font-family: var(--ds-font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
}
.ds-identity__mail { margin-top: 2px; font-size: 13.5px; color: var(--ds-text-mute); }
.ds-identity .ds-card-tags { margin-top: var(--ds-3); }

/* A gain in the stat row reuses the delta colours from the card page. */
.ds-stat__value.is-up { color: var(--ds-success); }
.ds-stat__value.is-down { color: var(--ds-danger); }

.ds-profile-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ds-10);
  align-items: start;
}
.ds-profile-main { display: grid; gap: var(--ds-5); min-width: 0; }
.ds-profile-side { display: grid; gap: var(--ds-5); }

.ds-settings { display: grid; gap: var(--ds-5); }
.ds-settings .ds-plate { gap: var(--ds-3); }
.ds-settings__foot {
  display: flex; align-items: center; gap: var(--ds-4);
  flex-wrap: wrap;
}
.ds-settings__signout { margin-top: var(--ds-2); }

/* The floating-label field, in a multi-line flavour. The label only lifts on
   :not(:placeholder-shown), so the textarea needs the same placeholder-of-one-
   space trick the inputs use. */
.ds-field--area .ds-field__input { min-height: 96px; padding-top: 26px; resize: vertical; line-height: 1.5; }

/* --- Select --- */

.ds-select { display: block; }
.ds-select__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ds-text-mute);
}
.ds-select select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--ds-10) 0 var(--ds-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background-color: var(--ds-surface);
  color: var(--ds-text);
  font: inherit; font-size: 15px;
  cursor: pointer;
  appearance: none;
  /* The chevron is drawn in CSS: an inline SVG here would need a data: URI in
     every theme, and the two gradients already sit on a themed token. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
.ds-select select:hover { border-color: var(--ds-line-strong); }
.ds-select select:focus-visible {
  outline: none;
  border-color: var(--ds-gold);
  box-shadow: 0 0 0 4px var(--ds-gold-wash);
}
.ds-select select option { background: var(--ds-surface); color: var(--ds-text); }

/* --- Tidy list: devices, sign-ins --- */

.ds-tidy { list-style: none; margin: 0; padding: 0; display: grid; }
.ds-tidy__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-3);
  padding: var(--ds-2) 0;
  border-bottom: 1px solid var(--ds-line);
  font-size: 13px;
}
.ds-tidy__row:last-child { border-bottom: 0; }
.ds-tidy__icon { color: var(--ds-text-faint); }
.ds-tidy__name {
  min-width: 0;
  color: var(--ds-text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-tidy__sub { display: block; font-size: 11.5px; color: var(--ds-text-faint); }
.ds-tidy__when { font-size: 12px; color: var(--ds-text-faint); white-space: nowrap; }

.ds-menu__hint { margin-left: auto; color: var(--ds-text-faint); font-size: 12px; }

@media (max-width: 1180px) {
  .ds-profile-cols { grid-template-columns: minmax(0, 1fr); gap: var(--ds-8); }
  .ds-profile-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}

@media (max-width: 760px) {
  .ds-profile-side { grid-template-columns: minmax(0, 1fr); }
  .ds-identity { gap: var(--ds-4); }
  .ds-settings__foot .ds-btn { width: 100%; }
}

/* ==========================================================================
   WRITING
   The controls that change a card or a deck. Each is a real form posting to
   /collection/action, so they work without JavaScript; the only script on them
   is the confirmation before a destructive one.
   ========================================================================== */

/* A −/number/+ group. Each button is its own form, so this is a flex row of
   forms rather than one form with three buttons. */
.ds-step {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: var(--ds-surface-raise);
  overflow: hidden;
}
.ds-step__btn { display: flex; }
.ds-step__btn button {
  display: grid; place-items: center;
  width: 34px; height: 32px;
  border: 0; background: none;
  color: var(--ds-text-soft);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}
.ds-step__btn button:hover:not(:disabled) { background: var(--ds-gold-wash); color: var(--ds-gold); }
.ds-step__btn button:disabled { opacity: 0.35; cursor: not-allowed; }
.ds-step__btn button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }
.ds-step__value {
  min-width: 30px;
  text-align: center;
  font-size: 13.5px; font-weight: 700;
  color: var(--ds-text);
  border-inline: 1px solid var(--ds-line);
  align-self: stretch;
  display: grid; place-items: center;
}

/* A small square button sitting on a list row. */
.ds-rowbtn {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid transparent;
  border-radius: var(--ds-r-sm);
  background: none;
  color: var(--ds-text-faint);
  cursor: pointer;
  transition: color var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease),
              border-color var(--ds-fast) var(--ds-ease);
}
.ds-rowbtn:hover { color: var(--ds-gold); background: var(--ds-gold-wash); border-color: var(--ds-line-gold); }
.ds-rowbtn--danger:hover { color: var(--ds-danger); background: var(--ds-danger-wash); border-color: var(--ds-danger); }
.ds-rowbtn:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; }

.ds-btn--danger { color: var(--ds-danger); border-color: color-mix(in srgb, var(--ds-danger) 40%, transparent); }
.ds-btn--danger:hover { background: var(--ds-danger-wash); border-color: var(--ds-danger); }

/* The card page's copies control. */
.ds-quantity-pill { display: inline-flex; align-items: center; gap: var(--ds-2); }
.ds-quantity-pill__unit { font-size: 12.5px; color: var(--ds-text-mute); }

/* Deck row tools appear on hover on a pointer, and are always there on touch. */
.ds-deckcard { position: relative; display: flex; align-items: center; gap: var(--ds-2); }
.ds-deckcard__link { flex: 1; min-width: 0; }
.ds-deckcard__tools {
  display: flex; align-items: center; gap: 4px;
  flex: none;
  opacity: 0;
  transition: opacity var(--ds-fast) var(--ds-ease);
}
.ds-deckcard:hover .ds-deckcard__tools,
.ds-deckcard:focus-within .ds-deckcard__tools { opacity: 1; }

.ds-addtodeck { display: flex; align-items: end; gap: var(--ds-3); flex-wrap: wrap; }
.ds-addtodeck .ds-select { flex: 1; min-width: 200px; }

.ds-deckform { display: grid; gap: var(--ds-4); }
.ds-deckform__foot { display: flex; align-items: center; gap: var(--ds-3); margin-top: var(--ds-2); }
.ds-deckform__danger {
  margin-top: var(--ds-8);
  padding-top: var(--ds-5);
  border-top: 1px solid var(--ds-line);
}

.ds-deck-head__actions { display: flex; gap: var(--ds-3); margin-top: var(--ds-2); }

@media (hover: none) {
  /* No hover on touch: the tools are simply always visible. */
  .ds-deckcard__tools { opacity: 1; }
}

@media (max-width: 760px) {
  .ds-deckcard__tools { gap: 2px; }
  .ds-step__btn button { width: 30px; }
  .ds-addtodeck .ds-btn { width: 100%; }
}

/* --- The in-deck card picker --- */

.ds-picker { display: grid; gap: var(--ds-3); }
.ds-picker.is-open {
  padding: var(--ds-5);
  border: 1px solid var(--ds-line-gold);
  border-radius: var(--ds-r-lg);
  background: linear-gradient(165deg, var(--ds-surface-raise), var(--ds-surface));
}
.ds-picker__open { justify-self: start; }
.ds-picker__head { display: flex; align-items: baseline; gap: var(--ds-3); }
.ds-picker__head .ds-link { margin-left: auto; }
.ds-picker__search { max-width: none; }
.ds-picker .ds-result-line { margin: 0; }

.ds-picker__list { list-style: none; margin: 0; padding: 0; display: grid; }
.ds-picker__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ds-3);
  padding: 7px var(--ds-2);
  border-bottom: 1px solid var(--ds-line);
}
.ds-picker__row:last-child { border-bottom: 0; }
.ds-picker__row.is-in-deck { background: var(--ds-gold-wash); border-radius: var(--ds-r-sm); }
.ds-picker__name {
  min-width: 0;
  font-size: 13.5px; font-weight: 500;
  color: var(--ds-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-picker__sub {
  display: block;
  font-size: 11.5px; font-weight: 400;
  color: var(--ds-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-picker__add { display: flex; }

@media (max-width: 760px) {
  .ds-picker.is-open { padding: var(--ds-4); }
  .ds-picker__row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .ds-picker__row .ds-pips { display: none; }
}
.ds-picker__set {
  font-family: var(--ds-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ds-text-mute);
}

/* ══════════════════════════════════════════════════════════════════════
   Play — the game record and the board.

   Two registers on purpose. The statistics pages wear the same clothes as
   the rest of the app; the board goes dark and full-bleed with the deck's
   art behind it, the way the iOS board does, because a table between four
   people is a different object from a page you read.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tabs ───────────────────────────────────────────────────────────── */
.ds-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 18px;
  padding-bottom: 2px;
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tabs__tab {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  color: var(--ds-text-soft);
  font-family: var(--ds-font-serif);
  font-size: 14px;
  text-decoration: none;
  transition: color .18s, border-color .18s, background .18s;
}
.ds-tabs__tab:hover { color: var(--ds-text); border-color: var(--ds-line-strong); }
.ds-tabs__tab.is-active {
  background: linear-gradient(135deg, var(--ds-gold-fill-a), var(--ds-gold-fill-c));
  border-color: transparent;
  color: var(--ds-gold-ink);
  font-weight: 700;
}

.ds-playfilters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.ds-playfilters__group { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Win-rate ring ──────────────────────────────────────────────────── */
.ds-playhero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
}
.ds-ring {
  --ds-ring-value: 0deg;
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    conic-gradient(var(--ds-gold-fill-a) 0 var(--ds-ring-value),
                   color-mix(in srgb, var(--ds-text) 12%, transparent) var(--ds-ring-value) 360deg);
}
.ds-ring::after {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--ds-surface);
}
.ds-ring__value, .ds-ring__label { position: relative; z-index: 1; display: block; }
.ds-ring__value { font-size: 23px; font-weight: 700; color: var(--ds-text); }
.ds-ring__label { font-size: 10px; color: var(--ds-text-mute); }

.ds-playhero__facts { display: grid; gap: 7px; margin: 0; }
.ds-playhero__facts div { display: flex; justify-content: space-between; gap: 14px; }
.ds-playhero__facts dt { color: var(--ds-text-mute); font-size: 12px; }
.ds-playhero__facts dd { margin: 0; font-weight: 700; font-size: 14px; }

.ds-streaks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--ds-gold-wash); color: var(--ds-gold);
}
.ds-pill.is-win  { background: var(--ds-success-wash); color: var(--ds-success); }
.ds-pill.is-loss { background: var(--ds-danger-wash);  color: var(--ds-danger); }

/* ── Round distribution ─────────────────────────────────────────────── */
/* The columns must be stretched to the chart's height, not sized to their own
   content: a percentage height on the bar only resolves against a definite
   parent, and `align-items: flex-end` would leave every column auto-height —
   which collapses every bar to its 3px minimum. The `1fr auto` grid gives the
   bar a definite row to measure against and keeps the label on the baseline. */
.ds-rounds { display: flex; align-items: stretch; gap: 5px; height: 150px; margin-top: 12px; }
.ds-rounds__col { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 6px; min-width: 0; }
.ds-rounds__bar {
  align-self: end;
  display: flex; flex-direction: column;
  height: var(--ds-h, 0%);
  min-height: 3px;
  border-radius: 4px;
  overflow: hidden;
}
.ds-rounds__seg { display: block; min-height: 3px; }
.ds-rounds__seg.is-win  { background: linear-gradient(180deg, var(--ds-gold-fill-a), var(--ds-gold-fill-c)); }
.ds-rounds__seg.is-loss { background: color-mix(in srgb, var(--ds-text) 34%, transparent); }
.ds-rounds__seg.is-draw { background: var(--ds-gold-deep); }
.ds-rounds__label { text-align: center; font-size: 10px; color: var(--ds-text-mute); }

.ds-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--ds-text-mute); }
.ds-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ds-legend span::before { content: ''; width: 9px; height: 9px; border-radius: 2px; }
.ds-legend .is-win::before  { background: var(--ds-gold-fill-a); }
.ds-legend .is-loss::before { background: color-mix(in srgb, var(--ds-text) 34%, transparent); }
.ds-legend .is-draw::before { background: var(--ds-gold-deep); }

/* ── Bars and rankings ──────────────────────────────────────────────── */
.ds-bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.ds-bars__row { display: grid; grid-template-columns: 34px 1fr 48px 62px; gap: 10px; align-items: center; }
.ds-bars__key { font-size: 12px; font-weight: 700; color: var(--ds-text-mute); }
.ds-bars__track { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ds-text) 10%, transparent); overflow: hidden; }
.ds-bars__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ds-gold-fill-c), var(--ds-gold-fill-a)); }
.ds-bars__value { font-weight: 700; font-size: 13px; text-align: right; }
.ds-bars__tally { font-size: 11px; color: var(--ds-text-mute); text-align: right; }

.ds-rankings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-rank__link {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--ds-line); background: var(--ds-surface);
  text-decoration: none; color: inherit;
}
a.ds-rank__link:hover { border-color: var(--ds-line-gold); }
.ds-rank__art {
  width: 62px; height: 46px; border-radius: 8px; overflow: hidden;
  background: var(--ds-surface-raise); display: grid; place-items: center; color: var(--ds-text-mute);
}
.ds-rank__art img { width: 100%; height: 100%; object-fit: cover; }
.ds-rank__body { min-width: 0; display: grid; gap: 5px; }
.ds-rank__title { display: flex; align-items: baseline; gap: 8px; }
.ds-rank__title strong { font-family: var(--ds-font-serif); font-size: 15px; }
.ds-rank__few { font-size: 10px; color: var(--ds-text-faint); font-style: normal; }
.ds-rank__sub, .ds-rank__meta { font-size: 11px; color: var(--ds-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-rank__rate { font-size: 19px; font-weight: 700; color: var(--ds-gold); }

.ds-beststat { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.ds-beststat strong { display: block; font-family: var(--ds-font-serif); font-size: 16px; }
.ds-beststat small { color: var(--ds-text-mute); font-size: 12px; }
.ds-beststat__rate { text-align: right; }
.ds-beststat__rate .ds-num { display: block; font-size: 24px; font-weight: 700; color: var(--ds-gold); }
.ds-beststat__rate small { font-size: 11px; color: var(--ds-text-mute); }

/* ── Game list ──────────────────────────────────────────────────────── */
.ds-gamelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-game {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center;
  padding: 11px 13px; border-radius: 13px;
  border: 1px solid var(--ds-line); background: var(--ds-surface);
}
.ds-game__result { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.ds-game.is-win  .ds-game__result { background: var(--ds-success-wash); color: var(--ds-success); }
.ds-game.is-loss .ds-game__result { background: var(--ds-danger-wash);  color: var(--ds-danger); }
.ds-game.is-draw .ds-game__result { background: var(--ds-gold-wash);    color: var(--ds-gold); }
.ds-game__body { min-width: 0; display: grid; gap: 2px; }
.ds-game__deck { font-family: var(--ds-font-serif); font-size: 15px; color: inherit; text-decoration: none; }
.ds-game__deck:hover { color: var(--ds-gold); }
.ds-game__meta, .ds-game__vs, .ds-game__note { font-size: 11px; color: var(--ds-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-game__right { text-align: right; display: grid; gap: 2px; }
.ds-game__when { font-size: 11px; color: var(--ds-text-mute); }
.ds-game__round { font-size: 12px; font-weight: 700; color: var(--ds-gold); }
.ds-game__del { display: flex; }

/* ── Setup ──────────────────────────────────────────────────────────── */
.ds-setup { display: grid; gap: 22px; margin-bottom: 96px; }
.ds-setup__block { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.ds-setup__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ds-setup__label { font-size: 12px; color: var(--ds-text-mute); min-width: 92px; }
.ds-setup__hint { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ds-text-mute); }
.ds-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-chiprow--tight { gap: 4px; }
.ds-chip--num { min-width: 40px; justify-content: center; text-align: center; }

.ds-lifeset { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-lifeset__value { font-size: 22px; font-weight: 700; min-width: 46px; text-align: center; }

.ds-toggle { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; cursor: pointer; }
.ds-toggle small { display: block; color: var(--ds-text-mute); font-size: 11px; }
.ds-toggle input { margin-top: 3px; accent-color: var(--ds-gold-fill-b); }

.ds-deckpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ds-deckpick__item {
  position: relative; display: grid; gap: 3px; padding: 0 0 10px;
  border-radius: 13px; overflow: hidden; text-align: left;
  border: 1.5px solid var(--ds-line); background: var(--ds-surface); color: inherit; cursor: pointer;
}
.ds-deckpick__item.is-active { border-color: var(--ds-gold-fill-b); box-shadow: var(--ds-shadow-gold); }
.ds-deckpick__art { display: block; height: 78px; background: var(--ds-surface-raise); }
.ds-deckpick__art img { width: 100%; height: 100%; object-fit: cover; }
.ds-deckpick__name { padding: 6px 10px 0; font-family: var(--ds-font-serif); font-size: 14px; }
.ds-deckpick__meta { padding: 0 10px; font-size: 11px; color: var(--ds-text-mute); }

.ds-seats { display: grid; gap: 8px; }
.ds-seats__row { display: flex; align-items: center; gap: 10px; }
.ds-seats__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.ds-seats__me { font-size: 14px; }
.ds-seats__row em { font-size: 10px; font-style: normal; color: var(--ds-gold); }
.ds-input--flush { flex: 1; min-width: 0; }

/* ── Board ──────────────────────────────────────────────────────────── */
.ds-board__panel { position: relative; }
.ds-board__foot {
  position: sticky; bottom: 0; display: flex; gap: 10px;
  padding: 14px 0; background: linear-gradient(180deg, transparent, var(--ds-canvas) 40%);
}
.ds-board__art {
  position: fixed; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.1); opacity: 0;
  transition: opacity .5s;
}
.ds-board__art.has-art { opacity: .5; }
.ds-body--board .ds-content { max-width: 760px; }

.ds-board__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ds-roundpill {
  flex: 1; display: grid; justify-items: center; gap: 1px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--ds-line-gold); background: var(--ds-surface);
  color: inherit; cursor: pointer;
}
.ds-roundpill__round { font-family: var(--ds-font-serif); font-size: 14px; font-weight: 700; }
.ds-roundpill__clock { font-size: 11px; color: var(--ds-text-mute); font-family: var(--ds-font-mono); }

/* The table is the page: it takes the height the chrome leaves it and the rows
   divide it, so two players get two big tiles and six get six readable ones —
   the same proportioning the iOS board uses, where the player's own seat is
   worth about a quarter more than an opponent row. */
.ds-board__panel[data-ds-panel="board"] {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 148px);
}
.ds-table { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ds-table__row { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; min-height: 92px; }
.ds-table__row--mine { flex: 1.25; min-height: 132px; }

.ds-tile {
  --ds-seat: var(--ds-gold);
  position: relative; display: flex; align-items: stretch;
  border-radius: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ds-seat) 45%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ds-seat) 30%, transparent), rgba(8, 7, 6, .72));
  transition: border-color .2s, box-shadow .2s, opacity .25s;
}
.ds-tile.has-art::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--ds-seat-art); background-size: cover; background-position: center;
  opacity: .42;
}
.ds-tile.has-art::after { content: ''; position: absolute; inset: 0; background: rgba(8, 7, 6, .5); }
.ds-tile.is-active { border-color: var(--ds-gold-fill-a); box-shadow: var(--ds-shadow-gold); }
.ds-tile.is-out { opacity: .5; }
.ds-tile.is-far { transform: rotate(180deg); }

.ds-tile__step {
  position: relative; z-index: 2;
  width: 58px; flex: 0 0 58px;
  border: 0; background: transparent; cursor: pointer;
  color: color-mix(in srgb, #fff 70%, transparent);
  font-size: 19px; font-weight: 700;
  touch-action: none; user-select: none;
}
.ds-tile__step:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ds-tile__step:active { background: rgba(255, 255, 255, .14); }

.ds-tile__centre {
  position: relative; z-index: 2;
  flex: 1; min-width: 0; display: grid; align-content: center; justify-items: center; gap: 2px;
  border: 0; background: transparent; color: #fff; cursor: pointer; padding: 6px;
}
.ds-tile__name { font-family: var(--ds-font-serif); font-size: 13px; opacity: .9; }
.ds-tile__life { font-size: 40px; font-weight: 700; line-height: 1; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.ds-table__row--mine .ds-tile__life { font-size: 52px; }
.ds-tile__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.ds-tile__chips em {
  font-style: normal; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(8, 7, 6, .5); color: color-mix(in srgb, #fff 82%, transparent);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-tile__out {
  position: absolute; inset: 8px 0 auto; z-index: 3; text-align: center;
  font-size: 10px; font-weight: 700; color: var(--ds-danger);
}

.ds-board__actions { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px 0; }
.ds-board__actions .ds-btn--primary { flex: 1; }
.ds-board__actions em { font-style: normal; opacity: .75; font-size: 12px; }

.ds-seatsheet {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 60; width: min(440px, calc(100vw - 32px));
  display: grid; gap: 8px; padding: 16px;
  border-radius: 18px; border: 1px solid var(--ds-line-strong);
  background: var(--ds-surface-high); box-shadow: var(--ds-shadow-lg);
}
.ds-seatsheet header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ds-seatsheet__row { display: grid; grid-template-columns: 1fr auto 56px auto; gap: 8px; align-items: center; font-size: 13px; }
.ds-seatsheet__row .ds-num { text-align: center; font-weight: 700; }

.ds-winners { display: grid; gap: 7px; }
.ds-winners__opt {
  --ds-seat: var(--ds-gold);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--ds-line); background: var(--ds-surface); color: inherit;
}
.ds-winners__opt.is-active { border-color: var(--ds-gold-fill-b); background: var(--ds-gold-wash); }
.ds-winners__opt em { font-style: normal; font-size: 10px; color: var(--ds-gold); }
.ds-winners__opt small { color: var(--ds-text-mute); font-size: 11px; }

@media (max-width: 640px) {
  .ds-playhero { grid-template-columns: 1fr; justify-items: start; }
  .ds-bars__row { grid-template-columns: 30px 1fr 42px; }
  .ds-bars__tally { display: none; }
  .ds-rank__link { grid-template-columns: 48px 1fr auto; }
  .ds-rank__art { width: 48px; height: 36px; }
  .ds-game { grid-template-columns: auto 1fr auto; }
  .ds-game__del { grid-column: 3; }
  .ds-tile__step { width: 46px; flex-basis: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-board__art, .ds-tile, .ds-tabs__tab { transition: none; }
}

/* Deck page: the match record gained detail and two actions. */
.ds-record__note { font-size: 11px; color: var(--ds-text-mute); }
.ds-record__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ds-matches__round { font-size: 11px; font-weight: 700; color: var(--ds-gold); }

/* ==========================================================================
   IMPORT & EXPORT
   /import-export. Two panels side by side, then a review step and a result.
   The choices are radio cards rather than selects because each option needs
   a sentence of explanation, and a select cannot carry one.
   ========================================================================== */

.ds-xfer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-5);
  align-items: start;
  margin-bottom: var(--ds-5);
}
.ds-xfer__panel { gap: var(--ds-5); }
.ds-xfer__head { display: flex; align-items: flex-start; gap: var(--ds-4); }
.ds-xfer__glyph {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px;
  border: 1px solid var(--ds-line-gold);
  border-radius: var(--ds-r-md);
  background: var(--ds-gold-wash);
  color: var(--ds-gold);
}
.ds-xfer__title { font-family: var(--ds-font-display); font-size: 22px; font-weight: 700; line-height: 1.2; }
.ds-xfer__lead { margin-top: 2px; font-size: 14px; color: var(--ds-text-mute); }
.ds-xfer__form { display: grid; gap: var(--ds-4); }
.ds-xfer__form > .ds-help { margin-top: calc(-1 * var(--ds-2)); }

/* --- Drop zone: the whole area is the file input, so a drop lands on it --- */

.ds-drop {
  position: relative;
  display: grid; justify-items: center; gap: var(--ds-2);
  padding: var(--ds-8) var(--ds-5);
  border: 1.5px dashed var(--ds-line-strong);
  border-radius: var(--ds-r-lg);
  background: var(--ds-surface);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease);
}
.ds-drop:hover, .ds-drop.is-over { border-color: var(--ds-gold); background: var(--ds-gold-wash); }
.ds-drop.has-file { border-style: solid; border-color: var(--ds-line-gold); }
.ds-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ds-drop:focus-within { outline: 2px solid var(--ds-focus); outline-offset: 3px; }
.ds-drop__icon { color: var(--ds-gold); }
.ds-drop__title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ds-drop__sub { font-size: 12.5px; color: var(--ds-text-mute); }

.ds-xfer-paste summary {
  cursor: pointer;
  width: max-content;
  min-height: 32px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ds-text-soft);
}
.ds-xfer-paste summary:hover { color: var(--ds-gold); }
.ds-xfer-paste[open] summary { margin-bottom: var(--ds-3); }

/* --- Export --- */

.ds-xfer-backup {
  display: grid; gap: var(--ds-3);
  padding-bottom: var(--ds-5);
  border-bottom: 1px solid var(--ds-line);
}
.ds-xfer-backup .ds-help { margin-top: 0; }

.ds-xfer-fieldset { display: grid; gap: var(--ds-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.ds-xfer-fieldset > legend { padding: 0; margin-bottom: var(--ds-3); }
.ds-xfer-fieldset .ds-help { margin-top: 0; }

/* --- Radio cards (layout, target, mode) --- */

.ds-xfer-formats, .ds-xfer-modes { display: grid; gap: var(--ds-2); }
.ds-xfer-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-2); }

.ds-xfer-format, .ds-xfer-mode, .ds-xfer-target { position: relative; display: block; cursor: pointer; }
.ds-xfer-format input, .ds-xfer-mode input, .ds-xfer-target input { position: absolute; opacity: 0; width: 0; height: 0; }

.ds-xfer-format > span, .ds-xfer-mode > span, .ds-xfer-target > span {
  display: grid; gap: 2px;
  min-height: 44px;
  padding: var(--ds-3) var(--ds-4) var(--ds-3) 44px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  transition: border-color var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease);
}
/* The radio dot, drawn so it can share the gold of everything else. */
.ds-xfer-format > span::before, .ds-xfer-mode > span::before {
  content: '';
  position: absolute; left: var(--ds-4); top: 15px;
  width: 16px; height: 16px;
  border: 1.5px solid var(--ds-line-strong);
  border-radius: 50%;
  transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
.ds-xfer-format strong, .ds-xfer-mode strong, .ds-xfer-target strong { font-size: 14px; font-weight: 600; }
.ds-xfer-format strong em { font-style: normal; font-weight: 500; color: var(--ds-text-faint); font-size: 12px; }
.ds-xfer-format small, .ds-xfer-mode small, .ds-xfer-target small { font-size: 12.5px; line-height: 1.45; color: var(--ds-text-mute); }

.ds-xfer-format:hover > span, .ds-xfer-mode:hover > span, .ds-xfer-target:hover > span { border-color: var(--ds-line-strong); }
.ds-xfer-format input:checked + span, .ds-xfer-mode input:checked + span, .ds-xfer-target input:checked + span {
  border-color: var(--ds-line-gold);
  background: var(--ds-gold-wash);
}
.ds-xfer-format input:checked + span::before, .ds-xfer-mode input:checked + span::before {
  border-color: var(--ds-gold);
  box-shadow: inset 0 0 0 4px var(--ds-surface), inset 0 0 0 8px var(--ds-gold);
}
.ds-xfer-format input:focus-visible + span, .ds-xfer-mode input:focus-visible + span,
.ds-xfer-target input:focus-visible + span { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

.ds-xfer-target > span {
  justify-items: center; text-align: center;
  padding: var(--ds-4) var(--ds-2);
  gap: 4px;
}
.ds-xfer-target svg { color: var(--ds-text-mute); margin-bottom: 2px; transition: color var(--ds-fast) var(--ds-ease); }
.ds-xfer-target input:checked + span svg { color: var(--ds-gold); }

/* The deck fields belong to "New deck" only. Without :has() they simply stay
   visible, which is harmless: the server ignores them for other targets. */
.ds-xfer-deck { display: grid; gap: var(--ds-3); }
@supports selector(:has(*)) {
  .ds-xfer-options:not(:has(input[name='target'][value='deck']:checked)) .ds-xfer-deck { display: none; }
  /* A new deck has no existing cards to merge with, unless they also go into the collection. */
  .ds-xfer-options:has(input[name='target'][value='deck']:checked):not(:has(input[name='also_collection']:checked)) .ds-xfer-merge { display: none; }
}

/* --- Review --- */

.ds-xfer-review {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--ds-5);
  align-items: start;
  margin-bottom: var(--ds-5);
}
.ds-xfer-review:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.ds-xfer-found__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-3); flex-wrap: wrap; }

.ds-xfer-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-2);
  margin: 0;
}
.ds-xfer-figures > div {
  padding: var(--ds-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  min-width: 0;
}
.ds-xfer-figures dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-mute); }
.ds-xfer-figures dd { margin: 0; }
.ds-xfer-figures dd.ds-num { margin-top: var(--ds-1); font-family: var(--ds-font-display); font-size: 24px; font-weight: 700; line-height: 1.1; }
.ds-xfer-figures__meta { margin-top: 2px; font-size: 11.5px; color: var(--ds-text-faint); }

.ds-xfer-note {
  display: flex; gap: var(--ds-2); align-items: flex-start;
  font-size: 13px; color: var(--ds-text-soft);
}
.ds-xfer-note svg { flex: none; margin-top: 2px; color: var(--ds-gold); }

.ds-xfer-table {
  overflow-x: auto;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
}
.ds-xfer-table:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-xfer-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ds-xfer-table th {
  position: sticky; top: 0;
  padding: var(--ds-2) var(--ds-3);
  background: var(--ds-surface-raise);
  border-bottom: 1px solid var(--ds-line);
  text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ds-text-mute);
  white-space: nowrap;
}
.ds-xfer-table td { padding: var(--ds-2) var(--ds-3); border-bottom: 1px solid var(--ds-line); color: var(--ds-text-soft); }
.ds-xfer-table tr:last-child td { border-bottom: 0; }
.ds-xfer-table td:nth-child(2) { color: var(--ds-text); }
.ds-xfer-table .is-num { text-align: right; width: 1%; white-space: nowrap; }
.ds-xfer-table .ds-mono { font-size: 12px; white-space: nowrap; }
.ds-xfer-role { min-height: 20px; padding: 0 var(--ds-2); font-size: 11px; margin-left: var(--ds-1); }
.ds-xfer-foil {
  background: linear-gradient(100deg, var(--ds-gold-bright), var(--ds-mana-u) 55%, var(--ds-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.ds-xfer-options { gap: var(--ds-6); }
.ds-xfer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-3); }
.ds-xfer-options > .ds-help { margin-top: calc(-1 * var(--ds-3)); }

/* --- Result --- */

.ds-xfer-outcome { margin-bottom: var(--ds-5); }
.ds-banner + .ds-xfer-outcome { margin-top: var(--ds-5); }
.ds-tidy__row a.ds-tidy__name:hover { color: var(--ds-gold); }

/* --- What can be imported --- */

.ds-xfer-how { margin-bottom: var(--ds-6); }
.ds-xfer-kinds {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-4) var(--ds-6);
}
.ds-xfer-kinds li { display: flex; gap: var(--ds-3); align-items: flex-start; }
.ds-xfer-kinds svg { flex: none; margin-top: 2px; color: var(--ds-gold); }
.ds-xfer-kinds strong { display: block; font-size: 14px; font-weight: 600; }
.ds-xfer-kinds span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ds-text-mute); }

/* Collection page entry point. */
.ds-page-head__actions { display: flex; gap: var(--ds-2); flex-wrap: wrap; }

@media (max-width: 1100px) {
  .ds-xfer, .ds-xfer-review { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .ds-xfer-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-xfer-kinds { grid-template-columns: minmax(0, 1fr); }
  .ds-xfer-targets { grid-template-columns: minmax(0, 1fr); }
  .ds-xfer-target > span { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: var(--ds-3); padding: var(--ds-3) var(--ds-4); }
  .ds-xfer-target svg { grid-row: span 2; margin: 0; align-self: center; }
  .ds-xfer-actions .ds-btn { flex: 1 1 100%; }
  .ds-drop { padding: var(--ds-6) var(--ds-4); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-drop, .ds-xfer-format > span, .ds-xfer-mode > span, .ds-xfer-target > span { transition: none; }
}

.ds-page-head__sub a { color: var(--ds-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   LISTS
   /lists and /lists/{id}. A list borrows the deck tile's anatomy so the two
   shelves read as one product; what sets it apart is its own colour, picked
   in the iOS app and carried in --ds-cardlist-accent, on its glyph and the rule
   under its face — the same places the iOS list card uses it.
   ========================================================================== */

.ds-cardlist, .ds-cardlist-page { --ds-cardlist-accent: var(--ds-gold); }

.ds-cardlist .ds-deck__art { border-bottom: 2px solid color-mix(in srgb, var(--ds-cardlist-accent) 70%, transparent); }
.ds-cardlist__blank { color: color-mix(in srgb, var(--ds-cardlist-accent) 65%, var(--ds-text-faint)); }

.ds-cardlist__type { gap: 5px; }
.ds-cardlist__type svg { flex: none; }

.ds-cardlist__name { display: flex; align-items: center; gap: var(--ds-2); min-width: 0; }
.ds-cardlist__name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ds-cardlist__glyph {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px;
  border-radius: var(--ds-r-xs);
  background: color-mix(in srgb, var(--ds-cardlist-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-cardlist-accent) 34%, transparent);
  color: var(--ds-cardlist-accent);
}
.ds-cardlist__glyph--lg { width: 44px; height: 44px; border-radius: var(--ds-r-sm); }

.ds-cardlist .ds-deck__count { margin-left: 0; }
.ds-cardlist__prints { font-size: 12px; color: var(--ds-text-faint); }

.ds-cardlist-head__kind { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-cardlist-accent); }
.ds-cardlist-head__title { display: flex; align-items: center; gap: var(--ds-3); }
.ds-cardlist-head .ds-card-tags { margin-top: var(--ds-4); }

.ds-stats--cardlist .ds-stat::before { background: var(--ds-cardlist-accent); }

[data-theme='light'] .ds-cardlist__glyph { background: color-mix(in srgb, var(--ds-cardlist-accent) 12%, transparent); }