/* Endless Quiz — styles
 *
 * The same visual world as Color Match & Merge: a bright summer sky, thick
 * ink outlines and hard, unblurred drop shadows. Tokens, buttons, the topbar
 * and the stat boxes are lifted from that game unchanged so the two read as
 * siblings. Single-theme on purpose, like the original. */

:root {
  /* the scene */
  --sky-top:   #79cbf2;
  --sky-mid:   #a5e2fa;
  --sky-low:   #d3f1fc;

  /* surfaces and ink */
  --paper:     #fffdf7;
  --paper-warm:#fff3e0;
  --ink:       #2b2142;
  --ink-soft:  #6f6389;
  --ink-faint: rgba(43, 33, 66, .16);

  /* action */
  --accent:      #ff5d8f;
  --accent-deep: #e0446f;
  --gold:        #ffc93c;
  --grass:       #35c46b;
  --danger:      #d8365f;

  /* answer letters — the jar primaries */
  --a: #f5423c;
  --b: #ffd028;
  --c: #3b7bf7;
  --d: #2fc15e;

  /* difficulty */
  --easy:   #35c46b;
  --normal: #3b7bf7;
  --hard:   #ff8700;
  --xhard:  #9a53ef;

  --lift:   4px;
  --stroke: 3px;
  --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* This is an app, not a page: nothing to select, copy or look up. No
     text selection, no iOS long-press callout (copy / look up / share),
     and images can't be dragged out. The seed box is the one place typing
     happens, so it stays selectable below. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; user-drag: none; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

body {
  background-color: var(--sky-mid);
  background-image:
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-low) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.55 "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 620px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(16px + env(safe-area-inset-right))
    calc(20px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));
}

.screen { display: none; flex: 1; min-height: 0; }
/* the menu sits in the middle of a tall phone rather than hugging the top */
#screen-home.is-active { justify-content: center; }
.screen.is-active {
  display: flex;
  flex-direction: column;
  animation: rise .34s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ───────── buttons ───────── */

.btn {
  appearance: none;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  padding: 11px 18px;
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .09s ease, box-shadow .09s ease, background .14s ease;
}
.btn:hover:not(:disabled) { background: var(--paper-warm); }
.btn:active:not(:disabled) { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: 0 var(--lift) 0 var(--ink-faint); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--accent-deep); }
.btn--ghost {
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 var(--lift) 0 var(--ink-faint);
}
.btn--ghost:hover:not(:disabled) { background: #fff; }
.btn--wide { width: 100%; font-size: 19px; padding: 13px 18px; }
/* Reserved for the one action that destroys something. */
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { background: #bf2a51; }

/* ───────── home (as in the jar game) ───────── */

.masthead { text-align: center; margin: 10px 0 26px; }

/* Three bobbing speech bubbles — the jar game's three jars, as questions. */
.masthead__mark {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 14px;
  margin-bottom: 14px;
}
.masthead__mark span {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 34px;
  border-radius: 12px;
  border: var(--stroke) solid var(--ink);
  background: var(--c);
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  box-shadow: 0 3px 0 var(--ink);
  animation: bob 2.4s ease-in-out infinite;
}
/* the bubble's tail */
.masthead__mark span::after {
  content: "";
  position: absolute;
  left: 7px; bottom: -9px;
  width: 10px; height: 10px;
  background: var(--c);
  border: var(--stroke) solid var(--ink);
  border-top: 0; border-right: 0;
  border-radius: 0 0 0 4px;
  transform: skewY(-35deg);
}
.masthead__mark span:nth-child(2) { animation-delay: .18s; }
.masthead__mark span:nth-child(3) { animation-delay: .36s; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }

.masthead h1 {
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(46px, 13vw, 76px);
  line-height: .98;
  letter-spacing: -.01em;
  color: #fff;
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--ink);
  text-wrap: balance;
}
.masthead__tag {
  margin: 14px auto 0;
  max-width: 30ch;
  font-weight: 700;
  font-size: 17px;
}
.purse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 3px 13px 3px 8px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  font-size: 14px;
  font-weight: 800;
}
.purse b { font-family: "Baloo 2", sans-serif; font-size: 17px; font-variant-numeric: tabular-nums; }

.choices {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.choice {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .09s ease, box-shadow .09s ease, background .14s ease;
}
.choice:hover { background: var(--paper-warm); }
.choice:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.choice__body { flex: 1; min-width: 0; line-height: 1.2; }
.choice__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 25px;
}
.choice__sub { display: block; color: var(--ink-soft); font-size: 14.5px; font-weight: 700; }
.choice__go {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: var(--ink-soft);
  line-height: 1;
}
.soon {
  padding: 1px 8px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--gold);
  font-family: "Nunito", sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.5;
}

/* A little ladder whose rungs fill with your best climb. */
.choice__ladder {
  flex: 0 0 46px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  width: 46px;
  height: 62px;
  padding: 4px 6px;
  border-left: var(--stroke) solid var(--ink);
  border-right: var(--stroke) solid var(--ink);
  border-radius: 3px;
}
.choice__ladder i {
  height: 7px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: #fff;
}
.choice__ladder i.is-on { background: var(--accent); }
.choice__ladder i.is-top { background: var(--gold); }

.choice__cal {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 62px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 19px 8px 9px;
}
.choice__cal-top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 13px;
  background: var(--accent);
  border-bottom: 2px solid var(--ink);
  border-radius: 5px 5px 0 0;
}
.choice__cal-dot { border-radius: 2px; background: var(--ink-faint); }
.choice__cal-dot.is-on { background: var(--grass); }

/* Three answer buttons, stacked. */
.choice__abc {
  flex: 0 0 46px;
  display: grid;
  align-content: center;
  gap: 5px;
  width: 46px;
  height: 62px;
}
.choice__abc i {
  height: 15px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(90deg, var(--k) 0 13px, #fff 13px);
  box-shadow: 0 2px 0 var(--ink);
}

.menu-foot { display: flex; justify-content: center; gap: 11px; margin-top: 26px; padding-bottom: 6px; }

/* ───────── report a question ───────── */

.report__intro, .report__empty { margin: 0 2px 14px; color: var(--ink-soft); font-size: 14.5px; }
.report__empty[hidden] { display: none; }
.recent { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 10px; }
.recent__item {
  appearance: none;
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 11px 14px;
  text-align: left;
  border: var(--stroke) solid var(--ink);
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--ink);
}
.recent__item:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }
.recent__q { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 16.5px; line-height: 1.2; }
.recent__a { color: var(--ink-soft); font-size: 13px; }
.sheet__q { margin: 0 0 12px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.4; }
.reasons { display: grid; gap: 6px; margin-bottom: 12px; }
.reasons label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 2px solid var(--ink-faint);
  border-radius: 11px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
}
.reasons label:has(input:checked) { border-color: var(--ink); background: var(--paper-warm); }
.reasons input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
#report-note {
  width: 100%;
  margin-bottom: 14px;
  padding: 9px 11px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
}
.card__body { margin: 0 0 12px; color: var(--ink-soft); font-size: 14.5px; }
.sheet__list { margin: 0 0 8px; padding-left: 20px; font-size: 15px; line-height: 1.45; }
.sheet__list li + li { margin-top: 5px; }

/* ───────── how to play ───────── */

.sheet {
  width: min(420px, calc(100vw - 32px));
  padding: 20px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
.sheet::backdrop { background: rgba(43, 33, 66, .45); }
.sheet[open] { animation: rise .3s cubic-bezier(.2, .9, .3, 1.2) both; }
.sheet__title {
  margin: 0 0 8px;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 26px;
}
.sheet__body { margin: 0 0 18px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.45; }
.sheet__actions { display: flex; gap: 10px; justify-content: flex-end; margin: 0; }

/* the first-launch welcome */
.sheet--welcome { text-align: center; }
.welcome__mark { padding-top: 8px; margin-bottom: 18px; }
.sheet__actions--stack { flex-direction: column; gap: 10px; }

/* ───────── first-time tips ─────────
   The screen dims except for a rounded window over the thing the tip is
   about; the bubble sits above or below it. Tapping anywhere moves on. */
.coach { position: fixed; inset: 0; z-index: 20; cursor: pointer; }
.coach[hidden] { display: none; }
.coach__hole {
  position: fixed;
  border-radius: 20px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 200vmax rgba(43, 33, 66, .62);
  pointer-events: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.coach__bubble {
  position: fixed;
  left: 16px; right: 16px;
  max-width: 400px;
  margin: 0 auto;
  padding: 14px 16px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  cursor: default;
  animation: rise .3s cubic-bezier(.2, .9, .3, 1.2) both;
}
.coach__text { margin: 0 0 12px; font-size: 16px; line-height: 1.45; font-weight: 700; }
.coach__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coach__step { color: var(--ink-soft); font-weight: 800; font-size: 14px; }

/* ───────── toast ───────── */

.toast {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: fit-content;
  margin: 0 auto;
  padding: 9px 18px;
  border: var(--stroke) solid var(--ink);
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(43, 33, 66, .35);
  animation: rise .25s ease both;
  z-index: 10;
}
.toast[hidden] { display: none; }

/* ───────── topbar (as in the jar game) ───────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: 0 5px 0 var(--ink);
}
.topbar .btn { padding: 9px 12px; white-space: nowrap; }
.topbar__title { flex: 1; min-width: 0; text-align: center; line-height: 1.15; }
.topbar__title h2 {
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
  white-space: nowrap;
}
.topbar__title span { color: var(--ink-soft); font-size: 13px; }

.topbar__stats { display: flex; gap: 7px; }
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  min-width: 52px;
  padding: 5px 7px;
  border-radius: 11px;
  border: 2px solid var(--ink);
  background: var(--paper-warm);
}
.stat b {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}
.stat small {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.stat.is-bump { animation: bump .36s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ───────── the ladder ─────────
   One pip per rung. Checkpoints are bigger and gold-ringed: a wrong answer
   drops you back to the last one you passed. */

.ladder {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 18px 0 0;
}
.rung {
  flex: 1;
  height: 14px;
  border-radius: 99px;
  border: 2px solid var(--ink);
  background: #fff;
  transition: background .25s ease, transform .25s ease;
}
.rung.is-done { background: var(--accent); }
.rung.is-now {
  height: 20px;
  background: var(--gold);
  animation: glow 1.4s ease-in-out infinite;
}
.rung.is-check {
  flex: 0 0 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-width: var(--stroke);
  background: var(--paper-warm);
  box-shadow: 0 3px 0 var(--ink);
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
.rung.is-check.is-done { background: var(--gold); }
.rung.is-check.is-now { transform: scale(1.12); background: var(--gold); }
.rung.is-fall { animation: fall .6s ease; }
@keyframes glow { 50% { filter: brightness(1.12); } }
@keyframes fall { 0% { background: var(--danger); } 100% { background: #fff; } }

/* ───────── coins ───────── */

.coin {
  display: inline-block;
  width: 15px; height: 15px;
  border-radius: 99px;
  border: 2px solid var(--ink);
  background: radial-gradient(circle at 35% 35%, #fff3b0 0 22%, var(--gold) 24%);
  vertical-align: -1px;
  flex: 0 0 auto;
}
.stat--coins b { display: inline-flex; align-items: center; gap: 4px; }
.stat--coins.is-spend { animation: spend .4s ease; }
@keyframes spend { 30% { transform: translateY(3px); background: #ffd9d9; } }

/* ───────── lifelines ─────────
   Four across, each a little chunky button with its price underneath.
   A used one goes flat and faint; Second chance glows while it's armed. */

.lifelines__note {
  margin: 14px 2px 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.lifelines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.lifelines[hidden] { display: none; }
.lifeline {
  appearance: none;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 6px 4px 7px;
  border: var(--stroke) solid var(--ink);
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  line-height: 1.05;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .09s ease, box-shadow .09s ease, background .14s ease, opacity .2s ease;
}
.lifeline:hover:not(:disabled) { background: var(--paper-warm); }
.lifeline:active:not(:disabled) { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }
.lifeline:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lifeline:disabled { cursor: default; opacity: .45; box-shadow: 0 var(--lift) 0 var(--ink-faint); }
.lifeline__icon { font-size: 17px; font-weight: 800; height: 20px; line-height: 20px; }
.lifeline__name { font-family: "Baloo 2", sans-serif; font-size: 14px; font-weight: 800; white-space: nowrap; }
.lifeline__cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lifeline__cost .coin { width: 12px; height: 12px; }
.lifeline.is-used { opacity: .45; transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }
.lifeline.is-used .lifeline__cost { visibility: hidden; }
.lifeline.is-armed {
  opacity: 1;
  background: var(--gold);
  transform: translateY(var(--lift));
  box-shadow: 0 0 0 var(--ink);
  animation: armed 1.2s ease-in-out infinite;
}
@keyframes armed { 50% { filter: brightness(1.12); } }
.lifeline.is-armed .lifeline__cost { visibility: hidden; }

/* the audience's vote, drawn as a bar along the bottom of each answer */
.answer { position: relative; overflow: hidden; }
.answer__poll {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: rgba(43, 33, 66, .08);
}
.answer__poll i {
  display: block;
  height: 100%;
  width: var(--pct);
  background: var(--accent);
  animation: poll .6s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes poll { from { width: 0; } }
.answer__poll b {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-family: "Baloo 2", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--accent-deep);
}
.answer.is-right .answer__poll b, .answer.is-wrong .answer__poll b { color: #fff; }

/* an answer struck out by Second chance */
.answer.is-struck { text-decoration: line-through; text-decoration-thickness: 3px; }

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

.question {
  margin-top: 18px;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  padding: 14px 16px 20px;
  box-shadow: 0 6px 0 var(--ink);
  text-align: center;
}
.question__tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 4px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.6;
}
.tag--cat { background: var(--paper-warm); }
.tag--cat i {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 99px;
  border: 2px solid var(--ink);
  background: var(--cat, var(--gold));
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}
.tag--diff {
  padding: 3px 11px;
  color: #fff;
  background: var(--diff, var(--easy));
  /* white on yellow-ish fills needs an outline to stay legible */
  text-shadow: 0 1px 0 rgba(43, 33, 66, .35);
}

.question__text {
  margin: 16px 0 2px;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 7vw, 36px);
  line-height: 1.15;
  text-wrap: balance;
}

/* ───────── answers ───────── */

.answers {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.answer {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 14px 8px 8px;
  text-align: left;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .09s ease, box-shadow .09s ease, background .14s ease, opacity .2s ease;
}
.answer:hover:not(:disabled) { background: var(--paper-warm); }
.answer:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.answer:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.answer:disabled { cursor: default; }

.answer__key {
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: var(--stroke) solid var(--ink);
  background: var(--k);
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  box-shadow: 0 3px 0 var(--ink);
}
.answer__text {
  flex: 1;
  min-width: 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
}

/* after answering */
.answer.is-right {
  background: var(--grass);
  color: #fff;
  animation: pop .4s cubic-bezier(.2, .9, .3, 1.4);
}
.answer.is-wrong {
  background: var(--danger);
  color: #fff;
  animation: shake .42s ease;
}
.answer.is-right .answer__key,
.answer.is-wrong .answer__key { background: #fff; color: var(--ink); -webkit-text-stroke: 0; }
.answer.is-gone {
  /* a dashed empty slot, so the two that are left don't jump around */
  border-style: dashed;
  border-color: rgba(43, 33, 66, .35);
  background: rgba(255, 255, 255, .25);
  box-shadow: none;
}
.answer.is-gone > * { visibility: hidden; }
.answer.is-dim { opacity: .45; box-shadow: 0 5px 0 var(--ink-faint); border-color: rgba(43, 33, 66, .5); }

@keyframes pop   { 45% { transform: scale(1.04); } }
@keyframes shake {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* ───────── result card ───────── */

.result {
  margin-top: 14px;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
  box-shadow: 0 5px 0 var(--ink);
  animation: rise .3s cubic-bezier(.2, .9, .3, 1.2) both;
}
.result[hidden] { display: none; }
/* once answered, the lifelines (all spent or switched off by then) and
   their note make way for the verdict */
#screen-quiz.is-answered .lifelines,
#screen-quiz.is-answered .lifelines__note { display: none; }
.result__head { display: flex; align-items: center; gap: 10px; }
.result__mark {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border-radius: 99px;
  border: var(--stroke) solid var(--ink);
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
}
.result.is-right .result__mark { background: var(--grass); }
.result.is-wrong .result__mark { background: var(--danger); }
.result__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
}
.result__next { flex: none; padding: 10px 16px; white-space: nowrap; }
.result__why {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.4;
}
.result__why[hidden] { display: none; }

/* ───────── screens below home ───────── */

.subhead {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 auto 18px;
}
.subhead .btn { padding: 9px 12px; white-space: nowrap; }
.subhead__title { flex: 1; text-align: center; line-height: 1.15; min-width: 0; }
.subhead__title h2 {
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 27px;
}
.subhead__title span { color: var(--ink-soft); font-size: 14px; font-weight: 700; }
/* keeps the heading centred against the back button */
.subhead__balance { flex: 0 0 86px; }

.card {
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 6px 0 var(--ink);
}
.card--single { width: 100%; max-width: 460px; margin: 0 auto; }
.card + .card { margin-top: 18px; }
.card__title {
  margin: 0 0 8px;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
}
.card__title--small { font-size: 20px; }
.card__note { margin: 12px 0 0; color: var(--ink-soft); font-size: 14px; min-height: 1.2em; }
.card__note--centre { text-align: center; }
.card__note:empty { display: none; }

.save-warning {
  max-width: 460px;
  margin: 16px auto 0;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper-warm);
  font-size: 13.5px;
  text-align: center;
}
.save-warning[hidden] { display: none; }

/* ───────── progress bar (daily and quick play) ───────── */

.progress {
  display: flex;
  gap: 5px;
  margin: 18px 0 0;
}
.progress[hidden] { display: none; }
.progress i {
  flex: 1;
  height: 14px;
  border-radius: 99px;
  border: 2px solid var(--ink);
  background: #fff;
}
.progress i.is-right { background: var(--grass); }
.progress i.is-wrong { background: var(--danger); }
.progress i.is-now   { background: var(--gold); height: 18px; margin-top: -2px; }
.ladder[hidden] { display: none; }

/* ───────── marks: a row of right / wrong dots ───────── */

.marks {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
}
.marks li, .marks i {
  display: block;
  width: 30px; height: 30px;
  border-radius: 9px;
  border: var(--stroke) solid var(--ink);
  background: #fff;
  box-shadow: 0 3px 0 var(--ink);
}
.marks .is-right { background: var(--grass); }
.marks .is-wrong { background: var(--danger); }
/* a tick and a cross as well as the colour, for colour-blind players */
.marks li, .marks i {
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
.marks .is-right::after { content: '✓'; }
.marks .is-wrong::after { content: '✕'; }
.marks--mini i { font-size: 13px; -webkit-text-stroke-width: 2px; }
.marks[hidden] { display: none; }
.marks--mini { display: inline-flex; margin: 0; gap: 5px; }
.marks--mini i { width: 22px; height: 22px; border-radius: 7px; border-width: 2px; box-shadow: 0 2px 0 var(--ink); }

/* ───────── results ───────── */

#screen-results.is-active { justify-content: center; }
.finish { text-align: center; }
.finish__mode {
  display: inline-block;
  padding: 2px 12px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--paper-warm);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.finish__score {
  margin: 10px 0 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink);
}
.finish__score span { font-size: 48px; }
.finish__score span:first-of-type { margin: 0 4px 0 8px; }
.finish__line {
  margin: 10px 0 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 22px;
}
.finish__stats { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.finish__stats .stat { min-width: 76px; }
.finish__note { margin: 14px 0 0; color: var(--ink-soft); font-size: 14.5px; }
.finish__note:empty { display: none; }
.finish__actions { display: grid; gap: 12px; margin-top: 18px; }
.finish__actions [hidden] { display: none; }

/* ───────── daily ───────── */

.week {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  text-align: center;
}
.week li { display: grid; justify-items: center; gap: 4px; }
.week small {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.week b {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 44px;
  aspect-ratio: 1;
  border-radius: 11px;
  border: 2px solid var(--ink);
  background: var(--ink-faint);
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.week .is-done b { background: var(--grass); color: #fff; box-shadow: 0 3px 0 var(--ink); }
.week .is-part b { background: var(--paper-warm); }
.week .is-today b { outline: 3px solid var(--gold); outline-offset: 2px; }
.week .is-today:not(.is-done) b { background: #fff; }

.daily-streak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 800;
}
.daily-streak b { font-family: "Baloo 2", sans-serif; font-size: 22px; }
/* a flame, drawn: a teardrop with a hot core */
.flame {
  width: 20px; height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, var(--gold) 0 35%, #ff8700 37%);
  transform: rotate(-8deg);
}
.flame.is-out { background: var(--ink-faint); }

.facts { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 6px; }
.facts li { padding-left: 22px; position: relative; font-size: 15px; }
.facts li::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 11px; height: 11px;
  border-radius: 99px;
  border: 2px solid var(--ink);
  background: var(--gold);
}
.daily-today .marks { justify-content: flex-start; margin-bottom: 4px; }
.daily-today .card__note { margin-bottom: 14px; }

/* ───────── quick play: the dealer, as in the jar game's Random Puzzle ─────────
   A slider rather than five buttons: one row whatever the count, it names
   the setting at full size, and difficulty really is an ordering. */

.setting { margin-bottom: 4px; }
.setting__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.setting__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.setting__name {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
}
.setting__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.setting__slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  border: var(--stroke) solid var(--ink);
  background: linear-gradient(90deg, var(--accent), var(--easy) 25%, var(--normal) 50%, var(--hard) 75%, var(--xhard));
}
.setting__slider::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  border: var(--stroke) solid var(--ink);
  background: linear-gradient(90deg, var(--accent), var(--easy) 25%, var(--normal) 50%, var(--hard) 75%, var(--xhard));
}
.setting__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  border: var(--stroke) solid var(--ink);
  background: var(--gold);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .09s ease;
}
.setting__slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 0 var(--ink);
}
.setting__slider:active::-webkit-slider-thumb { transform: scale(1.08); }
.setting__slider:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 999px; }
/* Each label sits exactly under its stop. A range input's stops run from
   the centre of the thumb at one end to the centre at the other, so the
   label row is inset by half a thumb (13px) on each side and every label
   is centred on its own percentage along it — evenly spaced text would
   drift away from the stops as the slider gets wider, which on an iPad
   it noticeably did. */
.setting__ticks { position: relative; height: 18px; margin: 2px 13px 0; }
.setting__ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
}
.setting__ticks span.is-on { color: var(--ink); font-weight: 800; }

.difficulty__blurb {
  margin: 10px 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  min-height: 3em;    /* two lines always, so the card doesn't jump */
}

.link-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent-deep);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* category chips: on is bright, off is a faded outline */
.cats { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.cats button, .cats i {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 7px;
  border: 2px solid rgba(43, 33, 66, .35);
  border-radius: 99px;
  background: rgba(255, 255, 255, .55);
  color: var(--ink-soft);
  font: inherit;
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .09s ease, box-shadow .09s ease, background .14s ease;
}
.cats button .cats__icon {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 99px;
  border: 2px solid currentColor;
  font-size: 12px;
  line-height: 1;
  opacity: .55;
}
.cats button[aria-pressed="true"], .cats i.is-on {
  border-color: var(--ink);
  background: var(--paper-warm);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.cats button[aria-pressed="true"] .cats__icon { background: var(--cat); border-color: var(--ink); opacity: 1; }
.cats button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.cats button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cats--mini { margin: 0; justify-content: center; }
.cats--mini i { cursor: default; font-size: 12px; padding: 3px 9px; }

.stepper { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 2px 0 16px; }
.stepper__step { min-width: 46px; padding: 8px 0; font-size: 22px; line-height: 1; }
.stepper__count { min-width: 120px; text-align: center; color: var(--ink-soft); font-size: 16px; }
.stepper__count b { color: var(--ink); font-family: "Baloo 2", sans-serif; font-size: 24px; margin-right: 4px; }

.seed { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--ink-soft); font-size: 14px; font-weight: 800; }
.seed input {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  padding: 8px 11px;
}
.seed input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ───────── climb levels: difficulty tabs ───────── */

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 0 0 16px;
}
.tabs button {
  appearance: none;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 7px 4px 6px;
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .09s ease, box-shadow .09s ease, background .14s ease;
}
.tabs button b { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 15px; white-space: nowrap; }
.tabs button small { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabs button:hover { background: var(--paper-warm); }
.tabs button[aria-selected="true"] {
  background: var(--diff);
  color: #fff;
  text-shadow: 0 1px 0 rgba(43, 33, 66, .35);
  transform: translateY(var(--lift));
  box-shadow: 0 0 0 var(--ink);
}
.tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ───────── climb levels: the grid, as in the jar game ───────── */

#screen-levels.is-active { overflow: hidden; }
.level-grid {
  list-style: none;
  margin: 0;
  padding: 2px 2px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.tile {
  width: 100%;
  aspect-ratio: 1 / 0.86;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  background: var(--paper-warm);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .09s ease, box-shadow .09s ease, background .14s ease;
}
.tile:hover:not(:disabled) { background: #ffe8c6; }
.tile:active:not(:disabled) { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }
.tile:disabled {
  cursor: default;
  color: rgba(43, 33, 66, .45);
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 var(--lift) 0 var(--ink-faint);
}
.tile.is-next { background: var(--gold); }
.tile:not(:disabled):not(.is-next):not(.is-going) .tile__no { color: var(--ink); }
.tile.is-going { background: var(--gold); outline: 3px dashed var(--ink); outline-offset: 2px; }
.tile__no { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 20px; line-height: 1; }
.tile__stars { font-size: 11px; letter-spacing: 1px; line-height: 1; color: #e09a00; }
.tile__stars .off { color: rgba(43, 33, 66, .2); }
.tile:disabled .tile__stars { visibility: hidden; }

.finish__stars { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.finish__stars[hidden] { display: none; }
.finish__stars i {
  width: 52px; height: 52px;
  background: var(--ink-faint);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.finish__stars i.is-on { background: var(--gold); animation: pop .4s cubic-bezier(.2, .9, .3, 1.4) both; }
.finish__stars i:nth-child(2).is-on { animation-delay: .15s; }
.finish__stars i:nth-child(3).is-on { animation-delay: .3s; }
.finish__score[hidden] { display: none; }

/* ───────── settings ───────── */

.toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  cursor: pointer;
}
.toggle + .toggle { border-top: 2px dashed var(--ink-faint); }
.toggle[hidden] { display: none; }
.toggle__text { flex: 1; line-height: 1.25; }
.toggle__text b { display: block; font-family: "Baloo 2", sans-serif; font-size: 19px; font-weight: 800; }
.toggle__text small { color: var(--ink-soft); font-size: 13.5px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__switch {
  position: relative;
  flex: 0 0 56px;
  height: 32px;
  border-radius: 99px;
  border: var(--stroke) solid var(--ink);
  background: var(--ink-faint);
  transition: background .18s ease;
}
.toggle__switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 99px;
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.3);
}
.toggle input:checked + .toggle__switch { background: var(--grass); }
.toggle input:checked + .toggle__switch::after { transform: translateX(24px); }
.toggle input:focus-visible + .toggle__switch { outline: 3px solid var(--accent); outline-offset: 2px; }

.tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 6px 0 16px;
  text-align: center;
}
.tally div {
  padding: 8px 4px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--paper-warm);
}
.tally dt { color: var(--ink-soft); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tally dd { margin: 0; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 22px; line-height: 1.1; }
.toggle.is-unavailable { cursor: default; }
.toggle.is-unavailable .toggle__switch { opacity: .4; }
.time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 2px;
  border-top: 2px dashed var(--ink-faint);
  font-weight: 800;
}
.time-row[hidden] { display: none; }
.time-row select {
  appearance: none;
  padding: 7px 34px 7px 12px;
  border: var(--stroke) solid var(--ink);
  border-radius: 11px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b2142' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: var(--ink);
  font: inherit;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.time-row select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.version { margin: 18px 0 0; text-align: center; color: var(--ink-soft); font-size: 13px; }

/* ───────── how to play ───────── */

.guide { display: grid; gap: 18px; width: 100%; max-width: 520px; margin: 0 auto; padding-bottom: 10px; }
.guide .card + .card { margin-top: 0; }
.guide__card p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.45; }
.guide__card p:last-child { margin-bottom: 0; }
.guide__art {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  margin: -4px -4px 12px;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-low));
  border: 2px solid var(--ink);
}
.guide__art--answer { flex-direction: column; align-items: stretch; }
.mini-answer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
}
.mini-answer i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: var(--k, #fff);
  color: #fff;
  font-style: normal;
  font-weight: 800;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
.mini-answer.is-right { background: var(--grass); color: #fff; }
.mini-answer.is-right i { background: #fff; color: var(--ink); -webkit-text-stroke: 0; }
.mini-ladder { display: flex; align-items: center; gap: 3px; width: 100%; }
.mini-ladder .rung { height: 11px; }
.mini-ladder .rung.is-check { flex-basis: 21px; height: 21px; font-size: 10px; box-shadow: 0 2px 0 var(--ink); }
.lifeline--mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  font-family: "Baloo 2", sans-serif;
}
kbd {
  padding: 0 5px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--paper-warm);
  font: 800 13px "Nunito", sans-serif;
}
.pay { border-collapse: collapse; margin: 4px 0 10px; }
.pay td { padding: 3px 14px 3px 0; font-weight: 800; }
.pay td:last-child { font-family: "Baloo 2", sans-serif; font-size: 17px; white-space: nowrap; }
#tips-again { margin-top: 4px; }
.pill {
  display: inline-block;
  padding: 1px 10px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--diff);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(43, 33, 66, .35);
}

/* ───────── small phones ───────── */

@media (max-width: 380px) {
  .tabs { gap: 5px; }
  .tabs button b { font-size: 13px; }
  .subhead__title h2 { font-size: 22px; }
  .subhead__balance { flex-basis: 70px; }
  .finish__score { font-size: 60px; }
  .choice { padding: 13px 14px; gap: 12px; }
  .choice__name { font-size: 22px; }
  .choice__sub { font-size: 13.5px; }
  .topbar { padding: 8px 10px; gap: 8px; }
  .topbar .btn { padding: 8px 10px; font-size: 15px; }
  .topbar__title h2 { font-size: 17px; }
  .stat { min-width: 46px; padding: 4px 6px; }
  .stat b { font-size: 18px; }
  .answer__text { font-size: 18px; }
  .rung.is-check { flex-basis: 22px; height: 22px; font-size: 11px; }
  .ladder { gap: 2px; }
  .lifelines { gap: 6px; }
  .lifeline__name { font-size: 12.5px; }
}

/* ───────── short screens ─────────
   An iPhone SE, or a bigger iPhone once the notch, home bar or Safari's
   bars take their share. Everything on the question screen tightens up so
   the question, the lifelines and all four answers fit without scrolling. */

@media (max-height: 780px) {
  .app {
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .topbar { padding: 7px 10px; }
  .topbar .btn { padding: 7px 10px; }
  .stat { padding: 3px 6px; }
  .stat b { font-size: 18px; }
  .ladder { margin-top: 12px; }
  .progress { margin-top: 12px; }
  .question { margin-top: 12px; padding: 10px 14px 14px; }
  .question__text { margin-top: 10px; font-size: clamp(22px, 6.2vw, 30px); }
  .lifelines__note { margin-top: 10px; font-size: 13px; }
  .lifelines { margin-top: 6px; }
  .lifeline { padding: 4px 4px 5px; }
  .lifeline__icon { font-size: 15px; height: 17px; line-height: 17px; }
  .result { margin-top: 12px; }
  .answers { margin-top: 12px; gap: 9px; }
  .answer { padding: 6px 12px 6px 6px; gap: 12px; }
  .answer__key { flex-basis: 34px; width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
  .answer__text { font-size: 18px; }
  .subhead { margin-bottom: 12px; }
}

@media (max-height: 690px) {
  .tag { font-size: 11px; padding-top: 1px; padding-bottom: 1px; }
  .tag--cat i { width: 20px; height: 20px; font-size: 11px; }
  .question__text { margin-top: 8px; font-size: clamp(20px, 5.8vw, 26px); }
  .lifeline__icon { display: none; }
  .answers { gap: 8px; }
  .answer { padding-top: 5px; padding-bottom: 5px; }
  .answer__key { flex-basis: 32px; width: 32px; height: 32px; }
  .answer__text { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}