/* ============================================================
   THEME GRIMOIRE — alternate identity (illuminated codex)
   Scoped under body.theme-grimoire.

   FONTS (per /typeset + .impeccable.md):
   - Hero / sidebar / coming-soon titles: Cinzel 700  (1.4rem+)
   - Tier letters (S/A/B/C/X) only:        Cardo Bold (4rem)  ← blackletter feel
   - Body / UI everywhere else:            Manrope 400/500/600/700
   - NO italic anywhere.

   PALETTE:
   - Solid deep navy ground + organic floral arcane wallpaper
   - Two-tone wood frame (cordovan) wrapping cream parchment plates
   - Vermilion + sepia + gilt accents
   - Glossy cyan gemstone CTA (AFK Arena Equip motif) for primary
     action only — Log In + active comp tab. Not on every plate.
   - Cost colors preserved on champion hexes.

   STRUCTURE FIXES (rely on Phase 1 changes to JS + shared CSS):
   - .tier-row-divider element styled as wood seam
   - .tier-badge-col is explicit cell with parchment + ornate dropcap
   - Section ribbons rendered with folded tails
   - .detail-strip-section recessed cream sub-card on parchment
   - Augments: natural-shape thumb grid (no hex)
   - Augment Priority: category pill row with chevrons
   - Stage card heading stacked vertically

   SHADOW STRATEGY:
   - Plates: leather frame + soft ambient drop (NOT comic offset)
   - Hero (page title): single offset for focal pop
   - Inputs: subtle inset only
   - Primary CTAs: glossy gemstone with inset highlights
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Cinzel:wght@400;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ============================================================
   THEME TOGGLE WIDGET (visible in BOTH themes)
   ============================================================ */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-toggle {
  display: inline-flex;
  border: 1px solid oklch(55% 0.1 70 / 0.45);
  border-radius: 2px;
  overflow: hidden;
  background: oklch(14% 0.025 50 / 0.6);
  backdrop-filter: blur(4px);
}

.theme-toggle-btn {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(60% 0.04 75);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  transition: color var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart);
}

.theme-toggle-btn:hover { color: var(--color-gold); }

.theme-toggle-btn.active {
  color: oklch(95% 0.08 80);
  background: oklch(75% 0.18 75 / 0.18);
  text-shadow: 0 0 8px oklch(75% 0.18 75 / 0.5);
}

.theme-toggle-btn + .theme-toggle-btn {
  border-left: 1px solid oklch(55% 0.1 70 / 0.35);
}

/* ============================================================
   ROOT TOKEN OVERRIDES — Grimoire palette
   ============================================================ */
body.theme-grimoire {
  /* Two fonts. Display (Cinzel) for titles ≥1.4rem.
     Cardo Bold reserved exclusively for tier letters at 4rem. */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-tier:    'Cardo', 'Cinzel', serif;
  --font-ui:      'Manrope', system-ui, sans-serif;

  /* Parchment palette */
  --grim-parchment:       #ecd9a8;
  --grim-parchment-warm:  #e6c98a;
  --grim-parchment-shade: #d6b876;
  --grim-parchment-dark:  #a98548;
  --grim-paper-recess:    #d8bf85;          /* recessed sub-card fill */

  /* Ink palette */
  --grim-ink:             #2a1a0e;
  --grim-ink-soft:        #4a3520;
  --grim-ink-pale:        #6b513a;

  /* Accent inks */
  --grim-vermilion:       #b32d23;
  --grim-vermilion-deep:  #7a1c14;
  --grim-vermilion-bright: #d04535;

  /* Gilt + leather */
  --grim-gilt:            #b08a3a;
  --grim-gilt-bright:     #d6a94a;
  --grim-gilt-deep:       #7a5e22;
  --grim-wood:            #3d2817;          /* dark cordovan wood frame */
  --grim-wood-warm:       #5e3a1e;          /* highlight edge of wood */
  --grim-wood-deep:       #261509;          /* shadow edge of wood */

  /* Navy ground */
  --grim-navy:            #0d1326;
  --grim-navy-deep:       #060a16;
  --grim-navy-mid:        #1a2240;

  /* Cyan gemstone (CTA) */
  --grim-gem-bright:      oklch(82% 0.12 215);
  --grim-gem:             oklch(62% 0.16 215);
  --grim-gem-deep:        oklch(40% 0.14 215);

  /* Tier inks */
  --tier-s-color:         #b32d23;
  --tier-a-color:         #b85820;
  --tier-b-color:         #a07f1a;
  --tier-c-color:         #2e3f6b;
  --tier-x-color:         #4a4f4e;

  /* Existing token names downstream code references */
  --color-text:           var(--grim-ink);
  --color-text-muted:     var(--grim-ink-soft);
  --color-text-dim:       var(--grim-ink-pale);
  --color-amber:          var(--grim-gilt);
  --color-gold:           var(--grim-gilt-bright);
  --color-bg:             var(--grim-navy-deep);
  --color-surface:        var(--grim-parchment);
}

/* ============================================================
   BODY — solid navy ground + organic floral arcane wallpaper
   ============================================================ */
body.theme-grimoire {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  background-color: var(--grim-navy-deep);
  /* Organic floral swirl — concept's flame-curl motif, repeating tile */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'><g fill='none' stroke='%23b08a3a' stroke-width='0.7' stroke-opacity='0.075' stroke-linecap='round'><path d='M180 60 C220 90, 240 130, 220 170 C200 200, 160 200, 140 170 C120 130, 140 90, 180 60 Z'/><path d='M180 300 C140 270, 120 230, 140 190 C160 160, 200 160, 220 190 C240 230, 220 270, 180 300 Z'/><path d='M60 180 C90 140, 130 120, 170 140 C200 160, 200 200, 170 220 C130 240, 90 220, 60 180 Z'/><path d='M300 180 C270 220, 230 240, 190 220 C160 200, 160 160, 190 140 C230 120, 270 140, 300 180 Z'/><circle cx='180' cy='180' r='60' stroke-opacity='0.05'/><circle cx='180' cy='180' r='30' stroke-opacity='0.05'/></g><g fill='%23b08a3a' fill-opacity='0.18'><circle cx='180' cy='180' r='2.5'/></g></svg>");
  background-attachment: fixed;
  background-size: 360px 360px;
  background-position: center top;
  color: var(--grim-parchment);
}

body.theme-grimoire::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.7  0 0 0 0 0.55  0 0 0 0 0.3  0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
}

body.theme-grimoire::after {
  background: radial-gradient(
    ellipse 130% 100% at 50% 38%,
    transparent 35%,
    rgba(6, 10, 22, 0.55) 78%,
    rgba(3, 5, 12, 0.9) 100%
  );
}

/* ============================================================
   GLOBAL CELESTIAL OVERRIDES
   ============================================================ */
body.theme-grimoire .star-scatter,
body.theme-grimoire .brand-sigil,
body.theme-grimoire .tier-badge-sigil,
body.theme-grimoire .comp-detail-stars,
body.theme-grimoire .sigil-divider svg,
body.theme-grimoire .title-flourish-row > span svg,
body.theme-grimoire .sidebar-carry-halo {
  display: none !important;
}

body.theme-grimoire .sidebar-showcase {
  width: 150px;
  height: auto;
}

/* ============================================================
   TOP NAV
   ============================================================ */
body.theme-grimoire .top-nav {
  background: var(--grim-navy-deep);
  border-bottom: 2px solid var(--grim-gilt);
  position: relative;
}
body.theme-grimoire .top-nav::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 0; right: 0;
  height: 1px;
  background: var(--grim-gilt-deep);
}

body.theme-grimoire .nav-link {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--grim-parchment-shade);
  letter-spacing: 0.24em;
}
body.theme-grimoire .nav-link:hover { color: var(--grim-parchment); }
body.theme-grimoire .nav-link.active {
  color: var(--grim-parchment);
  text-shadow: none;
}
body.theme-grimoire .nav-link.active::after {
  background: var(--grim-vermilion);
  box-shadow: none;
  height: 2px;
  bottom: -2px;
}

/* ----- GLOSSY CYAN GEMSTONE CTA — primary action treatment (AFK Arena) ----- */
body.theme-grimoire .nav-cta {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: white;
  border: 1px solid oklch(40% 0.14 215);
  border-radius: 9999px;
  background: linear-gradient(180deg,
    var(--grim-gem-bright) 0%,
    var(--grim-gem) 50%,
    var(--grim-gem-deep) 100%);
  padding: 8px 22px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 1px 0 oklch(95% 0.05 220 / 0.7),
    inset 0 -2px 4px oklch(30% 0.1 215 / 0.45),
    0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
body.theme-grimoire .nav-cta::before,
body.theme-grimoire .nav-cta::after { display: none; }
body.theme-grimoire .nav-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.05 220 / 0.85),
    inset 0 -2px 4px oklch(30% 0.1 215 / 0.5),
    0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Theme-toggle in grimoire — small cyan-tinted chip */
body.theme-grimoire .theme-toggle {
  border: 1px solid var(--grim-gilt);
  border-radius: 9999px;
  background: var(--grim-navy);
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 oklch(85% 0.08 80 / 0.18);
}
body.theme-grimoire .theme-toggle-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  color: var(--grim-parchment-shade);
}
body.theme-grimoire .theme-toggle-btn.active {
  background: linear-gradient(180deg, var(--grim-gem) 0%, var(--grim-gem-deep) 100%);
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 1px 0 oklch(95% 0.05 220 / 0.55),
    inset 0 -1px 0 oklch(30% 0.1 215 / 0.4);
}
body.theme-grimoire .theme-toggle-btn + .theme-toggle-btn {
  border-left: 1px solid var(--grim-gilt-deep);
}

/* ============================================================
   PAGE HEADER — title plate (wood frame around navy interior)
   ============================================================ */
body.theme-grimoire .page-header {
  padding-top: var(--space-12);
  padding-bottom: var(--space-4);
}
body.theme-grimoire .page-header::before { display: none; }

body.theme-grimoire .title-block {
  position: relative;
  padding: var(--space-6) var(--space-12);
  margin: 0 auto var(--space-4);
  width: max-content;
  max-width: 95%;
  background: var(--grim-navy);
  border: 6px solid var(--grim-wood);
  box-shadow:
    inset 0 0 0 1px var(--grim-gilt),
    inset 0 0 0 4px var(--grim-navy),
    inset 0 0 0 5px var(--grim-gilt-deep),
    0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Carved scrollwork corner ornaments — title block (4 corners) */
body.theme-grimoire .title-block::before,
body.theme-grimoire .title-block::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23d6a94a' stroke-width='1.4'><path d='M2 26 C2 18, 4 14, 10 14 M2 26 L2 22 M14 14 C14 8, 18 4, 26 4 M10 14 C10 12, 12 12, 14 14'/><circle cx='6' cy='20' r='1.2' fill='%23d6a94a'/></svg>");
}
body.theme-grimoire .title-block::before { top: 8px; left: 8px; }
body.theme-grimoire .title-block::after  { bottom: 8px; right: 8px; transform: rotate(180deg); }

body.theme-grimoire .page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.18em;
  color: var(--grim-parchment);
  text-shadow:
    1px 1px 0 var(--grim-vermilion-deep),
    2px 2px 0 var(--grim-gilt-deep);
  margin: 0;
  white-space: nowrap;
  line-height: 1.1;
}

/* Patch pill — printed parchment chip, no popup shadow */
body.theme-grimoire .patch-pill {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  background: var(--grim-parchment);
  color: var(--grim-ink);
  border: 1px solid var(--grim-ink);
  border-radius: 0;
  letter-spacing: 0.12em;
  padding: 6px 18px;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 240, 200, 0.5),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.15);
  backdrop-filter: none;
}
body.theme-grimoire .patch-pill::before,
body.theme-grimoire .patch-pill::after { display: none; }
body.theme-grimoire .patch-pill-mark {
  color: var(--grim-vermilion);
  text-shadow: none;
  font-weight: 900;
}

/* ============================================================
   TAB BAR — bookmark tabs sticking up from the panel edge
   ============================================================ */
body.theme-grimoire .tab-bar-row {
  border: none;
  background: transparent;
  padding: 0;
  margin-bottom: var(--space-8);
}
body.theme-grimoire .tab-bar-row::before,
body.theme-grimoire .tab-bar-row::after { display: none; }

body.theme-grimoire .tab-list {
  gap: 4px;
  border-bottom: 3px solid var(--grim-gilt);
  padding-bottom: 0;
}

body.theme-grimoire .tab-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--grim-parchment-shade);
  background: var(--grim-navy);
  border: 1px solid var(--grim-gilt-deep);
  border-bottom: none;
  border-radius: 0;
  padding: 11px 22px 9px;
  margin-right: 2px;
  position: relative;
  bottom: -1px;
  transition: bottom var(--dur-fast) ease, background var(--dur-fast) ease;
}
body.theme-grimoire .tab-btn::after { display: none; }
body.theme-grimoire .tab-btn:hover {
  color: var(--grim-parchment);
  background: var(--grim-navy-mid);
  bottom: 0;
}
body.theme-grimoire .tab-btn.active {
  color: var(--grim-ink);
  background: var(--grim-parchment);
  border-color: var(--grim-gilt);
  text-shadow: none;
  bottom: 2px;
}
/* No active-tab top stripe — distinct fill + position offset are enough */
body.theme-grimoire .tab-btn.active::before { display: none; }

/* Search — parchment input, sepia ink, no popup shadow */
body.theme-grimoire .search-input {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  background: var(--grim-parchment);
  border: 1px solid var(--grim-ink);
  border-radius: 0;
  color: var(--grim-ink);
  padding: 8px 14px;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.18);
}
body.theme-grimoire .search-input::placeholder {
  color: var(--grim-ink-pale);
}
body.theme-grimoire .search-input:focus {
  outline: none;
  border-color: var(--grim-vermilion);
  box-shadow:
    inset 0 1px 2px 0 rgba(0, 0, 0, 0.18),
    0 0 0 2px rgba(179, 45, 35, 0.25);
}

/* ============================================================
   TIER ROW — wood-frame plate wrapping parchment, with explicit
   .tier-row-divider seam between badge cell and comps cell
   ============================================================ */
body.theme-grimoire .tier-section {
  margin-bottom: var(--space-6);
  position: relative;
  padding: 0;
  background: transparent;
}
body.theme-grimoire .tier-section::before,
body.theme-grimoire .tier-section::after { display: none; }

body.theme-grimoire .tier-row {
  position: relative;
  /* Container fill — parchment grain + warm tint */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.15  0 0 0 0.3 0'/></filter><rect width='200' height='200' filter='url(%23p)' opacity='0.35'/></svg>"),
    linear-gradient(180deg,
      var(--grim-parchment-warm) 0%,
      var(--grim-parchment) 100%);
  /* Two-tone wood frame */
  border: 8px solid var(--grim-wood);
  box-shadow:
    inset 0 0 0 1px var(--grim-gilt),
    inset 0 1px 0 1px var(--grim-wood-warm),
    0 6px 18px rgba(0, 0, 0, 0.45);
  overflow: visible;
}

/* Top tier-color stripe removed — badge cell carries tier identity. */
body.theme-grimoire .tier-section.conditional .tier-row {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 22px,
      rgba(74, 79, 78, 0.07) 22px 24px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.15  0 0 0 0.3 0'/></filter><rect width='200' height='200' filter='url(%23p)' opacity='0.35'/></svg>"),
    linear-gradient(180deg,
      var(--grim-parchment-warm) 0%,
      var(--grim-parchment) 100%);
}

/* TIER-ROW DIVIDER — wood seam between badge and comps */
body.theme-grimoire .tier-row-divider {
  flex: 0 0 6px;
  background: linear-gradient(90deg,
    var(--grim-wood-deep) 0%,
    var(--grim-wood) 50%,
    var(--grim-wood-deep) 100%);
  box-shadow:
    inset 1px 0 0 var(--grim-gilt-deep),
    inset -1px 0 0 var(--grim-gilt-deep),
    0 0 0 1px var(--grim-wood-deep);
  align-self: stretch;
  position: relative;
}

/* ============================================================
   TIER BADGE — parchment cell with ornate Cardo Bold dropcap
   ============================================================ */
body.theme-grimoire .tier-badge-col {
  width: 168px;
  min-width: 168px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(176, 138, 58, 0.2) 0%,
      transparent 70%),
    linear-gradient(180deg,
      var(--grim-parchment-warm) 0%,
      var(--grim-parchment-shade) 100%);
  border-right: none;  /* divider element handles the seam */
  position: relative;
  padding: var(--space-4) var(--space-2);
}

/* Sunburst rosette behind dropcap */
body.theme-grimoire .tier-badge-col::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 132px; height: 132px;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  /* Watermark fade — ornament sits BEHIND the dropcap, doesn't compete */
  opacity: 0.42;
  /* Default fallback — gilt sunburst (used if no tier match) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%237a5e22' stroke-width='0.9' stroke-opacity='0.55'><circle cx='50' cy='50' r='44'/><circle cx='50' cy='50' r='34'/><path d='M50 6 L50 94 M6 50 L94 50 M18 18 L82 82 M82 18 L18 82'/></svg>");
}

/* Per-tier illuminated ornament — same parchment, distinct chapter motif */

/* Per-tier illuminated ornament — bold central motifs, faded via the
   wrapper's opacity:0.42 so the dropcap letter remains the focal hero. */

/* S — flame plume (vermilion ink) */
body.theme-grimoire .tier-section.tier-s .tier-badge-col::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23b32d23' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round' stroke-linejoin='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='36' stroke-width='1' stroke-opacity='0.6'/><path d='M50 86 C36 78 32 64 42 52 C50 42 44 28 56 18 C58 30 66 36 64 50 C62 60 70 64 64 76 C58 84 56 84 50 86 Z' fill='%23b32d23' fill-opacity='0.3'/><path d='M50 86 C50 76 44 70 50 60'/><path d='M50 86 C56 78 60 70 56 60'/></svg>");
}

/* A — oak leaf with veining (burnt orange ink) */
body.theme-grimoire .tier-section.tier-a .tier-badge-col::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23b85820' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round' stroke-linejoin='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='36' stroke-width='1' stroke-opacity='0.6'/><path d='M50 18 Q32 30 32 50 Q32 70 50 80 Q68 70 68 50 Q68 30 50 18 Z' fill='%23b85820' fill-opacity='0.28'/><path d='M50 22 L50 78' stroke-width='1.2'/><path d='M40 32 L50 38 M60 32 L50 38 M38 44 L50 50 M62 44 L50 50 M38 56 L50 62 M62 56 L50 62 M40 68 L50 74 M60 68 L50 74' stroke-width='1.1'/><ellipse cx='50' cy='86' rx='3.5' ry='4.5' fill='%23b85820' fill-opacity='0.55'/></svg>");
}

/* B — sun with aureola (ochre ink) */
body.theme-grimoire .tier-section.tier-b .tier-badge-col::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23a07f1a' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='20' fill='%23a07f1a' fill-opacity='0.3'/><path d='M50 4 L50 22 M50 78 L50 96 M4 50 L22 50 M78 50 L96 50 M16 16 L28 28 M84 16 L72 28 M16 84 L28 72 M84 84 L72 72' stroke-width='1.6'/><path d='M30 8 L34 18 M70 8 L66 18 M30 92 L34 82 M70 92 L66 82 M8 30 L18 34 M92 30 L82 34 M8 70 L18 66 M92 70 L82 66' stroke-width='1.1' stroke-opacity='0.7'/></svg>");
}

/* C — moon phases (midnight ink) */
body.theme-grimoire .tier-section.tier-c .tier-badge-col::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%232e3f6b' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='36' stroke-width='1' stroke-opacity='0.6'/><circle cx='24' cy='50' r='8' fill='%232e3f6b' fill-opacity='0.55'/><path d='M50 42 A8 8 0 0 1 50 58 Z' fill='%232e3f6b' fill-opacity='0.55' stroke-width='1.4'/><circle cx='76' cy='50' r='8' stroke-width='1.4'/><path d='M76 42 A8 8 0 0 0 76 58 A6 6 0 0 1 76 42 Z' fill='%232e3f6b' fill-opacity='0.55' stroke='none'/></svg>");
}

/* X — mystic eye (graphite ink) */
body.theme-grimoire .tier-section.tier-x .tier-badge-col::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%234a4f4e' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='36' stroke-width='1' stroke-opacity='0.6'/><path d='M18 50 Q50 24 82 50 Q50 76 18 50 Z' fill='%234a4f4e' fill-opacity='0.22'/><circle cx='50' cy='50' r='10' fill='%234a4f4e' fill-opacity='0.4'/><circle cx='50' cy='50' r='3' fill='%234a4f4e' fill-opacity='0.95' stroke='none'/><path d='M50 14 L50 24 M50 76 L50 86 M14 50 L24 50 M76 50 L86 50' stroke-width='1.4'/></svg>");
}

/* Tier letter — Cardo Bold blackletter, the focal type moment.
   Cardo Bold gives illuminated-manuscript feel while staying readable. */
body.theme-grimoire .tier-letter {
  font-family: var(--font-tier);
  font-weight: 700;
  font-size: 5.75rem;
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--tier-color, var(--grim-vermilion));
  text-shadow:
    1px 1px 0 var(--grim-ink),
    2px 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 2;
  position: relative;
}

body.theme-grimoire .tier-section.tier-s .tier-letter { color: var(--grim-vermilion); }
body.theme-grimoire .tier-section.tier-a .tier-letter { color: #b85820; }
body.theme-grimoire .tier-section.tier-b .tier-letter { color: #a07f1a; }
body.theme-grimoire .tier-section.tier-c .tier-letter { color: #2e3f6b; }
body.theme-grimoire .tier-section.tier-x .tier-letter { color: #4a4f4e; }

@media (max-width: 720px) {
  body.theme-grimoire .tier-badge-col { width: 84px; min-width: 84px; }
  body.theme-grimoire .tier-badge-col::after { width: 72px; height: 72px; }
  body.theme-grimoire .tier-letter { font-size: 3.6rem; }
  body.theme-grimoire .tier-row-divider { flex: 0 0 4px; }
}

/* ============================================================
   COMP ENTRY — cost color preserved, sepia inked frame
   ============================================================ */
body.theme-grimoire .comp-entry { padding: 4px 6px 6px; }

body.theme-grimoire .comp-champ-icon {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.55));
}
body.theme-grimoire .comp-champ-icon::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--grim-ink);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
}
body.theme-grimoire .comp-champ-icon img {
  top: 5px; left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  z-index: 1;
}
body.theme-grimoire .comp-champ-icon[data-cost="5"] {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 4px oklch(85% 0.14 85 / 0.55));
}

body.theme-grimoire .comp-carry-label {
  font-family: var(--font-ui);
  font-weight: 700;
  background: transparent;
  color: var(--grim-vermilion-deep);
  border: none;
  padding: 0;
  letter-spacing: 0.2em;
  font-size: 0.6rem;
  text-shadow: none;
  text-transform: uppercase;
}

body.theme-grimoire .comp-name {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--grim-ink);
  text-shadow: none;
  letter-spacing: 0.01em;
  font-size: 0.875rem;
}
body.theme-grimoire .comp-entry:hover .comp-name { color: var(--grim-vermilion); }
body.theme-grimoire .comp-entry.active .comp-name {
  color: var(--grim-vermilion-deep);
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-color: var(--grim-vermilion);
  text-underline-offset: 3px;
}
body.theme-grimoire .comp-entry:hover .comp-champ-icon {
  filter: drop-shadow(3px 3px 0 var(--grim-vermilion-deep));
}
body.theme-grimoire .comp-entry.active .comp-champ-icon {
  filter: drop-shadow(3px 3px 0 var(--grim-vermilion));
}
body.theme-grimoire .comp-entry:focus-visible {
  outline: 2px solid var(--grim-vermilion);
  outline-offset: 3px;
}

/* ============================================================
   SECTION RIBBON — banner with folded tails (Nonstop Knight motif).
   ALL sections share this treatment — no prominent variant.
   ============================================================ */
body.theme-grimoire .section-ribbon {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

body.theme-grimoire .section-ribbon-tail {
  display: block;
  width: 12px;
  height: 28px;
  background: var(--grim-vermilion-deep);
}
body.theme-grimoire .section-ribbon-tail-l {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%);
}
body.theme-grimoire .section-ribbon-tail-r {
  clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%);
}

body.theme-grimoire .section-ribbon-body {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grim-parchment);
  background: var(--grim-vermilion);
  border-top: 1px solid var(--grim-vermilion-bright);
  border-bottom: 1px solid var(--grim-vermilion-deep);
  padding: 7px 18px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  position: relative;
}
body.theme-grimoire .section-ribbon-body::before { display: none; }

/* ============================================================
   COMP DETAIL PANEL — wood-frame parchment plate
   ============================================================ */
body.theme-grimoire .comp-detail-panel {
  margin-left: 0;
  margin-top: var(--space-2);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.3  0 0 0 0 0.14  0 0 0 0.35 0'/></filter><rect width='200' height='200' filter='url(%23p)' opacity='0.4'/></svg>"),
    linear-gradient(180deg,
      var(--grim-parchment-warm) 0%,
      var(--grim-parchment) 100%);
  border: 10px solid var(--grim-wood);
  box-shadow:
    inset 0 0 0 1px var(--grim-gilt),
    inset 0 1px 0 1px var(--grim-wood-warm),
    0 10px 28px rgba(0, 0, 0, 0.55);
  color: var(--grim-ink);
}

body.theme-grimoire .comp-detail-panel::before {
  height: 4px;
  top: 0;
  left: 0; right: 0;
  background: var(--tier-color, var(--grim-vermilion));
  border-bottom: 1px solid var(--grim-ink);
  box-shadow: none;
}

/* Carved scrollwork corner ornaments — comp detail panel (4 corners) */
body.theme-grimoire .comp-detail-panel > .comp-detail-atmosphere::before,
body.theme-grimoire .comp-detail-panel > .comp-detail-atmosphere::after {
  content: '';
  position: absolute;
  width: 42px; height: 42px;
  pointer-events: none;
  z-index: 2;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42' fill='none' stroke='%232a1a0e' stroke-width='1.4'><path d='M3 39 C3 28, 6 22, 14 22 M3 39 L3 32 M22 22 C22 14, 26 8, 39 8 M14 22 C14 19, 17 19, 22 22'/><circle cx='8' cy='32' r='1.6' fill='%232a1a0e'/><path d='M22 39 L22 34 L28 34' stroke='%23b32d23' stroke-width='1'/></svg>");
}
body.theme-grimoire .comp-detail-panel > .comp-detail-atmosphere::before { top: 12px; left: 12px; }
body.theme-grimoire .comp-detail-panel > .comp-detail-atmosphere::after  { bottom: 12px; right: 12px; transform: rotate(180deg); }

/* ============================================================
   SIDEBAR — engraved navy frontispiece with heraldic crest behind carry
   ============================================================ */
body.theme-grimoire .comp-detail-sidebar {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%,
      oklch(from var(--tier-color, var(--grim-vermilion)) 30% 0.18 h / 0.4) 0%,
      transparent 65%),
    linear-gradient(180deg, var(--grim-navy) 0%, var(--grim-navy-deep) 100%);
  border: 6px solid var(--grim-wood);
  box-shadow:
    inset 0 0 0 1px var(--grim-gilt),
    inset 0 0 0 2px oklch(from var(--tier-color, var(--grim-vermilion)) l c h / 0.5),
    0 6px 18px rgba(0, 0, 0, 0.55);
  color: var(--grim-parchment);
  /* Wood border (6px) + inset rings (3px) eat ~9px on each edge —
     compensate with generous padding so content doesn't kiss the frame */
  padding: var(--space-8) var(--space-6) var(--space-6);
  gap: var(--space-4);
  position: relative;
}
body.theme-grimoire .comp-detail-sidebar::before,
body.theme-grimoire .comp-detail-sidebar::after { display: none; }

/* Carry showcase backdrop — soft tier-color halo + the per-tier
   illuminated ornament (same motif as tier badge: flame / oak / sun /
   moon / eye). Tier-class on the parent .tier-section drives selection. */
body.theme-grimoire .sidebar-showcase::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Tier-color soft halo behind ornament (uses ::after on showcase) */
body.theme-grimoire .sidebar-showcase::after {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 50%,
    oklch(from var(--tier-color, var(--grim-vermilion)) l c h / 0.35) 0%,
    transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Per-tier ornament — same SVG family as tier badge */
body.theme-grimoire .tier-section.tier-s .sidebar-showcase::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23b32d23' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round' stroke-linejoin='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='36' stroke-width='1' stroke-opacity='0.6'/><path d='M50 86 C36 78 32 64 42 52 C50 42 44 28 56 18 C58 30 66 36 64 50 C62 60 70 64 64 76 C58 84 56 84 50 86 Z' fill='%23b32d23' fill-opacity='0.3'/><path d='M50 86 C50 76 44 70 50 60'/><path d='M50 86 C56 78 60 70 56 60'/></svg>");
}
body.theme-grimoire .tier-section.tier-a .sidebar-showcase::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23b85820' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round' stroke-linejoin='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='36' stroke-width='1' stroke-opacity='0.6'/><path d='M50 18 Q32 30 32 50 Q32 70 50 80 Q68 70 68 50 Q68 30 50 18 Z' fill='%23b85820' fill-opacity='0.28'/><path d='M50 22 L50 78' stroke-width='1.2'/><path d='M40 32 L50 38 M60 32 L50 38 M38 44 L50 50 M62 44 L50 50 M38 56 L50 62 M62 56 L50 62 M40 68 L50 74 M60 68 L50 74' stroke-width='1.1'/><ellipse cx='50' cy='86' rx='3.5' ry='4.5' fill='%23b85820' fill-opacity='0.55'/></svg>");
}
body.theme-grimoire .tier-section.tier-b .sidebar-showcase::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23a07f1a' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='20' fill='%23a07f1a' fill-opacity='0.3'/><path d='M50 4 L50 22 M50 78 L50 96 M4 50 L22 50 M78 50 L96 50 M16 16 L28 28 M84 16 L72 28 M16 84 L28 72 M84 84 L72 72' stroke-width='1.6'/><path d='M30 8 L34 18 M70 8 L66 18 M30 92 L34 82 M70 92 L66 82 M8 30 L18 34 M92 30 L82 34 M8 70 L18 66 M92 70 L82 66' stroke-width='1.1' stroke-opacity='0.7'/></svg>");
}
body.theme-grimoire .tier-section.tier-c .sidebar-showcase::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%232e3f6b' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='36' stroke-width='1' stroke-opacity='0.6'/><circle cx='24' cy='50' r='8' fill='%232e3f6b' fill-opacity='0.55'/><path d='M50 42 A8 8 0 0 1 50 58 Z' fill='%232e3f6b' fill-opacity='0.55' stroke-width='1.4'/><circle cx='76' cy='50' r='8' stroke-width='1.4'/><path d='M76 42 A8 8 0 0 0 76 58 A6 6 0 0 1 76 42 Z' fill='%232e3f6b' fill-opacity='0.55' stroke='none'/></svg>");
}
body.theme-grimoire .tier-section.tier-x .sidebar-showcase::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%234a4f4e' stroke-width='1.6' stroke-opacity='0.95' stroke-linecap='round'><circle cx='50' cy='50' r='44' stroke-width='1.2'/><circle cx='50' cy='50' r='36' stroke-width='1' stroke-opacity='0.6'/><path d='M18 50 Q50 24 82 50 Q50 76 18 50 Z' fill='%234a4f4e' fill-opacity='0.22'/><circle cx='50' cy='50' r='10' fill='%234a4f4e' fill-opacity='0.4'/><circle cx='50' cy='50' r='3' fill='%234a4f4e' fill-opacity='0.95' stroke='none'/><path d='M50 14 L50 24 M50 76 L50 86 M14 50 L24 50 M76 50 L86 50' stroke-width='1.4'/></svg>");
}
body.theme-grimoire .sidebar-showcase {
  position: relative;
  width: 170px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.theme-grimoire .sidebar-showcase > .detail-unit {
  position: relative;
  z-index: 1;
}

body.theme-grimoire .sidebar-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--grim-parchment);
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 var(--grim-vermilion-deep);
  font-size: 1.4rem;
  line-height: 1.15;
}
body.theme-grimoire .sidebar-carry-label {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--grim-parchment-shade);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
}
body.theme-grimoire .sidebar-condition {
  background: var(--grim-vermilion);
  color: var(--grim-parchment);
  border: 1px solid var(--grim-parchment);
  border-radius: 0;
}

/* Augments and Augment Priority sections — peer level, identical
   wrapper styling; only the content differs. The vermilion banner
   ribbon header IS the visual divider — no border needed. */
body.theme-grimoire .sidebar-augment-priority .augment-priority-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Augment thumb on grimoire sidebar (over navy) */
body.theme-grimoire .augment-thumb {
  background: var(--grim-navy-mid);
  border: 1px solid var(--grim-gilt-deep);
  border-radius: 6px;
}
body.theme-grimoire .augment-thumb:hover {
  border-color: var(--grim-gilt-bright);
}

/* Augment priority pill on grimoire — gilt-rimmed, parchment text */
body.theme-grimoire .augment-priority-pill {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  border-radius: 999px;
  color: var(--grim-parchment);
  border-width: 1px;
  border-style: solid;
}
body.theme-grimoire .augment-priority-arrow {
  color: var(--grim-gilt);
}

/* Active comp tab pill — glossy cyan gemstone */
body.theme-grimoire .comp-detail-tab-pill {
  background: linear-gradient(180deg,
    var(--grim-gem-bright) 0%,
    var(--grim-gem) 50%,
    var(--grim-gem-deep) 100%);
  border: 1px solid oklch(40% 0.14 215);
  border-radius: 9999px;
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 1px 0 oklch(95% 0.05 220 / 0.7),
    inset 0 -2px 4px oklch(30% 0.1 215 / 0.45),
    0 4px 12px rgba(0, 0, 0, 0.4);
  padding: 6px 16px;
}
body.theme-grimoire .comp-detail-tab-name {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
body.theme-grimoire .comp-detail-tab-dot {
  background: white;
  box-shadow: 0 0 6px white;
}

/* ============================================================
   DETAIL STRIP CARD — recessed cream sub-card on parchment
   ============================================================ */
body.theme-grimoire .detail-strip-section {
  background: var(--grim-paper-recess);
  border: 1px solid var(--grim-parchment-dark);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  padding: var(--space-3) var(--space-3) var(--space-4);
}

/* Full Roster Row — same card style as strip sections */
body.theme-grimoire .full-roster-row {
  background: var(--grim-paper-recess);
  border: 1px solid var(--grim-parchment-dark);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  padding: var(--space-4);
  gap: var(--space-3);
}

body.theme-grimoire .roster-unit-items .item-hex {
  width: 24px;
  height: 24px;
}

/* ============================================================
   CHAMPION HEXES IN DETAIL — unified sizes, cost color preserved
   ============================================================ */
body.theme-grimoire .detail-unit-sm,
body.theme-grimoire .detail-unit-md {
  width: 56px;
}
body.theme-grimoire .detail-unit-sm .champ-hex,
body.theme-grimoire .detail-unit-md .champ-hex {
  width: 50px;
  height: 56px;
}
body.theme-grimoire .detail-unit-lg { width: 64px; }
body.theme-grimoire .detail-unit-lg .champ-hex { width: 58px; height: 66px; }

body.theme-grimoire .champ-hex {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.55));
}
body.theme-grimoire .champ-hex::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--grim-ink);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
}
body.theme-grimoire .champ-hex img {
  top: 5px; left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  z-index: 1;
}
body.theme-grimoire .champ-hex[data-cost="5"] {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 6px oklch(85% 0.14 85 / 0.6));
}
body.theme-grimoire .detail-unit-carry .champ-hex {
  filter: drop-shadow(3px 3px 0 var(--grim-vermilion-deep));
}

body.theme-grimoire .detail-unit-name {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--grim-ink-soft);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

/* Item hex */
body.theme-grimoire .item-priority-items .item-hex { width: 22px; height: 22px; }
body.theme-grimoire .item-hex {
  background: var(--grim-ink);
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4));
}
body.theme-grimoire .item-hex::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--grim-gilt-bright);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
}
body.theme-grimoire .item-hex img {
  position: absolute;
  top: 2px; left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  z-index: 1;
}

/* Item square — rounded, NOT hex (for standalone item displays like Item Priority row) */
body.theme-grimoire .item-square {
  background: var(--grim-ink);
  border: 2px solid var(--grim-gilt-deep);
  border-radius: 6px;
  width: 40px;
  height: 40px;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4));
}
body.theme-grimoire .item-square img {
  border-radius: 4px;
}

/* ============================================================
   STAGE CARD — number / title / notes each on own row
   ============================================================ */
body.theme-grimoire .stage-card {
  background: var(--grim-paper-recess);
  border: 1px solid var(--grim-parchment-dark);
  border-top: 3px solid var(--grim-gilt-deep);
  border-radius: 4px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.theme-grimoire .stage-card::before {
  width: 36px; height: 3px;
  background: var(--grim-vermilion);
  box-shadow: none;
  top: -3px;
}
body.theme-grimoire .stage-card-num {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--grim-vermilion);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
body.theme-grimoire .stage-card-title {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--grim-ink);
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  line-height: 1.25;
  margin-bottom: 4px;
}
body.theme-grimoire .stage-card-notes {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--grim-ink-soft);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
}

/* Tips — printed ink list on parchment */
body.theme-grimoire .tips-list li {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--grim-ink);
  padding-left: 28px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
body.theme-grimoire .tips-list li::before {
  content: '◆';
  color: var(--grim-vermilion);
  font-size: 0.85em;
  text-shadow: none;
  top: 2px;
}

/* Comp detail close — cyan gemstone */
body.theme-grimoire .comp-detail-close {
  border-radius: 9999px;
  border: 1px solid oklch(40% 0.14 215);
  background: linear-gradient(180deg,
    var(--grim-gem-bright) 0%,
    var(--grim-gem) 50%,
    var(--grim-gem-deep) 100%);
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 1px 0 oklch(95% 0.05 220 / 0.7),
    inset 0 -2px 4px oklch(30% 0.1 215 / 0.45),
    0 3px 8px rgba(0, 0, 0, 0.4);
  font-weight: 700;
}
body.theme-grimoire .comp-detail-close:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.05 220 / 0.85),
    inset 0 -2px 4px oklch(30% 0.1 215 / 0.5),
    0 5px 12px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   SIGIL DIVIDER — CSS double-rule + gilt diamond (SVG hidden)
   ============================================================ */
body.theme-grimoire .sigil-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) auto;
  max-width: 480px;
  filter: none;
  opacity: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b08a3a'><path d='M8 1 L15 8 L8 15 L1 8 Z'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12px 12px;
}
body.theme-grimoire .sigil-divider::before,
body.theme-grimoire .sigil-divider::after {
  content: '';
  flex: 1;
  height: 6px;
  background:
    linear-gradient(180deg,
      transparent calc(50% - 2px),
      var(--grim-gilt) calc(50% - 2px), var(--grim-gilt) calc(50% - 1px),
      transparent calc(50% - 1px), transparent calc(50% + 1px),
      var(--grim-gilt) calc(50% + 1px), var(--grim-gilt) calc(50% + 2px),
      transparent calc(50% + 2px));
}

/* ============================================================
   COMING SOON / TOAST
   ============================================================ */
body.theme-grimoire .coming-soon-panel {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.15  0 0 0 0.3 0'/></filter><rect width='200' height='200' filter='url(%23p)' opacity='0.35'/></svg>"),
    var(--grim-parchment);
  border: 8px solid var(--grim-wood);
  box-shadow:
    inset 0 0 0 1px var(--grim-gilt),
    0 6px 18px rgba(0, 0, 0, 0.45);
  margin-top: var(--space-4);
  color: var(--grim-ink);
}
body.theme-grimoire .coming-soon-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--grim-vermilion);
  text-shadow: 1px 1px 0 var(--grim-ink);
}
body.theme-grimoire .coming-soon-sub {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--grim-ink-soft);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

body.theme-grimoire .toast {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  background: var(--grim-parchment);
  border: 1px solid var(--grim-ink);
  border-radius: 0;
  color: var(--grim-ink);
  text-shadow: none;
  letter-spacing: 0.16em;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 240, 200, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
body.theme-grimoire ::-webkit-scrollbar-track { background: var(--grim-navy-deep); }
body.theme-grimoire ::-webkit-scrollbar-thumb {
  background: var(--grim-gilt-deep);
  border-radius: 0;
}
body.theme-grimoire ::-webkit-scrollbar-thumb:hover { background: var(--grim-vermilion); }

/* ============================================================
   MOBILE refinements
   ============================================================ */
@media (max-width: 720px) {
  body.theme-grimoire .nav-right { gap: var(--space-2); }
  body.theme-grimoire .theme-toggle-btn { padding: 6px 8px; font-size: 0.6rem; }
  body.theme-grimoire .title-block { padding: var(--space-4) var(--space-5); }
  body.theme-grimoire .page-title { font-size: clamp(1.6rem, 6vw, 2.5rem); letter-spacing: 0.16em; }
  body.theme-grimoire .tier-row { border-width: 5px; }
  body.theme-grimoire .comp-detail-panel { border-width: 6px; }
  body.theme-grimoire .sidebar-showcase,
  body.theme-grimoire .sidebar-showcase::before { width: 130px; height: 160px; }
}