/* BappaQuiz — the score, the clock, the progress and the celebration.
 *
 * Everything here is chrome around a question. It has to be readable at a
 * glance and then ignored: a learner who is watching the timer is not reading
 * the question. So the score sits small and the ring is a shape rather than a
 * number, and neither of them moves except when something has happened.
 */

.bq {
  position: relative;
  font-family: var(--bt-font);
  color: var(--bt-ink);
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--bt-s3);
}

/* ── the strip along the top ─────────────────────────────────────────── */

.bq__hud {
  display: flex;
  align-items: center;
  gap: var(--bt-s3);
  min-height: var(--bt-tap);
}

.bq__score {
  display: flex;
  align-items: baseline;
  gap: var(--bt-s1);
}

.bq__score-num {
  font-size: var(--bt-fs-big);
  font-weight: 700;
  line-height: 1;
  color: var(--bt-green);
  font-variant-numeric: tabular-nums;
}

.bq__score-label {
  font-size: var(--bt-fs-small);
  font-weight: 700;
  color: var(--bt-ink-soft);
}

.bq__streak {
  padding: var(--bt-s1) var(--bt-s3);
  border-radius: var(--bt-radius-pill);
  background: var(--bt-gold);
  color: var(--bt-ink);
  font-size: var(--bt-fs-small);
  font-weight: 700;
  animation: bqPop var(--bt-t) var(--bt-ease);
}

.bq__lives {
  margin-left: auto;
  font-size: var(--bt-fs-body);
  letter-spacing: 0.1em;
  color: var(--bt-rose);
}

/* ── the clock ───────────────────────────────────────────────────────── */

.bq__ring {
  width: 2.6rem;
  height: 2.6rem;
  margin-left: auto;
  transform: rotate(-90deg);
}

.bq__ring-track {
  fill: none;
  stroke: var(--bt-line);
  stroke-width: 5;
}

.bq__ring-fill {
  fill: none;
  stroke: var(--bt-teal);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke var(--bt-t) var(--bt-ease);
}

/* Warm, not red, and it does not flash. A clock that flashes is a clock that
   makes people answer badly. */
.bq__ring.is-low .bq__ring-fill { stroke: var(--bt-saffron); }

/* ── how far through ─────────────────────────────────────────────────── */

.bq__progress {
  height: 8px;
  border-radius: var(--bt-radius-pill);
  background: var(--bt-line);
  overflow: hidden;
}

.bq__progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bt-saffron), var(--bt-gold));
  transition: width var(--bt-t-slow) var(--bt-ease);
}

/* ── the question ────────────────────────────────────────────────────── */

.bq__stage {
  padding: var(--bt-s4);
  border-radius: var(--bt-radius);
  background: var(--bt-cream);
}

.bq__stage.is-right { animation: bqGlow var(--bt-t-slow) var(--bt-ease); }
.bq__stage.is-wrong { animation: bqShake var(--bt-t-slow) var(--bt-ease); }

@keyframes bqGlow {
  0%   { box-shadow: 0 0 0 0 rgb(21 143 65 / 0.5); }
  100% { box-shadow: 0 0 0 18px rgb(21 143 65 / 0); }
}

/* Short and small. A wrong answer should feel like a nudge, not a punishment —
   there is no buzzer anywhere in this file for the same reason. */
@keyframes bqShake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@keyframes bqPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── the points, on their way to the total ───────────────────────────── */

.bq__fly {
  position: absolute;
  z-index: 5;
  font-weight: 700;
  font-size: var(--bt-fs-body);
  color: var(--bt-green);
  pointer-events: none;
  animation: bqFly 0.85s var(--bt-ease) forwards;
}

@keyframes bqFly {
  0%   { transform: translate(-50%, 0) scale(1.3); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(0.8); opacity: 0; }
}

/* ── the end ─────────────────────────────────────────────────────────── */

.bq__done {
  text-align: center;
  padding: var(--bt-s4) var(--bt-s3);
}

.bq__done-title {
  margin: 0 0 var(--bt-s3);
  font-size: var(--bt-fs-big);
}

.bq__done-score {
  margin: 0 0 var(--bt-s2);
  font-size: var(--bt-fs-prompt);
  font-weight: 700;
  color: var(--bt-green);
}

.bq__done-line {
  margin: 0 0 var(--bt-s1);
  font-size: var(--bt-fs-body);
  color: var(--bt-ink-soft);
}

/* The most useful sentence on the page: not how you did, but what to do next. */
.bq__done-weak {
  margin: var(--bt-s4) 0 var(--bt-s3);
  font-size: var(--bt-fs-body);
  font-weight: 700;
}

.bq__again {
  font: inherit;
  font-weight: 700;
  min-height: var(--bt-tap);
  padding: 0 var(--bt-s5);
  border: 0;
  border-radius: var(--bt-radius-pill);
  color: #fff;
  background: var(--bt-saffron);
  box-shadow: var(--bt-shadow);
  cursor: pointer;
}

.bq__again:active { transform: translateY(2px); }

.bq__badge {
  margin: var(--bt-s3) 0 0;
  font-size: var(--bt-fs-body);
  font-weight: 700;
  color: var(--bt-purple);
}

.bq :focus-visible {
  outline: 3px solid var(--bt-saffron);
  outline-offset: 3px;
}