/* Thermic effect of food lesson. All rules scoped under .tef-* */
.tef-bench { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the jar */
.tef-jarbox { display: flex; flex-direction: column; align-items: center; }
.tef-steam { position: relative; width: 150px; height: 46px; display: flex; align-items: flex-start; justify-content: center; }
.tef-hl { font: 700 13px var(--sans); color: var(--dim); white-space: nowrap; transition: color .3s; }
.tef-hl b { font: 800 20px var(--sans); color: #ff9a4d; font-variant-numeric: tabular-nums; }
.tef-jar { position: relative; width: 104px; height: 150px; border-radius: 14px 14px 22px 22px; border: 3px solid rgba(255,255,255,.4); border-top-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); overflow: visible; }
.tef-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #ffd27a, var(--gold)); box-shadow: inset 0 3px 0 rgba(255,255,255,.35); transition: height .5s ease-out; }
.tef-hot { position: absolute; left: 0; right: 0; height: 0; background: #ff8a3d; box-shadow: 0 0 14px rgba(255,138,61,.8); opacity: 0; }
.tef-hot.tef-lift { animation: tefLift 1.1s ease-out forwards; }
@keyframes tefLift { 0% { opacity: 1; translate: 0 0; } 30% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -60px; scale: 1.15 .6; } }
.tef-kl { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 12.5px var(--sans); color: #3b2a0e; }
.tef-kl b { font: 800 18px var(--sans); font-variant-numeric: tabular-nums; }
.tef-jarbox:not(.tef-on) .tef-kl { color: var(--faint); }
.tef-wisp { position: absolute; bottom: -8px; width: 8px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,170,90,.9), rgba(255,138,61,0)); animation: tefWisp 1.6s ease-out both; pointer-events: none; }
@keyframes tefWisp { from { opacity: 0; translate: 0 30px; } 30% { opacity: 1; } to { opacity: 0; translate: 6px -36px; scale: 1.4; } }

/* the tray */
.tef-tray { display: flex; gap: 10px; justify-content: center; width: 100%; }
.tef-food { flex: 0 1 108px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; min-height: 112px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); font-family: var(--sans); color: var(--text); cursor: pointer; transition: border-color .3s, box-shadow .3s, opacity .3s; }
.tef-food:not(:disabled) { border-color: var(--violet-bright); box-shadow: 0 0 16px rgba(123,92,253,.3); }
.tef-food:disabled { cursor: default; opacity: 1; color: var(--text); }
.tef-food img { width: 50px; height: 50px; object-fit: contain; transition: scale .4s, opacity .4s; }
.tef-food span { font: 800 13px var(--sans); }
.tef-food small { font: 600 12px var(--sans); color: var(--dim); }
.tef-res { font: 800 12.5px var(--sans); font-style: normal; color: #ff9a4d; min-height: 16px; }
.tef-food.tef-ate img { opacity: .45; scale: .85; }
/* heat bar, scaled so chicken's 25 fills it */
.tef-bar { display: block; width: 76%; height: 6px; margin: 3px 0 1px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.tef-bar b { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffb46b, #ff8a3d); box-shadow: 0 0 8px rgba(255,138,61,.6); transition: width .7s ease-out; }
.tef-note { font: 600 12px var(--sans); color: var(--dim); text-align: center; }

/* the sandwich opener */
.tef-sw { background: none; border: 0; padding: 0; font-family: var(--sans); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: opacity .5s, scale .5s, translate .5s; }
.tef-sw img { width: 200px; height: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); animation: tefIn .5s cubic-bezier(.2,.8,.2,1) both; }
.tef-sw small { font: 700 12.5px var(--sans); color: var(--dim); }
.tef-sw:disabled { cursor: default; color: var(--text); }
.tef-sw.tef-ate { opacity: .6; }
.tef-sw.tef-ate img { animation: tefEat 1.2s ease-in-out both; }
@keyframes tefEat { 0% { translate: 0 0; scale: 1; opacity: 1; } 55% { translate: 0 -150px; scale: .3; opacity: 0; } 56% { translate: 0 0; scale: .9; opacity: 0; } 100% { translate: 0 0; scale: .9; opacity: 1; } }
@keyframes tefIn { from { opacity: 0; translate: 0 10px; } }

/* picture questions */
.tef-lunch, .tef-two { width: 100%; max-width: 360px; }
.tef-lunch .choice img, .tef-two .choice img { object-fit: contain; }
/* the sandwiches' result, above the pictures so the sheet never covers it */
.tef-heats { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; text-align: center; font: 700 13px var(--sans); color: var(--dim); opacity: 0; transition: opacity .4s; }
.tef-heats b { display: block; font: 800 26px var(--sans); color: #ff9a4d; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tef-heats.tef-shown { opacity: 1; }

/* celery */
.tef-cel { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tef-cel img { width: 200px; max-width: 60vw; height: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); animation: tefIn .5s cubic-bezier(.2,.8,.2,1) both; }
.tef-cel small { font: 700 12.5px var(--sans); color: var(--dim); }

@media (max-height: 700px) {
  .tef-jar { height: 118px; width: 92px; }
  .tef-steam { height: 40px; }
  .tef-food { min-height: 100px; }
  .tef-food img { width: 40px; height: 40px; }
  .tef-sw img { width: 140px; }
  .tef-cel img { width: 150px; }
}