/* =====================================================================
   THE CHRONICLE CODEX — Mage: The Ascension aesthetic
   Deep occult violet, gold filigree, parchment Tarot faces.
   ===================================================================== */

:root {
  /* Palette */
  --void:        #0a0710;   /* near-black violet */
  --midnight:    #140b22;   /* deep indigo */
  --umbra:       #1d1230;   /* panel violet */
  --violet:      #2a1947;
  --crimson:     #7c1d2b;   /* blood seal */
  --crimson-lit: #b8313f;
  --gold:        #c9a227;   /* brass / leaf gold */
  --gold-lit:    #e8c95a;
  --gold-dim:    #8a6f1f;
  --parchment:   #efe4c8;   /* card face */
  --parchment-2: #e3d2a8;
  --ink:         #2b2117;   /* text on parchment */
  --ink-soft:    #5a4a32;
  --mist:        #cdbce6;   /* faint text on dark */
  --mist-dim:    #7c6a96;

  --shadow:      0 18px 40px rgba(0,0,0,.6);
  --glow-gold:   0 0 18px rgba(232,201,90,.55);

  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body:    "EB Garamond", "Cormorant Garamond", Garamond, "Times New Roman", serif;

  --card-w: 230px;
  --card-ratio: 5 / 8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  background-color: var(--void);
  background-image:
    radial-gradient(1200px 800px at 50% -10%, rgba(74,38,120,.55), transparent 60%),
    radial-gradient(900px 700px at 12% 8%, rgba(124,29,43,.20), transparent 55%),
    radial-gradient(1000px 900px at 92% 30%, rgba(40,30,90,.35), transparent 60%),
    linear-gradient(180deg, var(--midnight), var(--void) 70%);
  background-attachment: fixed;
}

/* Faint sacred-geometry star field overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(circle, rgba(232,201,90,.10) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(205,188,230,.07) 1px, transparent 1.4px);
  background-size: 46px 46px, 92px 92px;
  background-position: 0 0, 23px 23px;
}

main, header, footer { position: relative; z-index: 1; }

/* ----------------------------------------------------------------- */
/* HEADER                                                            */
/* ----------------------------------------------------------------- */
.codex-header {
  text-align: center;
  padding: 3.4rem 1.25rem 1.6rem;
  border-bottom: 1px solid rgba(201,162,39,.28);
}

.codex-sigil {
  width: 116px;
  height: 116px;
  margin: 0 auto .9rem;
  filter: drop-shadow(0 0 14px rgba(232,201,90,.45));
  animation: slow-spin 90s linear infinite;
}
@keyframes slow-spin { to { transform: rotate(360deg); } }

.codex-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  margin: 0;
  color: var(--gold-lit);
  text-shadow: 0 0 22px rgba(201,162,39,.4), 0 2px 2px #000;
}

.codex-subtitle {
  font-style: italic;
  color: var(--mist);
  letter-spacing: .04em;
  margin: .35rem 0 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.codex-epigraph {
  max-width: 46ch;
  margin: 1rem auto 0;
  color: var(--mist-dim);
  font-style: italic;
  font-size: 1rem;
}

.codex-divider {
  width: min(560px, 80%);
  height: 18px;
  margin: 1.1rem auto 0;
  color: var(--gold);
}

/* ----------------------------------------------------------------- */
/* CONTROLS (search + filters + tally)                               */
/* ----------------------------------------------------------------- */
.controls {
  max-width: 1180px;
  margin: 1.8rem auto .4rem;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.search-wrap { position: relative; }
.search-wrap::before {
  content: "⚲";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  color: var(--gold-dim);
  font-size: 1.1rem;
}
.search-input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--parchment);
  background: rgba(10,7,16,.7);
  border: 1px solid rgba(201,162,39,.4);
  border-radius: 2px;
  padding: .55rem .9rem .55rem 2.2rem;
  width: 300px;
  max-width: 70vw;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.search-input::placeholder { color: var(--mist-dim); font-style: italic; }
.search-input:focus { border-color: var(--gold-lit); box-shadow: var(--glow-gold); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

.filter-chip {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-lit);
  background: transparent;
  border: 1px solid rgba(201,162,39,.5);
  border-radius: 999px;
  padding: .45rem .95rem;
  cursor: pointer;
  transition: all .18s ease;
}
.filter-chip:hover { background: rgba(201,162,39,.14); }
.filter-chip[aria-pressed="true"] {
  background: var(--gold);
  color: var(--void);
  box-shadow: var(--glow-gold);
  border-color: var(--gold-lit);
}

.tally {
  width: 100%;
  text-align: center;
  color: var(--mist-dim);
  font-style: italic;
  letter-spacing: .03em;
  font-size: .95rem;
}
.tally b { color: var(--gold-lit); font-style: normal; }

/* ----------------------------------------------------------------- */
/* GRID + SECTIONS                                                   */
/* ----------------------------------------------------------------- */
.codex-body { max-width: 1180px; margin: 0 auto 4rem; padding: 1rem 1.25rem 0; }

.suit { margin-top: 2.4rem; }

.suit-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1.1rem;
}
.suit-head .suit-glyph { width: 34px; height: 34px; color: var(--gold); flex: none; }
.suit-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin: 0;
}
.suit-blurb { color: var(--mist-dim); font-style: italic; font-size: .95rem; }
.suit-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201,162,39,.5), transparent); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.suit-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--mist-dim);
  font-style: italic;
  padding: 1.5rem;
}

/* ----------------------------------------------------------------- */
/* TAROT CARD                                                        */
/* ----------------------------------------------------------------- */
.tarot {
  width: 100%;
  max-width: var(--card-w);
  aspect-ratio: var(--card-ratio);
  position: relative;
  border-radius: 9px;
  cursor: pointer;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: transform .22s ease, filter .22s ease;
  perspective: 900px;
}
.tarot:hover, .tarot:focus-visible {
  transform: translateY(-9px);
  outline: none;
}
.tarot:focus-visible .tarot-face,
.tarot:focus-visible .tarot-back { box-shadow: var(--shadow), var(--glow-gold); }

.tarot-face, .tarot-back {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .22s ease;
}
.tarot:hover .tarot-face, .tarot:hover .tarot-back {
  box-shadow: var(--shadow), var(--glow-gold);
}

/* ---- Face-up (known / rumored) ---- */
.tarot-face {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(180deg, var(--parchment), var(--parchment-2));
  border: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.tarot-face::before {     /* inner gold frame */
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(138,111,31,.65);
  border-radius: 5px;
  pointer-events: none;
}

.tarot-arcana {
  text-align: center;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--crimson);
  padding: .5rem .4rem .15rem;
}
.tarot-arcana .num { display: block; font-size: 1rem; font-weight: 700; letter-spacing: .14em; }

/* illustration well with the enneagram + glyph */
.tarot-art {
  position: relative;
  margin: .15rem .6rem .35rem;
  flex: 1;
  border: 1px solid rgba(138,111,31,.5);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 42%, rgba(74,38,120,.18), transparent 62%),
    linear-gradient(180deg, #efe9d6, #ddcaa0);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tarot-art .ennea {
  position: absolute;
  width: 86%;
  color: var(--gold-dim);
  opacity: .55;
}
.tarot-art .glyph {
  position: relative;
  font-size: 2.9rem;
  color: var(--crimson);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* portrait fills the illustration well */
.tarot-art.has-portrait { background: #1a1422; }
.tarot-art .portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}

/* a full card image (e.g. a Tarot card) shown whole, framed on dark velvet */
.tarot-art.has-portrait.contain {
  background: radial-gradient(circle at 50% 42%, #2a1b42, #120b1f);
}
.tarot-art .portrait.contain {
  object-fit: contain;
  padding: 7px;
  filter: none;
}
.tarot-art .glyph-badge {
  position: absolute;
  bottom: 6px;
  right: 7px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--gold-lit);
  background: rgba(10,7,16,.72);
  border: 1px solid rgba(201,162,39,.6);
  border-radius: 50%;
  text-shadow: 0 0 6px rgba(0,0,0,.6);
}

/* faction sigil (drawn emblem) as the card art */
.tarot-art.has-sigil {
  background:
    radial-gradient(circle at 50% 45%, #f4eedc, #d8c59c);
}
.tarot-art .faction-sigil {
  position: relative;
  width: 74%;
  height: auto;
  color: var(--crimson);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
}
/* an official emblem image, if supplied, sits over the drawn sigil */
.tarot-art .faction-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  background: radial-gradient(circle at 50% 45%, #f4eedc, #d8c59c);
}

.tarot-plate {
  text-align: center;
  padding: .35rem .55rem .7rem;
}
.tarot-title {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.tarot-title.placeholder { color: var(--ink-soft); font-style: italic; font-weight: 400; }
.tarot-sub {
  font-size: .76rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: .2rem 0 0;
}

/* rumored ribbon */
.tarot[data-status="rumored"] .tarot-face { filter: saturate(.85); }
.ribbon {
  position: absolute;
  top: 12px; right: -34px;
  transform: rotate(45deg);
  background: var(--crimson);
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .2rem 2.4rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  z-index: 3;
}

/* ---- Face-down (unknown) ---- */
.tarot[data-status="unknown"] { cursor: default; }
.tarot[data-status="unknown"]:hover { transform: translateY(-4px); }
.tarot-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(74,38,120,.55), transparent 60%),
    linear-gradient(180deg, var(--violet), var(--midnight));
  border: 2px solid var(--gold-dim);
  display: grid;
  place-items: center;
}
.tarot-back::before {     /* inner frame */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201,162,39,.35);
  border-radius: 5px;
}
.tarot-back .ennea-back {
  width: 70%;
  color: var(--gold-dim);
  opacity: .8;
  filter: drop-shadow(0 0 8px rgba(201,162,39,.3));
}
.tarot-back .back-label {
  position: absolute;
  bottom: 16px;
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

/* ----------------------------------------------------------------- */
/* MODAL                                                             */
/* ----------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 1.25rem;
  background: rgba(5,3,10,.78);
  backdrop-filter: blur(4px);
}
.scrim.open { display: grid; }

.dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background:
    radial-gradient(140% 60% at 50% 0%, rgba(255,255,255,.45), transparent 55%),
    linear-gradient(180deg, var(--parchment), var(--parchment-2));
  color: var(--ink);
  border: 2px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), var(--glow-gold);
  padding: 1.8rem 1.9rem 2rem;
  animation: rise .25s ease;
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
.dialog::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(138,111,31,.55);
  border-radius: 5px;
  pointer-events: none;
}

.dialog-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: transparent;
  color: var(--crimson);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.dialog-close:hover { background: rgba(124,29,43,.12); }

.dialog-portrait {
  width: 180px;
  height: 230px;
  margin: .2rem auto 1.1rem;
  border: 2px solid var(--gold);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.18);
  background: #1a1422;
}
.dialog-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* a full card image (Tarot) in the dialog, shown whole on dark velvet */
.dialog-portrait.contain {
  width: 168px;
  height: 270px;
  background: radial-gradient(circle at 50% 42%, #2a1b42, #120b1f);
}
.dialog-portrait.contain img { object-fit: contain; }

.dialog-sigil {
  width: 168px;
  height: 168px;
  margin: .2rem auto 1.1rem;
  display: grid;
  place-items: center;
  color: var(--crimson);
  border: 2px solid var(--gold);
  border-radius: 5px;
  background: radial-gradient(circle at 50% 45%, #f4eedc, #ddcaa0);
  box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.18);
}
.dialog-sigil { position: relative; }
.dialog-sigil svg { width: 72%; height: auto; }
.dialog-sigil-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  border-radius: 3px;
  background: radial-gradient(circle at 50% 45%, #f4eedc, #ddcaa0);
}

.dialog-arcana {
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: .2em;
  color: var(--crimson);
  font-size: .82rem;
}
.dialog-arcana .num { font-size: 1.6rem; font-weight: 700; display: block; }

.dialog-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .04em;
  margin: .2rem 0 .15rem;
}
.dialog-sub {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.dialog hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  margin: 1rem 0;
}
.dialog-summary { font-style: italic; text-align: center; color: var(--ink-soft); }

.detail { margin: 1rem 0; }
.detail-label {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 .15rem;
}
.detail-text { margin: 0; white-space: pre-wrap; }
.detail-empty { font-style: italic; color: var(--ink-soft); text-align: center; padding: .5rem 0; }

.dialog-tags { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 1.2rem; }
.tag {
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid rgba(138,111,31,.5);
  border-radius: 999px;
  padding: .2rem .7rem;
}

/* ----------------------------------------------------------------- */
/* FOOTER                                                            */
/* ----------------------------------------------------------------- */
.codex-footer {
  text-align: center;
  padding: 2.4rem 1.25rem 3rem;
  color: var(--mist-dim);
  font-style: italic;
  border-top: 1px solid rgba(201,162,39,.22);
}
.codex-footer .glyph-row { color: var(--gold-dim); letter-spacing: .6em; margin-bottom: .6rem; }

/* ----------------------------------------------------------------- */
/* RESPONSIVE                                                        */
/* ----------------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --card-w: 150px; }
  body { font-size: 16px; }
  .tarot-art .glyph { font-size: 2rem; }
  .filters { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .codex-sigil { animation: none; }
  * { scroll-behavior: auto; }
}