/* ========================================
   RESET & SAFE AREA
   ======================================== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: sans-serif;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, #8be5ff, #98f9a5);

  /* Safari/iOS safe area */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

/* ========================================
   MAIN LAYOUT
   ======================================== */
body {
  margin: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #8be5ff, #98f9a5);
  overflow: hidden;
  font-family: sans-serif;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.game {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90vw;
  max-width: 460px;
  touch-action: none;
  margin-top: calc(-1 * env(safe-area-inset-top));
  margin-bottom: calc(-1 * env(safe-area-inset-bottom));
}


/* ========================================
   MONKEY
   ======================================== */
#monkey {
  width: 80%;
  max-width: 300px;
  user-select: none;
  touch-action: none;
  cursor: none;
  z-index: 1;
  animation: monkeyFloat 3s ease-in-out infinite;
}

@keyframes monkeyFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* ========================================
   HAND
   ======================================== */
#hand {
  width: 48px;
  height: 48px;
  position: fixed;
  pointer-events: none;
  transform: translate(-24px, -24px);
  z-index: 10;
  display: none;
}

/* ========================================
   HEARTS
   ======================================== */
#hearts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.heart {
  position: absolute;
  font-size: 24px;
  animation: floatUp 1s ease-out forwards;
}

.heart.bonus {
  font-size: 36px;
  color: #ff00aa;
  text-shadow: 0 0 6px white, 0 0 12px #ff00aa;
}

@keyframes floatUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-50px) scale(1.2); }
  100% { transform: translateY(-100px) scale(0.8); opacity: 0; }
}

/* ========================================
   BANANAS
   ======================================== */
.banana {
  position: absolute;
  font-size: 32px;
  animation: bananaFly 1.4s ease-out forwards;
}

.banana.big { font-size: 64px; }

@keyframes bananaFly {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-80px) scale(1.2) rotate(10deg); }
  100% { transform: translateY(-160px) scale(0.8) rotate(-20deg); opacity: 0; }
}

/* ========================================
   CONFETTI
   ======================================== */
.confetti {
  position: fixed;
  width: 8px;
  height: 14px;
  animation: confettiFall 2s linear forwards;
  z-index: 20;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(110vh) rotate(720deg); }
}

/* ========================================
   COUNTER
   ======================================== */
#counter {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  font-size: 22px;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 5px black;
  z-index: 15;
}

/* ========================================
   COPYRIGHT
   ======================================== */
.copyright {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: white;
  opacity: 0.7;
  text-shadow: 0 0 4px black;
  pointer-events: none;
}

/* ========================================
   MOBILE ADAPTIVE
   ======================================== */
@media (max-width: 400px) {
  #monkey { width: 90%; max-width: 250px; }
  #counter { font-size: 18px; }
  .heart { font-size: 20px; }
  .heart.bonus { font-size: 28px; }
  .banana { font-size: 26px; }
  .banana.big { font-size: 48px; }
}

/* ========================================
   DISABLE LONG PRESS MENU ON IMAGES / MONKEY
   ======================================== */
img, #monkey {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}