/* Protein (nutrient) lesson. All rules scoped under .prn-* */
.prn-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.prn-lab { fill: var(--dim); font: 600 14px var(--sans); text-anchor: middle; }
.prn-lab.l { text-anchor: start; }
.prn-gut .prn-lab { font-size: 18px; }
.prn-bead { stroke: rgba(0,0,0,.35); stroke-width: 1.5; }

/* ---------- the gut ---------- */
.prn-full { flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px 8px; box-sizing: border-box; }
.prn-gut { width: 100%; height: 100%; max-height: 520px; display: block; overflow: visible; touch-action: none; }
.prn-tube { fill: none; stroke: #6B3F5A; stroke-width: 34; stroke-linecap: round; }
.prn-tube.in { stroke: #3A2436; stroke-width: 24; }
.prn-mouth { fill: #2A1A28; stroke: #6B3F5A; stroke-width: 4; }
.prn-blood { fill: #3B1F3A; stroke: #6B3F5A; stroke-width: 2; }
.prn-link { stroke: #EAE3D7; stroke-width: 3; transition: opacity .15s; }
.prn-link.prn-s-cut { opacity: 0; }
.prn-drum { cursor: grab; }

/* ---------- the builder ---------- */
.prn-build { width: 100%; max-width: 340px; height: auto; display: block; overflow: visible; }
.prn-hitbox { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.prn-food2, .prn-lift { cursor: pointer; }
.prn-db rect { fill: var(--violet-bright); }
.prn-lift.prn-s-on .prn-db rect { fill: var(--gold); }
.prn-lift.prn-s-on .prn-hitbox { stroke: var(--gold); }
.prn-lift.prn-s-off .prn-db { opacity: .3; }
.prn-s-pick .prn-hitbox { stroke: var(--text); }
.prn-jar { fill: rgba(169,155,255,.08); stroke: var(--violet-bright); stroke-width: 2.5; }
.prn-cap line { stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 7 5; }
.prn-jar { transition: stroke .3s; }
.prn-jar.prn-s-sig { stroke: var(--gold); }
.prn-sig circle { fill: var(--gold); filter: drop-shadow(0 0 6px var(--gold)); }
.prn-sig text { fill: var(--gold); font: 700 13px var(--sans); text-anchor: middle; }
.prn-capt { fill: var(--gold); font: 700 13px var(--sans); text-anchor: middle; }
.prn-box { fill: #2A1E1A; stroke: #5A4E3E; stroke-width: 2; }
.prn-flame { fill: #FF9A4D; opacity: .75; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .15s, opacity .15s; animation: prn-flick 1.2s ease-in-out infinite; }
.prn-s-flare .prn-flame { opacity: 1; transform: scale(1.25); }
@keyframes prn-flick { 50% { transform: scale(1.06, .94); } }
.prn-count { font: 700 15px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- your number ---------- */
.prn-num { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.prn-field { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); }
.prn-field input { width: 96px; border: none; outline: none; background: none; color: var(--text); font: 800 34px var(--sans); text-align: center; }
.prn-field span { font: 600 16px var(--sans); color: var(--dim); }
.prn-out { text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.prn-out.prn-s-on { opacity: 1; transform: none; }
.prn-out b { display: block; font: 800 28px var(--sans); color: var(--gold); }
.prn-out span { font-size: 15px; color: var(--text); }

@media (max-height: 700px) {
  .prn-build { max-width: 300px; }
}