/* Natural killer cell lesson. All rules scoped under .nkc-* */

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

/* beads, holders, cells */
.nkc-bd { stroke: #0A0E1A; stroke-width: 1; }
.nkc-bd.g { fill: var(--gold); } .nkc-bd.r { fill: #FB9679; } .nkc-bd.v { fill: var(--violet-bright); }
.nkc-bd.m { fill: var(--mint); } .nkc-bd.b { fill: #7FC8FF; }
.nkc-cup { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nkc-cb { fill: rgba(123,92,253,.12); stroke: var(--violet-bright); stroke-width: 2.2; transition: fill .3s, stroke .3s; }
.nkc-cb.vir { fill: rgba(251,150,121,.1); stroke: #FB9679; }
.nkc-cb.none { fill: rgba(216,85,95,.12); stroke: #E0626D; }
.nkc-nu { fill: rgba(169,155,255,.28); }
.nkc-sock { stroke: var(--faint); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 4; fill: none; }
.nkc-flag { fill: #FF6B6B; stroke: #FF6B6B; stroke-width: 2; stroke-linejoin: round; }

/* the rule */
.nkc-rule { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 22px; border: 2px solid var(--mint); border-radius: 16px; margin-top: 18px; }
.nkc-rule b { font: 800 18px var(--sans); color: var(--mint); }
.nkc-rule span { font: 600 15px var(--sans); color: var(--text); }
.nkc-opt { width: 100%; max-width: 86px; height: auto; display: block; margin: 0 auto; overflow: visible; }

/* the hunt */
.nkc-c { cursor: pointer; transition: opacity .4s; }
.nkc-hit { fill: transparent; }
.nkc-c.dead .nkc-cb { stroke-dasharray: 5 4; fill: rgba(216,85,95,.04); }
.nkc-c.dead .nkc-nu { opacity: .2; }
.nkc-c.spared .nkc-cb { stroke: var(--red); stroke-width: 3; }
.nkc-done .nkc-c:not(.dead) { opacity: .45; }
.nkc-count { font-size: 14px; color: var(--dim); font-weight: 600; }
.nkc-count b { color: var(--mint); font-size: 17px; }

/* first days */
.nkc-days { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 16px; padding-top: 14px; }
.nkc-dr span { display: block; font: 600 14px var(--sans); color: var(--text); margin-bottom: 6px; }
.nkc-track { height: 16px; border-radius: 8px; background: rgba(234,227,215,.08); overflow: hidden; }
.nkc-track i { display: block; height: 100%; border-radius: 8px; }
.nkc-track i.nk { background: var(--mint); }
.nkc-track i.kt { background: var(--gold); }
.nkc-axis { display: flex; justify-content: space-between; font: 600 13px var(--sans); color: var(--dim); }

/* the red blood cell, the balance */
.nkc-red { fill: rgba(216,85,95,.35); stroke: #E0626D; stroke-width: 2.5; }
.nkc-redin { fill: rgba(216,85,95,.25); }
.nkc-post { fill: var(--line); stroke: var(--dim); stroke-width: 3; }
.nkc-bm, .nkc-pp { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.nkc-piv { fill: var(--text); }
.nkc-beam { transition: transform .3s; }
.nkc-bal.kill .nkc-verd { fill: #FF6B6B; }

/* sort cards */
.nkc-mini { width: 108px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.nkc-cap { display: block; font: 600 15px var(--sans); color: var(--text); margin-top: 4px; }

/* the virus */
.nkc-cv circle { fill: rgba(251,150,121,.45); stroke: #FB9679; stroke-width: 1.5; }
.nkc-calm .nkc-cup { stroke: var(--mint); stroke-width: 3; }

@media (max-height: 700px) {
  .nkc-hero { width: min(62%, 240px); }
  .nkc-hero.small { width: min(46%, 170px); }
  .nkc-grid { max-height: 220px; }
  .nkc-bal { max-height: 220px; }
  .nkc-mini { width: 88px; }
}