/* --- Minimal reset -----------------------------------------------------
   Strips default margins/padding and switches everything to border-box so
   layout math is predictable. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

:root {
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
}

body {
  /* Soft, warm sky gradient easing down toward the meadow, so the illustrated
     scene sits in real daylight rather than on flat gray. The SVG scene paints
     the sun, clouds and land over this. */
  background: linear-gradient(
    to bottom,
    #aee3f5 0%,    /* clear blue sky */
    #d6f0fa 40%,   /* paler sky near the horizon */
    #eaf6e0 62%,   /* hazy meadow light */
    #d8efc6 100%
  );
  color: #2a2320;
  min-height: 100vh;
  overflow: hidden;            /* the scene fills the viewport; no scroll */
}

.scene {
  /* Sits behind the kitten and ignores the pointer so it never interrupts the
     interactive critter. Fixed + full-viewport so the landscape stays put. */
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.landscape {
  /* The hand-drawn SVG scene, filling the viewport. */
  width: 100%;
  height: 100%;
  display: block;
}

/* Gentle life in the scene: drifting clouds, rising smoke, swaying sun,
   nodding flowers — slow and soft so the mood reads as calm and warm. */
.cloud-a { animation: drift 38s ease-in-out infinite; }
.cloud-b { animation: drift 52s ease-in-out infinite reverse; }
.sun     { animation: breathe 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.smoke   { animation: rise 6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.flower  { animation: nod 5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
.flower:nth-of-type(2) { animation-delay: -1.7s; }
.flower:nth-of-type(3) { animation-delay: -3.1s; }
.owl-eye { animation: blink 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(40px); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes rise {
  0%   { opacity: 0.75; transform: translateY(0) scale(1); }
  100% { opacity: 0;    transform: translateY(-18px) scale(1.3); }
}
@keyframes nod {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.1); }
}

/* --- Pond ripples ------------------------------------------------------
   Concentric rings that spread and fade on the water when the kitten strays
   over the pond. script.js sets this element's left/top to the pond's measured
   centre (the SVG scene scales/crops with the viewport, so the pixel position
   is read live) plus a scale that matches the pond's on-screen size, then
   toggles .splash to (re)play the rings. It sits above the background scene but
   below the kitten, and never eats pointer events. */
.pond-ripples {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}

/* Each ring is a flat ellipse (wider than tall) to sit believably on the
   water's perspective, centred on the element's origin and initially hidden. */
.pond-ripples .ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 26px;
  margin-left: -32px;
  margin-top: -13px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  opacity: 0;
}

/* Playing the splash: each ring expands outward and fades, the later rings
   staggered so they read as a single disturbance rippling across the surface. */
.pond-ripples.splash .ring {
  animation: ripple 1.3s ease-out;
}
.pond-ripples.splash .ring:nth-child(2) { animation-delay: 0.18s; }
.pond-ripples.splash .ring:nth-child(3) { animation-delay: 0.36s; }

@keyframes ripple {
  0%   { transform: scale(0.3); opacity: 0; }
  18%  { opacity: 0.75; }
  100% { transform: scale(2.7); opacity: 0; }
}

/* --- Interactive illustrated kitten ----------------------------------- */

#kitten {
  /* Fixed so the kitten floats freely above the page; script.js updates its
     top/left each frame as it flees the cursor. */
  position: fixed;
  top: 0;
  left: 0;
  width: 92px;
  height: 92px;
  z-index: 9999;
  overflow: visible;
  user-select: none;
  /* A soft shadow grounds the kitten on the meadow. */
  filter: drop-shadow(0 6px 5px rgba(60, 40, 20, 0.22));
  /* Hint the browser that transforms animate often. */
  will-change: top, left;
}

/* The art group is what script.js flips (scaleX) and bobs (translateY); its
   origin is the kitten's centre so flips look natural. */
#kitten-art {
  transform-box: fill-box;
  transform-origin: 50% 55%;
}

/* Ear pivots sit at each ear's base so they droop convincingly when scared. */
#k-ear-l { transform-box: fill-box; transform-origin: 40px 30px; }
#k-ear-r { transform-box: fill-box; transform-origin: 80px 30px; }

/* Pupils dilate from their own centre as fear rises. */
#k-pupils { transform-box: fill-box; transform-origin: center; }

/* The tail keeps a lazy, contented wag of its own. */
#k-tail {
  transform-box: fill-box;
  transform-origin: 88px 90px;
  animation: wag 2.6s ease-in-out infinite;
}
@keyframes wag {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(9deg); }
}

/* Smooth, fast transitions on the emotion properties so the face reacts in
   near-real-time as the cursor approaches, without visible stepping. */
#k-pupils,
#k-eyes-happy,
#k-eyes-open,
#k-brows,
#k-blush,
#k-mouth-calm,
#k-mouth-scared,
#k-sweat,
.ear {
  transition: opacity 0.12s linear, transform 0.12s ease-out;
}

/* --- Game: birds -------------------------------------------------------
   The hunt targets. script.js spawns each bird as a child of #birds and glues
   it to a tree's measured canopy each frame, so they ride the scene's
   scale/crop. The container spans the viewport and never eats pointer events
   (the kitten "catches" birds by proximity, not by clicking). */
.birds {
  position: fixed;
  inset: 0;
  z-index: 1;            /* above the scene + ripples, below the kitten */
  pointer-events: none;
}

/* One perched bird, centred on the px point script.js sets via left/top. The
   gentle hop keeps it lively while it waits to be eaten. */
.bird {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  transform-origin: center bottom;
  animation: hop 1.2s ease-in-out infinite;
  filter: drop-shadow(0 3px 2px rgba(60, 40, 20, 0.25));
}
.bird svg { width: 100%; height: 100%; display: block; }

@keyframes hop {
  0%, 100% { transform: translateY(0)   rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}

/* A caught bird puffs up and fades as the kitten gobbles it, then script.js
   removes the node once the animation has played. */
.bird.eaten {
  animation: gobble 0.32s ease-out forwards;
  pointer-events: none;
}
@keyframes gobble {
  0%   { transform: scale(1)   rotate(0);    opacity: 1; }
  100% { transform: scale(1.9) rotate(18deg); opacity: 0; }
}

/* A "+1" that floats up and fades where a bird was eaten. */
.plus-one {
  position: absolute;
  margin-left: -12px;
  margin-top: -12px;
  font-weight: 800;
  font-size: 1.3rem;
  color: #4caf50;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  animation: floatUp 0.75s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(6px) scale(0.7); }
  25%  { opacity: 1; transform: translateY(-6px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-34px) scale(1); }
}

/* --- Game: HUD ---------------------------------------------------------- */
.hud {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.18);
  font-weight: 700;
  color: #3a2a23;
  user-select: none;
  pointer-events: none;
}
.hud-score { font-size: 1.25rem; }
.hud-best  { font-size: 0.95rem; opacity: 0.75; }

/* A little pop when the score ticks up, toggled by script.js. */
#score { display: inline-block; transition: transform 0.12s ease-out; }
#score.bump { transform: scale(1.5); color: #e0612f; }

/* --- Game: help banner -------------------------------------------------- */
.help {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: 90vw;
  padding: 10px 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.15);
  font-size: 0.95rem;
  font-weight: 600;
  color: #3a2a23;
  pointer-events: none;
  /* Lingers, then fades away on its own. */
  animation: helpFade 7s ease-in-out forwards;
}
@keyframes helpFade {
  0%, 70% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}

/* --- Game: status shout ------------------------------------------------- */
.status {
  position: fixed;
  top: 38%;
  left: 50%;
  z-index: 10001;
  transform: translate(-50%, -50%) scale(0.7);
  font-size: 2.6rem;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
}
.status.show { animation: shout 1.3s ease-out forwards; }
.status.burn { color: #ff5a2c; }
.status.drown { color: #2f9fe0; }
.status.yum  { color: #4caf50; }
@keyframes shout {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52%) scale(1); }
}

/* --- Game: kitten death / rebirth feedback ------------------------------ */
/* Scorched by the sun: a deliberately over-the-top, comic scorch. The kitten
   flares white-hot, jitters in a panic, chars to a black crisp, then shrinks
   away into a puff of smoke (the burnEffect particles in script.js fly out
   around it at the same moment). transform-box/origin let us squash + spin the
   whole sprite from its feet without disturbing the JS-driven left/top. */
#kitten.burning {
  animation: burnFunny 1s ease-out;
  transform-box: fill-box;
  transform-origin: 50% 92%;
}
@keyframes burnFunny {
  0%   { filter: drop-shadow(0 6px 5px rgba(60,40,20,0.22)) saturate(3) brightness(1.9);
         transform: scale(1) rotate(0); }
  12%  { filter: drop-shadow(0 0 26px rgba(255,150,0,0.95)) saturate(6) brightness(1.6) hue-rotate(-15deg);
         transform: translateX(-5px) scale(1.12, 0.9) rotate(-9deg); }
  24%  { transform: translateX(6px) scale(0.9, 1.12) rotate(9deg); }
  36%  { filter: drop-shadow(0 0 22px rgba(255,70,0,0.95)) saturate(7) brightness(0.9) sepia(1) hue-rotate(-25deg);
         transform: translateX(-6px) scale(1.1, 0.92) rotate(-11deg); }
  48%  { transform: translateX(6px) scale(0.92, 1.1) rotate(11deg); }
  62%  { filter: brightness(0.12) contrast(1.4) drop-shadow(0 0 10px rgba(255,40,0,0.7));
         transform: translateX(-4px) scale(1.04) rotate(-5deg); }
  74%  { filter: brightness(0.1) contrast(1.4);
         transform: translateX(3px) scale(1) rotate(4deg); }
  100% { filter: brightness(0.1) contrast(1.4) opacity(0);
         transform: scale(0.15, 0.4) rotate(0) translateY(8px); }
}

/* Funny burn particles: flames, sparks and smoke that burst out from the
   kitten when it touches the sun. script.js spawns these on document.body at
   the burn point and sets each one's --dx/--dy fling vector. */
.burn-particle {
  position: fixed;
  z-index: 10002;
  font-size: 1.7rem;
  line-height: 1;
  margin-left: -0.85rem;
  margin-top: -0.85rem;
  pointer-events: none;
  user-select: none;
  animation: burnBurst 0.9s ease-out forwards;
}
@keyframes burnBurst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.5) rotate(50deg); }
}

/* The central smoke puff that lingers and balloons where the kitten vanished. */
.burn-puff {
  position: fixed;
  z-index: 10002;
  font-size: 3rem;
  line-height: 1;
  margin-left: -1.5rem;
  margin-top: -1.5rem;
  pointer-events: none;
  user-select: none;
  animation: burnPuff 0.95s ease-out forwards;
}
@keyframes burnPuff {
  0%   { opacity: 0; transform: scale(0.3) rotate(0); }
  25%  { opacity: 0.95; transform: scale(1.1) rotate(-8deg); }
  100% { opacity: 0; transform: scale(2.2) translateY(-26px) rotate(10deg); }
}

/* Plunged into the lake: a cool blue dunk. */
#kitten.drowning { animation: drown 0.6s ease-out; }
@keyframes drown {
  0%   { filter: drop-shadow(0 6px 5px rgba(60,40,20,0.22)) brightness(1); }
  40%  { filter: drop-shadow(0 0 18px rgba(50,160,224,0.9)) brightness(0.7) saturate(2) hue-rotate(160deg); }
  100% { filter: drop-shadow(0 6px 5px rgba(60,40,20,0.22)); }
}

/* Freshly reborn: blink translucent during the brief grace period so it's
   clear the kitten is momentarily safe. script.js adds/removes .reborn. */
#kitten.reborn { animation: reborn 0.4s ease-in-out 3; }
@keyframes reborn {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Respect users who prefer reduced motion: hold the scene still. The kitten's
   cursor-flee is an explicit interaction, so it remains. */
@media (prefers-reduced-motion: reduce) {
  .cloud-a, .cloud-b, .sun, .smoke, .flower, #k-tail, .bird {
    animation: none;
  }
}