/* =========================================================
 * anims-movies-ch1.css — the few chapter-1 movie pieces that the shared
 * components (anims-movies.css) do not cover. Positions are inline.
 * ========================================================= */
/* mooreMovie: doubling bars */
.mv-board .mo-bar { position: absolute; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #34d399, #059669); box-shadow: 0 0 20px rgba(52,211,153,.35); }
.mv-board .mo-yr { position: absolute; text-align: center; font-size: 26px; font-weight: 800; line-height: 1.4; color: #cbd5e1; }
.mv-board .mo-x { position: absolute; text-align: center; font-size: 28px; font-weight: 900; line-height: 1.4; color: #a7f3d0; }
/* societyMovie: bit / qubit */
.mv-board .so-bit { position: absolute; height: 120px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 900;
  line-height: 1; background: #0f172a; border: 4px solid #94a3b8; color: #f8fafc; direction: ltr; }
.mv-board .so-bit.q { border-color: #a78bfa; color: #ddd6fe; background: rgba(76,29,149,.6); }
/* neural networks, probability bars, factor bars (lessons 1-2 · 1-4) */
.mv-board .bar { position: absolute; height: 34px; border-radius: 17px; background: rgba(148,163,184,.18); overflow: hidden; }
.mv-board .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 17px; background: linear-gradient(90deg, #38bdf8, #a78bfa); }
html[dir="rtl"] .mv-board .bar i { inset: 0 0 0 auto; }
.mv-board .lbl { position: absolute; font-size: 28px; font-weight: 900; line-height: 1.4; color: #e2e8f0; white-space: nowrap; }
.mv-board .typed { position: absolute; font-size: 30px; font-weight: 800; line-height: 1.5; color: #e2e8f0; border-radius: 22px; padding: 14px 22px;
  background: #0f172a; border: 3px solid #475569; }
.mv-board .lbl.c { text-align: center; }
/* genaiMovie: the blank and the hallucinated word */
.mv-board .gn-blank { display: inline-block; color: #94a3b8; }
.mv-board .gn-fill { display: inline-block; opacity: 0; font-weight: 900; padding: 0 10px; border-radius: 10px; }
.mv-board .gn-fill.bad { background: #7f1d1d; color: #fecaca; }
.mv-board .typed .wd { display: inline-block; }
/* cautionMovie: the AI's mark on the X-ray */
.mv-board .ca-mark { position: absolute; border-radius: 50%; border: 6px solid #f87171; }
.mv-board .bar.bad i { background: linear-gradient(90deg, #fb923c, #ef4444); }
.mv-board .bar.ok i { background: linear-gradient(90deg, #38bdf8, #34d399); }