/**
 * Global reset and base styles
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/**
 * HTML element - prevent scrolling on mobile
 */
html {
  overflow: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

/**
 * Body styling - main canvas setup
 */
body {
  background-color: #7ab5a0;
  min-height: 100vh;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  transition: background-color 2s ease;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

/**
 * Global image selection prevention
 * REQUIREMENT: Prevent text selection highlighting (blue box) on all images
 * FUTURE: Images remain interactive objects for drag/catch mechanics
 * Images are treated as physical game objects, not selectable text
 */
img {
  /* Prevent text selection highlighting */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version */

  /* Prevent tap highlighting on mobile */
  -webkit-tap-highlight-color: transparent;

  /* Optimize for touch interactions */
  touch-action: manipulation;

  /* NOTE: We intentionally do NOT set:
   * - pointer-events: none (images remain interactive)
   * - draggable: false (will be handled via JS for catchable objects)
   * This allows future implementation of drag-to-catch mechanics
   */
}

/**
 * Main container for creature and effects
 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
}

/**
 * Main creature styles
 */
.creature {
  width: 400px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease, filter 0.5s ease;
  cursor: pointer;
  position: relative;
  z-index: 10;
  animation: float 4s ease-in-out infinite;
  /* Disable mobile touch highlighting and selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Prevent dragging */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  draggable: false;
}

.creature:hover {
  transform: scale(1.05);
}

/**
 * Floating animation for creature and sticker
 */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/**
 * Spore sprite styles
 */
.spore {
  position: absolute;
  width: 76px;
  height: 50px;
  pointer-events: none;
  z-index: 5;
  /* Prevent dragging */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  draggable: false;
}

/**
 * Spore explosion animation
 */
@keyframes explode {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rotation)) scale(0.3);
    opacity: 0;
  }
}

/**
 * Spore Sticker - positioned bottom-right of creature, floating with it
 */
.spore-sticker {
  position: absolute;
  width: 120px;
  height: 120px;
  bottom: calc(50% - 200px + 80px);
  /* Moved way up closer to creature */
  right: calc(50% - 200px - 20px);
  /* Position to the right of the creature */
  z-index: 20;
  animation: floatWithRotation 4s ease-in-out infinite;
  /* Custom animation with rotation */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
  cursor: pointer;
  /* Disable mobile touch highlighting and selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Prevent dragging */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  draggable: false;
}

.spore-sticker:hover {
  transform: rotate(15deg) scale(1.1);
}

/**
 * Float animation with rotation for the sticker
 */
@keyframes floatWithRotation {

  0%,
  100% {
    transform: translateY(0) rotate(15deg);
  }

  50% {
    transform: translateY(-10px) rotate(15deg);
  }
}

/**
 * Mobile responsiveness
 */
@media (max-width: 768px) {
  .creature {
    width: 300px;
    height: auto;
  }

  .spore-sticker {
    width: 90px;
    height: 90px;
    bottom: calc(50% - 150px + 60px);
    right: calc(50% - 150px - 15px);
  }
}

@media (max-width: 480px) {
  .creature {
    width: 250px;
    height: auto;
  }

  .spore-sticker {
    width: 70px;
    height: 70px;
    bottom: calc(50% - 125px + 50px);
    right: calc(50% - 125px - 10px);
  }
}