* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none; /* Prevent text selection */
  -webkit-user-select: none;
  -webkit-user-drag: none; /* Prevent dragging images natively */
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Georgia", serif;
  background: #0d0820;
}

/* ── SCREENS ── */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.screen.active {
  display: block;
}

.screen.animate-in {
  animation: screenIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── FULL SCREEN BACKGROUND ── */
.screen-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* ── START SCREEN ── */
#start-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#start-group {
  --start-scale: 1.4; /* <-- CHANGE THIS VALUE to scale the title and button */
  transform: scale(var(--start-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(-10px, -2vh, 10px);
}

#title-img {
  width: min(78vw, 520px);
  object-fit: contain;
  animation:
    titleDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    titleDance 5s ease-in-out infinite 0.8s;
  /* filter: drop-shadow(0 6px 24px rgba(0,0,0,0.6)); */
}

@keyframes titleDrop {
  from {
    opacity: 0;
    transform: translateY(-40px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes titleDance {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-4px) rotate(1.5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-4px) rotate(-1.5deg);
  }
}

#start-btn {
  margin-top: -15vh; /* Bring button upward relative to title */
  background: none;
  border: none;
  cursor: pointer;
  animation:
    floatBtn 2.6s ease-in-out infinite,
    btnAppear 0.7s 0.3s both;
  filter: drop-shadow(0 8px 28px rgba(255, 200, 60, 0.6));
  transition: filter 0.2s;
}

#start-btn:hover {
  filter: drop-shadow(0 12px 36px rgba(255, 220, 80, 1)) brightness(1.12);
  animation-play-state: paused, paused;
}

#start-btn:active {
  transform: scale(0.93);
}

#start-btn img {
  width: min(62vw, 400px);
  display: block;
  object-fit: contain;
  animation: btnPulse 2.5s ease-in-out infinite;
}

@keyframes btnPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(255, 200, 60, 0));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 15px rgba(255, 200, 60, 0.4));
  }
}

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

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

/* ── MAIN SCREEN ── */
#fruit-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: auto;
  object-fit: contain;
  z-index: 1;
  pointer-events: auto; /* Allow fruit clicks */
  cursor: pointer;
  transition:
    transform 2.5s cubic-bezier(0.2, 0.8, 0.3, 1),
    filter 2.5s ease,
    top 2.5s cubic-bezier(0.2, 0.8, 0.3, 1),
    left 2.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

#fruit-img.glorious-reveal {
  padding-top: 20px;
  top: 60% !important;
  left: 50% !important;
  will-change: top, left, transform, filter;
  animation: fruitRevealFloat 2.5s ease-in-out infinite !important;
}

@keyframes fruitRevealFloat {
  0% {
    transform: translate(-50%, -50%) scale(1.12);
    filter: drop-shadow(0 0 20px rgba(255, 225, 55, 0.5));
  }
  50% {
    transform: translate(-50%, -50%) scale(1.18);
    filter: drop-shadow(0 0 50px rgba(255, 225, 55, 1));
  }
  100% {
    transform: translate(-50%, -50%) scale(1.12);
    filter: drop-shadow(0 0 20px rgba(255, 225, 55, 0.5));
  }
}

/* Leaf grid acts as container for all leaves */
#leaf-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

/* Each leaf image */
.bush-leaf {
  position: absolute;
  width: clamp(70px, 13vw, 180px);
  object-fit: contain;
  transform-origin: center;
  pointer-events: auto; /* Allow mousemove capture directly on leaf */
  will-change: transform; /* Hardware acceleration to fix lag */
}

/* ── END ANIMATION OVERLAYS ── */
#end-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}

#end-content.hidden {
  display: none;
}

#end-tap-img {
  position: absolute;
  top: 15vh;
  left: 50%;
  transform: translateX(-50%);
  max-width: 30vw;
  width: auto;
  height: auto;
  cursor: pointer;
  pointer-events: auto;
  animation:
    popIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both,
    pulseDance 2s ease-in-out infinite 1.8s;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(80px) scale(0.4);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px) scale(1.2);
  }
  80% {
    transform: translateX(-50%) translateY(5px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes pulseDance {
  0% {
    transform: translateX(-50%) scale(1) translateY(0) rotate(0deg);
  }
  25% {
    transform: translateX(-50%) scale(1.03) translateY(-3px) rotate(-1.5deg);
  }
  50% {
    transform: translateX(-50%) scale(1.06) translateY(-5px) rotate(0deg);
  }
  75% {
    transform: translateX(-50%) scale(1.03) translateY(-3px) rotate(1.5deg);
  }
  100% {
    transform: translateX(-50%) scale(1) translateY(0) rotate(0deg);
  }
}

/* sparkles */
.sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd700 55%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: sparkleFly var(--dur) var(--delay) ease-in-out infinite;
}

@keyframes sparkleFly {
  0% {
    opacity: 0.9;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-55px) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translateY(-110px) scale(0);
  }
}

/* Loading pulse */
@keyframes pulse {
  from {
    opacity: 0.4;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Loading balloon */
@keyframes balloon {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1.1);
  }
}

/* ── TUTORIAL OVERLAY ── */
#tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.4s ease-out;
}

#tutorial-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#tutorial-tap-img {
  max-width: 70vw;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 20px;
  filter: drop-shadow(0 4px 20px rgba(255, 215, 0, 0.7));
  animation:
    dropDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    pulseDanceCentered 2s ease-in-out infinite 0.8s;
}

@keyframes dropDown {
  from {
    opacity: 0;
    transform: translateY(-100px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulseDanceCentered {
  0% {
    transform: scale(1) translateY(0) rotate(0deg);
  }
  25% {
    transform: scale(1.03) translateY(-3px) rotate(-1.5deg);
  }
  50% {
    transform: scale(1.06) translateY(-5px) rotate(0deg);
  }
  75% {
    transform: scale(1.03) translateY(-3px) rotate(1.5deg);
  }
  100% {
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* %% GLOBAL LOGO %% */
#global-logo {
  /* TWEAKABLE COUNTERS / VARIABLES */
  --logo-scale: 200px; /* Adjust logo size here */
  --logo-bnw-amount: 0%; /* Adjust Black & White percentage (0% to 100%) */
  --logo-brightness: 0; /* Brightness: 0 for black before invert, 1 for normal */
  --logo-invert: 100%; /* Invert: 100% to turn black into white */
  --logo-shadow-horizontal: 0px; /* Shadow X offset */
  --logo-shadow-vertical: 0px; /* Shadow Y offset */
  --logo-shadow-blur: 10px; /* Shadow blur amount */
  --logo-shadow-color: rgba(0, 0, 0, 0.8); /* Shadow color */

  position: fixed;
  top: 16px; /* <-- CHANGE THIS VALUE to adjust top position */
  right: 16px; /* <-- CHANGE THIS VALUE to adjust right position */
  width: var(--logo-scale);

  /* Apply the black and white (grayscale), white-out (brightness/invert), and drop-shadow using the counters above */
  filter: grayscale(var(--logo-bnw-amount)) brightness(var(--logo-brightness))
    invert(var(--logo-invert))
    drop-shadow(
      var(--logo-shadow-horizontal) var(--logo-shadow-vertical)
        var(--logo-shadow-blur) var(--logo-shadow-color)
    );

  z-index: 2147483647;
  transition: opacity 0.3s;
}

#global-logo.hidden {
  opacity: 0;
  pointer-events: none;
}

#logo-top-shadow {
  /* TWEAKABLE COUNTER / VARIABLE */
  --top-shadow-on: 0; /* Set to 1 to turn ON the shadow, 0 to turn it OFF */

  opacity: var(--top-shadow-on);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 15vh; /* Adjust how far down it goes */
  /* Tweak counter: Adjust opacity in rgba below (0.0 to 1.0) */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 10px,
    transparent 100%
  );
  z-index: 2147483646; /* One below the logo */
  pointer-events: none; /* Don't block clicks */
}

/* ── CURSOR TRAIL SPARKLES ── */
.cursor-trail-sparkle {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

@keyframes cursorSparkleAnim {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(1) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, calc(-50% + 20px)) scale(0) rotate(180deg);
    opacity: 0;
  }
}

/* ── RESPONSIVE COMPATIBILITY ── */

@media screen and (max-width: 1024px) {
  #start-group {
    --start-scale: 1.25;
  }
  .bush-leaf {
    width: clamp(64px, 12vw, 150px);
  }
  #fruit-img {
    width: min(30vw, 130px); /* Tighter fruit size for tiny screens */
  }
}

@media screen and (max-width: 768px) {
  #start-group {
    --start-scale: 1.1;
  }
  .bush-leaf {
    width: clamp(56px, 15vw, 120px);
  }
  #fruit-img {
    width: min(35vw, 160px);
  }
  #end-tap-img {
    max-width: 60vw;
  }
}

@media screen and (max-width: 480px) {
  #start-group {
    --start-scale: 0.95;
  }
  #start-btn {
    margin-top: -12vh;
  }
  .bush-leaf {
    width: clamp(44px, 18vw, 92px);
  }
  #tutorial-tap-img {
    max-width: 85vw;
  }
  #end-tap-img {
    max-width: 80vw;
    top: 25vh; /* Standardized to match desktop relative distance */
  }
}

/* Specific handling for landscape on smaller devices */
@media screen and (max-height: 480px) and (orientation: landscape) {
  #start-group {
    --start-scale: 0.8;
  }
  #start-btn {
    margin-top: -6vh;
  }
  #end-tap-img {
    max-width: 30vw;
    top: 15vh;
  }
  #tutorial-tap-img {
    max-width: 40vw;
  }
  .bush-leaf {
    width: clamp(40px, 10vw, 80px);
  }
}