/* 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; }

/* 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; }

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