/* Metformin lesson. All rules scoped under .mfn-* */
.mfn-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mfn-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.mfn-photo img { display: block; width: 240px; max-width: 100%; max-height: 36vh; object-fit: cover; border-radius: 18px; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.mfn-hero img { display: block; width: 180px; max-width: 100%; max-height: 19vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.mfn-lab { fill: var(--dim); font: 600 14px var(--sans); text-anchor: middle; }

/* ---------- the liver cell ---------- */
.mfn-game { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.mfn-gs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 4px; }
.mfn-liv { display: block; width: 100%; height: auto; overflow: visible; }
.mfn-cell { fill: rgba(123,92,253,.08); stroke: rgba(169,155,255,.55); stroke-width: 2.5; }
.mfn-ves { fill: rgba(216,85,85,.18); stroke: rgba(240,140,140,.55); stroke-width: 2; }
.mfn-pp ellipse { fill: rgba(252,192,80,.35); stroke: var(--gold); stroke-width: 2; }
.mfn-pp path { fill: none; stroke: #FFE3A6; stroke-width: 1.8; }
.mfn-pp { transition: opacity .3s; }
.mfn-alive circle { fill: rgba(63,214,154,.18); stroke: var(--mint); stroke-width: 2; transition: fill .3s, stroke .3s; }
.mfn-alive path { fill: var(--mint); transition: fill .3s; }
.mfn-alive.weak circle { fill: rgba(216,85,85,.2); stroke: var(--red); }
.mfn-alive.weak path { fill: var(--red); }
.mfn-fac path { fill: rgba(234,227,215,.16); stroke: #EAE3D7; stroke-width: 2; stroke-linejoin: round; transition: opacity .3s; }
.mfn-win { fill: var(--gold); transition: fill .3s; }
.mfn-fac.idle path { opacity: .45; }
.mfn-fac.idle .mfn-win { fill: var(--raised); }
.mfn-coin { fill: var(--gold); }
.mfn-cube { fill: #FFFFFF; stroke: #D8D0FF; stroke-width: 1; }
.mfn-cube.in { transition: opacity .4s; }

/* ---------- records ---------- */
.mfn-crowd { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; max-width: 300px; }
.mfn-p { width: 20px; height: 25px; display: block; }
.mfn-p circle, .mfn-p path { fill: #9FA8D6; }
.mfn-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.mfn-bt { font-size: 12.5px; color: var(--dim); text-align: center; }
.mfn-br { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.mfn-br i { height: 12px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.mfn-br b { display: block; height: 100%; width: 0; background: var(--violet-bright); border-radius: 6px; transition: width .8s ease-out; }
.mfn-br.a b { background: var(--gold); }
.mfn-res { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--text); }
.mfn-res em { font-style: normal; font-size: 13px; }
.mfn-res em.no { color: var(--dim); }
.mfn-res em.yes { color: var(--mint); }

/* ---------- the catch ---------- */
.mfn-ctl { width: 100%; max-width: 340px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--dim); padding: 0 6px; }
.mfn-ctl em { font-style: normal; color: var(--text); }
.mfn-gh { width: 100%; max-width: 340px; font-size: 13px; font-weight: 700; color: var(--gold); padding: 0 6px; }
.mfn-grid { width: 100%; max-width: 340px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid rgba(252,192,80,.4); border-radius: 16px; padding: 4px; }
.mfn-cellp { appearance: none; background: none; border: 0; padding: 0; height: 44px; display: grid; place-items: center; cursor: default; transition: opacity .35s; }
.mfn-cellp .mfn-p { width: 24px; height: 30px; }
.mfn-cellp.sick { cursor: pointer; }
.mfn-cellp.sick .mfn-p circle, .mfn-cellp.sick .mfn-p path { fill: #E0607A; }
.mfn-cellp.gone { opacity: .1; }
.mfn-cellp.dead .mfn-p circle, .mfn-cellp.dead .mfn-p path { fill: #3A3F58; }
.mfn-cellp.shake { animation: mfnShake .3s; }
@keyframes mfnShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.mfn-out { width: 100%; max-width: 340px; min-height: 42px; border: 1px dashed var(--line-strong); border-radius: 12px; padding: 4px 8px; display: flex; align-items: center; gap: 8px; }
.mfn-out > span { font-size: 12.5px; color: var(--dim); flex: none; width: 110px; line-height: 1.2; }
.mfn-outrow { display: flex; gap: 4px; flex-wrap: wrap; }
.mfn-mini .mfn-p { width: 18px; height: 23px; }
.mfn-mini.sick .mfn-p circle, .mfn-mini.sick .mfn-p path { fill: #E0607A; transition: fill .4s; }
.mfn-mini.dead .mfn-p circle, .mfn-mini.dead .mfn-p path { fill: #3A3F58; }
.mfn-tally { width: 100%; max-width: 340px; font-size: 13px; color: var(--dim); font-weight: 700; text-align: center; }
.mfn-tally .t { display: flex; justify-content: space-around; color: var(--text); }
.mfn-tally b { color: var(--gold); font-size: 16px; }

/* ---------- Denmark, TAME ---------- */
.mfn-tame { width: 100%; max-width: 330px; background: var(--surface); border: 1px solid rgba(252,192,80,.45); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.mfn-tame b { font: 700 26px var(--serif); color: var(--gold); }
.mfn-tame span { font-size: 13px; color: var(--dim); }
.mfn-tame ul { margin: 8px 0 0; padding-left: 18px; color: var(--text); font-size: 15px; line-height: 1.6; }

@media (max-height: 700px) {
  .mfn-photo img { max-height: 30vh; }
  .mfn-game { max-width: 300px; gap: 6px; }
  .mfn-grid .mfn-cellp { height: 44px; }
  .mfn-sc { gap: 6px; }
  .mfn-cellp { height: 44px; }
  .mfn-hero img { max-height: 16vh; }
}