/* ════════════════════════════════════════════════════════════════
   CLAY CYANIDE — ENCOUNTERS (Goetic Campaign Series)
   Canon stat-block design system + large-render encounter layout.
   Loaded AFTER styles.css + catalog.css. Inherits site tokens.
   Stat text is LIVE HTML (spec §0.1). Parchment = CSS, not bitmap.
   ════════════════════════════════════════════════════════════════ */

:root {
  --parch-1: #efe4cb;   /* parchment highlight   */
  --parch-2: #e6d6b4;   /* parchment mid         */
  --parch-3: #d8c39a;   /* parchment shade       */
  --ink:     #2a1d10;   /* body ink on parchment */
  --ink-dim: #5b4a35;   /* secondary ink         */
  --plate-d: #1c1109;   /* header plate dark     */
  --plate-l: #3a2414;   /* header plate light    */
  --sb-gold: #9c7b1e;   /* card frame gold       */
  --sb-gold-hi: #caa53e;
}

/* ── Series top strip (logo + series tag) ───────────────────────── */
.enc-topstrip {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1100px; margin: 0 auto; padding: 1.4rem 1.5rem 0;
}
.enc-topstrip img { height: 30px; width: auto; display: block; opacity: 0.95; }
.enc-series-tag {
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-bright);
}

/* ── Hero: LARGE render is the point (spec / founder mandate) ────── */
.enc-hero { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.5rem 0; }
.enc-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2.5rem; align-items: stretch;
}
.enc-render {
  position: relative; border: 1px solid var(--gold-dim);
  background: radial-gradient(120% 90% at 50% 18%, #15100a 0%, #060403 78%);
  overflow: hidden; min-height: 460px;
  display: flex; align-items: flex-end; justify-content: center;
}
.enc-render img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  display: block; transition: transform 0.8s ease;
}
.enc-render:hover img { transform: scale(1.035); }
/* gold corner ticks echo the print card */
.enc-render::before, .enc-render::after {
  content: ""; position: absolute; width: 34px; height: 34px; z-index: 2;
  border: 2px solid var(--gold-bright); opacity: 0.85; pointer-events: none;
}
.enc-render::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.enc-render::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.enc-render-zoom {
  position: absolute; bottom: 10px; left: 12px; z-index: 3;
  font-family: var(--font-heading); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(232,220,200,0.6);
}

/* identity column */
.enc-identity { display: flex; flex-direction: column; }
.enc-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 0.95;
  color: var(--bone-light); margin: 0; letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
.enc-epithet {
  font-family: 'EB Garamond', serif; font-style: italic;
  font-size: 1.12rem; color: var(--bone); margin: 0.6rem 0 1.3rem;
}
.enc-lineage {
  display: inline-flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem;
}
.enc-chip {
  font-family: var(--font-heading); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-bright);
  border: 1px solid var(--gold-dim); padding: 0.32rem 0.7rem; background: rgba(184,134,11,0.05);
}
.enc-chip-scale { color: var(--bone); border-color: var(--border-bone); }

/* badge lane (PLAYTESTED / GUIDELINE) */
.enc-badge {
  display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start;
  font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 0.4rem 0.85rem;
  margin-bottom: 1.2rem;
}
.enc-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.enc-badge-playtested { color: #0c0a06; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }
.enc-badge-playtested::before { background: #0c0a06; }
.enc-badge-guideline { color: var(--gold-bright); border: 1px solid var(--gold-dim); background: rgba(184,134,11,0.06); }
.enc-badge-guideline::before { background: var(--gold-bright); }

.enc-lede {
  font-family: 'EB Garamond', serif; font-size: 1.12rem; line-height: 1.7;
  color: var(--bone); margin: 0 0 1.5rem;
}
.enc-hero-cta { margin-top: auto; }

/* ════════════════════════════════════════════════════════════════
   STAT BLOCK CARD — canon parchment design, all text selectable
   ════════════════════════════════════════════════════════════════ */
.sb-wrap { max-width: 1100px; margin: 3rem auto 0; padding: 0 1.5rem; }
.sb-card {
  position: relative; color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.04)),
    repeating-linear-gradient(0deg, rgba(120,90,40,0.035) 0 2px, transparent 2px 4px),
    linear-gradient(135deg, var(--parch-1) 0%, var(--parch-2) 45%, var(--parch-3) 100%);
  border: 2px solid var(--sb-gold);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.55), 0 0 0 5px var(--sb-gold-hi),
              0 24px 60px rgba(0,0,0,0.55), inset 0 0 60px rgba(120,80,30,0.18);
  padding: 1.4rem 1.6rem 1.7rem;
}
/* inner hairline frame */
.sb-card::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid rgba(120,80,30,0.4);
  pointer-events: none;
}
/* corner flourishes */
.sb-card::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  background:
    linear-gradient(var(--sb-gold),var(--sb-gold)) left 0 top 0/22px 2px no-repeat,
    linear-gradient(var(--sb-gold),var(--sb-gold)) left 0 top 0/2px 22px no-repeat,
    linear-gradient(var(--sb-gold),var(--sb-gold)) right 0 top 0/22px 2px no-repeat,
    linear-gradient(var(--sb-gold),var(--sb-gold)) right 0 top 0/2px 22px no-repeat,
    linear-gradient(var(--sb-gold),var(--sb-gold)) left 0 bottom 0/22px 2px no-repeat,
    linear-gradient(var(--sb-gold),var(--sb-gold)) left 0 bottom 0/2px 22px no-repeat,
    linear-gradient(var(--sb-gold),var(--sb-gold)) right 0 bottom 0/22px 2px no-repeat,
    linear-gradient(var(--sb-gold),var(--sb-gold)) right 0 bottom 0/2px 22px no-repeat;
}
.sb-card > * { position: relative; z-index: 1; }

/* arched header plate */
.sb-header {
  background: linear-gradient(180deg, var(--plate-l), var(--plate-d));
  border: 1px solid var(--sb-gold); border-radius: 40px 40px 6px 6px;
  box-shadow: inset 0 1px 0 rgba(202,165,62,0.5), inset 0 0 24px rgba(0,0,0,0.6);
  text-align: center; padding: 0.7rem 1rem 0.8rem; margin-bottom: 0.9rem;
}
.sb-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.9rem;
  color: #f3e4c0; margin: 0; line-height: 1.05;
  text-shadow: 0 1px 0 #000, 0 0 16px rgba(202,165,62,0.35);
}
.sb-subtitle {
  font-family: 'EB Garamond', serif; font-style: italic; font-size: 0.92rem;
  color: #d9c79c; margin: 0.15rem 0 0;
}
.sb-cr {
  display: inline-block; margin-top: 0.4rem; font-family: var(--font-heading);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; color: var(--gold-bright);
}

/* defense line: AC / HP / Speed */
.sb-defense {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center;
  border-bottom: 1px solid rgba(120,80,30,0.35); padding: 0.2rem 0 0.7rem; margin-bottom: 0.8rem;
  font-size: 0.95rem;
}
.sb-defense b { font-family: var(--font-heading); letter-spacing: 0.06em; color: #6e3a18; }
.sb-defense .sb-paren { color: var(--ink-dim); font-style: italic; }

/* six ability plates */
.sb-abilities {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin-bottom: 0.9rem;
}
.sb-ability {
  text-align: center; padding: 0.45rem 0.2rem 0.4rem;
  background: linear-gradient(180deg, #f3e9d2, #e3d0a8);
  border: 1.5px solid var(--sb-gold);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.sb-ability .sb-ab-label {
  font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; color: #6e3a18; display: block;
}
.sb-ability .sb-ab-score {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  color: var(--ink); display: block; line-height: 1.15;
}
.sb-ability .sb-ab-mod { font-size: 0.8rem; color: var(--ink-dim); display: block; }

/* trait / meta lines */
.sb-lines { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.9rem; }
.sb-lines .sb-line { padding: 0.12rem 0; }
.sb-lines .sb-k { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #6e3a18; margin-right: 0.4rem; }

.sb-sect {
  font-family: var(--font-heading); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #6e3a18;
  border-bottom: 1px solid var(--sb-gold); padding-bottom: 0.2rem; margin: 1rem 0 0.5rem;
}
.sb-entry { font-size: 0.92rem; line-height: 1.55; margin: 0.35rem 0; }
.sb-entry b, .sb-entry i { color: var(--ink); }
.sb-entry .sb-ability-name { font-style: italic; font-weight: 700; }
.sb-flavor {
  font-family: 'EB Garamond', serif; font-style: italic; font-size: 0.95rem;
  line-height: 1.6; color: var(--ink-dim); border-left: 2px solid var(--sb-gold);
  padding-left: 0.9rem; margin: 1rem 0 0;
}

/* guideline footer note inside / under card */
.enc-guideline-note {
  max-width: 1100px; margin: 0.8rem auto 0; padding: 0 1.5rem;
  font-family: 'EB Garamond', serif; font-style: italic; font-size: 0.86rem;
  color: var(--bone-dark);
}

/* ── Two-up: Adversary + Companion ──────────────────────────────── */
.sb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.sb-companion .sb-card { box-shadow: 0 0 0 4px rgba(0,0,0,0.5), 0 0 0 5px #6f8a6a,
  0 24px 60px rgba(0,0,0,0.5), inset 0 0 60px rgba(60,90,40,0.16); }

/* ════════════════════════════════════════════════════════════════
   HOW IT FIGHTS — BY TIER (static, scannable)
   ════════════════════════════════════════════════════════════════ */
.enc-tiers { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 0; }
.enc-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.enc-tier {
  border: var(--border-bone); background: var(--bg-alt); padding: 1.3rem 1.3rem 1.5rem;
  transition: var(--transition);
}
.enc-tier:hover { border-color: var(--gold-dim); }
.enc-tier-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--gold-dim); padding-bottom: 0.5rem; margin-bottom: 0.8rem;
}
.enc-tier-name { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-bright); }
.enc-tier-lvl { font-family: var(--font-heading); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--bone-dark); }
.enc-tier-stats {
  display: grid; grid-template-columns: repeat(2, auto); gap: 0.25rem 1rem; margin-bottom: 0.8rem;
  font-family: var(--font-body); font-size: 0.82rem; color: var(--bone);
}
.enc-tier-stats span b { color: var(--gold); font-family: var(--font-heading); font-size: 0.66rem;
  letter-spacing: 0.06em; margin-right: 0.35rem; }
.enc-tier-tactics { font-size: 0.9rem; line-height: 1.6; color: var(--bone); margin: 0; }

/* ── Section headings on the dark page ──────────────────────────── */
.enc-h2 {
  max-width: 1100px; margin: 3rem auto 0; padding: 0 1.5rem;
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright);
}
.enc-h2 + .enc-sub { max-width: 1100px; margin: 0.3rem auto 0; padding: 0 1.5rem;
  font-family: 'EB Garamond', serif; font-style: italic; color: var(--bone-dark); }

/* ── MMF CTA ────────────────────────────────────────────────────── */
.enc-cta { max-width: 1100px; margin: 2.5rem auto 0; padding: 0 1.5rem; }
.enc-cta-inner {
  border: var(--border-gold); background:
    linear-gradient(135deg, rgba(184,134,11,0.08), rgba(10,5,2,0.4));
  padding: 2rem; text-align: center;
}
.enc-cta-inner h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--bone-light); margin: 0 0 0.4rem; }
.enc-cta-inner p { color: var(--bone-dark); margin: 0 0 1.3rem; }
.enc-btn-gold {
  display: inline-block; padding: 1rem 2.2rem; font-family: var(--font-heading);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: #0a0502; background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  text-decoration: none; box-shadow: 0 4px 20px rgba(184,134,11,0.3); transition: var(--transition);
}
.enc-btn-gold:hover { transform: translateY(-2px); box-shadow: var(--glow-gold); filter: brightness(1.08); }

/* ── Companion rules callout ────────────────────────────────────── */
.enc-rules {
  max-width: 1100px; margin: 1.4rem auto 0; padding: 1.4rem 1.6rem;
  border: var(--border-bone); border-left: 3px solid var(--gold-dim); background: var(--bg-alt);
}
.enc-rules h4 { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 0.7rem; }
.enc-rules ul { margin: 0; padding-left: 1.1rem; }
.enc-rules li { font-size: 0.88rem; line-height: 1.6; color: var(--bone); margin: 0.3rem 0; }

/* ── Comments (Tavern-gated) ────────────────────────────────────── */
.enc-comments { max-width: 1100px; margin: 3rem auto 0; padding: 0 1.5rem; }
.enc-comments-gate {
  border: var(--border-bone); background: var(--bg-alt); padding: 2rem; text-align: center;
}
.enc-comments-gate p { color: var(--bone-dark); margin: 0 0 1.2rem; }
.enc-login-btn {
  display: inline-block; padding: 0.85rem 1.8rem; font-family: var(--font-heading);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #0a0502; background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  text-decoration: none; transition: var(--transition);
}
.enc-login-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.enc-comment-list { margin-top: 1.5rem; text-align: left; }

/* ── Legal footer ───────────────────────────────────────────────── */
.enc-legal {
  max-width: 1100px; margin: 3rem auto 0; padding: 1.5rem; border-top: var(--border-bone);
  font-size: 0.74rem; line-height: 1.65; color: rgba(154,136,112,0.7);
}
.enc-legal a { color: var(--bone-dark); }

/* ════════════════════════════════════════════════════════════════
   MOBILE — most DMs run the fight from a phone.
   GREAT, not merely functional. NOTHING from desktop is hidden:
   every stat, trait, tier and tactic stays present and legible.
   ════════════════════════════════════════════════════════════════ */

/* global safety: no element may force horizontal scroll */
.sb-card, .sb-wrap, .enc-hero, .enc-tiers, .enc-rules, .enc-cta, .enc-comments,
.enc-legal, .enc-h2, .enc-sub, .enc-topstrip { box-sizing: border-box; max-width: 100%; }
.sb-card, .enc-tier, .enc-rules, .sb-entry, .enc-tier-tactics, .enc-lede, .sb-flavor {
  overflow-wrap: break-word; word-wrap: break-word;
}

/* ── Tablet ──────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .enc-hero-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  /* large render stays large & detailed, but capped so stats are reachable */
  .enc-render { min-height: 340px; max-height: 78vh; }
  .sb-duo { grid-template-columns: 1fr; gap: 1.4rem; }
  .enc-tier-grid { grid-template-columns: 1fr; }
}

/* ── Phone ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* tighter page gutters so the card gets maximum width */
  .sb-wrap, .enc-hero, .enc-tiers, .enc-cta, .enc-comments, .enc-legal,
  .enc-h2, .enc-sub { padding-left: 1rem; padding-right: 1rem; }
  .enc-topstrip { padding-left: 1rem; padding-right: 1rem; }
  .enc-series-tag { font-size: 0.6rem; letter-spacing: 0.2em; }

  /* identity / hero type scales down but stays bold */
  .enc-name { font-size: clamp(2.1rem, 11vw, 2.8rem); }
  .enc-epithet { font-size: 1rem; }
  .enc-lede { font-size: 1rem; line-height: 1.6; }
  .enc-h2 { font-size: 1.02rem; }

  /* STAT CARD: lighter frame (perf + no edge clipping), comfortable padding */
  .sb-card { padding: 1.1rem 1rem 1.3rem;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.5), 0 0 0 4px var(--sb-gold-hi), 0 12px 30px rgba(0,0,0,0.5); }
  .sb-card::before { inset: 6px; }
  .sb-card::after { inset: 6px; }
  .sb-title { font-size: 1.5rem; }
  .sb-subtitle { font-size: 0.86rem; }
  .sb-defense { gap: 0.3rem 1rem; font-size: 0.92rem; }

  /* six ability plates: 3×2 grid — all six visible, numbers big and tappable-clear */
  .sb-abilities { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
  .sb-ability { padding: 0.5rem 0.2rem; }
  .sb-ability .sb-ab-score { font-size: 1.45rem; }
  .sb-ability .sb-ab-label { font-size: 0.64rem; }
  .sb-ability .sb-ab-mod { font-size: 0.82rem; }

  /* body copy stays readable, never shrinks below comfort */
  .sb-entry, .sb-lines { font-size: 0.92rem; line-height: 1.55; }
  .sb-sect { font-size: 0.72rem; }
  .sb-flavor { font-size: 0.92rem; }

  /* tier cards: stacked, comfortable, stats easy to scan */
  .enc-tier { padding: 1.1rem 1.1rem 1.3rem; }
  .enc-tier-stats { grid-template-columns: 1fr 1fr; font-size: 0.86rem; gap: 0.3rem 0.8rem; }
  .enc-tier-tactics { font-size: 0.92rem; }

  /* sixty-seconds + rules: roomy bullets */
  .enc-rules { padding: 1.2rem 1.1rem; }
  .enc-rules li { font-size: 0.92rem; line-height: 1.6; margin: 0.4rem 0; }

  /* CTA + login: full-width, finger-sized tap targets (>=48px) */
  .enc-cta-inner { padding: 1.5rem 1.1rem; }
  .enc-cta-inner h3 { font-size: 1.3rem; }
  .enc-btn-gold, .enc-login-btn { display: block; width: 100%; padding: 1rem 1.2rem; }

  /* FAQ summaries: large tap rows */
  .catalog-faq-item summary { padding: 1.1rem 2rem 1.1rem 0; font-size: 0.92rem; }
}

/* ── Narrow phone ────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .sb-ability .sb-ab-score { font-size: 1.3rem; }
  .sb-title { font-size: 1.32rem; }
  .enc-name { font-size: 2rem; }
}

/* ── Comments (logged-in composer + list) ───────────────────────── */
.enc-comment-list { margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.enc-comment { border: var(--border-bone); background: var(--bg-alt); padding: 0.8rem 1rem; }
.enc-comment-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; }
.enc-comment-head b { color: var(--gold-bright); font-family: var(--font-heading); }
.enc-comment-head span { color: var(--bone-dark); }
.enc-comment-body { color: var(--bone); margin-top: 0.3rem; font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; }
.enc-composer { border: 1px solid var(--gold-dim); background: var(--bg-alt); padding: 1rem; text-align: left; }
.enc-composer-as { font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dark); margin-bottom: 0.5rem; }
.enc-composer-as b { color: var(--gold-bright); }
.enc-composer textarea { width: 100%; box-sizing: border-box; min-height: 84px; background: #0c0a08; color: var(--bone-light); border: 1px solid var(--gold-dim); padding: 0.7rem; font-family: var(--font-body); resize: vertical; margin-bottom: 0.6rem; }
.enc-composer textarea:focus { outline: none; border-color: var(--gold); }