/* l-food.css — the art for “Would You Eat That?” (A2).
   Food bounces onto a plate, eggs count themselves, rice refuses to be
   counted, a face pulls faces, and the photo cards fly away when you vote. */

.f-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* small kit fixes for things that hold a translation line */
.kit .k-kicker { flex-wrap: wrap; row-gap: 4px; }
.kit .k-kicker .tr { flex-basis: 100%; }
.kit .k-chip .tr { display: inline; margin: 0 0 0 6px; font-size: .85em; }
.kit .k-btn { flex-wrap: wrap; row-gap: 0; }
.kit .k-btn .tr { flex-basis: 100%; margin-top: 2px; text-align: center; }
.kit .k-btn > span { display: inline-block; }

/* ── hero ────────────────────────────────────────────────────────────── */
.f-hero { background: radial-gradient(1200px 520px at 85% 20%, #FFF4C2 0%, rgba(255, 244, 194, 0) 60%), radial-gradient(900px 500px at 0% 100%, #E7EDFF 0%, rgba(231, 237, 255, 0) 65%); }
.f-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 4vw, 60px); align-items: center; }
.f-hero h1 em { font-style: normal; color: var(--sound); position: relative; display: inline-block; }
.f-hero h1 em::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: .02em; height: .14em; border-radius: 99px; background: var(--pen); z-index: -1; transform-origin: left; animation: f-underline 1s .9s var(--ease-out) both; }
@keyframes f-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.f-help { margin-top: 14px !important; font-size: 1.02rem !important; color: var(--ink-2); }
.f-hero .k-meta, .f-hero h1, .f-hero .k-lede, .f-help, .f-hero .k-hero-cta { animation: f-in .9s var(--ease-out) both; }
.f-hero h1 { animation-delay: .08s; } .f-hero .k-lede { animation-delay: .16s; } .f-help { animation-delay: .22s; } .f-hero .k-hero-cta { animation-delay: .3s; }
@keyframes f-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.f-plate { position: relative; aspect-ratio: 1; width: min(100%, 460px); justify-self: center; }
.f-plate-disc { position: absolute; inset: 9%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px var(--ink), 0 30px 60px -30px rgba(14, 17, 24, .45); animation: f-plate 1s var(--ease-out) both; }
.f-plate-rim { position: absolute; inset: 11%; border-radius: 50%; border: 3px dashed var(--line-2); animation: f-spin 60s linear infinite; }
@keyframes f-plate { from { transform: scale(.2) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes f-spin { to { transform: rotate(360deg); } }
.f-fork, .f-knife { position: absolute; top: 12%; width: 7%; height: 76%; animation: f-in 1s .3s var(--ease-out) both; }
.f-fork { left: -3%; } .f-knife { right: -3%; }
.f-on { position: absolute; width: 27%; height: 27%; filter: drop-shadow(0 8px 10px rgba(14, 17, 24, .18)); animation: f-drop-in .9s var(--ease-out) both, f-float 5s ease-in-out infinite; }
.f-on-1 { left: 22%; top: 20%; animation-delay: .5s, 1.4s; }
.f-on-2 { left: 48%; top: 16%; animation-delay: .65s, 2.1s; }
.f-on-3 { left: 55%; top: 44%; animation-delay: .8s, 1.8s; }
.f-on-4 { left: 30%; top: 50%; animation-delay: .95s, 2.6s; width: 22%; }
.f-on-5 { left: 16%; top: 38%; animation-delay: 1.1s, 1.2s; width: 20%; }
.f-on-6 { left: 38%; top: 34%; animation-delay: 1.25s, 3s; width: 24%; }
@keyframes f-drop-in { 0% { opacity: 0; transform: translateY(-120px) rotate(-30deg) scale(.6); } 60% { opacity: 1; transform: translateY(8px) rotate(6deg) scale(1.05); } 100% { transform: none; } }
@keyframes f-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: 4deg; } }
.f-q { position: absolute; right: 2%; top: 2%; display: grid; place-items: center; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--pen); box-shadow: 0 0 0 4px var(--ink); font: 800 clamp(2rem, 5vw, 3.4rem)/1 var(--f-display); color: var(--ink); animation: f-drop-in .8s 1.5s var(--ease-out) both, f-wobble 2.6s 2.4s ease-in-out infinite; }
@keyframes f-wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) scale(1.06); } }
@media (max-width: 760px) {
  .f-hero-grid { grid-template-columns: 1fr; }
  .f-plate { width: min(78vw, 340px); order: -1; margin-top: -10px; }
}

/* ── 1. tiles ────────────────────────────────────────────────────────── */
.f-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.f-tile { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 10px 14px; border: 0; border-radius: 22px; background: var(--cyc-2); color: var(--ink); cursor: pointer; transition: transform .25s var(--ease-out), background .25s, box-shadow .25s; }
.f-tile:hover { transform: translateY(-4px) rotate(-1deg); background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 16px 30px -18px rgba(14, 17, 24, .4); }
.f-tile:focus-visible { outline: 3px solid var(--sound); outline-offset: 3px; }
.f-tile .f-art { width: 84px; height: 84px; transition: transform .35s var(--ease-out); }
.f-tile:hover .f-art { transform: scale(1.1) rotate(-6deg); }
.f-tile.pop .f-art { animation: f-boing .6s var(--ease-out); }
@keyframes f-boing { 0% { transform: scale(1); } 30% { transform: scale(1.25, .8); } 55% { transform: scale(.9, 1.15) translateY(-10px); } 100% { transform: scale(1); } }
.f-word { display: block; font: 700 1.2rem/1.2 var(--f-text); text-align: center; }
.f-word i { font-style: normal; color: var(--sound); }
.f-tile.un .f-word i { color: #C2410C; }
.f-tile.heard::after { content: '✓'; position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #18A957; color: #fff; font-size: .85rem; font-weight: 800; animation: k-pop .4s var(--ease-out); }
.f-tile.is-playing { background: var(--sound-soft); box-shadow: 0 0 0 2px var(--sound); }
.f-heard { display: grid; gap: 10px; max-width: 420px; margin: 22px auto 0; text-align: center; }
.f-heard p { font-weight: 600; color: var(--ink-2); font-size: 1.05rem !important; }
.f-notice { margin-top: 18px; animation: k-pop .5s var(--ease-out); }

/* ── 2. counting ─────────────────────────────────────────────────────── */
.f-demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 22px; }
.f-demo { display: grid; gap: 14px; align-content: start; }
.f-demo-say { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.f-eggs { position: relative; display: flex; justify-content: center; gap: 4%; height: 130px; padding-top: 22px; }
.f-eggs svg { width: 26%; height: 100px; animation: f-egg 3.6s var(--ease-out) infinite; transform-origin: 50% 100%; }
.f-eggs svg:nth-child(2) { animation-delay: .35s; } .f-eggs svg:nth-child(3) { animation-delay: .7s; }
@keyframes f-egg { 0% { opacity: 0; transform: scale(.2) translateY(20px); } 12% { opacity: 1; transform: scale(1.12); } 20%, 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9); } }
.f-n { position: absolute; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sound); color: #fff; font: 800 1rem/1 var(--f-display); animation: f-egg 3.6s var(--ease-out) infinite; }
.f-n1 { left: calc(50% - 26% - 4% - 15px + 13%); } .f-n2 { left: calc(50% - 15px); animation-delay: .35s; } .f-n3 { left: calc(50% + 26% + 4% - 15px - 13%); animation-delay: .7s; }
.f-grains { position: relative; display: grid; place-items: center; height: 130px; overflow: hidden; }
.f-heap { width: 130px; height: 130px; }
.f-grains i { position: absolute; top: -10px; width: 7px; height: 4px; border-radius: 3px; background: #C9CDD8; animation: f-fall 2.2s linear infinite; }
.f-grains i:nth-child(2) { left: 38%; animation-delay: .1s; } .f-grains i:nth-child(3) { left: 44%; animation-delay: .6s; } .f-grains i:nth-child(4) { left: 50%; animation-delay: 1.1s; } .f-grains i:nth-child(5) { left: 56%; animation-delay: .3s; }
.f-grains i:nth-child(6) { left: 62%; animation-delay: .9s; } .f-grains i:nth-child(7) { left: 47%; animation-delay: 1.5s; } .f-grains i:nth-child(8) { left: 53%; animation-delay: 1.8s; } .f-grains i:nth-child(9) { left: 41%; animation-delay: 1.3s; }
@keyframes f-fall { from { transform: translateY(0) rotate(0); opacity: 1; } 80% { opacity: 1; } to { transform: translateY(95px) rotate(260deg); opacity: 0; } }
.f-huh { position: absolute; right: 6px; top: 8px; padding: 6px 10px; border-radius: 14px 14px 14px 4px; background: var(--pen); font: 800 .95rem/1 var(--f-display); transform: rotate(6deg); animation: f-wobble 2.4s ease-in-out infinite; }
.f-rule { margin-bottom: 22px; }
.f-rule-row { display: grid; grid-template-columns: 4.6rem auto 1fr; gap: 12px; align-items: center; }
.f-rule .k-play { background: rgba(255, 255, 255, .12); color: #fff; }
.f-rule .k-play:hover { background: rgba(255, 255, 255, .22); }
.f-rule-tag { display: grid; place-items: center; min-height: 44px; border-radius: 14px; background: var(--sound); color: #fff; font: 800 1.1rem/1 var(--f-display); }
.f-rule-tag.some { background: #C2410C; }
.f-sort, .f-match, .f-quiz { margin-bottom: 22px; }
.f-sort-card { display: grid; justify-items: center; gap: 8px; padding: 10px 0 4px; }
.f-sort-card .f-art { width: 120px; height: 120px; }
.f-drop { animation: f-drop-in .7s var(--ease-out) both; }
.f-sort-word { font: 800 clamp(2rem, 1.5rem + 2.4vw, 3rem)/1.1 var(--f-display) !important; letter-spacing: -.03em; text-align: center; }
.f-blank { display: inline-grid; place-items: center; min-width: 2.2em; padding: 0 .25em; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 3px var(--line-2); color: var(--ink-3); }
.f-blank.filled { background: var(--pen-soft); box-shadow: inset 0 0 0 3px var(--pen); color: var(--ink); animation: k-pop .45s var(--ease-out); }
.f-abc { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.f-abc .k-opt { font-size: 1.4rem; font-family: var(--f-display); padding-inline: 6px; }
.f-next { display: flex; justify-content: flex-end; }
.f-next:empty { display: none; }
.f-oops h3 { margin-bottom: 4px; }
.f-oops > div { grid-template-columns: 2.6rem 1fr auto; }
.f-oops p { font-size: 1.12rem !important; }
.f-oops-note { padding: 4px 4px 0; color: var(--ink-2); }

/* ── 3. containers ───────────────────────────────────────────────────── */
.f-conts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.f-cont { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1.5px var(--line); color: var(--ink); cursor: pointer; transition: transform .25s var(--ease-out), box-shadow .25s; }
.f-cont:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--ink), 0 16px 30px -18px rgba(14, 17, 24, .4); }
.f-cont svg { width: 80px; height: 80px; transition: transform .4s var(--ease-out); }
.f-cont:hover svg { transform: rotate(-8deg) scale(1.08); }
.f-cont.is-playing { box-shadow: 0 0 0 2.5px var(--sound); background: var(--sound-soft); }
.f-phrase { display: block; font: 600 1.08rem/1.25 var(--f-text); text-align: center; }
.f-phrase b { color: var(--sound); }

/* ── 4. tastes ───────────────────────────────────────────────────────── */
.f-taste { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: clamp(16px, 4vw, 40px); align-items: center; margin-bottom: 22px; }
.f-face-wrap { display: grid; justify-items: center; gap: 10px; text-align: center; }
.f-face { width: min(100%, 280px); height: auto; overflow: visible; }
.f-face .face { fill: #FFD9A8; transition: fill .4s; }
.f-face .eyes, .f-face .mouth, .f-face .x-hearts, .f-face .x-drops, .f-face .x-fire, .f-face .x-zing { opacity: 0; transition: opacity .25s; }
.f-face[data-face="none"] .e-neutral, .f-face[data-face="none"] .m-neutral { opacity: 1; }
.f-face[data-face="sweet"] .e-happy, .f-face[data-face="sweet"] .m-smile, .f-face[data-face="sweet"] .x-hearts { opacity: 1; }
.f-face[data-face="salty"] .e-wide, .f-face[data-face="salty"] .m-open, .f-face[data-face="salty"] .x-drops { opacity: 1; }
.f-face[data-face="sour"] .e-squint, .f-face[data-face="sour"] .m-pucker, .f-face[data-face="sour"] .x-zing { opacity: 1; }
.f-face[data-face="spicy"] .e-wide, .f-face[data-face="spicy"] .m-open, .f-face[data-face="spicy"] .x-fire { opacity: 1; }
.f-face[data-face="bitter"] .e-sad, .f-face[data-face="bitter"] .m-yuck { opacity: 1; }
.f-face[data-face="sour"] .face { fill: #EEF59C; }
.f-face[data-face="spicy"] .face { fill: #FF8C7A; }
.f-face[data-face="bitter"] .face { fill: #D9E4BE; }
.f-face .f-head { transform-origin: 100px 110px; }
.f-face[data-face="sweet"] .f-head { animation: f-happy .8s var(--ease-out); }
.f-face[data-face="sweet"] .x-hearts { animation: f-hearts 1.6s ease-out infinite; }
.f-face[data-face="salty"] .f-head { animation: f-boing .6s var(--ease-out); }
.f-face[data-face="salty"] .x-drops { animation: f-drip 1.2s ease-in infinite; }
.f-face[data-face="sour"] .f-head { animation: f-squeeze 1s var(--ease-out); }
.f-face[data-face="spicy"] .f-head { animation: f-hot .12s linear 8; }
.f-face[data-face="spicy"] .x-fire { animation: f-flame .5s ease-in-out infinite alternate; transform-origin: 100px 40px; }
.f-face[data-face="bitter"] .f-head { animation: f-shudder .7s ease-in-out; }
@keyframes f-happy { 0% { transform: scale(1); } 40% { transform: scale(1.08) rotate(-4deg); } 100% { transform: none; } }
@keyframes f-hearts { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
@keyframes f-drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
@keyframes f-squeeze { 0% { transform: scale(1); } 30% { transform: scale(.82, 1.12); } 60% { transform: scale(.9, 1.06); } 100% { transform: none; } }
@keyframes f-hot { 0% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@keyframes f-flame { from { transform: scaleY(.9); } to { transform: scaleY(1.12) translateY(-3px); } }
@keyframes f-shudder { 0%, 100% { transform: none; } 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
.f-taste-line { font: 700 1.3rem/1.3 var(--f-text) !important; min-height: 1.6em; }
.f-taste-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.f-tbtn { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border: 0; border-radius: 20px; background: var(--cyc-2); color: var(--ink); cursor: pointer; transition: transform .25s var(--ease-out), background .2s, box-shadow .2s; }
.f-tbtn svg { width: 56px; height: 56px; transition: transform .35s var(--ease-out); }
.f-tbtn:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.f-tbtn:hover svg { transform: rotate(-10deg) scale(1.1); }
.f-tbtn[aria-pressed="true"] { background: var(--pen-soft); box-shadow: 0 0 0 2.5px var(--pen); }
.f-tbtn b { display: block; font: 800 1.2rem/1.2 var(--f-display); }
.f-you { display: grid; gap: 12px; margin-top: 22px; }
@media (max-width: 640px) { .f-taste { grid-template-columns: 1fr; } .f-face { width: 200px; } }

/* ── 5. would you eat that? ──────────────────────────────────────────── */
.f-deck { position: relative; max-width: 620px; margin: 0 auto 22px; }
.f-deck-count { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.f-deck-count i { width: 34px; height: 6px; border-radius: 99px; background: var(--cyc-3); transition: background .3s; }
.f-deck-count i.was { background: var(--sound); }
.f-deck-count i.now { background: var(--pen); }
.f-food-card { overflow: hidden; border-radius: 30px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -34px rgba(14, 17, 24, .5); animation: f-card-in .6s var(--ease-out) both; transition: transform .4s var(--ease-in-out), opacity .4s; }
@keyframes f-card-in { from { opacity: 0; transform: translateY(30px) rotate(-2deg) scale(.96); } to { opacity: 1; transform: none; } }
.f-food-card.fly-yes { transform: translateX(120%) rotate(18deg); opacity: 0; }
.f-food-card.fly-no { transform: translateX(-120%) rotate(-18deg); opacity: 0; }
.f-food-card.fly-maybe { transform: translateY(-40px) scale(.9); opacity: 0; }
.f-photo { position: relative; aspect-ratio: 4 / 3; background: var(--cyc-2); overflow: hidden; }
.f-photo img { display: block; width: 100%; height: 100%; object-fit: cover; animation: f-kenburns 14s ease-in-out infinite alternate; }
@keyframes f-kenburns { from { transform: scale(1); } to { transform: scale(1.1) translate(-2%, -1%); } }
.f-where { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(14, 17, 24, .82); color: #fff; font: 700 .95rem/1.2 var(--f-text); backdrop-filter: blur(6px); }
.f-where .tr { color: #C9D6FF; }
.f-food-body { display: grid; gap: 12px; padding: 18px clamp(16px, 3vw, 26px) 22px; }
.f-food-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.f-food-title h3 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); }
.f-ask { font-weight: 800; font-family: var(--f-display); font-size: 1.35rem !important; }
.f-votes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.f-vote { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 0; border-radius: 18px; background: var(--cyc-2); color: var(--ink); font: 700 1rem/1.2 var(--f-text); cursor: pointer; transition: transform .2s var(--ease-out), background .2s, opacity .2s; }
.f-vote:hover:not(:disabled) { transform: translateY(-3px) scale(1.03); }
.f-vote .f-emoji { font-size: 2rem; line-height: 1; transition: transform .3s var(--ease-out); }
.f-vote:hover .f-emoji { transform: scale(1.2) rotate(-8deg); }
.f-vote-yes:hover:not(:disabled), .f-vote-yes.picked { background: #DDF5E7; }
.f-vote-maybe:hover:not(:disabled), .f-vote-maybe.picked { background: var(--pen-soft); }
.f-vote-no:hover:not(:disabled), .f-vote-no.picked { background: var(--live-soft); }
.f-vote:disabled:not(.picked) { opacity: .4; }
.f-vote.picked .f-emoji { animation: f-boing .6s var(--ease-out); }
.f-react { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.f-react:empty { display: none; }
.f-react p { font-weight: 600; animation: k-pop .4s var(--ease-out); }
.f-brave { background: #fff; border-radius: 28px; box-shadow: 0 0 0 1px var(--line); padding: 28px 20px; }
.f-meter { width: min(100%, 320px); height: 14px; border-radius: 99px; background: var(--cyc-3); overflow: hidden; }
.f-meter i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #18A957, var(--pen), var(--live)); animation: f-grow 1.2s var(--ease-out) both; }
@keyframes f-grow { from { width: 0; } }
.f-brave-msg { font-weight: 700; }
.f-phrases ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.f-phrases li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; font-size: 1.15rem; font-weight: 600; }
.f-phrases li span { display: block; }

/* ── 6. café ─────────────────────────────────────────────────────────── */
.f-hm { display: grid; gap: 14px; margin-bottom: 22px; }
.f-hm-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.f-hm-rule { color: var(--ink-2); font-size: 1.02rem !important; }
.f-ex { font-weight: 700; font-size: 1.25rem !important; }
.f-cafe { position: relative; display: grid; gap: 16px; padding: clamp(16px, 3vw, 28px); border-radius: 30px; background: linear-gradient(180deg, #FFF8E6, #FFFFFF 40%); box-shadow: 0 0 0 1px #F1E3B8; }
.f-cafe-sign { position: relative; display: flex; justify-content: center; }
.f-cafe-sign svg:first-child { width: min(86%, 320px); height: auto; animation: f-sign 4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes f-sign { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.f-cafe-cup { position: absolute; right: -4px; top: -30px; width: 54px; height: 54px; animation: f-float 3s ease-in-out infinite; }
.f-chat { display: grid; gap: 10px; }
.f-msg { display: flex; align-items: flex-end; gap: 8px; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.f-msg.in { opacity: 1; transform: none; }
.f-msg.you { justify-content: flex-end; }
.f-av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--sound); color: #fff; font: 800 1rem/1 var(--f-display); }
.f-bub { display: flex; align-items: center; gap: 10px; max-width: min(84%, 520px); padding: 12px 14px 12px 18px; border-radius: 22px; font-size: 1.15rem; }
.f-bub p { font-weight: 600; }
.f-msg.james .f-bub { background: #fff; box-shadow: 0 0 0 1.5px var(--line); border-bottom-left-radius: 6px; }
.f-msg.you .f-bub { background: var(--ink); color: #fff; border-bottom-right-radius: 6px; padding-right: 18px; }
.f-msg.you .tr { color: #C9D6FF; }
.f-bub .k-play { width: 40px; height: 40px; }
.f-choices { display: grid; gap: 12px; }
.f-choose { font-weight: 700; }
.f-opts { display: grid; gap: 8px; }
.f-say { text-align: left; font-size: 1.1rem; }
.f-go { justify-self: center; }
.f-cont-btn { justify-self: end; }

/* ── 7. quiz ─────────────────────────────────────────────────────────── */
.f-q-text { font: 700 clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem)/1.3 var(--f-display) !important; letter-spacing: -.02em; text-align: center; padding: 8px 0; }
.f-q-text .f-blank { min-width: 2.6em; }
.f-long { grid-template-columns: 1fr; }
.f-long .k-opt { text-align: left; font-size: 1.1rem; }
.f-pts { background: var(--pen-soft); box-shadow: none; }

/* ── the end ─────────────────────────────────────────────────────────── */
.f-end { background: linear-gradient(180deg, #fff, #F6F8FF); }
.f-next-h { margin: 36px 0 14px; }

@media (prefers-reduced-motion: reduce) {
  .f-on, .f-q, .f-eggs svg, .f-n, .f-grains i, .f-huh, .f-photo img, .f-cafe-sign svg, .f-cafe-cup, .f-plate-rim { animation: none !important; opacity: 1; }
}