/* Gaius Musonius Rufus lesson. All rules scoped under .mus-* */
.mus-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ---------- the chariot ---------- */
.mus-full { flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 18px 8px; box-sizing: border-box; }
.mus-tally { width: 100%; max-width: 360px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mus-t { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px; background: var(--raised); box-shadow: 0 0 0 1.5px var(--line); }
.mus-t b { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.mus-t i { font: 800 16px var(--sans); font-style: normal; color: var(--text); }
.mus-t.mus-s-wait i { color: var(--dim); }
/* A fixed height, so the road doesn't snap smaller when the question's options replace the reins. */
.mus-road { flex: 0 0 auto; height: clamp(220px, calc(100vh - 400px), 470px); width: 100%; max-width: 360px; display: block; border-radius: 20px; touch-action: manipulation; }
.mus-sand { fill: #3A2F3E; }
.mus-track { fill: #C9A574; }
.mus-mid { stroke: #F4E3C3; stroke-width: 3; stroke-dasharray: 20 20; opacity: .7; }
.mus-plate rect { fill: #17131F; }
.mus-plate text { fill: var(--gold); font: 800 16px var(--sans); text-anchor: middle; }
.mus-cpos { transition: transform .12s ease-out; }
.mus-horse ellipse { fill: #8A5A3C; }
.mus-horse circle { fill: #6E452D; }
.mus-reins { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.mus-wheel { fill: #2A2232; }
.mus-car { fill: var(--gold); stroke: #8C6420; stroke-width: 2; }
.mus-driver { fill: #F4E3C3; }
.mus-horse { animation: mus-bob .5s ease-in-out infinite alternate; }
@keyframes mus-bob { to { transform: translateY(-2px); } }
.mus-chariot.mus-s-tilt-l { animation: mus-tl .2s ease-out; }
.mus-chariot.mus-s-tilt-r { animation: mus-tr .2s ease-out; }
@keyframes mus-tl { 40% { transform: rotate(-10deg); } }
@keyframes mus-tr { 40% { transform: rotate(10deg); } }
.mus-chariot.mus-s-crash { animation: mus-crash .45s ease-out; }
.mus-chariot.mus-s-crash .mus-car { fill: var(--red); }
@keyframes mus-crash { 20% { transform: translateX(-6px) rotate(-8deg); } 50% { transform: translateX(6px) rotate(8deg); } 80% { transform: translateX(-3px); } }
.mus-rock path { fill: #6F6A78; stroke: #4A4652; stroke-width: 2; stroke-linejoin: round; }
.mus-rock .mus-rk-hi { fill: none; stroke: #A39EAD; stroke-width: 2.5; stroke-linecap: round; }
.mus-rock.mus-s-hit path { fill: var(--red); }
.mus-reins-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
#controls .btn.mus-rein { font-size: 28px; line-height: 1; touch-action: manipulation; }

/* The opener's copy runs longer than practice's, so each screen sizes the road to its own copy. */
.mus-s-long .mus-road { height: clamp(220px, calc(100vh - 424px), 470px); }
.mus-s-short .mus-road { height: clamp(220px, calc(100vh - 340px), 520px); }

/* ---------- two doctors ---------- */
.choices.mus-docs { width: 100%; max-width: 400px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choices.mus-docs .choice { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; text-align: center; }
.mus-half { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.mus-half.l { object-position: 0% 50%; }
.mus-half.r { object-position: 100% 50%; }
.choices.mus-docs .choice b { font: 800 16px var(--sans); color: var(--text); }
.choices.mus-docs .choice span { font: 600 13px/1.3 var(--sans); color: var(--dim); }

/* ---------- who can learn ---------- */
.mus-three { width: 100%; max-width: 360px; }
.mus-three img { width: 100%; display: block; }
.mus-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.mus-names span { font: 700 13px/1.25 var(--sans); color: var(--dim); text-align: center; padding: 6px 2px; border-radius: 10px; transition: color .4s, box-shadow .4s; }
.mus-three.mus-s-all .mus-names span { color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }

@media (max-height: 700px) {
  .mus-three { max-width: 300px; }
}