/* =========
   MetaZoo Single Card Page (card-page.css)
   Layout: Large image left, details right. Mobile stacks.
   ========= */

:root {
  --mzn-bg: #0b1020;
  --mzn-surface: #0f172a;
  --mzn-panel: #111827;
  --mzn-muted: #9ca3af;
  --mzn-text: #e5e7eb;
  --mzn-line: rgba(255,255,255,.08);
  --mzn-chip: #0f172a;
  --mzn-chip-text: #cbd5e1;
  --mzn-link: #93c5fd;
  --mzn-link2: #a5b4fc;
}

/* Page background + base type */
body.mzn-card-page {
  margin: 0;
  background: var(--mzn-bg);
  color: var(--mzn-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
}

/* Breadcrumb / back */
.mzn-crumb {
  margin: 14px auto 0;
  max-width: 1100px;
  padding: 0 16px;
  font-size: 14px;
  color: var(--mzn-link2);
  opacity: .9;
}
.mzn-crumb a {
  color: var(--mzn-link);
  text-decoration: none;
}
.mzn-crumb a:hover { text-decoration: underline; }

/* Two-column shell */
.mzn-detail {
  max-width: 1100px;
  margin: 24px auto 32px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
}

/* Left image panel */
.mzn-detail .mzn-img {
  background: linear-gradient(180deg, #0f1328 0%, #0b1020 100%);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  border: 1px solid var(--mzn-line);
}
.mzn-detail .mzn-img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* Right details panel */
.mzn-detail .mzn-panel {
  background: var(--mzn-panel);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border: 1px solid var(--mzn-line);
}

/* Header area with name + set */
.mzn-detail header.mzn-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--mzn-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mzn-detail header.mzn-head h1 {
  font-size: 28px;
  margin: 0;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 10px color-mix(in srgb, var(--mzn-accent, #94a3b8) 30%, transparent);
}
.mzn-detail header.mzn-head .mzn-sub {
  color: var(--mzn-muted);
  font-weight: 500;
  font-size: 16px;
}
.mzn-detail header.mzn-head .mzn-setline {
  color: var(--mzn-muted);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

/* Right header cluster (set line + aura chip) */
.mzn-detail header.mzn-head .mzn-head-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Aura chip uses the accent color if available */
.mzn-aura-chip {
  background: color-mix(in srgb, var(--mzn-accent, #64748b) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--mzn-accent, #64748b) 60%, #ffffff 0%);
  color: #e5e7eb;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.mzn-detail[data-aura] .mzn-aura-chip {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mzn-accent) 20%, transparent);
}

/* Optional flavor text block (if you add it later) */
.mzn-detail .mzn-flavor {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--mzn-line);
  color: #cbd5e1;
  font-style: italic;
  opacity: .9;
}

/* Subtle link buttons row (share, etc.) */
.mzn-actions {
  max-width: 1100px;
  margin: 0 auto 18px;
  padding: 0 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mzn-action {
  background: #0f172a;
  border: 1px solid var(--mzn-line);
  color: #d1d5db;
  border-radius: 10px;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: 600;
}
.mzn-action:hover { background:#101826; }

/* Typography tweaks */
.mzn-detail header.mzn-head h1 {
  font-weight: 800;
  letter-spacing: .01em;
}
/* Stronger aura-tinted title glow when aura is present */
.mzn-detail[data-aura] header.mzn-head h1 {
  /* Keep the white title but add a stronger aura glow for contrast on dark headers */
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0,0,0,.5),
    0 0 10px color-mix(in srgb, var(--mzn-accent) 35%, transparent),
    0 0 22px color-mix(in srgb, var(--mzn-accent) 22%, transparent);
}
@media (max-width: 600px) {
  .mzn-detail header.mzn-head h1 { font-size: 24px; }
}

/* Meta grid (key/value rows) */
.mzn-detail .mzn-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--mzn-line);
}
.mzn-detail .mzn-row {
  display: flex;
  border-bottom: 1px solid var(--mzn-line);
  background: linear-gradient(180deg, #101826 0%, #0e1726 100%);
}
.mzn-detail .mzn-row:last-child { border-bottom: none; }
.mzn-detail .mzn-row > div { padding: 14px 16px; }

.mzn-detail .mzn-k {
  width: 40%;
  color: #a3b1c6;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 12px;
  background: #0f172a;
  border-right: 1px solid var(--mzn-line);
}
.mzn-detail .mzn-v {
  width: 60%;
  color: #e2e8f0;
  word-break: break-word;
}

/* Rules / abilities */
.mzn-detail .mzn-rules {
  padding: 16px 20px 22px;
}
.mzn-detail .mzn-rules h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #cbd5e1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.mzn-detail .mzn-rules p {
  margin: 0;
  color: #e5e7eb;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Tag chips for descriptors/keywords (optional) */
.mzn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px 6px;
  border-top: 1px solid var(--mzn-line);
}
.mzn-tag {
  background: var(--mzn-chip);
  color: var(--mzn-chip-text);
  border: 1px solid var(--mzn-line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* Aura-colored accent bar (optional, if you add a data attribute on the container) */
.mzn-detail[data-aura] .mzn-panel {
  position: relative;
}
.mzn-detail[data-aura] .mzn-panel::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 4px; width: 100%;
  background: var(--mzn-accent, #94a3b8);
  border-top-left-radius: 14px; border-top-right-radius: 14px;
}

/* Aura palette hook — set on a parent like .mzn-detail[data-aura="Fire"] */
.mzn-detail[data-aura="Air"]       { --mzn-accent: #ee7509; }
.mzn-detail[data-aura="Earth"]     { --mzn-accent: #0e985f; }
.mzn-detail[data-aura="Fire"]      { --mzn-accent: #d9213b; }
.mzn-detail[data-aura="Lightning"] { --mzn-accent: #d4ba0a; }
.mzn-detail[data-aura="Water"]     { --mzn-accent: #3e83c2; }

/* Responsive */
@media (max-width: 1024px) {
  .mzn-detail { grid-template-columns: 380px 1fr; }
}
@media (max-width: 900px) {
  .mzn-detail { grid-template-columns: 1fr; }
}

/* Print tweaks (for people printing card pages) */
@media print {
  body.mzn-card-page { background: #fff; color: #111; }
  .mzn-crumb { display: none; }
  .mzn-detail { box-shadow: none; padding: 0; margin: 0; max-width: 100%; }
  .mzn-detail .mzn-panel, .mzn-detail .mzn-img { box-shadow: none; border-color: #ddd; }
  .mzn-detail header.mzn-head, .mzn-detail .mzn-row { border-color: #ddd; }
}

/* ===== Section headings & readability tweaks ===== */
.mzn-sec {
  margin: 14px 20px 6px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #e8eef9;
  opacity: .95;
}
.mzn-sec-rules {
  color: #f3f6ff;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.mzn-ability {
  margin: 10px 20px 6px;
  font-size: 15px;
  font-weight: 800;
  color: #f1f5ff;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}

/* ===== Chip gradients & emphasis for Variants / Keywords ===== */
.mzn-tags { gap: 10px; }
.mzn-tags .mzn-tag {
  transition: transform .12s ease, box-shadow .15s ease, background .2s ease;
  cursor: default;
}
/* Variants: tie border to aura accent if available */
.mzn-tags[aria-label="Variations"] .mzn-tag,
.mzn-tags[aria-label="Variants"] .mzn-tag {
  background: linear-gradient(135deg, #0f1f3a 0%, #0b132a 100%);
  border-color: color-mix(in srgb, var(--mzn-accent, #64748b) 45%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 16px rgba(0,0,0,.25);
}
/* Keywords: slightly different gradient for visual grouping */
.mzn-tags[aria-label="Keywords"] .mzn-tag {
  background: linear-gradient(135deg, #191f36 0%, #131a2c 100%);
  border-color: #23304a;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 16px rgba(0,0,0,.25);
}
.mzn-tags .mzn-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(255,255,255,.05) inset, 0 10px 20px rgba(0,0,0,.35);
}