/* ============================================
   UNIFIED CARD STYLE - applied to all lessons
   Overrides per-lesson card variants for consistency.
   Based on Lesson 1's vocab-card design.
   ============================================ */

/* Universal card base — applies to all main interactive cards
   NOTE: .wx-card and .sos-card excluded (dark-theme cards with white text). */
.vocab-card,
.num-card,
.day-card,
.country-card,
.comp-card,
.humble-card,
.job-card,
.phrase-card,
.ex-card,
.vocab-sm-card,
.tcm-card {
  background: white !important;
  border-radius: 20px !important;
  padding: 22px 18px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s !important;
  text-align: center !important;
  border: 2px solid transparent !important;
  position: relative !important;
  overflow: hidden !important;
  user-select: none;
}

.vocab-card:hover,
.num-card:hover,
.day-card:hover,
.country-card:hover,
.comp-card:hover,
.humble-card:hover,
.job-card:hover,
.phrase-card:hover,
.ex-card:hover,
.vocab-sm-card:hover,
.tcm-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14) !important;
}

.vocab-card:active,
.num-card:active,
.day-card:active,
.country-card:active,
.comp-card:active,
.humble-card:active,
.job-card:active,
.phrase-card:active,
.ex-card:active,
.vocab-sm-card:active,
.tcm-card:active {
  transform: scale(0.96) !important;
}

/* ============================================
   AUTO-INJECT LISTEN BUTTON via JS
   Cards w/o Listen button get one added.
   ============================================ */

.listen-btn-auto {
  margin-top: 14px;
  background: #f3f3f7;
  color: #1e1e2e;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nunito', sans-serif;
  pointer-events: none;
}

.playing .listen-btn-auto {
  background: #0e9e8e;
  color: white;
}

/* Wave bars animation */
.listen-btn-auto .wave-bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}
.listen-btn-auto .wave-bars span {
  width: 3px;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  transform: scaleY(0.5);
}
.playing .listen-btn-auto .wave-bars span:nth-child(1) { animation: wave-uni 0.6s ease-in-out 0s infinite; }
.playing .listen-btn-auto .wave-bars span:nth-child(2) { animation: wave-uni 0.6s ease-in-out 0.1s infinite; }
.playing .listen-btn-auto .wave-bars span:nth-child(3) { animation: wave-uni 0.6s ease-in-out 0.2s infinite; }
.playing .listen-btn-auto .wave-bars span:nth-child(4) { animation: wave-uni 0.6s ease-in-out 0.3s infinite; }
@keyframes wave-uni {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.5); }
}

/* Loop-mode pulse: card gives a brief bounce each time audio plays
   so user knows WHICH word is firing during 3×/5×/∞ loops. */
@keyframes lp-pulse-uni {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); box-shadow: 0 8px 28px rgba(14,158,142,0.30); }
  100% { transform: scale(1); }
}
.lp-pulse { animation: lp-pulse-uni 0.45s ease-out !important; }

/* "Now playing" state — scale up only, no border ring.
   Wide rows (dialogue / patterns / lang-box) get smaller scale to
   avoid awkward layout-jumps. */
.playing {
  transform: scale(1.08) !important;
  z-index: 5;
  position: relative;
}
.dialogue-bubble.playing,
.bubble.playing,
.lang-row.playing,
.pattern-row.playing,
.pattern-card.playing,
.dialogue-line.playing,
.review-card.playing,
.practice-item.playing {
  transform: scale(1.02) !important;
}

/* Top "Play All Lesson" sticky bar — position:fixed so always visible */
#lp-playall-bar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9998;
  background: linear-gradient(180deg, #fff 0%, #f8f9fc 100%);
  border-bottom: 2px solid #0e9e8e;
  padding: 10px 16px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
/* Push page content down so it's not hidden under fixed bar */
body { padding-top: 56px !important; }
#lp-playall-btn {
  background: linear-gradient(135deg,#0e9e8e,#0a7a6e);
  color: white; border: none; border-radius: 999px;
  padding: 9px 20px; font-size: 14px; font-weight: 900;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(14,158,142,.35);
  transition: transform .15s;
}
#lp-playall-btn:hover { transform: scale(1.03); }
#lp-playall-btn.playing-all { background: linear-gradient(135deg,#dc2626,#991b1b); }
#lp-playall-status { font-size:12px; color:#6b6b80; font-weight:700; }

/* Color accent strip on top — uses --card-accent or default red */
.vocab-card::before,
.num-card::before,
.day-card::before,
.country-card::before,
.comp-card::before,
.humble-card::before,
.job-card::before,
.phrase-card::before,
.ex-card::before,
.vocab-sm-card::before,
.tcm-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--card-accent, #e8412c);
  border-radius: 20px 20px 0 0;
}