/* Ultra-processed food lesson. All rules scoped under .upf-* */
@keyframes upfIn { from { opacity: 0; translate: 0 14px; } }
@keyframes upfDrop { 0% { opacity: 0; translate: 0 -40px; } 70% { opacity: 1; translate: 0 4px; } 100% { translate: 0 0; } }
@keyframes upfShake { 0%, 100% { translate: 0 0; } 25% { translate: -5px 0; } 75% { translate: 5px 0; } }

/* 0. two loaves */
.upf-loaves { width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.upf-loaf { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; min-height: 44px; border-radius: 16px; background: none; border: 0; color: var(--text); font-family: var(--sans); cursor: pointer; }
.upf-loaf:disabled { cursor: default; color: var(--text); opacity: 1; }
.upf-loaf img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); animation: upfDrop .7s cubic-bezier(.2,.8,.2,1) both; }
.upf-loaf:nth-child(2) img { animation-delay: .18s; }
.upf-ln { font: 800 14px var(--sans); }
.upf-lab { display: block; width: 100%; max-height: 0; overflow: hidden; margin-top: 2px; padding: 0 9px; border-radius: 6px; background: #f6f1e6; color: #1b1712; font: 600 12.5px/1.35 var(--sans); text-align: left; transition: max-height .7s ease-out, padding .3s; }
.upf-lab b { display: block; font: 900 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid #1b1712; margin-bottom: 3px; }
.upf-loaf.upf-read .upf-lab { max-height: 200px; padding: 7px 9px; }

/* 1. the store label */
.upf-label { width: 100%; max-width: 360px; border-radius: 10px; background: #f6f1e6; color: #1b1712; padding: 10px 10px 12px; box-shadow: 0 10px 24px rgba(0,0,0,.4); animation: upfIn .5s ease-out both; }
.upf-lh { display: flex; align-items: center; gap: 8px; border-bottom: 3px solid #1b1712; padding-bottom: 6px; margin-bottom: 8px; }
.upf-lh img { width: 40px; height: 40px; object-fit: contain; }
.upf-lh b { font: 900 15px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.upf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.upf-chip { min-height: 44px; padding: 6px 11px; border-radius: 10px; border: 2px solid rgba(27,23,18,.25); background: #fff; color: #1b1712; font: 700 14px var(--sans); cursor: pointer; transition: background .2s, border-color .2s, opacity .3s; }
.upf-chip:disabled { cursor: default; color: #1b1712; }
.upf-chip.upf-got { background: var(--gold); border-color: #b9822a; }
.upf-chip.upf-no { border-color: var(--red); animation: upfShake .3s; }
.upf-chip.upf-off { opacity: .35; }

/* 3. Nova's shelves */
.upf-shelves { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 6px; }
.upf-shelf { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; min-height: 52px; padding: 4px 8px; border-radius: 12px; border: 2px solid var(--line); border-bottom: 5px solid #6b4a2c; background: var(--surface); color: var(--text); font-family: var(--sans); text-align: left; }
button.upf-shelf { cursor: pointer; }
.upf-sn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font: 900 15px var(--sans); }
.upf-st { font: 700 13.5px/1.2 var(--sans); }
.upf-on { display: flex; gap: 2px; }
.upf-on img { width: 40px; height: 40px; object-fit: contain; }
.upf-on img.upf-in { animation: upfDrop .45s ease-out both; }
.upf-bank .word { font-size: 14px; }

/* 4. the hospital study */
.upf-hosp { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; }
.upf-hosp img { width: 100%; height: auto; max-height: 220px; object-fit: contain; }
.upf-tl, .upf-gain { width: 100%; display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
.upf-tl { font: 800 14px var(--sans); color: var(--dim); }
.upf-gain { min-height: 44px; font: 700 13px var(--sans); color: var(--dim); opacity: 0; transition: opacity .4s; }
.upf-gain b { display: block; font: 900 26px/1.1 var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.upf-gain.upf-shown { opacity: 1; }

/* 8. yogurt labels */
.upf-yogs { width: 100%; max-width: 360px; }
.upf-ypick .choice { padding: 0; min-height: 0; background: #f6f1e6; border-color: rgba(27,23,18,.2); color: #1b1712; }
.upf-yl { display: block; padding: 10px 12px; font: 600 15px/1.35 var(--sans); }
.upf-yl b { display: block; font: 900 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid #1b1712; margin-bottom: 3px; }
.upf-ypick .choice.right { background: #d9f6e8; border-color: var(--mint); }
.upf-ypick .choice.wrong { background: #f8dede; border-color: var(--red); }

@media (max-height: 700px) {
  .upf-loaf img { width: 92px; height: 92px; }
  .upf-hosp img { max-height: 170px; }
  .upf-shelf { min-height: 48px; }
  .upf-yl { padding: 8px 10px; font-size: 14px; }
}