/* Catechism — the taproom quiz. Seal-wheels above, questions below. */

.catechism-frame {
  width: min(680px, 96vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(14px, 2.6vw, 20px);
}
.status-line {
  margin: 0;
  text-align: center;
  font-family: var(--hand);
  font-style: italic;
  font-size: clamp(14px, 2.1vw, 16.5px);
  color: var(--ink-soft);
  min-height: 22px;
}

/* ---- seats + seal wheels ---- */
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.seat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border-radius: 9px;
  border: 1.5px solid rgba(122, 104, 80, .35);
  background: rgba(246, 238, 214, .45);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.seat-card.me { background: rgba(246, 238, 214, .7); }
.seat-card.to-play { border-color: rgba(227, 183, 84, .9); box-shadow: 0 0 0 2px rgba(227, 183, 84, .3); }
.seat-card b {
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10.5px;
  color: var(--ink-soft);
}
.wheel {
  position: relative;
  width: 56px;
  height: 56px;
}
.wheel-seg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from calc(var(--i) * 60deg),
    hsl(var(--hue), 45%, 45%) 0deg 58deg, transparent 58deg 360deg);
  opacity: .16;
}
.wheel-seg.held { opacity: 1; }
.wheel::after {
  content: '';
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: var(--parchment);
  box-shadow: inset 0 0 0 1px rgba(122, 104, 80, .4);
}
.wheel-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  z-index: 1;
}

/* ---- the stage ---- */
.stage {
  min-height: 300px;
  border-radius: 10px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(217, 148, 65, 0.10), rgba(217, 148, 65, 0) 55%),
    linear-gradient(180deg, #241a12, #171009);
  box-shadow: inset 0 0 0 1px rgba(200, 156, 58, .35);
  padding: clamp(14px, 3vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stage-line {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: rgba(241, 230, 200, .6);
}

.branch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 9px; }
.branch {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: left;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1.5px solid hsla(var(--hue), 45%, 60%, .5);
  background: hsla(var(--hue), 35%, 30%, .25);
  cursor: pointer;
  transition: transform .14s var(--ease), background .14s var(--ease);
}
.branch:hover:not(.held) { transform: translateY(-2px); background: hsla(var(--hue), 35%, 34%, .4); }
.branch b { font-family: var(--display); font-style: italic; font-size: 17px; color: var(--cream); }
.branch span { font-size: 11.5px; color: rgba(241, 230, 200, .6); }
.branch i {
  font-family: var(--caps);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  color: var(--gold-bright);
}
.branch.held { opacity: .45; cursor: default; }

/* question card */
.q-branch {
  margin: 0 0 8px;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: hsl(var(--hue), 55%, 65%);
}
.q-stem {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(18px, 3.2vw, 23px);
  line-height: 1.35;
  color: var(--cream);
}
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 540px) { .q-options { grid-template-columns: 1fr; } }
.q-opt {
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(241, 230, 200, .25);
  background: rgba(246, 238, 214, .07);
  color: var(--cream);
  font-family: var(--body);
  font-size: 15.5px;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.q-opt:hover:not(:disabled) { background: rgba(246, 238, 214, .16); border-color: rgba(227, 183, 84, .6); }
.q-opt i {
  font-style: normal;
  font-family: var(--caps);
  font-size: 11px;
  color: var(--gold-bright);
  border: 1px solid rgba(227, 183, 84, .5);
  border-radius: 5px;
  padding: 2px 6px;
}
.q-opt.true { border-color: #7fd6a8; background: rgba(47, 125, 88, .3); }
.q-opt.false { border-color: #d66a60; background: rgba(122, 34, 40, .35); }
.q-opt.dim { opacity: .45; }
.q-timer {
  margin-top: 12px;
  height: 6px;
  border-radius: 3px;
  background: rgba(246, 238, 214, .12);
  overflow: hidden;
}
.q-timer i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition: width .25s linear;
}
.q-gloss {
  margin: 12px 0 0;
  font-family: var(--hand);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(241, 230, 200, .85);
}
.q-gloss b { color: var(--gold-bright); }
.q-actions { margin-top: 14px; display: flex; justify-content: center; }
.q-actions[hidden] { display: none; }

/* AI log */
.ai-log { display: flex; flex-direction: column; gap: 9px; }
.ai-line {
  margin: 0;
  font-size: 15.5px;
  color: rgba(241, 230, 200, .85);
}
.ai-line b { color: var(--gold-bright); font-family: var(--caps); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.ai-branch { color: hsl(var(--hue), 55%, 65%); font-style: italic; }
.ai-line .good { color: #7fd6a8; font-style: normal; }
.ai-line .bad { color: #d66a60; font-style: normal; }

.frame-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.help-body { text-align: left; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.help-body p { margin: 0 0 12px; }
.help-body b { color: var(--oxblood); }