@tailwind base;
@tailwind components;
@tailwind utilities;

/* iOS Safari dynamic viewport height fix */
.h-screen-dynamic {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Dynamic viewport height - adapts to toolbar */
}

@supports not (height: 100dvh) {
  .h-screen-dynamic {
    height: -webkit-fill-available;
  }
}

/* Focus indicators for keyboard navigation only */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid theme('colors.blue.500');
  outline-offset: 2px;
}

/* Remove default focus ring when using mouse/touch */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* Minimum touch target for accessibility */
.touch-target-min {
  min-height: 60px;
  min-width: 60px;
}

/* Custom animations for gamification */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse-fast {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce-in {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.1) rotate(2deg); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

.animate-pop {
  animation: pop 0.3s ease-out forwards;
}

.animate-pulse-fast {
  animation: pulse-fast 0.8s ease-in-out infinite;
}

.animate-bounce-in {
  animation: bounce-in 0.5s ease-out forwards;
}

.animate-flame {
  animation: flame-flicker 0.5s ease-in-out infinite;
}

/* Success flash - brief bright green pulse */
@keyframes success-flash {
  0% { background-color: rgb(34, 197, 94); } /* bright green */
  100% { background-color: rgb(240, 253, 244); } /* green-50 */
}

.animate-success-flash {
  animation: success-flash 0.4s ease-out forwards;
}