/* MonMon Playland design system: one palette, one type scale, big touch targets.
   Games must use these tokens so every product feels the same and stays accessible.
   Fredoka is self-hosted under the SIL OFL 1.1 (provenance in site/CREDITS.md).
   Contrast (WCAG 2.2 AA): ink on sun, coral and leaf, white on ink, ink-soft on white, sun and
   sky are all at least 4.5:1. White on ocean (about 3.5:1) and mon-deep on sky-top (about 3.8:1)
   are for large text only. */
@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --sky-top: #8fd3ff;
  --sky-bottom: #e6f6ff;
  --grass: #7ccf5a;
  --grass-dark: #4fa63a;
  --sun: #ffc93c;
  --coral: #ff6b6b;
  --berry: #c86bfa;
  --ocean: #3a86ff;
  --leaf: #2bb673;
  --tangerine: #ff9f1c;
  --ink: #23315a;
  --ink-soft: #3f4d7a;
  --card: #ffffff;
  --mon: #7c6cf2;
  --mon-deep: #5b4bd6;
  --mon-belly: #b9b0ff;
  --hills-far: color-mix(in srgb, var(--grass) 60%, white);
  --hills-h: clamp(64px, 12vh, 120px); /* visible height of the near hills */
  --shadow: 0 6px 0 rgba(35, 49, 90, 0.18);
  --radius: 28px;
  --tap: 88px; /* minimum touch target for small hands */
  --ease-bounce: cubic-bezier(.3, 1.6, .5, 1);
  --ease-out: cubic-bezier(.2, .8, .3, 1);
  --dur-press: 90ms;
  --dur-release: 260ms;
  --dur-pop: 450ms;
  --dur-enter: 500ms;
  --stagger: 70ms;
  --celebrate-max: 1800ms;
  font-family: "Fredoka", "Baloo 2", "Comic Neue", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; min-height: 100%; }

body {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 70%);
  min-height: 100vh;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ---- Sky scene: sun and clouds (Kit.scene), far and near hills (body pseudo-elements) ---- */
body::before, body::after {
  content: "";
  position: fixed;
  left: -10%; right: -10%; bottom: 0;
  pointer-events: none;
}
body::before {
  height: calc(var(--hills-h) + 36px);
  z-index: -2;
  transform: translateY(var(--kit-far-y, 0px)); /* home page parallax */
  background: radial-gradient(ellipse 38% 100% at 18% 100%, var(--hills-far) 99%, transparent 100%),
              radial-gradient(ellipse 42% 80% at 68% 100%, var(--hills-far) 99%, transparent 100%);
}
body::after {
  height: var(--hills-h);
  z-index: -1;
  background: radial-gradient(ellipse 40% 100% at 28% 100%, var(--grass) 99%, transparent 100%),
              radial-gradient(ellipse 45% 75% at 82% 100%, var(--grass-dark) 99%, transparent 100%);
}

.kit-scene { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.kit-sun { position: absolute; top: 112px; right: 3vw; width: 140px; height: 140px; }
.kit-scene.home .kit-sun { top: 24px; left: 4vw; right: auto; }
.kit-sun-rays { transform-box: view-box; transform-origin: 70px 70px; animation: kit-spin 90s linear infinite; }
@keyframes kit-spin { to { transform: rotate(360deg); } }
.kit-clouds { position: absolute; inset: 0; }
.kit-cloud { position: absolute; left: 0; aspect-ratio: 16 / 9; height: auto;
  transform: translateX(var(--x)); animation: kit-drift 70s linear infinite; }
.kit-cloud:nth-child(1) { width: 160px; top: 6%; --x: 12vw; animation-delay: -12s; }
.kit-cloud:nth-child(2) { width: 120px; top: 16%; --x: 64vw; animation-duration: 95s; animation-delay: -58s; }
.kit-cloud:nth-child(3) { width: 90px; top: 34%; --x: 38vw; animation-duration: 120s; animation-delay: -70s; }
.kit-scene.home .kit-cloud:nth-child(1) { top: 8%; }
.kit-scene.home .kit-cloud:nth-child(2) { top: 20%; }
@keyframes kit-drift { from { transform: translateX(-25vw); } to { transform: translateX(110vw); } }
@media (max-width: 600px) { .kit-sun { width: 96px; height: 96px; } }

/* ---- Buttons: press down fast, spring back ---- */
.kit-btn {
  font: inherit;
  font-weight: 600;
  font-size: 1.5rem;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--dur-release) var(--ease-bounce), box-shadow var(--dur-release) var(--ease-bounce);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none;
}
@media (hover: hover) {
  .kit-btn:not(:disabled):hover { transform: translateY(-2px); transition-duration: 150ms; }
}
.kit-btn:not(:disabled):active {
  transform: translateY(5px) scale(.97); box-shadow: 0 1px 0 rgba(35, 49, 90, 0.18);
  transition-duration: var(--dur-press); transition-timing-function: ease;
}
.kit-btn:focus-visible { outline: 5px solid var(--ocean); outline-offset: 4px; }
.kit-btn.big { font-size: 2.4rem; min-height: 120px; padding: 0 48px; }
.kit-btn.round { padding: 0; width: var(--tap); border-radius: 50%; font-size: 2.4rem; }
.kit-btn.coral { background: var(--coral); color: var(--ink); }
.kit-btn.ocean { background: var(--ocean); color: #fff; } /* large text only */
.kit-btn.leaf { background: var(--leaf); color: var(--ink); }
.kit-btn:disabled { opacity: 0.5; cursor: default; }

.kit-topbar {
  position: fixed; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 50; pointer-events: none;
}
.kit-topbar > * { pointer-events: auto; }

/* ---- Screens. Top padding = 12px top bar + 88px button; bottom clears the hills. ---- */
.kit-screen {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 100px 16px calc(var(--hills-h) + 24px); text-align: center;
}
.kit-screen[hidden] { display: none; }

.kit-title { font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 700; margin: 0; letter-spacing: 0.5px;
  text-shadow: 0 4px 0 rgba(255, 255, 255, 0.7); }
.kit-sub { font-size: clamp(1.2rem, 3.5vw, 1.8rem); margin: 0 auto; color: var(--ink-soft); max-width: 36ch; }

.kit-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px; max-width: 640px; width: 100%;
}

.kit-progress { display: flex; gap: 10px; justify-content: center; }
.kit-progress span { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.8);
  box-shadow: inset 0 0 0 3px rgba(35,49,90,0.15); }
.kit-progress span.done { background: var(--sun); box-shadow: inset 0 0 0 3px #e0a800; }

/* ---- Mon, the guide (built by Kit.mon) ---- */
.kit-mon {
  display: block; flex: none; position: relative;
  width: var(--mon-size, 120px); height: var(--mon-size, 120px);
  min-width: var(--tap); min-height: var(--tap);
  padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; cursor: pointer;
}
.kit-mon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kit-mon:focus-visible { outline: 5px solid var(--ocean); outline-offset: 4px; }
.kit-mon.corner { position: fixed; left: 16px; bottom: calc(var(--hills-h) - 8px); z-index: 40;
  --mon-size: 72px; min-width: 0; min-height: 0; pointer-events: none; }
.kit-mon g { transform-box: view-box; }
.mon-all, .mon-body { transform-origin: 60px 112px; }
.mon-antenna-l { transform-origin: 40px 30px; }
.mon-antenna-r { transform-origin: 80px 30px; }
.mon-arm-l { transform-origin: 14px 72px; }
.mon-arm-r { transform-origin: 106px 72px; }
.mon-lids { transform-origin: 60px 45px; transform: scaleY(0); }
.mon-cheer, .mon-curious { display: none; }

/* States. Each has a still pose (what reduced motion shows) plus its motion. */
.kit-mon.idle .mon-body { animation: kit-mon-breathe 3.6s ease-in-out infinite; }
.kit-mon.idle .mon-antenna-l, .kit-mon.idle .mon-antenna-r { animation: kit-mon-sway 4.2s ease-in-out infinite; }
.kit-mon.idle .mon-antenna-r { animation-delay: -0.6s; }
.kit-mon.blink .mon-lids { animation: kit-mon-blink 140ms ease-in-out; }
.kit-mon.enter { animation: kit-mon-enter 550ms var(--ease-bounce) backwards; }
.kit-mon.wave .mon-arm-r { transform: rotate(-28deg); animation: kit-mon-wave 900ms ease-in-out forwards; }
.kit-mon.cheer .mon-all { animation: kit-mon-hop 900ms ease-in-out; }
.kit-mon.cheer .mon-arm-l, .kit-mon.stretch .mon-arm-l { transform: rotate(30deg); animation: kit-mon-arm-l 900ms ease-in-out forwards; }
.kit-mon.cheer .mon-arm-r, .kit-mon.stretch .mon-arm-r { transform: rotate(-30deg); animation: kit-mon-arm-r 900ms ease-in-out forwards; }
.kit-mon.stretch .mon-arm-l, .kit-mon.stretch .mon-arm-r { animation-duration: 1.2s; }
.kit-mon.stretch .mon-body { transform: scaleY(1.05); animation: kit-mon-reach 1.2s ease-in-out forwards; }
.kit-mon.cheer .mon-smile, .kit-mon.curious .mon-smile { display: none; }
.kit-mon.cheer .mon-cheer, .kit-mon.curious .mon-curious { display: inline; }
.kit-mon.curious .mon-all { transform: rotate(8deg); animation: kit-mon-tilt 1.8s ease-in-out forwards; }
.kit-mon.curious .mon-pupils { transform: translate(-2px, -3px); animation: kit-mon-look 1.8s ease-in-out forwards; }
.kit-mon.boop .mon-body { animation: kit-mon-boop 420ms; }
.kit-mon.nod .mon-all { animation: kit-mon-nod 500ms ease-in-out; }

@keyframes kit-mon-breathe { 50% { transform: scale(.99, 1.03); } }
@keyframes kit-mon-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes kit-mon-blink { 50% { transform: scaleY(1); } }
@keyframes kit-mon-enter { from { transform: translateY(40px) scale(.6); opacity: 0; } }
@keyframes kit-mon-wave {
  0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-28deg); } 50% { transform: rotate(18deg); }
}
@keyframes kit-mon-hop { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-24px); } }
@keyframes kit-mon-arm-l { 0%, 100% { transform: rotate(0); } 20%, 80% { transform: rotate(30deg); } }
@keyframes kit-mon-arm-r { 0%, 100% { transform: rotate(0); } 20%, 80% { transform: rotate(-30deg); } }
@keyframes kit-mon-reach { 0%, 100% { transform: scaleY(1); } 30%, 70% { transform: scaleY(1.05); } }
@keyframes kit-mon-tilt { 0%, 100% { transform: rotate(0); } 16.7%, 83.3% { transform: rotate(8deg); } }
@keyframes kit-mon-look { 0%, 100% { transform: translate(0, 0); } 16.7%, 83.3% { transform: translate(-2px, -3px); } }
@keyframes kit-mon-boop {
  0% { transform: scale(1); animation-timing-function: ease-out; }
  28.6% { transform: scale(1.08, .9); animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  100% { transform: scale(1); }
}
@keyframes kit-mon-nod { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(4px); } }

/* Star burst from Mon's centre on the finish screen. The base style is the final ring,
   so with reduced motion the stars simply stand still around Mon. */
.kit-burst { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.kit-burst i {
  position: absolute; left: -12px; top: -12px; width: 24px; line-height: 24px;
  font-size: 20px; font-style: normal; text-align: center;
  transform: rotate(var(--a)) translateY(-70px) rotate(calc(var(--a) * -1)) scale(1);
  animation: kit-burst 1s forwards;
}
@keyframes kit-burst {
  0% { transform: rotate(var(--a)) translateY(0) rotate(calc(var(--a) * -1)) scale(0);
       animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  70% { transform: rotate(var(--a)) translateY(-70px) rotate(calc(var(--a) * -1)) scale(1); opacity: 1;
        animation-timing-function: ease-out; }
  100% { transform: rotate(var(--a)) translateY(-70px) rotate(calc(var(--a) * -1)) scale(1); opacity: 0; }
}

/* ---- Stage: Mon beside the game's hero, in a white circle the same size as Mon ---- */
.kit-stage { display: flex; gap: 16px; align-items: center; justify-content: center; }
.kit-stage .kit-hero {
  flex: none; width: var(--mon-size); height: var(--mon-size);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--card); box-shadow: var(--shadow);
  line-height: 1; letter-spacing: 0;
  font-size: min(calc(var(--mon-size) * .55), calc(var(--mon-size) * .7 / var(--glyphs, 1)));
}
.kit-stage .kit-hero svg { width: 72%; height: 72%; }

/* ---- Start screen (Kit.init adds .kit-start to #start) ---- */
.kit-start, .kit-finish { --mon-size: 120px; gap: 24px; }
.kit-finish { --mon-size: 128px; }
.kit-start .kit-title { font-size: clamp(2.4rem, 7vw, 4rem); }
.kit-start .kit-sub { font-size: 1.25rem; }
.kit-start .kit-stage { animation: kit-fade 300ms var(--ease-out) backwards; }
.kit-start .kit-title { animation: kit-enter var(--dur-enter) var(--ease-bounce) 120ms backwards; }
.kit-start .kit-sub { animation: kit-fade 300ms var(--ease-out) 240ms backwards; }
/* Breathing is affordance only: three slow cycles, then still. The button works from 0ms. */
.kit-start [data-start] { animation: kit-enter var(--dur-enter) var(--ease-bounce) 360ms backwards,
  kit-breathe 3.2s ease-in-out 1.2s 3; }

/* ---- Finish screen (built by Kit.finish) ---- */
.kit-finish-head { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.kit-finish .kit-hero { background: var(--sun); animation: kit-pop var(--dur-pop) var(--ease-bounce) backwards; }
.kit-finish .kit-title { animation: kit-pop var(--dur-pop) var(--ease-bounce) 200ms backwards; }
.kit-finish .kit-card { animation: kit-enter var(--dur-enter) var(--ease-bounce) 350ms backwards; }
.kit-finish .kit-card .kit-sub { max-width: none; }
.kit-finish .kit-lead { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.kit-finish-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  animation: kit-enter var(--dur-enter) var(--ease-bounce) 500ms backwards; }

@media (min-width: 700px) and (min-height: 701px) {
  .kit-start, .kit-finish { --mon-size: 160px; gap: 28px; }
  .kit-start .kit-sub { font-size: 1.8rem; }
}
/* Short windows such as a 1280×585 laptop: everything must clear the hills without scrolling. */
@media (max-height: 700px) {
  .kit-start { --mon-size: 104px; gap: 16px; }
  .kit-start .kit-title { font-size: 2.8rem; }
  .kit-start .kit-sub { font-size: 1.3rem; }
  .kit-start .kit-btn.big { min-height: 96px; font-size: 2.1rem; }
  .kit-finish { --mon-size: 88px; gap: 14px; } /* 88, not 80: Mon is a tap target */
  .kit-finish-head { flex-direction: row; gap: 16px; }
  .kit-finish .kit-hero { display: none; }
  .kit-finish .kit-title { font-size: 2.4rem; }
  .kit-finish .kit-card { padding: 18px 24px; }
  .kit-finish .kit-card .kit-sub { font-size: 1.3rem; }
}
/* Landscape phones: stage on the left, words and Play on the right. */
@media (max-height: 480px) and (orientation: landscape) {
  .kit-start {
    --mon-size: 96px; display: grid; grid-template-columns: auto auto; align-content: center;
    justify-content: center; justify-items: center; gap: 12px 24px;
    padding: 16px 112px calc(var(--hills-h) + 16px);
  }
  .kit-start .kit-stage { grid-row: 1 / span 3; }
  .kit-start .kit-title { font-size: 2.2rem; }
  .kit-start .kit-sub { font-size: 1.2rem; }
  .kit-start .kit-btn.big { min-height: 88px; font-size: 2rem; }
  .kit-finish { padding: 16px 112px calc(var(--hills-h) + 16px); }
}

/* ---- Shared animations ---- */
.kit-wiggle { animation: kit-wiggle 0.5s ease; }
@keyframes kit-wiggle {
  0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); }
}
.kit-pop { animation: kit-pop var(--dur-pop) var(--ease-bounce); }
@keyframes kit-pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
.kit-float { animation: kit-float 3s ease-in-out infinite; }
@keyframes kit-float { 50% { transform: translateY(-12px); } }
/* Fill is backwards, not both: once finished the element returns to its own styles, so presses
   and hovers still work, and with no animation at all the element is fully visible. */
.kit-enter { animation: kit-enter var(--dur-enter) var(--ease-bounce) backwards;
  animation-delay: calc(var(--d0, 0ms) + var(--i, 0) * var(--stagger)); }
@keyframes kit-enter { from { transform: translateY(24px) scale(.96); opacity: 0; } }
.kit-fade { animation: kit-fade 300ms var(--ease-out) backwards; animation-delay: var(--d0, 0ms); }
@keyframes kit-fade { from { opacity: 0; } }
.kit-correct { animation: kit-correct 400ms var(--ease-bounce), kit-ring 600ms var(--ease-out); }
@keyframes kit-correct { 50% { transform: scale(1.15); } }
@keyframes kit-ring {
  from { box-shadow: 0 0 0 10px color-mix(in srgb, var(--leaf) 40%, transparent); }
  to { box-shadow: 0 0 0 10px transparent; }
}
/* Uses the scale property, not transform, so it never fights the button press. */
.kit-breathe { animation: kit-breathe 3.2s ease-in-out 1.2s 3; }
@keyframes kit-breathe { 50% { scale: 1.04; } }

/* Behind the page content (above the sky, under the near hills), so confetti never covers
   the top bar, the progress dots, the question or any button. */
.kit-confetti { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.kit-confetti i { position: absolute; top: -20px; border-radius: 4px; animation: kit-fall 1.6s ease-in forwards; }
.kit-confetti i.dot { border-radius: 50%; }
@keyframes kit-fall { to { transform: translateY(110vh) rotate(540deg); } }

.kit-bridge-emoji { font-size: 6rem; line-height: 1; }

/* Break nudge: centred with margins (not a transform) so its pop entrance cannot shift it. */
.kit-nudge {
  position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 200;
  width: calc(100% - 32px); max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}

/* Calm rule: after 30s without input, Mon, the hero, the Play button and the sky settle.
   Clouds and sun pause in place rather than jumping back to the start. */
.kit-calm .kit-mon.idle .mon-body,
.kit-calm .kit-mon.idle .mon-antenna-l,
.kit-calm .kit-mon.idle .mon-antenna-r,
.kit-calm .kit-float { animation: none; }
.kit-calm .kit-start [data-start] { animation-name: kit-enter, none; }
.kit-calm .kit-sun-rays, .kit-calm .kit-cloud { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Living scene: smiling, wobbling sun; clouds that scurry away when tapped ---- */
.kit-sun-face { transform-box: view-box; transform-origin: 70px 70px; animation: kit-sun-wobble 4s ease-in-out infinite; }
.kit-sun-eyes { transform-box: view-box; transform-origin: 70px 64px; animation: kit-sun-blink 5s infinite; }
.kit-sun-smile { transform-box: view-box; transform-origin: 70px 84px; animation: kit-sun-smile 4s ease-in-out infinite; }
@keyframes kit-sun-wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-5deg) scale(1.03); }
  30% { transform: rotate(4deg) scale(1.03); }
  40% { transform: rotate(-3deg); }
  50% { transform: rotate(0) scale(1); }
}
@keyframes kit-sun-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes kit-sun-smile { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.18, 1.25); } }
.kit-sun.giggle .kit-sun-face { animation: kit-sun-giggle 0.7s var(--ease-bounce); }
@keyframes kit-sun-giggle {
  0% { transform: scale(1); } 20% { transform: scale(1.18) rotate(-8deg); } 40% { transform: scale(1.12) rotate(8deg); }
  60% { transform: scale(1.15) rotate(-6deg); } 100% { transform: scale(1) rotate(0); }
}
.kit-cloud { translate: 0 0; transition: translate 0.9s var(--ease-out), scale 0.3s var(--ease-bounce); }
.kit-cloud.flee { translate: 38vw -26px; scale: 0.85 1.1; transition: translate 0.5s var(--ease-out), scale 0.2s ease; }

/* ---- Bouncing title letters ---- */
.kit-letter { display: inline-block; animation: kit-letter-in 0.6s var(--ease-bounce) both, kit-letter-bob 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 60ms), calc(1s + var(--i) * 120ms); }
.kit-letter.jump { animation: kit-letter-jump 0.5s var(--ease-bounce); }
@keyframes kit-letter-in { from { transform: translateY(-40px) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kit-letter-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kit-letter-jump { 0% { transform: none; } 40% { transform: translateY(-22px) rotate(-8deg) scale(1.2); } 100% { transform: none; } }

/* ---- Stars and levels ---- */
.kit-level { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kit-level-pill { font-weight: 700; font-size: 1.25rem; background: var(--ink); color: #fff; border-radius: 999px; padding: 4px 18px; }
.kit-level-finish .kit-level-pill { background: var(--sun); color: var(--ink); font-size: 1.5rem; padding: 6px 22px; }
.kit-level-finish.champion .kit-level-pill { background: var(--coral); color: var(--ink); }
.kit-stars { display: flex; gap: 4px; justify-content: center; }
.kit-star { font-size: 2.2rem; line-height: 1; color: rgba(35, 49, 90, 0.18); text-shadow: 0 2px 0 rgba(255,255,255,0.6); }
.kit-star.on { color: var(--sun); text-shadow: 0 3px 0 #e0a800, 0 0 12px rgba(255, 201, 60, 0.6); }
.kit-level-finish .kit-star { font-size: 3rem; }
.kit-star.on { animation: kit-star-in 0.5s var(--ease-bounce) both; animation-delay: calc(var(--i) * 90ms); }
.kit-star.fresh { animation: kit-star-fresh 1.1s var(--ease-bounce) both 0.8s; }
@keyframes kit-star-in { from { transform: scale(0.2) rotate(-90deg); } to { transform: none; } }
@keyframes kit-star-fresh {
  0% { transform: scale(0) rotate(-180deg); color: rgba(35,49,90,0.18); }
  60% { transform: scale(1.7) rotate(15deg); color: var(--sun); }
  100% { transform: none; color: var(--sun); }
}

@media (prefers-reduced-motion: reduce) {
  .kit-sun-face, .kit-sun-eyes, .kit-sun-smile, .kit-letter, .kit-star { animation: none !important; }
  .kit-cloud { transition: none; }
}
.kit-calm .kit-sun-face, .kit-calm .kit-sun-smile, .kit-calm .kit-letter { animation-play-state: paused; }