/* Reinforcement lesson. All rules scoped under .rnf-* */
.rnf-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rnf-hero img { width: 300px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 18px 30px rgba(123,92,253,.35)); }
.rnf-note { font-size: 13px; color: var(--dim); text-align: center; }

/* ---------- the leak ---------- */
.rnf-jarwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 20px; transition: background .15s; }
.rnf-jarwrap.rnf-alarm { background: rgba(216,85,85,.16); animation: rnf-shake .18s linear infinite; }
@keyframes rnf-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.rnf-jar { width: 150px; height: 170px; display: block; overflow: visible; }
.rnf-drip { animation: rnf-drip .45s linear infinite; }
@keyframes rnf-drip { from { transform: translateY(-6px); opacity: 1; } to { transform: translateY(10px); opacity: 0; } }
.rnf-coins { font-size: 14px; font-weight: 700; color: var(--dim); }
.rnf-coins b { font: 600 20px var(--mono); color: var(--gold); margin-left: 4px; }
.btn.rnf-pad { min-height: 72px; font-size: 20px; letter-spacing: .06em; }
.rnf-times { display: flex; gap: 10px; width: 100%; height: 170px; align-items: flex-end; justify-content: center; }
.rnf-times > div { flex: 1; max-width: 56px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.rnf-times i { display: block; width: 100%; background: var(--red); border-radius: 8px; }
.rnf-times span { font: 600 13px var(--mono); }
.rnf-times em { font-style: normal; font-size: 12px; color: var(--dim); }

/* ---------- the 2x2 ---------- */
.rnf-grid { display: grid; grid-template-columns: 62px 1fr 1fr; gap: 6px; width: 100%; align-items: stretch; }
.rnf-grid > b { font-size: 13px; text-align: center; color: var(--dim); align-self: end; }
.rnf-grid > em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--dim); align-self: center; line-height: 1.2; }
.rnf-cell { border-radius: 12px; padding: 8px; background: var(--raised); display: flex; flex-direction: column; gap: 2px; }
.rnf-cell b { font-size: 13px; line-height: 1.2; }
.rnf-cell span { font-size: 12px; color: var(--dim); }
.rnf-cell.r b { color: var(--mint); }
.rnf-cell.p b { color: var(--red); }
.rnf-cell.hi { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(252,192,80,.1); }

/* ---------- candy ---------- */
.rnf-aisle { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.rnf-who { display: grid; grid-template-columns: 54px 1fr 18px 1fr; align-items: center; gap: 6px; background: var(--raised); border-radius: 14px; padding: 12px; }
.rnf-who b { font-size: 15px; color: var(--violet-bright); }
.rnf-who span { font-size: 14px; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--surface); }
.rnf-who i { font-style: normal; color: var(--gold); text-align: center; }
.rnf-who .add { box-shadow: inset 0 0 0 2px var(--mint); }
.rnf-who .take { box-shadow: inset 0 0 0 2px var(--gold); }
@media (max-height: 700px) {
  .rnf-jar { width: 120px; height: 136px; }
  .rnf-hero img { max-height: 26vh; }
  .rnf-times { height: 130px; }
}