/* Antigen lesson. All rules scoped under .agn-* */

.agn-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.agn-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.agn-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.agn-hero { width: min(80%, 320px); }
.agn-hero img { width: 100%; display: block; }
.agn-t { fill: var(--dim); font: 600 13px var(--sans); text-anchor: middle; transition: opacity .3s; }
.agn-t.big { fill: var(--text); font-size: 17px; font-weight: 700; }
.agn-t.gone { opacity: 0; }

/* shapes */
.agn-knob { fill: var(--violet-bright); stroke: #0A0E1A; stroke-width: 1; stroke-linejoin: round; }
.agn-knob.tri { fill: var(--gold); }
.agn-knob.rnd { fill: #7FC8FF; }
.agn-knob.sq { fill: var(--mint); }
.agn-knob.own { fill: #7FC8FF; }
.agn-coat { fill: #2A2F52; stroke: var(--violet-bright); stroke-width: 2; }
.agn-core { fill: rgba(169,155,255,.25); }
.agn-grain { fill: #6B5A2E; stroke: #C9A95A; stroke-width: 2; }
.agn-pore { fill: rgba(10,14,26,.55); }
.agn-mem { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.agn-stalk { fill: #3C3F66; }
.agn-cup { fill: #3C3F66; stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; transition: stroke .3s; }
.agn-docked .agn-cup { stroke: var(--mint); stroke-width: 2.5; }

/* the hunt */
.agn-pick { cursor: pointer; transition: opacity .35s; }
.agn-hit { fill: transparent; }
.agn-pick.wrong .agn-coat { stroke: var(--red); }
.agn-pick.off { opacity: .3; }
.agn-pick.right { opacity: 1; }

/* your own cells */
.agn-body { fill: rgba(123,92,253,.14); stroke: var(--violet-bright); stroke-width: 2; }
.agn-nuc { fill: rgba(169,155,255,.35); }
.agn-cut { opacity: .45; }
.agn-x { stroke: var(--red); stroke-width: 4; stroke-linecap: round; }

/* the flu, zoomed */
.agn-zoom .agn-cup { stroke-width: .4; }
.agn-zoom .agn-knob { stroke-width: .3; opacity: .92; }
.agn-miss .agn-cup { stroke: var(--red); }
.agn-g { width: 100%; }

/* blood */
.agn-rbc { fill: #8E2A36; stroke: #D8555F; stroke-width: 2; }
.agn-dim { fill: rgba(10,14,26,.28); }
.agn-bt { transition: opacity .35s; }
.agn-o .agn-bt { opacity: .3; }
.agn-o .agn-bt[data-t="O"] { opacity: 1; }
.agn-o .agn-bt[data-t="O"] .agn-rbc { stroke: var(--mint); stroke-width: 3; }
.agn-keys { display: flex; gap: 18px; justify-content: center; font-size: 13px; color: var(--dim); font-weight: 600; }
.agn-keys span { display: inline-flex; align-items: center; gap: 6px; }
.agn-key { width: 18px; height: 18px; vertical-align: -3px; }
.agn-cc { width: 88px; height: 88px; margin: 0 auto; display: block; }
.rulecard .agn-key { margin: 0 2px; }

/* vaccine */
.agn-whole { transition: opacity .5s; }
.agn-strip .agn-whole { opacity: 0; }

/* cancer */
.agn-tb { fill: rgba(123,92,253,.14); stroke: var(--violet-bright); stroke-width: 2; transition: stroke .3s, fill .3s; }
.agn-tc.bad .agn-tb { fill: rgba(216,85,95,.18); stroke: #D8555F; }
.agn-tc.bad .agn-nuc { fill: rgba(255,138,138,.4); }
.agn-tc.hit .agn-tb { fill: rgba(252,192,80,.3); stroke: var(--gold); stroke-width: 3; }
.agn-res.ok { fill: var(--mint); }
.agn-res.no { fill: #FF8A8A; }
.choices.agn-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choices.agn-row .choice { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 6px; text-align: center; }
.agn-okey { width: 34px; height: 34px; }

@media (max-height: 700px) {
  .agn-hero { width: min(62%, 240px); }
  .agn-fit { max-height: 214px; }
  .agn-cc { width: 70px; height: 70px; }
}