/* ==========================================================================
   Snowball.

   Built to WCAG 2.2 AA like the rest of the studio's work, which for a
   children's product is worth naming: fully keyboard playable, nothing
   conveyed by color alone, readable at 200% zoom, no timers, and motion that
   honors the reduced-motion preference.

   Type is deliberately large. This is read by ten-year-olds, sometimes on a
   tablet held at arm's length.
   ========================================================================== */

:root {
  --cream: #fdf9f0;
  --ink: #1f2a44;
  --ink-soft: #55607a;
  --sky: #7fb2d4;
  --honey: #e0a33e;
  --sage: #8fae86;
  --line: #e3dbcb;
  --white: #fffdf8;
  --radius: 1rem;
  --tap: 2.75rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: 0.5rem;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 0.875rem;
  border-radius: 0 0 8px 8px;
  z-index: 10;
}

.skip-link:focus {
  inset-block-start: 0;
}

/* ── Stage ───────────────────────────────────────────────────────────────── */

.stage {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem 1rem 2rem;
}

.card {
  inline-size: 100%;
  max-inline-size: 42rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem 2rem;
  box-shadow: 0 6px 24px rgb(31 42 68 / 6%);
}

.card--title,
.card--payoff,
.card--teach {
  text-align: center;
}

h1 {
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.15;
  margin: 0.75rem 0 0.5rem;
}

h2.ask {
  font-size: 1.1875rem;
  margin: 1.5rem 0 0.625rem;
}

.tagline {
  font-size: 1.1875rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.season-no {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.art {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 0.75rem;
  margin: 0.75rem 0 1rem;
  background: var(--cream);
}

.art--wide {
  margin-block-start: 0;
}

.story {
  font-size: 1.125rem;
  margin: 1rem 0;
}

/* ── Scoreboard ──────────────────────────────────────────────────────────── */

.score {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0 0 0.375rem;
}

.score > div {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.5rem 0.625rem;
  text-align: center;
  background: var(--cream);
}

.score__jar {
  border-color: var(--honey);
  border-width: 2px;
}

.score dt {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.score dd {
  margin: 0.125rem 0 0;
  font-size: 1.375rem;
  font-weight: 700;
}

.jar-rule {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-align: center;
}

.coin {
  color: var(--honey);
}

/* ── Beats ───────────────────────────────────────────────────────────────── */

.beats {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.beat {
  border-inline-start: 4px solid var(--sky);
  background: var(--cream);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.5rem 0.75rem;
}

.beat--grow {
  border-inline-start-color: var(--honey);
  font-weight: 700;
}

.beat--event {
  border-inline-start-color: var(--sage);
}

/* ── Choices ─────────────────────────────────────────────────────────────── */

.choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.choice {
  inline-size: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
  min-block-size: var(--tap);
  cursor: pointer;
  display: grid;
  gap: 0.1875rem;
}

.choice:hover:not(:disabled) {
  border-color: var(--sky);
  background: var(--cream);
}

.choice:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.choice__label {
  font-weight: 700;
  font-size: 1.0625rem;
}

.choice__detail,
.choice__no {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.choice__no {
  font-style: italic;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  min-block-size: var(--tap);
  cursor: pointer;
  margin-block-start: 0.5rem;
}

.btn:hover {
  background: #2c3a5c;
}

.btn--big {
  font-size: 1.1875rem;
  padding: 0.875rem 2.25rem;
}

.listen {
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.125rem 0.75rem;
  margin-inline-start: 0.375rem;
  min-block-size: 2rem;
  cursor: pointer;
  white-space: nowrap;
}

.listen:hover,
.listen.is-playing {
  border-color: var(--sky);
  color: var(--ink);
}

/* ── Payoff ──────────────────────────────────────────────────────────────── */

.big-line {
  font-size: 1.25rem;
  line-height: 1.45;
  background: var(--cream);
  border: 2px solid var(--honey);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  margin: 1rem 0;
}

.lines {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  gap: 0.375rem;
  color: var(--ink-soft);
}

.long-game {
  font-size: 1.0625rem;
  border-block-start: 1px solid var(--line);
  padding-block-start: 1rem;
  margin-block-start: 1.25rem;
  text-align: start;
}

.fine {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-block-start: 1rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot {
  text-align: center;
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.foot p {
  margin: 0.25rem 0;
}

.foot__brand {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

a {
  color: #2b5c86;
}

/* ── Prose pages ─────────────────────────────────────────────────────────── */

.prose {
  max-inline-size: 40rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.prose h2 {
  margin-block-start: 1.75rem;
  font-size: 1.25rem;
}

.prose .lede {
  font-size: 1.125rem;
}

.prose ul {
  padding-inline-start: 1.2rem;
}

.prose li {
  margin-block-end: 0.375rem;
}

.callout {
  border: 2px solid var(--sage);
  background: var(--white);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

/* ── Unlock ──────────────────────────────────────────────────────────────── */

.unlock {
  max-inline-size: 24rem;
  margin: 4rem auto;
  text-align: center;
  padding: 0 1rem;
}

.unlock input {
  font: inherit;
  font-size: 1.125rem;
  padding: 0.625rem 0.875rem;
  min-block-size: var(--tap);
  inline-size: 100%;
  border: 2px solid var(--line);
  border-radius: 0.75rem;
  text-align: center;
  background: var(--white);
  color: var(--ink);
}

.unlock .bad {
  color: #9a3412;
  font-weight: 700;
}


/* ── The rolling snowball, and the jar's pulse ────────────────────────────────
   Both are decorative: the picture already says "snowball" and the jar's
   number already says how much it grew. Motion only agrees with what is
   written, so it can be switched off without anything being lost — which is
   exactly what the reduced-motion rule at the end of this file does.

   The ball follows the track already drawn in the title picture: it starts
   small at the bottom of the winding path, rolls up the hill growing as it
   goes, and settles into the spot where the illustrated snowball sits — then
   fades, so the drawn one takes over. The numbers below are read off that
   picture, which is why they are not round. */

.hero {
  position: relative;
  overflow: clip;
  border-radius: 0.75rem;
  margin-block-end: 1rem;
}

.hero > .art {
  margin-block-end: 0;
}

.hero__ball {
  position: absolute;
  inset-block-start: 39%;
  inset-inline-start: 62.5%;
  inline-size: 9.3%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff 0 52%, #eef2f5 78%, #dde6ee 100%);
  transform-origin: 50% 50%;
  animation: roll-up-the-hill 2.4s cubic-bezier(0.3, 0.55, 0.35, 1) 250ms both;
}

@keyframes roll-up-the-hill {
  0% {
    transform: translate(-510%, 360%) scale(0.22) rotate(-620deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  82% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0;
  }
}

/* The jar, when it has just produced coins nobody worked for. */
.score__jar.is-growing {
  animation: jar-pulse 900ms ease-out 1;
}

@keyframes jar-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.09); background: #fdf3dd; }
  100% { transform: scale(1); }
}

/* ── Sound toggle ────────────────────────────────────────────────────────── */

.sound-toggle {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1875rem 0.75rem;
  min-block-size: 2rem;
  cursor: pointer;
  white-space: nowrap;
}

.sound-toggle:hover {
  border-color: var(--sky);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}