/* Gospel Sparks: styles for the web lessons, family weeks, ideas and games (pages built by scripts/build-site.py).
   Loaded after site.css, which provides the tokens, header, footer and buttons. */

:root {
  --rose: linear-gradient(135deg, #ff8599 0%, #db4d85 100%);
  --k-hook: #f98c26; --k-story: #8c59f2; --k-wiggle: #2fae5c; --k-object: #1a9ed9; --k-scripture: #c28a07;
  --k-game: #f2477a; --k-discuss: #338cf2; --k-testimony: #9966cc; --k-other: #737f9e;
  --good: #1f9d55;
  --tint-bg: color-mix(in srgb, var(--spark) 10%, var(--card));
}
@media (prefers-color-scheme: dark) {
  :root { --good: #4fd18a; --tint-bg: color-mix(in srgb, var(--spark) 12%, var(--card)); }
}

.t-sunrise { --hero: var(--sunrise); --tint: #e8453f; }
.t-ocean { --hero: var(--ocean); --tint: #2150c8; }
.t-meadow { --hero: var(--meadow); --tint: #0f8c6b; }
.t-grape { --hero: var(--grape); --tint: #5a3cc4; }
.t-berry { --hero: var(--berry); --tint: #b32973; }
.t-gold { --hero: var(--gold); --tint: #c45f08; }
.t-sky { --hero: var(--sky); --tint: #2c68d6; }
.t-ember { --hero: var(--ember); --tint: #c72438; }
.t-mint { --hero: var(--mint); --tint: #0f8a8e; }
.t-rose { --hero: var(--rose); --tint: #c63d78; }
@media (prefers-color-scheme: dark) {
  .t-sunrise { --tint: #ff8a7a; } .t-ocean { --tint: #6fb4ff; } .t-meadow { --tint: #5fd6a6; } .t-grape { --tint: #b89bff; }
  .t-berry { --tint: #ff7ab8; } .t-gold { --tint: #ffc04d; } .t-sky { --tint: #7fc0ff; } .t-ember { --tint: #ff8a6b; }
  .t-mint { --tint: #5fe0cf; } .t-rose { --tint: #ff8fb8; }
}
body:not([class*="t-"]) { --hero: var(--sunrise); --tint: var(--spark-deep); }

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; overflow: hidden; color: #fff; padding: 36px 0 34px;
  background: radial-gradient(900px 360px at 90% 120%, rgba(33, 31, 61, 0.28), transparent 60%), var(--hero, var(--sunrise));
  text-shadow: 0 1px 12px rgba(40, 10, 30, 0.18);
}
.page-hero .wrap { max-width: 900px; }
.page-hero h1 { font-size: clamp(2rem, 7vw, 3.1rem); margin: 6px 0 8px; overflow-wrap: anywhere; }
.page-hero .sub { font-weight: 700; font-size: clamp(1.02rem, 2.6vw, 1.2rem); margin: 0 0 14px; opacity: 0.97; max-width: 40em; }
.page-hero .hero-emoji { font-size: 3.4rem; line-height: 1; display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-weight: 800; font-size: 0.92rem; margin-bottom: 16px; opacity: 0.95; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: 0.7; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.meta-row li, .pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.4); font-weight: 800; font-size: 0.88rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero-actions .btn { padding: 11px 18px; font-size: 0.98rem; }
.btn-glass { background: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 520px) {
  .page-hero { padding: 22px 0 24px; }
  .page-hero .hero-emoji { font-size: 2.6rem; }
  .crumbs { margin-bottom: 10px; font-size: 0.86rem; }
  .meta-row { gap: 6px; margin-bottom: 12px; }
  .meta-row li { font-size: 0.82rem; padding: 4px 10px; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { padding: 9px 14px; font-size: 0.92rem; }
}

/* ---------- Layout ---------- */
.content { max-width: 900px; margin: 0 auto; padding: 28px 16px 64px; }
.content > * + * { margin-top: 22px; }
.content section { padding: 0; }
.card {
  background: var(--card); border-radius: 22px; padding: 20px; box-shadow: var(--shadow);
  overflow-wrap: break-word;
}
.card > :last-child { margin-bottom: 0; }
.sec-title { display: flex; align-items: center; gap: 10px; font-size: clamp(1.3rem, 4.4vw, 1.6rem); margin: 0 0 12px; scroll-margin-top: 120px; }
.sec-title .e { font-size: 1.4em; line-height: 1; }
.sec-title .aside { margin-left: auto; font-size: 0.9rem; font-weight: 800; color: var(--soft); letter-spacing: 0; white-space: nowrap; }
.muted { color: var(--soft); }
.small { font-size: 0.92rem; }
.lead { font-size: 1.1rem; font-weight: 600; }
.content p { margin: 0 0 0.8em; }
.content h3 { font-size: 1.15rem; margin: 0 0 6px; }

.banner {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 20px;
  background: color-mix(in srgb, #ff9d2e 16%, var(--card)); font-weight: 700;
}
.banner .e { font-size: 1.5rem; line-height: 1.2; }
.banner p { margin: 0; }

.big-idea .label { font-weight: 900; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tint); }
.big-idea .idea-text { font-size: clamp(1.2rem, 4vw, 1.45rem); font-weight: 800; line-height: 1.35; margin: 6px 0 10px; }
.big-idea .ican { display: flex; gap: 10px; color: var(--soft); font-weight: 700; margin: 0; }

.link-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.link-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--card);
  box-shadow: var(--shadow); text-decoration: none; color: var(--text);
}
.link-card:hover { box-shadow: var(--shadow-lg); }
.link-card .e { font-size: 1.7rem; line-height: 1; flex: none; }
.link-card strong { display: block; font-weight: 900; line-height: 1.25; }
.link-card span.t { display: block; color: var(--soft); font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.link-card .arrow { margin-left: auto; color: var(--tint); font-weight: 900; flex: none; }

.five {
  display: flex; gap: 12px; padding: 16px 18px; border-radius: 20px;
  background: color-mix(in srgb, #ffd23f 22%, var(--card)); border: 1px solid color-mix(in srgb, #ffc733 55%, transparent);
}
.five .e { font-size: 1.9rem; line-height: 1; }
.five p { margin: 0; }

/* Collapsible cards */
details.fold { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 0 20px; }
details.fold > summary {
  list-style: none; cursor: pointer; padding: 16px 32px 16px 0; font-weight: 900; font-size: 1.12rem; position: relative;
  display: flex; align-items: center; gap: 10px;
}
details.fold > summary::-webkit-details-marker, details.alt > summary::-webkit-details-marker, details.ans > summary::-webkit-details-marker { display: none; }
details.fold > summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: color-mix(in srgb, var(--spark) 18%, transparent); color: var(--spark-deep); font-weight: 900;
}
details.fold[open] > summary::after { content: "–"; }
details.fold > .body { padding: 0 0 18px; }

/* Lists */
ol.num { list-style: none; counter-reset: n; padding: 0; margin: 0; display: grid; gap: 10px; }
ol.num > li { counter-increment: n; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
ol.num > li::before {
  content: counter(n); width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 900; color: var(--c, var(--tint)); background: color-mix(in srgb, var(--c, var(--tint)) 15%, transparent);
}
.say {
  background: color-mix(in srgb, var(--c, var(--tint)) 8%, transparent); border-radius: 12px; padding: 8px 12px;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-style: italic; font-size: 1.05rem;
}
.say .lbl { display: block; font-family: var(--font); font-style: normal; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; color: var(--c, var(--tint)); }
b.cue { font-weight: 900; color: var(--c, var(--tint)); }
ul.dots { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.dots li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
ul.dots li > .e { text-align: center; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.checklist label { display: flex; gap: 12px; align-items: flex-start; padding: 6px 2px; cursor: pointer; }
.checklist input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--spark); }
.checklist input:checked + span { text-decoration: line-through; color: var(--soft); }
.tag { display: inline-block; margin-left: 6px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; }
.subhead { font-weight: 900; color: var(--soft); font-size: 0.95rem; margin: 18px 0 8px; }

/* Plan steps */
.plan { display: grid; gap: 14px; }
.step { position: relative; background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 18px 18px 18px 22px; }
.step::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 5px; border-radius: 0 4px 4px 0; background: var(--c); }
.k-hook { --c: var(--k-hook); } .k-story { --c: var(--k-story); } .k-wiggle { --c: var(--k-wiggle); } .k-object { --c: var(--k-object); }
.k-scripture { --c: var(--k-scripture); } .k-game { --c: var(--k-game); } .k-discuss { --c: var(--k-discuss); }
.k-testimony { --c: var(--k-testimony); } .k-craft, .k-song { --c: var(--k-other); }
.step-head { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; margin-bottom: 8px; }
.step-head .e { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; background: color-mix(in srgb, var(--c) 15%, transparent); }
.step-head .kind { display: block; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); }
.step-head h3 { margin: 0; font-size: 1.18rem; line-height: 1.25; }
.step-head .pills { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mins, .bonus { font-size: 0.78rem; font-weight: 900; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.mins { color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.bonus { color: #fff; background: #f28a1a; letter-spacing: 0.05em; }
.step.is-bonus { background: color-mix(in srgb, #f28a1a 5%, var(--card)); }
.purpose { font-style: italic; color: var(--soft); font-size: 0.98rem; margin: 0 0 12px; }
.screen-line { font-size: 0.9rem; color: var(--soft); font-weight: 700; margin: 12px 0 0; }
.qbox { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--c) 8%, transparent); }
.qbox .lbl { font-weight: 900; font-size: 0.85rem; color: var(--c); margin-bottom: 6px; }
.wild { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, #ff9d2e 12%, transparent); font-weight: 600; font-size: 0.97rem; }
.tool { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; font-size: 0.95rem; }
.tool .btn { padding: 8px 14px; font-size: 0.92rem; background: var(--c); color: #fff; }
details.alt { margin-top: 12px; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--good) 55%, transparent); padding: 0 14px; }
details.alt > summary { list-style: none; cursor: pointer; padding: 10px 0; font-weight: 900; color: var(--good); }
details.alt > summary::before { content: "▸ "; }
details.alt[open] > summary::before { content: "▾ "; }
details.alt > .body { padding: 0 0 14px; }
details.alt h4 { margin: 0 0 8px; font-size: 1.02rem; }

/* Story */
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 14px 0; padding: 0; list-style: none; }
.roles li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--tint) 8%, transparent); }
.roles .e { font-size: 1.7rem; line-height: 1.1; }
.roles strong { display: block; }
.roles span.t { color: var(--soft); font-size: 0.93rem; line-height: 1.4; display: block; }
.scenes { list-style: none; counter-reset: sc; padding: 0; margin: 0; display: grid; gap: 14px; }
.scenes li { counter-increment: sc; display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.scenes li::before { content: counter(sc); width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: #fff; font-weight: 900; font-size: 0.85rem; display: grid; place-items: center; }
.scenes .cap { font-weight: 900; }
.scenes .act { color: var(--tint); font-weight: 700; font-size: 0.97rem; }
.scenes p { margin: 2px 0; }

/* Verses */
.ref { font-weight: 900; color: var(--tint); text-decoration: none; }
a.ref:hover { text-decoration: underline; }
.verse { margin: 0; }
.verse blockquote { margin: 6px 0; font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: 1.12rem; line-height: 1.5; }
.verse.key blockquote { font-size: clamp(1.3rem, 4.6vw, 1.6rem); }
.verse figcaption.kidw { color: var(--soft); margin: 0; text-align: left; font-size: 1rem; font-weight: 600; }
.motions { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--tint) 8%, transparent); }
.verse + .verse { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }

/* Words + quiz */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--tint) 10%, transparent); font-weight: 700; font-size: 0.95rem; }
ol.quiz { padding-left: 1.4em; margin: 0; display: grid; gap: 12px; }
ol.quiz > li { font-weight: 800; }
ol.quiz .choices { font-weight: 600; color: var(--soft); margin: 2px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; padding: 0; }
details.ans { display: inline-block; font-weight: 600; }
details.ans > summary { list-style: none; cursor: pointer; color: var(--link); font-weight: 800; font-size: 0.92rem; }
details.ans > p { margin: 4px 0 0; color: var(--good); font-weight: 800; }
details.ans > p span { color: var(--soft); font-weight: 600; }

/* Conference, challenge */
.quote blockquote { margin: 0 0 8px; font-family: Georgia, "Iowan Old Style", serif; font-size: 1.12rem; line-height: 1.5; }
.quote .who { font-weight: 800; color: var(--soft); font-size: 0.95rem; margin: 0 0 4px; }
.quote + .quote { margin-top: 14px; }
.challenge {
  display: flex; gap: 14px; padding: 22px; border-radius: 24px; color: #fff; background: var(--hero, var(--sunrise)); box-shadow: var(--shadow);
  text-shadow: 0 1px 10px rgba(40, 10, 30, 0.2);
}
.challenge .e { font-size: 2.6rem; line-height: 1; }
.challenge .lbl { font-weight: 900; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.challenge h3 { font-size: 1.45rem; margin: 2px 0 4px; }
.challenge p { margin: 0; font-weight: 700; }
.challenge.family { background: var(--grape); }
.notes-lines { height: 110px; margin-top: 10px; border-radius: 12px; background: repeating-linear-gradient(transparent 0 34px, var(--line) 34px 35px); }

.songs { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.songs li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.songs .book { color: var(--soft); font-weight: 700; font-size: 0.9rem; }

/* Prev / next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pager a { display: block; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--text); min-width: 0; }
.pager a small { display: block; color: var(--soft); font-weight: 800; font-size: 0.82rem; }
.pager a strong { display: block; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.pager .next { text-align: right; grid-column: 2; }
.center { text-align: center; }

/* Lesson lists */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.picker a { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--text); height: 100%; }
.picker a:hover { box-shadow: var(--shadow-lg); }
.picker .e { font-size: 2.2rem; line-height: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--bg-alt); flex: none; }
.picker strong { display: block; font-size: 1.15rem; font-weight: 900; }
.picker span.t { display: block; color: var(--soft); font-weight: 700; font-size: 0.9rem; line-height: 1.35; }
@media (max-width: 520px) {
  .picker { grid-template-columns: 1fr 1fr; gap: 10px; }
  .picker a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .picker .e { width: 44px; height: 44px; font-size: 1.7rem; border-radius: 12px; }
  .picker strong { font-size: 1.02rem; }
  .step { padding: 16px 14px 16px 18px; }
  .card, .day-body { padding-left: 16px; padding-right: 16px; }
}
.picker a.is-picked { box-shadow: 0 0 0 3px var(--spark), var(--shadow); }
.month { font-size: 1.05rem; font-weight: 900; color: var(--soft); margin: 26px 0 10px; letter-spacing: 0.02em; }
.month:first-child { margin-top: 0; }
.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rows a { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--text); }
.rows a:hover { box-shadow: var(--shadow-lg); }
.rows .e { font-size: 1.8rem; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-alt); }
.rows .when { display: block; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
.rows strong { display: block; font-weight: 900; line-height: 1.25; }
.rows .blk { display: block; color: var(--soft); font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.rows .go { color: var(--spark-deep); font-weight: 900; }
.rows li.fast a { background: color-mix(in srgb, #945cf2 9%, var(--card)); }
.flag { display: inline-block; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #fff; background: #7a4fe0; margin-right: 4px; vertical-align: 1px; }
.flag.now { background: var(--spark-deep); }
.rows li.is-now a { box-shadow: 0 0 0 3px var(--spark), var(--shadow); }

/* Family */
.age-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.age-filter .lbl { font-weight: 900; margin-right: 4px; }
.age-filter button {
  font: inherit; font-weight: 800; font-size: 0.95rem; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px;
  background: var(--card); color: var(--text); box-shadow: var(--shadow);
}
.age-filter button[aria-pressed="true"] { background: var(--spark); color: #fff; }
.days { display: grid; gap: 16px; }
.day { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.day-head { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; padding: 18px 18px 0; }
.day-head .e { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: color-mix(in srgb, var(--tint) 14%, transparent); }
.day-head .when { font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.day-head h3 { margin: 0; font-size: 1.25rem; }
.day-body { padding: 14px 18px 18px; }
.kidscreen { border-radius: 18px; padding: 14px 16px; color: #fff; background: var(--hero); margin-bottom: 14px; text-shadow: 0 1px 8px rgba(40, 10, 30, 0.2); }
.kidscreen strong { display: block; font-size: 1.2rem; font-weight: 900; line-height: 1.25; }
.kidscreen span { display: block; font-weight: 700; opacity: 0.95; }
.readit { font-weight: 800; margin: 0 0 10px; }
.tips { display: grid; gap: 8px; margin-top: 14px; }
.tip { padding: 10px 14px; border-radius: 14px; background: var(--bg-alt); }
.tip .lbl { display: block; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.04em; color: var(--soft); }
.tip.grown { background: color-mix(in srgb, #945cf2 10%, var(--card)); }
.sticker { font-weight: 800; color: var(--soft); font-size: 0.92rem; margin-top: 12px; }
.class-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.class-row a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--bg-alt); text-decoration: none; color: var(--text); font-weight: 800; font-size: 0.93rem; }
.class-row a:hover { background: color-mix(in srgb, var(--spark) 18%, var(--bg-alt)); }
[data-band][hidden] { display: none !important; }

/* Ideas */
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.idea { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 18px; scroll-margin-top: 120px; overflow-wrap: break-word; }
.idea h3 { display: flex; gap: 10px; align-items: flex-start; font-size: 1.15rem; margin: 0 0 8px; }
.idea h3 .e { font-size: 1.5rem; line-height: 1.1; }
.idea .meta { color: var(--soft); font-weight: 800; font-size: 0.85rem; margin: -2px 0 10px; }
.idea .tie { margin-top: 10px; color: var(--soft); font-size: 0.95rem; }
.idea.flash { box-shadow: 0 0 0 4px var(--spark), var(--shadow-lg); }
.callresp { font-size: 1.25rem; font-weight: 900; line-height: 1.3; margin: 0 0 6px; }
.callresp .you { color: var(--tint); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.guide-article { scroll-margin-top: 120px; }
.guide-article h4 { font-size: 1.05rem; margin: 14px 0 4px; }
.guide-article ul { padding-left: 1.2em; margin: 6px 0 0; }
.guide-article li { margin-bottom: 4px; }

/* Play page */
.play-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.content section.play-card, .play-card { border-radius: 24px; padding: 22px; color: #fff; box-shadow: var(--shadow); text-shadow: 0 1px 8px rgba(40, 10, 30, 0.2); }
.play-card h2 { font-size: 1.5rem; margin: 6px 0; }
.play-card p { font-weight: 700; margin: 0 0 14px; }
.play-card .e { font-size: 2.6rem; line-height: 1; }
.play-card .btn { padding: 12px 20px; }
.opts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 14px; font-weight: 800; font-size: 0.95rem; }
.opts select { font: inherit; font-weight: 800; border-radius: 10px; border: 0; padding: 4px 8px; }
.opts label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.stage[hidden] { display: none; }
.stage {
  position: fixed; inset: 0; z-index: 200; color: #fff; background: var(--hero, var(--sunrise));
  display: flex; flex-direction: column; padding: max(12px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  text-shadow: 0 2px 14px rgba(40, 10, 30, 0.25); overscroll-behavior: contain;
}
.stage-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 900; font-size: 1.2rem; }
.stage-top > span:nth-child(2) { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-top > button { min-width: 44px; min-height: 44px; }
.teams { flex-wrap: nowrap; gap: 6px; }
.team { padding: 4px 10px; font-size: 0.95rem; }
.stage-top button, .stage .round {
  font: inherit; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 8px 16px; font-weight: 900;
}
.timer { font-variant-numeric: tabular-nums; font-size: 1.6rem; }
.timer.low { color: #fff27a; }
.stage-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 0; overflow: auto; }
.card-emoji { font-size: clamp(4rem, 22vmin, 10rem); line-height: 1; }
.card-word { font-size: clamp(2.4rem, 11vmin, 6rem); font-weight: 900; line-height: 1.05; overflow-wrap: anywhere; }
.card-hint { font-size: clamp(1.1rem, 4.6vmin, 2rem); font-weight: 700; opacity: 0.95; max-width: 30em; }
.stage-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stage-bottom button {
  font: inherit; font-size: clamp(1.2rem, 5vmin, 2rem); font-weight: 900; border: 0; border-radius: 22px; padding: 18px 10px; cursor: pointer; color: #fff;
}
.b-got { background: #1fa65a; box-shadow: 0 8px 0 #137a40; }
.b-pass { background: rgba(0, 0, 0, 0.28); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3); }
.stage-bottom button:active { transform: translateY(4px); box-shadow: none; }
.flash-good { animation: fg 0.35s ease; } .flash-pass { animation: fp 0.35s ease; }
@keyframes fg { from { box-shadow: inset 0 0 0 100vmax rgba(31, 166, 90, 0.7); } to { box-shadow: inset 0 0 0 100vmax rgba(31, 166, 90, 0); } }
@keyframes fp { from { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.4); } to { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .flash-good, .flash-pass { animation: none; } }
.results { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 40em; }
.results li { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-weight: 800; font-size: 0.95rem; }
.results li.miss { opacity: 0.6; text-decoration: line-through; }
.score-big { font-size: clamp(3rem, 16vmin, 7rem); font-weight: 900; line-height: 1; }
.q-text { font-size: clamp(1.4rem, 5.4vmin, 2.6rem); font-weight: 900; line-height: 1.2; max-width: 22em; }
.q-choices { display: grid; gap: 10px; width: 100%; max-width: 640px; margin-top: 10px; }
.q-choices button {
  font: inherit; font-size: clamp(1.05rem, 4.2vmin, 1.6rem); font-weight: 800; text-align: left; border: 0; border-radius: 18px; padding: 14px 16px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); cursor: pointer; text-shadow: none;
}
.q-choices button.right { background: #1fa65a; color: #fff; }
.q-choices button.wrong { background: rgba(0, 0, 0, 0.35); color: #fff; }
.q-why { font-weight: 800; max-width: 34em; }
.teams { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.team { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-weight: 900; }
.team.on { background: #fff; color: var(--ink); text-shadow: none; }
.noscroll { overflow: hidden; }

/* This week */
.tw-result[hidden] { display: none; }
.tw-card { border-radius: 26px; padding: 22px; color: #fff; background: var(--hero, var(--sunrise)); box-shadow: var(--shadow-lg); text-shadow: 0 1px 10px rgba(40, 10, 30, 0.2); }
.tw-card .when { font-weight: 900; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; }
.tw-card h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); margin: 6px 0 4px; }
.tw-card p { font-weight: 700; margin: 0 0 14px; }
.tw-card .e { font-size: 3rem; line-height: 1; }

/* ---------- Print ---------- */
@media print {
  :root { --bg: #fff; --bg-alt: #f6f3ee; --card: #fff; --text: #111; --soft: #444; --line: #ccc; --shadow: none; --shadow-lg: none; --link: #111; }
  @page { margin: 14mm 12mm; }
  body { font-size: 11.5pt; line-height: 1.45; background: #fff; color: #111; }
  .site-header, .site-footer .footer-top, .skip, .hero-actions, .no-print, .pager, .tool .btn, .age-filter, .stage, .crumbs { display: none !important; }
  .page-hero { background: none !important; color: #111; padding: 0 0 8px; text-shadow: none; border-bottom: 2px solid #111; }
  .page-hero .meta-row li, .pill { background: none; border-color: #999; color: #111; }
  .page-hero h1 { font-size: 22pt; }
  .content { padding: 10px 0 0; max-width: none; }
  .content > * + * { margin-top: 12px; }
  .card, .step, details.fold, .day, .idea { box-shadow: none; border: 1px solid #bbb; border-radius: 10px; padding: 10px 12px; }
  .step, .scenes li, .roles li, ol.quiz > li, .verse, .quote, .idea, .tip { break-inside: avoid; }
  .sec-title { break-after: avoid; font-size: 14pt; margin-bottom: 6px; }
  .challenge, .kidscreen, .tw-card, .play-card { background: none !important; color: #111; border: 2px solid #111; text-shadow: none; }
  details.fold > summary::after { display: none; }
  details.alt { border-color: #777; }
  a { color: #111; text-decoration: none; }
  .say { background: none; border-left: 3px solid #888; border-radius: 0; }
  .notes-lines { background: repeating-linear-gradient(transparent 0 30px, #bbb 30px 31px); }
  .site-footer { border: 0; padding: 12px 0 0; font-size: 8.5pt; }
}