@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── TOKENS ────────────────────────────────────────────────────────────── */
:root {
  --bg:           #07040F;
  --surface:      #0F0A1A;
  --card:         #160D28;
  --card-hover:   #1E1238;
  --border:       #2A1850;
  --border-bright:#5A3090;
  --text:         #EDE0FF;
  --text-muted:   #9D7DCE;
  --text-dim:     #5A3880;
  --accent:       #9B6DFF;
  --accent-hover: #B590FF;
  --accent-dim:   rgba(155,109,255,0.15);
  --gold:         #FFCC44;
  --gold-dim:     rgba(255,204,68,0.12);
  --success:      #5AF7A0;
  --success-dim:  rgba(90,247,160,0.12);
  --error:        #FF6B6B;
  --error-dim:    rgba(255,107,107,0.12);
  --warning:      #FFB347;
  --warning-dim:  rgba(255,179,71,0.12);

  /* Terminal */
  --term-bg:      #05020E;
  --term-text:    #FFB347;
  --term-prompt:  #9B6DFF;
  --term-cursor:  #FFB347;
  --term-muted:   #7A5598;
  --term-success: #5AF7A0;
  --term-error:   #FF6B6B;

  --radius:       16px;
  --radius-sm:    10px;
  --radius-pill:  999px;
  --font-display: 'Cinzel', serif;
  --font-sans:    'Nunito', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --shadow:       0 8px 40px rgba(0,0,0,0.85);
  --shadow-sm:    0 2px 16px rgba(0,0,0,0.5);
  --transition:   180ms ease;
  --glow-accent:  0 0 20px rgba(155,109,255,0.35);
  --glow-gold:    0 0 16px rgba(255,204,68,0.4);
}

/* Theme overrides */
.theme-matrix    { --term-bg: #000A00; --term-text: #00FF41; --term-prompt: #00CC33; --term-cursor: #00FF41; }
.theme-cyberpunk { --term-bg: #000814; --term-text: #00EEFF; --term-prompt: #FF0080; --term-cursor: #00EEFF; }
.theme-parchment { --term-bg: #1A1208; --term-text: #E8D4A0; --term-prompt: #C8A040; --term-cursor: #E8D4A0; }

/* ── RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; height: 100dvh; font-size: 16px; }
body {
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { cursor: pointer; font-family: inherit; border: none; background: none; }
a { color: inherit; text-decoration: none; }
code {
  font-family: var(--font-mono);
  background: rgba(155,109,255,0.15);
  color: var(--accent-hover);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}
kbd {
  font-family: var(--font-mono);
  background: var(--card);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.85em;
}

/* ── APP WRAPPER ────────────────────────────────────────────────────────── */
#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.screen { display: none; height: 100%; height: 100dvh; }
.screen.active { display: flex; flex-direction: column; }

/* ── STARFIELD BACKGROUND ────────────────────────────────────────────────── */
#screen-home::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(155,109,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 65%, rgba(255,204,68,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 15%, rgba(155,109,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 80%, rgba(255,204,68,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 40%, rgba(155,109,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 20% 90%, rgba(90,247,160,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 50%, rgba(255,179,71,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 35%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.2) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* ── INSTALL BANNER ─────────────────────────────────────────────────────── */
#install-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: linear-gradient(90deg, #1E1238, #2A1850);
  border-top: 1px solid var(--border-bright);
  padding: 10px 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
  z-index: 200;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
#install-banner.visible { display: flex; }
#btn-install {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
#btn-install:hover { background: var(--accent-hover); }

/* ── HOME SCREEN ────────────────────────────────────────────────────────── */
#screen-home {
  position: relative;
  overflow-y: auto;
  flex-direction: column;
}
#screen-home > * { position: relative; z-index: 1; }

.home-header {
  padding: 24px 20px 20px;
  background: linear-gradient(180deg, rgba(26,14,42,0.95) 0%, rgba(7,4,15,0.7) 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.home-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.home-brand-icon {
  width: 52px; height: 52px;
  filter: drop-shadow(0 0 12px rgba(155,109,255,0.5));
}
.home-brand-text h1 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.home-brand-text span {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.home-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.stat-chip.xp    { background: var(--accent-dim); color: var(--accent-hover); border-color: var(--border-bright); }
.stat-chip.level { background: var(--gold-dim); color: var(--gold); border-color: rgba(255,204,68,0.3); }
.stat-chip.streak{ background: var(--warning-dim); color: var(--warning); border-color: rgba(255,179,71,0.3); }

.xp-bar-wrap {
  margin-bottom: 14px;
}
.xp-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.xp-bar-track {
  height: 6px;
  background: var(--card);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: var(--radius-pill);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(155,109,255,0.5);
}

.btn-continue {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--accent), #6D28D9);
  color: #fff;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: var(--glow-accent);
  transition: all var(--transition);
}
.btn-continue:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(155,109,255,0.5);
}
.btn-continue:disabled {
  opacity: 0.5;
  cursor: default;
}

.module-grid {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 80px;
}

.module-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.module-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--module-color, var(--accent));
  opacity: 0;
  transition: opacity var(--transition);
}
.module-card:hover:not(.locked) {
  background: var(--card-hover);
  border-color: var(--border-bright);
  transform: translateX(2px);
}
.module-card:hover:not(.locked)::before { opacity: 1; }
.module-card.locked {
  cursor: default;
  opacity: 0.45;
  filter: grayscale(0.6);
}
.module-card.complete {
  border-color: rgba(90,247,160,0.3);
  background: linear-gradient(90deg, rgba(90,247,160,0.06), var(--card));
}

.module-card-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-dim);
  border-radius: var(--radius-sm);
}
.module-card.locked .module-card-icon { background: rgba(255,255,255,0.03); }

.module-card-body { flex: 1; min-width: 0; }
.module-card-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-card-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.module-card-commands {
  display: flex;
  gap: 4px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.cmd-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 6px;
  background: var(--accent-dim);
  color: var(--accent-hover);
  border-radius: 4px;
  border: 1px solid var(--border-bright);
}

.module-card-right { flex-shrink: 0; text-align: right; }
.module-progress-dots { display: flex; gap: 3px; justify-content: flex-end; margin-bottom: 4px; }
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--transition);
}
.dot.done    { background: var(--success); }
.dot.current { background: var(--gold); box-shadow: 0 0 5px rgba(255,204,68,0.6); }
.xp-label { font-size: 0.68rem; color: var(--gold); font-weight: 700; }

/* ── SPLIT LAYOUT ─────────────────────────────────────────────────────── */
#screen-learn {
  display: none;
  flex-direction: row;
  height: 100%;
}
#screen-learn.active { display: flex; }

.learn-panel {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.term-panel {
  width: 42%;
  min-width: 280px;
  max-width: 520px;
  background: var(--term-bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── SCREEN HEADER (back button + title) ─────────────────────────────── */
.screen-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(22,13,40,0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.btn-back {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 1rem;
  flex-shrink: 0;
  transition: all var(--transition);
}
.btn-back:hover { background: var(--card-hover); color: var(--text); border-color: var(--border-bright); }

.screen-hdr-text { flex: 1; min-width: 0; }
.screen-hdr-text h2 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.screen-hdr-text p { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }

/* ── MODULE OVERVIEW ─────────────────────────────────────────────────── */
.module-hero {
  padding: 20px 16px 16px;
  background: linear-gradient(135deg, rgba(26,14,42,0.8), rgba(7,4,15,0.4));
  border-bottom: 1px solid var(--border);
}
.module-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.module-hero-icon {
  font-size: 2.2rem;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-dim);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.module-hero-info h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.module-hero-info p { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.module-hero-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }

.section-label {
  padding: 12px 16px 6px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.lesson-list, .activity-list { display: flex; flex-direction: column; padding: 0 16px; gap: 6px; }

.lesson-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.lesson-item:hover { background: var(--card-hover); border-color: var(--border-bright); }
.lesson-item-icon {
  font-size: 1.2rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lesson-item-text { flex: 1; min-width: 0; }
.lesson-item-text strong { font-size: 0.85rem; font-weight: 600; }
.lesson-item-text p { font-size: 0.73rem; color: var(--text-muted); margin-top: 1px; }
.lesson-item-arrow { color: var(--text-dim); font-size: 0.8rem; flex-shrink: 0; }

.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.activity-item:hover { background: var(--card-hover); border-color: var(--border-bright); }
.activity-item.done { border-color: rgba(90,247,160,0.25); background: rgba(90,247,160,0.05); }

.activity-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: all var(--transition);
}
.activity-dot.done { background: var(--success); border-color: var(--success); color: #07040F; }
.activity-dot.current { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 8px rgba(255,204,68,0.4); }

.activity-item-body { flex: 1; min-width: 0; }
.activity-item-body span { font-size: 0.83rem; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-item-body p { font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; }

.activity-type-tag {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.tag-multiple_choice { background: rgba(59,130,246,0.2); color: #60A5FA; }
.tag-command_puzzle  { background: rgba(155,109,255,0.2); color: var(--accent-hover); }
.tag-spot_bug        { background: rgba(255,107,107,0.2); color: var(--error); }
.tag-terminal_challenge { background: rgba(90,247,160,0.15); color: var(--success); }
.tag-true_false      { background: rgba(255,204,68,0.2); color: var(--gold); }
.tag-pipeline_panic  { background: rgba(255,179,71,0.2); color: var(--warning); }

.module-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

/* ── LESSON SLIDE ────────────────────────────────────────────────────── */
.lesson-slide {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lesson-slide-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
}
.lesson-analogy {
  padding: 14px;
  background: var(--gold-dim);
  border: 1px solid rgba(255,204,68,0.2);
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.lesson-analogy::before { content: '🧙 '; font-style: normal; }
.lesson-content {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 16px;
}
.lesson-example {
  background: var(--term-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--term-text);
  line-height: 1.7;
  margin-bottom: 14px;
  white-space: pre;
  overflow-x: auto;
}
.lesson-tip {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  background: var(--accent-dim);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.lesson-tip::before { content: '💡'; flex-shrink: 0; }

.lesson-nav {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  background: var(--surface);
}
.lesson-pips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  justify-content: center;
}
.lesson-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: all var(--transition);
}
.lesson-pip.active { background: var(--accent); width: 18px; border-radius: 3px; }

/* ── ACTIVITY AREA ────────────────────────────────────────────────────── */
.activity-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.activity-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
}
.activity-hdr {
  margin-bottom: 18px;
}
.activity-type-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.activity-question {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

/* MCQ */
.mcq-options { display: flex; flex-direction: column; gap: 8px; }
.mcq-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
  width: 100%;
}
.mcq-option:hover:not(:disabled) { background: var(--card-hover); border-color: var(--border-bright); }
.mcq-option.selected { border-color: var(--accent); background: var(--accent-dim); }
.mcq-option.correct  { border-color: var(--success); background: var(--success-dim); }
.mcq-option.wrong    { border-color: var(--error);   background: var(--error-dim); }
.mcq-letter {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.mcq-option.selected .mcq-letter { background: var(--accent); color: #fff; }
.mcq-option.correct  .mcq-letter { background: var(--success); color: #07040F; }
.mcq-option.wrong    .mcq-letter { background: var(--error);   color: #fff; }
.mcq-text { font-size: 0.87rem; }

/* True / False */
.tf-options { display: flex; gap: 10px; }
.tf-btn {
  flex: 1;
  padding: 16px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--card);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.tf-btn.true-btn:hover:not(:disabled)  { border-color: var(--success); background: var(--success-dim); color: var(--success); }
.tf-btn.false-btn:hover:not(:disabled) { border-color: var(--error);   background: var(--error-dim);   color: var(--error); }
.tf-btn.correct { border-color: var(--success); background: var(--success-dim); color: var(--success); }
.tf-btn.wrong   { border-color: var(--error);   background: var(--error-dim);   color: var(--error); }

/* Command Puzzle */
.puzzle-answer-area {
  min-height: 52px;
  padding: 10px;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  transition: border-color var(--transition);
}
.puzzle-answer-area.has-tokens { border-style: solid; border-color: var(--border-bright); }
.puzzle-answer-area.correct-anim { border-color: var(--success); box-shadow: 0 0 12px rgba(90,247,160,0.25); }
.puzzle-answer-area.wrong-anim   { border-color: var(--error);   animation: shake 0.35s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}

.puzzle-token-bank { display: flex; flex-wrap: wrap; gap: 6px; }
.puzzle-token {
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-hover);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}
.puzzle-token:hover { background: var(--accent-dim); transform: scale(1.04); }
.puzzle-token.placed {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent-hover);
  position: relative;
}
.puzzle-token.placed::after {
  content: '×';
  margin-left: 5px;
  opacity: 0.5;
  font-style: normal;
}

/* Spot the Bug */
.code-block {
  background: var(--term-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow-x: auto;
  margin-bottom: 10px;
}
.code-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--transition);
  border: 2px solid transparent;
  border-left: none; border-right: none;
}
.code-line:hover:not(.correct):not(.wrong) { background: rgba(155,109,255,0.08); }
.code-line.selected { background: rgba(155,109,255,0.12); border-color: var(--border-bright); }
.code-line.correct  { background: var(--success-dim); border-color: var(--success); }
.code-line.wrong    { background: var(--error-dim);   border-color: var(--error); }
.code-line-num { color: var(--text-dim); font-size: 0.7rem; width: 18px; text-align: right; flex-shrink: 0; }
.code-line-text { color: var(--term-text); white-space: pre; }
.code-line.correct .code-line-text { color: var(--success); }
.code-line.wrong   .code-line-text { color: var(--error); }
.code-line-bug-marker { margin-left: auto; font-size: 0.8rem; }

/* Terminal Challenge */
.terminal-challenge-goal {
  padding: 14px;
  background: var(--success-dim);
  border: 1px solid rgba(90,247,160,0.3);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.terminal-challenge-goal h4 { font-size: 0.8rem; color: var(--success); font-weight: 700; margin-bottom: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
.terminal-challenge-goal p  { font-size: 0.88rem; color: var(--text); line-height: 1.5; }
.terminal-challenge-hint {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--gold-dim);
  border: 1px solid rgba(255,204,68,0.2);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.terminal-challenge-hint::before { content: '💡'; flex-shrink: 0; }
.terminal-status {
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  display: none;
}
.terminal-status.visible { display: block; }
.terminal-status.success { background: var(--success-dim); color: var(--success); border: 1px solid rgba(90,247,160,0.3); }

/* Feedback & Explanation */
.result-box {
  padding: 14px;
  border-radius: var(--radius);
  margin-top: 14px;
  animation: fadeIn 0.25s ease;
}
.result-box.correct { background: var(--success-dim); border: 1px solid rgba(90,247,160,0.3); }
.result-box.wrong   { background: var(--error-dim);   border: 1px solid rgba(255,107,107,0.3); }
.result-box h4 { font-size: 0.82rem; font-weight: 700; margin-bottom: 5px; letter-spacing: 0.04em; }
.result-box.correct h4 { color: var(--success); }
.result-box.wrong   h4 { color: var(--error); }
.result-box p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.activity-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  background: var(--surface);
}

/* ── PIPELINE PANIC GAME ─────────────────────────────────────────────── */
.panic-game {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panic-intro {
  padding: 0 16px 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.panic-pattern {
  margin: 0 16px 14px;
  padding: 10px 14px;
  background: var(--term-bg);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--term-text);
}
.panic-pattern span { color: var(--term-prompt); }
.panic-timer-bar {
  height: 4px;
  background: var(--card);
  margin: 0 16px 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.panic-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), var(--gold));
  border-radius: var(--radius-pill);
  transition: width 1s linear;
}
.panic-stats {
  display: flex;
  gap: 10px;
  padding: 0 16px 12px;
}
.panic-stat {
  flex: 1;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.panic-stat-val { font-size: 1.2rem; font-weight: 700; font-family: var(--font-display); }
.panic-stat-lbl { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }
.panic-stat.pass-stat .panic-stat-val { color: var(--success); }
.panic-stat.fail-stat .panic-stat-val { color: var(--error); }

.panic-arena {
  flex: 1;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
}
.panic-token-display {
  padding: 16px 24px;
  background: var(--card);
  border: 2px solid var(--border-bright);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  min-width: 200px;
  transition: all 0.2s ease;
  animation: tokenAppear 0.2s ease;
}
@keyframes tokenAppear { from { transform: scale(0.8) translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.panic-token-display.flash-correct { border-color: var(--success); background: var(--success-dim); color: var(--success); }
.panic-token-display.flash-wrong   { border-color: var(--error);   background: var(--error-dim);   color: var(--error); }

.panic-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}
.panic-btn {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  border: 2px solid transparent;
  transition: all var(--transition);
  letter-spacing: 0.03em;
}
.panic-btn.pass-btn {
  background: var(--success-dim);
  border-color: rgba(90,247,160,0.4);
  color: var(--success);
}
.panic-btn.pass-btn:hover { background: rgba(90,247,160,0.2); transform: scale(1.03); }
.panic-btn.block-btn {
  background: var(--error-dim);
  border-color: rgba(255,107,107,0.4);
  color: var(--error);
}
.panic-btn.block-btn:hover { background: rgba(255,107,107,0.2); transform: scale(1.03); }

.panic-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  animation: fadeIn 0.3s ease;
}
.panic-result-score {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: var(--glow-gold);
}
.panic-result h3 { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); }
.panic-result p  { font-size: 0.85rem; color: var(--text-muted); text-align: center; }

/* ── TERMINAL ────────────────────────────────────────────────────────── */
.term-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.term-dots { display: flex; gap: 5px; }
.term-dot  { width: 10px; height: 10px; border-radius: 50%; }
.term-dot.red    { background: #FF5F57; }
.term-dot.yellow { background: #FEBC2E; }
.term-dot.green  { background: #28C840; }
.term-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
}
.theme-picker { display: flex; gap: 4px; }
.theme-btn {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition);
}
.theme-btn.active { border-color: rgba(255,255,255,0.6); }
.theme-btn[data-theme="default"]   { background: #FFB347; }
.theme-btn[data-theme="matrix"]    { background: #00FF41; }
.theme-btn[data-theme="cyberpunk"] { background: #00EEFF; }
.theme-btn[data-theme="parchment"] { background: #E8D4A0; }
.theme-btn:disabled { opacity: 0.25; cursor: default; }

.term-output {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--term-text);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  background: var(--term-bg);
}
.term-output::-webkit-scrollbar       { width: 4px; }
.term-output::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.term-line { display: flex; gap: 0; word-break: break-all; }
.term-line.cmd-line .term-prompt-str { color: var(--term-prompt); }
.term-line.cmd-line .term-cmd-str   { color: var(--term-text); }
.term-line.out-line { color: var(--term-text); opacity: 0.85; padding-left: 2px; }
.term-line.err-line { color: var(--term-error); }
.term-line.sys-line { color: var(--term-muted); font-style: italic; }
.term-line.ok-line  { color: var(--term-success); }

.term-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: var(--term-bg);
  flex-shrink: 0;
}
.term-prompt-str {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--term-prompt);
  flex-shrink: 0;
  white-space: nowrap;
}
#term-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--term-text);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  caret-color: var(--term-cursor);
  min-width: 0;
}

/* Mobile macro keyboard */
.macro-keyboard {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.4);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.macro-keyboard::-webkit-scrollbar { display: none; }
.macro-key {
  padding: 5px 9px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: var(--term-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition);
}
.macro-key:active { background: rgba(255,255,255,0.15); }

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  transition: all var(--transition);
  letter-spacing: 0.02em;
}
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #6D28D9);
  color: #fff;
  box-shadow: 0 4px 16px rgba(109,40,217,0.4);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(109,40,217,0.5); }
.btn-secondary {
  background: var(--card);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { background: var(--card-hover); color: var(--text); border-color: var(--border-bright); }
.btn-success {
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff;
}
.btn-full { width: 100%; }

/* ── LEVEL UP TOAST ─────────────────────────────────────────────────── */
.levelup-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: linear-gradient(135deg, var(--card), #1E1238);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 28px 36px;
  text-align: center;
  z-index: 500;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow), var(--glow-gold);
  pointer-events: none;
}
.levelup-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.levelup-toast .lt-stars { font-size: 1.5rem; margin-bottom: 8px; }
.levelup-toast .lt-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
}
.levelup-toast .lt-sub { font-size: 0.85rem; color: var(--text-muted); }

/* ── MOBILE LAYOUT ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  #screen-learn {
    flex-direction: column;
  }
  .learn-panel { flex: 0 0 58%; }
  .term-panel {
    width: 100%;
    min-width: unset;
    max-width: unset;
    flex: 1;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .macro-keyboard { display: flex; }
  .term-output { font-size: 0.72rem; }
}
@media (max-width: 400px) {
  .home-brand-text h1 { font-size: 1.1rem; }
  .module-card-title  { font-size: 0.88rem; }
  .btn { font-size: 0.82rem; padding: 9px 12px; }
}