/* ============================================================
   LearnLithuanian — Home / Dashboard styles
   ============================================================ */

:root {
  --ll-green: #2F9E44;
  --ll-red: #E63946;
  --ll-yellow: #F9C74F;
  --ll-blue: #146BFF;
  --ll-blue-dark: #0B4EDB;
  --ll-navy: #0B1833;
  --ll-text: #1E293B;
  --ll-muted: #7B8494;
  --ll-border: #E5EAF0;
  --ll-bg: #FBFAF7;
  --ll-card: #FFFFFF;
  --ll-soft-green: #EEF9F0;
  --ll-soft-blue: #EEF6FF;
  --ll-soft-yellow: #FFF8E5;
  --ll-soft-red: #FFF1F1;
  --ll-soft-purple: #F3EEFB;
  --ll-disabled: #A5AAB3;
  --ll-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  --ll-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
  --ll-radius-lg: 28px;
  --ll-radius-md: 20px;
  --ll-radius-sm: 14px;
}

/* ---------- Base ---------- */
.ll-body {
  margin: 0;
  background: radial-gradient(circle at top left, #FFFFFF 0, var(--ll-bg) 46%, #F7F4EE 100%);
  background-attachment: fixed;
  color: var(--ll-text);
  font-family: "Nunito", "Poppins", system-ui, sans-serif;
  min-height: 100vh;
}

*:focus-visible {
  outline: 3px solid rgba(20, 107, 255, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

.ll-mobile-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background: transparent;
}

@media (min-width: 768px) {
  .ll-mobile-shell {
    max-width: 520px;
    box-shadow: 0 0 80px rgba(15, 23, 42, 0.08);
  }
}

.ll-page {
  padding: 14px 6px 16px;
}

@media (min-width: 576px) {
  .ll-page {
    padding-inline: 10px;
  }
}

/* ---------- Header ---------- */
.ll-app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: var(--ll-shadow-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ll-logo {
  text-decoration: none;
  font-size: clamp(1.45rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.ll-logo-green { color: var(--ll-green); }
.ll-logo-red { color: var(--ll-red); }

.ll-menu-btn {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  border: 1px solid var(--ll-border);
  background: #fff;
  box-shadow: var(--ll-shadow-soft);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ll-menu-btn:hover { transform: translateY(-1px); box-shadow: var(--ll-shadow); }
.ll-menu-btn:active { transform: scale(0.96); }

.ll-menu-btn span {
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: #4B5563;
}

/* ---------- Progress bar ---------- */
.ll-progress {
  height: 18px;
  background: #E9EDF2;
  border-radius: 999px;
  overflow: hidden;
}

.ll-progress-bar {
  height: 100%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) 8px,
      transparent 8px,
      transparent 16px
    ),
    linear-gradient(90deg, var(--ll-blue), #2584FF);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: width 0.8s ease;
}

/* ---------- Welcome card ---------- */
.ll-welcome-card {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border-radius: var(--ll-radius-sm);
  border: 1px solid rgba(249, 199, 79, 0.35);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 248, 229, 0.9)),
    #fff;
  box-shadow: var(--ll-shadow);
  align-items: center;
}

.ll-welcome-copy {
  position: relative;
  z-index: 2;
  text-align: center;
}

.ll-welcome-copy h1 {
  margin: 0 0 0px;
  color: var(--ll-navy);
  font-weight: 900;
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.ll-welcome-copy p {
  margin: 0;
  color: var(--ll-muted);
  font-size: clamp(1rem, 3.8vw, 1.25rem);
  font-weight: 700;
}

.ll-welcome-illustration {
  width: 42%;
  min-height: 120px;
  background: url("../images/lithuania-city-flag.svg") center / contain no-repeat;
}

@media (max-width: 390px) {
  .ll-welcome-copy { max-width: 100%; }
  .ll-welcome-illustration {
    position: absolute;
    right: -18px;
    bottom: -10px;
    opacity: 0.35;
    width: 58%;
  }
}

/* ---------- Course progress card ---------- */
.ll-course-progress-card {
  position: sticky;
  top: 78px;
  margin-top: 16px;
  padding: 16px 10px;
  background: var(--ll-card);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius-sm);
  box-shadow: var(--ll-shadow-soft);
  z-index: 50;
}

.ll-course-progress-card h2,
.ll-course-progress-card span {
  color: var(--ll-navy);
  font-weight: 900;
  font-size: clamp(1.3rem, 5vw, 1.85rem);
  margin: 0;
}

.ll-course-progress-card span {
  font-size: clamp(1rem, 4vw, 1.35rem);
  white-space: nowrap;
}

/* ---------- Module list ---------- */
.ll-module-list {
  margin-top: 14px;
  display: grid;
  gap: 16px;
}

.ll-module-card {
  padding: 16px;
  background: var(--ll-card);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius-md);
  box-shadow: var(--ll-shadow-soft);
  display: grid;
  grid-template-columns: 104px 1fr 32px;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ll-module-card:hover,
.ll-module-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ll-shadow);
  border-color: rgba(20, 107, 255, 0.25);
  outline: none;
}

.ll-module-thumb {
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ll-module-thumb img {
  width: 100%;
  object-fit: contain;
}

.ll-thumb-green { background: var(--ll-soft-green); }
.ll-thumb-blue { background: var(--ll-soft-blue); }
.ll-thumb-yellow { background: var(--ll-soft-yellow); }
.ll-thumb-red { background: var(--ll-soft-red); }
.ll-thumb-purple { background: var(--ll-soft-purple); }
.ll-thumb-muted { background: #F2F3F5; filter: grayscale(100%); opacity: 0.7; }

.ll-module-content h3 {
  margin: 0 0 14px;
  color: var(--ll-navy);
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  font-weight: 900;
  line-height: 1.2;
}

.ll-card-arrow {
  font-size: 2.6rem;
  color: #8A9099;
  line-height: 1;
  text-align: center;
}

.ll-module-card-locked {
  color: var(--ll-disabled);
  background: rgba(255, 255, 255, 0.75);
  cursor: not-allowed;
}

.ll-module-card-locked h3 {
  color: var(--ll-disabled);
}

.ll-progress-disabled {
  background: #EEF0F3;
}

.ll-lock-badge {
  width: 30px;
  height: 40px;
  border-radius: 16px;
  background: #A7ADB7;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  justify-self: center;
}

@media (max-width: 430px) {
  .ll-module-card {
    grid-template-columns: 92px 1fr 24px;
    gap: 12px;
    padding: 10px;
  }
  .ll-module-thumb {
    width: 92px;
    height: 78px;
  }
  .ll-module-content h3 {
    font-size: 1rem;
  }
  .ll-card-arrow { font-size: 2rem; }
}

/* ---------- Navigation drawer ---------- */
.ll-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(82%, 360px);
  background: var(--ll-card);
  box-shadow: -18px 0 60px rgba(15, 23, 42, 0.18);
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  padding: 28px 24px;
  transform: translateX(105%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ll-drawer.is-open { transform: translateX(0); }

.ll-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ll-drawer-title {
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--ll-navy);
  letter-spacing: -0.03em;
}

.ll-drawer-close {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--ll-border);
  background: #fff;
  color: var(--ll-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.ll-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--ll-radius-sm);
  text-decoration: none;
  color: var(--ll-text);
  font-weight: 700;
  font-size: 1.05rem;
  transition: background 0.15s ease;
}

.ll-drawer-link i { color: var(--ll-blue); font-size: 1.2rem; }
.ll-drawer-link:hover { background: var(--ll-soft-blue); }

.ll-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 24, 51, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 50;
}

body.drawer-open .ll-drawer-backdrop {
  opacity: 1;
  visibility: visible;
}

body.drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ll-progress-bar,
  .ll-module-card,
  .ll-drawer { transition: none; }
}

/* ============================================================
   Shared helpers (used across lesson / quiz pages)
   ============================================================ */

/* Emoji tile used as a lightweight placeholder illustration */
.ll-emoji {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Back / close header button (mirrors the menu button styling) */
.ll-icon-btn {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid var(--ll-border);
  background: #fff;
  box-shadow: var(--ll-shadow-soft);
  color: var(--ll-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ll-icon-btn:hover { transform: translateY(-1px); box-shadow: var(--ll-shadow); }
.ll-icon-btn:active { transform: scale(0.96); }

/* Lesson / quiz progress header (back button + thin top bar + counter) */
.ll-quiz-header {
  position: sticky;
  top: 82px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ll-shadow-soft);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.ll-quiz-progress {
  flex: 1;
  height: 16px;
  background: #E9EDF2;
  border-radius: 999px;
  overflow: hidden;
}

.ll-quiz-progress-bar {
  height: 100%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.14) 0, rgba(255,255,255,0.14) 9px,
      transparent 9px, transparent 18px),
    linear-gradient(90deg, var(--ll-blue) 0%, #2c86ff 100%);
  color: #fff;
  font-weight: 900;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.6s ease;
}

.ll-quiz-count {
  font-weight: 900;
  color: var(--ll-navy);
  white-space: nowrap;
}

.ll-heart { color: var(--ll-red); font-size: 1.3rem; }

/* Primary footer action button shared across quiz screens */
.ll-quiz-footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 15px;
  background: linear-gradient(180deg, rgba(251, 250, 247, 0) 0%, var(--ll-bg) 38%);
}

.ll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
  border: none;
  border-radius: 18px;
  font-family: inherit;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(20, 107, 255, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, opacity 0.2s ease;
}
.ll-btn:active { transform: scale(0.98); }
.ll-btn-primary { background: linear-gradient(90deg, var(--ll-blue), #2584FF); color: #fff; }
.ll-btn-green { background: linear-gradient(90deg, var(--ll-green), #38B24A); color: #fff; box-shadow: 0 10px 22px rgba(47, 158, 68, 0.28); }
.ll-btn-red { background: linear-gradient(90deg, var(--ll-red), #F0596B); color: #fff; box-shadow: 0 10px 22px rgba(230, 57, 70, 0.28); }
.ll-btn-back {
  background: #fff;
  color: var(--ll-blue);
  border: 2px solid #E3E7EE;
  box-shadow: none;
}

/* New word footer: smaller buttons so Back/Repeat/Continue fit on one row */
.ll-nw-actions .ll-btn {
  flex: 1 1 0;
  min-width: 0;
  font-size: 1rem;
  padding: 10px 14px;
}
.ll-btn:disabled {
  background: #E3E7EE;
  color: #9AA3B2;
  box-shadow: none;
  cursor: not-allowed;
}

/* Page that needs to pin a footer to the bottom */
.ll-flow {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.ll-flow .ll-page { flex: 1; }

/* ============================================================
   Lesson Detail (lessons.html)
   ============================================================ */
.ll-lesson-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 32px;
  border-radius: var(--ll-radius-lg);
  border: 1px solid rgba(20, 107, 255, 0.10);
  background:
    radial-gradient(circle at 84% 22%, rgba(255,255,255,0.9) 0 8%, transparent 9%),
    radial-gradient(circle at 56% 26%, rgba(255,255,255,0.65) 0 7%, transparent 8%),
    linear-gradient(135deg, #ECF7FF 0%, #F8FCFF 62%, #FFFFFF 100%);
  box-shadow: var(--ll-shadow);
  display: grid;
  grid-template-columns: 1fr 38%;
  align-items: center;
  gap: 18px;
}

.ll-lesson-badge {
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--ll-shadow-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}

.ll-lesson-hero h1 {
  margin: 0 0 12px;
  color: var(--ll-navy);
  font-weight: 900;
  font-size: clamp(2.8rem, 13vw, 4.25rem);
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.ll-lesson-hero p {
  max-width: 310px;
  margin: 0 0 24px;
  color: #667085;
  font-weight: 700;
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  line-height: 1.35;
}

.ll-complete-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ll-navy);
  font-size: 1.12rem;
  font-weight: 800;
  margin-bottom: 20px;
}
.ll-complete-row strong { font-size: 1.3rem; }

.ll-check-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ll-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.ll-lesson-hero-art {
  align-self: center;
  justify-self: end;
}

.ll-hero-progress {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  height: 20px;
}

.ll-activity-list {
  margin-top: 22px;
  display: grid;
  gap: 0;
  border-radius: var(--ll-radius-lg);
  overflow: hidden;
  box-shadow: var(--ll-shadow-soft);
}

.ll-activity-card {
  position: relative;
  min-height: 124px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(229, 234, 240, 0.78);
  display: grid;
  grid-template-columns: 90px 1fr 48px;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, background 0.18s ease;
}

.ll-activity-card:hover,
.ll-activity-card:focus-visible {
  z-index: 2;
  transform: translateY(-1px);
  background: #FFFFFF;
  outline: none;
  box-shadow: var(--ll-shadow-soft);
}

.ll-activity-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-activity-content h2 {
  color: var(--ll-navy);
  font-size: clamp(1.05rem, 4.6vw, 1.45rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ll-activity-progress-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
.ll-activity-progress-row .ll-progress { height: 15px; }
.ll-activity-progress-row span {
  color: #3B4556;
  font-size: 1rem;
  font-weight: 800;
}

.ll-round-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F3F7FF;
  color: var(--ll-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
}

@media (max-width: 430px) {
  .ll-lesson-hero { min-height: 175px; grid-template-columns: 1fr; }
  .ll-lesson-hero-art {
    position: absolute;
    right: 4px;
    top: 20px;
    opacity: 1;
  }
  .ll-lesson-hero-copy { position: relative; z-index: 2; max-width: 68%; }
  .ll-activity-card {
    grid-template-columns: 72px 1fr 38px;
    gap: 12px;
    padding: 12px;
  }
  .ll-activity-thumb { width: 72px; height: 72px; font-size: 2.1rem; }
  .ll-activity-progress-row { gap: 10px; }
  .ll-round-arrow { width: 38px; height: 38px; font-size: 1.9rem; }
}

@media (max-width: 340px) {
  .ll-activity-progress-row { grid-template-columns: 1fr; }
  .ll-activity-progress-row span { display: none; }
}

/* ============================================================
   Lesson Completed (lesson-complete.html)
   ============================================================ */

/* Blue striped 100% bar used on the completion progress header */
.ll-quiz-progress.is-striped { height: 24px; }
.ll-quiz-progress.is-striped .ll-quiz-progress-bar {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.14) 0, rgba(255,255,255,0.14) 9px,
      transparent 9px, transparent 18px),
    linear-gradient(90deg, var(--ll-blue) 0%, #2c86ff 100%);
  color: #fff;
  font-weight: 900;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-complete-wrap { padding-top: 6px; }

.completion-card {
  position: relative;
  min-height: 600px;
  margin-top: 18px;
  padding: clamp(2rem, 8vw, 3rem) 1.25rem;
  overflow: hidden;
  text-align: center;
  border-radius: var(--ll-radius-lg);
  border: 1px solid rgba(70,195,111,0.28);
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.98) 0 18%, transparent 19%),
    linear-gradient(180deg, #effcf3 0%, #f6fff8 100%);
  box-shadow: 0 20px 60px rgba(47,164,79,0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.completion-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 150px;
  background:
    radial-gradient(circle at 12% 100%, rgba(47,164,79,0.16) 0 74px, transparent 75px),
    radial-gradient(circle at 90% 100%, rgba(47,164,79,0.16) 0 85px, transparent 86px),
    linear-gradient(180deg, transparent, rgba(47,164,79,0.08));
  pointer-events: none;
}

.completion-confetti::before,
.completion-confetti::after {
  content: "✦";
  position: absolute;
  top: 10%;
  color: var(--ll-yellow);
  font-size: 1.3rem;
  animation: confettiFloat 3s ease-in-out infinite;
}
.completion-confetti::before { left: 14%; }
.completion-confetti::after { right: 16%; color: var(--ll-blue); animation-delay: 0.9s; }

@keyframes confettiFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(12deg); }
}

.success-icon-ring {
  position: relative;
  width: clamp(150px, 38vw, 210px);
  height: clamp(150px, 38vw, 210px);
  border-radius: 50%;
  background: rgba(70,195,111,0.13);
  display: grid;
  place-items: center;
  margin-bottom: 2rem;
  box-shadow: 0 0 0 18px rgba(70,195,111,0.06);
  z-index: 2;
}

.success-icon {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: #fff;
  color: #46c36f;
  display: grid;
  place-items: center;
  font-size: clamp(4rem, 14vw, 6rem);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(47,164,79,0.18);
}

.completion-landmark {
  position: absolute;
  right: 1.25rem;
  top: 34%;
  width: 98px;
  height: 98px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.4)),
    linear-gradient(180deg, #e8f7e8, #d9f2dc);
  opacity: 0.9;
}
.landmark-flag { position: absolute; right: 8px; top: 10px; font-size: 1.6rem; }

.completion-title {
  position: relative;
  z-index: 2;
  color: #145c36;
  font-weight: 900;
  font-size: clamp(2.2rem, 9vw, 3.15rem);
  line-height: 1.05;
  margin-bottom: 0.8rem;
}

.completion-subtitle {
  position: relative;
  z-index: 2;
  color: #253447;
  font-size: clamp(1.15rem, 4.8vw, 1.45rem);
  font-weight: 800;
  max-width: 360px;
  margin: 0 auto 1.6rem;
}

.completion-decoration {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font-size: 1.3rem;
}

.completion-btn {
  position: relative;
  z-index: 2;
  width: auto;
  min-height: 66px;
  padding-inline: 1.8rem;
  border-radius: 24px;
  background: linear-gradient(180deg, #2481ff 0%, #0f68f1 100%);
  box-shadow: 0 14px 28px rgba(22,115,255,0.32), inset 0 -3px 0 rgba(0,0,0,0.14);
}
.completion-btn:hover,
.completion-btn:focus-visible { color: #fff; transform: translateY(-2px); }

.floating-confetti {
  position: absolute;
  top: -20px;
  color: var(--ll-yellow);
  animation: fallConfetti linear forwards;
  z-index: 1;
  pointer-events: none;
}
@keyframes fallConfetti {
  to { transform: translateY(680px) rotate(240deg); opacity: 0; }
}

@media (max-width: 370px) {
  .completion-card { min-height: 560px; }
  .completion-landmark { display: none; }
  .completion-btn { width: 100%; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .completion-confetti::before,
  .completion-confetti::after { animation: none; }
  .floating-confetti { display: none; }
}

/* ============================================================
   New Word | Basic Vowels (new_words.html)
   ============================================================ */
.lesson-title {
  font-size: clamp(2rem, 8.5vw, 3rem);
  font-weight: 900;
  color: var(--ll-navy);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 8px 0 16px;
}

.progress-celebration {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 1.45rem;
}

.vowels-hero {
  position: relative;
  min-height: 250px;
  margin-bottom: 22px;
  padding: 1.25rem;
  overflow: hidden;
  border-radius: var(--ll-radius-lg);
  border: 1px solid #cfe4ff;
  box-shadow: var(--ll-shadow);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.96) 0 10%, transparent 11%),
    linear-gradient(180deg, #dff1ff 0%, #edf8ff 52%, #dff3d8 100%);
}

.vowels-hero::before,
.vowels-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  filter: blur(1px);
}
.vowels-hero::before { width: 120px; height: 44px; top: 42px; left: 28%; }
.vowels-hero::after { width: 150px; height: 48px; top: 60px; right: 8%; }

.hero-flag { position: absolute; top: 22px; left: 24px; font-size: 2rem; z-index: 2; }

.hero-skyline {
  position: absolute;
  inset: auto 0 0 0;
  height: 72px;
  background:
    linear-gradient(135deg, transparent 0 70%, rgba(47,164,79,0.22) 71%),
    linear-gradient(180deg, transparent, rgba(47,164,79,0.18));
}

.hero-book {
  position: absolute;
  inset: auto 1rem 1.2rem 1rem;
  height: 145px;
  border-radius: 50% 50% 24px 24px / 28% 28% 24px 24px;
  background:
    linear-gradient(90deg, #fff8e9 0 49%, #f4ead8 49% 51%, #fff8e9 51%),
    #fff8e9;
  border-bottom: 12px solid #1d76e8;
  box-shadow: 0 20px 35px rgba(6,27,61,0.18);
}

.vowel-letter {
  position: absolute;
  bottom: 42px;
  width: clamp(48px, 13vw, 78px);
  height: clamp(64px, 17vw, 100px);
  display: grid;
  place-items: center;
  font-size: clamp(2.4rem, 11vw, 4.4rem);
  font-weight: 900;
  color: #fff;
  border-radius: 24px;
  text-shadow: 0 3px 0 rgba(0,0,0,0.08);
  box-shadow: inset 0 -8px 0 rgba(0,0,0,0.1), 0 12px 22px rgba(6,27,61,0.16);
  z-index: 2;
}
.letter-a { left: 10%; background: #5bb8ee; transform: rotate(-5deg); }
.letter-e { left: 28%; background: #ff9248; transform: rotate(3deg); }
.letter-i { left: 46%; background: #ffd34d; width: clamp(40px, 9vw, 52px); }
.letter-o { left: 57%; background: #5fc85f; border-radius: 50%; }
.letter-u { left: 74%; background: #8d68d8; transform: rotate(4deg); }

.vowel-list { display: grid; gap: 14px; margin-bottom: 8px; }

.vowel-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 96px;
  padding: 0.9rem 1rem;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(231,236,243,0.9);
  border-radius: 24px;
  box-shadow: var(--ll-shadow-soft);
}

.vowel-badge {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 900;
}
.vowel-a { color: #1673ff; background: #eaf3ff; }
.vowel-e { color: #ef5b21; background: #fff0df; }
.vowel-i { color: #f2a900; background: #fff8d9; }
.vowel-o { color: #228c3f; background: #eaf8ec; }
.vowel-u { color: #744bc8; background: #f1eafd; }

.vowel-copy { flex: 1 1 auto; }
.vowel-copy h2 { font-size: 1.35rem; margin: 0; color: var(--ll-navy); font-weight: 900; }
.vowel-copy p { margin: 0.15rem 0 0; font-size: 1rem; font-weight: 700; color: #334155; }

.sound-btn {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 18px;
  border: 1px solid #cfe4ff;
  background: linear-gradient(180deg, #f8fbff, #eaf3ff);
  color: var(--ll-blue);
  font-size: 2rem;
  box-shadow: var(--ll-shadow-soft);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.sound-btn:hover { transform: translateY(-1px); box-shadow: var(--ll-shadow); }
.sound-btn.is-playing { transform: scale(0.92); background: linear-gradient(180deg, #e1efff, #d3e6ff); }

@media (max-width: 390px) {
  .vowels-hero { min-height: 220px; }
  .vowel-badge { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.3rem; }
  .sound-btn { width: 58px; height: 58px; flex-basis: 58px; font-size: 1.6rem; }
  .vowel-copy h2 { font-size: 1.15rem; }
  .vowel-copy p { font-size: 0.88rem; }
}

/* ============================================================
   Matching Game (match_items.html)
   ============================================================ */
.game-title-row { display: flex; align-items: center; gap: 1rem; margin: 6px 0 22px; }
.game-title {
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
  margin: 0 0 4px;
  color: var(--ll-navy);
  font-weight: 900;
  letter-spacing: -0.04em;
}
.game-subtitle { color: var(--ll-muted); font-weight: 700; font-size: 1.05rem; margin: 0; }

.game-title-icon {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: #fff;
  border: 1px solid var(--ll-border);
  box-shadow: var(--ll-shadow-soft);
}
.game-sparkles { color: var(--ll-yellow); font-size: 1.6rem; margin-left: auto; }

.game-board {
  padding: 1.1rem;
  border-radius: var(--ll-radius-lg);
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(231,236,243,0.9);
  box-shadow: var(--ll-shadow);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.match-tile {
  width: 100%;
  min-height: 150px;
  border: 1px solid rgba(216, 225, 236, 0.95);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(6,27,61,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  position: relative;
  overflow: hidden;
}

.match-tile::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  right: -26px;
  bottom: -26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.8);
  opacity: 0.35;
  pointer-events: none;
}

.match-tile:hover,
.match-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(6,27,61,0.12);
  border-color: #b9d8ff;
  outline: none;
}

.tile-illustration { font-size: clamp(3rem, 13vw, 4.8rem); line-height: 1; }
.tile-label,
.tile-word {
  color: var(--ll-navy);
  font-weight: 900;
  font-size: clamp(1.1rem, 4.8vw, 1.4rem);
  text-align: center;
}
.word-tile .tile-word { font-size: clamp(1.25rem, 5vw, 1.65rem); }

.tile-orange { background: linear-gradient(145deg, #fff7eb, #fffaf4); color: #f59e0b; }
.tile-apple { background: linear-gradient(145deg, #fff0f1, #fff9fa); color: #ef4444; }
.tile-igloo { background: linear-gradient(145deg, #eaf8ff, #f8fcff); color: #38bdf8; }
.tile-elephant { background: linear-gradient(145deg, #effaf2, #fbfffc); color: #22c55e; }
.tile-purple { background: linear-gradient(145deg, #f2f1ff, #fbfbff); color: #8b5cf6; }
.tile-yellow { background: linear-gradient(145deg, #fff8e5, #fffdf7); color: #f6b73c; }
.tile-blue { background: linear-gradient(145deg, #eaf7ff, #fbfeff); color: #3b82f6; }
.tile-lavender { background: linear-gradient(145deg, #f4efff, #fcfaff); color: #a855f7; }

.match-tile.is-selected {
  border-color: var(--ll-blue);
  box-shadow: 0 0 0 4px rgba(22,115,255,0.12), 0 14px 28px rgba(6,27,61,0.1);
  transform: translateY(-2px) scale(1.01);
}
.match-tile.is-matched {
  border-color: rgba(70,195,111,0.6);
  background: linear-gradient(145deg, #f0fff4, #ffffff);
  color: #2fa44f;
}
.match-tile.is-wrong {
  border-color: rgba(255,79,79,0.7);
  background: linear-gradient(145deg, #fff2ef, #ffffff);
  color: #e33434;
  animation: tileShake 300ms ease;
}

@keyframes tileShake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
}

.game-board.is-board-muted {
  opacity: 0.62;
  filter: saturate(0.5);
  pointer-events: none;
}

@media (max-width: 370px) {
  .game-board { padding: 0.75rem; }
  .match-tile { min-height: 128px; border-radius: 18px; }
  .tile-illustration { font-size: 3rem; }
  .game-subtitle { font-size: 0.92rem; }
}

/* ============================================================
   Quiz primitives — answer cards & feedback
   (correct_answer.html, audio_exercise.html, lesson_review.html)
   ============================================================ */
.quiz-title {
  font-size: clamp(1.4rem, 5.5vw, 2rem);
  font-weight: 900;
  color: var(--ll-navy);
  letter-spacing: -0.03em;
  margin: 16px 0 16px;
}

.quiz-shell-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ll-border);
  border-radius: 32px;
  padding: 24px 22px;
  box-shadow: var(--ll-shadow);
}

.question-word {
  text-align: center;
  font-size: clamp(2.1rem, 10vw, 3.2rem);
  font-weight: 900;
  color: var(--ll-navy);
  letter-spacing: .01em;
  margin: 6px 0 22px;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.answer-card {
  position: relative;
  border: 1px solid var(--ll-border);
  border-radius: 26px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  min-height: 178px;
  padding: 18px 12px;
  box-shadow: 0 8px 22px rgba(7,27,61,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--ll-navy);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.answer-card:hover,
.answer-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7,27,61,.12);
  outline: none;
}
.answer-card:active { transform: scale(.985); }

.answer-emoji {
  font-size: clamp(3rem, 13vw, 4.5rem);
  line-height: 1;
  margin-bottom: 8px;
}

.mystery-mark {
  font-size: clamp(3.4rem, 15vw, 4.6rem);
  font-weight: 900;
  color: #94c7ff;
  text-shadow: 0 6px 12px rgba(22,119,255,.16);
  line-height: 1;
}

.answer-label {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ll-navy);
  margin-top: 6px;
}

/* Reveal: hide mystery, show emoji once the grid is revealed */
.answer-emoji { display: none; }
.answer-grid.is-revealed .answer-emoji { display: block; }
.answer-grid.is-revealed .mystery-mark { display: none; }

.answer-card.is-selected {
  border: 2px solid var(--ll-blue);
  background: linear-gradient(180deg, #f8fcff 0%, #edf6ff 100%);
  box-shadow: 0 16px 32px rgba(22,119,255,.16);
}

.answer-card.is-correct {
  border: 2px solid #3f9b4d;
  background: linear-gradient(180deg, #f2fff4 0%, #e4f8e8 100%);
  box-shadow: 0 18px 34px rgba(63,155,77,.18);
  animation: successPop .32s ease;
}
.answer-card.is-correct::after {
  content: "✓";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #62bd4c, #3f9b4d);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(63,155,77,.28);
}

.answer-card.is-wrong {
  border: 2px solid var(--ll-red);
  background: linear-gradient(180deg, #fffafa 0%, #fff0f0 100%);
  box-shadow: 0 16px 32px rgba(240,68,56,.14);
  animation: wrongShake .32s ease;
}

@keyframes successPop {
  0% { transform: scale(.96); }
  60% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

/* Yellow check button variant (navy text on yellow) */
.ll-btn-yellow {
  background: linear-gradient(180deg, #ffd84a 0%, #ffbd22 100%);
  color: var(--ll-navy);
  box-shadow: 0 9px 0 rgba(184,132,0,.22), 0 12px 24px rgba(249,199,79,.3);
}

.quiz-feedback {
  margin-top: 18px;
  min-height: 28px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
}
.quiz-feedback.is-success { color: #3f9b4d; }
.quiz-feedback.is-error { color: var(--ll-red); }

@media (max-width: 359px) {
  .answer-grid { gap: 12px; }
  .answer-card { min-height: 150px; }
}

/* ============================================================
   Wrong-pair modal (used on correct_answer.html)
   ============================================================ */
.ll-error-modal-content {
  border: 0;
  border-radius: 34px;
  padding: 2.2rem 1.4rem 1.7rem;
  background: radial-gradient(circle at top, #fff9f1 0%, #ffffff 45%), #fff;
  box-shadow: 0 32px 80px rgba(6,27,61,0.28);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.ll-error-modal .modal-dialog { max-width: min(86vw, 430px); }

.error-icon-wrap {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  background: radial-gradient(circle, #fff3e7 0 55%, transparent 56%), linear-gradient(180deg, #fff, #fff5ef);
  display: grid;
  place-items: center;
}
.error-icon {
  width: 92px;
  height: 82px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #ff7b72, #ff4f4f);
  color: #fff;
  display: grid;
  place-items: center;
  padding-top: 18px;
  font-size: 3rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,0.12);
  box-shadow: 0 12px 24px rgba(255,79,79,0.28);
}
.error-title {
  font-size: clamp(2rem, 8vw, 2.8rem);
  line-height: 1.12;
  margin: 0;
  color: var(--ll-navy);
  font-weight: 900;
  letter-spacing: -0.04em;
}
.error-subtitle {
  margin: 1rem 0 1.5rem;
  color: var(--ll-muted);
  font-size: 1.25rem;
  font-weight: 800;
}
.error-continue-btn {
  position: relative;
  z-index: 2;
  width: auto;
  min-width: 230px;
  min-height: 62px;
  border-radius: 24px;
  background: linear-gradient(180deg, #2582ff 0%, #0d68f4 100%);
  box-shadow: 0 14px 28px rgba(22,115,255,0.32), inset 0 -3px 0 rgba(0,0,0,0.14);
}
.modal-backdrop.show {
  opacity: 0.55;
  background: #13213a;
}

/* ============================================================
   Audio Listening Quiz (audio_exercise.html)
   ============================================================ */
.audio-question-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 900;
  color: var(--ll-navy);
  letter-spacing: -0.03em;
  margin: 18px 0 18px;
}

.listening-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ll-border);
  border-radius: 34px;
  padding: 26px 22px;
  box-shadow: var(--ll-shadow);
}

.audio-play-card {
  width: 100%;
  min-height: 96px;
  border-radius: 26px;
  border: 1px solid #cfe3ff;
  background: linear-gradient(180deg, #f8fcff 0%, #edf7ff 100%);
  color: var(--ll-navy);
  font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 22px rgba(22,119,255,.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.audio-play-card:hover { transform: translateY(-1px); }
.audio-play-card:active { transform: scale(0.99); }
.audio-icon { font-size: 34px; color: var(--ll-blue); }
.audio-play-card.is-playing .audio-icon { animation: audioPulse 0.7s ease-in-out infinite; }
@keyframes audioPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

.audio-options { margin-top: 18px; display: grid; gap: 14px; }

.audio-option {
  position: relative;
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--ll-border);
  border-radius: 21px;
  background: #fff;
  color: var(--ll-navy);
  font-size: 1.5rem;
  font-weight: 800;
  text-align: left;
  padding: 0 28px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(7,27,61,.07);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.audio-option:hover { transform: translateY(-1px); }

.audio-option.is-selected {
  border-color: var(--ll-blue);
  background: linear-gradient(180deg, #f1f8ff, #e6f2ff);
  box-shadow: 0 12px 26px rgba(22,119,255,.13);
  padding-left: 58px;
}
.audio-option.is-selected::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 5px solid var(--ll-blue);
  background: #fff;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.audio-option.is-correct {
  border-color: #3f9b4d;
  background: linear-gradient(180deg, #f3fff5, #e7f8eb);
  box-shadow: 0 12px 28px rgba(63,155,77,.16);
  padding-left: 28px;
}
.audio-option.is-correct::before { display: none; }
.audio-option.is-correct::after {
  content: "✓";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, #60ba56, #3f9b4d);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 22px;
}

.audio-feedback-success {
  margin-top: 22px;
  border-radius: 24px;
  padding: 22px 18px;
  text-align: center;
  background: linear-gradient(180deg, #f3fff5 0%, #e8f9eb 100%);
  color: #3f9b4d;
}
.audio-feedback-success .feedback-title { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 900; margin-bottom: 4px; }
.audio-feedback-success .feedback-meaning { font-size: 1.2rem; font-weight: 800; }

.audio-feedback-error {
  margin-top: 20px;
  text-align: center;
  color: var(--ll-red);
  font-size: clamp(1.25rem, 5.5vw, 1.6rem);
  font-weight: 900;
}
.audio-feedback-error .error-icon { margin-right: 8px; }

/* ============================================================
   Translate the Sentence (translate_sentence.html)
   ============================================================ */
.ll-task-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ll-border);
  border-radius: 20px;
  padding: 16px 8px 10px;
  box-shadow: var(--ll-shadow);
  text-align: center;
  margin-top: 20px;
  transition: transform 0.2s ease;
}
.ll-task-card.shake { animation: wrongShake .4s ease; }

.sentence-heading {
  font-size: 24px;
  font-weight: 900;
  color: var(--ll-navy);
  letter-spacing: -0.03em;
  margin: 4px 0 14px;
}

.task-helper {
  font-size: 1rem;
  color: var(--ll-navy);
  font-weight: 700;
  margin: 0 0 12px;
}
.hint-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ll-blue);
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.info-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--ll-navy);
  color: #fff;
  font-weight: 900;
  font-style: italic;
  margin-bottom: 18px;
  cursor: pointer;
}

.answer-dropzone {
  min-height: 120px;
  border: 2px dashed #A9C7ED;
  background: rgba(22,119,255,.035);
  border-radius: 22px;
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 10px;
  transition: border-color .2s ease, background .2s ease;
}
.answer-dropzone.is-empty::before {
  content: "Build your sentence here";
  color: var(--ll-muted);
  font-weight: 700;
  align-self: center;
  margin: auto;
}
.answer-dropzone.is-correct {
  border-color: #8fdca6;
  background: rgba(63,163,91,.06);
}
.answer-dropzone.is-wrong {
  border-color: #F7A6A6;
  background: rgba(239,68,68,.045);
}

.word-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.word-chip {
  min-height: 58px;
  padding: 0 22px;
  border: 1px solid #DCE6F2;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f3f6fb);
  color: var(--ll-navy);
  font-size: clamp(1.15rem, 5vw, 1.4rem);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.word-chip:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--ll-shadow-soft); }
.word-chip:active { transform: scale(.96); }

/* Chips that have been placed in the drop zone */
.answer-dropzone .word-chip { background: linear-gradient(180deg, #f5faff, #eaf3ff); border-color: #cfe0f5; }
.answer-dropzone.is-wrong .word-chip { background: linear-gradient(180deg, #fff6f6, #ffeaea); border-color: #f3b9b9; }
.answer-dropzone.is-correct .word-chip { background: linear-gradient(180deg, #f1fff5, #e6f8ec); border-color: #b4e6c4; }
.word-bank .word-chip.is-used { opacity: .35; pointer-events: none; }

.translate-feedback {
  margin-top: 18px;
  min-height: 26px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(1.3rem, 5.5vw, 1.6rem);
}
.translate-feedback.is-success { color: #2E7D32; }
.translate-feedback.is-error { color: var(--ll-red); }

/* ============================================================
   Conversation on Alphabets (conversation.html)
   ============================================================ */
.conversation-start-card {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ll-border);
  box-shadow: var(--ll-shadow);
  padding: clamp(28px, 7vw, 44px) clamp(22px, 6vw, 36px);
  text-align: center;
}
.conversation-start-card h2 {
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 900;
  color: var(--ll-navy);
  letter-spacing: -0.03em;
  margin: 10px 0 10px;
}
.conversation-start-card > p {
  color: var(--ll-muted);
  font-weight: 700;
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  max-width: 340px;
  margin: 0 auto 26px;
}

.abc-hero {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.letter-3d {
  font-weight: 900;
  font-size: clamp(80px, 23vw, 130px);
  line-height: .85;
  text-shadow: 0 10px 20px rgba(15,23,42,.12);
}
.letter-b { color: #73C879; transform: rotate(-7deg); }
.letter-a { color: #FDBA35; font-size: clamp(110px, 30vw, 160px); }
.letter-c { color: #73B8FF; transform: rotate(7deg); }
.speech-bubble {
  position: absolute;
  background: #EAFBEF;
  border-radius: 28px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--ll-navy);
  box-shadow: var(--ll-shadow-soft);
}
.hero-bubble-left { left: 0; top: 14px; background: #E9F4FF; }
.hero-bubble-right { right: 0; top: 40px; background: #EAFBEF; }
.start-conversation { gap: 12px; }
.start-conversation.is-loading { opacity: .85; }

/* Full dialogue */
.conversation-card {
  position: relative;
  border-radius: var(--ll-radius-lg);
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ll-border);
  box-shadow: var(--ll-shadow);
  padding: clamp(20px, 5vw, 30px);
}
.chat-row { margin-bottom: 22px; display: flex; flex-direction: column; }
.chat-left { align-items: flex-start; }
.chat-right { align-items: flex-end; }
.chat-bubble {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 90%;
  padding: 13px 16px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ll-navy);
}
.bubble-blue { background: #E9F4FF; border-radius: 24px 24px 24px 8px; }
.bubble-green { background: #EAFBEF; border-radius: 24px 24px 8px 24px; }
.chat-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
}
.avatar-left { background: #d3e8ff; color: #1366d6; }
.avatar-right { background: #d3f3dd; color: #2a9d4e; }
.chat-text { flex: 1 1 auto; }
.translation { margin: 6px 10px 0; color: #4B5563; font-size: .95rem; font-weight: 700; }
.chat-left .translation { text-align: left; }
.chat-right .translation { text-align: right; }

.audio-mini {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ll-border);
  background: #fff;
  color: var(--ll-blue);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--ll-shadow-soft);
}
.audio-mini.is-playing { animation: audioPulse 0.6s ease-in-out infinite; }

.conversation-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.conversation-actions .ll-btn { font-size: 1.1rem; min-height: 58px; }
.btn-replay {
  background: linear-gradient(180deg, #45526a, #2c3647);
  color: #fff;
  box-shadow: 0 10px 22px rgba(44,54,71,.28);
}
@media (max-width: 360px) {
  .conversation-actions { flex-direction: column; }
}

/* ============================================================
   Topic Review Exam (lesson_review.html)
   ============================================================ */
.exam-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ll-border);
  border-radius: 32px;
  box-shadow: var(--ll-shadow);
  padding: clamp(22px, 5vw, 36px);
}

.exam-hero-image {
  width: clamp(140px, 40vw, 230px);
  height: clamp(140px, 40vw, 230px);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: clamp(5rem, 22vw, 8rem);
  background: radial-gradient(circle, #EAF8EA 0%, #F8FFF8 68%, transparent 70%);
}

.exam-question {
  text-align: center;
  color: var(--ll-navy);
  font-weight: 900;
  font-size: clamp(1.35rem, 5vw, 2rem);
  margin-bottom: 8px;
}
.translation-link {
  display: block;
  margin: 0 auto;
  border: 0;
  background: transparent;
  color: var(--ll-blue);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.translation-text { color: var(--ll-muted); text-align: center; font-weight: 700; margin: 8px 0 0; }

.audio-chip {
  margin: 16px auto 24px;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid #CFE2FF;
  border-radius: 999px;
  background: linear-gradient(180deg, #F8FCFF, #EAF5FF);
  color: var(--ll-navy);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(18,107,255,.10);
}
.audio-chip i { color: var(--ll-blue); }
.audio-chip.is-playing i { animation: audioPulse 0.6s ease-in-out infinite; }

.answer-list { display: grid; gap: 14px; margin-bottom: 24px; }
.answer-option {
  position: relative;
  min-height: 64px;
  border-radius: 18px;
  border: 1px solid var(--ll-border);
  background: rgba(255,255,255,.96);
  color: var(--ll-navy);
  font-weight: 900;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: var(--ll-shadow-soft);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.answer-option:hover,
.answer-option:focus-visible { transform: translateY(-1px); border-color: #9BC5FF; outline: none; }
.letter-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EEF8EF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.option-leaf::before { content: '🌿'; opacity: .45; }

.answer-option.is-selected {
  background: #EAF4FF;
  border-color: var(--ll-blue);
  box-shadow: 0 10px 24px rgba(18,107,255,.15);
}
.answer-option.is-correct {
  background: linear-gradient(180deg,#F0FFF3,#E3F8E7);
  border-color: #47B85D;
  box-shadow: 0 12px 28px rgba(56,163,74,.16);
  animation: successPop .35s ease;
}
.answer-option.is-correct .letter-badge { background: #DDF6E1; color: #1F7D39; }
.answer-option.is-correct .option-leaf::before { content: '✓'; opacity: 1; color: #369B3E; font-weight: 900; }
.answer-option.is-wrong {
  background: linear-gradient(180deg,#FFF7F7,#FFEDED);
  border-color: var(--ll-red);
  box-shadow: 0 12px 26px rgba(239,65,54,.13);
  animation: wrongShake .32s ease both;
}
.answer-option.is-wrong .letter-badge { background: #FFE1E1; color: #B9231B; }
.answer-option.is-wrong .option-leaf::before { content: '×'; opacity: 1; color: var(--ll-red); font-weight: 900; font-size: 1.4rem; }

.exam-feedback {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  font-weight: 900;
}
.exam-feedback.is-success { color: #38A34A; }
.exam-feedback.is-error { color: var(--ll-red); }
.ll-btn.shake { animation: wrongShake .4s ease; }

/* ============================================================
   Profile / Account Settings (profile.html)
   ============================================================ */
.ll-profile-page { padding-bottom: 0; }

.ll-settings-card {
  position: relative;
  margin-bottom: 22px;
  padding: 26px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius-lg);
  box-shadow: var(--ll-shadow);
  overflow: hidden;
}
.ll-account-card {
  background: radial-gradient(circle at top right, rgba(249, 199, 79, 0.16), transparent 35%), #fff;
}
.ll-password-card {
  background: linear-gradient(135deg, rgba(238,246,255,0.9), #fff 46%), #fff;
}

.ll-card-hero {
  position: relative;
  min-height: 104px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ll-card-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.ll-section-icon {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}
.ll-section-icon-green { background: var(--ll-soft-green); color: var(--ll-green); }
.ll-section-icon-blue { background: var(--ll-soft-blue); color: var(--ll-blue); }

.ll-card-hero h1,
.ll-card-hero h2 {
  margin: 0;
  color: var(--ll-navy);
  font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}
.ll-card-hero p { margin: 4px 0 0; color: var(--ll-muted); font-size: 1rem; font-weight: 700; }

.ll-card-illustration {
  flex: 0 0 auto;
  font-size: 3.2rem;
  line-height: 1;
  opacity: 0.9;
}

.ll-form { display: grid; gap: 20px; }
.ll-form-group { display: flex; flex-direction: column; }
.ll-form-group label {
  margin-bottom: 8px;
  color: var(--ll-navy);
  font-weight: 800;
  font-size: 1rem;
}
.ll-form-group label span { color: var(--ll-muted); font-weight: 700; }

.ll-input-wrap { position: relative; display: flex; align-items: center; }
.ll-input-wrap .form-control {
  min-height: 58px;
  border-radius: 16px;
  border: 1px solid var(--ll-border);
  padding-left: 70px;
  padding-right: 54px;
  color: var(--ll-text);
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: none;
}
.ll-input-wrap .form-control:focus {
  border-color: rgba(20, 107, 255, 0.45);
  box-shadow: 0 0 0 4px rgba(20, 107, 255, 0.12);
}
.ll-input-icon {
  position: absolute;
  left: 14px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #F8FAF5;
  color: var(--ll-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 1.25rem;
}
.ll-input-icon-blue { background: var(--ll-soft-blue); color: var(--ll-blue); }

/* Live field feedback (username availability) + static field hints. */
.ll-field-status,
.ll-field-hint {
  margin-top: 8px;
  font-size: 0.86rem;
  line-height: 1.4;
}
.ll-field-status { font-weight: 800; }
.ll-field-status:empty { display: none; }
.ll-field-hint { color: var(--ll-muted); font-weight: 600; }

.ll-field-status.is-available { color: var(--ll-green); }
.ll-field-status.is-checking { color: var(--ll-blue); }
.ll-field-status.is-current,
.ll-field-status.is-empty { color: var(--ll-muted); }
.ll-field-status.is-unavailable,
.ll-field-status.is-invalid,
.ll-field-status.is-blocked,
.ll-field-status.is-error { color: var(--ll-red); }

.ll-primary-btn:disabled,
.ll-primary-btn:disabled:hover {
  background: var(--ll-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

/* Reveal validation errors (input is nested in .ll-input-wrap, so Bootstrap's
   default sibling selector can't reach the .invalid-feedback). */
.ll-form.was-validated .ll-input-wrap:has(:invalid) .form-control { border-color: var(--ll-red); }
.ll-form.was-validated .ll-input-wrap:has(:invalid) ~ .invalid-feedback { display: block; }

.ll-password-toggle {
  position: absolute;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #7B8494;
  font-size: 1.2rem;
  z-index: 3;
  cursor: pointer;
}

.ll-primary-btn {
  min-height: 60px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--ll-blue), #0084FF);
  color: #fff;
  font-size: 1.12rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 14px 24px rgba(20, 107, 255, 0.24);
}
.ll-primary-btn:hover,
.ll-primary-btn:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--ll-blue-dark), var(--ll-blue));
  box-shadow: 0 16px 30px rgba(20, 107, 255, 0.32);
}

.ll-bottom-illustration {
  height: 94px;
  margin: 4px -18px 0;
  background:
    radial-gradient(circle at 16% 100%, rgba(47,158,68,0.20) 0 60px, transparent 61px),
    radial-gradient(circle at 78% 100%, rgba(47,158,68,0.18) 0 72px, transparent 73px),
    linear-gradient(180deg, transparent, rgba(47,158,68,0.12));
}

.ll-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--ll-navy);
  color: #fff;
  font-weight: 800;
  z-index: 1080;
  box-shadow: var(--ll-shadow);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.ll-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 430px) {
  .ll-settings-card { padding: 22px 18px; }
  .ll-card-hero { min-height: 90px; }
  .ll-card-illustration { position: absolute; right: -6px; top: 0; opacity: 0.35; font-size: 3.6rem; }
  .ll-card-title-row { align-items: flex-start; }
  .ll-section-icon { width: 52px; height: 52px; font-size: 1.45rem; }
  .ll-input-wrap .form-control { min-height: 54px; padding-left: 64px; font-size: 1rem; }
  .ll-input-icon { width: 38px; height: 38px; }
}