/* Interstitial wrapper — consistent margins & subtle divider */
.cf-i {
  margin: 20px 0 30px;
  padding: 12px 0 0;
  position: relative;
}
.cf-i::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.08), transparent);
  margin-bottom: 12px;
}

/* Lore card tweaks when inside the roll — slightly tighter */
.cf-i .cf-lore-card {
  margin: 0;
  padding: 14px 16px;
  box-shadow: inset 0 0 10px rgba(0,0,0,.04), 0 3px 10px rgba(0,0,0,.06);
}
.cf-i .cf-lore-title { font-size: 1.05rem; }
.cf-i .cf-lore-meta .pill { font-size: .78rem; padding: 2px 8px; }

/* Trivia (compact) normalization in the roll */
.cf-i .cf-trivia-card {
  background: #fff6e9;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.cf-i .cf-trivia-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; margin-bottom: 6px;
}
.cf-i .cf-trivia-q { margin: 6px 0 10px; }
.cf-i .cf-trivia-opts { gap: 6px; }
.cf-i .cf-trivia-opts li button {
  padding: .42rem .6rem; border-radius: 10px; text-align: left;
}
.cf-i .cf-trivia-actions { margin-top: 6px; }
.cf-i .cf-trivia-actions .reveal {
  border: 0; border-radius: 999px; padding: .38rem .75rem;
  background: #e58a24; color: #fff; cursor: pointer;
}

/* Optional ember hover to tie the brand together */
.cf-i .cf-lore-card:hover,
.cf-i .cf-trivia-card:hover {
  box-shadow: 0 6px 18px rgba(229,138,36,.22), inset 0 0 12px rgba(229,138,36,.08);
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Learn more pill with arrow */
.cf-i .cf-trivia-more{
  display:inline-flex;align-items:center;gap:6px;
  padding:.32rem .6rem;border-radius:999px;
  background:#f1e3ce;border:1px solid #d9c4a6;color:#3b2a1a;
  text-decoration:none;font-size:.9rem;line-height:1
}
.cf-i .cf-trivia-more::after{
  content:"→";font-weight:700;line-height:1;
  transform:translateX(0);transition:transform .15s ease
}
.cf-i .cf-trivia-more:hover::after{ transform:translateX(2px); }

/* Click feedback */
.cf-i .cf-trivia-feedback{
  margin-top:8px;font-weight:600;
  padding:6px 10px;border-radius:8px;display:inline-block
}
.cf-i .cf-trivia-feedback.ok{
  color:#1b5e20;background:#e3f6e6;border:1px solid #2f9e44
}
.cf-i .cf-trivia-feedback.no{
  color:#7f1d1d;background:#fde7e7;border:1px solid #c92a2a
}

/* Trivia reset/tidy */
.cf-i .cf-trivia-opts{list-style:none !important;margin:8px 0;padding:0}
.cf-i .cf-trivia-opts li{margin:0}

/* Ensure buttons aren't inheriting dark theme styles */
.cf-i .cf-trivia-opts li button{
  appearance:none;
  background:#f3efe8;
  color:#2b1607;
  border:1px solid #d6c1a6;
  border-radius:12px;
  padding:.46rem .65rem;
  width:100%;
  text-align:left;
  cursor:pointer;
  line-height:1.25;
}
.cf-i .cf-trivia-opts li button:focus{outline:2px solid #e58a24; outline-offset:1px}
.cf-i .cf-trivia-opts li.right button{border-color:#2f9e44;background:#e3f6e6}
.cf-i .cf-trivia-opts li.wrong button{border-color:#c92a2a;background:#fde7e7}

/* Reveal button */
.cf-i .cf-trivia-actions{margin-top:8px;display:flex;gap:10px;align-items:center}
.cf-i .cf-trivia-actions .reveal{
  border:0;border-radius:999px;padding:.42rem .85rem;background:#e58a24;color:#fff;cursor:pointer
}

/* Explanation + footer (appears after Reveal) */
.cf-i .cf-trivia-explain{margin-top:10px}
.cf-i .cf-trivia-expl-text{margin-bottom:8px}

/* Learn more pill with right arrow */
.cf-i .cf-trivia-more{
  display:inline-flex;align-items:center;gap:6px;
  padding:.32rem .6rem;border-radius:999px;
  background:#f1e3ce;border:1px solid #d9c4a6;color:#3b2a1a;
  text-decoration:none;font-size:.9rem;line-height:1
}
.cf-i .cf-trivia-more::after{
  content:"→";font-weight:700;line-height:1;
  transform:translateX(0);transition:transform .15s ease
}
.cf-i .cf-trivia-more:hover::after{ transform:translateX(2px); }

/* Click feedback text */
.cf-i .cf-trivia-feedback{
  margin-top:8px;font-weight:600;
  padding:6px 10px;border-radius:8px;display:inline-block
}
.cf-i .cf-trivia-feedback.ok{
  color:#1b5e20;background:#e3f6e6;border:1px solid #2f9e44
}
.cf-i .cf-trivia-feedback.no{
  color:#7f1d1d;background:#fde7e7;border:1px solid #c92a2a
}