/* Basal ganglia lesson. All rules scoped under .bg-* */
.bg-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bg-hero img { width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 18px 30px rgba(123,92,253,.35)); }
.bg-hero.sm img { max-height: 26vh; }
.bg-note { font-size: 13px; color: var(--dim); text-align: center; }

/* ---------- the gate ---------- */
.bg-gate { width: 100%; max-width: 380px; display: block; }
.bg-lab { fill: var(--dim); font: 700 13px var(--sans); }
.bg-idea rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.bg-idea text { fill: var(--faint); font: 700 13px var(--sans); transition: fill .3s; }
.bg-idea.on rect { fill: var(--raised); stroke: var(--violet-bright); }
.bg-idea.on text { fill: var(--text); }
.bg-wire { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; transition: stroke .2s; }
.bg-wire.go { stroke: var(--mint); }
.bg-brake rect { fill: var(--red); transition: opacity .2s; }
.bg-brake { transition: transform .25s; }
.bg-gate.bg-weak .bg-brake rect { opacity: .35; }
.bg-body line, .bg-arm line, .bg-fore line { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.bg-head, .bg-fore circle { fill: var(--text); }
.bg-table { fill: #5a4a3c; }
.bg-cup { fill: #cfe9ff; opacity: .85; }
.bg-task { font-size: 16px; text-align: center; min-height: 22px; }
.bg-task b { color: var(--gold); }
.bg-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bg-btns .btn { padding-left: 4px; padding-right: 4px; font-size: 15px; }
.gauge.bg-dopa { width: 100%; max-width: 320px; }

/* ---------- the bicycle and the pill ---------- */
.bg-two { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 0; }
.bg-card { padding: 22px 10px; border-radius: 14px; background: var(--raised); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: box-shadow .3s; }
.bg-card b { font-size: 17px; }
.bg-card span { font-size: 14px; color: var(--dim); }
.bg-card.on { box-shadow: inset 0 0 0 2.5px var(--mint); }
.bg-card.on span { color: var(--mint); font-weight: 700; }
.bg-pill { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.bg-pill i { display: block; width: 34px; height: 16px; border-radius: 8px; background: linear-gradient(90deg, #f3f0ea 50%, var(--gold) 50%); }

/* ---------- the maze firing ---------- */
.bg-maze { width: 100%; padding: 10px 0; }
.bg-mrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bg-mcell { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; border-radius: 12px; background: var(--surface); transition: box-shadow .3s; }
.bg-mcell span { font-size: 14px; font-weight: 700; }
.bg-spk { height: 60px; display: flex; align-items: flex-end; gap: 4px; }
.bg-spk i { display: block; width: 4px; border-radius: 2px; background: var(--gold); transition: height .6s cubic-bezier(.3,.7,.3,1), opacity .6s; }
.bg-spk i:nth-child(1) { height: 70%; } .bg-spk i:nth-child(2) { height: 95%; } .bg-spk i:nth-child(3) { height: 55%; } .bg-spk i:nth-child(4) { height: 85%; } .bg-spk i:nth-child(5) { height: 65%; }
.bg-maze.late .bg-spk1 i, .bg-maze.late .bg-spk2 i { height: 8%; opacity: .45; }
.bg-maze.bg-bracket .bg-mrow { position: relative; }
.bg-maze.bg-bracket .bg-mcell:first-child { box-shadow: inset 3px 0 0 var(--mint); }
.bg-maze.bg-bracket .bg-mcell:last-child { box-shadow: inset -3px 0 0 var(--mint); }
.bg-mcell.pick { box-shadow: inset 0 0 0 2.5px var(--mint) !important; }

/* ---------- the reader's clock ---------- */
.bg-clock { width: 100%; padding: 26px 12px; border-radius: 18px; background: var(--raised); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bg-clock b { font: 600 30px var(--mono); color: var(--gold); }
.bg-clock span { font-size: 15px; color: var(--dim); }
.bg-clock em { font: 600 22px var(--mono); font-style: normal; margin-top: 6px; }
.bg-times { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 0; }
.bg-times div { padding: 20px 8px; border-radius: 14px; background: var(--raised); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bg-times b { font: 600 26px var(--mono); color: var(--gold); }
.bg-times span { font-size: 14px; color: var(--dim); }

@media (max-height: 700px) {
  .bg-gate { max-width: 300px; }
  .bg-hero img { max-height: 26vh; }
  .bg-spk { height: 44px; }
}