body {
    margin: 0;
    font-family: Poppins, Arial, sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #ff9ed1, #d784ff);
}
/* animasi fruit */
.fruit {
    position: absolute;
    width: 95px;
    opacity: 0.85;
    animation: float 7s infinite ease-in-out;
    pointer-events: none; 
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
}

/* Posisi lebih seimbang & tidak menutupi teks */
.f1 { top: 6%; left: 12%; animation-delay: .3s; }
.f2 { top: 12%; right: 18%; animation-delay: 1.2s; }
.f3 { top: 48%; right: 8%; animation-delay: .7s; }
.f4 { top: 72%; left: 20%; animation-delay: 1.6s; }
.f5 { top: 28%; left: 60%; animation-delay: .5s; }
.f6 { top: 68%; right: 22%; animation-delay: 1s; }
.f7 { top: 40%; left: 10%; animation-delay: .9s; }
.f8 { top: 82%; left: 70%; animation-delay: 1.4s; }
.f9 { top: 18%; right: 46%; animation-delay: .6s; }
.f10 { top: 80%; right: 10%; animation-delay: 1.8s; }

/* Smooth floating animation */
@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-18px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(22px); }
  100% { transform: translateX(0); }
}

.fruit {
    width: clamp(70px, 7vw, 105px);
}

/* leaderboard */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.rank-up {
  animation: rankUp 0.6s ease;
  background: #d2ffdf !important; /* hijau */
}

.rank-down {
  animation: rankDown 0.6s ease;
  background: #ffd2d2 !important; /* merah */
}

@keyframes rankUp {
  from { transform: translateY(10px); opacity: 0.4; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes rankDown {
  from { transform: translateY(-10px); opacity: 0.4; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes rankFlashUp {
  0% { background: rgba(0,255,0,0.7); }
  100% { background: rgba(0,255,0,0.2); }
}

@keyframes rankFlashDown {
  0% { background: rgba(255,0,0,0.7); }
  100% { background: rgba(255,0,0,0.2); }
}

/* Difficulty Tabs */
.difficulty-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.difficulty-tabs button {
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  background: #d2b6ff;
  font-weight: 600;
  transition: 0.25s;
}

.difficulty-tabs button.active {
  background: #8e00ff;
  color: white;
  transform: scale(1.1);
}