@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@500;600;700;800;900&display=swap');

:root {
  --blue-950:#06376f;
  --blue-900:#07488f;
  --blue-700:#096ac7;
  --blue-500:#1f9af0;
  --sky:#eaf8ff;
  --red:#db3b2f;
  --green:#4aa912;
  --green-dark:#318006;
  --yellow:#ffd51f;
  --orange:#ff8b21;
  --ink:#17324d;
  --muted:#587085;
  --paper:#ffffff;
  --cream:#fff8df;
  --shadow:0 16px 40px rgba(4,60,112,.16);
  --radius:24px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(31,154,240,.10), transparent 32rem),
    linear-gradient(#f8fdff, #eef9f1);
  font-family:"Nunito", system-ui, sans-serif;
  line-height:1.55;
}
button, input { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; display:block; }
.skip-link {
  position:absolute; left:-9999px; top:0;
  padding:.8rem 1rem; background:#fff; color:#000; z-index:9999;
}
.skip-link:focus { left:1rem; top:1rem; }

.site-header {
  position:sticky; top:0; z-index:100;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:1.3rem;
  padding:.65rem clamp(1rem, 3vw, 3rem);
  color:#fff;
  background:linear-gradient(135deg, #07519b, #062e68);
  box-shadow:0 6px 22px rgba(0,0,0,.18);
}
.brand { display:flex; align-items:center; gap:.65rem; min-width:225px; }
.brand-mark {
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  font-family:"Baloo 2"; font-size:2rem; font-weight:900;
  color:#fff; background:#1789e9; border:4px solid #fff;
  box-shadow:0 4px 0 #f2b414;
}
.eyebrow, .brand-title { margin:0; line-height:1; }
.eyebrow { font-weight:800; font-size:.78rem; }
.brand-title { font-family:"Baloo 2"; font-weight:900; font-size:1.35rem; }
nav { display:flex; justify-content:center; gap:.3rem; flex-wrap:wrap; }
nav a {
  padding:.7rem .9rem; border-radius:12px;
  color:#fff; text-decoration:none; font-weight:900; font-size:.92rem;
}
nav a:hover, nav a.active { background:#fff; color:var(--blue-900); }
.header-badge {
  padding:.65rem .95rem; border-radius:16px;
  background:linear-gradient(135deg, #0b579e, #03275e);
  border:2px solid rgba(255,255,255,.32); font-weight:900; white-space:nowrap;
}
.header-badge span { color:var(--yellow); }

.hero {
  max-width:1500px; margin:1.2rem auto 0; padding:clamp(1rem, 3vw, 2.5rem);
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);
  gap:2rem; align-items:center;
}
.hero-copy {
  padding:clamp(1.2rem, 3vw, 2.4rem);
  background:rgba(255,255,255,.94); border:3px solid #ccecff; border-radius:30px;
  box-shadow:var(--shadow);
}
.lesson-number {
  display:inline-block; margin:0 0 .55rem; padding:.35rem .75rem;
  border-radius:999px; color:#fff; background:var(--red); font-weight:900;
}
h1,h2,h3 { font-family:"Baloo 2", sans-serif; line-height:1.08; }
h1 {
  margin:.1rem 0 .7rem; color:var(--blue-900);
  font-size:clamp(2.6rem, 6vw, 5.2rem); letter-spacing:-.04em;
}
.hero-intro { font-size:clamp(1.05rem, 1.7vw, 1.3rem); font-weight:700; color:#385a72; }
.hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin:1.3rem 0; }
.primary-button, .secondary-button {
  border:0; border-radius:14px; padding:.95rem 1.3rem; font-weight:900;
  box-shadow:0 5px 0 rgba(0,0,0,.18); transition:.18s transform, .18s filter;
}
.primary-button { color:#fff; background:linear-gradient(#65c719, #379707); }
.secondary-button { color:#fff; background:linear-gradient(#178fe8, #0759aa); }
.primary-button:hover, .secondary-button:hover { transform:translateY(-2px); filter:saturate(1.12); }
.primary-button:active, .secondary-button:active { transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.2); }
.promise-strip {
  display:flex; justify-content:center; gap:1.3rem; flex-wrap:wrap;
  padding:.8rem 1rem; border-radius:16px; background:#fff9d8; font-weight:900;
}
.hero-visual { position:relative; min-width:0; }
.electric-city {
  position:relative; overflow:hidden; border-radius:30px;
  border:5px solid #fff; box-shadow:var(--shadow); background:#9edcff;
}
.electric-city svg { display:block; width:100%; height:auto; }
.photo-card, .sparky-card {
  position:absolute; display:flex; align-items:center; gap:.65rem;
  padding:.55rem .75rem; background:rgba(255,255,255,.96);
  border:3px solid var(--blue-700); border-radius:18px; box-shadow:0 10px 20px rgba(0,0,0,.16);
}
.photo-card { left:1rem; bottom:1rem; }
.photo-card img { width:68px; height:68px; border-radius:50%; object-fit:cover; object-position:50% 18%; border:3px solid var(--yellow); }
.photo-card strong, .sparky-card strong { display:block; color:var(--blue-900); font-family:"Baloo 2"; font-size:1.15rem; }
.photo-card span, .sparky-card span { display:block; font-size:.75rem; font-weight:800; color:var(--muted); }
.sparky-card { right:1rem; top:1rem; max-width:230px; }
.sparky-face { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:var(--yellow); font-size:2rem; border:3px solid #b77700; }

.progress-section {
  max-width:1400px; margin:0 auto 2rem; padding:1rem 1.2rem;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  border-radius:20px; background:#fff; box-shadow:var(--shadow);
}
.progress-copy strong, .progress-copy span { display:block; }
.progress-copy strong { color:var(--blue-900); }
.progress-copy span { color:var(--muted); font-size:.9rem; font-weight:800; }
.progress-track { height:17px; overflow:hidden; border-radius:999px; background:#dbeaf4; }
.progress-track div { width:0; height:100%; background:linear-gradient(90deg, #54b913, #ffd51f); transition:width .45s ease; }
.stars { color:#f0b400; font-size:1.6rem; letter-spacing:.2rem; white-space:nowrap; }

.lesson-section { max-width:1400px; margin:0 auto; padding:clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2.2rem); }
.section-heading { max-width:780px; margin:0 auto 2rem; text-align:center; }
.section-kicker {
  margin:0 0 .35rem; color:var(--red); text-transform:uppercase;
  font-size:.82rem; letter-spacing:.13em; font-weight:900;
}
.section-heading h2, .challenge-card h2, .completion-card h2 {
  margin:.2rem 0 .7rem; color:var(--blue-900); font-size:clamp(2rem, 4vw, 3.2rem);
}
.section-heading p { margin:0; color:var(--muted); font-size:1.08rem; font-weight:700; }

.story-grid, .parent-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.story-card, .parent-grid article {
  padding:1.4rem; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow);
  border:3px solid #e2f2fb;
}
.story-card:nth-child(2) { border-color:#ffe0ad; }
.story-card:nth-child(3) { border-color:#d9f2c4; }
.story-icon { font-size:3rem; }
.story-card h3, .parent-grid h3 { margin:.6rem 0 .45rem; color:var(--blue-900); font-size:1.45rem; }
.story-card p, .parent-grid p { margin:0; color:var(--muted); font-weight:700; }

.rules-section { border-radius:40px; background:linear-gradient(135deg, #e8f7ff, #f7ffeb); }
.rules-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.rule-card {
  position:relative; min-height:280px; padding:1.3rem 1rem 1rem;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:4px solid #cce9f8; border-radius:24px; background:#fff; color:var(--ink);
  box-shadow:0 10px 24px rgba(0,70,120,.10); transition:.2s;
}
.rule-card:hover { transform:translateY(-5px); border-color:#68bee9; }
.rule-card.completed { border-color:#66bd1a; background:#f5ffea; }
.rule-number {
  position:absolute; top:.7rem; left:.7rem; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%; color:#fff; background:var(--blue-700); font-weight:900;
}
.rule-icon { font-size:3.4rem; margin-top:.5rem; }
.rule-card strong { margin:.5rem 0; color:var(--blue-900); font-family:"Baloo 2"; font-size:1.35rem; line-height:1.1; }
.rule-card small { color:var(--muted); font-size:.95rem; font-weight:700; }
.rule-check { margin-top:auto; padding:.35rem .7rem; border-radius:999px; color:#fff; background:#8da1ae; font-size:.82rem; font-weight:900; }
.rule-card.completed .rule-check { background:var(--green); }
.activity-feedback { min-height:1.6rem; text-align:center; font-weight:900; color:var(--green-dark); }

.hazard-game {
  position:relative; max-width:1050px; margin:auto; overflow:hidden;
  border-radius:30px; border:5px solid #fff; box-shadow:var(--shadow); background:#fff;
}
.hazard-game svg { display:block; width:100%; }
.hotspot {
  position:absolute; width:52px; height:52px; border-radius:50%;
  border:5px solid #fff; background:rgba(255,72,51,.55);
  box-shadow:0 0 0 0 rgba(255,61,39,.65);
  animation:pulse 1.5s infinite;
}
.hotspot.found { background:#5bc21b; animation:none; }
.hotspot.found::after { content:"✓"; color:#fff; font-size:1.5rem; font-weight:900; }
.h1 { left:10%; top:61%; }
.h2 { left:44%; top:78%; }
.h3 { left:80%; top:75%; }
.h4 { left:63%; top:78%; }
@keyframes pulse { 70% { box-shadow:0 0 0 18px rgba(255,61,39,0); } 100% { box-shadow:0 0 0 0 rgba(255,61,39,0); } }
.hazard-counter {
  position:absolute; right:1rem; bottom:1rem; padding:.7rem 1rem;
  border-radius:14px; color:#fff; background:rgba(4,55,111,.93); font-weight:900;
}

.choice-card { max-width:900px; margin:auto; padding:1.4rem; border-radius:26px; background:#fff; box-shadow:var(--shadow); }
.choice-scenario { display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:20px; background:#eef8ff; }
.choice-emoji { font-size:4rem; }
.choice-scenario h3 { margin:0; color:var(--blue-900); font-size:1.65rem; }
.choice-scenario p { margin:.3rem 0 0; font-weight:800; color:var(--muted); }
.choice-buttons { display:grid; gap:.8rem; margin-top:1rem; }
.choice-buttons button {
  padding:1rem; border:3px solid #c9e5f6; border-radius:14px; background:#fff;
  color:var(--ink); font-weight:900; text-align:left;
}
.choice-buttons button:hover { border-color:var(--blue-500); background:#eef8ff; }
.choice-buttons button.correct { border-color:var(--green); background:#edffe4; }
.choice-buttons button.wrong { border-color:var(--red); background:#fff0ee; }

.quiz-section { border-radius:40px; background:#fff8df; }
.quiz-form { max-width:900px; margin:auto; }
.quiz-form fieldset {
  margin:0 0 1rem; padding:1rem 1.2rem; border:3px solid #ffe19b; border-radius:18px; background:#fff;
}
.quiz-form legend { padding:0 .5rem; color:var(--blue-900); font-family:"Baloo 2"; font-weight:900; font-size:1.15rem; }
.quiz-form label { display:block; margin:.5rem 0; padding:.55rem .7rem; border-radius:10px; font-weight:800; }
.quiz-form label:hover { background:#f1f9ff; }
.quiz-result { margin-top:1rem; padding:1rem; border-radius:18px; text-align:center; font-weight:900; }
.quiz-result.success { color:#1f7100; background:#e9ffdb; border:3px solid #62bc21; }
.quiz-result.retry { color:#8b4300; background:#fff0d1; border:3px solid #ffb13b; }

.challenge-card, .completion-card {
  display:flex; align-items:center; gap:1.3rem; padding:1.6rem;
  border-radius:28px; color:var(--ink); background:linear-gradient(135deg, #fff7c6, #e6faff);
  border:4px solid #fff; box-shadow:var(--shadow);
}
.challenge-icon, .passport-stamp {
  flex:0 0 auto; display:grid; place-items:center; width:105px; height:105px;
  border-radius:50%; background:var(--yellow); border:7px solid #f0a600; font-size:3rem;
}
.challenge-card h2, .completion-card h2 { font-size:clamp(1.8rem, 3vw, 2.7rem); }
.challenge-card p { margin:.3rem 0; font-weight:700; }

.printable-section { text-align:center; }
.coloring-sheet {
  max-width:900px; margin:0 auto 1.3rem; padding:.8rem; border-radius:24px;
  background:#fff; box-shadow:var(--shadow);
}
.coloring-sheet svg { width:100%; height:auto; display:block; }
.print-button { min-width:240px; }

.parent-grid ul { margin:.5rem 0 0; padding-left:1.3rem; color:var(--muted); font-weight:700; }
.parent-grid li { margin:.45rem 0; }

.completion-card { justify-content:space-between; }
.completion-card > div:nth-child(2) { flex:1; }
.passport-stamp { background:#ffe05a; color:#8a5400; }

footer {
  padding:2rem 1rem; text-align:center; color:#fff; background:linear-gradient(135deg, #07376e, #031f4d);
  font-size:1.1rem;
}
footer strong { margin-right:.4rem; }
footer span { margin:.2rem; font-family:"Baloo 2"; font-weight:900; color:#8bdc4a; }
footer span:nth-of-type(2) { color:#ffd633; }
footer span:nth-of-type(3) { color:#65b7ff; }
footer p { margin:.7rem 0 0; opacity:.8; font-size:.85rem; }
footer a { color:#fff; font-weight:800; }

@media (max-width:1050px) {
  .site-header { grid-template-columns:1fr auto; }
  nav { grid-column:1 / -1; order:3; }
  .header-badge { justify-self:end; }
  .hero { grid-template-columns:1fr; }
  .rules-grid { grid-template-columns:repeat(2,1fr); }
  .story-grid, .parent-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .site-header { position:relative; grid-template-columns:1fr; }
  .header-badge { justify-self:start; }
  nav { justify-content:flex-start; overflow:auto; flex-wrap:nowrap; }
  .brand { min-width:0; }
  .hero { padding:.8rem; }
  .hero-copy { padding:1.2rem; }
  .photo-card { transform:scale(.82); transform-origin:left bottom; }
  .sparky-card { display:none; }
  .progress-section { margin:0 .8rem 1rem; grid-template-columns:1fr auto; }
  .progress-track { grid-column:1 / -1; }
  .rules-grid { grid-template-columns:1fr; }
  .challenge-card, .completion-card { align-items:flex-start; flex-direction:column; }
  .hotspot { width:40px; height:40px; }
  .hazard-counter { font-size:.75rem; }
}
@media print {
  body * { visibility:hidden !important; }
  #coloringSheet, #coloringSheet * { visibility:visible !important; }
  #coloringSheet { position:absolute; inset:0; width:100%; max-width:none; margin:0; padding:0; box-shadow:none; }
  @page { size:landscape; margin:.35in; }
}