/* ─────────────────────────────────────────────────────────────────
   C.U.L.T. SPARKS · pre-7 entry tier
   Warm sunrise palette · 2D · audio-first · big-button affordances
   ───────────────────────────────────────────────────────────────── */

:root {
  --spark-coral:    #FFB17A;
  --spark-peach:    #FFCFA8;
  --spark-gold:     #FFD96A;
  --spark-orange:   #F4A261;
  --spark-cream:    #FFF8F0;
  --spark-cream-2:  #FFEED9;
  --spark-ink:      #3D2818;
  --spark-ink-soft: #6B4628;
  --spark-rose:     #FF8C8C;
  --spark-mint:     #9DDFB5;
  --spark-sky:      #A8D8E8;
  --spark-violet:   #C9A8E8;
  --spark-shadow:   0 6px 0 rgba(61, 40, 24, 0.15);
  --spark-shadow-h: 0 10px 0 rgba(61, 40, 24, 0.18);
  --spark-radius:   28px;
  --spark-radius-s: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Quicksand', 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  background: var(--spark-cream);
  color: var(--spark-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  line-height: 1.5;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ── Sun (the Sparks sun, warmer than Kids blue / Teens green / Adult orange) ── */
.sp-sun-wrap {
  display: flex;
  justify-content: center;
  margin: 32px 0 8px;
}
.sp-sun {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFE4A0 0%, var(--spark-gold) 30%, var(--spark-coral) 70%, var(--spark-orange) 100%);
  box-shadow:
    0 0 0 12px rgba(255, 217, 106, 0.25),
    0 0 0 28px rgba(255, 207, 168, 0.20),
    0 0 60px rgba(244, 162, 97, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 32px;
  color: var(--spark-ink);
  letter-spacing: 0.08em;
  position: relative;
}
.sp-sun::before {
  content: '';
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 106, 0.20) 0%, transparent 60%);
  z-index: -1;
}

/* ── Page wrapper ── */
.sp-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* ── Masthead ── */
.sp-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
  background: var(--spark-cream-2);
  border-radius: var(--spark-radius);
  border: 3px solid var(--spark-peach);
  box-shadow: var(--spark-shadow);
  margin-bottom: 24px;
}
.sp-masthead__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
  color: var(--spark-ink);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ── The Reversed-C wordmark (family crest, Sparks coral-gold) ── */
.sp-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sp-wordmark__cult {
  display: inline-flex;
  align-items: baseline;
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--spark-ink);
}
.sp-wordmark__tier {
  display: inline-flex;
  align-items: baseline;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.sp-wordmark__divider {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: var(--spark-orange);
  opacity: 0.4;
  margin: 0 8px;
}
.sp-cult-c {
  display: inline-block;
  vertical-align: -0.30em;
  width: 1.15em;
  height: 1.42em;
  filter: drop-shadow(0 0 5px rgba(244, 162, 97, 0.7));
}
.sp-cult-c--big {
  width: 1.22em;
  height: 1.52em;
  vertical-align: -0.36em;
}
@media (max-width: 600px) {
  .sp-wordmark__cult { font-size: 15px; }
  .sp-wordmark__tier { font-size: 24px; }
}
.sp-masthead__nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-masthead__link {
  padding: 8px 16px;
  background: white;
  border-radius: 999px;
  text-decoration: none;
  color: var(--spark-ink);
  font-weight: 600;
  font-size: 14px;
  border: 2px solid var(--spark-peach);
  transition: transform 0.15s, background 0.15s;
}
.sp-masthead__link:hover { background: var(--spark-cream-2); transform: translateY(-1px); }
.sp-masthead__link--ladder {
  background: var(--spark-gold);
  border-color: var(--spark-coral);
}

/* ── Hero ── */
.sp-hero {
  text-align: center;
  padding: 32px 20px;
}
.sp-hero h1 {
  font-size: clamp(36px, 6vw, 60px);
  margin: 16px 0 8px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--spark-ink);
}
.sp-hero__sub {
  font-size: clamp(18px, 2.5vw, 22px);
  color: var(--spark-ink-soft);
  max-width: 640px;
  margin: 0 auto 24px;
}

/* ── Big audio button (the universal listen-to-me trigger) ── */
.sp-listen {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--spark-coral);
  color: var(--spark-ink);
  border: 3px solid var(--spark-orange);
  box-shadow: var(--spark-shadow);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.sp-listen:hover, .sp-listen:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--spark-shadow-h);
  outline: none;
}
.sp-listen:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(61,40,24,0.15);
}
.sp-listen.is-playing {
  animation: sp-pulse 0.9s ease-in-out infinite;
  background: var(--spark-gold);
}
@keyframes sp-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.sp-listen__icon {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Pull-quote (parent-facing on landing) ── */
.sp-pullquote {
  background: white;
  border-radius: var(--spark-radius);
  padding: 28px 32px;
  margin: 28px auto;
  border-left: 8px solid var(--spark-coral);
  box-shadow: var(--spark-shadow);
  max-width: 720px;
}
.sp-pullquote__text {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  color: var(--spark-ink);
  font-style: italic;
  margin: 0 0 8px;
  line-height: 1.4;
}
.sp-pullquote__cite {
  font-size: 13px;
  color: var(--spark-ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── World grid (the 10 starter planets, big 2D buttons) ── */
.sp-worlds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.sp-world {
  background: white;
  border-radius: var(--spark-radius);
  padding: 24px 18px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--spark-ink);
  box-shadow: var(--spark-shadow);
  border: 3px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sp-world:hover, .sp-world:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--spark-shadow-h);
  border-color: var(--spark-coral);
  outline: none;
}
.sp-world__icon {
  width: 110px; height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  margin-bottom: 4px;
  border: 4px solid white;
  box-shadow: 0 0 0 4px rgba(255,177,122,0.15);
}
.sp-world__name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.sp-world__hint {
  font-size: 13px;
  color: var(--spark-ink-soft);
  font-weight: 500;
}
.sp-world.is-locked {
  opacity: 0.45;
  pointer-events: none;
  position: relative;
}
.sp-world.is-locked::after {
  content: '🔒';
  position: absolute;
  top: 12px; right: 12px;
  font-size: 22px;
}

/* World icon palettes (one per starter world) */
.sp-icon--listen     { background: linear-gradient(135deg, #C9A8E8, #9DDFB5); }
.sp-icon--feel       { background: linear-gradient(135deg, #FF8C8C, #FFD96A); }
.sp-icon--music      { background: linear-gradient(135deg, #FFD96A, #FFB17A); }
.sp-icon--read       { background: linear-gradient(135deg, #A8D8E8, #C9A8E8); }
.sp-icon--companion  { background: linear-gradient(135deg, #9DDFB5, #FFCFA8); }
.sp-icon--family     { background: linear-gradient(135deg, #FFCFA8, #FF8C8C); }
.sp-icon--safe       { background: linear-gradient(135deg, #A8D8E8, #FFD96A); }
.sp-icon--share      { background: linear-gradient(135deg, #9DDFB5, #A8D8E8); }
.sp-icon--ask        { background: linear-gradient(135deg, #C9A8E8, #FF8C8C); }
.sp-icon--health     { background: linear-gradient(135deg, #FFB17A, #9DDFB5); }

/* ── World page · hero ── */
.sp-world-hero {
  background: white;
  border-radius: var(--spark-radius);
  padding: 32px 28px;
  text-align: center;
  box-shadow: var(--spark-shadow);
  margin-bottom: 24px;
  border: 3px solid var(--spark-peach);
}
.sp-world-hero__icon {
  width: 140px; height: 140px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  margin: 0 auto 12px;
  border: 5px solid white;
  box-shadow: 0 0 0 6px rgba(255,177,122,0.18);
}
.sp-world-hero h1 {
  font-size: clamp(36px, 5vw, 52px);
  margin: 8px 0;
  font-weight: 800;
}
.sp-world-hero__sub {
  font-size: 18px;
  color: var(--spark-ink-soft);
  margin: 0 0 16px;
}

/* ── Activity card (the unit of every world's interactive content) ── */
.sp-activity {
  background: white;
  border-radius: var(--spark-radius);
  padding: 24px 20px;
  margin: 20px 0;
  box-shadow: var(--spark-shadow);
  border: 3px solid var(--spark-peach);
}
.sp-activity__h {
  font-size: 24px;
  margin: 0 0 6px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-activity__sub {
  margin: 0 0 16px;
  color: var(--spark-ink-soft);
  font-size: 15px;
}

/* ── Picture-word match grid (the dominant interaction pattern) ── */
.sp-match {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin: 12px 0;
}
.sp-match__tile {
  aspect-ratio: 1;
  background: var(--spark-cream-2);
  border-radius: var(--spark-radius-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  user-select: none;
  position: relative;
}
.sp-match__tile:hover { transform: scale(1.04); border-color: var(--spark-coral); }
.sp-match__tile.is-correct {
  background: var(--spark-mint);
  border-color: #4FAA72;
  animation: sp-correct 0.5s ease;
}
.sp-match__tile.is-wrong {
  background: #FFD0D0;
  border-color: var(--spark-rose);
  animation: sp-shake 0.4s ease;
}
.sp-match__label {
  font-size: 14px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--spark-ink);
}
@keyframes sp-correct {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes sp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ── Tap-to-speak word tiles ── */
.sp-words {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 12px 0;
}
.sp-word {
  background: var(--spark-cream-2);
  border-radius: var(--spark-radius-s);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  font-weight: 700;
  font-size: 18px;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sp-word:hover { transform: scale(1.04); border-color: var(--spark-coral); }
.sp-word.is-speaking { background: var(--spark-gold); border-color: var(--spark-orange); }
.sp-word__icon { font-size: 44px; line-height: 1; }
.sp-word__label { font-size: 16px; }

/* ── Big-bottom-button (back to worlds) ── */
.sp-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--spark-coral);
  border: 3px solid var(--spark-orange);
  border-radius: 999px;
  color: var(--spark-ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  box-shadow: var(--spark-shadow);
  margin: 32px auto;
}
.sp-back:hover { transform: translateY(-2px); box-shadow: var(--spark-shadow-h); }

/* ── Footer ── */
.sp-footer {
  text-align: center;
  padding: 24px 16px;
  font-size: 12px;
  color: var(--spark-ink-soft);
  margin-top: 40px;
  border-top: 2px dashed rgba(61, 40, 24, 0.15);
}
.sp-footer__leash {
  display: block;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  color: var(--spark-ink);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.sp-footer__row { display: block; margin-top: 4px; }

/* ── Reward strip (after activity completion) ── */
.sp-reward {
  background: linear-gradient(135deg, var(--spark-gold), var(--spark-coral));
  border-radius: var(--spark-radius);
  padding: 20px;
  text-align: center;
  margin: 20px 0;
  font-weight: 800;
  font-size: 20px;
  display: none;
  border: 3px solid white;
  box-shadow: var(--spark-shadow);
}
.sp-reward.is-on { display: block; animation: sp-correct 0.6s ease; }

/* ── Parent control (the leash UI) ── */
.sp-leash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.sp-leash-item {
  background: white;
  border-radius: var(--spark-radius-s);
  padding: 14px;
  border: 3px solid var(--spark-peach);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sp-leash-item__label {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-toggle {
  width: 52px; height: 28px;
  background: #ddd;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  border: 2px solid #ccc;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.sp-toggle::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  background: white;
  border-radius: 50%;
  top: 1px; left: 1px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sp-toggle.is-on { background: var(--spark-mint); border-color: #4FAA72; }
.sp-toggle.is-on::after { left: 25px; }

/* ── Mobile tightening ── */
@media (max-width: 600px) {
  body { font-size: 17px; }
  .sp-page { padding: 16px 14px 60px; }
  .sp-masthead { padding: 12px 16px; flex-direction: column; align-items: stretch; text-align: center; }
  .sp-masthead__nav { justify-content: center; }
  .sp-sun { width: 160px; height: 160px; font-size: 26px; }
  .sp-world__icon { width: 88px; height: 88px; font-size: 44px; }
  .sp-world-hero__icon { width: 110px; height: 110px; font-size: 56px; }
}