/* ===================== MIKA CHARACTER CSS v3 ===================== */

.mika-avatar {
  position: relative;
  width: 110px;
  height: 135px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 20px rgba(108,99,255,0.2));
}

.mika-avatar svg,
.mika-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mika-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mika-svg-wrap {
  width: 100%;
  height: 100%;
}

.coach-badge {
  position: absolute;
  right: -4px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  font-size: 14px;
}

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

.mika-float {
  animation: mikaFloat 2.4s ease-in-out infinite;
}

.mika-wave {
  animation: mikaWave 1.4s ease-in-out infinite;
  transform-origin: 70% 40%;
}

.mika-bounce {
  animation: mikaBounce 0.9s ease-in-out infinite;
  transform-origin: center bottom;
}

.mika-shake {
  animation: mikaShake 0.5s ease-in-out 3;
  transform-origin: center center;
}

.mika-sad {
  animation: mikaSad 2s ease-in-out infinite;
}

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

@keyframes mikaWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

@keyframes mikaBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.03); }
}

@keyframes mikaShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-2deg); }
  50% { transform: translateX(3px) rotate(2deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
}

@keyframes mikaSad {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(3px); opacity: 0.9; }
}

/* ===================== FINAL REVIEW MIKA ===================== */

.final-review-home-mika .mika-svg,
.final-review-home-mika svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: mikaFloat 2.4s ease-in-out infinite;
}

/* ===================== LESSON CONTENT HEADER ===================== */

.lesson-content-header {
  text-align: center;
  padding: 20px 0 16px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border, #E8EAFF);
}

.lesson-content-title {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 900;
  color: var(--primary, #6C63FF);
  margin: 10px 0 6px;
}

.lesson-content-teacher {
  font-size: 0.85rem;
  color: var(--text-muted, #6B7280);
  font-weight: 600;
}

/* ===================== VIDEOS SECTION ===================== */

.videos-section {
  margin: 24px 0;
}

.videos-title {
  color: var(--primary, #6C63FF);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.videos-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
  border-radius: 12px;
}

/* ===================== MEMORY TIPS ===================== */

.memory-tips {
  background: var(--primary-light, #EEF0FF);
  border: 2px solid rgba(108,99,255,0.2);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}

.memory-tips h3 {
  color: var(--primary, #6C63FF);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ===================== CONTENT BOTTOM NAV ===================== */

.content-bottom-nav {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px solid var(--border, #E8EAFF);
  flex-wrap: wrap;
}

.content-bottom-nav .btn { flex: 1; min-width: 140px; }

/* ===================== LESSON PROGRESS MINI ===================== */

.lesson-progress-mini {
  margin-top: 8px;
}

.lesson-progress-mini small {
  font-size: 0.72rem;
  color: var(--primary, #6C63FF);
  font-weight: 600;
}

/* ===================== EMPTY MESSAGE ===================== */

.empty-message {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-muted, #6B7280);
  font-size: 0.95rem;
  background: var(--bg, #F7F8FF);
  border-radius: 14px;
  border: 2px dashed var(--border, #E8EAFF);
}

/* ===================== HUDHUD 3D PNG ANIMATIONS ===================== */

@keyframes hudhudFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  75% { transform: translateY(-3px) rotate(-1deg); }
}

@keyframes hudhudBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}

@keyframes hudhudWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes hudhudShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-3deg); }
  50% { transform: translateX(4px) rotate(3deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
}

@keyframes hudhudPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Apply animations based on mood class */
.final-mika-coach.correct img, .final-mika-coach.reward img { animation: hudhudBounce 0.8s ease-in-out infinite; }
.final-mika-coach.wrong img, .final-mika-coach.sad img { animation: hudhudShake 0.5s ease-in-out 3; }
.final-mika-coach.thinking img, .final-mika-coach.hint img { animation: hudhudWiggle 1.5s ease-in-out infinite; }
.final-mika-coach img { animation: hudhudFloat 2.5s ease-in-out infinite; }

.final-review-home-mika img { animation: hudhudFloat 2.5s ease-in-out infinite; width: 100%; height: 100%; object-fit: contain; }
.character-avatar img { width: 100%; height: 100%; object-fit: contain; }
.mika-svg-wrap img { width: 100%; height: 100%; object-fit: contain; }


/* Summer Campaign 2026 */
@import url("./summer_campaign.css");


/* ============================================================
   Mika v75 UI Fix — Summer Modal + ADG New Badge
   ============================================================ */
.mika-new-badge{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:7px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:900;line-height:1.4;color:#fff;background:linear-gradient(135deg,#ff7a00,#ff006e,#7c3aed);box-shadow:0 0 8px rgba(255,122,0,.8);animation:mikaNewBadgeGlow 1.1s ease-in-out infinite alternate;vertical-align:middle}
@keyframes mikaNewBadgeGlow{from{transform:scale(1);filter:brightness(1);box-shadow:0 0 6px rgba(255,122,0,.7)}to{transform:scale(1.08);filter:brightness(1.35);box-shadow:0 0 10px rgba(255,122,0,.95),0 0 18px rgba(255,0,110,.75),0 0 26px rgba(124,58,237,.6)}}
.mika-summer-modal[hidden]{display:none!important}.mika-summer-modal{position:fixed;inset:0;z-index:999999;direction:rtl}.mika-summer-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.66);backdrop-filter:blur(6px)}.mika-summer-modal-panel{position:relative;width:min(1100px,calc(100% - 24px));max-height:calc(100vh - 36px);margin:18px auto;overflow:auto;border-radius:24px;background:#fff;color:#0f172a;box-shadow:0 24px 80px rgba(15,23,42,.38)}.mika-summer-modal-close{position:sticky;top:12px;margin-inline-start:auto;margin-inline-end:12px;display:flex;z-index:10;width:40px;height:40px;border:0;border-radius:999px;align-items:center;justify-content:center;background:#ef4444;color:#fff;font-size:28px;font-weight:900;cursor:pointer;box-shadow:0 8px 24px rgba(239,68,68,.35)}body.mika-modal-open{overflow:hidden}.mika-summer-shortcut{background:linear-gradient(135deg,#f97316,#facc15)!important;color:#111827!important;font-weight:900!important}.mika-adg-shortcut{position:relative}.mika-v74-shortcuts{gap:8px!important;flex-wrap:wrap!important}
.admin-table{width:100%;border-collapse:collapse;margin-top:14px;background:#111827;border-radius:14px;overflow:hidden}.admin-table th,.admin-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}.admin-table th{background:#1f2937;color:#fbbf24}.admin-btn{border:0;border-radius:10px;padding:7px 12px;font-weight:800;cursor:pointer;margin:2px}.admin-btn.approve{background:#22c55e;color:white}.admin-btn.reject{background:#ef4444;color:white}.empty-box{padding:18px;border-radius:14px;background:#1f2937;color:#cbd5e1;margin-top:12px}