/* AMPK lesson. All rules scoped under .amk-* */
.amk-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.amk-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.amk-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* ---------- batteries ---------- */
.amk-pool { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.amk-leg { display: flex; justify-content: space-between; gap: 6px; font: 600 12.5px var(--sans); color: var(--dim); }
.amk-leg span { display: flex; align-items: baseline; gap: 4px; }
.amk-leg b { font: 800 18px var(--sans); }
.amk-leg i { font-style: normal; color: var(--faint); }
.amk-leg .k3 b { color: var(--gold); } .amk-leg .k2 b { color: var(--violet-bright); } .amk-leg .k1 b { color: #FF8A6A; }
.amk-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px 6px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1.5px solid var(--line); }
.amk-bat { width: 100%; max-width: 22px; height: auto; justify-self: center; display: block; }
.amk-bo { fill: none; stroke: rgba(234,227,215,.35); stroke-width: 1.4; }
.amk-bt { fill: rgba(234,227,215,.35); }
.amk-seg { fill: rgba(234,227,215,.06); }
.amk-bat.k3 .amk-seg.on, .amk-q.l .amk-seg.on, .amk-sit.k3 .amk-seg.on { fill: var(--gold); }
.amk-bat.k2 .amk-seg.on { fill: var(--violet-bright); }
.amk-bat.k1 .amk-seg.on, .amk-q.r .amk-seg.on, .amk-sit.k1 .amk-seg.on { fill: #FF8A6A; }
.amk-bat.k3 .amk-bo { stroke: rgba(252,192,80,.7); }
.amk-bat.k1 .amk-bo { stroke: rgba(255,138,106,.8); }
.amk-bat.pop { animation: amkPop .4s ease-out; }
@keyframes amkPop { 40% { transform: scale(1.3); } }

/* ---------- muscle ---------- */
.amk-mus { width: 100%; max-width: 320px; height: auto; display: block; cursor: pointer; overflow: visible; }
.amk-tend { stroke: #D9CBB5; stroke-width: 7; stroke-linecap: round; }
.amk-mb { fill: #C4506A; stroke: #F08CA0; stroke-width: 2; }
.amk-str { fill: none; stroke: rgba(255,210,220,.45); stroke-width: 2; }
.amk-hit { fill: transparent; }

.amk-ch { display: flex; gap: 18px; font: 600 14px var(--sans); color: var(--dim); }
.amk-ch b { font-weight: 800; color: var(--text); }
.amk-ch .c3 i { font-style: normal; color: var(--gold); }
.amk-ch .c1 i { font-style: normal; color: #FF8A6A; }

/* ---------- sensor ---------- */
.amk-sens { display: flex; align-items: center; gap: 8px; --g: 0; }
.amk-lamp { font: 800 14px var(--sans); letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; color: var(--dim); background: #2A2440; border: 1.5px solid var(--line-strong); box-shadow: 0 0 calc(var(--g) * 18px) rgba(63,214,154,calc(var(--g) * .7)); transition: background .3s, color .3s; }
.amk-sens.on .amk-lamp { background: var(--mint); color: var(--mint-ink); border-color: #B8F5DA; }
.amk-st { font: 700 13px var(--sans); font-style: normal; color: var(--faint); min-width: 54px; }
.amk-sens.on .amk-st { color: var(--mint); }

.amk-pk { width: 100%; max-width: 320px; height: auto; display: block; }
.amk-body { fill: rgba(63,214,154,.1); stroke: rgba(63,214,154,.6); stroke-width: 2.5; }
.amk-hole { fill: #0E1322; stroke: rgba(63,214,154,.45); stroke-width: 2; }
.amk-pl, .amk-ps { font: 800 15px var(--sans); fill: var(--dim); text-anchor: middle; transition: fill .2s; }
.amk-body { transition: fill .2s; }
.amk-pk.on .amk-body { fill: rgba(63,214,154,.35); }
.amk-pk.on .amk-pl, .amk-pk.on .amk-ps { fill: var(--mint); }
.amk-q text { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.amk-sit { animation: amkIn .3s ease-out; }
@keyframes amkIn { from { opacity: 0; } }

.amk-two { width: 100%; max-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.amk-cc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); }
.amk-cc b { font: 700 15px var(--sans); color: var(--text); }
.amk-cc.pic img { width: 120px; height: auto; display: block; }

/* ---------- the board ---------- */
.amk-board { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.amk-top { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.amk-mach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.amk-m { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); transition: border-color .3s, background .3s; }
.amk-m span { font: 700 14px var(--sans); color: var(--text); }
.amk-m em { font: 600 12.5px var(--sans); font-style: normal; color: var(--faint); }
.amk-m.up { border-color: var(--mint); background: rgba(63,214,154,.08); }
.amk-m.up em { color: var(--mint); }
.amk-m.up em::before { content: '\2191  '; }
.amk-m.down { border-color: rgba(255,138,106,.7); background: rgba(255,138,106,.06); }
.amk-m.down em { color: #FF8A6A; }
.amk-m.down em::before { content: '\2193  '; }
.amk-board.ko .amk-lamp { text-decoration: line-through; opacity: .6; }

@media (max-height: 700px) {
  .amk-hero img { max-height: 26vh; }
  .amk-grid { padding: 6px 8px; gap: 3px 6px; }
  .amk-bat { max-width: 18px; }
  .amk-mus { max-width: 270px; }
  .amk-m { padding: 6px 8px; }
  .amk-cc.pic img { width: 96px; }
}