/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
  --color-bg: #FFF9F0;
  --scene-sky: #D6EEFF;
  --scene-ground: #8BC34A;
  --anim-duration: 500ms;
  --min-touch: 48px;
  --fly-x: 0px;
  --fly-y: 0px;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ─── App shell ──────────────────────────────────────────────────────────── */
#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ─── Scene viewport ─────────────────────────────────────────────────────── */
#scene-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--scene-sky);
  overflow: hidden;
}

/* ─── Scene world — pan translation target ───────────────────────────────── */
/* All positioned content (bg image, tappables, hedgehog) lives here.        */
/* Pan is applied as translateX(-offset). Width set inline by engine.        */
.scene-world {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.scene-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* ─── Tappable elements ──────────────────────────────────────────────────── */
.tappable {
  position: absolute;
  min-width: var(--min-touch);
  min-height: var(--min-touch);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 12px;
  /* Phase 1 placeholder appearance */
  background: rgba(255, 255, 255, 0.55);
}

.tappable[data-type="seed"]    { background: rgba(76, 175, 80, 0.45); }
.tappable[data-type="weather"] { background: rgba(144, 202, 249, 0.45); }
.tappable[data-type="animal"]  { background: rgba(255, 193, 7, 0.45); }
.tappable[data-type="tree"]    { background: rgba(109, 76, 65, 0.45); }
.tappable[data-type="water"]   { background: rgba(0, 188, 212, 0.45); }

.tappable--done {
  /* pointer-events stay on so closeSequence can fire when hedgehog is near */
}

/* Once SVG art is loaded, remove the placeholder box styling */
.tappable--has-art {
  background: none !important;
  border-radius: 0;
  width: auto;
  height: auto;
  overflow: visible;
}

.tappable--has-art svg {
  display: block;
  overflow: visible;
}

/* ─── Hedgehog component ─────────────────────────────────────────────────── */
.hedgehog-component {
  position: absolute;
  width: 80px;
  height: 72px;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 10;
}

.hedgehog-component svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hedgehog-speech-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 32px;
  background: #fff;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.hedgehog-speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
}

.hedgehog-speech-bubble.visible {
  opacity: 1;
}

/* ─── Loading screen ─────────────────────────────────────────────────────── */
#loading-screen {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 100;
  transition: opacity 0.5s ease;
}

#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

#loading-hedgehog {
  width: 72px;
  height: 64px;
  animation: bob 1.4s ease-in-out infinite;
}

/* ─── Animation keyframes ────────────────────────────────────────────────── */

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-10deg); }
  30%  { transform: rotate(10deg); }
  50%  { transform: rotate(-8deg); }
  65%  { transform: rotate(8deg); }
  80%  { transform: rotate(-4deg); }
  90%  { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.09); }
}

@keyframes grow-stem {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes bloom {
  0%   { transform: scale(0.1); }
  65%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes shrink-out {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0); opacity: 0; }
}

@keyframes raindrop-fall {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(220px); opacity: 0; }
}

@keyframes rainbow-in {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  15%  { opacity: 1; }
  80%  { clip-path: inset(0 0% 0 0);   opacity: 1; }
  100% { clip-path: inset(0 0% 0 0);   opacity: 0; }
}

@keyframes fly-to {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--fly-x), var(--fly-y)); }
}

@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(18px); }
}

@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.72; }
}

@keyframes yawn {
  0%   { transform: scale(1) translateY(0); }
  20%  { transform: scale(1.05) translateY(-4px); }
  55%  { transform: scale(1.02) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* ─── Animation classes ──────────────────────────────────────────────────── */

.anim-bob {
  animation: bob 2.4s ease-in-out infinite;
}

.anim-wiggle {
  animation: wiggle var(--anim-duration, 600ms) ease-in-out;
}

.anim-pulse {
  animation: pulse 2.8s ease-in-out infinite;
}

.anim-grow-stem {
  transform-origin: bottom center;
  animation: grow-stem var(--anim-duration, 500ms) ease-out forwards;
}

.anim-bloom {
  transform-origin: center;     /* override bottom-center from anim-grow-stem */
  animation: bloom var(--anim-duration, 600ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.anim-shrink-out {
  animation: shrink-out var(--anim-duration, 300ms) ease-in forwards;
}

.anim-rain .raindrop {
  position: absolute;
  width: 5px;
  height: 28px;
  border-radius: 3px;
  background: rgba(50, 110, 200, 0.82);
  /* Fixed 750ms fall — independent of --anim-duration which controls the rain step */
  animation: raindrop-fall 750ms ease-in forwards;
}

.anim-rainbow {
  animation: rainbow-in var(--anim-duration, 1200ms) ease-out forwards;
}

.anim-fly-to {
  animation: fly-to var(--anim-duration, 800ms) ease-in-out forwards;
}

.anim-drift {
  animation: drift 7s ease-in-out infinite;
}

.anim-shimmer {
  animation: shimmer 3.2s ease-in-out infinite;
}

.anim-yawn {
  animation: yawn var(--anim-duration, 1500ms) ease-in-out;
}

.anim-sleep {
  animation: bob 4s ease-in-out infinite;
  opacity: 0.82;
}

/* Hedgehog closed eyes when sleeping */
.hedgehog-component.is-sleeping .eye-open  { display: none; }
.hedgehog-component.is-sleeping .eye-closed { display: block; }
.hedgehog-component .eye-closed             { display: none; }

/* ─── Dance (celebration) ────────────────────────────────────────────────── */
@keyframes dance {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1);    }
  18%  { transform: translateY(-22px) rotate(100deg) scale(1.12); }
  36%  { transform: translateY(0)    rotate(200deg)  scale(1);    }
  54%  { transform: translateY(-18px) rotate(280deg) scale(1.12); }
  72%  { transform: translateY(0)    rotate(360deg)  scale(1);    }
  88%  { transform: translateY(-10px) rotate(360deg) scale(1.06); }
  100% { transform: translateY(0)    rotate(360deg)  scale(1);    }
}

.anim-dance {
  animation: dance 2.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Butterfly flap ─────────────────────────────────────────────────────── */
@keyframes butterfly-flap {
  0%   { transform: scaleY(1)   rotate(0deg); }
  25%  { transform: scaleY(0.5) rotate(-4deg); }
  50%  { transform: scaleY(1)   rotate(0deg); }
  75%  { transform: scaleY(0.5) rotate(4deg); }
  100% { transform: scaleY(1)   rotate(0deg); }
}

.anim-flap {
  animation: butterfly-flap 0.32s ease-in-out 3;
}

/* ─── Sun ray-burst ──────────────────────────────────────────────────────── */
@keyframes ray-burst {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1.5); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(2.0); opacity: 0; }
}

.sun-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  animation: ray-burst var(--anim-duration, 800ms) ease-out forwards;
}

/* Sun tappable — transparent so background sun shows through */
.tappable[data-id="sun"] {
  background: transparent;
}

/* ─── Snail shell states ─────────────────────────────────────────────────── */
.snail-head {
  transition: opacity 0.35s 0.05s ease-out, transform 0.35s 0.05s ease-out;
  transform-origin: 30% 100%;
}

.snail--shelled .snail-head {
  opacity: 0;
  transform: scaleY(0);
  transition: opacity 0.28s ease-in, transform 0.28s ease-in;
}

/* Ear twitch — targets the ear group in hedgehog SVG */
@keyframes ear-twitch {
  0%, 100% { transform: rotate(0deg); }
  30%       { transform: rotate(-15deg); }
  60%       { transform: rotate(8deg); }
}

.hedgehog-component.ear-twitching .hedgehog-ear {
  transform-origin: 50% 80%;
  animation: ear-twitch 0.5s ease-in-out;
}

/* ─── PWA install badge (parent-facing, top-right corner) ───────────────── */
#spri-install-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  padding: 6px 12px;
  background: rgba(255,255,255,0.88);
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-family: system-ui, sans-serif;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.72;
}

#spri-install-badge:hover,
#spri-install-badge:focus {
  opacity: 1;
}

/* ── Tappable z-index — sits above dusk overlay (z-index:2) ─────────────── */
.tappable {
  z-index: 3;
}

/* ─── Hedgehog walk ──────────────────────────────────────────────────────── */
/* --hog-dir controls facing: 1 = right (default), -1 = left */
.hedgehog-component           { --hog-dir: 1; }
.hedgehog-component.walk-left { --hog-dir: -1; }

@keyframes walk-bob {
  0%, 100% { transform: scaleX(var(--hog-dir)) translateY(0)    rotate(0deg); }
  25%       { transform: scaleX(var(--hog-dir)) translateY(-6px) rotate(-4deg); }
  75%       { transform: scaleX(var(--hog-dir)) translateY(-6px) rotate(4deg); }
}

/* Tap-to-walk gait (faster than idle wander — 0.25s vs 0.44s) */
.anim-walk {
  animation: walk-bob 0.25s ease-in-out infinite;
}

.hedgehog-component.is-walking {
  animation: walk-bob 0.44s ease-in-out infinite;
}

/* ─── Hedgehog bloom-react: happy bounce when a flower opens nearby ──────── */
@keyframes bloom-react {
  0%   { transform: scaleX(var(--hog-dir)) translateY(0)     rotate(0deg); }
  25%  { transform: scaleX(var(--hog-dir)) translateY(-12px) rotate(5deg); }
  55%  { transform: scaleX(var(--hog-dir)) translateY(0)     rotate(-3deg); }
  75%  { transform: scaleX(var(--hog-dir)) translateY(-6px)  rotate(2deg); }
  100% { transform: scaleX(var(--hog-dir)) translateY(0)     rotate(0deg); }
}

.hedgehog-component.bloom-react {
  animation: bloom-react 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Head-turn toward bee ───────────────────────────────────────────────── */
@keyframes head-turn {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  35%       { transform: rotate(4deg) translateX(5px); }
  65%       { transform: rotate(2deg) translateX(3px); }
}

.hedgehog-component.head-turning {
  animation: head-turn 0.55s ease-in-out;
}

/* ─── Spine twitch when robin hops past ──────────────────────────────────── */
@keyframes spine-twitch {
  0%, 100% { transform: scaleY(1); }
  25%       { transform: scaleY(1.12) translateY(-2px); }
  60%       { transform: scaleY(0.94) translateY(1px); }
}

.hedgehog-component.spine-twitching .hedgehog-spine {
  transform-origin: 50% 100%;
  animation: spine-twitch 0.38s ease-in-out;
}

/* ─── Hedgehog look-up (after rainbow) ───────────────────────────────────── */
@keyframes look-up {
  0%, 100% { transform: rotate(0deg); }
  40%       { transform: rotate(-8deg) translateY(-4px); }
  70%       { transform: rotate(-5deg) translateY(-3px); }
}

.hedgehog-component.look-up {
  animation: look-up 1.4s ease-in-out;
}

/* ─── Rain — bee hides, bee returns ─────────────────────────────────────── */
.tappable.rain-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* ─── Rain shelter leaf ──────────────────────────────────────────────────── */
.shelter-leaf {
  position: absolute;
  bottom: 100%;
  left: -2px;
  pointer-events: none;
  transform-origin: bottom left;
  animation: leaf-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes leaf-drop {
  from { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

@keyframes leaf-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.shelter-leaf.leaf-fade {
  animation: leaf-fade-out 0.6s ease-out forwards;
}

/* ─── Dusk overlay ───────────────────────────────────────────────────────── */
.scene-dusk-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 8s ease-in-out;
  background: linear-gradient(180deg,
    #1A1A3E  0%,
    #6B3FA0  25%,
    #E8611A  55%,
    #F4A460  80%,
    #F4A460  100%);
}

.scene-dusk-overlay.active {
  opacity: 0.78;
}

/* ─── Dusk star ──────────────────────────────────────────────────────────── */
.dusk-star {
  position: absolute;
  z-index: 4;
  cursor: pointer;
  touch-action: manipulation;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes star-twinkle {
  0%   { transform: scale(1)    rotate(0deg);  filter: brightness(1); }
  25%  { transform: scale(1.5)  rotate(18deg); filter: brightness(1.8); }
  60%  { transform: scale(1.2)  rotate(-8deg); filter: brightness(1.4); }
  100% { transform: scale(1)    rotate(0deg);  filter: brightness(1); }
}

.dusk-star.star-twinkle {
  animation: star-twinkle 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Honey drop ─────────────────────────────────────────────────────────── */
.honey-drop {
  position: absolute;
  z-index: 4;
  width: 44px;
  height: 58px;
  cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 3px 8px rgba(255,160,0,0.55));
}

@keyframes honey-bob {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-7px); }
}

.honey-bobbing {
  animation: honey-bob 1.4s ease-in-out infinite;
}

.honey-sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

/* ─── Extra rain clouds ──────────────────────────────────────────────────── */
.extra-rain-cloud {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* ─── Night animal hidden state ──────────────────────────────────────────── */
.tappable.night-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease;
}

/* ─── Night firefly — tappable ───────────────────────────────────────────── */
.night-firefly {
  position: absolute;
  z-index: 4;
  width: 32px;
  height: 32px;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}

.firefly-glow {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFEE58;
  box-shadow: 0 0 10px 5px #FFD600, 0 0 24px 10px rgba(255,214,0,0.4);
  animation: firefly-pulse 1.9s ease-in-out infinite;
}

@keyframes firefly-pulse {
  0%, 100% { opacity: 0.12; transform: scale(0.4); }
  50%       { opacity: 1;    transform: scale(1);   }
}

@keyframes firefly-flash {
  0%   { opacity: 1;   transform: scale(1.0); }
  30%  { opacity: 1;   transform: scale(2.2); box-shadow: 0 0 24px 12px #FFD600, 0 0 48px 20px rgba(255,214,0,0.7); }
  100% { opacity: 0.4; transform: scale(0.6); }
}

.firefly-glow.firefly-flash {
  animation: firefly-flash 0.4s ease-out forwards;
}

/* ─── Moon ring (tap ripple) ─────────────────────────────────────────────── */
.moon-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(200,223,237,0.85);
  pointer-events: none;
  z-index: 4;
}

/* ─── Dusk moon — tappable ───────────────────────────────────────────────── */
.dusk-moon {
  position: absolute;
  z-index: 4;
  cursor: pointer;
  touch-action: manipulation;
}

/* ─── Proximity glow ─────────────────────────────────────────────────────── */
.proximity-glow {
  filter: drop-shadow(0 0 8px rgba(255, 220, 80, 0.7));
  transition: filter 0.4s ease;
}

/* ─── Hedgehog nuzzle — gentle lean toward nearest animal ───────────────── */
@keyframes hedgehog-nuzzle {
  0%, 100% { transform: rotate(0deg)  translateX(0); }
  35%       { transform: rotate(12deg) translateX(7px); }
  70%       { transform: rotate(6deg)  translateX(4px); }
}

.anim-hedgehog-nuzzle {
  animation: hedgehog-nuzzle 1.2s ease-in-out;
}

/* ─── Bounce — spring-scale pop ─────────────────────────────────────────── */
@keyframes bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18) translateY(-7px); }
  60%  { transform: scale(0.95) translateY(0); }
  80%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.anim-bounce {
  animation: bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-bob,
  .anim-wiggle,
  .anim-pulse,
  .anim-grow-stem,
  .anim-bloom,
  .anim-shrink-out,
  .anim-rain .raindrop,
  .anim-rainbow,
  .anim-fly-to,
  .anim-drift,
  .anim-shimmer,
  .anim-yawn,
  .anim-sleep,
  .anim-dance,
  .anim-flap,
  .sun-rays,
  .hedgehog-component.ear-twitching .hedgehog-ear,
  .anim-walk,
  .hedgehog-component.is-walking,
  .hedgehog-component.head-turning,
  .hedgehog-component.spine-twitching .hedgehog-spine,
  .hedgehog-component.bloom-react,
  .hedgehog-component.look-up,
  .shelter-leaf,
  .scene-dusk-overlay,
  .dusk-star.star-twinkle,
  .honey-bobbing,
  .firefly-glow,
  .firefly-glow.firefly-flash,
  .tappable.night-hidden,
  .anim-hedgehog-nuzzle,
  .anim-bounce,
  .proximity-glow {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}