/* Jangu Design System — "The Living Toybox" */

/* Material Symbols defaults */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Body min-height for mobile */
html, body {
  overflow-x: hidden;
}
body {
  min-height: max(100dvh, 100vh);
  /* Enable :active on iOS Safari */
  -webkit-tap-highlight-color: transparent;
}

/* Ensure :active fires immediately on touch */
button, a, .card-press, .tactile-shadow {
  touch-action: manipulation;
}

/* Safe area insets for iOS */
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Tactile shadow — 3D pressed-button effect */
.tactile-shadow {
  box-shadow: 0 8px 0 0 #8a3410;
  transition: box-shadow 0.1s, transform 0.1s;
}
.tactile-shadow:active {
  box-shadow: 0 2px 0 0 #8a3410;
  transform: translateY(4px);
}

/* Secondary tactile variant */
.tactile-shadow-secondary {
  box-shadow: 0 8px 0 0 #004844;
  transition: box-shadow 0.1s, transform 0.1s;
}
.tactile-shadow-secondary:active {
  box-shadow: 0 2px 0 0 #004844;
  transform: translateY(4px);
}

/* Celebration gradient (radial glow) */
.celebration-gradient {
  background: radial-gradient(circle at center, #ff8c61 0%, transparent 70%);
}

/* Glassmorphic header */
.glass-header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Card press effect */
.card-press {
  transition: transform 0.15s ease;
}
.card-press:active {
  transform: scale(0.98);
}

/* Ghost border — felt, not seen */
.ghost-border {
  border: 1px solid rgba(171, 173, 174, 0.15);
}

/* Answer feedback glows */
.glow-correct {
  box-shadow: 0 0 20px rgba(0, 103, 97, 0.3), 0 0 40px rgba(124, 246, 236, 0.15);
  border-color: #7cf6ec;
}
.glow-incorrect {
  box-shadow: 0 0 20px rgba(179, 27, 37, 0.3);
  border-color: #fb5151;
}

/* Shake animation for wrong answers */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.shake {
  animation: shake 0.4s ease-in-out;
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Slide up */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-up {
  animation: slideUp 0.4s ease-out forwards;
}

/* Scale pop (for celebrations) */
@keyframes scalePop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.scale-pop {
  animation: scalePop 0.5s ease-out forwards;
}

/* Progress bar fill animation */
@keyframes fillWidth {
  from { width: 0; }
}
.animate-fill {
  animation: fillWidth 0.6s ease-out forwards;
}

/* Pulse for streak/lives */
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

/* Screen transitions */
#app > * {
  animation: fadeIn 0.2s ease-out;
}

/* Header should not animate in */
.glass-header {
  animation: none !important;
}

/* Offline indicator */
.offline-banner {
  background: #e6e8ea;
  color: #595c5d;
  text-align: center;
  padding: 4px 0;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Hide scrollbar but allow scroll */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}