/* who-said-it.css — "Who Said It?" quote game. Parchment + antique gold to
   match the site. Self-contained; everything is scoped under .wsi. */

.wsi {
  font-family: 'Cormorant Garamond', 'Garamond', Georgia, serif;
  color: #3a3327;
  max-width: 720px;
  margin: 0 auto;
}

/* ---- shared card ---- */
.wsi-card {
  position: relative;
  background: linear-gradient(180deg, rgba(250, 246, 236, 0.97), rgba(242, 235, 220, 0.97)),
    url('/assets/parchment-bg.png');
  background-size: cover;
  border: 1px solid rgba(160, 124, 61, 0.42);
  border-radius: 1.25rem;
  box-shadow: 0 26px 60px -34px rgba(56, 42, 16, 0.5), inset 0 0 0 1px rgba(255, 251, 240, 0.7);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  text-align: center;
}

.wsi-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a6626;
  display: block;
  margin-bottom: 0.6rem;
}

.wsi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 0.8rem 1.5rem;
  border-radius: 0.7rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.wsi-btn svg { width: 1.05rem; height: 1.05rem; }
.wsi-btn--primary {
  background: linear-gradient(180deg, #b0873a, #8a6626);
  color: #fbf6ea;
  box-shadow: 0 10px 22px -12px rgba(138, 102, 38, 0.9);
}
.wsi-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(138, 102, 38, 0.95); }
.wsi-btn--ghost {
  background: rgba(251, 246, 234, 0.7);
  color: #6b4f1e;
  border-color: #cdb987;
}
.wsi-btn--ghost:hover { background: #efe4ca; }

/* ---- start screen ---- */
.wsi-title {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  line-height: 1.05;
  margin: 0 0 0.8rem;
  background: linear-gradient(180deg, #9a7a34 0%, #7a5e26 60%, #5f4a1e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #7a5e26;
}
.wsi-lede {
  font-size: 1.14rem;
  line-height: 1.55;
  color: #5b5140;
  max-width: 34rem;
  margin: 0 auto 1.6rem;
}
.wsi-start-stats {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin: 0 0 1.7rem;
}
.wsi-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.wsi-stat-num { font-family: 'Cinzel', serif; font-size: 1.9rem; font-weight: 700; color: #6b4f1e; line-height: 1; }
.wsi-stat-den { font-size: 1rem; color: #8a6626; }
.wsi-stat-label { font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: #8a7f68; }
.wsi-start-play { font-size: 1.1rem; padding: 0.95rem 2.4rem; }
.wsi-fineprint { font-size: 0.9rem; font-style: italic; color: #8a7f68; margin: 1.3rem 0 0; }

/* ---- play screen ---- */
.wsi-play { text-align: left; }
.wsi-topbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.wsi-round { font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: #7a5e26; }
.wsi-round-of { color: #a89a78; }
.wsi-score-pill, .wsi-streak-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-left: auto; font-family: 'Cinzel', serif; font-size: 0.82rem;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  background: rgba(168, 130, 63, 0.14); color: #7a5e26;
}
.wsi-streak-pill { margin-left: 0; background: rgba(200, 90, 40, 0.13); color: #a4542a; }
.wsi-score-pill svg, .wsi-streak-pill svg { width: 0.9rem; height: 0.9rem; }

.wsi-progress { height: 5px; border-radius: 999px; background: rgba(120, 96, 46, 0.16); overflow: hidden; margin-bottom: 1.3rem; }
.wsi-progress span { display: block; height: 100%; background: linear-gradient(90deg, #c9a24e, #8a5a1e); transition: width 0.3s ease; }

.wsi-cat {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.28rem 0.75rem; border-radius: 999px; margin-bottom: 0.9rem;
  border: 1px solid rgba(0,0,0,0.06);
}
.wsi-cat svg { width: 0.85rem; height: 0.85rem; }
.wsi-cat--bible    { background: #e7efe4; color: #3f6b3a; }
.wsi-cat--father   { background: #efe6d3; color: #8a6c1e; }
.wsi-cat--reformer { background: #f3e0d2; color: #9c4b26; }
.wsi-cat--skeptic  { background: #dfe6f0; color: #385a86; }
.wsi-cat--modern   { background: #eee1ef; color: #6b3a86; }
.wsi-cat--cult     { background: #ecdfd8; color: #7a4a3a; }

.wsi-quote {
  position: relative;
  margin: 0 0 1.1rem;
  padding: 0.2rem 0 0.2rem 2.4rem;
}
.wsi-quote > svg { position: absolute; left: 0; top: 0.1rem; width: 1.7rem; height: 1.7rem; color: #cba94e; }
.wsi-quote p {
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  line-height: 1.4;
  font-style: italic;
  color: #40382a;
  margin: 0;
}
.wsi-prompt { font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8a7f68; margin: 0 0 0.8rem; }

.wsi-options { display: grid; gap: 0.65rem; }
.wsi-opt {
  display: flex; align-items: center; gap: 0.85rem; text-align: left;
  padding: 0.85rem 1rem; border-radius: 0.7rem;
  border: 1.5px solid #d8c7a0; background: rgba(251, 247, 238, 0.85);
  font-family: inherit; font-size: 1.12rem; color: #3f3729; cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.1s ease;
}
.wsi-opt:hover:not(:disabled) { border-color: #a8823f; background: #f6edda; transform: translateY(-1px); }
.wsi-opt:disabled { cursor: default; }
.wsi-opt-letter {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 700;
  background: #ecdcb4; color: #7a5e26;
}
.wsi-opt-text { flex: 1; }
.wsi-opt.is-correct { border-color: #4f8a3f; background: #e4f1dc; }
.wsi-opt.is-correct .wsi-opt-letter { background: #4f8a3f; color: #fff; }
.wsi-opt.is-wrong { border-color: #b4553a; background: #f3ddd3; }
.wsi-opt.is-wrong .wsi-opt-letter { background: #b4553a; color: #fff; }

.wsi-reveal { margin-top: 1.2rem; padding: 1.1rem 1.15rem; border-radius: 0.85rem; border: 1px solid #d8c7a0; background: rgba(255, 252, 244, 0.9); }
.wsi-reveal.is-right { border-color: #9cc38c; background: #eef6e8; }
.wsi-reveal.is-wrong { border-color: #d9b3a3; background: #f8ece5; }
.wsi-reveal-head { display: flex; align-items: center; gap: 0.5rem; font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; }
.wsi-reveal.is-right .wsi-reveal-head { color: #3f7d3a; }
.wsi-reveal.is-wrong .wsi-reveal-head { color: #a4542a; }
.wsi-reveal-head svg { width: 1.2rem; height: 1.2rem; }
.wsi-reveal-answer { margin: 0.5rem 0 0; font-size: 1.08rem; color: #40382a; }
.wsi-reveal-note { margin: 0.5rem 0 0; font-size: 1.05rem; line-height: 1.5; color: #544b39; }
.wsi-reveal-source { margin: 0.45rem 0 0; font-size: 0.9rem; font-style: italic; color: #8a7f68; }
.wsi-reveal .wsi-next { margin-top: 1rem; width: 100%; }

/* ---- result screen ---- */
.wsi-result-medal { width: 4.2rem; height: 4.2rem; margin: 0 auto 0.6rem; color: #b0873a; }
.wsi-result-medal svg { width: 100%; height: 100%; }
.wsi-result-score { font-family: 'Cinzel', serif; font-weight: 800; font-size: 3.4rem; line-height: 1; color: #6b4f1e; }
.wsi-result-den { font-size: 1.5rem; color: #8a6626; margin-left: 0.2rem; }
.wsi-result-rank { font-family: 'Cinzel', serif; font-size: 1.6rem; color: #5f4a1e; margin: 0.5rem 0 0.3rem; }
.wsi-result-sub { font-size: 1.08rem; color: #5b5140; margin: 0 auto 1.4rem; max-width: 30rem; }
.wsi-review { text-align: left; background: rgba(255, 252, 244, 0.8); border: 1px solid #e0d3b6; border-radius: 0.85rem; padding: 1rem 1.15rem; margin: 0 0 1.4rem; }
.wsi-review h3 { font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; color: #8a6626; margin: 0 0 0.6rem; }
.wsi-review ul { list-style: none; margin: 0; padding: 0; }
.wsi-review li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0; border-top: 1px solid #ece0c4; }
.wsi-review li:first-child { border-top: 0; }
.wsi-review-q { font-style: italic; color: #574e3c; font-size: 1rem; }
.wsi-review-a { font-family: 'Cinzel', serif; font-size: 0.9rem; color: #7a5e26; }
.wsi-allright { font-size: 1.15rem; color: #3f7d3a; margin: 0 0 1.4rem; }
.wsi-result-actions { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }
.wsi-morelink { display: inline-block; margin-top: 1.2rem; font-family: 'Cinzel', serif; font-size: 0.85rem; color: #8a7f68; text-decoration: underline; }
.wsi-morelink:hover { color: #6b4f1e; }

/* ---- misc ---- */
.wsi-loading { text-align: center; padding: 3rem 1rem; font-style: italic; color: #8a7f68; }
.wsi-error { text-align: center; color: #793025; font-weight: 600; }
.wsi-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  background: #3a3327; color: #fbf6ea; padding: 0.7rem 1.2rem; border-radius: 0.6rem;
  font-family: 'Cormorant Garamond', serif; font-size: 1rem; max-width: 90vw;
  box-shadow: 0 12px 30px rgba(30, 22, 10, 0.35); opacity: 0; transition: opacity 0.28s ease, transform 0.28s ease; z-index: 2000;
}
.wsi-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 520px) {
  .wsi-start-stats { gap: 1.6rem; }
  .wsi-opt { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wsi-btn, .wsi-opt, .wsi-progress span, .wsi-toast { transition: none; }
}