/* Jackdaw Book — "Who is this?" full-screen quiz. Loaded after styles.css;
   reuses its design tokens rather than inventing new ones. No network
   requests happen from this stylesheet or the page it styles. */

.game-stage {
  max-width: 26rem; margin: 2rem auto 0; text-align: center;
}
.game-stage[hidden] { display: none; }

.game-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.quiz-score { margin: 0; font-weight: 600; color: var(--slate); }

/* the photo dominates the screen, the way the mobile app presents it */
.game-portrait {
  width: min(64vw, 320px); height: min(64vw, 320px); margin: 0 auto 1.5rem;
  border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #eceeef; border: 6px solid var(--steel);
  font-size: 6rem; font-weight: 700; color: #fff;
  box-shadow: 0 12px 30px rgba(20, 20, 26, 0.15);
}
.game-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.game-question {
  font-family: "Bricolage Grotesque", "Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; font-size: var(--step-3); margin: 0 0 1.5rem;
}

.game-choices { display: flex; flex-direction: column; gap: 0.75rem; }
.game-choice {
  font: inherit; font-weight: 600; font-size: var(--step-0); cursor: pointer;
  min-height: 56px; width: 100%; background: #fff; color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1rem;
}
.game-choice:hover:not(:disabled) { border-color: var(--steel); }
.game-choice:disabled { cursor: default; }
.game-choice.is-correct { background: rgba(47, 93, 120, 0.1); border-color: var(--steel); color: var(--steel); }
.game-choice.is-wrong { background: rgba(140, 74, 63, 0.08); border-color: var(--clay); color: var(--clay); }

.game-result { margin: 1.25rem 0 0; font-size: var(--step-1); font-weight: 600; color: var(--steel); }
.game-actions { justify-content: center; margin-top: 1.5rem; }
.game-actions .btn { min-width: 12rem; min-height: 52px; }