/* ============================================================================
   MTGBrew — Design System CSS  (v1.0.1, Oct 20, 2026)
   Premium dark-fantasy redesign for mtgbrew.ai (WordPress + Kadence theme).

   SOURCE OF TRUTH
   - Art direction: Brandon's approved Store reference image (engraved gold,
     arcane stone, purple mana glow) + the ChatGPT redesign concept spec
     (files/chatgpt-redesign-concept-2026-10-19.md). Palette tokens below are
     the concept's official tokens — use them verbatim, do not re-sample.
   - Polish values (glow layering, motion, card radius) borrow from Claude
     Consult #1 where they serve shared brand surfaces. The game BOARD has
     its own system and is OUT OF SCOPE for this file.

   HOW THIS FILE IS APPLIED (two supported routes — see README.md)
   A) Preferred: the "MTGBrew Design" plugin (mtgbrew-design.zip) enqueues
      this file late (priority 999) so it layers over Kadence + the Builder
      and Cards plugins without editing any of them.
   B) Fallback: paste this whole file into Customizer → Additional CSS.
      The @import in section 0 must be the FIRST thing in that box.

   CONVENTIONS
   - Every block is commented with the page/component it serves.
   - ".mtgb-" prefixed classes are NEW utility classes introduced by this
     package; they only take effect where page-map.md says to add them.
   - ".mtgbrew-" prefixed classes belong to the Builder/Cards plugins; this
     file RESTYLES them (same specificity or later cascade — never rename).
   - Textures are 100% CSS gradients. No external images, per spec.
   - Glow budget (Claude): max 2–3 box-shadow layers per element on mobile.
   - Motion: 150–250ms, cubic-bezier(.2,.8,.2,1), transform/opacity only.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   0. FONTS (fallback route only — the plugin enqueues these properly)
   Display: Cinzel — engraved Roman capitals, the closest Google Fonts match
   to the reference's chiseled gold lettering. Body: Inter — the clean,
   highly legible sans the concept requires for functional text.
   Exactly two families (Claude's cap). The MTGBrew logo stays Brandon's
   artwork image — never set the logo in a font.
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS — serves: every page, every component
   Official tokens are the concept's hexes, verbatim. "Derived" tokens are
   implementation shades mixed from the officials (documented as such in
   README.md) — they exist so gradients/bevels don't need new brand colors.
   --------------------------------------------------------------------------- */
:root {
  /* Official palette (concept §2D) */
  --mtgb-arcane-black:   #111016;  /* primary background, deep shadow      */
  --mtgb-obsidian-slate: #24212E;  /* stone panels, recessed surfaces      */
  --mtgb-engraved-gold:  #D6AB62;  /* headings, ornate metallic trim       */
  --mtgb-arcane-purple:  #913DF4;  /* primary actions, mana, Play          */
  --mtgb-mystic-blue:    #287DEB;  /* Computer opponent, Build             */
  --mtgb-emerald:        #16A66C;  /* Collection, Player, live states      */
  --mtgb-ember:          #D17A28;  /* Learn                                */
  --mtgb-battle-red:     #A83C43;  /* opposing side, errors                */

  /* Derived shades (mixed from officials — not new brand colors) */
  --mtgb-black-deep:     #0B0A10;  /* page floor under the stone layers    */
  --mtgb-slate-raised:   #2E2A3D;  /* panel face, one step above slate     */
  --mtgb-slate-inset:    #1A1824;  /* recessed wells, input backgrounds    */
  --mtgb-line:           #3A3549;  /* hairline borders on stone            */
  --mtgb-gold-bright:    #EFD096;  /* top facet of the engraved-gold ramp  */
  --mtgb-gold-deep:      #8C6A34;  /* bottom facet / engraved shadow       */
  --mtgb-purple-deep:    #5E1FB8;  /* bottom facet of primary buttons      */
  --mtgb-purple-bright:  #B678FF;  /* top facet / hover lift               */

  /* Text */
  --mtgb-ink:            #EDEAF4;  /* primary text on stone                */
  --mtgb-ink-soft:       #C9C4D8;  /* secondary text                       */
  --mtgb-ink-mute:       #9A94AC;  /* captions, meta, placeholders         */

  /* Type */
  --mtgb-font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --mtgb-font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Shape + depth */
  --mtgb-radius:      12px;        /* standard panel radius                */
  --mtgb-radius-sm:   8px;
  --mtgb-radius-lg:   18px;        /* heroes, featured panels              */
  --mtgb-shadow-panel: 0 10px 30px rgba(0,0,0,.55),
                       inset 0 1px 0 rgba(255,255,255,.06),
                       inset 0 -12px 24px rgba(0,0,0,.35);
  --mtgb-glow-purple: 0 0 18px rgba(145,61,244,.45),
                      0 0 46px rgba(145,61,244,.18);
  --mtgb-glow-gold:   0 0 16px rgba(214,171,98,.35);
  --mtgb-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------------------------------------------------------------------------
   2. PAGE FOUNDATION — serves: all pages
   Ancient arcane stone, built from gradients only:
   layer 1 (top) faint summoning-circle rings, off-center, very low alpha
   layer 2 oversized soft radial that lifts the middle of the page
   layer 3 "carved stone" micro-texture: two crossing repeating gradients
   layer 4 the base ramp Arcane Black → deep black (Claude's vignette idea,
           re-based on the concept's Arcane Black)
   The circle sits behind content and never carries text contrast duty.
   --------------------------------------------------------------------------- */
body {
  background-color: var(--mtgb-black-deep);
  background-image:
    radial-gradient(circle at 85% -10%, rgba(145,61,244,.07) 0 120px, transparent 121px),
    radial-gradient(circle at 85% -10%, transparent 0 190px, rgba(214,171,98,.05) 191px 193px, transparent 194px),
    radial-gradient(circle at 85% -10%, transparent 0 300px, rgba(145,61,244,.05) 301px 303px, transparent 304px),
    radial-gradient(120% 60% at 50% 0%, rgba(145,61,244,.06), transparent 60%),
    repeating-linear-gradient(0deg,   rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg,  rgba(0,0,0,.05) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, var(--mtgb-arcane-black), var(--mtgb-black-deep) 70%);
  background-attachment: fixed, fixed, fixed, fixed, scroll, scroll, fixed;
  color: var(--mtgb-ink);
  font-family: var(--mtgb-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Text selection — small brand moment, all pages */
::selection { background: rgba(145,61,244,.55); color: #fff; }

/* Focus visibility — keyboard/screen-reader access is a spec requirement */
:focus-visible {
  outline: 2px solid var(--mtgb-gold-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY — serves: all pages
   Display = engraved gold Cinzel for page titles, section titles, prices
   and big numbers. Body = Inter. Ornate type is NEVER used for paragraphs
   (concept §2C). Kadence prints page titles in .entry-title / .page-title;
   Rank Math breadcrumbs and UM headings inherit via the utility classes.
   --------------------------------------------------------------------------- */
h1, h2, .entry-title, .page-title {
  font-family: var(--mtgb-font-display);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--mtgb-engraved-gold);
}
h3, h4 {
  font-family: var(--mtgb-font-body);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--mtgb-ink);
}
/* Engraved-gold text effect. Apply to page H1s and hero titles.
   The gradient ramp bright→gold→deep reads as metal catching light;
   the drop shadow is the engraved cut. Serves: Home hero, page titles,
   Store title, Collection title, section titles (.mtgb-section-title). */
.mtgb-gold-text, .entry-header .entry-title, .page-hero .page-title {
  background: linear-gradient(180deg,
      var(--mtgb-gold-bright) 0%, var(--mtgb-engraved-gold) 45%,
      var(--mtgb-gold-deep) 78%, var(--mtgb-engraved-gold) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.65));
  text-transform: uppercase;
}
/* Fallback: if background-clip:text is unsupported, show solid gold */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .mtgb-gold-text, .entry-header .entry-title { color: var(--mtgb-engraved-gold); -webkit-text-fill-color: currentColor; }
}
/* Section header used above panel groups (e.g. "MEMBERSHIP", "CREDIT PACKS"
   on the Store; "YOUR DECKS" on My Decks). Small Cinzel caps, gold, with
   hairline rules either side — mirrors the reference's section bands. */
.mtgb-section-title {
  font-family: var(--mtgb-font-display);
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mtgb-engraved-gold);
  display: flex; align-items: center; gap: 14px;
}
.mtgb-section-title::before, .mtgb-section-title::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--mtgb-line), transparent);
}
p, li { color: var(--mtgb-ink-soft); }
strong, b { color: var(--mtgb-ink); }
small, .has-small-font-size { color: var(--mtgb-ink-mute); }

/* Links — gold at rest in prose, purple in UI chrome; always underlined on
   hover so meaning never rides on color alone (concept §4) */
a { color: var(--mtgb-gold-bright); transition: color .18s var(--mtgb-ease); }
a:hover, a:focus { color: var(--mtgb-engraved-gold); }

/* ---------------------------------------------------------------------------
   4. BUTTONS — serves: all pages (Kadence .button, WP block buttons,
   Kadence Blocks .kb-button, Gutenberg .wp-block-button__link)
   Primary = the reference's BUY plate: luminous purple, metallic rim,
   bright top edge, white bold caps. Gold variant = Ultimate-tier actions.
   Slate variant = secondary/metal buttons. Min height 48px (touch).
   --------------------------------------------------------------------------- */
.button, button.button, .wp-block-button__link, .kb-button, input[type="submit"].button {
  font-family: var(--mtgb-font-body);
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff !important;
  background: linear-gradient(180deg, var(--mtgb-purple-bright), var(--mtgb-arcane-purple) 45%, var(--mtgb-purple-deep));
  border: 1px solid rgba(214,171,98,.55);
  border-radius: 10px;
  padding: 14px 28px; min-height: 48px;
  box-shadow: var(--mtgb-glow-purple), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 16px rgba(0,0,0,.35);
  transition: transform .18s var(--mtgb-ease), box-shadow .18s var(--mtgb-ease), filter .18s var(--mtgb-ease);
  text-decoration: none;
}
.button:hover, .wp-block-button__link:hover, .kb-button:hover {
  filter: brightness(1.1); transform: translateY(-1px); color: #fff !important;
}
.button:active, .wp-block-button__link:active { transform: translateY(0); filter: brightness(.98); }
.button[disabled], .button.disabled { opacity: .5; filter: saturate(.5); pointer-events: none; }

/* Gold button — Ultimate tier + highest-value CTAs (add class mtgb-btn-gold) */
.mtgb-btn-gold, .is-style-mtgb-gold .wp-block-button__link {
  background: linear-gradient(180deg, var(--mtgb-gold-bright), var(--mtgb-engraved-gold) 50%, var(--mtgb-gold-deep)) !important;
  color: #241A05 !important; border-color: #F3DFAE;
  box-shadow: var(--mtgb-glow-gold), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -8px 16px rgba(90,60,10,.45);
}
/* Slate/metal button — secondary actions (add class mtgb-btn-slate) */
.mtgb-btn-slate, .is-style-outline .wp-block-button__link {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate)) !important;
  color: var(--mtgb-ink) !important; border: 1px solid var(--mtgb-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.4);
}
/* Color-meaning variants (concept §2D: colors carry function) */
.mtgb-btn-blue  { background: linear-gradient(180deg, #5B9BFF, var(--mtgb-mystic-blue) 50%, #1753AC) !important; }
.mtgb-btn-green { background: linear-gradient(180deg, #2BC98A, var(--mtgb-emerald) 50%, #0D6B44) !important; }
.mtgb-btn-red   { background: linear-gradient(180deg, #C65B63, var(--mtgb-battle-red) 50%, #6E272D) !important; }

/* ---------------------------------------------------------------------------
   5. FORMS — serves: Contact, builder-adjacent forms, search boxes,
   any Gutenberg/Kadence form on content pages
   Recessed obsidian wells: darker than the panel, inset shadow, gold
   focus ring. (Builder/UM forms get their own deeper treatment in
   sections 10 and 12; this is the global baseline.)
   --------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"],
input[type="tel"], select, textarea {
  background: var(--mtgb-slate-inset);
  color: var(--mtgb-ink);
  border: 1px solid var(--mtgb-line);
  border-radius: var(--mtgb-radius-sm);
  padding: 11px 13px; min-height: 46px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
  font-family: var(--mtgb-font-body);
  transition: border-color .18s var(--mtgb-ease), box-shadow .18s var(--mtgb-ease);
}
input::placeholder, textarea::placeholder { color: var(--mtgb-ink-mute); }
input:focus, select:focus, textarea:focus {
  border-color: var(--mtgb-engraved-gold);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 3px rgba(214,171,98,.22);
  outline: none;
}
label { color: var(--mtgb-ink); font-weight: 600; }
input[type="range"] { accent-color: var(--mtgb-arcane-purple); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--mtgb-arcane-purple); width: 18px; height: 18px; }

/* ---------------------------------------------------------------------------
   6. TABLES — serves: card legalities, deck lists in tables, Learn
   comparison content, any .wp-block-table
   Metal plate header row (Cinzel small caps, gold), hairline row rules,
   tabular numbers so prices/stats align (Claude's numeric clarity rule).
   --------------------------------------------------------------------------- */
table, .wp-block-table table {
  width: 100%; border-collapse: collapse;
  background: var(--mtgb-obsidian-slate);
  border: 1px solid var(--mtgb-line); border-radius: var(--mtgb-radius);
  overflow: hidden; font-variant-numeric: tabular-nums;
}
thead th, .wp-block-table th {
  font-family: var(--mtgb-font-display); font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mtgb-engraved-gold); text-align: left;
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate));
  padding: 12px 14px; border-bottom: 1px solid var(--mtgb-gold-deep);
}
tbody td { padding: 10px 14px; color: var(--mtgb-ink-soft); border-bottom: 1px solid rgba(58,53,73,.55); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(145,61,244,.05); }

/* ---------------------------------------------------------------------------
   7. PANELS & CARDS (utility system) — serves: all pages
   The reusable component layer from concept §5:
   .mtgb-panel          standard recessed obsidian plate
   .mtgb-panel-featured ornate gold-trim plate (Ultimate, featured content)
   .mtgb-panel-purple   luminous purple plate (Pro tier, primary feature)
   .mtgb-chip           inset-metal status plate (plan / credits / counts)
   .mtgb-badge          availability states — LIVE / COMING SOON / selected
   Add these classes per page-map.md; nothing here renames existing markup.
   --------------------------------------------------------------------------- */
.mtgb-panel {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate) 30%, #201D2A);
  border: 1px solid var(--mtgb-line);
  border-radius: var(--mtgb-radius);
  box-shadow: var(--mtgb-shadow-panel);
  padding: 22px;
  position: relative;
}
/* Engraved inner frame line — the "inset border" of the reference panels */
.mtgb-panel::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(214,171,98,.14); border-radius: calc(var(--mtgb-radius) - 4px);
}
.mtgb-panel-featured {
  border-color: var(--mtgb-gold-deep);
  background: linear-gradient(180deg, #3A2E18, #2A2113 55%, #1E1809);
  box-shadow: var(--mtgb-glow-gold), var(--mtgb-shadow-panel);
}
.mtgb-panel-featured::after { border-color: rgba(214,171,98,.4); }
.mtgb-panel-purple {
  border-color: #6D28C9;
  background: linear-gradient(165deg, #3D1476, #2A0E55 55%, #1C0938);
  box-shadow: var(--mtgb-glow-purple), var(--mtgb-shadow-panel);
}
.mtgb-panel-purple::after { border-color: rgba(182,120,255,.35); }

.mtgb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mtgb-slate-inset);
  border: 1px solid var(--mtgb-line); border-radius: 999px;
  padding: 6px 14px; font-weight: 700; font-size: .9rem; color: var(--mtgb-ink);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
}
.mtgb-chip .mtgb-chip-num { color: var(--mtgb-gold-bright); font-size: 1.05rem; }
.mtgb-chip-purple { border-color: rgba(145,61,244,.55); }
.mtgb-chip-green  { border-color: rgba(22,166,108,.55); }
.mtgb-chip-green .mtgb-chip-num { color: #4ADE9E; }

.mtgb-badge {
  display: inline-block; font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--mtgb-line); color: var(--mtgb-ink-soft);
  background: var(--mtgb-slate-inset);
}
.mtgb-badge-live   { color: #4ADE9E; border-color: rgba(22,166,108,.6); box-shadow: 0 0 10px rgba(22,166,108,.25); }
.mtgb-badge-soon   { color: var(--mtgb-gold-bright); border-color: rgba(214,171,98,.5); }
.mtgb-badge-muted  { opacity: .65; }  /* unavailable rows stay quiet (concept §4) */

/* Ribbon — "MOST POPULAR" / "BEST VALUE" diagonal sash from the reference.
   Put class .mtgb-ribbon on the panel and the label in data-ribbon.
   Panel needs overflow visible at the corner — keep panels unclipped. */
.mtgb-ribbon { overflow: visible; }
.mtgb-ribbon::before {
  content: attr(data-ribbon);
  position: absolute; top: 16px; right: -12px; z-index: 3;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; color: #FFF3D6;
  background: linear-gradient(180deg, #7B2FE0, var(--mtgb-purple-deep));
  padding: 6px 16px; border: 1px solid rgba(214,171,98,.6);
  box-shadow: 0 4px 14px rgba(0,0,0,.5), var(--mtgb-glow-purple);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%, 8px 50%);
}

/* ---------------------------------------------------------------------------
   8. SITE CHROME — Kadence header & footer — serves: all pages
   Kadence markup: header#masthead.site-header (rows: .site-main-header-wrap,
   .site-header-row), branding .site-branding / .site-logo, nav
   .main-navigation .primary-menu-container, footer#colophon.site-footer.
   (Class names are Kadence-stable across 1.x/2.x; verify once in the
   browser during the apply session — see kadence-settings.md §0.)
   The header becomes a forged-metal band over the stone page; the wordmark
   is Brandon's logo IMAGE (never font text — Claude's rule).
   --------------------------------------------------------------------------- */
.site-header, #masthead {
  background: linear-gradient(180deg, #1B1826, var(--mtgb-arcane-black));
  border-bottom: 1px solid var(--mtgb-gold-deep);
  box-shadow: 0 6px 24px rgba(0,0,0,.55), inset 0 -1px 0 rgba(214,171,98,.25);
}
.site-header .site-branding .site-title,
.site-header .site-title a {
  font-family: var(--mtgb-font-display); color: var(--mtgb-engraved-gold);
  letter-spacing: .06em; text-decoration: none;
}
.main-navigation .primary-menu-container > ul > li > a,
.header-navigation .menu > li > a {
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  font-size: .86rem; color: var(--mtgb-ink-soft);
  padding: 10px 14px; border-radius: var(--mtgb-radius-sm);
  transition: color .18s var(--mtgb-ease), background .18s var(--mtgb-ease), box-shadow .18s var(--mtgb-ease);
}
.main-navigation .primary-menu-container > ul > li > a:hover,
.header-navigation .menu > li > a:hover { color: #fff; background: rgba(145,61,244,.14); }
.main-navigation .current-menu-item > a, .header-navigation .current-menu-item > a {
  color: var(--mtgb-gold-bright);
  box-shadow: inset 0 -2px 0 var(--mtgb-arcane-purple);
}
/* Mobile menu toggle + drawer */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-navigation { background: var(--mtgb-obsidian-slate); color: var(--mtgb-ink); }
.mobile-navigation ul li a { color: var(--mtgb-ink-soft); font-weight: 600; }
.mobile-navigation ul li.current-menu-item > a { color: var(--mtgb-gold-bright); }

/* Kadence page-hero / title band (pages that use the theme title area) */
.entry-hero, .page-hero, .hero-section {
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(145,61,244,.14), transparent 60%),
    linear-gradient(180deg, #1B1826, var(--mtgb-arcane-black));
  border-bottom: 1px solid var(--mtgb-line);
}
.entry-hero .entry-title, .page-hero .page-title { font-size: clamp(2rem, 6vw, 3.4rem); text-align: center; }
/* Kadence title band on normal pages */
.entry-header { margin-bottom: 8px; }
.entry-header .entry-title { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }

/* Footer — deep stone with a gold hairline and restrained purple lift */
.site-footer, #colophon {
  background: linear-gradient(180deg, var(--mtgb-arcane-black), var(--mtgb-black-deep));
  border-top: 1px solid var(--mtgb-gold-deep);
  box-shadow: inset 0 1px 0 rgba(214,171,98,.22);
  color: var(--mtgb-ink-mute);
}
.site-footer a { color: var(--mtgb-ink-soft); }
.site-footer a:hover { color: var(--mtgb-gold-bright); }
.site-footer .widget-title, .site-footer h2, .site-footer h3 {
  font-family: var(--mtgb-font-display); color: var(--mtgb-engraved-gold);
  letter-spacing: .1em; font-size: .95rem; text-transform: uppercase;
}

/* Breadcrumbs (Rank Math / Kadence) — quiet metal trail */
.rank-math-breadcrumb, .kadence-breadcrumbs, .woocommerce-breadcrumb {
  font-size: .85rem; color: var(--mtgb-ink-mute);
}
.rank-math-breadcrumb a, .kadence-breadcrumbs a { color: var(--mtgb-ink-soft); }

/* ---------------------------------------------------------------------------
   9. HOME — destination tiles + status plates — serves: Home page
   The concept's 2×2 artifact tiles (PLAY purple / BUILD blue / COLLECTION
   green / LEARN ember), each a dark metal plate lit in its function color.
   Markup: add .mtgb-tiles wrapper + .mtgb-tile.mtgb-tile-<color> to the
   existing Home blocks (page-map.md §Home). CSS-only art: the "emblem"
   is a radial glow + an optional inline SVG/emoji-free glyph slot
   (.mtgb-tile-glyph) — real icon art is a phase-2 asset (README).
   --------------------------------------------------------------------------- */
.mtgb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mtgb-tile {
  display: block; text-decoration: none; position: relative;
  border-radius: var(--mtgb-radius-lg); padding: 26px 22px; min-height: 150px;
  background: linear-gradient(170deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate) 60%, #1B1824);
  border: 1px solid var(--mtgb-line); box-shadow: var(--mtgb-shadow-panel);
  transition: transform .2s var(--mtgb-ease), box-shadow .2s var(--mtgb-ease);
}
.mtgb-tile:hover { transform: translateY(-3px); }
.mtgb-tile .mtgb-tile-name {
  font-family: var(--mtgb-font-display); font-weight: 800; font-size: 1.6rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.mtgb-tile .mtgb-tile-sub { color: var(--mtgb-ink-soft); font-weight: 600; margin-top: 6px; }
.mtgb-tile-purple { border-color: #6D28C9; box-shadow: var(--mtgb-glow-purple), var(--mtgb-shadow-panel); }
.mtgb-tile-purple .mtgb-tile-name { color: var(--mtgb-purple-bright); }
.mtgb-tile-blue   { border-color: #1D4E9E; box-shadow: 0 0 16px rgba(40,125,235,.35), var(--mtgb-shadow-panel); }
.mtgb-tile-blue .mtgb-tile-name   { color: #7FB2FF; }
.mtgb-tile-green  { border-color: #0F7A4E; box-shadow: 0 0 16px rgba(22,166,108,.32), var(--mtgb-shadow-panel); }
.mtgb-tile-green .mtgb-tile-name { color: #4ADE9E; }
.mtgb-tile-ember  { border-color: #8F5316; box-shadow: 0 0 16px rgba(209,122,40,.32), var(--mtgb-shadow-panel); }
.mtgb-tile-ember .mtgb-tile-name { color: #F0A95C; }
/* Status strip (Plan / credits / collection) as inset plates — concept §3.1 */
.mtgb-status-strip { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------------------
   10. AI DECK BUILDER (Builder plugin markup) — serves: /ai-deck-builder/
   Restyles the plugin's existing classes; no markup change. The form
   becomes a featured stone plate; the wallet strip becomes status chips;
   Generate is the big glowing purple plate from the reference.
   --------------------------------------------------------------------------- */
.mtgbrew-builder {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate) 35%, #1E1B29);
  border: 1px solid var(--mtgb-line); border-radius: var(--mtgb-radius-lg);
  box-shadow: var(--mtgb-shadow-panel);
  color: var(--mtgb-ink); padding: 26px;
}
.mtgbrew-builder a { color: var(--mtgb-gold-bright); }
.mtgbrew-builder a:hover { color: var(--mtgb-engraved-gold); }

/* Wallet strip → inset status plates (credits read like the reference's
   coin counter: gold number in a dark metal holder) */
.mtgbrew-builder-wallet {
  background: var(--mtgb-slate-inset); border: 1px solid var(--mtgb-line);
  border-radius: 999px; padding: 8px 18px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
  font-weight: 700; color: var(--mtgb-ink);
}
.mtgbrew-wallet-item { font-variant-numeric: tabular-nums; }

.mtgbrew-builder-form .mtgbrew-field { margin-bottom: 18px; }
.mtgbrew-builder-form label {
  font-family: var(--mtgb-font-body); font-weight: 700; color: var(--mtgb-ink);
  letter-spacing: .02em; margin-bottom: 7px;
}
.mtgbrew-builder-form select,
.mtgbrew-builder-form input[type="text"],
.mtgbrew-builder-form input[type="number"] {
  background: var(--mtgb-slate-inset); color: var(--mtgb-ink);
  border: 1px solid var(--mtgb-line); border-radius: var(--mtgb-radius-sm);
  padding: 11px 13px; min-height: 46px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
}
.mtgbrew-builder-form select:focus,
.mtgbrew-builder-form input:focus {
  border-color: var(--mtgb-engraved-gold); outline: none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 3px rgba(214,171,98,.22);
}
.mtgbrew-builder-form input[type="range"] { accent-color: var(--mtgb-arcane-purple); }
.mtgbrew-field-note, .mtgbrew-form-note { color: var(--mtgb-ink-mute); font-size: .88rem; }

/* Plugin buttons: primary purple plate / alt slate plate / small metal */
.mtgbrew-btn {
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #fff !important; border: 1px solid rgba(214,171,98,.55); border-radius: 10px;
  background: linear-gradient(180deg, var(--mtgb-purple-bright), var(--mtgb-arcane-purple) 45%, var(--mtgb-purple-deep));
  box-shadow: var(--mtgb-glow-purple), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 16px rgba(0,0,0,.35);
  padding: 14px 26px; min-height: 48px;
  transition: filter .18s var(--mtgb-ease), transform .18s var(--mtgb-ease);
}
.mtgbrew-btn:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff !important; }
.mtgbrew-btn[disabled] { opacity: .55; filter: saturate(.5); }
.mtgbrew-btn-alt {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate));
  color: var(--mtgb-ink) !important; border-color: var(--mtgb-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.4);
}
.mtgbrew-btn-small { padding: 9px 16px; min-height: 40px; font-size: .82rem; }

/* Brewing progress — purple mana fill with a leading glow */
.mtgbrew-progress { border-top: 1px solid var(--mtgb-line); }
.mtgbrew-progress-stage { color: var(--mtgb-ink); font-weight: 700; }
.mtgbrew-progress-bar {
  background: var(--mtgb-slate-inset); border: 1px solid var(--mtgb-line);
  border-radius: 999px; box-shadow: inset 0 2px 6px rgba(0,0,0,.65); overflow: hidden;
}
.mtgbrew-progress-fill {
  background: linear-gradient(90deg, var(--mtgb-purple-deep), var(--mtgb-arcane-purple), var(--mtgb-purple-bright));
  box-shadow: 0 0 12px rgba(145,61,244,.65);
  transition: width .3s var(--mtgb-ease);
}
.mtgbrew-progress-meta, .mtgbrew-progress-note, .mtgbrew-result-text { color: var(--mtgb-ink-mute); }
.mtgbrew-progress-rolled, .mtgbrew-rolled-line { color: var(--mtgb-gold-bright); font-weight: 600; }
.mtgbrew-error {
  background: rgba(168,60,67,.14); border: 1px solid var(--mtgb-battle-red);
  color: #F2C1C4; border-radius: var(--mtgb-radius-sm); padding: 12px 14px;
}
/* Finished-brew banner reads as a victory plate */
.mtgbrew-brew-banner {
  background: linear-gradient(165deg, #3D1476, #24104A);
  border: 1px solid #6D28C9; border-radius: var(--mtgb-radius);
  box-shadow: var(--mtgb-glow-purple); color: var(--mtgb-ink);
}
.mtgbrew-brew-banner a { color: var(--mtgb-gold-bright); font-weight: 700; }
.mtgbrew-banner-pct { font-family: var(--mtgb-font-display); color: var(--mtgb-engraved-gold); }

/* ---------------------------------------------------------------------------
   11. DECKS — serves: /my-decks/, /decks/<slug>/ deck pages
   Deck list table inherits §6; the deck page buy panel becomes a gold-trim
   plate (it is the revenue surface via TCGplayer), owned cards glow
   emerald, ownership toggles are small metal buttons.
   --------------------------------------------------------------------------- */
.mtgbrew-decks-table { font-variant-numeric: tabular-nums; }
.mtgbrew-deck-summary { color: var(--mtgb-ink-soft); }
.mtgbrew-deck-own { color: var(--mtgb-emerald); font-weight: 700; }
.mtgbrew-deck-own a { color: var(--mtgb-gold-bright); }

.mtgbrew-decklist { list-style: none; padding: 0; }
.mtgbrew-decklist li {
  padding: 7px 10px; border-radius: 6px;
  border-bottom: 1px solid rgba(58,53,73,.4);
}
.mtgbrew-decklist li:hover { background: rgba(145,61,244,.05); }
.mtgbrew-decklist li.mtgbrew-card-owned {
  background: rgba(22,166,108,.10);
  box-shadow: inset 3px 0 0 var(--mtgb-emerald);
}
.mtgbrew-owned-label { color: #4ADE9E; font-weight: 700; font-size: .82rem; }
.mtgbrew-card-price { color: var(--mtgb-gold-bright); font-weight: 700; font-variant-numeric: tabular-nums; }

.mtgbrew-buy-panel {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate));
  border: 1px solid var(--mtgb-gold-deep); border-radius: var(--mtgb-radius);
  box-shadow: var(--mtgb-glow-gold), var(--mtgb-shadow-panel); padding: 20px;
}
.mtgbrew-own-toggle {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate));
  border: 1px solid var(--mtgb-line); color: var(--mtgb-ink-soft);
  border-radius: 999px; font-weight: 700;
  transition: all .18s var(--mtgb-ease);
}
.mtgbrew-own-toggle:hover { border-color: var(--mtgb-engraved-gold); color: var(--mtgb-ink); }
.mtgbrew-own-toggle.is-owned {
  background: linear-gradient(180deg, #2BC98A, var(--mtgb-emerald) 55%, #0D6B44);
  border-color: #4ADE9E; color: #fff;
  box-shadow: 0 0 10px rgba(22,166,108,.4);
}

/* ---------------------------------------------------------------------------
   12. CARD DATABASE — serves: /cards/ search + /cards/<slug>/ card pages
   Card art keeps its true aspect (488:680) and corner radius ≈4.7%/3.4%
   (Claude Q4) — never crop card art. Details sit on a stone plate;
   legalities render as a §6 table with format chips.
   --------------------------------------------------------------------------- */
.mtgbrew-card-search {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate));
  border: 1px solid var(--mtgb-line); border-radius: var(--mtgb-radius);
  box-shadow: var(--mtgb-shadow-panel); padding: 20px;
}
.mtgbrew-card-search-results { margin-top: 14px; }
.mtgbrew-card-details {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate) 40%, #1E1B29);
  border: 1px solid var(--mtgb-line); border-radius: var(--mtgb-radius-lg);
  box-shadow: var(--mtgb-shadow-panel); padding: 24px;
}
.mtgbrew-card-image img, img.mtgbrew-card-image {
  border-radius: 4.7% / 3.4%;
  box-shadow: 0 14px 34px rgba(0,0,0,.65), 0 0 0 1px rgba(214,171,98,.25);
  background: var(--mtgb-slate-inset); /* exact-aspect placeholder, no shift */
}
.mtgbrew-card-legalities { font-size: .92rem; }
.mtgbrew-card-legalities td:first-child { font-weight: 700; color: var(--mtgb-ink); }

/* Search result rows (shared shape with collection search, §13) */
.mtgbrew-search-result {
  background: var(--mtgb-obsidian-slate); border: 1px solid var(--mtgb-line);
  border-radius: var(--mtgb-radius-sm); transition: border-color .18s var(--mtgb-ease);
}
.mtgbrew-search-result:hover { border-color: var(--mtgb-gold-deep); }
.mtgbrew-search-name { color: var(--mtgb-ink); font-weight: 700; }
.mtgbrew-search-set, .mtgbrew-search-message { color: var(--mtgb-ink-mute); }
.mtgbrew-search-thumb img { border-radius: 4.7% / 3.4%; }
.mtgbrew-search-confirm { color: #4ADE9E; font-weight: 700; }

/* ---------------------------------------------------------------------------
   13. COLLECTION — serves: /collection/
   The vault: stat numbers are the strongest element (concept §3.5) — big
   tabular numerals on metal plates; add/search/photo panels share the
   standard plate; plan line stays neutral, upgrade link gets the action
   accent (it must not look disabled).
   --------------------------------------------------------------------------- */
.mtgbrew-collection {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate) 35%, #1E1B29);
  border: 1px solid var(--mtgb-line); border-radius: var(--mtgb-radius-lg);
  box-shadow: var(--mtgb-shadow-panel); padding: 24px; color: var(--mtgb-ink);
}
.mtgbrew-collection a { color: var(--mtgb-gold-bright); }
/* Stat plates — add .mtgb-stat-grid/.mtgb-stat in page content, or the
   collection summary block inherits the panel look via .mtgb-panel */
.mtgb-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mtgb-stat {
  background: var(--mtgb-slate-inset); border: 1px solid var(--mtgb-line);
  border-radius: var(--mtgb-radius); padding: 16px; text-align: center;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.55);
}
.mtgb-stat .mtgb-stat-num {
  font-size: 1.9rem; font-weight: 800; color: var(--mtgb-ink);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mtgb-stat .mtgb-stat-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mtgb-ink-mute);
}
.mtgb-stat-gold .mtgb-stat-num { color: var(--mtgb-gold-bright); }

.mtgbrew-collection-add,
.mtgbrew-collection-search,
.mtgbrew-collection-photo {
  background: var(--mtgb-obsidian-slate); border: 1px solid var(--mtgb-line);
  border-radius: var(--mtgb-radius); padding: 18px; margin-top: 16px;
}
.mtgbrew-collection-add label,
.mtgbrew-collection-search label,
.mtgbrew-collection-photo label { font-weight: 700; color: var(--mtgb-ink); }
.mtgbrew-collection-add input[type="text"],
.mtgbrew-collection-add input[type="number"],
.mtgbrew-collection-search input[type="search"] {
  background: var(--mtgb-slate-inset); border: 1px solid var(--mtgb-line);
  color: var(--mtgb-ink); border-radius: var(--mtgb-radius-sm);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
}
.mtgbrew-qty-btn, .mtgbrew-remove-btn {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate));
  border: 1px solid var(--mtgb-line); color: var(--mtgb-ink);
  border-radius: var(--mtgb-radius-sm); font-weight: 700; min-width: 40px; min-height: 40px;
  transition: border-color .18s var(--mtgb-ease);
}
.mtgbrew-qty-btn:hover, .mtgbrew-remove-btn:hover { border-color: var(--mtgb-engraved-gold); }
.mtgbrew-collection-qty { font-weight: 800; font-variant-numeric: tabular-nums; }
.mtgbrew-remove-btn:hover { border-color: var(--mtgb-battle-red); color: #F2C1C4; }

.mtgbrew-photo-result {
  background: rgba(40,125,235,.08); border: 1px solid rgba(40,125,235,.4);
  border-radius: var(--mtgb-radius-sm); padding: 12px 14px;
}
.mtgbrew-photo-added { color: #4ADE9E; font-weight: 700; }
.mtgbrew-photo-result-error {
  background: rgba(168,60,67,.12); border: 1px solid var(--mtgb-battle-red); color: #F2C1C4;
}

/* ---------------------------------------------------------------------------
   14. AFFILIATES — serves: /affiliates/ page + in-account affiliate
   section (Builder v0.6.0) + UM register-form opt-in fields
   The hoplink is the money artifact: mono-spaced, gold, on an inset well
   with its own copy button. Flashes use emerald/red state colors.
   (Copy on this page frames ClickBank as checkout + affiliate engine
   only — styling must never turn it into a "marketplace product" look.)
   --------------------------------------------------------------------------- */
.mtgbrew-affiliate h3 {
  font-family: var(--mtgb-font-display); color: var(--mtgb-engraved-gold);
  letter-spacing: .06em;
}
.mtgbrew-affiliate-status { color: var(--mtgb-emerald); font-weight: 800; }
.mtgbrew-affiliate-field label { font-weight: 700; color: var(--mtgb-ink); }
.mtgbrew-affiliate input[type="text"] {
  background: var(--mtgb-slate-inset); border: 1px solid var(--mtgb-line);
  color: var(--mtgb-ink); border-radius: var(--mtgb-radius-sm);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
}
.mtgbrew-hoplink-row input[type="text"] {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--mtgb-gold-bright); border-color: var(--mtgb-gold-deep);
  background: #14101F;
}
.mtgbrew-affiliate-flash { border-radius: var(--mtgb-radius-sm); padding: 12px 14px; font-weight: 600; }
.mtgbrew-affiliate-flash-success { background: rgba(22,166,108,.13); border: 1px solid var(--mtgb-emerald); color: #B9F4DA; }
.mtgbrew-affiliate-flash-error   { background: rgba(168,60,67,.13);  border: 1px solid var(--mtgb-battle-red); color: #F6CDD0; }
/* UM registration opt-in (checkbox + nickname note under the register form) */
.um-field-mtgbrew-affiliate-join .um-field-checkbox-option { color: var(--mtgb-ink); font-weight: 600; }
.um-field-mtgbrew-clickbank-nickname .mtgbrew-field-note { color: var(--mtgb-ink-mute); }

/* ---------------------------------------------------------------------------
   15. STORE — serves: /store/ + /store/thank-you/
   Direct port of the approved reference: tier cards are wide metal
   plates; PRO is the luminous purple featured plate with ribbon; ULTIMATE
   is the all-gold plate; DISCORD is the blue-lit plate; credit packs are
   a 2-col gem grid. Classes go on the Store page's existing blocks
   (page-map.md §Store) — prices and copy already live in page content;
   this CSS contains NO prices and invents none.
   --------------------------------------------------------------------------- */
.mtgb-tier {
  position: relative; border-radius: var(--mtgb-radius-lg); padding: 26px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate) 55%, #1D1A28);
  border: 1px solid var(--mtgb-line); box-shadow: var(--mtgb-shadow-panel);
}
.mtgb-tier::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(214,171,98,.14); border-radius: calc(var(--mtgb-radius-lg) - 4px);
}
.mtgb-tier .mtgb-tier-name {
  font-family: var(--mtgb-font-display); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; font-size: 1.45rem; color: var(--mtgb-ink);
}
.mtgb-tier .mtgb-tier-price {
  font-family: var(--mtgb-font-display); font-weight: 700;
  font-size: 1.3rem; color: var(--mtgb-gold-bright); font-variant-numeric: tabular-nums;
}
.mtgb-tier-free  { border-color: var(--mtgb-line); }
.mtgb-tier-pro {
  border-color: #6D28C9;
  background: linear-gradient(165deg, #43168A, #2A0E55 55%, #1C0938);
  box-shadow: var(--mtgb-glow-purple), var(--mtgb-shadow-panel);
}
.mtgb-tier-pro::after { border-color: rgba(182,120,255,.4); }
.mtgb-tier-ultimate {
  border-color: var(--mtgb-gold-bright);
  background: linear-gradient(170deg, #6E551F, #4A3A13 50%, #2A2110);
  box-shadow: var(--mtgb-glow-gold), var(--mtgb-shadow-panel);
}
.mtgb-tier-ultimate::after { border-color: rgba(239,208,150,.55); }
.mtgb-tier-ultimate .mtgb-tier-name,
.mtgb-tier-ultimate .mtgb-tier-price { color: #FFE9B0; }
.mtgb-tier-ultimate p, .mtgb-tier-ultimate li { color: #F3E7C8; }
.mtgb-tier-discord {
  border-color: #1D4E9E;
  background: linear-gradient(165deg, #16283F, #101A2E 60%, #0C1322);
  box-shadow: 0 0 16px rgba(40,125,235,.3), var(--mtgb-shadow-panel);
}
/* Credit-pack gem tiles — the gem is a CSS diamond (rotated, faceted by
   gradient) so no image assets are needed */
.mtgb-pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mtgb-pack {
  text-align: center; border-radius: var(--mtgb-radius); padding: 20px 12px 16px;
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate));
  border: 1px solid var(--mtgb-line); box-shadow: var(--mtgb-shadow-panel); position: relative;
}
.mtgb-pack .mtgb-gem {
  width: 44px; height: 44px; margin: 2px auto 12px; transform: rotate(45deg);
  border-radius: 9px; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 16px currentColor, inset 0 0 10px rgba(255,255,255,.35);
}
.mtgb-pack .mtgb-pack-count { font-weight: 800; letter-spacing: .08em; color: var(--mtgb-ink); text-transform: uppercase; }
.mtgb-pack .mtgb-pack-price { font-family: var(--mtgb-font-display); color: var(--mtgb-gold-bright); font-weight: 700; font-size: 1.15rem; }
.mtgb-gem-purple { color: var(--mtgb-arcane-purple); background: linear-gradient(135deg, #C07CFF, var(--mtgb-arcane-purple) 55%, var(--mtgb-purple-deep)); }
.mtgb-gem-blue   { color: var(--mtgb-mystic-blue);   background: linear-gradient(135deg, #7FB2FF, var(--mtgb-mystic-blue) 55%, #17457F); }
.mtgb-gem-green  { color: var(--mtgb-emerald);       background: linear-gradient(135deg, #4ADE9E, var(--mtgb-emerald) 55%, #0B5232); }
.mtgb-gem-gold   { color: var(--mtgb-engraved-gold); background: linear-gradient(135deg, var(--mtgb-gold-bright), var(--mtgb-engraved-gold) 55%, var(--mtgb-gold-deep)); }
/* Thank-you page: confirmation reads as a victory plate */
.mtgb-thankyou {
  text-align: center; padding: 34px 26px;
}
.mtgb-thankyou .mtgb-thankyou-mark {
  font-size: 2.6rem; color: #4ADE9E; text-shadow: 0 0 22px rgba(22,166,108,.6);
}

/* ---------------------------------------------------------------------------
   16. LEARN + CONTENT PAGES — serves: /learn/, About, Contact,
   Privacy, Terms, blog-post style pages
   Long-form readability wins over decoration: prose width capped, stone
   panels only around callouts/cards, headings keep the gold hierarchy.
   --------------------------------------------------------------------------- */
.entry-content { max-width: 100%; }
.entry-content p, .entry-content li { line-height: 1.65; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content blockquote {
  border-left: 3px solid var(--mtgb-arcane-purple);
  background: rgba(145,61,244,.07); border-radius: 0 var(--mtgb-radius-sm) var(--mtgb-radius-sm) 0;
  padding: 14px 18px; color: var(--mtgb-ink);
}
.entry-content hr {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mtgb-gold-deep), transparent);
  margin: 2em 0;
}
/* Learn hub guide cards — add .mtgb-guide-grid/.mtgb-guide-card in content */
.mtgb-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.mtgb-guide-card {
  display: block; text-decoration: none; border-radius: var(--mtgb-radius);
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate));
  border: 1px solid var(--mtgb-line); box-shadow: var(--mtgb-shadow-panel); padding: 20px;
  transition: transform .2s var(--mtgb-ease), border-color .2s var(--mtgb-ease);
}
.mtgb-guide-card:hover { transform: translateY(-3px); border-color: var(--mtgb-ember); }
.mtgb-guide-card .mtgb-guide-title { font-family: var(--mtgb-font-display); color: var(--mtgb-engraved-gold); letter-spacing: .04em; }

/* ---------------------------------------------------------------------------
   17. ULTIMATE MEMBER — serves: /login/, /register/, /account/,
   /user/, /members/, password reset
   UM ships its own blue-ish styles; these overrides re-skin the surfaces
   members actually touch. UM class names are stable across 2.x
   (.um-form, .um-field, .um-input, .um-button, .um-account-*). The form
   card becomes a stone plate; the primary button matches §4; account
   side-nav becomes metal tabs.
   --------------------------------------------------------------------------- */
.um.um-login, .um.um-register, .um.um-account, .um.um-password {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate) 40%, #1E1B29);
  border: 1px solid var(--mtgb-line); border-radius: var(--mtgb-radius-lg);
  box-shadow: var(--mtgb-shadow-panel); padding: 26px;
}
.um .um-field-label, .um label { color: var(--mtgb-ink); font-weight: 700; }
.um input[type="text"], .um input[type="email"], .um input[type="password"],
.um input[type="number"], .um input[type="search"], .um select, .um textarea,
.um .um-input {
  background: var(--mtgb-slate-inset) !important; color: var(--mtgb-ink) !important;
  border: 1px solid var(--mtgb-line) !important; border-radius: var(--mtgb-radius-sm) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55);
  min-height: 46px;
}
.um input:focus, .um select:focus, .um textarea:focus {
  border-color: var(--mtgb-engraved-gold) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 3px rgba(214,171,98,.22);
}
.um .um-button, .um input[type="submit"].um-button, .um a.um-button {
  background: linear-gradient(180deg, var(--mtgb-purple-bright), var(--mtgb-arcane-purple) 45%, var(--mtgb-purple-deep)) !important;
  border: 1px solid rgba(214,171,98,.55) !important; border-radius: 10px !important;
  color: #fff !important; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  box-shadow: var(--mtgb-glow-purple), inset 0 1px 0 rgba(255,255,255,.35) !important;
  min-height: 48px;
}
.um .um-button:hover { filter: brightness(1.1); }
.um .um-alt, .um a.um-alt { /* UM secondary ("register instead" style links) */
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate)) !important;
  color: var(--mtgb-ink) !important; border: 1px solid var(--mtgb-line) !important;
  box-shadow: none !important;
}
.um .um-link, .um .um-link-alt { color: var(--mtgb-gold-bright); }
.um .um-error, .um-error { background: rgba(168,60,67,.14); border-color: var(--mtgb-battle-red); color: #F2C1C4; }
.um .um-success, .um-success { background: rgba(22,166,108,.13); border-color: var(--mtgb-emerald); color: #B9F4DA; }
/* Account area: side tabs + content */
.um-account .um-account-side, .um .um-account-meta { background: transparent; }
.um-account-nav a, .um .um-account-link {
  color: var(--mtgb-ink-soft); font-weight: 700; border-radius: var(--mtgb-radius-sm);
  padding: 10px 14px; transition: all .18s var(--mtgb-ease);
}
.um-account-nav a:hover { background: rgba(145,61,244,.12); color: #fff; }
.um-account-nav a.current, .um-account-nav a.active {
  background: linear-gradient(180deg, var(--mtgb-slate-raised), var(--mtgb-obsidian-slate));
  color: var(--mtgb-gold-bright); box-shadow: inset 3px 0 0 var(--mtgb-arcane-purple);
}
.um .um-account-heading, .um-account strong {
  font-family: var(--mtgb-font-display); color: var(--mtgb-engraved-gold); letter-spacing: .05em;
}
/* Profile header (/user/) */
.um-profile .um-name a, .um .um-name { color: var(--mtgb-ink); font-weight: 800; }
.um-profile .um-cover, .um .um-cover { background: linear-gradient(140deg, #2A0E55, var(--mtgb-arcane-black) 70%); }
.um-member-card, .um .um-members .um-member-card {
  background: var(--mtgb-obsidian-slate); border: 1px solid var(--mtgb-line);
  border-radius: var(--mtgb-radius); color: var(--mtgb-ink);
}

/* ---------------------------------------------------------------------------
   18. HEROES — serves: Home hero + any page top section
   .mtgb-hero wraps an existing Kadence hero/cover block: cinematic purple
   lift behind an engraved-gold title, gradient floor so text always reads
   (concept §3.2: artwork sits behind a dark gradient). Artwork itself is a
   content asset; this layer guarantees the frame reads correctly with or
   without one.
   --------------------------------------------------------------------------- */
.mtgb-hero {
  position: relative; border-radius: var(--mtgb-radius-lg); overflow: hidden;
  border: 1px solid var(--mtgb-line); box-shadow: var(--mtgb-shadow-panel);
  background:
    radial-gradient(90% 130% at 50% -20%, rgba(145,61,244,.28), transparent 60%),
    radial-gradient(60% 80% at 85% 110%, rgba(40,125,235,.12), transparent 60%),
    linear-gradient(180deg, #1E1830, var(--mtgb-arcane-black));
  padding: clamp(28px, 6vw, 64px) clamp(18px, 5vw, 48px);
  text-align: center;
}
.mtgb-hero .mtgb-hero-title {
  font-family: var(--mtgb-font-display); font-weight: 800;
  font-size: clamp(2.1rem, 7vw, 3.8rem); letter-spacing: .05em; text-transform: uppercase;
}
.mtgb-hero .mtgb-hero-sub { color: var(--mtgb-purple-bright); font-weight: 600; letter-spacing: .06em; }
.mtgb-hero p { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------
   19. RESPONSIVE — mobile-first checks (concept §4 + Claude's matrix)
   Breakpoints mirror the verification viewports: ≤1024 tablet, ≤768 small
   tablet/large phone, ≤560 phone. Rules here protect three things:
   tiles/packs stack cleanly, tap targets stay ≥44px, glow stacks thin out
   on small screens for performance.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mtgb-tiles { gap: 14px; }
  .mtgb-tier { padding: 22px; }
}
@media (max-width: 768px) {
  .mtgb-panel, .mtgbrew-builder, .mtgbrew-collection,
  .mtgbrew-card-details, .um.um-login, .um.um-register, .um.um-account {
    padding: 18px; border-radius: var(--mtgb-radius);
  }
  .button, .wp-block-button__link, .mtgbrew-btn, .um .um-button {
    width: auto; min-height: 48px; padding: 13px 20px;
  }
  thead th, .wp-block-table th, tbody td { padding: 9px 10px; font-size: .92rem; }
  /* Wide tables scroll inside their plate instead of breaking layout */
  .wp-block-table, .mtgbrew-decks-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 560px) {
  .mtgb-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mtgb-tile { min-height: 118px; padding: 18px 14px; }
  .mtgb-tile .mtgb-tile-name { font-size: 1.15rem; }
  .mtgb-pack-grid, .mtgb-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mtgb-hero { padding: 26px 16px; }
  /* Thin the glow stacks on phones (Claude: 2–3 shadow layers max) */
  .mtgb-panel-purple, .mtgb-tile-purple, .mtgb-tier-pro {
    box-shadow: 0 0 18px rgba(145,61,244,.4), 0 8px 22px rgba(0,0,0,.5);
  }
  .entry-header .entry-title { font-size: 1.9rem; }
  .mtgbrew-builder-wallet { border-radius: var(--mtgb-radius); }
}

/* ---------------------------------------------------------------------------
   20. MOTION SAFETY — serves: all pages
   Subtle magic only: slow edge glints / gentle pulses are OPT-IN via
   .mtgb-pulse on hero CTAs. Everything stops under reduced-motion
   (Claude's rule: no motion on prefers-reduced-motion).
   --------------------------------------------------------------------------- */
@keyframes mtgb-pulse {
  0%, 100% { box-shadow: var(--mtgb-glow-purple), inset 0 1px 0 rgba(255,255,255,.35); }
  50%      { box-shadow: 0 0 26px rgba(145,61,244,.65), 0 0 60px rgba(145,61,244,.25), inset 0 1px 0 rgba(255,255,255,.35); }
}
.mtgb-pulse { animation: mtgb-pulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .mtgb-tile:hover, .button:hover, .mtgbrew-btn:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   21. WORDPRESS ADMIN BAR OFFSET NOTE
   Logged-in admins see the WP admin bar over the fixed stone background —
   harmless (background is decorative). No rule needed; recorded here so
   the apply session doesn't chase it as a bug.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   22. ARCHIVE TITLE BANDS (v1.0.1) — serves: /cards/ + /decks/ post-type
   archives and every Kadence archive listing (category, tag, author,
   date, search results)
   THE BUG (found in the phase-1 apply session): single pages got the
   dark stone title band, but ARCHIVE bands rendered on a LIGHT
   background with faint text. Two causes, both verified against the
   live HTML on Oct 20, 2026:
   1) Kadence 1.5.2 prints archive heroes as
      <section class="entry-hero <type>-archive-hero-section
      entry-hero-layout-inherit"> with the title as
      <h1 class="page-title archive-title"> inside
      <header class="entry-header <type>-archive-title">, plus an
      .archive-description block. The Customizer's archive-title
      background is generated by Kadence onto the hero's inner layers,
      which §8's .entry-hero rule never reached.
   2) The engraved-gold gradient in §3 targets
      ".entry-header .entry-title" and ".page-hero .page-title" — an
      archive H1 is .page-title.archive-title under .entry-hero (not
      .page-hero), so it missed the metal treatment entirely.
   THE FIX: repaint the whole archive hero stack (section + inner
   container + overlay) with the same dark stone band §8 gives single
   pages, and give .page-title.archive-title the §3 gradient.
   EVERY selector is archive-scoped (body.archive / body.post-type-archive
   / the *-archive-hero-section classes) so single pages and single
   posts are untouched. If a Kadence update renames these classes,
   README.md §"v1.0.1" lists exactly what to inspect.
   --------------------------------------------------------------------------- */
/* The band — same stone recipe as §8's single-page hero, forced over
   whatever background the Customizer generated for archives */
body.archive .entry-hero,
body.post-type-archive .entry-hero,
.entry-hero.mtg_card-archive-hero-section,
.entry-hero.mtgbrew_deck-archive-hero-section,
.kadence-archive-hero,
body.archive .page-header {
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(145,61,244,.14), transparent 60%),
    linear-gradient(180deg, #1B1826, var(--mtgb-arcane-black)) !important;
  border-bottom: 1px solid var(--mtgb-line);
}
/* Kadence may park the archive background on the inner layers instead
   of the section — clear both so the section's band shows through */
body.archive .entry-hero .entry-hero-container-inner,
body.post-type-archive .entry-hero .entry-hero-container-inner,
.entry-hero.mtg_card-archive-hero-section .entry-hero-container-inner,
.entry-hero.mtgbrew_deck-archive-hero-section .entry-hero-container-inner,
body.archive .entry-hero .hero-section-overlay,
body.post-type-archive .entry-hero .hero-section-overlay,
.entry-hero.mtg_card-archive-hero-section .hero-section-overlay,
.entry-hero.mtgbrew_deck-archive-hero-section .hero-section-overlay {
  background: transparent !important;
}
/* The archive title — §3's engraved-gold treatment, §8's hero size */
body.archive .entry-hero .page-title.archive-title,
.entry-hero.mtg_card-archive-hero-section .page-title,
.entry-hero.mtgbrew_deck-archive-hero-section .page-title {
  background: linear-gradient(180deg,
      var(--mtgb-gold-bright) 0%, var(--mtgb-engraved-gold) 45%,
      var(--mtgb-gold-deep) 78%, var(--mtgb-engraved-gold) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.65));
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.4rem);
  text-align: center;
}
/* Fallback: if background-clip:text is unsupported, show solid gold */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  body.archive .entry-hero .page-title.archive-title,
  .entry-hero.mtg_card-archive-hero-section .page-title,
  .entry-hero.mtgbrew_deck-archive-hero-section .page-title {
    color: var(--mtgb-engraved-gold); -webkit-text-fill-color: currentColor;
  }
}
/* Archive description / subtitle under the title — readable ink on the
   dark band (Kadence inherits its light-band text color here) */
body.archive .entry-hero .archive-description,
body.archive .entry-hero .archive-description p,
body.archive .entry-hero .entry-subtitle,
.entry-hero.mtg_card-archive-hero-section .archive-description,
.entry-hero.mtg_card-archive-hero-section .archive-description p,
.entry-hero.mtgbrew_deck-archive-hero-section .archive-description,
.entry-hero.mtgbrew_deck-archive-hero-section .archive-description p {
  color: var(--mtgb-ink-soft);
  text-align: center;
}
/* Archive band on small phones — same thinning discipline as §19 */
@media (max-width: 560px) {
  body.archive .entry-hero .page-title.archive-title,
  .entry-hero.mtg_card-archive-hero-section .page-title,
  .entry-hero.mtgbrew_deck-archive-hero-section .page-title {
    font-size: 1.9rem;
  }
}

/* End of MTGBrew Design System CSS v1.0.1 */