/* Inflammation lesson. All rules scoped under .ifl-* */
.ifl-sc { position: relative; width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the four signs */
.ifl-signs { display: flex; flex-direction: row; justify-content: center; gap: 6px; }
.ifl-sg { min-width: 64px; padding: 5px 10px; border-radius: 999px; text-align: center; font: 800 13px var(--sans); color: var(--faint); background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.12); transition: color .3s, background .3s, border-color .3s, box-shadow .3s; }
.ifl-sg.on { color: #FFE2DA; background: rgba(255,90,70,.22); border-color: #FF6F5E; box-shadow: 0 0 14px rgba(255,90,70,.4); animation: iflPop .35s cubic-bezier(.2,.8,.2,1.4); }
@keyframes iflPop { from { scale: .8; } }

/* the finger */
.ifl-hero-img { padding: 14px 0; }
.ifl-hero-img img { width: 160px; }
.ifl-fing { position: relative; height: 210px; aspect-ratio: 640 / 632; }
.ifl-fing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(123,92,253,.3)); transition: opacity 1.2s; }
.ifl-f1 { opacity: 0; }
.ifl-fing.day .ifl-f1 { opacity: 1; }
.ifl-fing.day .ifl-f0 { opacity: 0; }
.ifl-spk { position: absolute; left: 50.7%; top: 18.5%; width: 2.6%; height: 20.5%; border-radius: 3px 3px 30% 30%; background: linear-gradient(90deg, #7A4D24, #C8945A 45%, #8A5A2B); transform-origin: 50% 100%; rotate: 31deg; animation: iflFly .5s cubic-bezier(.5,0,.9,.5) .5s both; transition: opacity 1.2s; }
@keyframes iflFly { from { translate: 76px -129px; opacity: 0; } 30% { opacity: 1; } }
.ifl-fing.day .ifl-spk { opacity: 0; }
.ifl-fg { position: absolute; left: 52%; top: 39%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px rgba(63,214,154,.9); translate: var(--x) var(--y); animation: iflSeed .4s ease-out var(--d) both; }
@keyframes iflSeed { from { opacity: 0; translate: 0 0; } }

/* the cut-away */
.ifl-box { position: relative; width: 100%; max-width: 340px; }
.ifl-box.q .ifl-lb { opacity: 0; }
.ifl-box .choices.ifl-spots { position: absolute; inset: 0; display: block; }
.ifl-spots .choice { position: absolute; translate: -50% -50%; min-height: 40px; padding: 6px 12px; border-radius: 999px; font: 800 13.5px var(--sans); white-space: nowrap; background: rgba(10,14,26,.78); box-shadow: none; }
.ifl-spots .choice:nth-child(1) { left: 58%; top: 29%; }
.ifl-spots .choice:nth-child(2) { left: 21%; top: 16%; }
.ifl-spots .choice:nth-child(3) { left: 73%; top: 78%; }
.ifl-spots .choice.locked:not(.right):not(.wrong) { opacity: .3; }
.ifl-in { display: block; width: 100%; max-width: 340px; height: auto; touch-action: none; overflow: visible; }
.ifl-tis { fill: #6B3A4E; }
.ifl-bulge { fill: #6B3A4E; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.swell .ifl-bulge { transform: scaleY(1); }
.ifl-heat { opacity: 0; transition: opacity 1s; pointer-events: none; }
.red .ifl-heat { opacity: .6; }
.ifl-lb { font: 700 14px var(--sans); fill: rgba(255,255,255,.62); }
.ifl-nerve { fill: none; stroke: #E7C76A; stroke-opacity: .45; stroke-width: 3; stroke-linecap: round; }
.sore .ifl-nerve { stroke: var(--gold); stroke-opacity: 1; filter: drop-shadow(0 0 4px rgba(252,192,80,.9)); animation: iflZap .35s ease-in-out 6 alternate; }
@keyframes iflZap { to { stroke-width: 5; stroke-opacity: .4; } }
.ifl-spl { fill: #B07A42; stroke: #6E4520; stroke-width: 1.5; }
.ifl-hit { stroke: transparent; stroke-width: 44; fill: none; cursor: pointer; }
.ifl-gm { fill: var(--mint); filter: drop-shadow(0 0 3px rgba(63,214,154,.8)); transition: opacity .4s var(--d), r .4s var(--d); }
.out .ifl-germs .ifl-gm { opacity: 0; }
.ifl-moreg .ifl-gm { opacity: 0; }
.more .ifl-moreg .ifl-gm { opacity: 1; }
.ifl-ring { fill: none; stroke: var(--gold); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.alarm .ifl-ring { animation: iflRing 1.4s ease-out 5 both; }
@keyframes iflRing { from { transform: scale(1); opacity: .95; } to { transform: scale(4); opacity: 0; } }
.ifl-drop { fill: #9FD8FF; opacity: 0; }
.leak .ifl-drop { animation: iflDrop 1.8s ease-in var(--d) infinite; }
@keyframes iflDrop { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-80px); } }

/* the vessel */
.ifl-blood { fill: #4A0F1C; transform-box: fill-box; transform-origin: center; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.wide .ifl-blood { transform: scaleY(1.9); }
.ifl-rbc { fill: #E0404F; stroke: #9E1F2E; stroke-width: 1; }
.ifl-xtra { opacity: 0; transition: opacity .9s .2s; }
.wide .ifl-xtra { opacity: 1; }
.ifl-flow { animation: iflFlow 3s linear infinite; }
@keyframes iflFlow { from { transform: translateX(0); } to { transform: translateX(120px); } }
.ifl-wall { stroke: #F09AA8; stroke-width: 5; stroke-linecap: round; }
.ifl-wt, .ifl-wbt { transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.wide .ifl-wt { transform: translateY(-16px); }
.wide .ifl-wbt { transform: translateY(16px); }
.ifl-gap { fill: #4A0F1C; opacity: 0; transition: opacity .5s; }
.leak .ifl-gap { opacity: 1; }
.ifl-vhit { fill: transparent; pointer-events: none; }
.wide:not(.leak) .ifl-vhit { pointer-events: all; cursor: pointer; }
.ifl-wb { fill: #F4F1FF; stroke: #B9A9FF; stroke-width: 1.5; transition: fill .8s; }
.ifl-nu { fill: #8F78F5; transition: fill .8s; }
.pus .ifl-wb { fill: #EAD27C; stroke: #B89A3C; }
.pus .ifl-nu { fill: #B89A3C; }
.ifl-og { opacity: 0; transform: translate(var(--fx), var(--fy)); transition: transform .9s cubic-bezier(.3,.7,.2,1) var(--d), opacity .3s var(--d); }
.out .ifl-og { opacity: 1; transform: none; }
.ifl-hero { cursor: grab; }
.ifl-hero .ifl-wb { filter: drop-shadow(0 0 6px rgba(185,169,255,.9)); }
.ifl-hero.held .ifl-wb { stroke: var(--gold); }
.ifl-hhit { fill: transparent; }

@media (prefers-reduced-motion: reduce) {
  .ifl-flow, .leak .ifl-drop, .alarm .ifl-ring, .sore .ifl-nerve { animation: none; }
}
@media (max-height: 700px) {
  .ifl-hero-img img { width: 140px; }
  .ifl-fing { height: 170px; }
  .ifl-in, .ifl-box { max-width: 300px; }
  .ifl-sg { min-width: 56px; padding: 4px 8px; }
}