/* ═════════════════════════════════════════════════════════════════
 * Campaign cards, browse list, creation wizard, and per-type variants
 *
 * The new .campaign-card component reads data-campaign-type to pick up
 * per-type accents (see tokens.css for the [data-campaign-type="…"]
 * rebindings of --accent / --accent-dim / --accent-glow).
 *
 * Legacy selectors below (.campaign-card-name, .browse-card, etc.) are
 * preserved for back-compat with the inline JS renderer.
 * ════════════════════════════════════════════════════════════════ */

/* ── Legacy inline Campaign Card (from the original monolith) ──── */
.campaign-card { cursor: pointer; }
.campaign-card-name { font-size: 1.1rem; font-weight: 600; color: var(--text-bright); margin-bottom: 0.25rem; }
.campaign-card-meta { font-size: 0.8rem; color: var(--text-dim); }

/* ── New Campaign Card template ────────────────────────────────── */
/* Markup shape:
 *
 *   <article class="campaign-card" data-campaign-type="date_night" data-access="unlocked">
 *     <header class="campaign-card-header">
 *       <span class="campaign-card-icon" data-setting-archetype="haunted-village"></span>
 *       <span class="campaign-card-type-pill">Date Night</span>
 *       <span class="campaign-card-level">Lv 3</span>
 *     </header>
 *     <h3 class="campaign-card-title">…</h3>
 *     <p class="campaign-card-summary">…</p>
 *     <ul class="campaign-card-tags">
 *       <li class="tag">mystery</li><li class="tag">romance</li>
 *     </ul>
 *     <footer class="campaign-card-footer">
 *       <span class="campaign-card-access" data-access-reason="unlocked_via_pdf_upload">Unlocked</span>
 *       <a class="btn btn-sm btn-primary" href="…">Open Campaign</a>
 *     </footer>
 *   </article>
 */

.campaign-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.campaign-card::before {
  /* Accent stripe at the top, painted from --accent (which is per-type-rebound) */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0.9;
}
.campaign-card:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 0 14px var(--accent-glow);
  transform: translateY(-1px);
}

.campaign-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.campaign-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-size: 1rem;
  line-height: 1;
}
/* Setting-archetype emoji glyphs (placeholders until SVG pass). Pulled from
 * the taxonomy at data/templates/taxonomy.json. Default handled at the bottom. */
.campaign-card-icon[data-setting-archetype="arena-prison"]::after     { content: "⚔️"; }
.campaign-card-icon[data-setting-archetype="haunted-village"]::after   { content: "🏚️"; }
.campaign-card-icon[data-setting-archetype="dungeon-cave"]::after      { content: "🕯️"; }
.campaign-card-icon[data-setting-archetype="fae-garden"]::after        { content: "🌺"; }
.campaign-card-icon[data-setting-archetype="ancient-temple"]::after    { content: "🛕"; }
.campaign-card-icon[data-setting-archetype="coastal-town"]::after      { content: "⚓"; }
.campaign-card-icon[data-setting-archetype="clockwork-factory"]::after { content: "⚙️"; }
.campaign-card-icon[data-setting-archetype="giant-stronghold"]::after  { content: "🏰"; }
.campaign-card-icon[data-setting-archetype="abyssal-crater"]::after    { content: "🌋"; }
.campaign-card-icon[data-setting-archetype="masquerade-ball"]::after   { content: "🎭"; }
.campaign-card-icon[data-setting-archetype="bandit-camp"]::after       { content: "🏕️"; }
.campaign-card-icon[data-setting-archetype="midnight-market"]::after   { content: "🕯"; }
.campaign-card-icon[data-setting-archetype="vault-heist"]::after       { content: "💎"; }
.campaign-card-icon[data-setting-archetype="floating-library"]::after  { content: "📚"; }
.campaign-card-icon[data-setting-archetype="desert-sands"]::after      { content: "🏜️"; }
.campaign-card-icon[data-setting-archetype="bridge-pass"]::after       { content: "🌉"; }
.campaign-card-icon[data-setting-archetype="crypt-tomb"]::after        { content: "⚰️"; }
.campaign-card-icon[data-setting-archetype="goblin-warren"]::after     { content: "👹"; }
.campaign-card-icon[data-setting-archetype="unclassified"]::after,
.campaign-card-icon:not([data-setting-archetype])::after               { content: "📜"; }

.campaign-card-type-pill {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
}

.campaign-card-level {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

/* On narrow viewports the header wraps; keeping margin-left:auto on the
 * level pill makes it float awkwardly on its own row. Drop it. */
@media (max-width: 480px) {
  .campaign-card-level { margin-left: 0; }
}

.campaign-card-title {
  font-family: var(--font-char);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.2;
  margin: 0;
}

.campaign-card-summary {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.campaign-card-meta-row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.72rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.campaign-card-meta-row > span { white-space: nowrap; }

.campaign-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.campaign-card-tags .tag {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  text-transform: capitalize;
}

.campaign-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.3rem;
}
.campaign-card-access {
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.campaign-card-access::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
}
.campaign-card-access[data-access-reason="owner"]                   { color: var(--accent); }
.campaign-card-access[data-access-reason="owner"]::before           { background: var(--accent); }
.campaign-card-access[data-access-reason^="unlocked_via"]           { color: var(--success); }
.campaign-card-access[data-access-reason^="unlocked_via"]::before   { background: var(--success); }
.campaign-card-access[data-access-reason="source_public_free"]      { color: var(--info); }
.campaign-card-access[data-access-reason="source_public_free"]::before { background: var(--info); }
.campaign-card-access[data-access-reason="public"]                  { color: var(--info); }
.campaign-card-access[data-access-reason="public"]::before          { background: var(--info); }
.campaign-card-access[data-access-reason^="member_"]                { color: var(--accent); }
.campaign-card-access[data-access-reason^="member_"]::before        { background: var(--accent); }
.campaign-card-access[data-access-reason="content_not_owned"]       { color: var(--text-dim); }
.campaign-card-access[data-access-reason="unauthenticated"]         { color: var(--text-dim); }

/* ── Per-campaign-type visual variants ─────────────────────────── */
/* Type pill label and per-type flourishes. Colors are inherited from
 * --accent, which is per-type-rebound in tokens.css. */

.campaign-card[data-campaign-type="date_night"] .campaign-card-type-pill::before { content: "♥ "; }
.campaign-card[data-campaign-type="date_night"] .campaign-card-type-pill::after { content: "Date Night"; }
.campaign-card[data-campaign-type="date_night"] .campaign-card-type-pill { font-size: 0; }
.campaign-card[data-campaign-type="date_night"] .campaign-card-type-pill::before,
.campaign-card[data-campaign-type="date_night"] .campaign-card-type-pill::after { font-size: 0.65rem; }

.campaign-card[data-campaign-type="kids"] .campaign-card-type-pill::before { content: "⭐ "; }
.campaign-card[data-campaign-type="kids"] .campaign-card-type-pill::after { content: "Kids"; }
.campaign-card[data-campaign-type="kids"] .campaign-card-type-pill { font-size: 0; }
.campaign-card[data-campaign-type="kids"] .campaign-card-type-pill::before,
.campaign-card[data-campaign-type="kids"] .campaign-card-type-pill::after { font-size: 0.65rem; }
.campaign-card[data-campaign-type="kids"] { border-radius: var(--radius-xl); }
.campaign-card[data-campaign-type="kids"]::before { height: 4px; }

.campaign-card[data-campaign-type="standard"] .campaign-card-type-pill::after { content: "Standard"; }
.campaign-card[data-campaign-type="standard"] .campaign-card-type-pill { font-size: 0; }
.campaign-card[data-campaign-type="standard"] .campaign-card-type-pill::after { font-size: 0.65rem; }

/* Locked state — muted card until the user unlocks */
.campaign-card[data-access="locked"] {
  opacity: 0.85;
}
.campaign-card[data-access="locked"] .campaign-card-title { color: var(--text); }
.campaign-card[data-access="locked"]::before { opacity: 0.4; }

/* ── Legacy Browse Campaigns list ─────────────────────────────── */
.browse-wrap { max-width: 900px; margin: 0 auto; }
.browse-wrap h2 { font-family: var(--font-char); color: var(--accent); margin-bottom: 1.25rem; font-size: 1.6rem; }
.browse-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  transition: all var(--transition); cursor: pointer;
}
.browse-card:hover { border-color: var(--border-glow); box-shadow: 0 0 12px var(--border-glow); }
.browse-card.expanded { cursor: default; }
.browse-card-name { font-size: 1.1rem; font-weight: 600; color: var(--text-bright); margin-bottom: 0.25rem; }
.browse-card-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 0.5rem; }
.browse-card-stats { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--text-dim); flex-wrap: wrap; margin-bottom: 0.75rem; }
.browse-card-full-desc { font-size: 0.85rem; color: var(--text); line-height: 1.5; margin-bottom: 0.75rem; padding: 0.75rem; background: var(--bg-input); border-radius: var(--radius); white-space: pre-wrap; }

/* ── Join Campaign ───────────────────────────────────────────── */
.join-page { max-width: 480px; margin: 3rem auto; text-align: center; }
.join-page h2 { font-family: var(--font-char); color: var(--accent); margin-bottom: 1rem; }
.join-page p { color: var(--text-dim); margin-bottom: 1.5rem; }

/* ── Campaign Creation Wizard ────────────────────────────────── */
.create-campaign-wrap { max-width: 720px; margin: 0 auto; }
.create-campaign-wrap h2 { font-family: var(--font-char); color: var(--accent); margin-bottom: 1.25rem; font-size: 1.6rem; }
.template-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 1.5rem; }
.template-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem; cursor: pointer;
  transition: all var(--transition);
}
.template-card:hover { border-color: var(--border-glow); box-shadow: 0 0 12px var(--border-glow); }
.template-card.date-night { border-color: var(--accent-date-night-dim); }
.template-card-name { font-weight: 600; color: var(--text-bright); margin-bottom: 0.3rem; }
.template-card-desc { font-size: 0.82rem; color: var(--text-dim); line-height: 1.4; }
.template-card .type-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; margin-bottom: 0.5rem; }
.template-card .type-badge.standard { background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border); }
.template-card .type-badge.date-night { background: rgba(212, 102, 140, 0.15); color: var(--accent-date-night); border: 1px solid var(--accent-date-night-dim); }
.scratch-card {
  background: var(--bg-input); border: 2px dashed var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem; cursor: pointer;
  text-align: center; transition: all var(--transition);
}
.scratch-card:hover { border-color: var(--accent); background: rgba(212, 165, 90, 0.05); }
.scratch-card-icon { font-size: 2rem; margin-bottom: 0.3rem; color: var(--accent); }
.scratch-card-label { font-weight: 600; color: var(--text-bright); }

.ai-gen-btn { position: relative; }
.ai-gen-btn .spinner { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); }