/* Site theme: the collector card on a blue-violet hero, with pastel reading
   bands. Palette: #5c56ea hero, #2c2547 ink, #53467e muted, #ebc05b,
   #77ae92, #a35f99 accents and card tiers. */

[data-theme="cards"] {
  --table: #e3e2fb;
  --felt: #ffffff;
  --ink: #2c2547;
  --muted: #53467e;
  --magenta: #a35f99;
  --cyan: #77ae92;
  --yellow: #ebc05b;
  --violet: #5c56ea;
  --frame: #8d86ad;
  --bg: var(--table);
  --text: var(--ink);
  --accent: var(--yellow);
  --on-accent: #2c2547;
  --focus: var(--cyan);
  --body-font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --display-font: "Big Shoulders Display", "Arial Narrow", sans-serif;
}

[data-theme="cards"] body {
  background: var(--table);
}

[data-theme="cards"] .brand { font-size: 24px; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; }

[data-theme="cards"] .top nav a {
  padding: 6px 10px;
  color: var(--muted);
  font-family: var(--display-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
[data-theme="cards"] .top nav a:hover { color: var(--ink); }
[data-theme="cards"] .top nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--yellow); }

[data-theme="cards"] h1 {
  font-size: clamp(48px, 7.6vw, 96px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
[data-theme="cards"] .lede { font-size: 19px; color: var(--muted); }

[data-theme="cards"] input[type="text"],
[data-theme="cards"] input[type="date"],
[data-theme="cards"] input[type="time"] {
  height: 56px;
  padding: 0 16px;
  border: 2px solid #b9b6e6;
  border-radius: 6px;
  background: #f1f0fc;
  color: var(--ink);
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
}
[data-theme="cards"] input::placeholder { color: #6b6690; }
[data-theme="cards"] input:focus-visible { outline: none; border-color: var(--yellow); }
[data-theme="cards"] input[aria-invalid="true"] { border-color: var(--magenta); }

[data-theme="cards"] button {
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 6px;
  background: var(--yellow);
  color: #2c2547;
  font-family: var(--display-font);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
[data-theme="cards"] button:hover { background: #fff; transform: translateY(-2px); }

[data-theme="cards"] button.ghost {
  height: 30px;
  padding: 0 10px;
  background: transparent;
  color: var(--muted);
  border: 1px solid #b9b6e6;
  font-size: 14px;
}
[data-theme="cards"] button.ghost:hover { background: #cfcdf0; color: var(--ink); transform: none; }

[data-theme="cards"] .field-error:not([hidden]) {
  padding: 8px 12px;
  border-radius: 6px;
  background: #f1f0fc;
  color: #b3162f;
}

/* The card */

[data-theme="cards"] .stage { perspective: 1100px; }

[data-theme="cards"] .card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name tier"
    "art art"
    "handle handle"
    "note note"
    "badges badges"
    "facts facts"
    "copy copy";
  align-content: start;
  gap: 8px 10px;
  width: min(360px, 100%);
  min-height: 500px;
  padding: 14px;
  border: 10px solid var(--frame);
  border-radius: 18px;
  background: var(--felt);
  box-shadow: 0 28px 50px rgba(44, 37, 71, 0.3), 0 4px 10px rgba(44, 37, 71, 0.18);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.18s ease-out;
  overflow: hidden;
}

[data-theme="cards"] .card[data-tier="regular"] { --frame: #77ae92; }
[data-theme="cards"] .card[data-tier="veteran"] { --frame: #a35f99; }
[data-theme="cards"] .card[data-tier="veteran"] .card-tier { color: #fff; }
[data-theme="cards"] .card[data-tier="oldguard"] { --frame: #ebc05b; }

[data-theme="cards"] .card:not(.card--empty) { animation: card-turn 0.7s cubic-bezier(0.19, 1, 0.22, 1) both; }

@keyframes card-turn {
  0% { transform: rotateY(88deg) translateY(18px); filter: brightness(0.5); }
  100% { transform: rotateY(0) translateY(0); filter: brightness(1); }
}

[data-theme="cards"] .card-banner { display: none; }

/* Stacking: art under the foil, words above it. */
[data-theme="cards"] .card > * { position: relative; z-index: 2; }
[data-theme="cards"] .card > .card-portrait { z-index: 0; }
[data-theme="cards"] .card > .card-foil { position: absolute; z-index: 1; }

[data-theme="cards"] .card-name {
  grid-area: name;
  font-family: var(--display-font);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

[data-theme="cards"] .tag {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--cyan);
  color: #2c2547;
  font-size: 14px;
  letter-spacing: 0.04em;
}

[data-theme="cards"] .card-tier {
  grid-area: tier;
  align-self: center;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--frame);
  color: #2c2547;
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-theme="cards"] .card-portrait {
  grid-area: art;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--frame);
  border-radius: 8px;
  overflow: hidden;
  background: #f1f0fc;
}

[data-theme="cards"] .card-handle {
  grid-area: handle;
  padding-bottom: 6px;
  border-bottom: 1px solid #cfcdf0;
  color: var(--muted);
  font-size: 14px;
}

[data-theme="cards"] .card-note { grid-area: note; font-size: 15px; }
[data-theme="cards"] .badges { grid-area: badges; }
[data-theme="cards"] .badges li { padding: 2px 8px; border: 1px solid #b9b6e6; border-radius: 4px; font-size: 12px; color: var(--muted); }

[data-theme="cards"] .facts {
  grid-area: facts;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f1f0fc;
  font-size: 14px;
}
[data-theme="cards"] .facts dt {
  color: var(--muted);
  font-family: var(--display-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 22px;
}

[data-theme="cards"] .card > button.ghost { grid-area: copy; justify-self: start; position: relative; z-index: 2; }

/* Foil: a band of light that follows the pointer. Older accounts shine more. */

[data-theme="cards"] .card-foil {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%),
    linear-gradient(115deg, rgba(92, 86, 234, 0) 20%, rgba(163, 95, 153, 0.6) 38%, rgba(119, 174, 146, 0.6) 50%, rgba(235, 192, 91, 0.6) 62%, rgba(235, 192, 91, 0) 80%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, var(--mx) var(--my);
  mix-blend-mode: soft-light;
  opacity: 0.12;
}
[data-theme="cards"] .card[data-tier="regular"] .card-foil { opacity: 0.22; }
[data-theme="cards"] .card[data-tier="veteran"] .card-foil { opacity: 0.36; }
[data-theme="cards"] .card[data-tier="oldguard"] .card-foil { opacity: 0.55; }

/* Face-down card */

[data-theme="cards"] .card--empty {
  grid-template-areas: "art" "name" "note";
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  text-align: center;
  --frame: #b9b6e6;
  background:
    repeating-linear-gradient(45deg, rgba(92, 86, 234, 0.38) 0 10px, rgba(92, 86, 234, 0) 10px 20px),
    repeating-linear-gradient(-45deg, rgba(163, 95, 153, 0.24) 0 10px, rgba(163, 95, 153, 0) 10px 20px),
    var(--felt);
}
[data-theme="cards"] .card--empty .card-portrait {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid var(--yellow);
  background: var(--table);
}
[data-theme="cards"] .card--empty .card-name { font-size: 34px; }
[data-theme="cards"] .card--empty .card-note { color: var(--muted); }

[data-theme="cards"] .note { color: var(--muted); font-size: 14px; }

/* Collection */

[data-theme="cards"] .collection { padding: 40px 0 48px; background: var(--felt); border-top: 1px solid #cfcdf0; border-bottom: 1px solid #cfcdf0; }
[data-theme="cards"] .collection h2 { margin: 0 0 18px; font-size: 34px; font-weight: 900; text-transform: uppercase; line-height: 1; }
[data-theme="cards"] .cell {
  width: 92px;
  height: auto;
  padding: 5px 5px 8px;
  border: 4px solid #8d86ad;
  border-radius: 10px;
  background: var(--table);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 10px 18px rgba(44, 37, 71, 0.2);
}
[data-theme="cards"] .cell:hover { background: var(--table); transform: translateY(-6px) rotate(-2deg); }
[data-theme="cards"] .cell img { width: 100%; aspect-ratio: 1; border-radius: 5px; object-fit: cover; }
[data-theme="cards"] .collection li:nth-child(3n + 1) .cell { border-color: var(--cyan); }
[data-theme="cards"] .collection li:nth-child(3n + 2) .cell { border-color: var(--magenta); }
[data-theme="cards"] .collection li:nth-child(3n) .cell { border-color: var(--yellow); }

/* Panels */

[data-theme="cards"] .extras:not([hidden]) { padding-top: 36px; padding-bottom: 36px; }
[data-theme="cards"] .tech,
[data-theme="cards"] .asset,
[data-theme="cards"] .tool { padding: 18px 20px; border: 1px solid #cfcdf0; border-radius: 10px; background: var(--felt); }
[data-theme="cards"] .tech summary { font-family: var(--display-font); font-size: 22px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
[data-theme="cards"] .asset h3 { font-size: 22px; text-transform: uppercase; }
[data-theme="cards"] .asset img { border-radius: 8px; }

[data-theme="cards"] .ts-fields label { color: var(--muted); font-family: var(--display-font); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
[data-theme="cards"] .ts-item { padding: 12px 16px; border-radius: 8px; background: #f1f0fc; }
[data-theme="cards"] .ts-label { color: var(--muted); font-family: var(--display-font); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
[data-theme="cards"] .ts-preview { font-size: 18px; }
[data-theme="cards"] .ts-item button { height: 42px; font-size: 18px; }
[data-theme="cards"] code { padding: 2px 6px; border-radius: 4px; background: var(--felt); color: var(--cyan); font: 14px/1.4 ui-monospace, Menlo, Consolas, monospace; }
[data-theme="cards"] .hint { color: var(--muted); font-size: 14px; }

/* Reading bands */

[data-theme="cards"] .band:nth-of-type(even) { background: var(--felt); }
[data-theme="cards"] .prose { color: #2c2547; }
[data-theme="cards"] .prose h2 { color: var(--ink); font-size: clamp(30px, 4vw, 44px); font-weight: 900; line-height: 1; text-transform: uppercase; }
[data-theme="cards"] .prose h3 { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
[data-theme="cards"] .faq details { padding: 14px 0; border-top: 1px solid #cfcdf0; }
[data-theme="cards"] .faq details:last-child { border-bottom: 1px solid #cfcdf0; }
[data-theme="cards"] .faq summary { color: var(--ink); font-weight: 700; }

[data-theme="cards"] .foot { background: #f1f0fc; color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="cards"] .card:not(.card--empty) { animation: none; }
  [data-theme="cards"] .card { transition: none; }
  [data-theme="cards"] * { transition: none !important; }
}


/* Roster palette placement */

[data-theme="cards"] .top,
[data-theme="cards"] .hero { background: #5c56ea; color: #fff; --focus: #fff; }
[data-theme="cards"] .top nav a { color: #e3e2fb; }
[data-theme="cards"] .top nav a:hover,
[data-theme="cards"] .top nav a[aria-current="page"] { color: #fff; }
[data-theme="cards"] .hero .lede,
[data-theme="cards"] .hero .note { color: #fff; }
[data-theme="cards"] .hero input[type="text"] { border-color: #fff; background: #fff; color: var(--ink); color-scheme: light; }
[data-theme="cards"] .hero input:focus-visible { border-color: var(--ink); }
[data-theme="cards"] .lookup-form button { background: #2c2547; color: #fff; }
[data-theme="cards"] .lookup-form button:hover { background: #53467e; }
[data-theme="cards"] .hero .field-error:not([hidden]) { background: #fff; }
[data-theme="cards"] .card { color: var(--ink); }
[data-theme="cards"] .tool input { color-scheme: light; background: #fff; }
[data-theme="cards"] .tool { margin-top: 24px; }
[data-theme="cards"] code { background: #fff; color: var(--ink); }

[data-theme="cards"] .band:nth-of-type(4n + 1) { background: #dcefe5; }
[data-theme="cards"] .band:nth-of-type(4n + 2) { background: #fbf0d3; }
[data-theme="cards"] .band:nth-of-type(4n + 3) { background: #f0dfee; }
[data-theme="cards"] .band:nth-of-type(4n) { background: #e3e2fb; }
[data-theme="cards"] .faq details { border-color: #2c2547; }

[data-theme="cards"] .foot { background: #53467e; color: #e3e2fb; }