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

:root {
  --space-dark: #0a0a1a;
  --space-purple: #1a1035;
  --space-blue: #0d1b3e;
  --neon-green: #39ff14;
  --neon-pink: #ff2d95;
  --neon-cyan: #00f5ff;
  --neon-purple: #bf5fff;
  --pastel-mint: #a8f0d4;
  --pastel-lavender: #c4b5fd;
  --shell-color: #b8f0d8;
  --shell-inner: #1a1040;
}

body {
  background: var(--space-dark);
  font-family: 'Fredoka', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Stars background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 15% 85%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 45% 50%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 80% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 60% 75%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.5), transparent),
    radial-gradient(ellipse at 20% 50%, rgba(100, 50, 200, 0.08), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(0, 100, 200, 0.06), transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(150, 0, 150, 0.05), transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Game Shell */
.game-shell {
  background: linear-gradient(145deg, #b8f0d8, #96d4bb, #c4b5fd);
  border-radius: 40px 40px 50px 50px;
  padding: 8px;
  box-shadow:
    0 0 40px rgba(184, 240, 216, 0.2),
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 2px 4px rgba(255,255,255,0.3);
  position: relative;
}

.game-shell::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 12px;
  right: 12px;
  height: 12px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
  border-radius: 50%;
}

.game-screen {
  background: linear-gradient(180deg, #0d0d2b, #1a1045, #0a0a20);
  border-radius: 34px 34px 44px 44px;
  overflow: hidden;
  position: relative;
}

/* Pixel font for stats */
.pixel-font {
  font-family: 'Silkscreen', monospace;
}

/* Alien animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes hungry-shake {
  0%, 100% { transform: translateX(0) translateY(0); }
  10% { transform: translateX(-3px) translateY(2px); }
  20% { transform: translateX(3px) translateY(-1px); }
  30% { transform: translateX(-2px) translateY(1px); }
  40% { transform: translateX(2px) translateY(-2px); }
  50% { transform: translateX(0) translateY(3px); }
  60% { transform: translateX(-2px) translateY(-1px); }
  70% { transform: translateX(3px) translateY(2px); }
  80% { transform: translateX(-3px) translateY(-2px); }
  90% { transform: translateX(2px) translateY(1px); }
}

@keyframes happy-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-20px) scale(1.05); }
  50% { transform: translateY(0) scale(0.95); }
  75% { transform: translateY(-10px) scale(1.02); }
}

@keyframes tired-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(2px) rotate(-3deg); }
  75% { transform: translateY(2px) rotate(3deg); }
}

@keyframes sleeping-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes sad-droop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(5px) scale(0.97); }
}

@keyframes eating-chomp {
  0%, 100% { transform: scale(1) translateY(0); }
  15% { transform: scale(1.1) translateY(-5px); }
  30% { transform: scale(0.95) translateY(3px); }
  45% { transform: scale(1.08) translateY(-3px); }
  60% { transform: scale(0.97) translateY(2px); }
  75% { transform: scale(1.05) translateY(-2px); }
  90% { transform: scale(0.98) translateY(1px); }
}

@keyframes playing-spin {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-25px) rotate(90deg) scale(1.1); }
  50% { transform: translateY(0) rotate(180deg) scale(1); }
  75% { transform: translateY(-15px) rotate(270deg) scale(1.05); }
  100% { transform: translateY(0) rotate(360deg) scale(1); }
}

@keyframes egg-wobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
}

@keyframes egg-crack {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  30% { transform: scale(1.1) rotate(-5deg); }
  50% { transform: scale(1.2) rotate(5deg); }
  70% { transform: scale(1.3) rotate(-3deg); }
  90% { transform: scale(1.5) rotate(0deg); opacity: 0.5; }
  100% { transform: scale(2) rotate(0deg); opacity: 0; }
}

@keyframes hatch-glow {
  0% { box-shadow: 0 0 20px rgba(57, 255, 20, 0.2); }
  50% { box-shadow: 0 0 60px rgba(57, 255, 20, 0.6), 0 0 100px rgba(0, 245, 255, 0.3); }
  100% { box-shadow: 0 0 20px rgba(57, 255, 20, 0.2); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes zFloat {
  0% { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) translateX(15px) scale(0.5); }
}

@keyframes speechBubble {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  10% { opacity: 1; transform: scale(1) translateY(0); }
  85% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.8) translateY(-5px); }
}

@keyframes particleBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0); }
}

@keyframes pulseWarning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes slideIn {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

@keyframes evolveGlow {
  0% { filter: brightness(1) saturate(1); box-shadow: 0 0 0 transparent; }
  50% { filter: brightness(2) saturate(2); box-shadow: 0 0 80px rgba(191, 95, 255, 0.8), 0 0 120px rgba(0, 245, 255, 0.4); }
  100% { filter: brightness(1) saturate(1); box-shadow: 0 0 0 transparent; }
}

@keyframes buttonPress {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes poopAppear {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes cleanSweep {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes gameOverFloat {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-200px) scale(0.3); opacity: 0; }
}

@keyframes cooldownSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-hungry { animation: hungry-shake 0.8s ease-in-out infinite; }
.animate-happy { animation: happy-bounce 1s ease-in-out infinite; }
.animate-tired { animation: tired-sway 2s ease-in-out infinite; }
.animate-sleeping { animation: sleeping-breathe 2s ease-in-out infinite; }
.animate-sad { animation: sad-droop 2s ease-in-out infinite; }
.animate-eating { animation: eating-chomp 0.6s ease-in-out; }
.animate-playing { animation: playing-spin 1s ease-in-out; }
.animate-egg-wobble { animation: egg-wobble 0.6s ease-in-out infinite; }
.animate-egg-crack { animation: egg-crack 1.5s ease-in-out forwards; }
.animate-pulse-warning { animation: pulseWarning 1s ease-in-out infinite; }
.animate-speech { animation: speechBubble 4s ease-in-out forwards; }
.animate-slide-in { animation: slideIn 0.4s ease-out; }
.animate-button-press { animation: buttonPress 0.2s ease-in-out; }

/* Scrollbar */
::-webkit-scrollbar { width: 0; }

/* Settings panel */
.settings-panel {
  transition: transform 0.3s ease-out;
}

/* Stat bar gradient */
.stat-bar-fill {
  transition: width 0.5s ease-out;
}

/* Sleep overlay */
.sleep-overlay {
  background: radial-gradient(ellipse at center, rgba(10, 10, 40, 0.6), rgba(10, 10, 40, 0.85));
  transition: opacity 0.5s ease;
}

/* Toast container */
.toast-container {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
  width: 90%;
}