/*
 * Soaky Street site styles (v2, 2026-11-08). Phone first. One stylesheet for
 * every page. No inline styles, no web fonts, no outside requests: the nginx
 * CSP is default-src 'none'; img-src 'self'; style-src 'self'.
 *
 * The idea: the page is Sunnyside Lane. Sky on top with the title, the game's
 * own street under it (the renders have a transparent sky), then the lawn,
 * the pavement, the street from above, and the footer is the road. Every panel
 * is drawn like the game's UI: thick navy outline, hard offset shadow, pill chips.
 *
 * Fonts: system only. ui-rounded = SF Pro Rounded on Apple devices. A bundled
 * rounded web font (Fredoka or Nunito, both SIL OFL) needs Pratik's OK first,
 * then a CSP change (font-src 'self') and one line on the privacy page.
 *
 * Contrast (WCAG 2.x relative luminance, recomputed 2026-11-08 with the script
 * in docs/SOAKY_SITE_RUNBOOK.md section 6):
 *   --ink #10304f on --sky-1 #43b4f8 5.9:1 · on --sky-2 #8fd5fd 8.4:1 · on --sky-3 #cdeeff 11.1:1
 *   --ink on --sun #ffc93c 8.8:1 · on white 13.5:1 · on --paper #fffbf2 13.1:1 · on --pink #fbe3d5 11.0:1
 *   --ink on gauge tints #bfe3fb / #8fe0aa / #ffb199: 10.0 / 8.6 / 7.7:1
 *   --muted #3d566e on white 7.6:1 · on --paper 7.4:1 · on --pink 6.2:1
 *   white on --blue #0b5cad 6.7:1 (buttons) · white on --ink 13.5:1 · #e6f1fb on #0d2a45 12.8:1 (promises)
 *   #e9eef3 on --asphalt #3a3d42 9.3:1 (footer) · white links on asphalt 10.9:1
 *   --link #0b5cad on white 6.7:1 · on --paper 6.5:1
 * Never text on the lawn itself (ink on #5fa052 is 4.3:1): every word on the
 * lawn sits in a white panel. Wordmark: white letters with an ink outline
 * (logotype). Shapes only, never text: --bubble, --lawn, --curb, --sun-2.
 */

:root {
  --sky-1: #43b4f8;
  --sky-2: #8fd5fd;
  --sky-3: #cdeeff;
  --ink: #10304f;
  --deep: #0d2a45;
  --muted: #3d566e;
  --link: #0b5cad;
  --blue: #0b5cad;
  --blue-2: #08437f;
  --bubble: #72dbfd;
  --sun: #ffc93c;
  --sun-2: #d9a21a;
  --lawn: #5fa052;
  --lawn-2: #67a95a;
  --pink: #fbe3d5;
  --curb: #d9cbb8;
  --curb-top: #efe6d8;
  --asphalt: #3a3d42;
  --paper: #fffbf2;
  --display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN",
             system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --line: 3px solid var(--ink);
  --lift: 0 5px 0 var(--ink);
  --r: 1.3rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.12; margin: 0; }
p { margin: 0 0 0.9rem; }
a { color: var(--link); text-underline-offset: 0.18em; }
ul, ol { margin: 0; padding: 0; }
.inner { width: min(100% - 2.2rem, 68rem); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 8px #fff; }
.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 20;
  background: var(--ink); color: #fff; font-weight: 700; padding: 0.6rem 1rem; border-radius: 12px; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Stickers, chips, buttons: the game's UI ---------- */
.sign {
  display: inline-block; background: #fff; color: var(--ink);
  border: var(--line); border-radius: 0.9rem; box-shadow: var(--lift);
  padding: 0.4rem 1.05rem; margin-bottom: 1.4rem;
  font-size: clamp(1.7rem, 6vw, 2.4rem); letter-spacing: -0.01em;
  transform: rotate(-1deg);
}
.sign.sun { background: var(--sun); }
.sign.blue { background: var(--blue); color: #fff; border-color: #fff; box-shadow: 0 5px 0 rgba(255, 255, 255, 0.55); }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 2rem;
  padding: 0.12rem 0.7rem 0.12rem 0.35rem; font: 700 0.95rem var(--display); white-space: nowrap;
}
.chip img { width: 1.15rem; height: 1.15rem; }
.chip b { font-weight: 800; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
  padding: 0.65rem 1.3rem; border: var(--line); border-radius: 1rem; box-shadow: var(--lift);
  background: var(--sun); color: var(--ink); font: 800 1.05rem var(--display); text-decoration: none;
  margin: 0 0.5rem 0.75rem 0;
}
.btn:hover { background: #ffd966; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.ghost { background: #fff; }
.btn.ghost:hover { background: var(--sky-3); }
.btn.blue { background: var(--blue); color: #fff; }
.btn.blue:hover { background: var(--blue-2); }
.badge {
  display: inline-block; background: var(--ink); color: #fff; border: 3px solid #fff; border-radius: 2rem;
  padding: 0.55rem 1.1rem; font: 800 1rem var(--display);
}

/* ---------- Header: on the sky ---------- */
.top { background: var(--sky-1); padding: 0.7rem 0 0.3rem; }
.top .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.8rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.6rem;
  font: 800 1.25rem var(--display); color: var(--ink); text-decoration: none;
}
.brand img { width: 1.9rem; height: 1.9rem; }
.top nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.top nav a {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.3rem 0.85rem;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 2rem;
  font: 700 0.95rem var(--display); text-decoration: none;
}
.top nav a:hover { background: var(--sun); }
.top nav a[aria-current="page"] { background: var(--sun); }

/* ---------- Hero: the title screen ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 50%, var(--sky-3) 80%, var(--sky-3) 100%);
  padding-top: 1.6rem;
}
.sun-disc {
  position: absolute; z-index: -1; top: -3.5rem; left: -3.5rem; width: 10rem; height: 10rem; border-radius: 50%;
  background: radial-gradient(circle, #fff6c9 0 38%, var(--sun) 39% 52%, rgba(255, 250, 225, 0.45) 53% 64%, rgba(255, 250, 225, 0) 65%);
}
.cloud { position: absolute; z-index: -1; opacity: 0.9; height: auto; }
.cloud-a { width: 6.5rem; top: 1.5rem; right: -1.5rem; }
.cloud-b { display: none; width: 9rem; opacity: 0.75; }
.hero-copy { position: relative; z-index: 2; width: min(100% - 2.2rem, 40rem); margin-inline: auto; }
.wordmark {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(3.6rem, 21vw, 7rem); line-height: 0.92; letter-spacing: 0.01em; color: #fff;
  --o: 0.05em;
  text-shadow:
    0 var(--o) 0 var(--ink), var(--o) 0 0 var(--ink), calc(-1 * var(--o)) 0 0 var(--ink), 0 calc(-1 * var(--o)) 0 var(--ink),
    0.036em 0.036em 0 var(--ink), -0.036em 0.036em 0 var(--ink), 0.036em -0.036em 0 var(--ink), -0.036em -0.036em 0 var(--ink),
    0 0.11em 0 var(--deep), 0.03em 0.11em 0 var(--deep), -0.03em 0.11em 0 var(--deep),
    0 0.2em 0.25em rgba(13, 42, 69, 0.25);
}
.wordmark .word { display: block; white-space: nowrap; }
.wordmark .word > span { display: inline-block; }
.wordmark .w1 { rotate: -5deg; }
.wordmark .w2 { rotate: 3deg; }
.wordmark .w3 { rotate: -2deg; }
.wordmark .w4 { rotate: 4deg; }
.wordmark .w5 { rotate: -3deg; }
.wordmark .w6 { rotate: 5deg; }
.tag {
  display: inline-block; margin: 1.2rem 0 1rem; padding: 0.5rem 1rem;
  background: var(--sun); border: var(--line); border-radius: 1rem; box-shadow: var(--lift);
  font: 800 clamp(1.25rem, 5.2vw, 1.75rem) / 1.15 var(--display); color: var(--ink); transform: rotate(-1.2deg);
}
.lede {
  font-size: 1.125rem; color: var(--ink); background: rgba(255, 255, 255, 0.9);
  border-radius: 1rem; padding: 0.8rem 1rem; margin: 0 auto 1rem; max-width: 34rem;
}
.hero-actions { margin: 0; }
.hero-actions .badge { margin: 0 0.5rem 0.75rem 0; }
.ages { font-size: 0.98rem; font-weight: 600; color: var(--ink); margin: 0.1rem 0 0; }

.hero-scene { position: relative; z-index: 1; margin-top: -10vw; }
.hero-scene img { width: 100%; }
.hero-scene figcaption {
  position: absolute; right: 0.75rem; bottom: 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: #fff; background: rgba(16, 48, 79, 0.8);
  padding: 0.15rem 0.6rem; border-radius: 999px;
}
.curb {
  position: relative; z-index: 2; height: 1.1rem;
  background: var(--curb); border-top: 0.35rem solid var(--curb-top); box-shadow: 0 0.35rem 0 #bfae97;
}

/* ---------- How it plays: the lawn ---------- */
.lawn { position: relative; background: var(--lawn) linear-gradient(180deg, var(--lawn-2), var(--lawn) 30rem); padding: 2.6rem 0 3.2rem; }
.lawn .intro {
  display: table; background: #fff; border: var(--line); border-radius: 1rem;
  padding: 0.6rem 1rem; margin: 0 0 1rem; font-size: 1.1rem; max-width: 40rem;
}
.steps { list-style: none; margin-top: 5.5rem; display: grid; gap: 5.6rem 1.25rem; }
.step {
  position: relative; background: #fff; border: var(--line); border-radius: var(--r); box-shadow: 0 6px 0 var(--ink);
  padding: 7rem 1.2rem 1.2rem;
}
.step-art {
  position: absolute; left: 50%; top: -3.4rem; translate: -50% 0;
  width: 10rem; height: 10rem; border-radius: 50%; border: var(--line);
}
.step-art img { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 12.4rem; width: auto; max-width: none; }
.step-kind .step-art { background: radial-gradient(circle at 50% 60%, #c8eeb4, #9fd98a); }
.step-fill .step-art { background: radial-gradient(circle at 50% 60%, #c6ecff, var(--bubble)); }
.step-splash .step-art { background: radial-gradient(circle at 50% 60%, #ffd9c4, #ffb38a); }
.step-dry .step-art { background: radial-gradient(circle at 50% 55%, #fff3b8 0 30%, var(--sun) 31% 100%); }
.step-splash .step-art img { height: 11.4rem; }
.step-dry .step-art img { height: 9rem; bottom: 0.5rem; }
.step .num {
  position: absolute; top: -1rem; right: 1rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  background: var(--sun); color: var(--ink); font: 800 1.5rem var(--display); border: var(--line); border-radius: 50%;
}
.step h3 { font-size: 1.45rem; margin-bottom: 0.4rem; }
.step p { margin: 0; }
.reward { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.98rem; margin-top: 0.7rem !important; }
.gauge {
  display: grid; grid-template-columns: 10fr 4fr 2.4fr; border: var(--line); border-radius: 0.9rem; overflow: hidden;
  font: 800 0.85rem / 1.2 var(--display); margin-top: 0.75rem; text-align: center;
}
.gauge span { padding: 0.5rem 0.2rem; color: var(--ink); display: grid; place-items: center; }
.g-low { background: #bfe3fb; }
.g-ok { background: #8fe0aa; border-left: 3px solid var(--ink); }
.g-pop { background: #ffb199; border-left: 3px solid var(--ink); }

/* ---------- Your kid, your look: the pavement ---------- */
.looks { position: relative; background: linear-gradient(180deg, var(--sky-3), #eaf7ff); padding-top: 2.6rem; text-align: center; }
.looks::before {
  content: ""; position: absolute; inset: -15px 0 auto 0; height: 16px;
  background: url("/assets/icons/grass-edge.svg") repeat-x 0 0 / 120px 16px; transform: scaleY(-1);
}
.looks .intro { margin: 0 auto 0.9rem; max-width: 36rem; font-size: 1.1rem; }
.swatches { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 auto; }
.swatches li { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: var(--line); box-shadow: 0 3px 0 var(--ink); }
.s1 { background: #e8603c; } .s2 { background: #ffc93c; } .s3 { background: #2e9e5b; } .s4 { background: #1e88e5; }
.s5 { background: #9b59d0; } .s6 { background: #ff8fb1; } .s7 { background: #7b4a2a; }
.lineup { width: min(100% - 1rem, 56rem); margin: 1.4rem auto 0; position: relative; z-index: 1; }
.pavement {
  height: 2.75rem; margin-top: -0.6rem; background: var(--curb); border-top: 0.35rem solid var(--curb-top);
  background-image: repeating-linear-gradient(90deg, transparent 0 5.5rem, #c9b9a3 5.5rem 5.65rem);
}

/* ---------- Sunnyside Lane from above, with the three ways to play ---------- */
.lane { background: linear-gradient(180deg, var(--sky-1), var(--sky-2) 55%, var(--sky-3)); padding-top: 2.6rem; }
.lane .intro {
  display: table; background: rgba(255, 255, 255, 0.9); border-radius: 1rem; padding: 0.6rem 1rem;
  margin: 0 0 1rem; font-size: 1.1rem; max-width: 40rem;
}
.modes { list-style: none; display: grid; gap: 0.7rem; }
.modes li { background: #fff; border: var(--line); border-radius: 1rem; padding: 0.7rem 1rem; box-shadow: 0 4px 0 var(--ink); }
.modes b { display: block; font: 800 1.2rem var(--display); }
.lane-scene { margin-top: 1.2rem; }
.lane-scene img { width: 100%; }

/* ---------- Promises for grown-ups ---------- */
.parents { background: var(--ink); color: #fff; padding: 2.6rem 0 2.4rem; }
.parents .intro { color: #e6f1fb; font-size: 1.1rem; margin-bottom: 1.2rem; max-width: 40rem; }
.promises { list-style: none; display: grid; gap: 0.8rem; margin-bottom: 1.4rem; }
.promises li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: var(--deep); border: 3px solid #6fb3ea; border-radius: 1rem; padding: 0.8rem 1rem;
}
.promises img { flex: none; width: 2.5rem; height: 2.5rem; }
.promises p { margin: 0; color: #e6f1fb; }
.promises strong { color: #fff; font-family: var(--display); font-size: 1.1rem; }
.parents .btn.ghost { border-color: #fff; box-shadow: 0 5px 0 rgba(255, 255, 255, 0.55); }
.parents .btn { border-color: #fff; box-shadow: 0 5px 0 rgba(255, 255, 255, 0.55); }
.parents .btn:active { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }

/* ---------- Footer: the road ---------- */
.road {
  position: relative; background: var(--asphalt); color: #e9eef3;
  border-top: 1.1rem solid var(--curb); box-shadow: inset 0 0.35rem 0 #2c2e32; padding: 3rem 0 2rem;
}
.road::before {
  content: ""; position: absolute; left: 0; right: 0; top: 1.4rem; height: 0.4rem;
  background: repeating-linear-gradient(90deg, #f2f2f2 0 2.6rem, transparent 2.6rem 4.6rem); opacity: 0.85;
}
.road .inner { display: grid; gap: 0.8rem; }
.road ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.road a { color: #fff; display: inline-flex; min-height: 44px; align-items: center; padding: 0 0.3rem; font-weight: 600; }
.road a:hover { color: var(--sun); }
.road p { margin: 0; font-size: 0.95rem; }
.road :focus-visible { outline-color: #fff; box-shadow: 0 0 0 8px var(--asphalt); }

/* ---------- Text pages: privacy, support, imprint, 404 ---------- */
.page { width: min(100% - 2.2rem, 46rem); margin: 0 auto; padding: 1.6rem 0 3rem; }
.page h1 {
  display: inline-block; background: #fff; border: var(--line); border-radius: 0.9rem; box-shadow: var(--lift);
  padding: 0.4rem 1.05rem; margin: 0.4rem 0 1rem; font-size: clamp(1.7rem, 6vw, 2.4rem); transform: rotate(-1deg);
}
.page h2 { font-size: 1.3rem; margin: 2rem 0 0.4rem; }
.page .meta { color: var(--muted); margin: 0 0 1rem; }
.page .card {
  background: #fff; border: var(--line); border-radius: var(--r); box-shadow: 0 5px 0 var(--ink);
  padding: 1.1rem 1.2rem; margin: 1rem 0 1.5rem;
}
.page .card p:last-child { margin-bottom: 0; }
.page ul { padding-left: 1.3rem; margin-bottom: 0.9rem; }
.back-link { margin: 0; }
.mail { font-size: 1.2rem; font-weight: 700; }

/* ---------- Wider screens ---------- */
@media (min-width: 40rem) {
  .steps { grid-template-columns: 1fr 1fr; }
  .modes { grid-template-columns: repeat(3, 1fr); }
  .promises { grid-template-columns: 1fr 1fr; }
  .road .inner { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 48rem) {
  .hero { padding-top: 2.4rem; }
  .hero-scene { margin-top: -3vw; }
  .cloud-a { width: 11rem; top: 9%; left: 29%; right: auto; }
  .cloud-b { display: block; top: 3rem; left: 70%; }
  .sun-disc { width: 15rem; height: 15rem; top: -4.5rem; left: 6%; }
  .wordmark { font-size: clamp(4.5rem, 9vw, 7.5rem); }
  .lineup { margin-top: 1.8rem; }
}
@media (min-width: 64rem) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 5.6rem 1.1rem; }
  .step { padding-inline: 1.1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .cloud-a { animation: drift 38s ease-in-out infinite alternate; }
  .cloud-b { animation: drift 52s ease-in-out infinite alternate-reverse; }
  .wordmark .word > span { animation: bob 3.2s ease-in-out infinite; }
  .wordmark .w2, .wordmark .w5 { animation-delay: -0.8s; }
  .wordmark .w3, .wordmark .w6 { animation-delay: -1.6s; }
  .wordmark .w4 { animation-delay: -2.4s; }
  .btn { transition: transform 0.08s, box-shadow 0.08s, background 0.15s; }
}
@keyframes drift { from { translate: 0 0; } to { translate: 3.5rem 0; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.05em; } }

@media print {
  .top nav, .skip-link, .sun-disc, .cloud { display: none; }
  body { background: #fff; }
}

/* Fallback home page without the town pieces (deploy/fallback/): the modes
   section has no aerial picture under it, so it closes with its own padding. */
.lane.no-scene { padding-bottom: 2.6rem; }