/*
  Gestaltungsidee: eine Sammelalbum-Seite.
  Dunkles Ordner-Vinyl als Fläche, jede fehlende Karte steckt in einer Hülle (Pocket).
  Farbe trägt nur Information: Seltenheit und Sammelfortschritt.
  Keine externen Schriften (keine Anfragen an Dritte, DSGVO-freundlich).
*/
:root {
  --vinyl: #1b2738;
  --vinyl-raised: #213048;
  --pocket: #141d2b;
  --seam: #2f405a;
  --ink: #ebe5d6;
  --muted: #9ca8ba;
  --progress: #8fbf9f;
  --focus: #f2d38a;

  --r-common: #d9d3c5;
  --r-uncommon: #a9b9cb;
  --r-rare: #d4ad55;
  --r-mythic: #e2733d;
  --r-special: #b48bd2;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'URW Palladio L', P052, 'Book Antiqua', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--vinyl);
  /* feine Ordner-Prägung */
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 5px 5px;
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--focus); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

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

.wrap { max-width: 1240px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) var(--gutter) 48px; }

h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }

/* ---------- Übersicht ---------- */

.intro { margin-bottom: clamp(28px, 5vw, 48px); }
.intro > :not(.headline) { max-width: 62ch; }
.intro h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.lede { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; margin: 0.9em 0 0; }
.summary { color: var(--muted); margin: 0.6em 0 0; }

.shelf { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--seam); }

.shelf__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 4ch minmax(80px, 200px) 15ch;
  align-items: center;
  gap: 16px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--seam);
  text-decoration: none;
}
.shelf__row:hover { background: var(--vinyl-raised); color: var(--ink); }
.shelf__row:hover .shelf__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.shelf__name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.shelf__year { color: var(--muted); }
.shelf__count { color: var(--muted); text-align: right; white-space: nowrap; }
.shelf__count strong { color: var(--ink); font-weight: 600; }
.shelf__row.is-done .shelf__name, .shelf__row.is-done .shelf__count { color: var(--progress); }

/* Set-Symbol: die SVG von Scryfall dient als Maske und wird in Textfarbe gefüllt */
.sym {
  display: block;
  width: 32px;
  height: 32px;
  background: var(--ink);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.sym--empty { background: none; border: 1px dashed var(--seam); border-radius: 50%; -webkit-mask: none; mask: none; }
.sym--large { width: clamp(56px, 9vw, 84px); height: clamp(56px, 9vw, 84px); flex: none; }

.bar { display: block; height: 6px; border-radius: 3px; background: var(--pocket); box-shadow: inset 0 0 0 1px var(--seam); overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--progress); border-radius: 3px; }

/* ---------- Edition ---------- */

.crumb { margin-bottom: 28px; }
.crumb a { color: var(--muted); }
.crumb a::before { content: '‹ '; }

.edition { display: flex; gap: clamp(16px, 3vw, 28px); align-items: center; margin-bottom: 32px; }
.edition > div { flex: 1; min-width: 0; }
.edition__facts, .edition .bar { max-width: 560px; }
.edition h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); overflow-wrap: anywhere; }
.edition__facts { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); margin: 0.5em 0 0.9em; }
.edition__facts span:first-child { color: var(--ink); }

.tools { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 24px; }
.tools[hidden] { display: none; }

.search input {
  font: inherit;
  color: var(--ink);
  background: var(--pocket);
  border: 1px solid var(--seam);
  border-radius: 6px;
  padding: 8px 12px;
  width: min(260px, 100%);
}
.search input::placeholder { color: var(--muted); }
.search { flex: 0 1 260px; }

.chips, .view { display: flex; flex-wrap: wrap; gap: 6px; }
.chips[hidden], .search[hidden] { display: none; }
.view { margin-left: auto; }

.chip, .view button, .copy {
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--seam);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.chip span { color: var(--muted); }
.chip:hover, .view button:hover, .copy:hover { border-color: var(--muted); }
.chip[aria-pressed='true'], .view button[aria-pressed='true'] { background: var(--ink); color: var(--vinyl); border-color: var(--ink); }
.chip[aria-pressed='true'] span { color: inherit; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--r-common); }
.dot--uncommon { background: var(--r-uncommon); }
.dot--rare { background: var(--r-rare); }
.dot--mythic { background: var(--r-mythic); }
.dot--special, .dot--bonus { background: var(--r-special); }

/* Die Albumseite: jede Karte in einer Hülle */
.binder {
  list-style: none;
  margin: 0;
  padding: clamp(10px, 2vw, 18px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 42vw), 1fr));
  gap: clamp(10px, 1.6vw, 16px);
  background: var(--pocket);
  border: 1px solid var(--seam);
  border-radius: 10px;
}
.binder[hidden] { display: none; }

.pocket { min-width: 0; }
.pocket[hidden] { display: none; }

.pocket__card {
  position: relative;
  display: block;
  width: 100%;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  cursor: zoom-in;
}
/* Glanz der Klarsichthülle */
.pocket__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}
.pocket__card img, .pocket__blank {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 488 / 680;
  border-radius: 4.6% / 3.4%;
  background: var(--vinyl-raised);
}
.pocket__blank { display: grid; place-items: center; padding: 12px; text-align: center; font-family: var(--serif); color: var(--muted); }
.pocket__card:hover { border-color: rgba(255, 255, 255, 0.22); }

.pocket__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 7px;
  font-size: 0.82rem;
  color: var(--muted);
  min-width: 0;
}
.pocket__meta .dot { align-self: center; }
.pocket__no { color: var(--ink); }
.pocket__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty { color: var(--muted); }
.empty[hidden] { display: none; }

.textlist { max-width: 720px; }
.textlist[hidden] { display: none; }
.textlist p { color: var(--muted); margin-top: 0; }
.textlist textarea {
  width: 100%;
  font: 0.92rem/1.6 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--ink);
  background: var(--pocket);
  border: 1px solid var(--seam);
  border-radius: 8px;
  padding: 14px;
  resize: vertical;
}
.copy { margin-top: 12px; }

.complete { font-family: var(--serif); font-size: 1.3rem; color: var(--progress); }

.note { margin-top: 40px; max-width: 62ch; border-left: 3px solid var(--r-rare); padding-left: 18px; }
.note h2 { font-size: 1.3rem; }
.note p, .note li { color: var(--muted); }

/* Vergrößerte Karte */
.zoom {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  max-width: min(92vw, 520px);
  overflow: visible;
}
.zoom::backdrop { background: rgba(10, 15, 24, 0.82); }
.zoom img { display: block; width: 100%; height: auto; border-radius: 4.6% / 3.4%; }
.zoom__caption { text-align: center; margin: 12px 0 0; }
.zoom__caption a { color: var(--ink); }
.zoom__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--seam);
  background: var(--vinyl);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

/* MagicBlogsDe: Marke rechts neben der Überschrift, Aufruf zum Tauschen */
.headline { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; }
.headline h1 { min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__logo { display: block; height: 44px; width: auto; }
.brand__name { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--muted); }

.callout {
  margin-top: 24px;
  max-width: 62ch;
  padding: 14px 18px;
  border-left: 3px solid var(--focus);
  background: var(--vinyl-raised);
  border-radius: 0 6px 6px 0;
}
.callout p { margin: 0; }
.callout a { color: var(--focus); font-weight: 600; overflow-wrap: anywhere; }
.wrap > .callout { margin-top: 48px; }

.foot { max-width: 1240px; margin: 0 auto; padding: 24px var(--gutter) 40px; color: var(--muted); font-size: 0.82rem; }
.foot p { max-width: 80ch; margin: 0 0 6px; }

@media (max-width: 720px) {
  .shelf__row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas: 'sym name year' 'sym bar count';
    gap: 6px 12px;
  }
  .shelf__row .sym { grid-area: sym; width: 28px; height: 28px; }
  .shelf__name { grid-area: name; font-size: 1.1rem; }
  .shelf__year { grid-area: year; text-align: right; }
  .shelf__row .bar { grid-area: bar; }
  .shelf__count { grid-area: count; }
  .view { margin-left: 0; }
  .edition { align-items: flex-start; }
  .brand__name { display: none; }
  .brand__logo { height: 34px; }
}

@media (prefers-reduced-motion: no-preference) {
  .pocket__card { transition: border-color 0.15s ease; }
  .zoom[open] { animation: lift 0.18s ease-out; }
  @keyframes lift { from { transform: translateY(8px) scale(0.98); opacity: 0; } }
}