/* ════════ Learn Bengali — course path & lesson player ════════
   Reuses the app tokens (saffron/parchment) and existing .dash, .mcq,
   .opt, .btn3d, .bigprompt components; only course-specific pieces here. */

/* reading bridge on the course home */
.readbridge { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 14px 0; }
.readbridge:active { transform: translateY(1px); }
.readbridge b { font-family: var(--display); font-size: 1.1rem; }

/* the lesson path */
.lpath { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.lnode {
  display: flex; align-items: center; gap: 13px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px;
  box-shadow: var(--e1); cursor: pointer; transition: transform 0.12s;
}
.lnode.open { border-color: var(--gold); }
.lnode.open:active { transform: translateY(1px); }
.lnode.locked { opacity: 0.5; cursor: default; box-shadow: none; }
.ln-badge {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--line-strong);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.lnode.open .ln-badge { background: var(--accent); color: #fff; border-color: var(--accent-deep); }
.lnode.done .ln-badge { background: var(--good); color: #fff; border-color: var(--good-deep); }
.ln-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ln-body b { font-family: var(--display); font-size: 1.14rem; line-height: 1.1; color: var(--ink); }
.ln-body span { font-size: 0.84rem; color: var(--ink-dim); }
.ln-cur {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; color: var(--accent-deep);
  background: var(--accent-soft); padding: 3px 7px; border-radius: 6px;
}

/* lesson player chrome */
.lesson { display: flex; flex-direction: column; min-height: calc(100vh - 130px); }
.lhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lclose { background: none; border: none; font-size: 1.2rem; color: var(--ink-faint); cursor: pointer; padding: 4px 8px; }
.ltitle { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.lbar { height: 8px; background: var(--well); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.lbar i { display: block; height: 100%; border-radius: 99px; transition: width 0.3s;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent)); }
.lstage { flex: 1; display: flex; flex-direction: column; }

/* intro & done cards */
.lcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; box-shadow: var(--e1); margin-bottom: auto; }
.lcard.center { text-align: center; }
.lkicker { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px; }
.lcard h2 { font-family: var(--display); font-size: 1.6rem; margin: 0 0 10px; }
.lcard p { color: var(--ink-dim); line-height: 1.6; margin: 0 0 10px; }
.ldone { font-size: 3rem; margin-bottom: 4px; }
.lxp { display: inline-block; margin-top: 12px; font-family: var(--display); font-weight: 700;
  font-size: 1.3rem; color: var(--good-deep); background: var(--good-soft); padding: 6px 18px; border-radius: 99px; }

.btn3d.wide { width: 100%; margin-top: 14px; }

/* "meet the words" list */
.wlist { display: flex; flex-direction: column; gap: 8px; margin-bottom: auto; }
.wrow { display: flex; align-items: baseline; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; cursor: pointer; }
.wrow:active { background: var(--well); }
.wrow .w { font-family: var(--serif); font-weight: 700; font-size: 1.18rem; color: var(--accent-deep); flex: 0 0 42%; }
.wrow .m { color: var(--ink-dim); font-size: 0.95rem; }

/* match exercise */
.matchboard { display: flex; gap: 10px; margin-bottom: auto; }
.mcol { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mtile { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--accent-deep);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 10px;
  cursor: pointer; min-height: 52px; transition: transform 0.1s; }
.mtile.plain { font-family: var(--sans); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.mtile.sel { border-color: var(--accent); background: var(--accent-soft); }
.mtile.matched { opacity: 0.35; border-color: var(--good); background: var(--good-soft); cursor: default; }
.mtile.badpick { border-color: var(--bad); background: var(--bad-soft); animation: shake 0.3s; }