/* Paint for the drawn scenes: every colour is an app token (Niki's lantern, the kid rooms, the parent lime). */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.c-paper { stop-color: var(--color-paper); }
.c-glow { stop-color: var(--color-glow); }
.c-glow-shade { stop-color: var(--color-glow-shade); }
.c-indigo-light { stop-color: var(--color-indigo-light); }
.c-indigo { stop-color: var(--color-indigo); }
.c-indigo-deep { stop-color: var(--color-indigo-deep); }
.c-gold-light { stop-color: var(--color-gold-light); }
.c-gold { stop-color: var(--color-gold); }
.c-gold-deep { stop-color: var(--color-gold-deep); }

/* Niki */
.k-paper { fill: url(#g-glow); stroke: var(--color-glow-shade); stroke-width: 1.2; }
.k-indigo { fill: url(#g-indigo); stroke: var(--color-indigo-deep); stroke-width: 1.2; }
.k-gold { fill: url(#g-gold); stroke: var(--color-gold-deep); stroke-width: 1; stroke-linejoin: round; }
.k-light { fill: url(#g-light); pointer-events: none; }
.k-rib { fill: none; stroke: var(--color-glow-shade); stroke-opacity: 0.55; stroke-width: 1.2; }
.k-handle { fill: none; stroke: var(--color-gold-deep); stroke-width: 3; stroke-linecap: round; }
.k-blush { fill: var(--color-blush); }
.k-line { fill: none; stroke: var(--color-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.k-ink { fill: var(--color-ink); }
.k-pink { fill: var(--color-pink); }
.k-shadow { fill: var(--color-indigo-deep); fill-opacity: 0.14; }

/* Hero: the life path. Dotted ahead, gold where the lantern has been, dark at the far end. */
.road { fill: none; stroke: var(--color-lavender); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 14; }
.road-lit { fill: none; stroke: var(--color-gold); stroke-width: 6; stroke-linecap: round; }
.pool { fill: url(#g-pool); pointer-events: none; }
.mark { fill: var(--color-paper); stroke: var(--color-lavender); stroke-width: 4; transition: fill var(--dur-mid) var(--ease-out), stroke var(--dur-mid) var(--ease-out); }
.stop.lit .mark { fill: var(--color-gold); stroke: var(--color-gold-deep); }
.k-label { fill: var(--color-muted); font: 800 18px var(--font-display); text-anchor: middle; letter-spacing: 0.04em; }
.stop.lit .k-label { fill: var(--color-indigo); }
.stop.far { opacity: 0.55; }
.k-chip-light { fill: var(--color-paper); font: 900 18px var(--font-display); text-anchor: middle; }

/* Props */
.k-ground { fill: var(--color-lavender-wash); }
.k-ground-white { fill: var(--color-paper); fill-opacity: 0.7; }
.k-sheet { fill: var(--color-paper); stroke: var(--color-hairline); stroke-width: 2; }
.k-text { fill: none; stroke: var(--color-lavender); stroke-width: 6; stroke-linecap: round; }
.k-text-indigo { fill: none; stroke: var(--color-indigo); stroke-width: 1.8; stroke-linecap: round; }
.k-tick { fill: none; stroke: var(--color-lime-edge); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.k-coin-ring { fill: none; stroke: var(--color-gold-deep); stroke-opacity: 0.6; stroke-width: 1.6; }
.k-ribbon { fill: var(--color-gold); }
.k-ribbon-pink { fill: var(--color-pink); }
.k-gift { fill: var(--color-pink); }
.k-gift-top { fill: var(--color-pink-light); }
.k-sky { fill: var(--color-sky); }
.k-indigo-light { fill: var(--color-indigo-light); }
.k-indigo-flat { fill: var(--color-indigo); }
.k-glass { fill: var(--color-sky); fill-opacity: 0.28; stroke: var(--color-sky); stroke-width: 4; }
.k-shine { fill: none; stroke: var(--color-paper); stroke-opacity: 0.8; stroke-width: 6; stroke-linecap: round; }
.k-rim { fill: var(--color-sky); }
.k-lime { fill: var(--color-lime); }
.k-lime-edge { fill: var(--color-lime-edge); }
.k-bubble { fill: var(--color-paper); }
.k-check { fill: none; stroke: var(--color-paper); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.k-chip { fill: var(--color-slate); font: 900 22px var(--font-display); text-anchor: middle; }
.k-badge { fill: var(--color-paper); font: 900 26px var(--font-display); text-anchor: middle; }
.dot { fill: var(--color-lavender); transition: fill var(--dur-mid) var(--ease-out); }
.dot.lit { fill: var(--color-gold); }

/* Layout of the scenes: drawings may spill past their box (jumps, sparks), never the page. */
.scene, .hero-art, .final-art { display: block; overflow: visible; }
.art { margin: 0; justify-self: center; width: min(460px, 100%); text-align: center; }
.art .scene { width: 100%; height: auto; }
.tally { margin: 0 0 calc(-1 * var(--space-lg)); display: grid; justify-items: center; gap: 2px; }
.tally b { font: 900 clamp(2.5rem, 5vw + 1rem, 3.5rem)/1 var(--font-display); color: var(--color-indigo); font-variant-numeric: tabular-nums; }
.tally span { font: 800 0.8rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.hero-art { cursor: pointer; -webkit-tap-highlight-color: transparent; width: min(520px, 100%); height: auto; justify-self: center; }
.anywhere .scene { width: min(440px, 100%); height: auto; margin: var(--space-lg) auto 0; }