/* Checkpoint inhibitor lesson. All rules scoped under .ckpt-* */

.ckpt-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ckpt-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.ckpt-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.ckpt-hero { width: min(80%, 320px); }
.ckpt-hero img { width: 100%; display: block; }
.ckpt-t { fill: var(--text); font: 600 14px var(--sans); text-anchor: middle; }
.ckpt-t.dim { fill: var(--dim); font-size: 13px; }
.ckpt-t.sm { font-size: 13px; }
.ckpt-t.start { text-anchor: start; }

.ckpt-knob { stroke: #0A0E1A; stroke-width: 1; stroke-linejoin: round; }
.ckpt-knob.tri { fill: var(--gold); }
.ckpt-knob.rnd { fill: #FF6B6B; }
.ckpt-cup { stroke-width: 1.5; stroke-linejoin: round; }
.ckpt-cup.tri { fill: #3C3F66; stroke: var(--gold); }
.ckpt-cup.rnd { fill: #4A2630; stroke: #FF6B6B; }
.ckpt-y { fill: none; stroke: #EAE3D7; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: ckpt-in .3s ease-out both; }
@keyframes ckpt-in { from { opacity: 0; } }

.ckpt-tcell { fill: rgba(169,155,255,.16); stroke: var(--violet-bright); stroke-width: 2.5; transition: fill .3s, stroke .3s; }
.ckpt-cancer { fill: rgba(216,85,95,.16); stroke: #D8555F; stroke-width: 2.5; }
.ckpt-cancer.healthy { fill: rgba(63,214,154,.12); stroke: var(--mint); }
.ckpt-hit, .ckpt-hitr { fill: transparent; }
.ckpt-tapme .ckpt-tg { cursor: pointer; }
.ckpt-tapme .ckpt-tcell { animation: ckpt-pulse 1.2s ease-in-out 3; }
@keyframes ckpt-pulse { 50% { opacity: .45; } }
.ckpt-fit .ckpt-knob.piece { filter: drop-shadow(0 0 5px var(--gold)); }
.ckpt-braked .ckpt-tcell { fill: rgba(110,105,96,.18); stroke: var(--faint); }
.ckpt-braked .ckpt-knob.signal, .ckpt-show .ckpt-knob.signal { filter: drop-shadow(0 0 6px #FF6B6B); }
.ckpt-show .ckpt-cup.rnd { stroke-width: 3; }
.ckpt-fire .ckpt-tcell { fill: rgba(252,192,80,.22); stroke: var(--gold); }
.ckpt-brake { cursor: default; }
.ckpt-capme .ckpt-brake:not(.capped) { cursor: pointer; }
.ckpt-capme .ckpt-brake:not(.capped) .ckpt-cup, .ckpt-brake.glow .ckpt-cup { stroke-width: 3; animation: ckpt-pulse 1s ease-in-out 3; }
.ckpt-body { transition: opacity .3s; }
.ckpt-healthy .ckpt-bleb { fill: rgba(63,214,154,.12); stroke: var(--mint); }
.ckpt-bleb { fill: rgba(216,85,95,.14); stroke: #D8555F; stroke-width: 1.5; animation: ckpt-in .4s ease-out both; }

.ckpt-cards { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
.ckpt-cards span { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 12px; text-align: center; font-size: 14px; color: var(--dim); line-height: 1.35; }
.ckpt-cards b { display: block; font: 700 19px var(--serif); color: var(--gold); margin-bottom: 3px; }

.ckpt-pc.odd { fill: #FB9679; stroke: #0A0E1A; stroke-width: 1; }
.ckpt-pc.norm { fill: var(--mint); stroke: #0A0E1A; stroke-width: 1; }
.ckpt-mini { fill: rgba(169,155,255,.3); stroke: var(--violet-bright); stroke-width: 2; animation: ckpt-in .3s ease-out both; }

.ckpt-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; padding: 16px 0 4px; }
.ckpt-vs div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ckpt-vs b { font: 700 38px var(--serif); color: var(--gold); line-height: 1; }
.ckpt-vs .lo b { color: var(--dim); }
.ckpt-vs span { font-size: 14px; color: var(--dim); line-height: 1.3; max-width: 150px; }

@media (max-height: 700px) {
  .ckpt-hero { width: min(62%, 240px); }
  .ckpt-duel, .ckpt-mut { max-height: 226px; }
  .ckpt-cards span { padding: 10px 10px; }
}