/* Framing effect lesson. All rules scoped under .fx-* */

.fx-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fx-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the packs */
.fx-packs { display: flex; gap: 16px; justify-content: center; }
.fx-pack { width: 132px; border-radius: 14px; background: #E9E4DA; padding: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.fx-meat { height: 84px; border-radius: 10px; overflow: hidden; background: #2A2E3E; }
.fx-meat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-label { margin-top: 8px; padding: 6px 4px; border-radius: 8px; text-align: center; font: 800 19px var(--sans); color: #fff; transition: transform .25s; }
.fx-a .fx-label { background: #1E9E6A; }
.fx-b .fx-label { background: #C23B3B; }
.fx-label.fx-turn { transform: rotateX(90deg); }
.fx-one .fx-pack { width: 170px; }
.fx-one .fx-meat { height: 110px; }
.fx-bar { display: flex; width: 100%; max-width: 320px; height: 38px; border-radius: 12px; overflow: hidden; font-size: 13px; font-weight: 800; }
.fx-bar span { display: grid; place-items: center; }
.fx-l { width: 75%; background: #B8433F; color: #fff; }
.fx-f { width: 25%; background: #F2D8CF; color: #5A2A26; }

/* the taste test */
.fx-plates { display: flex; gap: 14px; }
.fx-plate { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 140px; padding: 12px 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.fx-plate img { width: 96px; height: 64px; object-fit: contain; margin-bottom: 6px; display: block; }
.fx-plate small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.fx-plate b { font-size: 17px; }
.fx-stars { height: 20px; width: 100px; margin-top: 4px; background: linear-gradient(90deg, var(--gold) var(--s, 0%), var(--raised) var(--s, 0%)); -webkit-mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 20px); mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 20px); transition: --s 1s; }
.fx-shown .fx-s1 { --s: 80%; }
.fx-shown .fx-s2 { --s: 60%; }

/* the name */
.fx-frames { display: flex; align-items: center; gap: 12px; }
.fx-frame { padding: 16px; border-radius: 6px; border: 8px solid #B08A4A; box-shadow: inset 0 0 0 2px #6E5328, 0 8px 20px rgba(0, 0, 0, .35); background: var(--surface); }
.fx-frame b { font: 800 20px var(--serif); white-space: nowrap; }
.fx-good b { color: var(--mint); }
.fx-bad b { color: #F07A7E; }
.fx-eq { font-size: 28px; font-weight: 800; color: var(--gold); }

/* the surgery */
.fx-cap { font-size: 17px; text-align: center; }
.fx-cap b { font: 800 20px var(--mono); }
.fx-dots { display: grid; grid-template-columns: repeat(10, 16px); gap: 5px; }
.fx-dots i { width: 16px; height: 16px; border-radius: 50%; transition: background .4s, opacity .4s; }
.fx-live { background: var(--mint); }
.fx-die { background: var(--red); }
.fx-dark .fx-live { opacity: .35; }
.fx-dark .fx-cap b { color: #F07A7E; }
.fx-res { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.fx-rrow { display: grid; grid-template-columns: 110px 1fr 42px; gap: 8px; align-items: center; }
.fx-rrow span { font-size: 13px; font-weight: 700; color: var(--dim); }
.fx-track { height: 16px; border-radius: 8px; background: var(--raised); overflow: hidden; }
.fx-track i { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--gold); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.fx-shown .fx-track i { width: var(--n); }
.fx-rrow b { font: 800 15px var(--mono); text-align: right; }

.fx-ad { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 320px; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, #3A2E7A, #1E1A40); border: 2px solid var(--violet-bright); text-align: center; }
.fx-ad small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.fx-ad b { font: 800 22px/1.25 var(--serif); }
@media (max-height: 700px) { .fx-plate img { width: 76px; height: 50px; } .fx-dots { grid-template-columns: repeat(10, 13px); gap: 4px; } .fx-dots i { width: 13px; height: 13px; } .fx-meat { height: 66px; } .fx-one .fx-meat { height: 84px; } }