/* Cato the Younger lesson. All rules scoped under .cto-* */
.cto-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cto-note { font-size: 12.5px; color: var(--dim); text-align: center; max-width: 300px; }
.cto-bust img { display: block; width: 220px; max-width: 100%; max-height: 34vh; object-fit: contain; border-radius: 18px; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }
.cto-quote { width: 100%; max-width: 330px; padding: 14px 16px 12px 18px; border-radius: 16px; background: linear-gradient(160deg, rgba(252, 192, 80, .10), rgba(123, 92, 253, .08)); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.cto-quote p { margin: 0 0 8px; font: italic 500 18px/1.4 var(--serif); color: var(--text); }
.cto-quote cite { display: block; font: 500 12px var(--sans); font-style: normal; color: var(--dim); }

/* ---------- the target ---------- */
.cto-ring { stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.cto-ring.w { fill: #EAE3D7; }
.cto-ring.b { fill: #3A6EA5; }
.cto-ring.r { fill: #C94F4F; }
.cto-ring.g { fill: var(--gold); }
.cto-aimring { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 3 2; }
.cto-stuck line { stroke: #F4EBDD; stroke-width: 2.5; }
.cto-stuck path { fill: none; stroke: #C9A27A; stroke-width: 2; stroke-linecap: round; }
.cto-stuck circle { fill: #F4EBDD; stroke: #16142B; stroke-width: 1; }
.cto-stuck.hit circle { fill: var(--mint); }
.cto-stuck.miss circle { fill: var(--red); }


/* ---------- two archers ---------- */
.cto-duo { width: 100%; max-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cto-duo.cto-one { grid-template-columns: 1fr; max-width: 300px; }
.cto-one .cto-arch { flex-direction: row; gap: 10px; text-align: left; padding: 6px 12px; }
.cto-arch { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.cto-arch b { font: 700 14px var(--sans); color: var(--text); }
.cto-arch svg { width: 118px; height: 118px; overflow: visible; }
.cto-arch span { font: 500 13px/1.3 var(--sans); color: var(--dim); }
.cto-stuck, .cto-drift { transition: opacity .5s; }
.cto-pre .cto-stuck, .cto-pre .cto-drift, .cto-pre .cto-arch span { opacity: 0; }
.cto-arch span { transition: opacity .5s; }
.cto-drift { fill: none; stroke: rgba(169, 155, 255, .9); stroke-width: 2; stroke-dasharray: 4 3; }

/* ---------- sunset ---------- */
.cto-sun { position: relative; width: 100%; max-width: 320px; }
.cto-sun svg { display: block; width: 100%; height: auto; }
.cto-dusk { fill: #2B3F73; transition: fill .6s; }
.cto-sun.late .cto-dusk { fill: #6A3F6E; }
.cto-sun.set .cto-dusk { fill: #1A1733; }
.cto-arc { fill: none; stroke: rgba(252, 192, 80, .25); stroke-width: 1.5; stroke-dasharray: 4 5; }
.cto-sol { fill: var(--gold); transition: fill .6s; }
.cto-sun.late .cto-sol { fill: #F08A4B; }
.cto-sun.set .cto-sol { opacity: .35; }
.cto-curia rect, .cto-curia path { fill: #CFC6B6; }
.cto-curia .cto-cc { fill: #A69F93; }
.cto-ground { fill: #3B3552; }
.cto-sunlab { position: absolute; top: 8px; left: 12px; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; }

/* ---------- ball ---------- */
.cto-ballbox svg { display: block; width: 200px; height: auto; overflow: visible; }
.cto-field { fill: rgba(63, 214, 154, .25); }
.cto-ball { fill: #EAE3D7; stroke: #C9B79B; stroke-width: 2; }
.cto-seam { fill: none; stroke: #C94F4F; stroke-width: 2; }
.cto-ball, .cto-seam { transform-box: view-box; }
.cto-ballbox.bounce .cto-ball, .cto-ballbox.bounce .cto-seam { animation: ctoBounce .7s cubic-bezier(.3, 0, .7, 1) 2; }
@keyframes ctoBounce { 50% { transform: translateY(-30px); } }

@media (max-height: 700px) {
  .cto-bust img { width: 180px; max-height: 28vh; }
  .cto-quote p { font-size: 16px; }
  .cto-arch svg { width: 72px; height: 72px; }
  .cto-sun { max-width: 270px; }
  .cto-ballbox svg { width: 160px; }
}