/* Prevent a single very long unbreakable token (title/heading) from overflowing its card
   on narrow viewports. Only affects words longer than the container; normal text unaffected. */
.font-display { overflow-wrap: anywhere; word-break: break-word; }

/* ---------------------------------------------------------------------------
   Utility classes used by the article / page / review templates that the
   preview's pre-compiled Tailwind build (style.css) did not include — that
   build only contains classes the preview markup used. Without these, the
   article <main> had no max-width (rendered full-bleed), the hero banner
   collapsed (its absolute category label overlapped the title), and the
   related/gallery grids fell back to full-width "immense" cards.
   These match Tailwind's defaults (sm=640px, lg=1024px).
   --------------------------------------------------------------------------- */
.max-w-3xl { max-width: 48rem; }   /* generic pages */
.max-w-4xl { max-width: 56rem; }   /* blog article + review reading column */
.aspect-\[16\/3\] { aspect-ratio: 16 / 3; }  /* article hero banner (short) */
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* MagicProxies CMS — prose styles for WYSIWYG body content (uses theme tokens) */
.mp-prose { color: var(--foreground); font-size: 1rem; line-height: 1.75; }
.mp-prose > * + * { margin-top: 1.1rem; }
.mp-prose h1, .mp-prose h2, .mp-prose h3, .mp-prose h4 {
  font-family: "Cinzel", Georgia, serif; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--foreground); margin-top: 2rem;
}
.mp-prose h1 { font-size: 2rem; }
.mp-prose h2 { font-size: 1.6rem; color: var(--destructive); }
.mp-prose h3 { font-size: 1.3rem; }
.mp-prose h4 { font-size: 1.1rem; }
.mp-prose p { margin-top: 1.1rem; }
.mp-prose a { color: var(--destructive); text-decoration: underline; text-underline-offset: 2px; }
.mp-prose a:hover { color: var(--primary); }
.mp-prose ul, .mp-prose ol { padding-left: 1.5rem; }
.mp-prose ul { list-style: disc; }
.mp-prose ol { list-style: decimal; }
.mp-prose li { margin-top: 0.4rem; }
/* Keep ALL article images controlled (never full-screen): bound width AND height,
   centered. JS makes them click-to-zoom to view full size in the lightbox.
   Linked/card embeds (e.g. Scryfall cards) keep their own size & behaviour. */
.mp-prose img {
  max-width: min(100%, 720px); max-height: 440px; width: auto; height: auto;
  display: block; margin: 1.5rem auto; border-radius: 0.75rem;
}
.mp-prose a img { max-width: 100%; max-height: none; }
.mp-prose figure img { margin: 0 auto; }
.mp-prose img.mp-zoomable { cursor: zoom-in; transition: filter .15s ease, box-shadow .15s ease; }
.mp-prose img.mp-zoomable:hover { filter: brightness(1.04); box-shadow: 0 8px 26px rgba(0, 0, 0, .18); }
.mp-prose figure { margin: 1.5rem 0; }
.mp-prose figcaption { font-size: 0.85rem; color: var(--muted-foreground); text-align: center; margin-top: 0.5rem; }
/* Expandable FAQ / disclosure widgets (<details><summary>) */
.mp-prose details { border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card); margin: 0.6rem 0; padding: 0 1.1rem; }
.mp-prose details[open] { box-shadow: 0 2px 12px rgba(0, 0, 0, .05); }
.mp-prose summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: 1.05rem; line-height: 1.3;
  color: var(--foreground); padding: 0.9rem 0;
}
.mp-prose summary::-webkit-details-marker { display: none; }
.mp-prose summary::after { content: "+"; font-weight: 600; font-size: 1.45rem; line-height: 1; color: var(--destructive); }
.mp-prose details[open] summary::after { content: "\2212"; }
.mp-prose summary:hover { color: var(--destructive); }
.mp-prose summary + * { margin-top: 0; }
.mp-prose details[open] > *:last-child { margin-bottom: 0.95rem; }
.mp-prose blockquote {
  border-left: 4px solid var(--gold); padding: 0.25rem 0 0.25rem 1.25rem;
  color: var(--muted-foreground); font-style: italic;
}
.mp-prose code {
  background: var(--muted); padding: 0.1rem 0.35rem; border-radius: 0.35rem;
  font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mp-prose pre {
  background: var(--ink); color: #fff; padding: 1rem 1.25rem; border-radius: 0.75rem;
  overflow-x: auto; font-size: 0.9rem;
}
.mp-prose pre code { background: transparent; padding: 0; color: inherit; }
.mp-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.mp-prose th, .mp-prose td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }
.mp-prose th { background: var(--muted); font-weight: 700; }
.mp-prose iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem; border: 0; margin: 1.5rem 0; }


/* Floating "Edit in admin" button — only output for staff/owners (see mp_edit_fab) */
.mp-edit-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 1rem; border-radius: 9999px;
  background: var(--primary); color: var(--primary-foreground);
  font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 0.85rem;
  border: 1px solid var(--gold);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.35), 0 2px 6px -2px rgba(0,0,0,.25);
  text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.mp-edit-fab:hover, .mp-edit-fab:focus {
  background: var(--ember); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.45), 0 3px 8px -2px rgba(0,0,0,.3);
}
.mp-edit-fab svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) { .mp-edit-fab span { display: none; } .mp-edit-fab { padding: 0.7rem; } }

/* Hero quick-pick buttons (linked). Solid (non-transparent) hover, real <a> links. */
.mp-quickpick {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--parchment) 95%, transparent);
  color: var(--primary); font-size: .875rem; font-weight: 600;
  text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mp-quickpick:hover, .mp-quickpick:focus-visible {
  background: var(--gold);            /* solid gold on hover, never transparent */
  border-color: var(--primary);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transform: translateY(-1px);
  outline: none;
}
.mp-quickpick-center { width: 100%; justify-content: center; }
.mp-quickpick-ico { width: 1rem; height: 1rem; color: var(--destructive); flex: none; }
.mp-quickpick:hover .mp-quickpick-ico, .mp-quickpick:focus-visible .mp-quickpick-ico { color: var(--ink); }

/* ---- Banner category badge: 15px left margin (build lacks .left-4) ---- */
.mp-banner-cat { left: 15px; }

/* ---- Showcase gallery: half-size thumbnails (double the columns) ---- */
.mp-showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 640px) { .mp-showcase { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- Image lightbox (gallery viewer) ---- */
.mp-lb {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgba(20, 14, 8, .88); backdrop-filter: blur(2px);
  padding: 3.5rem 1rem;
}
.mp-lb.open { display: flex; }
.mp-lb-stage { margin: 0; display: flex; align-items: center; justify-content: center; max-width: min(92vw, 1100px); max-height: 86vh; }
.mp-lb-stage img {
  max-width: 100%; max-height: 86vh; width: auto; height: auto;
  border-radius: 8px; box-shadow: 0 12px 44px rgba(0, 0, 0, .55); cursor: pointer;
}
.mp-lb-nav, .mp-lb-close {
  position: absolute; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .4); color: #fff; border: 0; cursor: pointer;
  line-height: 1; border-radius: 999px; transition: background .15s ease;
}
.mp-lb-nav:hover, .mp-lb-close:hover { background: rgba(0, 0, 0, .68); }
.mp-lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; }
.mp-lb-prev { left: 1.25rem; }
.mp-lb-next { right: 1.25rem; }
.mp-lb-close { top: 1rem; right: 1.25rem; width: 42px; height: 42px; font-size: 1.6rem; }
.mp-lb-single .mp-lb-nav { display: none; }
@media (max-width: 520px) {
  .mp-lb { padding: 3rem .5rem; }
  .mp-lb-nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .mp-lb-prev { left: .5rem; } .mp-lb-next { right: .5rem; }
}

/* Header brand hover: just spin the avatar (no scale on avatar or text). */
.mp-brand-mark { transition: transform .5s ease; }
.mp-brand-link:hover .mp-brand-mark { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) {
  .mp-brand-mark { transition: none; }
}

/* Dark translucent plate behind white text over bright banners (category / top heroes).
   inline so the plate is only as wide as the text; clone so wrapped lines each get one. */
.mp-text-plate {
  display: inline;
  background: rgba(20, 20, 20, .6);
  padding: .12em .4em;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Final Verdict on ranked posts renders rich HTML inside a dark box -> invert prose colors. */
.mp-prose-invert,
.mp-prose-invert p,
.mp-prose-invert li,
.mp-prose-invert h2,
.mp-prose-invert h3,
.mp-prose-invert h4,
.mp-prose-invert strong { color: #fff; }
.mp-prose-invert a { color: var(--gold); }
.mp-prose-invert a:hover { color: #fff; }
.mp-prose-invert > :first-child { margin-top: 0; }

/* Homepage category buttons: 7 across on desktop, 2 per row on mobile. */
.mp-cat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 1024px) { .mp-cat-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .7rem; } }
.mp-cat-btn {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  padding: 1rem .55rem; border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(to top, #f7eedd 0%, #ffffff 72%);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mp-cat-btn:hover { border-color: var(--primary); box-shadow: 0 8px 20px rgba(0,0,0,.09); transform: translateY(-3px); }
.mp-cat-btn-ico {
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--parchment)); color: var(--primary);
  border: 1px solid var(--border);
}
.mp-cat-btn-ico img { width: 100%; height: 100%; object-fit: cover; }
.mp-cat-btn-ico svg { width: 1.5rem; height: 1.5rem; }
.mp-cat-btn:hover .mp-cat-btn-ico { background: var(--primary); color: var(--primary-foreground); }
.mp-cat-btn-name { font-weight: 700; font-size: .86rem; line-height: 1.2; color: var(--foreground); }
.mp-cat-btn:hover .mp-cat-btn-name { color: var(--primary); }
.mp-cat-btn-count {
  font-size: .68rem; font-weight: 600; color: var(--muted-foreground);
  background: var(--muted); border-radius: 999px; padding: .12rem .55rem;
}