/* Catchiness lesson. All rules scoped under .ct-* */
.cth-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cth-hero img { width: 230px; }
.cth-lab { fill: var(--dim); font: 700 12.5px var(--sans); }
.cth-cap { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--dim); text-align: center; }

/* the game's roll */
.cth-roll { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); padding: 8px 4px 2px; }
.cth-half { fill: rgba(123,92,253,.10); }
.cth-rl { stroke: var(--line); stroke-width: 1; }
.cth-nt { fill: var(--violet-bright); opacity: 0; transform-box: fill-box; transform-origin: center; }
.cth-nt.on { opacity: 1; animation: cthPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes cthPop { from { transform: scale(.3); } }
.cth-mk { font: 800 14px var(--sans); }
.cth-mk.ok { fill: var(--mint); }
.cth-mk.no { fill: var(--red); }
.cth-dirs.busy .choice { opacity: .6; }

/* repeats inside repeats */
.cth-levels { display: flex; flex-direction: column; gap: 10px; }
.cth-lv { padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cth-lv span { display: block; font: 700 14px var(--sans); color: var(--text); margin-bottom: 6px; }
.cth-lv small { display: block; margin-top: 5px; font-size: 13px; color: var(--dim); }
.cth-row { display: flex; gap: 5px; }
.cth-row i { flex: 1; height: 18px; border-radius: 6px; }
.cth-row i.a { background: var(--violet-bright); }
.cth-row i.h { background: var(--gold); }
.cth-row i.v { background: var(--raised); border: 1px solid var(--line-strong); flex: 1.4; }
.cth-row i.c { background: var(--gold); }

/* effort */
.cth-effort { display: flex; flex-direction: column; gap: 10px; }
.cth-eb { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 8px; }
.cth-eb span { font: 700 14px var(--sans); color: var(--text); }
.cth-eb div { height: 26px; border-radius: 9px; background: var(--raised); overflow: hidden; }
.cth-eb i { display: block; height: 100%; background: var(--violet-bright); }
.cth-eb.low i { background: var(--mint); }
.cth-effort .cth-cap { margin: 0 0 2px; text-align: left; }

/* the race */
.cth-race { display: flex; flex-direction: column; gap: 12px; }
.cth-rc span { display: block; margin-bottom: 5px; font: 700 14px var(--sans); color: var(--text); }
.cth-rc div { position: relative; height: 32px; border-radius: 10px; background: var(--raised); overflow: hidden; }
.cth-rc i { position: absolute; inset: 0 auto 0 0; background: var(--violet); }
.cth-rc.fast i { background: var(--gold); }
.cth-rc b { position: relative; display: block; padding: 7px 10px; font: 700 14px var(--mono); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.cth-rc.fast b { color: #2A1B00; text-shadow: none; }

/* icons */
.cth-ico { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* three choruses */
.cth-chs { display: flex; flex-direction: column; gap: 8px; }
.cth-ch { display: grid; grid-template-columns: 22px 1fr 96px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cth-ch b { font: 800 16px var(--sans); color: var(--text); }
.cth-mini { display: block; width: 100%; height: auto; }
.cth-mini circle { fill: var(--violet-bright); }
.cth-ch span { display: flex; align-items: center; gap: 5px; font: 700 13px var(--sans); color: var(--dim); }
.cth-ch .cth-ico { width: 24px; height: 24px; flex: none; }

@media (max-height: 700px) {
  .cth-hero img { width: 190px; }
  .cth-levels { gap: 6px; }
  .cth-lv { padding: 7px 10px; }
    .cth-ch { padding: 5px 10px; }
}