/* Necrosis lesson. All rules scoped under .nec-* */
.nec-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nec-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.nec-hero img { width: 280px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(216,85,85,.28)); }
.nec-svg { display: block; width: 100%; height: auto; }
.nec-t { fill: var(--text); font: 700 13px var(--sans); text-anchor: middle; }
.nec-t.dim { fill: var(--dim); font-weight: 600; }
.nec-t.gold { fill: var(--gold); }
.nec-t.violet { fill: var(--violet-bright); }
.nec-t.red { fill: #FF8A8A; font-weight: 800; }
.nec-t.start { text-anchor: start; }
.nec-t.end { text-anchor: end; }
.nec-hit { fill: transparent; }
.nec-count { font-size: 15px; font-weight: 700; color: var(--dim); }
.nec-count.red { color: #FF8A8A; }

/* heart */
.nec-art { cursor: pointer; }
.nec-tube { fill: rgba(216,85,85,.55); stroke: #FF8A8A; stroke-width: 1.5; transition: fill .5s, stroke .5s; }
.nec-art.live .nec-tube { animation: necPulse 1s ease-in-out 3; }
@keyframes necPulse { 50% { fill: rgba(255,138,138,.9); } }
.nec-flow path { stroke: #FF8A8A; stroke-width: 3; stroke-linecap: round; opacity: .7; transition: opacity .5s; }
.nec-clot { fill: #5a1e24; stroke: #FF8A8A; stroke-width: 2; }
.blocked .nec-tube { fill: rgba(166,159,147,.25); stroke: rgba(166,159,147,.6); }
.blocked .nec-flow path { opacity: 0; }
.nec-b { fill: rgba(216,85,85,.18); stroke: rgba(255,138,138,.75); stroke-width: 1.6; transition: fill .4s, stroke .4s, opacity .4s; }
.nec-cell.dead .nec-b { fill: rgba(166,159,147,.12); stroke: rgba(166,159,147,.55); stroke-dasharray: 3 3; }
.nec-cell.saved .nec-b { stroke: var(--mint); fill: rgba(63,214,154,.16); }

/* one cell */
.nec-one { cursor: pointer; }
.nec-mem { fill: rgba(169,155,255,.16); stroke: var(--violet-bright); stroke-width: 2.5; }
.nec-one.live .nec-mem { animation: necRing 1s ease-in-out 3; }
@keyframes necRing { 50% { stroke: var(--gold); } }
.nec-nuc { fill: rgba(169,155,255,.5); }
.nec-mito { fill: rgba(232,178,76,.55); }
.nec-one.torn .nec-mem { stroke-dasharray: 10 14; opacity: .6; }
.nec-one.torn .nec-nuc, .nec-one.torn .nec-mito { opacity: .35; }
.nec-bit { fill: var(--violet-bright); }
.nec-bit.gold { fill: var(--gold); }
.nec-wbc { fill: rgba(234,227,215,.85); stroke: rgba(234,227,215,.4); stroke-width: 4; }
.nec-glow { fill: rgba(216,85,85,.16); }

/* tumor */
.nec-vessel { fill: none; stroke: rgba(216,85,85,.7); stroke-width: 8; stroke-linecap: round; }
.nec-c { fill: rgba(169,155,255,.22); stroke: var(--violet-bright); stroke-width: 1.3; }
.nec-c.dead { fill: rgba(166,159,147,.1); stroke: rgba(166,159,147,.5); stroke-dasharray: 2 2; }

/* toe */
.nec-toe { fill: rgba(232,178,140,.2); stroke: rgba(232,178,140,.6); stroke-width: 2; }
.nec-rot { fill: rgba(40,30,34,.85); opacity: 0; }
.nec-nail { fill: rgba(234,227,215,.35); stroke: rgba(234,227,215,.5); stroke-width: 1.2; }
.nec-art2 { fill: none; stroke: #FF8A8A; stroke-width: 6; stroke-linecap: round; }
.nec-art2.far { stroke: rgba(166,159,147,.8); opacity: 0; }
.nec-germ { fill: #7FD66A; }

/* bedsore */
.nec-mat { fill: rgba(169,155,255,.14); stroke: rgba(169,155,255,.4); stroke-width: 1.5; }
.nec-bone { fill: rgba(234,227,215,.22); stroke: rgba(234,227,215,.6); stroke-width: 2; }
.nec-cap { fill: none; stroke: #FF8A8A; stroke-width: 4; stroke-linecap: round; transition: stroke .5s, opacity .5s; }
.pressed .nec-mid { stroke: rgba(166,159,147,.8); stroke-dasharray: 4 6; }

@media (max-height: 700px) {
  .nec-hero img { max-height: 30vh; }
}