/**
 * 🎨 Visual Enhancements - CSS Only (SAFE)
 * File ini HANYA berisi perbaikan visual
 * TIDAK mempengaruhi JavaScript atau logic game sama sekali
 * 
 * Cara menonaktifkan: Hapus import di index.html jika ada masalah
 */

/* ========================================
   1. ENHANCED BUTTON ANIMATIONS
   ======================================== */

/* Tombol dengan hover effect yang lebih menarik */
.btn-start,
.btn-action,
.btn-difficulty,
.btn-option {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-start:hover,
.btn-action:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 242, 255, 0.3);
}

.btn-start:active,
.btn-action:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(0, 242, 255, 0.2);
}

/* Ripple effect saat klik (CSS only) */
.btn-start::after,
.btn-action::after,
.btn-option::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.btn-start:focus:not(:active)::after,
.btn-action:focus:not(:active)::after,
.btn-option:focus:not(:active)::after {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(40, 40);
    opacity: 0;
  }
}

/* ========================================
   2. CORRECT/WRONG ANSWER EFFECTS
   ======================================== */

/* Glow effect saat jawaban benar */
.btn-option.correct {
  animation: correctPulse 0.6s ease-out;
  background: linear-gradient(135deg, #00c853, #00e676) !important;
  box-shadow: 0 0 30px rgba(0, 230, 118, 0.6);
}

@keyframes correctPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px 10px rgba(0, 230, 118, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(0, 230, 118, 0.6);
  }
}

/* Shake effect saat jawaban salah */
.btn-option.wrong {
  animation: wrongShake 0.5s ease-out;
  background: linear-gradient(135deg, #ff1744, #ff5252) !important;
  box-shadow: 0 0 30px rgba(255, 23, 68, 0.6);
}

@keyframes wrongShake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-8px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(8px);
  }
}

/* Shake effect untuk input fields (Math Battle) */
.wrong-shake,
input.wrong-shake,
#answer-input.wrong-shake {
  animation: wrongShake 0.5s ease-out;
  border-color: #ff1744 !important;
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.4) !important;
}

/* ========================================
   3. ENHANCED LOADING SPINNER
   ======================================== */

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-left-color: #00f2ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Modern loading dengan dots */
.loading-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.loading-dots span {
  width: 12px;
  height: 12px;
  background: #00f2ff;
  border-radius: 50%;
  animation: loadingBounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) {
  animation-delay: 0s;
}
.loading-dots span:nth-child(2) {
  animation-delay: 0.16s;
}
.loading-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes loadingBounce {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========================================
   4. SCORE/STATS ANIMATIONS
   ======================================== */

/* Animasi saat score berubah */
.score-animate {
  animation: scoreChange 0.3s ease-out;
}

@keyframes scoreChange {
  0% {
    transform: scale(1);
    color: inherit;
  }
  50% {
    transform: scale(1.3);
    color: #00f2ff;
    text-shadow: 0 0 20px rgba(0, 242, 255, 0.8);
  }
  100% {
    transform: scale(1);
    color: inherit;
  }
}

/* Floating +points effect */
.floating-points {
  position: fixed;
  pointer-events: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: #00f2ff;
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.8);
  animation: floatUp 1s ease-out forwards;
  z-index: 9999;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(1.5);
  }
}

/* ========================================
   5. PROGRESS BAR ENHANCEMENTS
   ======================================== */

.progress-fill,
.xp-progress-fill,
#progress {
  background: linear-gradient(90deg, #00f2ff, #7c3aed, #ff006e);
  background-size: 200% 100%;
  animation: progressGradient 2s linear infinite;
  position: relative;
  overflow: hidden;
}

.progress-fill::after,
.xp-progress-fill::after,
#progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes progressGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ========================================
   6. CARD HOVER EFFECTS
   ======================================== */

/* Memory cards, Question cards, etc */
.card,
.flashcard,
.question-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover,
.flashcard:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* ========================================
   7. DIFFICULTY BUTTONS
   ======================================== */

.btn-difficulty,
.btn-diff,
.btn-level {
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.btn-difficulty:hover,
.btn-diff:hover,
.btn-level:hover {
  border-color: #00f2ff;
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.3);
}

.btn-difficulty.active,
.btn-diff.active,
.btn-level.active {
  background: linear-gradient(135deg, #00f2ff, #7c3aed) !important;
  border-color: transparent;
  box-shadow: 0 5px 20px rgba(0, 242, 255, 0.4);
  transform: scale(1.05);
}

/* ========================================
   8. GAME OVER / RESULT SCREEN
   ======================================== */

#result-screen,
#game-over-screen,
.win-modal {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Final score dengan glow effect */
#final-score,
.final-score,
.go-score {
  text-shadow:
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px currentColor;
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    text-shadow:
      0 0 10px currentColor,
      0 0 20px currentColor,
      0 0 40px currentColor;
  }
  50% {
    text-shadow:
      0 0 20px currentColor,
      0 0 40px currentColor,
      0 0 60px currentColor;
  }
}

/* ========================================
   9. TUTOR OVERLAY IMPROVEMENTS
   ======================================== */

.tutor-overlay {
  backdrop-filter: blur(10px);
}

.tutor-box,
.tutor-container {
  animation: tutorSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tutorSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tutor-icon {
  animation: tutorBounce 2s ease-in-out infinite;
}

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

/* ========================================
   10. COMBO STREAK VISUAL
   ======================================== */

.combo-display {
  animation: comboFire 0.5s ease-out;
}

@keyframes comboFire {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Fire effect for high combo */
.combo-display.high-combo {
  animation:
    comboFire 0.5s ease-out,
    fireGlow 0.5s ease-in-out infinite alternate;
}

@keyframes fireGlow {
  0% {
    text-shadow:
      0 0 10px #ff6b00,
      0 0 20px #ff6b00;
    filter: hue-rotate(0deg);
  }
  100% {
    text-shadow:
      0 0 20px #ff0000,
      0 0 40px #ff0000;
    filter: hue-rotate(20deg);
  }
}

/* ========================================
   11. MOBILE TOUCH FEEDBACK
   ======================================== */

@media (hover: none) {
  /* Haptic-like visual feedback on touch */
  .btn-start:active,
  .btn-action:active,
  .btn-option:active,
  .btn-difficulty:active {
    transform: scale(0.95);
    opacity: 0.9;
  }

  /* Larger touch targets for mobile */
  .btn-option {
    min-height: 50px;
    padding: 15px 20px;
  }
}

/* ========================================
   12. ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus visible untuk keyboard navigation */
*:focus-visible {
  outline: 3px solid #00f2ff;
  outline-offset: 3px;
}

/* Reduced motion untuk user dengan vestibular disorders */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-option.correct {
    border: 3px solid #00ff00;
  }

  .btn-option.wrong {
    border: 3px solid #ff0000;
  }
}

/* ========================================
   13. STREAK/LEVEL BADGE ANIMATIONS
   ======================================== */

.streak-display,
.xp-display {
  transition: all 0.3s ease;
}

.streak-display:hover,
.xp-display:hover {
  transform: scale(1.02);
  box-shadow: 0 5px 20px rgba(0, 242, 255, 0.2);
}

/* Level up celebration pulse */
.level-up-notification {
  animation: levelUpBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* ========================================
   14. PIANO KEY ENHANCEMENTS
   ======================================== */

.key {
  transition: all 0.1s ease;
}

.key:hover {
  background: linear-gradient(180deg, #ffffff, #e0e0e0);
  transform: translateY(-2px);
}

.key.active {
  background: linear-gradient(180deg, #00f2ff, #0088cc) !important;
  transform: translateY(3px);
  box-shadow:
    0 5px 15px rgba(0, 242, 255, 0.5),
    inset 0 -5px 10px rgba(0, 0, 0, 0.2);
}

/* ========================================
   15. ZUMA/CANVAS GAME OVERLAYS
   ======================================== */

#game-hud {
  animation: hudSlideIn 0.5s ease-out;
}

@keyframes hudSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Game over screen untuk canvas games */
#game-over-screen {
  animation: gameOverFade 0.5s ease-out;
}

@keyframes gameOverFade {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}

/* ========================================
   16. SCREEN SHAKE (FUN FACTOR)
   ======================================== */
@keyframes shake-error {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px) rotate(-2deg);
  }
  50% {
    transform: translateX(8px) rotate(2deg);
  }
  75% {
    transform: translateX(-4px) rotate(-1deg);
  }
  100% {
    transform: translateX(0);
  }
}

.shake-active {
  animation: shake-error 0.4s ease-in-out !important;
}