/* ============================================================
   CLAUDE CODE QUEST — Corporate Theme
   Navy #1a2744 | Gold #f5a623 | White #ffffff | Gray #f4f5f7
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #1a2744;
  --navy-light: #243358;
  --navy-dark:  #111b30;
  --gold:       #f5a623;
  --gold-light: #ffc155;
  --white:      #ffffff;
  --gray-50:    #f4f5f7;
  --gray-100:   #e8eaed;
  --gray-200:   #d1d5db;
  --gray-400:   #9ca3af;
  --gray-600:   #6b7280;
  --gray-800:   #1f2937;
  --green:      #22c55e;
  --green-bg:   #dcfce7;
  --red:        #ef4444;
  --red-bg:     #fee2e2;
  --sidebar-w:  260px;
  --font-body:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:  'Consolas', 'Courier New', monospace;
  --radius:     8px;
  --shadow:     0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.15);
}

body {
  font-family: var(--font-body);
  background: var(--gray-50);
  color: var(--gray-800);
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ==================== SIDEBAR ==================== */

#sidebar {
  width: var(--sidebar-w);
  background: var(--navy);
  color: var(--white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--navy-light);
}

.brand-logo { font-size: 28px; }
.brand-name { font-weight: 700; font-size: 14px; color: var(--white); }
.brand-sub  { font-size: 11px; color: var(--gold); letter-spacing: 0.05em; }

.sidebar-player {
  padding: 14px 16px;
  border-bottom: 1px solid var(--navy-light);
}

.player-name  { font-weight: 600; font-size: 14px; }
.player-level { font-size: 11px; color: var(--gold); margin-top: 2px; }
.player-xp    { font-size: 12px; color: var(--gray-200); margin-top: 4px; }

.level-bar {
  height: 4px;
  background: var(--navy-light);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.level-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.level-next { font-size: 10px; color: var(--gray-400); margin-top: 4px; }

.player-streak {
  margin-top: 10px;
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 184, 0, 0.08);
  padding: 4px 8px;
  border-radius: 10px;
}
.streak-flame { font-size: 12px; }

.sidebar-nav {
  flex: 1;
  padding: 8px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray-200);
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
  user-select: none;
}

.nav-item:hover { background: var(--navy-light); color: var(--white); }
.nav-item.active { background: var(--navy-light); color: var(--white); border-left-color: var(--gold); }
.nav-item.nav-locked { opacity: 0.45; cursor: default; }
.nav-item.nav-locked:hover { background: transparent; }
.nav-item.nav-complete .nav-chapter-title { color: var(--gray-400); }
.nav-tick { margin-left: auto; color: var(--green); font-size: 11px; }
.nav-icon { font-size: 15px; flex-shrink: 0; }
.nav-chapter-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

.sidebar-reset {
  padding: 12px 16px;
  border-top: 1px solid var(--navy-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reset-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--gray-400);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s, color 0.15s;
}
.reset-btn:hover { border-color: var(--red); color: var(--red); }
.reset-btn.admin-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ==================== MAIN CONTENT ==================== */

#main-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
  max-width: 900px;
}

/* ==================== BUTTONS ==================== */

.btn-primary {
  background: var(--gold);
  color: var(--navy-dark);
  border: none;
  border-radius: var(--radius);
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-400); }

.back-btn {
  background: none;
  border: none;
  color: var(--gray-600);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 24px;
  transition: color 0.15s;
}
.back-btn:hover { color: var(--navy); }

/* ==================== DASHBOARD ==================== */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 36px;
  gap: 24px;
  flex-wrap: wrap;
}

.welcome-eyebrow { font-size: 12px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.08em; }
.welcome-name { font-size: 32px; font-weight: 700; color: var(--navy); margin: 4px 0; }
.welcome-title { font-size: 13px; color: var(--gold); font-weight: 600; }

.xp-summary {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 180px;
  text-align: right;
}
.xp-big { font-size: 22px; font-weight: 700; color: var(--gold); }
.xp-label { font-size: 11px; color: var(--gray-400); }
.xp-progress-bar { height: 4px; background: var(--navy-light); border-radius: 2px; margin: 8px 0 4px; }
.xp-progress-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width 0.6s; }
.xp-sub { font-size: 10px; color: var(--gray-400); }

.section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-600);
  margin-bottom: 16px;
}

.trophy-cabinet {
  margin: 0 0 36px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  border-radius: var(--radius);
  color: white;
}
.trophy-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.trophy-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 0;
}
.trophy-play-btn {
  margin-right: auto;
  padding: 8px 14px !important;
  font-size: 13px !important;
  width: auto !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
@media (max-width: 768px) {
  .trophy-play-btn {
    width: 100% !important;
    margin-right: 0;
    margin-bottom: 8px;
    justify-content: center;
  }
}
.trophy-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gray-200);
}
.trophy-streak {
  font-weight: 600;
  color: var(--gold);
}
.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.trophy {
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  text-align: center;
  transition: transform 0.15s, background 0.15s;
}
.trophy-got {
  background: rgba(255, 184, 0, 0.12);
  border-color: rgba(255, 184, 0, 0.35);
}
.trophy-got:hover { transform: translateY(-2px); }
.trophy-locked { opacity: 0.5; filter: grayscale(0.6); }
.trophy-icon { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.trophy-label {
  font-size: 12px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}
.trophy-got .trophy-label { color: var(--gold); }
.trophy-desc {
  font-size: 11px;
  color: var(--gray-400);
  line-height: 1.4;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding-bottom: 32px;
}

.chapter-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  gap: 14px;
  transition: box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}
.chapter-card.unlocked:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.chapter-card.locked { opacity: 0.55; cursor: default; }
.chapter-card.completed { border-color: var(--green); }

.card-icon { font-size: 28px; flex-shrink: 0; }
.card-body { flex: 1; min-width: 0; }
.card-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); margin-bottom: 2px; }
.card-title { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.card-meta { display: flex; gap: 10px; font-size: 11px; color: var(--gray-600); margin-bottom: 8px; }

.card-progress { margin-bottom: 8px; }
.progress-bar { height: 4px; background: var(--gray-100); border-radius: 2px; margin-bottom: 4px; }
.progress-fill { height: 100%; background: var(--gold); border-radius: 2px; }
.progress-label { font-size: 10px; color: var(--gray-600); }

.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.badge-locked   { background: var(--gray-100); color: var(--gray-600); }
.badge-complete { background: var(--green-bg); color: #16a34a; }
.badge-progress { background: #fef3c7; color: #d97706; }
.badge-available{ background: #eff6ff; color: #2563eb; }

/* ==================== CHAPTER VIEW ==================== */

.chapter-view { max-width: 680px; }
.chapter-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.chapter-icon { font-size: 40px; }
.chapter-eyebrow { font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.06em; }
.chapter-title { font-size: 26px; font-weight: 700; color: var(--navy); }

.lesson-list { display: flex; flex-direction: column; gap: 8px; }

.lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.lesson-item:hover:not(.disabled) { box-shadow: var(--shadow); border-color: var(--gray-200); }
.lesson-item.done { border-color: var(--green); background: #f0fdf4; }
.lesson-item.disabled { opacity: 0.5; cursor: default; }

.lesson-num { font-size: 12px; color: var(--gray-400); width: 20px; text-align: center; flex-shrink: 0; }
.lesson-title { flex: 1; font-size: 14px; font-weight: 500; }
.lesson-xp { font-size: 12px; color: var(--gold); font-weight: 600; }
.lesson-check { font-size: 12px; color: var(--green); font-weight: 700; margin-left: 4px; }
.lesson-locked-note { font-size: 11px; color: var(--gray-400); margin-left: 4px; }

.test-item { border-style: dashed; border-color: var(--gold); }
.test-item .lesson-num { color: var(--gold); }

/* ==================== LESSON VIEW ==================== */

.lesson-view { max-width: 720px; }

.lesson-header { margin-bottom: 24px; }
.lesson-meta-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.chapter-tag { font-size: 12px; color: var(--gray-600); }
.lesson-position {
  font-size: 11px;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.xp-badge {
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}
.lesson-title { font-size: 26px; font-weight: 700; color: var(--navy); }

.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin-bottom: 28px;
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: var(--radius);
  border: none;
}
.video-placeholder {
  background: var(--navy);
  color: var(--gray-400);
  border-radius: var(--radius);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 28px;
}
.video-icon { font-size: 20px; color: var(--gold); }

.lesson-content {
  line-height: 1.75;
  font-size: 15px;
  color: var(--gray-800);
  margin-bottom: 32px;
}
.lesson-content h2 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.lesson-content h3 { font-size: 16px; font-weight: 600; color: var(--navy); margin: 24px 0 8px; }
.lesson-content h4 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; color: var(--gray-800); }
.lesson-content p  { margin-bottom: 12px; }
.lesson-content ul, .lesson-content ol { margin: 0 0 12px 20px; }
.lesson-content li { margin-bottom: 6px; }
.lesson-content pre {
  background: var(--navy-dark);
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 12px 0;
}
.lesson-content code {
  background: var(--gray-100);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 4px;
}
.lesson-content pre code { background: none; padding: 0; font-size: 13px; }
.lesson-content table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.lesson-content th { background: var(--gray-50); text-align: left; padding: 8px 12px; border: 1px solid var(--gray-200); font-weight: 600; }
.lesson-content td { padding: 8px 12px; border: 1px solid var(--gray-200); }
.lesson-content em { color: var(--gray-600); }
.lesson-content strong { color: var(--navy); }

.lesson-footer { border-top: 1px solid var(--gray-100); padding-top: 24px; }
.already-done { color: var(--green); font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.next-hint-banner {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.10), rgba(245, 166, 35, 0.04));
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 8px 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-800);
}
.next-hint-banner strong { color: var(--navy); }

.complete-btn { margin-bottom: 20px; }
.complete-btn.is-locked { background: var(--gray-200); color: var(--gray-600); cursor: not-allowed; }
.continue-cta { margin-bottom: 20px; }

.lesson-nav { display: flex; justify-content: space-between; margin-top: 16px; gap: 12px; }

/* ==================== KNOWLEDGE CHECK ==================== */
.knowledge-check {
  margin: 0 0 32px;
  padding: 20px 22px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fffdf5, #fff8e1);
}
.kc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.kc-icon { font-size: 16px; }
.kc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}
.kc-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
}
.kc-badge.correct { background: #dcfce7; color: #15803d; }
.kc-badge.resolved { background: var(--gray-100); color: var(--gray-600); }
.kc-question {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.5;
}
.kc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kc-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 14px;
  color: var(--navy-dark);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
  width: 100%;
  line-height: 1.45;
}
.kc-option:hover:not(:disabled) {
  background: #fffbe8;
  border-color: var(--gold);
}
.kc-option:disabled { cursor: default; opacity: 0.85; }
.kc-option-letter {
  font-weight: 700;
  font-size: 13px;
  color: var(--gray-600);
  flex-shrink: 0;
  width: 18px;
}
.kc-option-text { flex: 1; }
.kc-option.kc-correct {
  background: #dcfce7;
  border-color: #15803d;
  color: #15803d;
  opacity: 1;
}
.kc-option.kc-correct .kc-option-letter { color: #15803d; }
.kc-option.kc-wrong {
  background: #fef2f2;
  border-color: #b91c1c;
  color: #b91c1c;
  opacity: 1;
}
.kc-option.kc-wrong .kc-option-letter { color: #b91c1c; }
.kc-tick { margin-left: auto; font-weight: 700; }
.kc-feedback:empty { display: none; }
.kc-result {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.kc-result.correct { background: #f0fdf4; color: #15803d; }
.kc-result.wrong { background: #fef2f2; color: #b91c1c; }
.kc-bonus {
  margin-top: 8px;
  font-weight: 700;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==================== TEST VIEW ==================== */

.test-view { max-width: 720px; }
.test-header { margin-bottom: 24px; }
.test-eyebrow { font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.test-title { font-size: 26px; font-weight: 700; color: var(--navy); }
.prev-result { font-size: 12px; margin-top: 8px; padding: 6px 10px; border-radius: 4px; display: inline-block; }
.prev-result.pass { background: var(--green-bg); color: #16a34a; }
.prev-result.fail { background: var(--red-bg); color: var(--red); }

/* Scenario cards */
.scenario-card {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.scenario-slack { border-top: 4px solid #4a154b; }
.scenario-jira  { border-top: 4px solid #0052cc; }
.scenario-email { border-top: 4px solid var(--gray-400); }

.scenario-header {
  padding: 8px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.scenario-type-badge { font-size: 12px; font-weight: 600; color: var(--gray-600); }

.scenario-body { padding: 16px; background: var(--white); }
.scenario-sender { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sender-avatar { font-size: 28px; }
.sender-name { display: block; font-weight: 600; font-size: 14px; }
.sender-role { font-size: 11px; color: var(--gray-600); }
.scenario-text { font-size: 14px; line-height: 1.6; white-space: pre-line; }

.test-task-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.task-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #d97706; margin-bottom: 8px; }
.task-description { font-size: 14px; font-weight: 500; color: var(--gray-800); margin-bottom: 8px; }
.task-hint { font-size: 13px; color: var(--gray-600); }

.test-input-area { margin-bottom: 16px; }
.input-label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.test-paste-tip {
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-700);
  background: #f1f5f9;
  border-left: 3px solid var(--navy);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.test-paste-tip kbd {
  font-family: var(--font-body);
  font-size: 12px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  padding: 1px 6px;
  box-shadow: 0 1px 0 var(--gray-300);
}
.test-paste-tip code { background: var(--white); padding: 1px 5px; border-radius: 3px; }
.test-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px;
  resize: vertical;
  color: var(--gray-800);
  background: var(--white);
  transition: border-color 0.15s;
}
.test-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,166,35,0.15); }
.char-counter { font-size: 12px; color: var(--gray-400); margin-top: 6px; }

.submit-btn { margin-bottom: 28px; }

/* Feedback */
.test-feedback { margin-top: 24px; }
.test-feedback.hidden { display: none; }

.feedback-banner {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.feedback-banner.pass { background: var(--green-bg); border: 1px solid #86efac; }
.feedback-banner.fail { background: var(--red-bg); border: 1px solid #fca5a5; }
.feedback-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.feedback-banner.pass .feedback-title { color: #16a34a; }
.feedback-banner.fail .feedback-title { color: var(--red); }
.feedback-score { font-size: 14px; color: var(--gray-600); }
.feedback-xp    { font-size: 14px; font-weight: 600; color: var(--gold); margin-top: 4px; }

.score-bar-container { margin-bottom: 24px; }
.score-bar { position: relative; height: 12px; background: var(--gray-100); border-radius: 6px; overflow: visible; margin-bottom: 4px; }
.score-fill { height: 100%; border-radius: 6px; transition: width 1s ease; }
.score-fill.pass { background: var(--green); }
.score-fill.fail { background: var(--red); }
.score-threshold {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 20px;
  background: var(--navy);
  border-radius: 1px;
  transform: translateX(-50%);
}
.score-bar-labels { display: flex; font-size: 11px; color: var(--gray-400); }
.score-bar-labels span:last-child { margin-left: auto; }

.criteria-feedback h3 { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.criterion-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}
.criterion-row.pass { background: #f0fdf4; color: #15803d; }
.criterion-row.fail { background: #fef2f2; color: #b91c1c; }
.criterion-icon { font-size: 14px; font-weight: 700; flex-shrink: 0; line-height: 1.4; }
.criterion-body { flex: 1; }
.criterion-desc { line-height: 1.4; }
.criterion-improvement { margin-top: 4px; font-size: 12px; opacity: 0.85; font-style: italic; }
.criterion-weight { font-size: 11px; font-weight: 600; opacity: 0.7; flex-shrink: 0; }

.exemplar-reveal {
  margin-top: 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: #fffbeb;
  overflow: hidden;
}
.exemplar-reveal summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
  user-select: none;
}
.exemplar-reveal summary:hover { background: #fef3c7; }
.exemplar-body {
  padding: 14px 16px;
  border-top: 1px solid var(--gray-200);
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-800, #1f2937);
}
.exemplar-body strong { color: var(--navy); }
.exemplar-body code { background: var(--gray-100); padding: 1px 5px; border-radius: 3px; font-size: 12px; }

.unlock-notice {
  margin-top: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy-dark);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--radius);
  text-align: center;
}

/* ==================== MODAL ==================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 39, 68, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--white);
  border-radius: 12px;
  padding: 40px;
  max-width: 440px;
  width: 90%;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}
.modal-logo { font-size: 48px; margin-bottom: 16px; }
.modal h2 { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.modal p  { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin-bottom: 24px; }

.modal-input {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 16px;
  text-align: center;
  color: var(--navy);
  margin-bottom: 16px;
  transition: border-color 0.15s;
}
.modal-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,166,35,0.15); }
.modal-btn { width: 100%; }

/* ==================== XP TOAST ==================== */

.xp-toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  background: var(--gold);
  color: var(--navy-dark);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 999;
  pointer-events: none;
}
.xp-toast.visible { opacity: 1; transform: translateY(0); }

.achievement-toast {
  position: fixed;
  bottom: 92px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: white;
  padding: 14px 18px;
  border-radius: var(--radius);
  border-left: 4px solid var(--gold);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 999;
  pointer-events: none;
  max-width: 320px;
}
.achievement-toast.visible { opacity: 1; transform: translateY(0); }
.ach-toast-icon { font-size: 32px; flex-shrink: 0; }
.ach-toast-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.ach-toast-label { font-size: 14px; font-weight: 700; margin-top: 2px; }
.ach-toast-desc { font-size: 12px; color: var(--gray-200); margin-top: 2px; line-height: 1.4; }

/* ==================== VERIFY STAMP ==================== */

.verify-stamp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 8px;
  padding: 10px 14px;
  background: rgba(212, 175, 55, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--text-muted);
}
.verify-icon {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
}

/* ==================== MOBILE HEADER ==================== */

.mobile-header {
  display: none;
}

/* ==================== SIDEBAR BACKDROP ==================== */

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 199;
}
.sidebar-backdrop.visible { display: block; }

/* ==================== HOVER (pointer devices only) ==================== */

@media (hover: hover) {
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
  .btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-400); }
  .back-btn:hover { color: var(--navy); }
  .reset-btn:hover { border-color: var(--red); color: var(--red); }
  .chapter-card.unlocked:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .lesson-item:hover:not(.disabled) { box-shadow: var(--shadow); border-color: var(--gray-200); }
  .nav-item:hover { background: var(--navy-light); color: var(--white); }
  .nav-item.nav-locked:hover { background: transparent; }
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
  /* Layout */
  body { flex-direction: column; overflow: hidden; }

  /* Mobile top bar */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--navy);
    color: var(--white);
    padding: 0 16px;
    height: 54px;
    flex-shrink: 0;
    z-index: 100;
  }
  .mobile-header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--white);
  }
  .hamburger-btn {
    background: none;
    border: none;
    color: var(--white);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
  }

  /* Sidebar as slide-in drawer */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    flex-direction: column;
    overflow-y: auto;
  }
  #sidebar.open { transform: translateX(0); }
  .sidebar-nav { flex-direction: column; overflow-x: unset; }
  .nav-chapter-title { display: block; }
  .nav-item { padding: 14px 16px; min-height: 48px; font-size: 14px; }

  /* Main content — generous bottom padding to clear mobile browser chrome (URL bar, toolbar, home indicator) */
  #main-content {
    padding: 20px 14px calc(96px + env(safe-area-inset-bottom, 0px));
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  /* Touch targets */
  .btn-primary { padding: 16px 24px; min-height: 48px; font-size: 15px; width: 100%; }
  .btn-secondary { padding: 14px 18px; min-height: 44px; font-size: 14px; }
  .back-btn { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .reset-btn { padding: 12px 16px; min-height: 44px; font-size: 13px; }

  /* Dashboard */
  .dashboard-header { flex-direction: column; gap: 16px; }
  .xp-summary { width: 100%; text-align: left; min-width: unset; }
  .welcome-name { font-size: 26px; }
  .chapter-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Chapter/lesson/test views */
  .chapter-view, .lesson-view, .test-view { max-width: 100%; }

  /* Lesson nav — stacked full-width so it's impossible to miss */
  .lesson-nav { flex-direction: column; gap: 10px; margin-top: 20px; }
  .lesson-nav .btn-secondary { width: 100%; text-align: center; justify-content: center; }

  /* Lesson title */
  .lesson-title { font-size: 22px; }

  /* Code blocks */
  .lesson-content pre {
    font-size: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tables */
  .lesson-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Textarea — font-size 16px prevents iOS auto-zoom; reduce rows via height */
  .test-textarea { font-size: 16px; min-height: 160px; }

  /* XP toast */
  .xp-toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
    text-align: center;
  }
  .xp-toast.visible { transform: translateY(0); }

  .achievement-toast {
    bottom: 80px;
    right: 16px;
    left: 16px;
    max-width: none;
  }

  /* Modal */
  .modal { padding: 24px; }

  /* Small text bump */
  .player-level, .brand-sub { font-size: 12px; }

  /* Word wrapping */
  .card-title, .lesson-title, .test-title { word-break: break-word; overflow-wrap: break-word; }
}

@media (max-width: 480px) {
  #main-content { padding: 14px 10px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .chapter-grid { gap: 10px; }
  .welcome-name { font-size: 22px; }
}

.play-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0 24px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(26,39,68,0.04), rgba(201,164,76,0.08));
  border: 1px solid rgba(201,164,76,0.4);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.play-cta-btn {
  flex-shrink: 0;
}
.play-cta-sub {
  font-size: 13px;
  color: var(--gray-600);
  flex: 1;
  min-width: 200px;
}

/* Mobile — stack the CTA so the button is always visible above the
   description, regardless of how `.btn-primary { width: 100% }` (set in
   the touch-target media query) interacts with flex-wrap. */
@media (max-width: 768px) {
  .play-cta-row {
    display: block !important;
    margin: 8px 0 20px;
    padding: 14px;
  }
  .play-cta-btn {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px;
    min-height: 48px !important;
    visibility: visible !important;
  }
  .play-cta-sub {
    display: block;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Fallback FAB — fixed-position Play button on the dashboard, hidden in
   play mode + on lesson/test pages (those replace #main-content content,
   so the button is removed from DOM). Visible on all viewports as a
   guaranteed entry point — fixes Firefox Android cases where the inline
   CTA fails to render. */
.play-fab {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  z-index: 60;
  background: var(--gold);
  color: var(--navy-dark);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.play-fab:hover { background: var(--gold-light); }
.play-fab:active { transform: translateY(1px); }
.play-fab-icon { font-size: 18px; }

/* Hide the FAB whenever play mode is active. */
body.in-play .play-fab { display: none !important; }

/* ==================== PLAY MODE (3D) ==================== */

body.in-play #main-content {
  padding: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}
body.in-play #sidebar { display: none !important; }
body.in-play #mobile-header { display: none !important; }

.play-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #eaf3ff;
}

.play-canvas-host {
  position: absolute;
  inset: 0;
}
.play-canvas-host canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}

.play-back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  background: rgba(26, 39, 68, 0.88);
  color: #fff;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.play-back-btn:hover { background: rgba(26, 39, 68, 1); }

.play-tier-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(26, 39, 68, 0.88);
  color: var(--gold);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.play-badge-hud {
  position: absolute;
  top: 56px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 24, 40, 0.92);
  color: #ffd54f;
  border: 1px solid rgba(255, 213, 79, 0.35);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.play-badge-hud .badge-icon { font-size: 16px; }
.play-badge-hud .badge-label { color: #ffd54f; }

/* Objective compass — always points to the next lesson's NPC/device. */
.play-compass {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.play-compass.visible { opacity: 1; }
.play-compass-dial {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(40, 54, 92, 0.95), rgba(16, 22, 40, 0.95));
  border: 2px solid rgba(255, 193, 7, 0.55);
  box-shadow: 0 0 14px rgba(255, 193, 7, 0.45), inset 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-compass-arrow {
  width: 26px;
  height: 26px;
  background: linear-gradient(180deg, #ffe082, #ffab00);
  clip-path: polygon(50% 0%, 100% 100%, 50% 76%, 0% 100%);
  filter: drop-shadow(0 0 4px rgba(255, 193, 7, 0.95));
  transition: transform 0.1s linear;
}
.play-compass-label {
  background: rgba(16, 22, 40, 0.9);
  color: #ffd54f;
  border: 1px solid rgba(255, 213, 79, 0.4);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.play-elevator-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 18, 0.72);
}
.play-elevator-modal.visible { display: flex; }
.play-elevator-modal .elev-panel {
  background: linear-gradient(180deg, #1a2540 0%, #0d1428 100%);
  border: 2px solid rgba(255, 213, 79, 0.55);
  border-radius: 12px;
  padding: 24px 28px;
  min-width: 280px;
  color: #ffd54f;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.play-elevator-modal .elev-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.play-elevator-modal .elev-badge-line {
  font-size: 11px;
  color: #c9a44c;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.play-elevator-modal .elev-floors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.play-elevator-modal .elev-floor-btn {
  background: rgba(255, 213, 79, 0.12);
  border: 1px solid rgba(255, 213, 79, 0.4);
  color: #ffd54f;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.play-elevator-modal .elev-floor-btn:hover {
  background: rgba(255, 213, 79, 0.22);
}
.play-elevator-modal .elev-floor-btn.locked {
  opacity: 0.40;
  cursor: not-allowed;
  background: rgba(140, 140, 140, 0.10);
  border-color: rgba(140, 140, 140, 0.35);
  color: #8a8a8a;
}
.play-elevator-modal .elev-floor-btn.current {
  outline: 2px solid rgba(255, 213, 79, 0.85);
  outline-offset: 2px;
}

.play-fade {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}
.play-fade.opaque { opacity: 1; }

.play-prompt {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 10;
  background: rgba(26, 39, 68, 0.92);
  color: var(--gold);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.play-prompt.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  cursor: pointer;
}

.play-help {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  background: rgba(26, 39, 68, 0.7);
  color: #cfd8dc;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  pointer-events: none;
  font-family: var(--font-mono, monospace);
}

.play-joystick {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 24px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(26, 39, 68, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.3);
  z-index: 10;
  touch-action: none;
  display: none;
}
.play-joystick-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(201, 164, 76, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.05s;
}

.play-interact-btn {
  position: absolute;
  bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(201, 164, 76, 0.9);
  color: #1a2744;
  border: 2px solid #fff;
  font-size: 13px;
  font-weight: 700;
  z-index: 10;
  display: none;
  cursor: pointer;
  touch-action: none;
}
.play-interact-btn.visible { display: block; }

.play-jump-btn {
  position: absolute;
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(33, 150, 243, 0.85);
  color: #fff;
  border: 2px solid #fff;
  font-size: 24px;
  font-weight: 700;
  z-index: 10;
  display: none;
  cursor: pointer;
  touch-action: none;
}
@media (hover: none) and (pointer: coarse) {
  .play-jump-btn { display: block; }
}

@media (hover: none) and (pointer: coarse) {
  .play-joystick { display: block; }
  .play-help { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   In-world lesson overlay (Pillar 3)
   The overlay sits OVER the play canvas. Backdrop blur lets the world
   show through softly. Skins (terminal / book / whiteboard / video /
   dialogue) restyle the chrome around the lesson content.
   ────────────────────────────────────────────────────────────────── */
.lesson-overlay {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 80%;
  height: 90%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
}
.lesson-overlay.hidden { display: none; }
.lesson-overlay.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.lesson-overlay.minimized {
  top: auto;
  bottom: 16px;
  left: auto;
  right: 16px;
  width: 280px;
  height: 56px;
  overflow: hidden;
}
.lesson-overlay.minimized .lo-content { display: none; }
.lesson-overlay.minimized .lo-header {
  border-bottom: none;
  padding: 12px 16px;
}
.lo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, rgba(26, 39, 68, 0.04), rgba(201, 164, 76, 0.06));
}
.lo-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}
.lo-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.lo-actions { display: flex; gap: 8px; }
.lo-min-btn, .lo-close-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.6);
  color: var(--navy);
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.lo-min-btn:hover, .lo-close-btn:hover {
  background: var(--navy); color: var(--gold);
}
.lo-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  font-size: 14px;
  color: var(--gray-800);
}
/* Skin: dialogue (default) */
.lesson-overlay.skin-dialogue { background: rgba(255, 255, 255, 0.95); }
/* Skin: terminal — dark with mono font */
.lesson-overlay.skin-terminal {
  background: rgba(10, 14, 24, 0.94);
  color: #c8e8ff;
  border-color: rgba(80, 150, 200, 0.4);
}
.lesson-overlay.skin-terminal .lo-eyebrow { color: #4fc3f7; }
.lesson-overlay.skin-terminal .lo-title { color: #fafafa; }
.lesson-overlay.skin-terminal .lo-header {
  background: linear-gradient(135deg, rgba(80, 150, 200, 0.08), rgba(20, 60, 100, 0.12));
  border-bottom-color: rgba(80, 150, 200, 0.2);
}
.lesson-overlay.skin-terminal .lo-content {
  color: #c8e8ff;
  font-family: var(--font-mono, 'Consolas', monospace);
}
.lesson-overlay.skin-terminal .lo-content h1,
.lesson-overlay.skin-terminal .lo-content h2,
.lesson-overlay.skin-terminal .lo-content h3 { color: #fff59d; }
.lesson-overlay.skin-terminal .lo-content code {
  background: rgba(80, 150, 200, 0.15);
  color: #ffe082;
  padding: 1px 4px;
  border-radius: 3px;
}
.lesson-overlay.skin-terminal .lo-content pre {
  background: rgba(0, 0, 0, 0.5);
  color: #ddffdd;
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #4fc3f7;
}
/* Skin: book */
.lesson-overlay.skin-book {
  background: rgba(252, 245, 230, 0.96);
  color: #3e2418;
  border-color: rgba(180, 130, 80, 0.5);
  box-shadow: 0 30px 80px rgba(60, 40, 20, 0.5);
}
.lesson-overlay.skin-book .lo-content {
  font-family: 'Georgia', 'Garamond', serif;
  font-size: 15px;
  line-height: 1.7;
  column-count: 2;
  column-gap: 32px;
  column-rule: 1px solid rgba(180, 130, 80, 0.3);
}
.lesson-overlay.skin-book .lo-content h1,
.lesson-overlay.skin-book .lo-content h2,
.lesson-overlay.skin-book .lo-content h3 {
  column-span: all;
  color: #6a3c1a;
  font-family: 'Georgia', serif;
  border-bottom: 1px solid rgba(180, 130, 80, 0.3);
  padding-bottom: 6px;
}
.lesson-overlay.skin-book .lo-eyebrow { color: #6a3c1a; }
.lesson-overlay.skin-book .lo-header {
  background: linear-gradient(135deg, rgba(180, 130, 80, 0.08), rgba(140, 90, 40, 0.12));
}
/* Skin: whiteboard */
.lesson-overlay.skin-whiteboard {
  background: rgba(252, 253, 255, 0.96);
  border-color: rgba(80, 130, 200, 0.4);
}
.lesson-overlay.skin-whiteboard .lo-content {
  font-family: 'Comic Sans MS', 'Comic Neue', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 30px 30px;
}
.lesson-overlay.skin-whiteboard .lo-content h2,
.lesson-overlay.skin-whiteboard .lo-content h3 {
  color: #d63031;
  font-weight: 800;
  text-decoration: underline wavy #d63031 1px;
}
/* Skin: video — dark cinematic */
.lesson-overlay.skin-video {
  background: rgba(10, 10, 14, 0.96);
  color: #e8e8e8;
  border-color: rgba(255, 255, 255, 0.1);
}
.lesson-overlay.skin-video .lo-content { color: #e8e8e8; }
.lesson-overlay.skin-video .lo-content h1,
.lesson-overlay.skin-video .lo-content h2,
.lesson-overlay.skin-video .lo-content h3 { color: #ffd54f; }
.lesson-overlay.skin-video .lo-eyebrow { color: #ffd54f; }
.lesson-overlay.skin-video .lo-title { color: #fff; }
.lesson-overlay.skin-video .lo-header {
  background: linear-gradient(135deg, rgba(50, 50, 60, 0.4), rgba(0, 0, 0, 0.6));
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
/* Mobile — full-screen overlay */
@media (max-width: 768px) {
  .lesson-overlay {
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 0;
  }
  .lesson-overlay.skin-book .lo-content { column-count: 1; }
}

/* Audio settings — gear button + popover */
.play-audio-gear {
  position: absolute;
  top: 64px;       /* sit below the tier badge at the top-right */
  right: 16px;
  z-index: 11;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(26, 39, 68, 0.88);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-audio-gear:hover { background: rgba(26, 39, 68, 1); }

.play-audio-panel {
  position: absolute;
  top: 112px;      /* under the gear */
  right: 16px;
  z-index: 11;
  width: 280px;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
.play-audio-panel.hidden { display: none; }
.play-audio-panel .aud-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--navy);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.play-audio-panel .aud-row {
  display: grid;
  grid-template-columns: 64px 1fr 36px;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  color: var(--gray-800);
}
.play-audio-panel .aud-label { font-weight: 600; }
.play-audio-panel .aud-range { width: 100%; }
.play-audio-panel .aud-mute {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}
.play-audio-panel .aud-mute.on { background: #ffe8ea; border-color: #d77; }
.play-audio-panel .aud-close {
  margin-top: 10px;
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.play-audio-panel .aud-close:hover { background: var(--gold); color: var(--navy); }

/* Customization — button + popover. Anchored top-LEFT (below the back
   button) so it doesn't compete with the audio gear / tier badge. */
.play-custom-btn {
  position: absolute;
  top: 60px;
  left: 16px;
  z-index: 11;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(26, 39, 68, 0.88);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-custom-btn:hover { background: rgba(26, 39, 68, 1); }

.play-custom-panel {
  position: absolute;
  top: 108px;
  left: 16px;
  z-index: 11;
  width: 280px;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
.play-custom-panel.hidden { display: none; }
.play-custom-panel .cust-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--navy);
  text-transform: uppercase;
  margin: 8px 0 4px;
  font-weight: 700;
}
.play-custom-panel .cust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.play-custom-panel .cust-chip {
  flex: 1 1 60px;
  padding: 8px 6px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: #f7f7f7;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-transform: capitalize;
}
.play-custom-panel .cust-chip.active {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.play-promotion-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) scale(0.92);
  z-index: 30;
  background: linear-gradient(135deg, rgba(26,39,68,0.95), rgba(40,55,95,0.95));
  color: #fff;
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 22px 36px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 60px rgba(201,164,76,0.4);
  opacity: 0;
  transition: opacity 0.4s, transform 0.6s cubic-bezier(.2,1.5,.4,1);
  pointer-events: none;
}
.play-promotion-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.play-promotion-toast .prom-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.play-promotion-toast .prom-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.play-congrats-bubble {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, 0) scale(0.9);
  z-index: 28;
  background: rgba(255,255,255,0.96);
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.play-congrats-bubble.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.play-toast {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -10px);
  z-index: 25;
  background: linear-gradient(135deg, var(--gold), #f4c95d);
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.play-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Intro modal */
.play-intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(10, 18, 35, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.play-intro-overlay.visible { display: flex; }
.intro-card {
  max-width: 520px;
  background: #fff;
  border-radius: 12px;
  border: 2px solid var(--gold);
  box-shadow: 0 18px 60px rgba(0,0,0,0.4);
  padding: 28px 28px 24px;
}
.intro-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-weight: 700;
  background: var(--navy);
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.intro-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.intro-card .intro-name { color: var(--gold); }
.intro-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-800);
  margin-bottom: 12px;
}
.intro-card .intro-btn { margin-top: 8px; width: 100%; }

/* Dialogue panel */
.play-dialogue {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(10, 18, 35, 0.45);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 24px;
}
.play-dialogue.visible { display: flex; }
.dlg-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  background: #fff;
  border-radius: 14px;
  border: 2px solid var(--gold);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  padding: 18px 20px 16px;
  animation: dlgIn 0.18s ease-out;
}
@keyframes dlgIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.dlg-close {
  position: absolute;
  top: 8px; right: 12px;
  background: none; border: none;
  font-size: 24px; line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px 8px;
}
.dlg-close:hover { color: var(--navy); }
.dlg-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px;
}
.dlg-portrait {
  font-size: 38px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #2d4263);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dlg-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.dlg-role {
  font-size: 12px;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dlg-status {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-weight: 600;
}
.dlg-status.dlg-done { background: var(--green-bg, #e8f5e9); color: #16a34a; }
.dlg-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-800);
  margin-bottom: 12px;
}
.dlg-next {
  font-size: 13px;
  background: rgba(201,164,76,0.12);
  border-left: 3px solid var(--gold);
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  color: var(--navy);
}
.dlg-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dlg-go { flex: 1; }
.dlg-cancel { flex-shrink: 0; }

@media (max-width: 480px) {
  .intro-card { padding: 22px 18px 18px; }
  .intro-card h2 { font-size: 20px; }
  .dlg-card { padding: 16px 16px 14px; }
  .dlg-actions { flex-direction: column; }
  .dlg-actions button { width: 100%; }
}