/* Vaccination lesson. All rules scoped under .vac-* */
.vac-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vac-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* the village */
.vac-vil { width: 100%; max-width: 290px; }
.vac-vil svg { display: block; width: 100%; height: auto; overflow: visible; }
.vac-hd, .vac-bd { fill: #D9D1C3; transition: fill .3s, opacity .4s; }
.vac-ring { fill: none; stroke: var(--gold); stroke-width: 1.6; opacity: 0; transition: opacity .3s; }
.vac-spots circle { fill: #FF9F43; opacity: 0; transition: opacity .2s; }
.vac-sick .vac-spots circle { opacity: 1; }
.vac-sick .vac-hd, .vac-sick .vac-bd { fill: #E8C9A8; }
.vac-mild .vac-spots circle:nth-child(odd) { opacity: 1; }
.vac-cut .vac-bd { fill: #E8C9A8; }
.vac-cow .vac-bd { fill: var(--violet-bright); }
.vac-dead .vac-hd, .vac-dead .vac-bd { fill: #5A564E; opacity: .35; }
.vac-dead .vac-spots circle { opacity: 0; }
.vac-imm .vac-ring { opacity: .9; }
.vac-bounce { animation: vacBump .3s ease-out; }
@keyframes vacBump { 50% { translate: 0 -3px; } }
.vac-tally { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font: 600 13.5px var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
.vac-tally b { color: var(--text); font-weight: 800; }

/* 1796 */
.vac-ph { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.vac-ph img { display: block; max-width: 100%; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.vac-paint img { max-height: 290px; }
.vac-ph figcaption { font: 600 12.5px var(--sans); color: var(--dim); text-align: center; max-width: 320px; }
.vac-hand { display: block; padding: 0; border: 0; background: none; border-radius: 14px; cursor: pointer; width: 100%; max-width: 360px; }
.vac-hand img { width: 100%; }
.vac-hand.picked img { box-shadow: 0 0 0 3px var(--gold), 0 10px 28px rgba(0,0,0,.4); }
.vac-paint { animation: vacFade .6s ease-out both; }
@keyframes vacFade { from { opacity: 0; } }

/* look-alikes */
.vac-look { width: 100%; max-width: 340px; }
.vac-look svg { display: block; width: 100%; height: auto; }
.vac-brk { stroke-width: 2.5; }
.vac-cowv { fill: rgba(169,155,255,.3); stroke: var(--violet-bright); }
.vac-poxv { fill: rgba(255,159,67,.25); stroke: #FF9F43; }
.vac-newv { fill: rgba(94,200,242,.22); stroke: #5EC8F2; }
.vac-rdg { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; opacity: .8; }
.vac-lt { fill: var(--dim); font: 700 14px var(--sans); }
.vac-cell circle { fill: var(--violet); stroke: var(--gold); stroke-width: 2; }

@media (max-height: 700px) {
  .vac-vil { max-width: 236px; }
  .vac-paint img { max-height: 210px; }
}