/* 
  Hikode THR Game - Ramadhan Edu Theme (Flat, Chunky, Playful)
*/

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom Webkit Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(16, 185, 129, 0.1); /* emerald-500/10 */
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.4);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.8);
}

/* Background Pattern (Simple dots) */
.bg-pattern {
  background-image: radial-gradient(#047857 2px, transparent 2px);
  background-size: 30px 30px;
}

/* ========================================= */
/* CHUNKY UI COMPONENTS (Educational Style)  */
/* ========================================= */

.shadow-chunky {
  box-shadow: 0 6px 0 rgba(4, 120, 87, 0.15); /* emerald-700/15 */
}

/* Base Chunky Button */
.chunky-btn {
  border-radius: 1.25rem;
  font-weight: 800;
  transition: all 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}

/* Primary Button (Green) */
.chunky-btn-primary {
  background-color: #10b981; /* emerald-500 */
  color: white;
  border-bottom: 6px solid #047857; /* emerald-700 */
}
.chunky-btn-primary:active {
  transform: translateY(6px);
  border-bottom-width: 0px;
  margin-bottom: 6px;
}

/* Accent Button (Amber) */
.chunky-btn-accent {
  background-color: #f59e0b; /* amber-500 */
  color: white;
  border-bottom: 6px solid #d97706; /* amber-600 */
}
.chunky-btn-accent:active {
  transform: translateY(6px);
  border-bottom-width: 0px;
  margin-bottom: 6px;
}

/* ========================================= */
/* ANIMATIONS                                */
/* ========================================= */

/* Bounce-in for screens */
.animate-bounce-in {
  animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* Bounce slow for popup icons */
.animate-bounce-slow {
  animation: bounceSlow 2s ease-in-out infinite;
}

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

.popup-content.show {
  transform: scale(1);
  opacity: 1;
}

/* Envelope Card Base (Game 6) */
.envelope-card {
  aspect-ratio: 4/3;
  width: calc(33% - 8px);
  background-color: #fef3c7; /* amber-100 */
  border-radius: 12px;
  border: 3px solid #fcd34d; /* amber-300 */
  border-bottom: 6px solid #fbbf24; /* amber-400 */
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: transform 0.1s, border-bottom-width 0.1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.envelope-card:active {
  transform: translateY(4px);
  border-bottom-width: 2px;
}
.envelope-card.opened {
  transform: scale(0) rotate(20deg);
  opacity: 0;
  transition: all 0.5s ease-in;
}

/* Support Button Pulse */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ========================================= */
/* SPECIFIC MINI-GAME ANIMATIONS             */
/* ========================================= */

/* Ketupat Shake (Game 1) */
.shake-hard {
  animation: shakeLayer 0.2s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shakeLayer {
  0%, 100% { transform: translateX(0) rotate(0) scale(var(--scale, 1)); }
  25% { transform: translateX(-8px) rotate(-8deg) scale(calc(var(--scale, 1) + 0.05)); }
  75% { transform: translateX(8px) rotate(8deg) scale(calc(var(--scale, 1) + 0.05)); }
}

.burst-out {
  animation: burst 0.4s ease-out forwards;
}

@keyframes burst {
  0% { transform: scale(var(--scale, 1)); opacity: 1; }
  50% { transform: scale(calc(var(--scale, 1) * 1.5)); filter: brightness(1.5); }
  100% { transform: scale(0) rotate(45deg); opacity: 0; }
}

/* Scratch Off Details (Game 2) */
#scratch-canvas {
  /* Prevent scrolling while scratching on mobile */
  touch-action: none;
}

/* Claw Machine Flow (Game 3) */
.claw-drop {
  animation: clawExtend 1s forwards ease-in-out;
}
@keyframes clawExtend {
  0% { transform: translateY(0); }
  100% { transform: translateY(90px); }
}

.claw-return {
  animation: clawRetract 1s forwards ease-in-out;
}
@keyframes clawRetract {
  0% { transform: translateY(90px); }
  100% { transform: translateY(0); }
}

#claw-arm.move-left {
  left: 20px !important;
}
#claw-arm.move-center {
  left: 50% !important;
  transform: translateX(-50%);
}

.drop-chute {
  animation: fallChute 0.5s forwards ease-in;
}
@keyframes fallChute {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(100px) scale(0.5); opacity: 0; }
}

/* Lever Pull (Game 5) */
.lever-pull {
  animation: pullLever 0.5s ease-in-out forwards;
}
@keyframes pullLever {
  0% { transform: translateY(0); border-bottom-width: 4px; }
  50% { transform: translateY(12px); border-bottom-width: 0px; background-color: #d97706; }
  100% { transform: translateY(0); border-bottom-width: 4px; }
}

.drop-capsule {
  transform: translateY(0) !important;
}
.no-transition {
  transition: none !important;
}