.fbt{contain:layout paint style;--fb-ink: #5a3a2e;--fb-pink: #c94a74;--fb-green: #5aa845;--fb-cream: #fffaf4;position:relative;isolation:isolate;width:100%;max-width:420px;margin:0 auto;padding:16px 16px 14px;border-radius:26px;overflow:hidden;color:var(--fb-ink);font-family:var(--sans);box-shadow:0 30px 60px var(--shade),0 0 0 1px #ffffff14;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.fbt-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#fff1e980,#ffece2eb 38%),url(/assets/family-bakery/cafe.webp) center top / cover}.fbt-head{display:flex;align-items:flex-start;gap:8px}.fbt-order{flex:1;min-width:0;display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:18px;background:var(--fb-cream);border:2px solid transparent;box-shadow:0 6px 18px #783c2829;transition:border-color .2s,transform .2s}.fbt-order.ready{border-color:color-mix(in oklab,var(--fb-green) 70%,white)}.fbt-order.over{transform:scale(1.03);border-color:var(--fb-green)}.fbt-order .fbt-who{width:48px;height:48px;border-radius:50%;background:#fde5dc;object-fit:cover}.fbt-order .fbt-say{min-width:0}.fbt-order .fbt-say p{margin:0;font:600 13px/1.3 var(--sans);color:var(--fb-ink)}.fbt-order .fbt-want{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:2px 9px 2px 2px;border-radius:99px;background:#fbe6dc;font:700 11.5px/1 var(--sans);color:var(--fb-pink)}.fbt-order .fbt-want[hidden]{display:none}.fbt-order .fbt-want img{width:26px;height:26px}.fbt-order.served .fbt-say{opacity:.45;transition:opacity .2s}.fbt-order.in{animation:fbt-in .45s cubic-bezier(.2,.8,.2,1)}.fbt .fbt-serve{padding:9px 12px;border-radius:12px;background:var(--fb-green);color:#fff;font:800 13px/1 var(--sans);box-shadow:0 3px #3d8530;transition:transform .1s,background .15s;white-space:nowrap}.fbt .fbt-serve:active{transform:translateY(2px);box-shadow:0 1px #3d8530}.fbt .fbt-serve:disabled{background:#dccdc4;box-shadow:0 3px #c6b5aa;cursor:default;transform:none}.fbt-order.ready .fbt-serve:not(:disabled){animation:fbt-pulse 1.3s ease-in-out 3}.fbt .fbt-serve:focus-visible,.fbt .cell:focus-visible{outline:3px solid var(--fb-pink);outline-offset:2px}.fbt-coins{display:inline-flex;align-items:center;gap:5px;padding:6px 10px 6px 6px;border-radius:99px;background:var(--fb-cream);box-shadow:0 6px 18px #783c2829;font:800 13px/1 var(--sans);color:#a8701c;font-variant-numeric:tabular-nums}.fbt-coins img{width:20px;height:20px}.fbt-coins.bump{animation:fbt-bump .4s}.fbt-board{margin-top:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;border-radius:20px;background:linear-gradient(#ecd0bf,#e3c1ad);box-shadow:inset 0 2px 6px #783c282e}.fbt .cell{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:0;border-radius:13px;background:#fffaf3;box-shadow:inset 0 -3px #a0644621;cursor:pointer;transition:background .15s}.fbt .cell:has(img){touch-action:none}.fbt .cell:empty{cursor:default}.fbt .cell img{width:84%;height:84%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 3px 2px rgba(90,50,30,.2))}.fbt .cell.oven{background:#fde1c3}.fbt .cell.oven:hover img{transform:translateY(-2px);transition:transform .15s}.fbt .cell.sel{box-shadow:inset 0 0 0 3px var(--fb-pink)}.fbt .cell.sel img{animation:fbt-bob .8s ease-in-out infinite}.fbt .cell.match{background:#e3f3d6}.fbt .cell.over{box-shadow:inset 0 0 0 3px var(--fb-green)}.fbt .cell.lift img{opacity:.25}.fbt .cell.pop img{animation:fbt-pop .35s cubic-bezier(.3,1.6,.5,1)}.fbt .cell.merge img{animation:fbt-merge .45s cubic-bezier(.3,1.6,.5,1)}.fbt .cell.press img{animation:fbt-press .3s}.fbt .cell.shake{animation:fbt-shake .4s}.fbt .spark{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#ffcf5e;pointer-events:none;animation:fbt-spark .6s ease-out forwards}.fbt .spark:nth-child(odd){background:#ff9cbc}.fbt-hint{margin:10px 0 0;padding-right:64px;min-height:2.9em;font:500 12.5px/1.45 var(--sans);color:#7a5546}.fbt-hint a{color:var(--fb-pink);font-weight:700;text-decoration:underline;text-underline-offset:2px}.fbt-cat{position:absolute;right:4px;bottom:-6px;width:68px;height:auto;pointer-events:none;transition:transform .4s}.fbt.done .fbt-cat{transform:translateY(-4px) rotate(-4deg)}.fbt .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.fbt-ghost{position:fixed;left:0;top:0;width:66px;height:66px;pointer-events:none;z-index:100;filter:drop-shadow(0 12px 12px rgba(0,0,0,.3))}.fbt-fly{position:fixed;width:52px;height:52px;pointer-events:none;z-index:100}@keyframes fbt-in{0%{opacity:0;transform:translateY(-8px) scale(.97)}}@keyframes fbt-pulse{50%{transform:scale(1.07)}}@keyframes fbt-bump{40%{transform:scale(1.18)}}@keyframes fbt-bob{50%{transform:translateY(-4px)}}@keyframes fbt-pop{0%{transform:scale(.3);opacity:0}}@keyframes fbt-merge{0%{transform:scale(.6)}60%{transform:scale(1.25)}}@keyframes fbt-press{50%{transform:scale(.88)}}@keyframes fbt-shake{20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}@keyframes fbt-spark{0%{transform:translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(1);opacity:1}to{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-36px) scale(.3);opacity:0}}@media(max-width:420px){.fbt{padding:12px 12px 10px;border-radius:22px}.fbt-order{grid-template-columns:40px 1fr auto;gap:8px;padding:8px}.fbt-order .fbt-who{width:40px;height:40px}.fbt-coins{padding:5px 8px 5px 5px}}@media(prefers-reduced-motion:reduce){.fbt *,.fbt{animation:none!important}}
