/* ===== LearningLab — live L1–L4 demo styles =====
   Ported from the BharatEduHub demo page and re-themed to the
   LearningLab palette (blue #2563eb / navy #14284b / gold #f5a623). */

.demos {
  --canvas: #f7f9fd;
  --surface: #ffffff;
  --surface-2: #eef3fb;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --gold: #f5a623;
  --danger: #dc2626;
  --ok: #15803d;
  --heading: #14284b;
  --body: rgba(20, 33, 61, 0.78);
  --muted: rgba(20, 33, 61, 0.55);
  --line: rgba(20, 33, 61, 0.12);
  --radius: 16px;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  font-family: var(--font-body);
  color: var(--body);
  line-height: 1.6;
}
.demos h2, .demos h3, .demos h4, .demos h5 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.15;
  margin: 0;
}
.demos p { margin: 0; }
.demos ul { margin: 0; }

/* ===== Buttons (scoped to the demo page) ===== */
.demos .btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.demos .btn:hover { transform: translateY(-2px); }
.demos .btn-primary { background: var(--accent); color: #ffffff; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.28); }
.demos .btn-primary:hover { background: var(--accent-dark); }
.demos .btn-ghost { border-color: var(--line); color: var(--heading); background: transparent; }
.demos .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.demos .btn-small { padding: 0.45rem 1rem; font-size: 0.85rem; }

/* ===== Level tabs ===== */
.level-tabs { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin: 0 0 2.2rem; }
.level-tab {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  padding: 0.7rem 1.4rem; border-radius: 999px;
  background: var(--surface); color: var(--body);
  border: 2px solid var(--line); cursor: pointer; transition: all 0.15s ease;
}
.level-tab:hover { border-color: var(--accent); color: var(--heading); }
.level-tab.active { background: var(--accent); border-color: var(--accent); color: #ffffff; }

.level-panel { display: none; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.level-panel.active { display: grid; animation: demoFadeUp 0.4s ease; }
@keyframes demoFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.level-badge {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(37, 99, 235, 0.12); color: var(--accent);
  border: 1px solid rgba(37, 99, 235, 0.3);
  padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 1rem;
}
.level-info h3 { font-size: 1.7rem; margin-bottom: 0.8rem; letter-spacing: -0.02em; }
.level-info ul { margin: 1.2rem 0; padding-left: 1.2rem; }
.level-info li { margin-bottom: 0.45rem; }
.level-fit { font-size: 0.88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; }
.level-fit strong { color: var(--heading); }

/* ===== Demo frames ===== */
.demo-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(20, 33, 61, 0.14);
}
.demo-hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 1.1rem;
  background: var(--heading);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--gold);
}
.demo-controls { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.1rem; border-top: 1px solid var(--line); }

/* L1 — narrated page-turner */
.l1-progress { height: 4px; background: var(--surface-2); }
.l1-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.35s ease; }
.l1-stage {
  min-height: 290px; display: flex; align-items: center; justify-content: center;
  padding: 1.6rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
}
.l1-slide { text-align: center; max-width: 400px; animation: demoFadeUp 0.4s ease; }
.l1-icon { width: 76px; height: 76px; margin: 0 auto 1rem; }
.l1-icon svg { width: 100%; height: 100%; }
.l1-slide h5 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.l1-slide p { font-size: 0.92rem; }
.l1-slide ul { text-align: left; font-size: 0.88rem; margin: 0.7rem auto 0; padding-left: 1.2rem; max-width: 320px; }
.l1-slide li { margin-bottom: 0.3rem; }
.l1-done { margin-top: 0.9rem; color: var(--ok); font-weight: 700; font-size: 0.85rem !important; }
.l1-audio { display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: var(--muted); }
.eq { display: inline-flex; gap: 2.5px; align-items: flex-end; height: 14px; }
.eq i { width: 3px; border-radius: 2px; background: var(--accent); animation: demoEq 0.9s infinite ease-in-out; }
.eq i:nth-child(2) { animation-delay: 0.25s; }
.eq i:nth-child(3) { animation-delay: 0.45s; }
.eq i:nth-child(4) { animation-delay: 0.1s; }
.l1-audio.paused .eq i { animation-play-state: paused; height: 4px; }
@keyframes demoEq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* L2 — Spot the Phish */
.l2-stage { padding: 1.1rem 1.2rem 1.3rem; min-height: 320px; }
.l2-instruction { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.8rem !important; }
.l2-instruction strong { color: var(--accent); }
.l2-email {
  background: #fbfaf6; color: #2E2A24; border: 1px solid rgba(20,33,61,0.14); border-radius: 10px; overflow: hidden;
  font-size: 0.84rem; line-height: 1.5;
  box-shadow: 0 8px 20px rgba(20, 33, 61, 0.1);
}
.l2-email-head { padding: 0.65rem 0.9rem; background: #f0ede3; border-bottom: 1px solid #ddd7c6; }
.l2-email-body { padding: 0.8rem 0.9rem; }
.l2-email-body p { margin-bottom: 0.5rem !important; }
.l2-meta { font-weight: 700; color: #6B6453; }
.hotspot { cursor: pointer; padding: 0 3px; border-radius: 4px; border-bottom: 2px dotted #b9b095; transition: background 0.15s; }
.hotspot:hover { background: rgba(37, 99, 235, 0.16); }
.hotspot.found { background: rgba(220, 38, 38, 0.12); outline: 2px solid var(--danger); border-bottom-color: transparent; }
.hotspot-link { color: #1A55B0; text-decoration: underline; }
.l2-progressline { margin-top: 0.8rem; font-size: 0.82rem; color: var(--muted); }
.l2-progressline strong { color: var(--accent); }
.l2-found-list { list-style: none; margin-top: 0.5rem; padding-left: 0; }
.l2-found-list li { font-size: 0.8rem; margin-bottom: 0.35rem; color: var(--body); animation: demoFadeUp 0.3s ease; }
.l2-found-list strong { color: var(--danger); }
.l2-continue-row { margin-top: 0.9rem; min-height: 1rem; }
.l2-options-col { flex-direction: column; align-items: stretch; }
.l2-options-col .l2-opt { border-radius: 9px; text-align: left; }
.l2-result { text-align: center; padding: 2rem 1rem; animation: demoFadeUp 0.4s ease; }
.l2-result-badge { font-size: 2.6rem; margin-bottom: 0.6rem; }
.l2-result h5 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.l2-result p { font-size: 0.9rem; margin-bottom: 1.1rem !important; }
.l2-q { font-family: var(--font-display); font-weight: 700; color: var(--heading); margin-bottom: 0.8rem !important; }
.l2-options { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.l2-opt {
  padding: 0.6rem 1.1rem; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); color: var(--body);
  border: 1.5px solid var(--line); font-family: var(--font-body); font-size: 0.9rem;
  transition: all 0.15s;
}
.l2-opt:hover { border-color: var(--accent); color: var(--heading); }
.l2-opt.right { background: var(--ok); border-color: var(--ok); color: #ffffff; }
.l2-opt.wrong { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.l2-feedback { margin-top: 0.8rem; font-size: 0.88rem; min-height: 1.4em; color: var(--heading); font-weight: 600; }

/* L3 — branching scenario (stays cinematic/dark inside the frame) */
.demo-l3 .l3-stage {
  min-height: 420px;
  /* Artwork only — no full-stage scrim. Contrast is handled locally by the
     card's own feathered panel, because a scrim strong enough for bright
     worlds (Pirate Cove, Jungle Ruins) would bury the dark ones (The Vault).
     --l3-bg is swapped by demos.js when a theme is deep-linked. */
  background: var(--l3-bg, url('assets/scenes/climb/1.webp')) center/cover;
  position: relative; display: flex; align-items: flex-end;
}
.l3-hud-right { display: flex; gap: 0.8rem; align-items: center; }
#l3-xp { transition: transform 0.2s; }
#l3-xp.pop { transform: scale(1.35); color: #ffffff; }
.l3-badge-slot { font-size: 1rem; }
.l3-card {
  margin: 0; padding: 1.5rem 1.3rem 1.3rem; width: 100%;
  /* Near-solid where the text sits, feathered at the top so it blends into the
     scene instead of cutting it off with a hard edge. Same contrast on every
     world, bright or dark. */
  background: linear-gradient(to top,
    rgba(8, 15, 30, 0.95) 0%,
    rgba(8, 15, 30, 0.95) 78%,
    rgba(8, 15, 30, 0) 100%);
  border: 0;
  animation: demoFadeUp 0.4s ease;
}
.l3-card .l3-speaker {
  font-family: var(--font-display); font-weight: 800; color: var(--gold);
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(8, 15, 30, 0.9);
}
.l3-card p {
  color: #ffffff; margin: 0.4rem 0 0.9rem !important; font-size: 0.95rem;
  text-shadow: 0 1px 8px rgba(8, 15, 30, 0.85);
}
.l3-card .l3-skill {
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 700; color: rgba(255, 255, 255, 0.6);
  margin: -0.4rem 0 0.8rem !important;
}
/* Speaker line + progress dots share a row */
.l3-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.l3-dots { display: inline-flex; gap: 5px; flex: none; }
.l3-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28); transition: all 0.2s ease;
}
.l3-dots i.done { background: rgba(255, 255, 255, 0.6); }
.l3-dots i.on { background: var(--gold); transform: scale(1.25); }
/* Consequence of the choice just made */
.l3-fb {
  border-left: 3px solid var(--gold);
  padding: 0.1rem 0 0.1rem 0.7rem;
  font-size: 0.88rem !important; color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 0 0.9rem !important; animation: demoFadeUp 0.3s ease;
}
.l3-fb b { color: #ffffff; font-weight: 700; }
.l3-gain {
  display: inline-block; margin-left: 0.3rem; font-weight: 800;
  font-family: var(--font-display); color: var(--gold); white-space: nowrap;
}
/* Continue / begin / replay — one wide action instead of a choice list */
.l3-choice.l3-go {
  text-align: center; font-family: var(--font-display); font-weight: 700;
  background: var(--accent); border-color: var(--accent); color: #ffffff;
}
.l3-choice.l3-go:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.l3-choices { display: flex; flex-direction: column; gap: 0.5rem; }
.l3-choice {
  text-align: left; padding: 0.65rem 1rem; border-radius: 9px; cursor: pointer;
  /* Sits over artwork, so it needs its own opaque-enough ground, not just a tint. */
  background: rgba(10, 18, 34, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: #ffffff; font-family: var(--font-body); font-size: 0.9rem; transition: all 0.15s;
}
.l3-choice:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; }

/* L4 — Finance Floor Simulation */
.l4-wrap { display: grid; grid-template-columns: 1.5fr 1fr; }
.l4-main { padding: 0.2rem 1.1rem 1.1rem; }
.l4-log-panel {
  border-left: 1px solid var(--line); background: #0f1b33;
  display: flex; flex-direction: column; max-height: 420px;
}
.l4-log-title {
  padding: 0.6rem 0.8rem; font-family: var(--font-display); font-weight: 800;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6ee7a8; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.l4-log { flex: 1; overflow-y: auto; padding: 0.7rem 0.8rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.68rem; }
.l4-log-entry { color: rgba(255, 255, 255, 0.62); margin-bottom: 0.4rem; line-height: 1.5; animation: demoFadeUp 0.25s ease; word-break: break-word; }
.l4-log-entry .l4-ts { color: rgba(255, 255, 255, 0.34); }
.l4-log-entry em { color: var(--gold); font-style: normal; }
.l4-log-entry b { color: #6ee7a8; }
.l4-log-entry .l4-x { color: #fca5a5; }
.l4-instructions { padding: 0.9rem 0 0; font-size: 0.88rem; color: var(--muted); }
.l4-instructions strong { color: var(--heading); }
.l4-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 0 0; }
.l4-pool, .l4-slots { display: flex; flex-direction: column; gap: 0.55rem; min-height: 200px; }
.l4-item {
  padding: 0.6rem 0.9rem; border-radius: 9px; cursor: grab;
  background: var(--surface-2); border: 1.5px dashed var(--accent);
  color: var(--heading); font-size: 0.88rem; font-weight: 600;
  user-select: none; transition: transform 0.12s, box-shadow 0.12s;
}
.l4-item:active { cursor: grabbing; }
.l4-item.selected { transform: scale(1.04); border-style: solid; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22); }
.l4-slot {
  padding: 0.6rem 0.9rem; border-radius: 9px; min-height: 2.6rem;
  background: #ffffff;
  border: 1.5px solid var(--line);
  color: var(--muted); font-size: 0.88rem;
  display: flex; align-items: center; gap: 0.5rem;
  transition: all 0.15s;
}
.l4-slot.over { border-color: var(--accent); background: rgba(37, 99, 235, 0.06); }
.l4-slot.filled.ok { border-color: var(--ok); color: var(--heading); }
.l4-slot.filled.bad { border-color: var(--danger); color: var(--heading); }
.l4-slot .slot-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); min-width: 1.2rem; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .level-panel.active { grid-template-columns: 1fr; gap: 1.8rem; }
  .l4-board { grid-template-columns: 1fr; }
  .l4-wrap { grid-template-columns: 1fr; }
  .l4-log-panel { border-left: none; border-top: 1px solid var(--line); max-height: 180px; }
}