/* MindBloom 2.0 - Cozy Storybook Styling */
:root {
  --color-sage: #9CAF88;
  --color-cream: #FDFBF7;
  --color-warm-pink: #F4C2C2;
  --color-soft-lavender: #D8B4E2;
  --color-soft-gold: #FBE7A1;
  --color-dark-wood: #5C4D3D;
  --color-soft-brown: #8D7B68;
}

body {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-up {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbar for cozy menus */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #F4EDE2;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: #D5C2AF;
  border-radius: 999px;
}

/* Joystick styles */
#joystick-base {
  touch-action: none;
}

/* Floating interactive bubbles in mini game */
.floating-bubble {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(162, 222, 245, 0.5) 60%, rgba(116, 185, 255, 0.7));
  box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: transform 0.15s ease-out;
}

.floating-bubble:active {
  transform: scale(1.15);
}

/* Mood Button Active States */
.mood-btn.selected {
  outline: 3px solid #8FA876;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(143, 168, 118, 0.3);
}

/* Prevent accidental iOS pinch/drag gestures */
html, body {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}