/* Creatine lesson. All rules scoped under .crt-* */
.crt-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crt-note { font-size: 13px; color: var(--dim); text-align: center; }
.crt-hero { width: 100%; max-width: 230px; aspect-ratio: 1; margin: 6px 0 22px; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 2px var(--line), 0 10px 22px rgba(0,0,0,.35); }
.crt-hero img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; display: block; }
#controls .btn.crt-go { min-height: 76px; font-size: 22px; }

/* ---------- the chase ---------- */
.crt-full { flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px 8px; box-sizing: border-box; }
.crt-chase { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.crt-g { width: 100%; align-self: flex-start; }
.crt-chase.crt-s-q .crt-g { display: none; }
.crt-g .gt { height: 12px; }
.crt-g .gt i { background: var(--gold); transition: width .15s linear; }
.crt-g.bad .gt i { background: var(--red); }
.crt-road { width: 100%; height: auto; display: block; overflow: hidden; border-radius: 18px; background: linear-gradient(#2B2440, #1C1828 60%); touch-action: manipulation; }
.crt-street { fill: #3A3546; }
.crt-lane { stroke: #EDE4CF; stroke-width: 2; stroke-dasharray: 14 12; opacity: .45; }
.crt-walk { fill: #4A4458; }
.crt-curb { stroke: #6E6680; stroke-width: 3; }
.crt-bus, .crt-man { transition: transform .12s linear; }
.crt-body { fill: #7B68F0; }
.crt-stripe { fill: var(--gold); }
.crt-win { fill: #CFE6FF; opacity: .85; }
.crt-wheel { fill: #17131F; stroke: #2E2938; stroke-width: 3; }
.crt-hub { fill: #8D86A0; }
.crt-puff { fill: #B9B2C8; opacity: 0; transition: opacity .1s; }
.crt-puff.crt-s-on { opacity: .5; }
.crt-man .hd { fill: var(--gold); }
.crt-man path { fill: none; stroke: var(--gold); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.crt-wind path { stroke-width: 2.5; opacity: .7; }
.crt-man.crt-s-alt .lg { transform: scaleX(-1); }
.crt-man.crt-s-slow .crt-wind { display: none; }
.crt-man.crt-s-slow .hd { fill: var(--dim); }
.crt-man.crt-s-slow path { stroke: var(--dim); }
.crt-out { fill: var(--text); font: 800 15px var(--sans); text-anchor: middle; }
.crt-ghost path { fill: var(--gold); }
.crt-ghost text { fill: var(--gold); font: 700 13px var(--sans); text-anchor: end; }

/* ---------- inside the leg ---------- */
.crt-mol { width: 100%; max-width: 340px; height: auto; display: block; overflow: visible; }
.crt-rl { fill: var(--dim); font: 700 15px var(--sans); text-anchor: middle; }
.crt-ln { stroke: var(--line-strong); stroke-width: 4; }
circle.crt-a { fill: #B79BFF; }
text.crt-a, text.crt-cr { fill: #17130D; font: 800 16px var(--sans); text-anchor: middle; dominant-baseline: central; }
.crt-p { fill: var(--gold); transition: fill .2s, stroke .2s; }
.crt-atp.crt-s-spent .crt-p3 { fill: transparent; stroke: var(--dim); stroke-width: 2; stroke-dasharray: 3 3; }
.crt-cr { fill: #5AA9FF; transition: opacity .3s; }
.crt-pc.crt-s-used .crt-p { opacity: 0; }
.crt-pc.crt-s-used rect.crt-cr { opacity: .4; }
.crt-pc.crt-s-used .crt-ln { opacity: .3; }
.crt-flyp { filter: drop-shadow(0 0 6px rgba(252,192,80,.8)); }

/* ---------- the scale ---------- */
.crt-scale { width: 100%; max-width: 280px; height: auto; display: block; }
.crt-sb { fill: #E9E4F2; }
.crt-lcd { fill: #1E2A24; }
.crt-lcdt { fill: #3FD69A; font: 800 28px var(--mono); text-anchor: middle; }
.crt-pad { fill: #CFC8DC; }

/* ---------- the time line ---------- */
.crt-time { width: 100%; max-width: 340px; height: auto; display: block; overflow: visible; }
.crt-ef { fill: var(--gold); transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform .6s ease-out; }
.crt-zt { fill: var(--gold); font: 700 13px var(--sans); opacity: 0; transition: opacity .5s; }
.crt-time.crt-s-on .crt-zt { opacity: 1; }
.crt-time.crt-s-on .crt-ef { transform: none; }
.crt-row { cursor: pointer; }
.crt-hit { fill: transparent; stroke: transparent; stroke-width: 2; }
.crt-row.crt-s-pick .crt-hit { stroke: var(--text); }
.crt-en { fill: var(--text); font: 700 14px var(--sans); text-anchor: end; }
.crt-eb { fill: var(--violet-bright); }
.crt-ed { fill: #17130D; font: 800 13px var(--sans); text-anchor: end; }

@media (max-height: 700px) {
  .crt-hero { max-width: 170px; }
  .crt-scale { max-width: 200px; }
}