/* ===== Global Resets & Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

/* ===== Keyboard Styles ===== */
.key-cap {
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
  transition: all 0.08s ease;
  user-select: none;
}
.key-cap:active, .key-cap.pressed {
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  transform: translateY(3px);
}
.key-cap.active-key {
  box-shadow: 0 0 0 4px rgba(244, 192, 37, 0.4), 0 4px 0 rgba(0,0,0,0.2);
  background: #f4c025 !important;
  color: #000 !important;
}
.key-cap.correct-key {
  background: #22c55e !important;
  color: white !important;
  box-shadow: 0 4px 0 #15803d;
}
.key-cap.wrong-key {
  background: #FF6B6B !important;
  color: white !important;
  box-shadow: 0 4px 0 #dc2626;
  animation: shake 0.3s ease;
}

/* ===== Finger Color Classes ===== */
.finger-pinky-l { border-bottom: 3px solid #FF6B6B; }
.finger-ring-l { border-bottom: 3px solid #f59e0b; }
.finger-middle-l { border-bottom: 3px solid #22c55e; }
.finger-index-l { border-bottom: 3px solid #3b82f6; }
.finger-index-r { border-bottom: 3px solid #8b5cf6; }
.finger-middle-r { border-bottom: 3px solid #22c55e; }
.finger-ring-r { border-bottom: 3px solid #f59e0b; }
.finger-pinky-r { border-bottom: 3px solid #FF6B6B; }
.finger-thumb { border-bottom: 3px solid #6b7280; }

/* ===== Hand Guide ===== */
.finger-guide-hands {
  transition: opacity 0.3s ease;
}
.hand-finger-active {
  animation: fingerPulse 1.2s ease-in-out infinite;
}
@keyframes fingerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== Flying Cat ===== */
.cat-container {
  transition: transform 0.3s ease-out;
}
.cat-flying {
  animation: catFly 2s ease-in-out infinite;
}
.cat-dropping {
  animation: catDrop 0.5s ease-in;
}

@keyframes catFly {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  25% { transform: translateY(-8px) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
  75% { transform: translateY(-10px) rotate(0deg); }
}
@keyframes catDrop {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(30px) rotate(15deg); }
}

/* ===== Flying Word Bursts ===== */
.sky-flying-word {
  position: absolute;
  transform: translateX(-50%);
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  white-space: nowrap;
  animation: wordFlySky var(--word-flight-duration, 10s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sky-flying-word-vi {
  color: #0f766e;
  background: rgba(240, 253, 250, 0.94);
  border-color: rgba(167, 243, 208, 0.95);
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.24);
}
@keyframes wordFlySky {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.84); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--word-drift-x, 0px)), calc(-1 * var(--word-rise-y, 260px))) scale(1.06); }
}

/* ===== Animations ===== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes starPop {
  0% { opacity: 0; transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.3) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes comboFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes altitudeWarn {
  0%, 100% { background-color: #FF6B6B; }
  50% { background-color: #ff9999; }
}

.anim-slide-up { animation: slideUp 0.4s ease-out; }
.anim-fade-in { animation: fadeIn 0.3s ease; }
.anim-pop-in { animation: popIn 0.4s ease-out; }
.anim-star-pop { animation: starPop 0.5s ease-out forwards; }
.anim-combo-flash { animation: comboFlash 0.3s ease; }

/* ===== Screen Transitions ===== */
.screen { animation: fadeIn 0.3s ease; }

/* ===== Path Line (Lesson Map) ===== */
.path-line {
  stroke-dasharray: 12, 12;
  stroke-linecap: round;
}

/* ===== Confetti Background ===== */
.confetti-bg {
  background-color: #f8f8f5;
  background-image:
    radial-gradient(#f4c025 2px, transparent 2px),
    radial-gradient(#ef4444 2px, transparent 2px),
    radial-gradient(#3b82f6 2px, transparent 2px),
    radial-gradient(#22c55e 2px, transparent 2px);
  background-size: 60px 60px, 80px 80px, 70px 70px, 90px 90px;
  background-position: 0 0, 20px 40px, 40px 10px, 60px 60px;
}

/* ===== Pattern Background ===== */
.pattern-bg {
  background-color: #f0f9ff;
  background-image: radial-gradient(#bae6fd 2px, transparent 2px);
  background-size: 24px 24px;
}

/* ===== Toggle Switch ===== */
.toggle-switch {
  position: relative;
  width: 4rem;
  height: 2.25rem;
  background: #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.3s;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.toggle-switch.active { background: #f4c025; }
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 1.75rem;
  height: 1.75rem;
  background: white;
  border-radius: 9999px;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch.active::after {
  transform: translateX(1.75rem);
}

/* ===== Typing Text Styles ===== */
.typed-correct { color: #16a34a; }
.typed-wrong { color: #dc2626; text-decoration: underline wavy #dc2626; }
.typed-current {
  background: rgba(244, 192, 37, 0.2);
  border-bottom: 3px solid #f4c025;
  border-radius: 2px;
  position: relative;
}
.typed-current-wrong {
  background: rgba(255, 107, 107, 0.18);
  border-bottom-color: #FF6B6B;
  animation: shake 0.25s ease;
}
.typed-pending { color: #9ca3af; }

/* ===== Altitude Bar ===== */
.altitude-bar {
  transition: width 0.3s ease-out;
}
.altitude-bar.low {
  animation: altitudeWarn 0.5s ease infinite;
}

/* ===== Material Symbols Fill ===== */
.fill-1 { font-variation-settings: 'FILL' 1; }

/* ===== Cloud Animation ===== */
@keyframes cloudDrift {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(calc(100vw + 100px)); }
}
.cloud-drift {
  animation: cloudDrift 30s linear infinite;
}

/* ===== Lesson Detail Modal ===== */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* ===== Avatar Selection ===== */
.avatar-option {
  transition: transform 0.2s, border-color 0.2s;
}
.avatar-option:hover {
  transform: translateY(-4px);
}
.avatar-option.selected {
  border-color: #f4c025;
}