/* The page's look (LLD §3.2, §15.5; NFR-06, NFR-08). Colour tokens on :root, with a dark set for dark-mode devices.
   Sizes scale with the screen so the play screen reads from a couch: the pose name >= 48 px and buttons >= 64 px at
   1280x720. */
:root {
  --bg: #f5f1e8;
  --surface: #fffdf8;
  --fg: #1f2c26;
  --muted: #56625b;
  --accent: #36705f;
  --accent-fg: #ffffff;
  --accent-soft: #dcece4;
  --line: #e2dacb;
  --ok: #36705f;
  --star: #d99a12;
  --star-soft: #fbefcf;
  --circle: #a8d8c6;
  --circle-ring: #6fb39b;
  --paused: #d9d3c6;
  --focus: #285f9c;
  --radius: 18px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121a17;
    --surface: #1b2621;
    --fg: #e8efea;
    --muted: #a5b3ab;
    --accent: #7cc4ab;
    --accent-fg: #0d1f18;
    --accent-soft: #223a31;
    --line: #2d3b35;
    --ok: #7cc4ab;
    --star: #f2c14e;
    --star-soft: #3a321b;
    --circle: #2e6656;
    --circle-ring: #7cc4ab;
    --paused: #36423c;
    --focus: #8ab8f0;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: clamp(16px, 0.9vw + 8px, 26px); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.5 ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 70rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5rem; }
h1 { font-size: 3rem; letter-spacing: -0.01em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 0.75rem; }

:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

/* ---- Buttons: big targets (NFR-06) ---- */
button {
  min-height: 3.4rem;
  padding: 0.6rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { opacity: 0.55; cursor: default; }
.btn.big { min-height: 4.2rem; padding: 0.8rem 2.6rem; font-size: 1.6rem; }
.btn.quiet { background: var(--accent-soft); color: var(--fg); }
.btn.link {
  min-height: 3rem;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  padding: 0.4rem 0.2rem;
  font-size: 1rem;
}

.note { color: var(--muted); font-size: 0.95rem; }
.message:empty { display: none; }
.message {
  background: var(--star-soft);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
  font-weight: 600;
}

/* ---- Start screen (FR-10) ---- */
.hero { text-align: center; margin: 0.5rem 0 1.5rem; }
.tagline { font-size: 1.35rem; color: var(--muted); }

.seq-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.seq-card.free {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
  align-items: center;
  border-color: var(--circle-ring);
  margin-bottom: 1rem;
}
.seq-card.free h2 { font-size: 2.4rem; }
.seq-card .blurb { font-size: 1.15rem; }
.seq-go { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.seq-go .note { margin: 0; }

.animals { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.animal { width: 3.2rem; height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; }
.emoji { font-size: 2.6rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.icon-svg { width: 100%; height: 100%; }

#more, #star-chart, #grownups { margin-top: 2rem; }
.seq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.seq-grid .seq-card { display: flex; flex-direction: column; gap: 0.25rem; position: relative; }
.seq-grid .seq-card .blurb { flex: 1; color: var(--muted); font-size: 1rem; }
.seq-grid .lock .emoji { font-size: 1.6rem; }
.seq-grid .seq-card[data-locked="false"] .lock { display: none; }
.seq-grid .unlock-cta, .seq-grid .start-seq { width: 100%; font-size: 1.05rem; } /* Start: an unlocked card's own (FR-23) */

#chart-total { font-size: 1.2rem; }
.week { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; padding: 0; margin: 0; }
.week li {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 0.5rem 0.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.week li.today { border-color: var(--circle-ring); }
.week .dow { color: var(--muted); font-size: 0.9rem; }
.week .n { font-size: 1.35rem; font-weight: 700; color: var(--muted); }
.week .n.has { color: var(--star); }

#grownups {
  border-top: 2px solid var(--line);
  padding-top: 1.5rem;
  color: var(--fg);
}
#grownups > p { max-width: 48rem; }

/* The template's unlock area (FR-02..FR-08), inside "For grown-ups" */
#unlock {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-width: 40rem;
  margin-top: 1rem;
}
#unlock-status { margin: 0 0 1rem; color: var(--muted); }
#unlock-status[data-state="unlocked"] { color: var(--ok); font-weight: 700; }
#unlock-message { min-height: 1.5em; margin: 0.75rem 0 0; color: var(--muted); }
label { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.25rem; }
.row { display: flex; gap: 0.5rem; }
input {
  flex: 1;
  min-width: 0;
  min-height: 3.4rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
}

/* ---- Loading and done ---- */
.screen.center { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; }
.big-text { font-size: 2rem; font-weight: 700; }
.loading-figure { width: 8rem; color: var(--circle-ring); }
.done-title { font-size: 3.2rem; }
.star-row { display: flex; gap: 0.5rem; font-size: 4rem; line-height: 1; }
.star-row .on { color: var(--star); }
.star-row .off { color: var(--paused); }
.row-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ---- Play (FR-13..FR-17) ---- */
#screen-play {
  position: relative;
  min-height: calc(100vh - 4.5rem);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.75rem;
  outline: none;
}
.play-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.step-label { color: var(--muted); font-size: 1.1rem; margin: 0; }
.steps { list-style: none; display: flex; gap: 0.6rem; margin: 0; padding: 0; }
.steps li {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 3px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--star);
  font-size: 1.4rem;
  line-height: 1;
}
.steps li[data-state="current"] { border-color: var(--circle-ring); background: var(--accent-soft); }
.steps li[data-state="star"] { border-color: var(--star); background: var(--star-soft); }
.steps li[data-state="skipped"] { opacity: 0.5; }

.play-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 1.5rem;
  align-items: center;
}
.pose-card { text-align: center; }
.pose-icon { height: 4.2rem; display: flex; justify-content: center; }
.pose-icon .emoji { font-size: 4rem; }
.pose-icon .icon-svg { width: 4.2rem; }
#pose-name { font-size: 3rem; margin: 0.25rem 0; }
#pose-say { font-size: 1.35rem; color: var(--fg); max-width: 18em; margin: 0 auto 0.5rem; }
.pose-figure { height: min(32vh, 15rem); color: var(--accent); }
.pose-figure .figure { height: 100%; width: auto; }
#screen-play[data-step="statue"] .pose-figure { color: #8e9891; }

.breath { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.circle {
  --size: 0;
  position: relative;
  width: min(48vh, 30vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle::before { /* the full-breath ring, so the kid sees how big it will get */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px dashed var(--circle-ring);
  opacity: 0.5;
}
.circle-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--accent-soft), var(--circle));
  transform: scale(calc(0.42 + 0.58 * var(--size)));
}
.circle[data-phase="paused"] .circle-fill, .circle[data-phase="idle"] .circle-fill { background: var(--paused); }
.circle[data-phase="star"] .circle-fill { background: radial-gradient(circle at 40% 35%, #fff4d2, var(--star)); }
#breath-text { position: relative; font-size: 1.7rem; font-weight: 700; text-align: center; padding: 0 1rem; }
.circle[data-phase="star"] #breath-text { font-size: 5rem; color: var(--surface); }

.dots { list-style: none; display: flex; gap: 0.75rem; margin: 0; padding: 0; }
.dots li { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 3px solid var(--circle-ring); }
.dots li[data-done="true"] { background: var(--circle-ring); }

.side { display: flex; justify-content: center; }
.preview { position: relative; width: 100%; max-width: 24rem; border-radius: var(--radius); overflow: hidden; background: #000; }
.preview canvas.feed { display: block; width: 100%; height: auto; }
.preview .skeleton { position: absolute; inset: 0; width: 100%; height: 100%; }
.btn.hold {
  width: min(16rem, 26vw);
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 2.2rem;
  background: var(--accent-soft);
  color: var(--fg);
  border: 4px solid var(--circle-ring);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.btn.hold:active { background: var(--circle); }

.hint { text-align: center; font-size: 1.5rem; font-weight: 600; min-height: 1.5em; margin: 0; }
.play-actions { display: flex; justify-content: center; gap: 1rem; }

.burst {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 4px solid var(--star);
  border-radius: 2rem;
  padding: 1rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2.4rem;
  font-weight: 800;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12);
  animation: pop 0.5s ease-out;
}
.burst-star { color: var(--star); font-size: 4rem; line-height: 1; }
@keyframes pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---- Narrow screens: stack ---- */
@media (max-width: 760px) {
  h1 { font-size: 2.4rem; }
  .seq-card.free { grid-template-columns: 1fr; }
  .seq-grid { grid-template-columns: repeat(2, 1fr); }
  .week { gap: 0.25rem; }
  .play-grid { grid-template-columns: 1fr; gap: 1rem; }
  .circle { width: min(70vw, 40vh); }
  .pose-figure { height: 18vh; }
  .pose-icon { height: 3rem; }
  .pose-icon .emoji { font-size: 2.8rem; }
  #pose-name { font-size: 2.6rem; }
  .btn.hold { width: 10rem; }
  .play-top { flex-direction: column; align-items: flex-start; }
}

/* ---- Buying and restoring (FR-05, FR-08, FR-19): inside the unlock area ---- */
a { color: var(--accent); }
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
}
a.btn.big { min-height: 4.2rem; padding: 0.8rem 2.6rem; font-size: 1.6rem; }
#buy { margin: 1rem 0 1.25rem; }
.sale-soon { color: var(--muted); font-weight: 700; } /* FR-29: nothing on sale on this host yet */
.seq-grid .sale-soon { margin: 0.5rem 0 0; }
#restore { margin-top: 1rem; border-top: 2px solid var(--line); padding-top: 0.75rem; }
#restore summary { cursor: pointer; color: var(--muted); font-size: 0.95rem; min-height: 2.2rem; }
#restore form { margin-top: 0.75rem; }
#restore-message { min-height: 1.5em; margin: 0.5rem 0 0; color: var(--muted); font-size: 0.95rem; }
#restore-email { text-transform: none; font-family: inherit; }

/* ---- checkout.html (FR-05, LLD §17) ---- */
#checkout {
  max-width: 36rem;
  margin: 3rem auto;
  background: var(--surface);
  border: 2px solid var(--circle-ring);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
}
#checkout h1 { margin-bottom: 0.25rem; }
#checkout-lead { font-size: 1.2rem; color: var(--muted); }
#checkout-test { color: var(--muted); font-size: 0.95rem; background: var(--star-soft); border-radius: 14px; padding: 0.6rem 0.9rem; }
#checkout-btn { margin: 0.75rem 0; }
#checkout-message { min-height: 1.5em; color: var(--muted); }
#checkout-back { display: inline-block; margin-top: 0.5rem; }

/* ---- The price in "For grown-ups" and on the checkout (FR-26, FR-28, LLD §18) ---- */
#price { margin: 0.25rem 0 1rem; }
#price .price { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem; }
#price .includes { margin: 0; padding-left: 1.25rem; }
#price .includes li { margin-bottom: 0.25rem; }
#checkout-price { font-size: 1.15rem; font-weight: 700; }
#checkout-refund { color: var(--muted); font-size: 0.95rem; }

/* ---- The legal pages and the footer on every page (FR-25, FR-27, LLD §18) ---- */
.site-header { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1rem 0; }
.brand-link { display: inline-block; padding: 0.4rem 0; font-size: 1.6rem; font-weight: 800; color: var(--fg); text-decoration: none; }
main.prose { max-width: 44rem; padding-top: 0.75rem; }
.prose h1 { font-size: 2.4rem; }
.prose h2 { font-size: 1.3rem; margin-top: 2rem; }
.prose ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.updated { color: var(--muted); font-size: 0.95rem; }
.site-footer {
  max-width: 70rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
  border-top: 2px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}
.site-footer nav a { display: inline-block; padding: 0.4rem 0.2rem; }
.site-footer p { margin: 0.25rem 0 0; }

/* NFR-08: no decorative motion. The circle still changes size: it's the pacer, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .burst { animation: none; }
}