/* ============================================================
   Daniyal Learning App — Main Stylesheet
   Child-friendly, colorful, responsive (Desktop + Tablet + Mobile)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  --color-primary:        #7c3aed;
  --color-primary-dark:   #5b21b6;
  --color-primary-light:  #ede9fe;
  --color-secondary:      #2563eb;
  --color-secondary-light:#dbeafe;
  --color-success:        #16a34a;
  --color-success-light:  #dcfce7;
  --color-warning:        #eab308;
  --color-warning-light:  #fef9c3;
  --color-danger:         #dc2626;
  --color-danger-light:   #fee2e2;
  --color-pink:           #ec4899;
  --color-pink-light:     #fce7f3;
  --color-orange:         #f97316;

  --sidebar-width:        240px;
  --topnav-height:        60px;

  --radius-card:   20px;
  --radius-btn:    14px;
  --radius-tile:   10px;
  --radius-key:    10px;
  --radius-badge:  20px;

  --shadow-card:   0 4px 24px rgba(124,58,237,0.10);
  --shadow-btn:    0 4px 14px rgba(124,58,237,0.30);
  --shadow-key:    0 3px 0 #c4b5fd;

  --font-family:   'Nunito', sans-serif;
  --bg-page:       #f5f3ff;
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  background:  var(--bg-page);
  color:       #1e1b4b;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-family); font-weight: 800; }

a { text-decoration: none; }

img { max-width: 100%; }

/* ══════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════ */

.dl-app-wrapper {
  display:    flex;
  min-height: 100vh;
}

/* ── Sidebar (desktop) ──────────────────────────────────── */
.dl-sidebar {
  width:      var(--sidebar-width);
  min-height: 100vh;
  background: linear-gradient(160deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
  position:   fixed;
  top: 0; left: 0;
  z-index: 200;
  display:        flex;
  flex-direction: column;
  overflow-y:     auto;
  overflow-x:     hidden;
  box-shadow:     4px 0 20px rgba(124,58,237,0.25);
}

.dl-sidebar-logo {
  padding: 24px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.dl-app-name {
  font-size:   1.5rem;
  font-weight: 900;
  color:       white;
  line-height: 1;
  letter-spacing: -0.02em;
}

.dl-sidebar-assessment {
  padding:     8px 20px 12px;
  font-size:   0.75rem;
  font-weight: 700;
  color:       rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}

.dl-sidebar-nav {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dl-nav-link {
  display:        flex;
  align-items:    center;
  gap:            12px;
  padding:        12px 14px;
  border-radius:  12px;
  color:          rgba(255,255,255,0.85);
  font-weight:    700;
  font-size:      0.92rem;
  transition:     background 0.2s, color 0.2s;
  cursor:         pointer;
  text-decoration: none;
}
.dl-nav-link i { width: 18px; text-align: center; font-size: 1rem; }
.dl-nav-link:hover {
  background: rgba(255,255,255,0.15);
  color:      white;
}
.dl-nav-link.active {
  background: white;
  color:      var(--color-primary);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.dl-nav-link.active i { color: var(--color-primary); }

.dl-nav-disabled {
  opacity: 0.5;
  cursor:  not-allowed;
  pointer-events: none;
}

.dl-nav-soon {
  margin-left: auto;
  font-size:   0.62rem;
  background:  rgba(255,255,255,0.2);
  color:       white;
  padding:     2px 8px;
  border-radius: 10px;
  font-weight: 700;
}

.dl-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 8px 0;
}

.dl-nav-sub {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dl-nav-sub-link {
  display:     flex;
  align-items: center;
  gap: 8px;
  padding:     9px 12px;
  border-radius: 10px;
  color:         rgba(255,255,255,0.75);
  font-size:     0.82rem;
  font-weight:   700;
  transition:    background 0.2s;
  text-decoration: none;
}
.dl-nav-sub-link:hover  { background: rgba(255,255,255,0.12); color: white; }
.dl-nav-sub-link.active { background: rgba(255,255,255,0.22); color: white; }

/* Accordion toggle button */
.dl-nav-accordion-btn {
  background: transparent;
  cursor: pointer;
}
.dl-nav-accordion-btn:hover { background: rgba(255,255,255,0.12); color: white; }
.dl-nav-accordion-btn.active { background: rgba(255,255,255,0.22); color: white; }

/* Mobile accordion button */
.dl-mobile-accordion-btn {
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Chevron rotates when section is open */
.dl-nav-chevron {
  transition: transform 0.25s ease;
  font-size: 0.72rem;
  opacity: 0.75;
}
[aria-expanded="true"] .dl-nav-chevron {
  transform: rotate(180deg);
}

/* Letter items inside accordion */
.dl-nav-letter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 4px 8px;
}
.dl-nav-letter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.dl-nav-letter-item:hover  { background: rgba(255,255,255,0.12); color: white; }
.dl-nav-letter-item.active { background: rgba(255,255,255,0.25); color: white; }

/* Letter circle badge */
.dl-nav-letter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
}
.dl-nav-letter-item.active .dl-nav-letter-badge {
  background: white;
  color: var(--color-primary);
}


.dl-sidebar-footer {
  padding:     16px 20px;
  border-top:  1px solid rgba(255,255,255,0.15);
  display:     flex;
  align-items: center;
  justify-content: space-between;
}

.dl-sound-btn {
  background:  rgba(255,255,255,0.2);
  border:      none;
  color:       white;
  border-radius: 50%;
  width: 36px; height: 36px;
  display:     flex;
  align-items: center;
  justify-content: center;
  cursor:      pointer;
  transition:  background 0.2s;
}
.dl-sound-btn:hover { background: rgba(255,255,255,0.35); }

/* ── Main ───────────────────────────────────────────────── */
.dl-main {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

/* ── Content Area ───────────────────────────────────────── */
.dl-content {
  padding: 28px 32px;
  flex: 1;
}

/* ── Footer ─────────────────────────────────────────────── */
.dl-footer {
  background:  white;
  border-top:  1px solid #e5e7eb;
  padding:     12px 32px;
  font-size:   0.78rem;
  color:       #9ca3af;
  text-align:  center;
  margin-left: var(--sidebar-width);
}

/* ══════════════════════════════════════════════════════════
   TOP NAVBAR (tablet + mobile)
   ══════════════════════════════════════════════════════════ */
.dl-topnav {
  display:     none; /* hidden on desktop */
  background:  linear-gradient(90deg, #7c3aed, #2563eb);
  height:      var(--topnav-height);
  align-items: center;
  padding:     0 16px;
  position:    sticky;
  top: 0;
  z-index:     100;
  box-shadow:  0 2px 12px rgba(124,58,237,0.3);
  gap: 12px;
}

.dl-topnav-logo { display: flex; align-items: center; }

.dl-sound-btn-top {
  background:   rgba(255,255,255,0.2);
  border:       none;
  color:        white;
  border-radius: 50%;
  width: 36px; height: 36px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  cursor:       pointer;
  transition:   background 0.2s;
}
.dl-sound-btn-top:hover { background: rgba(255,255,255,0.35); }

.dl-hamburger {
  background:   rgba(255,255,255,0.2);
  border:       none;
  color:        white;
  border-radius: 10px;
  width: 40px; height: 40px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  cursor:       pointer;
  font-size:    1.1rem;
  transition:   background 0.2s;
}
.dl-hamburger:hover { background: rgba(255,255,255,0.35); }

.dl-mobile-menu {
  background: linear-gradient(160deg, #7c3aed, #2563eb);
  z-index: 99;
}

.dl-mobile-nav {
  display:        flex;
  flex-direction: column;
  padding:        12px 16px;
  gap: 4px;
}

.dl-mobile-link {
  display:       block;
  padding:       12px 16px;
  border-radius: 12px;
  color:         rgba(255,255,255,0.9);
  font-weight:   700;
  font-size:     0.95rem;
  transition:    background 0.2s;
  text-decoration: none;
}
.dl-mobile-link:hover { background: rgba(255,255,255,0.15); color: white; }
.dl-mobile-link.active { background: white; color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════
   COMMON CARD
   ══════════════════════════════════════════════════════════ */
.dl-subject-card {
  background:    white;
  border-radius: var(--radius-card);
  box-shadow:    var(--shadow-card);
  padding:       24px;
  transition:    transform 0.2s ease, box-shadow 0.2s ease;
  position:      relative;
  overflow:      hidden;
}
.dl-subject-card:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 32px rgba(124,58,237,0.18);
}

/* ══════════════════════════════════════════════════════════
   HOME PAGE
   ══════════════════════════════════════════════════════════ */

/* Welcome banner */
.dl-welcome {
  background:    linear-gradient(135deg, #7c3aed 0%, #2563eb 55%, #ec4899 100%);
  border-radius: var(--radius-card);
  color:         white;
  padding:       44px 40px;
  margin-bottom: 28px;
  position:      relative;
  overflow:      hidden;
}
.dl-welcome h1 { font-size: 2.6rem; margin-bottom: 8px; }
.dl-welcome p  { font-size: 1.15rem; opacity: 0.9; margin-bottom: 0; }
.dl-welcome::before {
  content: '';
  position: absolute; top: -50px; right: -40px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.dl-welcome::after {
  content: '';
  position: absolute; bottom: -40px; left: 60px;
  width: 140px; height: 140px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}

/* Subject card icon circle */
.dl-subject-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   1.8rem;
  margin-bottom: 12px;
}

/* Progress bar */
.dl-progress-bar-track {
  background:    #e0d9f7;
  border-radius: 6px;
  height:        8px;
  overflow:      hidden;
  margin: 8px 0;
}
.dl-progress-bar-fill {
  height:        8px;
  border-radius: 6px;
  background:    linear-gradient(90deg, #7c3aed, #2563eb);
  transition:    width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stat mini-cards */
.dl-stat-mini {
  background:    white;
  border-radius: 16px;
  padding:       20px 16px;
  text-align:    center;
  box-shadow:    var(--shadow-card);
}
.dl-stat-mini-number {
  font-size:   2rem;
  font-weight: 900;
  line-height: 1;
}
.dl-stat-mini-label {
  font-size:   0.78rem;
  font-weight: 700;
  color:       #6b7280;
  margin-top:  4px;
}

/* ══════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════ */
.dl-breadcrumb {
  background:    transparent;
  padding:       0;
  font-size:     0.85rem;
  font-weight:   700;
  margin-bottom: 4px;
}
.dl-breadcrumb .breadcrumb-item a { color: var(--color-primary); }
.dl-breadcrumb .breadcrumb-item.active { color: #6b7280; }

/* ══════════════════════════════════════════════════════════
   COMING SOON BADGE
   ══════════════════════════════════════════════════════════ */
.dl-coming-soon {
  position:      absolute;
  top: 14px; right: 14px;
  background:    linear-gradient(135deg, #ec4899, #f97316);
  color:         white;
  padding:       4px 12px;
  border-radius: 20px;
  font-size:     0.7rem;
  font-weight:   800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   PREPARATION LEARNING VIEW
   ══════════════════════════════════════════════════════════ */

.dl-prep-card {
  background:    linear-gradient(135deg, #f5f3ff, #ede9fe);
  border-radius: var(--radius-card);
  padding:       36px;
  text-align:    center;
  border:        2px solid #c4b5fd;
}

.dl-letter-bubble {
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  background:    linear-gradient(135deg, #7c3aed, #2563eb);
  color:         white;
  border-radius: 50%;
  font-size:     2.4rem;
  font-weight:   900;
  margin:        0 auto 20px;
  box-shadow:    0 4px 16px rgba(124,58,237,0.4);
}

.dl-word-display {
  font-size:      3.2rem;
  font-weight:    900;
  letter-spacing: 0.18em;
  color:          #1e1b4b;
  margin:         16px 0;
}

.dl-letter-reveal {
  display:         flex;
  gap:             8px;
  justify-content: center;
  flex-wrap:       wrap;
  margin:          12px 0;
}
.dl-letter-reveal span {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  width: 42px; height: 42px;
  background:    linear-gradient(135deg, #7c3aed, #2563eb);
  color:         white;
  border-radius: 8px;
  font-size:     1.2rem;
  font-weight:   900;
  opacity:       0;
  animation:     letterAppear 0.35s ease forwards;
}

@keyframes letterAppear {
  from { opacity: 0; transform: translateY(-12px) scale(0.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dl-word-image {
  width: 180px; height: 180px;
  object-fit:    contain;
  border-radius: 20px;
  margin:        16px auto;
  display:       block;
  animation:     imageZoomPop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter:        drop-shadow(0 6px 18px rgba(124,58,237,0.25));
  cursor:        pointer;
  transition:    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  user-select:   none;
}

.dl-word-image:hover {
  transform: scale(1.12) translateY(-4px);
  filter: drop-shadow(0 12px 28px rgba(124,58,237,0.4));
}

.dl-word-image:active,
.dl-word-image.dl-image-zoomed {
  animation: imageZoomPop 0.58s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes imageZoomPop {
  0% {
    transform: scale(0.15) rotate(-6deg);
    opacity: 0;
  }
  55% {
    transform: scale(1.34) rotate(3deg);
    opacity: 1;
    filter: drop-shadow(0 16px 36px rgba(124, 58, 237, 0.45));
  }
  80% {
    transform: scale(0.93) rotate(-1deg);
  }
  100% {
    transform: scale(1.0) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 6px 18px rgba(124, 58, 237, 0.25));
  }
}

.dl-word-meaning {
  font-size:   1rem;
  color:       #4b5563;
  font-weight: 600;
  font-style:  italic;
  margin:      8px 0;
}
.dl-word-hint {
  background:    #fef9c3;
  border-radius: 10px;
  padding:       8px 16px;
  font-size:     0.9rem;
  font-weight:   700;
  color:         #92400e;
  display:       inline-block;
  margin:        8px 0;
}
.dl-word-example {
  font-size:   0.92rem;
  color:       #6b7280;
  margin-top:  6px;
  font-style:  italic;
}

/* Audio button */
.dl-audio-btn {
  background:    linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color:         white;
  border:        none;
  border-radius: 50px;
  padding:       10px 24px;
  font-size:     1rem;
  font-weight:   800;
  cursor:        pointer;
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  transition:    transform 0.15s, box-shadow 0.15s;
  font-family:   var(--font-family);
  box-shadow:    var(--shadow-btn);
  margin:        8px 4px;
}
.dl-audio-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124,58,237,0.4);
}
.dl-audio-btn:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════
   PROGRESS DOTS
   ══════════════════════════════════════════════════════════ */
.dl-progress-dots {
  display:         flex;
  gap:             10px;
  justify-content: center;
  margin:          16px 0;
}
.dl-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background:    #e0d9f7;
  transition:    background 0.3s ease, transform 0.3s ease;
}
.dl-dot.active    { background: var(--color-primary); transform: scale(1.4); }
.dl-dot.completed { background: var(--color-success); }

/* ── Words Found Strip ── */
.dl-words-found-strip {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  justify-content: center;
  align-items:     center;
  min-height:      36px;
}

/* An answered word chip */
.dl-word-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  background:     linear-gradient(135deg, #16a34a, #15803d);
  color:          white;
  border-radius:  30px;
  padding:        5px 14px;
  font-size:      0.9rem;
  font-weight:    800;
  letter-spacing: 0.04em;
  box-shadow:     0 3px 10px rgba(22,163,74,0.35);
  white-space:    nowrap;
  animation:      chipPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.dl-word-chip .chip-check {
  font-size: 0.85rem;
}

/* An empty remaining slot */
.dl-word-slot {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-width:      44px;
  height:         30px;
  border:         2px dashed #c4b5fd;
  border-radius:  30px;
  padding:        0 12px;
  font-size:      0.8rem;
  font-weight:    700;
  color:          #a78bfa;
  background:     rgba(124,58,237,0.04);
  letter-spacing: 0.05em;
}

@keyframes chipPop {
  0%   { transform: scale(0.4) translateY(6px); opacity: 0; }
  65%  { transform: scale(1.08) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   TEST PAGE — ALPHABET KEYBOARD
   ══════════════════════════════════════════════════════════ */
.dl-keyboard {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  justify-content: center;
  max-width:       620px;
  margin:          0 auto;
  padding:         12px 0;
}

.dl-key {
  width: 52px; height: 52px;
  background:    white;
  border:        2px solid #e0d9f7;
  border-radius: var(--radius-key);
  font-size:     1.15rem;
  font-weight:   900;
  color:         #1e1b4b;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  box-shadow:    var(--shadow-key);
  user-select:   none;
  font-family:   var(--font-family);
  position:      relative;
}
.dl-key:hover {
  background:    var(--color-primary);
  color:         white;
  border-color:  var(--color-primary);
  transform:     translateY(-3px) scale(1.05);
  box-shadow:    0 6px 0 #5b21b6;
}
.dl-key:active {
  transform:  translateY(1px) scale(0.95);
  box-shadow: 0 1px 0 #5b21b6;
}

/* ── Interactive Key Zoom & Bounce Animation ── */
@keyframes keyZoomPop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.42) translateY(-4px);
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #ffffff;
    border-color: #7c3aed;
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.45);
    z-index: 25;
  }
  75% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    z-index: 1;
  }
}

.dl-key.dl-key-zoomed {
  animation: keyZoomPop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  z-index: 25 !important;
}

/* ══════════════════════════════════════════════════════════
   LETTER FLASH OVERLAY
   ══════════════════════════════════════════════════════════ */

/* Backdrop */
.dl-letter-flash-overlay {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
  opacity:         0;
  background:      transparent;
  transition:      background 0.08s ease;
}

/* State: visible */
.dl-letter-flash-overlay.dl-flash-visible {
  pointer-events: auto;
  background:     rgba(30, 27, 75, 0.35);
  backdrop-filter: blur(3px);
}

/* Inner card */
.dl-letter-flash-inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  width:           min(50vw, 50vh);
  height:          min(50vw, 50vh);
  background:      linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
  border-radius:   32px;
  box-shadow:      0 30px 80px rgba(124,58,237,0.6);
  transform:       scale(0.3) rotate(-8deg);
  opacity:         0;
  transition:      none;
}

/* State: card pops in */
.dl-letter-flash-overlay.dl-flash-visible .dl-letter-flash-inner {
  animation: letterFlashIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* State: card zooms out */
.dl-letter-flash-overlay.dl-flash-exit .dl-letter-flash-inner {
  animation: letterFlashOut 0.28s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes letterFlashIn {
  0% {
    transform: scale(0.3) rotate(-8deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) rotate(2deg);
    opacity: 1;
  }
  80% {
    transform: scale(0.96) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes letterFlashOut {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(0.2) rotate(10deg); opacity: 0; }
}

/* Big letter inside the card */
.dl-letter-flash-char {
  font-size:   min(22vw, 22vh);
  font-weight: 900;
  color:       #ffffff;
  line-height: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,0.25);
  font-family: var(--font-family);
  letter-spacing: -2px;
  user-select: none;
}

/* Label below the letter */
.dl-letter-flash-label {
  font-size:   min(4vw, 4vh);
  font-weight: 700;
  color:       rgba(255,255,255,0.75);
  margin-top:  8px;
  text-transform: uppercase;
  letter-spacing: 4px;
  user-select: none;
}

/* ── Color variants per letter type ── */
.dl-letter-flash-overlay.dl-flash-vowel .dl-letter-flash-inner {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  box-shadow: 0 30px 80px rgba(239,68,68,0.6);
}
.dl-letter-flash-overlay.dl-flash-consonant .dl-letter-flash-inner {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  box-shadow: 0 30px 80px rgba(124,58,237,0.6);
}

/* ══════════════════════════════════════════════════════════
   SOUND TOGGLE FLOATING BUTTON
   ══════════════════════════════════════════════════════════ */
.dl-sound-toggle-btn {
  position:      fixed;
  bottom:        24px;
  right:         24px;
  z-index:       8888;
  width:         52px;
  height:        52px;
  border-radius: 50%;
  border:        2px solid #e0d9f7;
  background:    white;
  font-size:     1.5rem;
  cursor:        pointer;
  box-shadow:    0 4px 16px rgba(124,58,237,0.25);
  transition:    transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  display:       flex;
  align-items:   center;
  justify-content: center;
  line-height:   1;
  padding:       0;
}
.dl-sound-toggle-btn:hover {
  transform:  scale(1.12);
  box-shadow: 0 8px 24px rgba(124,58,237,0.4);
  background: #ede9fe;
}
.dl-sound-toggle-btn:active {
  transform: scale(0.93);
}
.dl-sound-toggle-btn.dl-sound-off {
  opacity:        0.5;
  border-color:   #d1d5db;
  box-shadow:     0 2px 8px rgba(0,0,0,0.1);
}

/* ══════════════════════════════════════════════════════════
   ANSWER TILES
   ══════════════════════════════════════════════════════════ */
.dl-answer-tiles,
.dl-answer-tiles-container {
  display:         flex;
  flex-direction:  row;
  flex-wrap:       wrap;
  gap:             8px;
  justify-content: center;
  min-height:      74px;
  padding:         12px;
  background:      rgba(124,58,237,0.04);
  border-radius:   16px;
  border:          2px dashed #c4b5fd;
  margin:          16px 0;
  align-items:     center;
}

.dl-answer-tile {
  width: 54px; height: 54px;
  background:    linear-gradient(135deg, #7c3aed, #2563eb);
  color:         white;
  border-radius: var(--radius-tile);
  font-size:     1.4rem;
  font-weight:   900;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 4px 12px rgba(124,58,237,0.3);
  transition:    transform 0.15s ease, box-shadow 0.15s ease;
  user-select:   none;
  cursor:        pointer;
}

.dl-answer-tile:hover {
  transform: scale(1.18) translateY(-3px);
  box-shadow: 0 8px 18px rgba(124,58,237,0.45);
}

.dl-answer-tile.tile-just-added {
  animation: tileBounceZoom 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tileBounceZoom {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  55% {
    transform: scale(1.36) rotate(-3deg);
    opacity: 1;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.55);
  }
  80% {
    transform: scale(0.94) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes tilePop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   CONTROL BUTTONS
   ══════════════════════════════════════════════════════════ */
.dl-btn-control {
  padding:       14px 22px;
  border-radius: var(--radius-btn);
  font-size:     0.95rem;
  font-weight:   800;
  border:        none;
  cursor:        pointer;
  transition:    all 0.15s ease;
  font-family:   var(--font-family);
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  min-height:    50px;
}

.dl-btn-clear     { background: #f3f4f6;  color: #374151; }
.dl-btn-backspace { background: #fef3c7;  color: #92400e; }
.dl-btn-help {
  background: linear-gradient(135deg, #eab308, #f97316);
  color:      white;
  box-shadow: 0 4px 12px rgba(234,179,8,0.35);
}
.dl-btn-submit {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color:      white;
  box-shadow: var(--shadow-btn);
}
.dl-btn-submit:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 22px rgba(124,58,237,0.45);
}
.dl-btn-next {
  background: linear-gradient(135deg, #16a34a, #059669);
  color:      white;
  box-shadow: 0 4px 14px rgba(22,163,74,0.35);
}
.dl-btn-control:hover  { filter: brightness(1.05); transform: translateY(-1px); }
.dl-btn-control:active { transform: translateY(1px); }

/* ══════════════════════════════════════════════════════════
   FEEDBACK CARDS
   ══════════════════════════════════════════════════════════ */
.dl-feedback-correct {
  background:    linear-gradient(135deg, #dcfce7, #bbf7d0);
  border:        3px solid #16a34a;
  border-radius: var(--radius-card);
  padding:       36px 28px;
  text-align:    center;
  animation:     bounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

.dl-feedback-wrong {
  background:    linear-gradient(135deg, #fef9c3, #fde68a);
  border:        3px solid #d97706;
  border-radius: var(--radius-card);
  padding:       28px;
  text-align:    center;
  animation:     shakeWrong 0.5s ease;
}

@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shakeWrong {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

/* Stars burst */
.dl-stars-burst {
  display:         flex;
  justify-content: center;
  gap:             8px;
  font-size:       2rem;
  animation:       starBurst 0.6s ease;
}

@keyframes starBurst {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Help overlay */
.dl-help-overlay {
  background:    linear-gradient(135deg, #fef9c3, #fef3c7);
  border:        3px solid #eab308;
  border-radius: var(--radius-card);
  padding:       24px;
  display:       none;
  text-align:    center;
  animation:     fadeInUp 0.3s ease;
  margin:        16px 0;
}
.dl-help-overlay.active { display: block; }

/* Letter big display for test */
.dl-question-letter {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width: 90px; height: 90px;
  background:      linear-gradient(135deg, #7c3aed, #2563eb);
  color:           white;
  border-radius:   50%;
  font-size:       3rem;
  font-weight:     900;
  margin:          16px auto;
  box-shadow:      0 6px 24px rgba(124,58,237,0.4);
  animation:       pulseLetter 2s ease-in-out infinite;
}

@keyframes pulseLetter {
  0%, 100% { box-shadow: 0 6px 24px rgba(124,58,237,0.4); }
  50%       { box-shadow: 0 6px 36px rgba(124,58,237,0.7); }
}

/* Word counter badge */
.dl-word-counter {
  display:         inline-block;
  background:      var(--color-primary);
  color:           white;
  padding:         6px 18px;
  border-radius:   20px;
  font-weight:     800;
  font-size:       0.9rem;
  margin-bottom:   8px;
}

/* Result / Celebration */
.dl-result-score-circle {
  width: 130px; height: 130px;
  background:      linear-gradient(135deg, #7c3aed, #2563eb);
  border-radius:   50%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  color:           white;
  margin:          0 auto 24px;
  box-shadow:      0 8px 30px rgba(124,58,237,0.45);
  animation:       bounceIn 0.6s ease;
}
.dl-result-score-circle .score-num {
  font-size:   2.8rem;
  font-weight: 900;
  line-height: 1;
}
.dl-result-score-circle .score-denom {
  font-size:   1rem;
  opacity:     0.8;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (768px – 1023px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .dl-sidebar  { display: none; }
  .dl-topnav   { display: flex; }
  .dl-main     { margin-left: 0; }
  .dl-footer   { margin-left: 0; }

  .dl-content  { padding: 20px; }

  .dl-key { width: 48px; height: 48px; font-size: 1rem; }

  .dl-answer-tile { width: 50px; height: 50px; font-size: 1.2rem; }

  .dl-welcome h1 { font-size: 2rem; }
  .dl-welcome    { padding: 32px 28px; }

  .dl-btn-control { padding: 12px 18px; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (<768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .dl-content { padding: 14px; }

  .dl-welcome h1 { font-size: 1.6rem; }
  .dl-welcome    { padding: 24px 20px; margin-bottom: 18px; }

  .dl-key {
    width: 34px; height: 34px;
    font-size:     0.82rem;
    border-radius: 7px;
  }
  .dl-keyboard { gap: 5px; }

  .dl-answer-tile { width: 40px; height: 40px; font-size: 1rem; }

  .dl-word-display { font-size: 2.2rem; }

  .dl-question-letter { width: 70px; height: 70px; font-size: 2.2rem; }

  .dl-prep-card { padding: 22px 16px; }

  .dl-btn-control {
    padding:   10px 14px;
    font-size: 0.85rem;
    min-height: 44px;
  }

  .dl-subject-card { padding: 18px; }

  .dl-result-score-circle { width: 110px; height: 110px; }
  .dl-result-score-circle .score-num { font-size: 2.2rem; }
}

/* ══════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════ */
.fw-black { font-weight: 900 !important; }

.dl-badge-pill {
  display:       inline-block;
  padding:       5px 14px;
  border-radius: 20px;
  font-size:     0.78rem;
  font-weight:   800;
  letter-spacing: 0.04em;
}

/* Subtle card highlight borders */
.dl-card-english   { border-left: 5px solid var(--color-primary); }
.dl-card-maths     { border-left: 5px solid var(--color-secondary); }
.dl-card-evs       { border-left: 5px solid var(--color-success); }
.dl-card-prep      { border-left: 5px solid var(--color-success); }
.dl-card-test      { border-left: 5px solid var(--color-primary); }

/* Disabled card overlay */
.dl-card-disabled {
  opacity:        0.55;
  pointer-events: none;
  filter:         grayscale(0.4);
}

/* ══════════════════════════════════════════════════════════
   ANIMATIONS (shared)
   ══════════════════════════════════════════════════════════ */
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.dl-float { animation: floatUp 3s ease-in-out infinite; }

/* Pulse for attention */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(124,58,237,0); }
}
.dl-pulse { animation: pulseGlow 2s infinite; }

/* ══════════════════════════════════════════════════════════
   ADMIN IMAGE UPLOAD & MANAGEMENT
   ══════════════════════════════════════════════════════════ */
.dl-admin-toolbar {
  background:    linear-gradient(135deg, #fef3c7, #fee2e2);
  border:        2px dashed #f59e0b;
  border-radius: 16px;
  padding:       12px 18px;
  margin-bottom: 20px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-wrap:     wrap;
  gap:           12px;
}

.dl-admin-btn-manage {
  background:    linear-gradient(135deg, #7c3aed, #4f46e5);
  color:         white;
  font-weight:   800;
  font-size:     0.88rem;
  border-radius: 12px;
  padding:       8px 16px;
  border:        none;
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  cursor:        pointer;
  transition:    all 0.2s ease;
  box-shadow:    0 2px 8px rgba(124,58,237,0.3);
}

.dl-admin-btn-manage:hover {
  background:    linear-gradient(135deg, #6d28d9, #4338ca);
  color:         white;
  transform:     translateY(-1px);
}

.dl-image-wrapper {
  position: relative;
  display:  inline-block;
  margin:   0 auto;
}

.dl-admin-change-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    rgba(30, 27, 75, 0.85);
  backdrop-filter: blur(4px);
  color:         white;
  font-size:     0.82rem;
  font-weight:   800;
  border:        1px solid rgba(255,255,255,0.4);
  border-radius: 20px;
  padding:       6px 14px;
  cursor:        pointer;
  margin-top:    8px;
  transition:    all 0.2s ease;
}

.dl-admin-change-btn:hover {
  background:    var(--color-primary);
  color:         white;
  transform:     scale(1.04);
}

/* Upload Dropzone */
.dl-dropzone {
  border:         2px dashed #a78bfa;
  background:     #f5f3ff;
  border-radius:  16px;
  padding:        24px 16px;
  text-align:     center;
  cursor:         pointer;
  transition:     all 0.2s ease;
}

.dl-dropzone:hover, .dl-dropzone.dragover {
  border-color:   var(--color-primary);
  background:     #ede9fe;
}

.dl-preview-box {
  width:          150px;
  height:         150px;
  border-radius:  14px;
  object-fit:     contain;
  background:     #ffffff;
  border:         2px solid #e0d9f7;
  padding:        6px;
  margin:         12px auto;
  display:        block;
}

.dl-manage-word-row {
  background:     #ffffff;
  border:         1px solid #e5e7eb;
  border-radius:  14px;
  padding:        12px 16px;
  margin-bottom:  10px;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            12px;
  transition:     all 0.2s ease;
}

.dl-manage-word-row:hover {
  border-color:   var(--color-primary);
  box-shadow:     0 2px 10px rgba(124,58,237,0.08);
}

.dl-manage-thumb {
  width:          52px;
  height:         52px;
  object-fit:     contain;
  border-radius:  10px;
  background:     #f8f6ff;
  border:         1px solid #e0d9f7;
  padding:        4px;
}

.dl-letter-tab {
  display:         inline-flex;
  align-items:     center;
  padding:         6px 16px;
  border-radius:   20px;
  font-weight:     800;
  font-size:       0.88rem;
  background:      #f3f4f6;
  color:           #4b5563;
  border:          1px solid #e5e7eb;
  transition:      all 0.2s ease;
  text-decoration: none;
}

.dl-letter-tab:hover {
  background:   #ede9fe;
  color:        var(--color-primary);
  border-color: #c4b5fd;
}

.dl-letter-tab.active {
  background:   linear-gradient(135deg, #7c3aed, #4f46e5);
  color:        white;
  border-color: transparent;
  box-shadow:   0 2px 8px rgba(124,58,237,0.3);
}


/* ══════════════════════════════════════════════════════════
   VOWELS & CONSONANTS MODULE
   ══════════════════════════════════════════════════════════ */

.vc-letter-card {
  border-radius: 20px;
  padding: 22px 16px 18px;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.vc-letter-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }

.vc-vowel-card     { background: linear-gradient(145deg,#ede9fe,#f5f3ff); border: 2px solid #c4b5fd; }
.vc-consonant-card { background: linear-gradient(145deg,#dbeafe,#eff6ff); border: 2px solid #93c5fd; }

.vc-card-letter { font-size: 3rem; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.vc-vowel-card   .vc-card-letter { color: #7c3aed; }
.vc-consonant-card .vc-card-letter { color: #2563eb; }

.vc-card-lowercase { font-size: 1.3rem; font-weight: 700; opacity: 0.55; margin-bottom: 8px; }
.vc-card-image { width: 64px; height: 64px; object-fit: contain; margin: 6px auto; border-radius: 10px; display: block; }
.vc-card-word  { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #374151; margin: 4px 0; }

.vc-type-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }
.vc-type-badge.vowel     { background: #7c3aed; color: white; }
.vc-type-badge.consonant { background: #2563eb; color: white; }

.vc-audio-btn { background: none; border: none; font-size: 1.05rem; cursor: pointer; padding: 4px 6px; border-radius: 8px; color: #6b7280; margin-top: 4px; transition: background 0.15s; }
.vc-audio-btn:hover { background: rgba(0,0,0,0.06); color: #7c3aed; }

.vc-section-header { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; padding-bottom: 10px; border-bottom: 3px solid; }
.vc-section-header h2 { margin: 0; font-weight: 900; font-size: 1.35rem; }
.vc-section-header.vowels-header     { border-color: #c4b5fd; }
.vc-section-header.vowels-header h2  { color: #7c3aed; }
.vc-section-header.consonants-header { border-color: #93c5fd; }
.vc-section-header.consonants-header h2 { color: #2563eb; }

/* Test: Vowel / Consonant choice buttons */
.vc-answer-btn {
  width: 100%; padding: 22px 16px; border-radius: 20px; border: 3px solid transparent;
  font-size: 1.3rem; font-weight: 900; letter-spacing: 0.03em;
  cursor: pointer; transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  background: #f8fafc; color: #374151;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.vc-answer-btn:hover { transform: scale(1.03); box-shadow: 0 6px 18px rgba(0,0,0,0.13); }
.vc-answer-btn.selected-vowel {
  background: linear-gradient(135deg,#7c3aed,#6d28d9); color: white;
  border-color: #5b21b6; box-shadow: 0 6px 20px rgba(124,58,237,0.4); transform: scale(1.04);
}
.vc-answer-btn.selected-consonant {
  background: linear-gradient(135deg,#2563eb,#1d4ed8); color: white;
  border-color: #1e40af; box-shadow: 0 6px 20px rgba(37,99,235,0.4); transform: scale(1.04);
}
@keyframes vcShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.vc-answer-btn.wrong-shake { animation: vcShake 0.4s ease; }

.vc-test-letter {
  font-size: 5.5rem; font-weight: 900; text-align: center; color: #1e1b4b; line-height: 1;
  text-shadow: 0 4px 12px rgba(124,58,237,0.15);
  animation: tilePop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* Tap test */
.vc-tap-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0; }
.vc-tap-letter {
  width: 62px; height: 62px; border-radius: 14px; border: 3px solid #e5e7eb; background: white;
  font-size: 1.6rem; font-weight: 900; color: #374151; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06); user-select: none;
}
.vc-tap-letter:hover  { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.vc-tap-letter.selected { background: linear-gradient(135deg,#7c3aed,#4f46e5); color: white; border-color: transparent; box-shadow: 0 4px 14px rgba(124,58,237,0.4); transform: scale(1.1); }
.vc-tap-letter.correct  { background: linear-gradient(135deg,#22c55e,#16a34a); color: white; border-color: transparent; }
.vc-tap-letter.wrong    { background: linear-gradient(135deg,#ef4444,#dc2626); color: white; border-color: transparent; }
.vc-tap-letter.missed   { background: #fef9c3; border-color: #fde047; color: #854d0e; }

@keyframes tapLetterZoom {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.36) rotate(-4deg); box-shadow: 0 8px 20px rgba(124,58,237,0.45); }
  75%  { transform: scale(0.96); }
  100% { transform: scale(1.1) rotate(0deg); }
}
.vc-tap-letter.vc-tap-zoom {
  animation: tapLetterZoom 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Result */
.vc-score-circle {
  width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(135deg,#7c3aed,#2563eb); color: white;
  font-size: 2rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; box-shadow: 0 8px 24px rgba(124,58,237,0.3);
}
.vc-review-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; font-weight: 800; font-size: 0.95rem; margin: 4px; }
.vc-review-badge.missed  { background: #fee2e2; color: #991b1b; }
.vc-review-badge.correct { background: #dcfce7; color: #166534; }

.vc-admin-bar {
  background: linear-gradient(135deg,#fef3c7,#fffbeb); border: 1px solid #fde68a;
  border-radius: 14px; padding: 12px 16px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════
   LETTER EXPLORER PAGE
   ══════════════════════════════════════════════════════════ */

/* ── Letter card grid ── */
.lx-letter-grid {
  display:         grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap:             10px;
  padding:         4px 0;
}

/* Base card */
.lx-letter-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  width:           100%;
  aspect-ratio:    1 / 1;
  border-radius:   18px;
  border:          3px solid transparent;
  cursor:          pointer;
  font-family:     var(--font-family);
  transition:      transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
                   box-shadow 0.15s ease,
                   border-color 0.15s ease;
  user-select:     none;
  position:        relative;
  overflow:        hidden;
}
.lx-letter-card:hover {
  transform:  translateY(-4px) scale(1.07);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.lx-letter-card:active {
  transform: scale(0.92);
}

/* Vowel cards — warm orange/amber */
.lx-card-vowel {
  background:   linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #fbbf24;
  box-shadow:   0 4px 14px rgba(251,191,36,0.3);
}
.lx-card-vowel .lx-card-upper { color: #b45309; }
.lx-card-vowel .lx-card-lower { color: #d97706; }
.lx-card-vowel:hover { border-color: #f59e0b; box-shadow: 0 10px 28px rgba(245,158,11,0.45); }

/* Consonant cards — purple/indigo */
.lx-card-consonant {
  background:   linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-color: #c4b5fd;
  box-shadow:   0 4px 14px rgba(124,58,237,0.18);
}
.lx-card-consonant .lx-card-upper { color: #5b21b6; }
.lx-card-consonant .lx-card-lower { color: #7c3aed; }
.lx-card-consonant:hover { border-color: #8b5cf6; box-shadow: 0 10px 28px rgba(124,58,237,0.45); }

/* Selected state */
.lx-letter-card.lx-card-selected {
  transform:   scale(1.1);
  box-shadow:  0 12px 32px rgba(0,0,0,0.22);
  border-width: 3px;
}
.lx-card-vowel.lx-card-selected    { background: linear-gradient(135deg,#f59e0b,#d97706); border-color: #b45309; }
.lx-card-consonant.lx-card-selected { background: linear-gradient(135deg,#7c3aed,#4f46e5); border-color: #3730a3; }
.lx-card-vowel.lx-card-selected .lx-card-upper,
.lx-card-vowel.lx-card-selected .lx-card-lower    { color: #fff; }
.lx-card-consonant.lx-card-selected .lx-card-upper,
.lx-card-consonant.lx-card-selected .lx-card-lower { color: #fff; }

/* Letter text inside card */
.lx-card-upper {
  font-size:   1.8rem;
  font-weight: 900;
  line-height: 1;
}
.lx-card-lower {
  font-size:   0.95rem;
  font-weight: 700;
  line-height: 1;
  margin-top:  2px;
}

/* ── Display panel ── */
.lx-display-panel {
  border-radius:  28px;
  padding:        28px 22px;
  min-height:     320px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  background:     white;
  border:         3px solid #ede9fe;
  box-shadow:     0 8px 32px rgba(124,58,237,0.1);
  transition:     border-color 0.3s ease, box-shadow 0.3s ease;
}
.lx-display-panel.lx-panel-vowel {
  border-color: #fbbf24;
  box-shadow:   0 8px 32px rgba(245,158,11,0.2);
  background:   linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
}
.lx-display-panel.lx-panel-consonant {
  border-color: #8b5cf6;
  box-shadow:   0 8px 32px rgba(124,58,237,0.2);
  background:   linear-gradient(160deg, #faf5ff 0%, #ede9fe 100%);
}

/* Idle state */
.lx-idle-state {
  text-align: center;
  color:      #c4b5fd;
}
.lx-idle-icon { font-size: 3.5rem; margin-bottom: 12px; }
.lx-idle-text { font-size: 1.1rem; font-weight: 700; line-height: 1.4; }

/* Active state */
.lx-active-state {
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  width:          100%;
}

/* Type badge */
.lx-type-badge {
  display:       inline-block;
  padding:       4px 16px;
  border-radius: 20px;
  font-size:     0.8rem;
  font-weight:   800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.lx-badge-vowel    { background: #fef3c7; color: #b45309; border: 2px solid #fbbf24; }
.lx-badge-consonant{ background: #ede9fe; color: #5b21b6; border: 2px solid #a78bfa; }

/* Big + small letter */
.lx-letter-display-wrap {
  display:        flex;
  align-items:    baseline;
  gap:            10px;
  margin-bottom:  10px;
}
.lx-big-letter {
  font-size:   5rem;
  font-weight: 900;
  line-height: 1;
  color:       #1e1b4b;
}
.lx-small-letter {
  font-size:   2.6rem;
  font-weight: 700;
  color:       #6b7280;
  line-height: 1;
}

/* Pop animation for letter when clicked */
@keyframes lxLetterPop {
  0%   { transform: scale(0.7) rotate(-6deg); opacity: 0.5; }
  60%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: scale(1)    rotate(0deg); opacity: 1; }
}
.lx-big-letter.lx-letter-pop {
  animation: lxLetterPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Panel vowel/consonant letter color */
.lx-panel-vowel    .lx-big-letter { color: #b45309; }
.lx-panel-consonant .lx-big-letter { color: #5b21b6; }

/* Example word */
.lx-example-wrap {
  margin-bottom: 4px;
  font-size:     1rem;
}
.lx-example-label {
  font-weight: 600;
  color:       #6b7280;
  margin-right: 4px;
}
.lx-example-word {
  font-size:   1.25rem;
  font-weight: 900;
  color:       #1e1b4b;
}

/* Explanation */
.lx-explanation {
  font-size:   0.85rem;
  color:       #6b7280;
  font-weight: 600;
  margin-top:  4px;
  font-style:  italic;
}

/* Listen buttons */
.lx-listen-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       12px 24px;
  border-radius: 14px;
  border:        none;
  font-size:     1rem;
  font-weight:   800;
  cursor:        pointer;
  font-family:   var(--font-family);
  transition:    transform 0.15s ease, box-shadow 0.15s ease;
  background:    linear-gradient(135deg, #7c3aed, #4f46e5);
  color:         white;
  box-shadow:    0 4px 14px rgba(124,58,237,0.35);
  width:         100%;
  justify-content: center;
}
.lx-listen-btn:hover  { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 22px rgba(124,58,237,0.45); }
.lx-listen-btn:active { transform: scale(0.96); }

.lx-panel-vowel .lx-listen-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 14px rgba(245,158,11,0.35);
}
.lx-panel-vowel .lx-listen-btn:hover { box-shadow: 0 8px 22px rgba(245,158,11,0.5); }

.lx-listen-word-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 20px;
  border-radius: 12px;
  border:        2px solid #e0d9f7;
  font-size:     0.9rem;
  font-weight:   700;
  cursor:        pointer;
  font-family:   var(--font-family);
  background:    white;
  color:         #5b21b6;
  transition:    transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow:    0 2px 8px rgba(124,58,237,0.1);
  width:         100%;
  justify-content: center;
}
.lx-listen-word-btn:hover  { background: #ede9fe; transform: translateY(-1px); }
.lx-listen-word-btn:active { transform: scale(0.96); }

/* Responsive tweaks */
@media (max-width: 576px) {
  .lx-letter-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
  .lx-card-upper  { font-size: 1.5rem; }
  .lx-big-letter  { font-size: 4rem; }
  .lx-small-letter{ font-size: 2rem; }
}

/* ══════════════════════════════════════════════════════════
   LETTER EXPLORER — SPEAK ANY WORD COMPONENT
   ══════════════════════════════════════════════════════════ */
.lx-speak-card {
  background: white;
  border-radius: 24px;
  padding: 24px 28px;
  border: 2px solid #ede9fe;
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.08);
}

.lx-speak-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.lx-speak-icon {
  font-size: 2.2rem;
  background: #f5f3ff;
  border-radius: 16px;
  padding: 8px 12px;
  border: 1px solid #ddd6fe;
}

.lx-speak-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #1e1b4b;
  line-height: 1.2;
}

.lx-speak-subtitle {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 600;
}

.lx-speak-input-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.lx-speak-input {
  border-radius: 16px;
  border: 2.5px solid #e0d9f7;
  padding: 14px 20px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e1b4b;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--font-family);
  background: #faf5ff;
}

.lx-speak-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
  background: #ffffff;
}

.lx-speak-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 16px;
  border: none;
  font-size: 1.05rem;
  font-weight: 800;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  color: white;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.lx-speak-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);
}

.lx-speak-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.lx-speak-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Quick Word Chips */
.lx-quick-words {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lx-quick-chip {
  border: 1.5px solid #e0d9f7;
  background: #f5f3ff;
  color: #5b21b6;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lx-quick-chip:hover {
  background: #7c3aed;
  color: white;
  border-color: #7c3aed;
  transform: translateY(-1px);
}

/* Live Typed Word Display */
.lx-typed-word-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 22px;
  padding: 16px;
  background: rgba(124, 58, 237, 0.04);
  border-radius: 18px;
  border: 2px dashed #c4b5fd;
  min-height: 70px;
}

.lx-typed-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 48px;
  padding: 0 8px;
  background: white;
  border: 2px solid #ddd6fe;
  border-radius: 12px;
  font-size: 1.4rem;
  font-weight: 900;
  color: #1e1b4b;
  box-shadow: 0 3px 8px rgba(124, 58, 237, 0.1);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.lx-typed-tile.space-tile {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #c4b5fd;
  font-size: 1rem;
}

.lx-typed-tile.lx-tile-highlight {
  transform: scale(1.22) translateY(-4px);
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: white;
  border-color: #6d28d9;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
}

/* Speaker animation */
.lx-speaker-anim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  color: #7c3aed;
  font-weight: 800;
  font-size: 1rem;
}

.lx-speaker-wave {
  animation: lxPulse 0.5s infinite alternate ease-in-out;
}

@keyframes lxPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.3); }
}

.lx-speaker-dots span {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #7c3aed;
  border-radius: 50%;
  margin: 0 2px;
  animation: lxBounceDot 0.6s infinite alternate;
}
.lx-speaker-dots span:nth-child(2) { animation-delay: 0.2s; }
.lx-speaker-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes lxBounceDot {
  0% { transform: translateY(0); opacity: 0.3; }
  100% { transform: translateY(-6px); opacity: 1; }
}

@media (max-width: 576px) {
  .lx-speak-input-row {
    flex-direction: column;
    align-items: stretch;
  }
  .lx-speak-btn {
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════
   EVS INTERACTIVE IMAGE & TEXT BOX TEST STYLES
   ══════════════════════════════════════════════════════ */
.evs-image-stage {
  position: relative;
  background: #ffffff;
  border: 2px solid #86efac;
  border-radius: 20px;
  padding: 16px;
  max-width: 380px;
  margin: 0 auto 16px;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.12);
  transition: all 0.3s ease;
}
.evs-image-stage:hover {
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.2);
}
.evs-image-stage.evs-correct-stage {
  border-color: #16a34a;
  box-shadow: 0 0 28px rgba(34, 197, 94, 0.35);
}
.evs-image-target-tag {
  position: absolute;
  top: 10px;
  right: 12px;
  background: #16a34a;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.evs-text-input-wrap {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto 12px;
}
.evs-main-input {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border: 2px solid #86efac !important;
  border-radius: 14px !important;
  text-align: center !important;
  color: #14532d !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease !important;
}
.evs-main-input:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18) !important;
}
.evs-main-input.evs-input-correct {
  border-color: #16a34a !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  animation: imageZoomPop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.evs-main-input.evs-input-wrong {
  border-color: #ef4444 !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  animation: evsShake 0.4s ease;
}
.evs-submit-btn {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  padding: 8px 24px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #16a34a, #059669) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3) !important;
  transition: all 0.2s ease !important;
}
.evs-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.4) !important;
}
.evs-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto;
}
.evs-chip-btn {
  border: 2px solid #bbf7d0;
  background: #ffffff;
  color: #15803d;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 8px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.evs-chip-btn:hover {
  background: #dcfce7;
  border-color: #16a34a;
  transform: translateY(-2px);
}
.evs-chip-btn.active-chip {
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
}

@keyframes evsShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}