/* ---------- Yum Yum Café ---------- */
.cf { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; }
.cf-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cf-bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 250, 245, .22); }
.cf-fx { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.cf-fly { position: absolute; object-fit: contain; transition: transform .52s cubic-bezier(.4, 0, .5, 1.2); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .2)); }
/* category tabs along the top, between the home button and the toolbar */
.cf-tabs { position: absolute; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: 8px; padding: 8px 12px; border-radius: 40px; background: rgba(255, 255, 255, .88); box-shadow: var(--shadow); z-index: 12; max-width: calc(100% - 330px); }
.cf-tab { position: relative; width: clamp(50px, 9vh, 70px); aspect-ratio: 1; flex: 0 1 auto; min-width: 0; border-radius: 20px; background: color-mix(in srgb, var(--c) 35%, #fff); border: 4px solid var(--c); display: grid; place-items: center; transition: transform .12s; }
.cf-tab img { width: 84%; height: 84%; object-fit: contain; }
.cf-tab.active { transform: translateY(6px) scale(1.1); box-shadow: 0 5px 0 var(--c); background: #fff; }
/* the menu */
.cf-main { position: absolute; left: 16px; right: 16px; top: clamp(90px, 14vh, 108px); bottom: clamp(150px, 24vh, 196px); display: grid; place-items: center; }
.cf-grid { display: grid; justify-content: center; align-content: center; }
.cf-item { position: relative; min-width: 0; min-height: 0; border-radius: 26px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c) 28%, #fff)); border: 5px solid var(--c); box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 70%, #5b3a6b), 0 12px 18px rgba(120, 70, 140, .18); display: grid; place-items: center; animation: cf-in .4s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--i) * 30ms); }
@keyframes cf-in { from { transform: scale(.3); opacity: 0; } }
.cf-item img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.cf-item.hit { animation: cf-hit .3s ease-out; }
@keyframes cf-hit { 35% { transform: translateY(6px) scale(.92); } }
/* the bottom row: customer, tray, bell */
.cf-bottom { position: absolute; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); height: clamp(120px, 20vh, 170px); display: flex; align-items: center; gap: 14px; z-index: 12; }
.cf-customer { height: 100%; aspect-ratio: 1; border-radius: 30px; background: #fff; border: 5px solid var(--pink); box-shadow: var(--shadow); display: grid; place-items: center; flex: none; }
html[data-who="boy"] .cf-customer { border-color: var(--blue); }
.cf-customer img { width: 88%; height: 88%; object-fit: contain; }
.cf-tray { flex: 1; height: 100%; min-width: 0; border-radius: 30px; background: linear-gradient(180deg, #ffe9b3, #f6c76b); border: 6px solid #e2a44a; box-shadow: var(--shadow); padding: 10px; }
.cf-tray.shake, .cf-bell.shake, .cf-choice.shake { animation: cf-shake .4s ease; }
@keyframes cf-shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-5px); } }
.cf-slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; width: 100%; height: 100%; }
.cf-slot { position: relative; min-width: 0; border-radius: 18px; background: rgba(255, 255, 255, .5); border: 3px dashed rgba(200, 140, 60, .5); }
.cf-slot.filled { background: #fff; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(180, 120, 40, .3); }
.cf-slot.land { animation: cf-land .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cf-land { from { transform: scale(.5); } }
.cf-slot-main { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.cf-badges { position: absolute; right: 2px; bottom: 2px; display: flex; gap: 1px; }
.cf-badges img { width: clamp(18px, 3.4vh, 30px); height: clamp(18px, 3.4vh, 30px); object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.cf-bell { position: relative; height: 100%; aspect-ratio: 1; border-radius: 50%; flex: none; background: conic-gradient(var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--indigo), var(--purple), var(--red)); border: 6px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.cf-bell::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: #fff; }
.cf-bell img { position: relative; width: 72%; height: 72%; object-fit: contain; }
.cf-bell.ready { animation: cf-pulse 1.1s ease-in-out infinite; }
@keyframes cf-pulse { 50% { transform: scale(1.08); } }
/* overlays: who is hungry, the chef's questions, the order flying to the kitchen, the order board */
.cf-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(120, 90, 150, .5); animation: fadein .18s ease-out; }
.cf-card { position: relative; background: #fff; border-radius: 36px; padding: 26px; box-shadow: var(--shadow); animation: cf-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cf-pop { from { transform: scale(.4); opacity: 0; } }
.cf-close { position: absolute; top: -22px; right: -22px; width: 60px; height: 60px; font-size: 28px; z-index: 2; }
.cf-ask { display: flex; align-items: center; gap: 24px; max-width: calc(100% - 40px); }
.cf-asker { width: clamp(140px, 34vh, 280px); flex: none; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .2)); animation: cf-bob 1.2s ease-in-out infinite alternate; }
@keyframes cf-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-10px) rotate(2deg); } }
.cf-ask-card { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cf-choices { display: grid; grid-template-columns: repeat(min(var(--n), 4), minmax(0, 1fr)); gap: 14px; }
.cf-choice { position: relative; width: clamp(96px, 19vh, 170px); aspect-ratio: 1; border-radius: 26px; border: 5px solid #eee4f2; background: #fff; display: grid; place-items: center; transition: transform .12s; }
.cf-choice img { width: 84%; height: 84%; object-fit: contain; }
.cf-choice .cf-picked { display: none; position: absolute; top: -14px; right: -14px; width: 46px; height: 46px; }
.cf-choice .cf-picked .ico { width: 100%; height: 100%; }
.cf-choice.picked { border-color: var(--yellow); box-shadow: 0 6px 0 #f4c20d; transform: scale(1.06); }
.cf-choice.picked .cf-picked { display: block; animation: cf-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
.cf-choices.cf-many { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cf-many .cf-choice { width: clamp(80px, 15vh, 130px); }
.cf-tick { width: clamp(78px, 14vh, 110px); height: clamp(78px, 14vh, 110px); border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; animation: cf-pulse 1.1s ease-in-out infinite; }
.cf-tick .ico { width: 92%; height: 92%; }
.cf-who .cf-choice { width: clamp(120px, 24vh, 200px); }
/* the order on its way to the kitchen */
.cf-send { display: flex; align-items: center; gap: 10px; }
.cf-bubble { display: flex; align-items: center; gap: 16px; border-radius: 36px 36px 8px 36px; max-width: 62vw; }
.cf-bubble-who { width: clamp(70px, 14vh, 120px); height: clamp(70px, 14vh, 120px); object-fit: contain; flex: none; }
.cf-bubble-items { display: flex; flex-wrap: wrap; gap: 10px; }
.cf-line { position: relative; display: inline-block; width: clamp(56px, 11vh, 96px); height: clamp(56px, 11vh, 96px); border-radius: 18px; background: #fff7e6; border: 3px solid #ffd58a; }
.cf-line > img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.cf-line .cf-badges img { width: clamp(16px, 3vh, 26px); height: clamp(16px, 3vh, 26px); }
.cf-chef-in { animation: cf-arrive .7s cubic-bezier(.34, 1.56, .64, 1) backwards, cf-bob 1.2s ease-in-out .7s infinite alternate; }
@keyframes cf-arrive { from { transform: translateX(60vw); } }
/* the order board */
.cf-board { width: min(900px, calc(100% - 60px)); max-height: calc(100% - 60px); display: flex; flex-direction: column; gap: 14px; }
.cf-board-head { display: flex; justify-content: center; } .cf-board-head .ico { width: 64px; height: 64px; }
.cf-orders { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.cf-order { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 24px; background: #faf5fd; border: 3px solid #eee4f2; }
.cf-order.done { background: #e9fbea; border-color: #a9e9b0; }
.cf-order-who { width: 64px; height: 64px; object-fit: contain; flex: none; }
.cf-order-items { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.cf-order-state { width: 56px; height: 56px; flex: none; } .cf-order-state img, .cf-order-state .ico { width: 100%; height: 100%; object-fit: contain; }
.cf-order.cf-none { justify-content: center; } .cf-order.cf-none img { width: 140px; }