/*
 * LEO ENGLISH — Lesson pages: Luxury Cinematic Education design system
 * Loaded after each page's own inline <style> — visual layer only.
 * Architecture: 01 Tokens 02 Reset 03 Base 04 Background 05 Layout
 * 06 Navigation 07 Typography 08 Shared Components 09 Buttons
 * 10 Progress 11 Vocabulary 12 Grammar 13 Flashcards 14 Questions
 * 15 Activities 16 Inputs 17 Modal 18 Animation 19 Responsive 20 A11y
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

/* Reused everywhere text sits directly on a gold/champagne fill: dark text
   on gold reads fine in theory, but on a screen washed in gold light it
   disappears — white with a hard black outline stays legible regardless. */
.leo-gold-ink {
  color: #ffffff !important;
  text-shadow: 0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000, 0 2px 3px rgba(0, 0, 0, .65) !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, .6);
}

/* =========================================================================
   01. DESIGN TOKENS — Premium Pink Neon Cyber Glass
   ========================================================================= */
:root {
  --bg-primary: #05030A;
  --bg-secondary: #05030A;
  --bg-elevated: #0F0816;

  /* Layered neon palette — kept on the legacy --gold-* variable names so
     every rule below (buttons, chips, borders, glows) repaints for free. */
  --hot-pink: #FF2FD0;
  --neon-pink: #FF5CE1;
  --fuchsia: #D946EF;
  --electric-purple: #9D4EDD;
  --highlight: #FFF0FB;

  --gold-primary: var(--fuchsia);
  --gold-bright: var(--neon-pink);
  --gold-champagne: var(--hot-pink);
  --gold-dark: var(--electric-purple);
  --gold-bronze: var(--electric-purple);

  --text-primary: var(--highlight);
  --text-secondary: var(--neon-pink);
  --text-muted: rgba(255, 240, 251, 0.58);

  --glass-bg: rgba(15, 8, 22, 0.78);
  --glass-bg-strong: rgba(10, 5, 15, 0.92);
  --glass-border: rgba(255, 92, 225, 0.32);

  --success: var(--electric-purple);
  --error: var(--hot-pink);

  --shadow-gold:
    0 0 8px rgba(255, 47, 208, .45),
    0 0 24px rgba(255, 47, 208, .22),
    0 0 60px rgba(157, 78, 221, .14);
  --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.45);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-vi: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   02. RESET / 03. BASE
   ========================================================================= */
html { scroll-behavior: smooth; color-scheme: dark; overflow-x: hidden !important; }

body {
  font-family: var(--font-body) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
}

body.leo-lesson * { box-sizing: border-box; }

::selection { background: rgba(176, 98, 211, 0.35); color: #F0D3E1; }

/* =========================================================================
   04. BACKGROUND
   ========================================================================= */
body {
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 8%, rgba(255, 47, 208, .14), transparent 62%),
    radial-gradient(ellipse 55% 40% at 88% 78%, rgba(157, 78, 221, .12), transparent 55%),
    radial-gradient(ellipse 50% 35% at 8% 85%, rgba(217, 70, 239, .08), transparent 55%),
    linear-gradient(165deg, #05030A 0%, #07040E 45%, #05030A 100%) !important;
  background-attachment: fixed;
}

.leo-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v22L30 52 4.02 37V15z' fill='none' stroke='%23ff5ce1' stroke-opacity='0.055' stroke-width='1'/%3E%3C/svg%3E");
}

.leo-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.leo-dust {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.leo-dust span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  animation-name: leoDustFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes leoDustFloat {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .55; }
  85% { opacity: .35; }
  100% { transform: translateY(-90px); opacity: 0; }
}

/* =========================================================================
   05. LAYOUT
   ========================================================================= */
.leo-page-shell { position: relative; z-index: 1; }

/* Legacy headers relied on absolute positioning to marquee-scroll under a
   bare page; now that a sticky nav sits above them, pull them back into
   normal flow so the UNIT badge + heading stack cleanly beneath it. */
.title-container, .header-container {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  padding-top: 8px;
}
.title-container h1 { animation: none !important; white-space: normal !important; }

.container, .leo-page-shell .container {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 20px 60px !important;
  position: relative;
  z-index: 1;
}

/* =========================================================================
   06. NAVIGATION — floating glass bar
   ========================================================================= */
.leo-nav {
  position: sticky;
  top: 10px;
  z-index: 500;
  max-width: 1180px;
  margin: 10px auto 32px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--shadow-gold), 0 8px 32px rgba(0, 0, 0, .35);
}

.leo-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.leo-nav-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(145deg, var(--gold-bright), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  text-shadow: 0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, .6);
}

.leo-nav-brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.leo-nav-brand-copy strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--gold-bright);
}
.leo-nav-brand-copy small {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.leo-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.leo-nav-links a {
  position: relative;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 10px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.leo-nav-links a:hover { color: var(--gold-champagne); background: rgba(255, 47, 208, .10); }

.leo-nav-links a.is-active {
  color: var(--highlight);
  background: linear-gradient(135deg, rgba(255, 47, 208, .22), rgba(157, 78, 221, .18));
  border: 1px solid rgba(255, 92, 225, .55);
  box-shadow:
    inset 0 0 16px rgba(255, 47, 208, .15),
    0 0 18px rgba(255, 47, 208, .25);
}
.leo-nav-links a:not(.is-active) { border: 1px solid transparent; }

.leo-nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--hot-pink), var(--electric-purple));
  box-shadow: 0 0 8px rgba(255, 47, 208, .85), 0 0 16px rgba(255, 47, 208, .5);
}

.leo-nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(176, 98, 211, .08);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.leo-nav-toggle span, .leo-nav-toggle span::before, .leo-nav-toggle span::after {
  display: block;
  width: 18px; height: 2px;
  background: var(--gold-bright);
  border-radius: 2px;
  position: relative;
  transition: transform var(--transition), opacity var(--transition);
}
.leo-nav-toggle span::before, .leo-nav-toggle span::after { content: ''; position: absolute; left: 0; }
.leo-nav-toggle span::before { top: -6px; }
.leo-nav-toggle span::after { top: 6px; }
.leo-nav-toggle.is-open span { background: transparent; }
.leo-nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.leo-nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

/* full.html ships its own <nav>/.nav-toggle/.nav-links for in-page tab
   switching — leo-lesson.js reimplements that as the floating .leo-nav
   above, so the original chrome is hidden (its click handlers stay
   harmlessly attached, just invisible) rather than left showing twice. */
nav:not(.leo-nav) { display: none !important; }

@media (max-width: 900px) {
  .leo-nav-toggle { display: flex; }
  .leo-nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 0; left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--shadow-card);
    display: none;
  }
  .leo-nav-links.is-open { display: flex; }
  .leo-nav-links a { padding: 12px 16px; min-height: 44px; display: flex; align-items: center; }
}

/* =========================================================================
   07. TYPOGRAPHY
   ========================================================================= */
.leo-unit-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--highlight);
  background: linear-gradient(135deg, rgba(255, 47, 208, .22), rgba(157, 78, 221, .16));
  border: 1px solid rgba(255, 92, 225, .4);
  box-shadow: 0 0 14px rgba(255, 47, 208, .2);
  padding: 6px 16px;
  border-radius: 999px;
  margin: 0 0 14px;
}

h1, .container > h1, .title-container h1, .main-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  color: var(--text-muted) !important;
  text-align: center;
  text-shadow: none !important;
  animation: none !important;
}

h2, .sub-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--highlight), var(--neon-pink) 65%, var(--fuchsia)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-align: center;
  margin-top: 6px !important;
  text-shadow: none !important;
}

/* #vocabulary carries its own `display: flex` rule in every unit's inline
   <style> (higher specificity than .section), which used to make the
   vocabulary panel stay visible underneath whichever tab was "active".
   !important here is required to beat that ID selector, not just source
   order — this is the actual tab-switching fix, everything else is cosmetic. */
.section {
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: auto !important;
}
.section.active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  animation: leoFadeIn .45s var(--transition);
}
.section.active > * { width: 100%; }

.leo-section-head { text-align: center; margin: 0 0 30px; }
.leo-divider {
  width: 64px;
  height: 2px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

/* =========================================================================
   08. SHARED COMPONENTS — glass panel / premium card
   ========================================================================= */
.leo-glass {
  background: linear-gradient(145deg, rgba(13, 9, 16, .82), rgba(7, 6, 10, .74));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.leo-glass:hover { border-color: rgba(239, 136, 213, .40); }

.leo-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold-champagne);
  background: rgba(176, 98, 211, .15);
  border: 1px solid rgba(176, 98, 211, .30);
  border-radius: 999px;
  padding: 5px 13px;
}

/* =========================================================================
   09. BUTTONS
   ========================================================================= */
button, .game-link, .dialogue-link, .restart-btn, .mode-btn, .btn {
  font-family: var(--font-body) !important;
  min-height: 44px;
  border-radius: 999px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition), background var(--transition), border-color var(--transition), color var(--transition) !important;
}

button:not(.mode-btn):not(.btn-retry):not(.btn-continue):not(.leo-ghost) {
  background: linear-gradient(90deg, var(--hot-pink) 0%, var(--fuchsia) 45%, var(--electric-purple) 100%) !important;
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent;
  border: none !important;
  box-shadow: 0 6px 20px rgba(255, 47, 208, .3) !important;
}
button:not(.mode-btn):not(.btn-retry):not(.btn-continue):not(.leo-ghost):hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 0 12px #FF2FD0,
    0 0 32px rgba(255, 47, 208, .55),
    0 0 70px rgba(217, 70, 239, .25) !important;
  filter: none !important;
}
button:not(.mode-btn):not(.btn-retry):not(.btn-continue):not(.leo-ghost):active { transform: scale(0.97); }

button.leo-ghost, .btn-retry {
  background: var(--glass-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: none !important;
}
button.leo-ghost:hover, .btn-retry:hover {
  background: rgba(217, 70, 239, .12) !important;
  border-color: var(--fuchsia) !important;
  color: var(--highlight) !important;
  transform: translateY(-2px);
}

/* Previous / Next Card sit side by side under the flashcard instead of
   stacking as two full-width bars (the `.section.active > *` rule further
   down forces full width — this wrapper absorbs that so its children can
   size to content). */
.leo-flashcard-actions {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.leo-flashcard-actions button {
  width: auto !important;
  min-width: 150px;
  margin: 0 !important;
}
.leo-flashcard-actions button.leo-ghost::before { content: '← '; }
.leo-flashcard-actions button:not(.leo-ghost)::after { content: ' →'; }
@media (max-width: 480px) {
  .leo-flashcard-actions { flex-direction: column-reverse; align-items: stretch; }
  .leo-flashcard-actions button { min-width: 0; width: 100% !important; }
}

.record-btn {
  background: var(--error) !important;
  box-shadow: 0 10px 25px rgba(176, 98, 211, .35) !important;
}
.record-btn:hover:not(:disabled) { filter: brightness(1.08) !important; }
.record-btn.recording { animation: leoRecordPulse 1.2s infinite !important; }
@keyframes leoRecordPulse {
  0% { box-shadow: 0 0 0 0 rgba(176, 98, 211, .55); }
  70% { box-shadow: 0 0 0 18px rgba(176, 98, 211, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 98, 211, 0); }
}

.speaker, .vocab-card .speaker {
  color: var(--gold-primary) !important;
  background: transparent !important;
  transition: transform var(--transition), background var(--transition) !important;
}
.speaker:hover { transform: scale(1.1); background: rgba(176, 98, 211, .12) !important; border-radius: 50%; }

/* =========================================================================
   10. PROGRESS — thin neon track + glowing endpoint + dot row
   ========================================================================= */
.leo-progress-track, .progress-wrap {
  position: relative;
  max-width: 420px;
  height: 3px !important;
  background: rgba(255, 92, 225, .14) !important;
  border: none !important;
  border-radius: 999px !important;
  overflow: visible !important;
  margin: 10px auto 8px;
}
.leo-progress-fill, .progress-fill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hot-pink), var(--fuchsia), var(--electric-purple)) !important;
  box-shadow: 0 0 10px rgba(255, 47, 208, .6);
  transition: width .4s ease !important;
}
.leo-progress-fill::after, .progress-fill::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--highlight);
  box-shadow: 0 0 10px 2px rgba(255, 47, 208, .9);
}
.leo-progress-count {
  text-align: center;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.leo-progress-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 4px;
}
.leo-progress-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 240, 251, .22);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.leo-progress-dots span.is-current {
  width: 9px;
  height: 9px;
  background: var(--hot-pink);
  box-shadow: 0 0 10px rgba(255, 47, 208, .8);
}
.leo-progress-dots span.is-done { background: rgba(255, 92, 225, .55); }

/* =========================================================================
   11. VOCABULARY — hexagon cards
   ========================================================================= */
#vocabulary .game-container, .game-container {
  background: transparent !important;
  box-shadow: none !important;
}

#vocabulary .card, .card {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: linear-gradient(145deg, rgba(239, 136, 213, .35), rgba(176, 98, 211, .50)) !important;
  border: none !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform var(--transition), filter var(--transition) !important;
}

#vocabulary .card > span {
  color: #ffffff !important;
  text-shadow: 0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000 !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, .6);
}

.card .card-front, .card .card-back {
  background: linear-gradient(160deg, #0D0910 0%, #07060A 100%) !important;
  color: var(--text-primary) !important;
  margin: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.card .card-back { color: var(--gold-champagne) !important; }

#vocabulary .card:hover, .card:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 18px rgba(176, 98, 211, .20));
}

#vocabulary .card.flipped, .card.flipped {
  background: linear-gradient(145deg, var(--gold-bright), var(--gold-dark)) !important;
}

#vocabulary .card.matched { filter: grayscale(.4) opacity(.35); }

#vocabulary .card.english, #vocabulary .card.vietnamese { position: relative; }
#vocabulary .card.english::before, #vocabulary .card.vietnamese::before {
  content: "EN";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ffffff;
  text-shadow: 0 1px 1px #000, 0 -1px 1px #000;
  opacity: .8;
}
#vocabulary .card.vietnamese::before { content: "VI"; }
#vocabulary .card.matched::after {
  content: "✓";
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--gold-bright);
}

.card .card-front, .card .card-back { position: relative; }
.card .card-front::before, .card .card-back::before {
  content: "EN";
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold-primary);
  opacity: .6;
}
.card .card-back::before { content: "VI"; }

#vocabulary .phonetic, .phonetic {
  font-size: 10.5px !important;
  font-style: italic;
  color: var(--text-muted) !important;
}

.cute-animal { display: none !important; }

/* Slang / idiom expression cards shipped inside the vocabulary section */
.expression-groups { background: transparent !important; }
.expression-group {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
}
.expression-group h3 {
  font-family: var(--font-display) !important;
  color: var(--gold-bright) !important;
  font-size: 14px !important;
  letter-spacing: .04em;
}
.expression-card {
  background: rgba(0, 0, 0, .28) !important;
  border-left: 3px solid var(--hot-pink) !important;
  border-radius: 10px;
}
.expression-card > div { color: var(--highlight) !important; font-weight: 700; }
.expression-card p { color: var(--text-secondary) !important; }
.expression-ipa { color: var(--gold-champagne) !important; }

.title-container h1 { text-shadow: none !important; animation: none !important; }

/* =========================================================================
   12. GRAMMAR
   ========================================================================= */
#grammar .grammar-content {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
#grammar .grammar-content h3 {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  color: var(--text-primary) !important;
  margin-top: 20px;
}
#grammar .grammar-content ul { padding-left: 0; list-style: none; }
#grammar .grammar-content li {
  background: rgba(0, 0, 0, .25);
  border-left: 3px solid var(--gold-primary);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  color: var(--text-primary) !important;
}
/* The "Cấu trúc:" line is the actual grammar pattern being taught — make it
   stand out from the surrounding explanation text. */
#grammar .grammar-content .grammar-structure {
  font-size: 1.3em !important;
  font-weight: 700 !important;
}

/* =========================================================================
   13. FLASHCARDS — premium floating glass card
   ========================================================================= */
.flashcard {
  clip-path: none !important;
  position: relative;
  isolation: isolate;
  max-width: 800px !important;
  min-height: 400px !important;
  margin: 0 auto !important;
  padding: 46px 44px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 76, 220, .32) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow:
    0 0 0 1px rgba(255, 47, 208, .06),
    0 22px 60px rgba(0, 0, 0, .5),
    0 0 90px rgba(157, 78, 221, .16) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important;
  animation: leoCardIn .5s var(--transition) both;
}

/* Soft outer pink aura, as if the card is floating above the page */
.flashcard::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--hot-pink), var(--fuchsia) 45%, var(--electric-purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .65;
  transition: opacity var(--transition);
}
.flashcard::after {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -3;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(255, 47, 208, .16), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.flashcard:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 47, 208, .10),
    0 26px 70px rgba(0, 0, 0, .55),
    0 0 110px rgba(217, 70, 239, .22) !important;
}
.flashcard:hover::before { opacity: 1; }

@keyframes leoCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.flashcard .vietnamese, .flashcard .vietnamese-text, .flashcard .question {
  font-family: var(--font-vi) !important;
  font-size: clamp(14px, 1.8vw, 16px) !important;
  font-weight: 500 !important;
  color: rgba(255, 240, 251, .68) !important;
  line-height: 1.5 !important;
}
.flashcard .english, .flashcard .answer-text {
  font-family: var(--font-body) !important;
  font-size: clamp(21px, 3.1vw, 32px) !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  color: var(--highlight) !important;
  letter-spacing: -0.005em;
}
.flashcard .answer-vietnamese { color: var(--text-muted) !important; font-style: italic; }

/* Vocab/keywords already ship wrapped in <b> in the lesson data — repaint
   those as neon pink highlight pills instead of plain bold. */
.flashcard .english b, .flashcard .answer-text b {
  display: inline-block;
  font-weight: 700 !important;
  font-style: normal;
  color: var(--highlight) !important;
  background: linear-gradient(135deg, rgba(255, 47, 208, .30), rgba(157, 78, 221, .24));
  border: 1px solid rgba(255, 92, 225, .45);
  border-radius: 999px;
  padding: 2px 12px;
  margin: 2px 1px;
  box-shadow: 0 0 14px rgba(255, 47, 208, .22);
}

.flashcard .divider {
  position: relative;
  width: 64px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--hot-pink), transparent) !important;
  box-shadow: 0 0 10px rgba(255, 47, 208, .6);
  opacity: .8;
  margin: 20px 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Circular neon audio button — replaces the bare 🎙️ glyph */
.flashcard .english, #questions .answer, #reflexive-sentences .english {
  position: relative;
}
.speaker {
  order: 99;
  flex-shrink: 0;
  width: 56px !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, rgba(255, 47, 208, .22), rgba(157, 78, 221, .18)) !important;
  border: 1px solid rgba(255, 92, 225, .5) !important;
  box-shadow:
    0 0 0 1px rgba(255, 47, 208, .12),
    0 0 18px rgba(255, 47, 208, .28) !important;
  margin: 14px 0 0 !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.speaker:hover {
  transform: scale(1.08) !important;
  box-shadow:
    0 0 0 1px rgba(255, 47, 208, .2),
    0 0 28px rgba(255, 47, 208, .5) !important;
  background: linear-gradient(145deg, rgba(255, 47, 208, .32), rgba(157, 78, 221, .28)) !important;
  border-radius: 50% !important;
}
.speaker:active { transform: scale(.96) !important; }
.speaker.is-playing {
  animation: leoAudioPulse 1.1s ease-out infinite;
}
@keyframes leoAudioPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 47, 208, .55), 0 0 18px rgba(255, 47, 208, .3); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 47, 208, 0), 0 0 18px rgba(255, 47, 208, .3); }
  100% { box-shadow: 0 0 0 0 rgba(255, 47, 208, 0), 0 0 18px rgba(255, 47, 208, .3); }
}

/* Vietnamese / English blocks stack, with the audio button centered below */
#dialogue .english.show, #reflexive-sentences .english.show,
#questions .answer.show {
  flex-direction: column !important;
}

/* =========================================================================
   13b. GAME.HTML — timed vocabulary lamp game (Tailwind-based template)
   ========================================================================= */
#target-word {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-primary)) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000 !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, .6);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .35) !important;
}

.vocab-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35) !important;
}
.vocab-card:hover {
  background-color: rgba(176, 98, 211, .10) !important;
  box-shadow: 0 8px 20px rgba(176, 98, 211, .25) !important;
}
.vocab-card .icon { color: var(--gold-primary) !important; }
.vocab-card .word { color: var(--text-primary) !important; }
.vocab-card .speaker {
  color: var(--gold-primary) !important;
  background-color: rgba(176, 98, 211, .12) !important;
}
.vocab-card .speaker:hover {
  color: #ffffff !important;
  text-shadow: 0 1px 1px #000, 0 -1px 1px #000 !important;
  background-color: var(--gold-bright) !important;
}

.info-panel {
  color: var(--text-primary) !important;
}
.info-panel.score-panel, .info-panel.timer-panel {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-primary)) !important;
  color: #F0D3E1 !important;
}

/* =========================================================================
   14. QUESTIONS
   ========================================================================= */
#questions .answer { gap: 10px; }

/* =========================================================================
   15. ACTIVITIES
   ========================================================================= */
#extra-activity { counter-reset: leo-activity; }

.activity {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 22px 24px !important;
  margin: 18px 0 !important;
  counter-increment: leo-activity;
  position: relative;
}

.activity::before {
  content: "ACTIVITY " counter(leo-activity, decimal-leading-zero);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-bottom: 10px;
}

.activity h3 {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  color: var(--text-primary) !important;
  margin-bottom: 10px !important;
}

.exercise p, .exercise li {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.progress { color: var(--text-muted) !important; font-size: 13.5px !important; }

/* =========================================================================
   16. INPUTS
   ========================================================================= */
input, textarea, select {
  background: rgba(0, 0, 0, .28) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 0 3px rgba(176, 98, 211, .08) !important;
}

/* =========================================================================
   17. MODAL
   ========================================================================= */
.overlay, .modal-overlay {
  background: rgba(0, 0, 0, .65) !important;
  backdrop-filter: blur(6px) !important;
}

.popup, .modal-content {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .50) !important;
  animation: leoModalIn .3s var(--transition) !important;
}
@keyframes leoModalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.popup h3, .popup #popupWord, .feedback-title { color: var(--gold-bright) !important; font-family: var(--font-display) !important; }
.popup p { color: var(--text-secondary) !important; }
.popup .close { color: var(--gold-primary) !important; }
.popup .close:hover { color: var(--gold-bright) !important; }

.score-circle {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark)) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000 !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, .6);
  box-shadow: 0 8px 20px rgba(176, 98, 211, .3) !important;
  border-color: var(--bg-elevated) !important;
}
.score-circle.low-score { background: linear-gradient(135deg, #EF88D5, var(--error)) !important; box-shadow: 0 8px 20px rgba(176, 98, 211, .3) !important; }
.score-circle.high-score { background: linear-gradient(135deg, #EF88D5, var(--success)) !important; box-shadow: 0 8px 20px rgba(176, 98, 211, .3) !important; }

.error-box {
  background: rgba(176, 98, 211, .10) !important;
  border-left-color: var(--error) !important;
  color: var(--text-secondary) !important;
}
.error-box.good-box { background: rgba(176, 98, 211, .10) !important; border-left-color: var(--success) !important; }

.tips-box {
  background: linear-gradient(135deg, rgba(176, 98, 211, .12), rgba(176, 98, 211, .08)) !important;
  border: 1px solid rgba(176, 98, 211, .30) !important;
  color: var(--text-secondary) !important;
}

.diff-container { background: rgba(0, 0, 0, .35) !important; }
.diff-match { color: var(--success) !important; }
.diff-miss { color: var(--error) !important; }
.diff-extra { color: var(--gold-champagne) !important; }

.encouragement { background: rgba(176, 98, 211, .08) !important; color: var(--gold-champagne) !important; }

/* dialogue.html defines its own :root palette (--primary/--card-bg/etc.)
   that many of its rules reference via var(...) — repoint those instead of
   fighting every consumer individually. */
:root {
  --primary: var(--gold-primary);
  --primary-hover: var(--gold-bright);
  --secondary: var(--gold-dark);
  --bg-gradient: linear-gradient(165deg, #07060A 0%, #07060A 40%, #07060A 100%);
  --text-main: var(--text-primary);
  --card-bg: var(--glass-bg-strong);
}

.container {
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border) !important;
  box-shadow: 0 25px 55px rgba(0, 0, 0, .5) !important;
}

.chat-box, .mode-selector, .ai-badge, .info-panel, .header-container {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
}
.mode-btn.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-primary)) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000 !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, .6);
}
.mode-btn:not(.active) { color: var(--text-primary) !important; }
.character-badge.badge-robot { background: rgba(176, 98, 211, .14) !important; color: var(--gold-champagne) !important; }
.character-badge.badge-user { background: rgba(240, 211, 225, .10) !important; color: var(--text-primary) !important; }
.en-text { color: var(--text-primary) !important; }
.vi-text { color: var(--text-muted) !important; }

/* =========================================================================
   18. ANIMATION / MOTION SYSTEM
   ========================================================================= */
.leo-fade-in { animation: leoFadeIn .45s var(--transition) both; }
@keyframes leoFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   19. RESPONSIVE
   ========================================================================= */
@media (max-width: 600px) {
  .container { padding: 0 16px 40px !important; }
  h2, .sub-title { font-size: 1.05rem !important; }
  .flashcard { padding: 22px 18px !important; min-height: 320px !important; }
  .flashcard .english, .flashcard .answer-text { font-size: clamp(18px, 5vw, 22px) !important; }
  .speaker { width: 48px !important; height: 48px !important; font-size: 18px !important; }
  #vocabulary .game-container, .game-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    justify-items: center;
  }
  button, .game-link, .dialogue-link, .restart-btn { min-height: 44px !important; }
}

/* =========================================================================
   20. ACCESSIBILITY
   ========================================================================= */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-bright) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .leo-dust { display: none !important; }
}