/* Yummy Express — the page look, on top of the shared kit.css.
   Same family as Off to School! and Chore Star!: bubblegum pink + sunshine yellow, soft white
   buttons with purple ink, Lilita One. Everything a 6-year-old taps is at least 80px, with space
   around it, and kept off the very bottom edge (wrists rest there).

   The body tells the CSS what is going on (game.js sets these):
     data-screen  title | maker | pause | play       (the kit's screens)
     data-mode    cafe | order | cook | box | driver | drive | thanks
     data-panel   "" | map | decor | stickers        (a card on top of the café)
     data-tray    "1" while a row of picture buttons is showing
     data-ticket  "1" while there is an order
   Layout: portrait phones put the nav in a column on the right; everything else puts it in a
   row at the bottom left. --navR / --navB say how much room the nav takes. */

:root { --accent: #ff7ccf; --accent-2: #ffd23c; --accent-deep: #b0306e; --kb: clamp(80px, 10.5vmin, 100px); --ink-k: #4a2a6a; --navR: 0px; --navB: calc(var(--kb) + 30px); --gap: 14px; --tb: clamp(80px, 11vmin, 104px); }
html, body { background: #bfe6ff; }
svg { display: block; }
.ic { width: 64%; height: 64%; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
canvas#game { touch-action: none; }

/* ---- Corners ---- */
.corner { top: calc(12px + env(safe-area-inset-top)); gap: 18px; }
.corner.left { left: calc(12px + env(safe-area-inset-left)); }
.corner.right { right: calc(12px + env(safe-area-inset-right)); }
.corner .round-btn { height: 80px; min-width: 80px; padding: 0; border-radius: 26px; background: rgba(255, 255, 255, 0.86); border: 4px solid #fff; color: var(--ink-k);
  box-shadow: 0 6px 0 rgba(74, 42, 106, 0.25), 0 10px 22px rgba(40, 30, 80, 0.2); }
.corner .round-btn svg { width: 46px; height: 46px; }
.corner .round-btn.exit { background: #ff6b7a; }
.corner .round-btn.exit svg { width: 40px; height: 40px; }
.round-btn:active, .kbtn:active, .sw:active, .tab:active, .tb:active, .thumb:active, .mp:active, .stk:active { transform: scale(0.9); }
.corner .round-btn.home { height: 56px; min-width: 56px; border-radius: 18px; padding: 0 14px; gap: 6px; position: relative; overflow: hidden; }
.corner .round-btn.home svg { width: 30px; height: 30px; }
.corner .round-btn.home .lbl { font-size: 13px; }
.round-btn.home i { position: absolute; left: 0; bottom: 0; height: 5px; width: 0; background: var(--accent-deep); }
.round-btn.home.holding i { width: 100%; transition: width 1.2s linear; }
body:not([data-screen="title"]) .corner .home { display: none; }

/* ---- Big kid buttons ---- */
.kbtn { width: var(--kb); height: var(--kb); border-radius: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); border: 4px solid #fff; pointer-events: auto;
  box-shadow: 0 7px 0 rgba(74, 42, 106, 0.25), 0 12px 26px rgba(40, 30, 80, 0.22); transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; cursor: pointer; }
.kbtn.big { width: calc(var(--kb) * 1.18); height: calc(var(--kb) * 1.18); border-radius: 36px; }
.glow { animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 10px rgba(255, 210, 60, 0.6), 0 12px 26px rgba(40, 30, 80, 0.22); transform: scale(1.08); } }
.boing { animation: boing 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes boing { 30% { transform: scale(1.25, 0.82); } 60% { transform: scale(0.92, 1.1); } }
.big-btn.round { width: 150px; height: 150px; min-width: 0; padding: 0; border-radius: 50%; }
.big-btn.round svg { width: 72px; height: 72px; margin-left: 10px; }
.big-btn svg { width: 46px; height: 46px; }
.big-btn { color: #4a1a3a; }

/* ---- Title ---- */
#title { justify-content: space-between; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 210, 240, 0.35) 100%); }
#title .game-logo { font-size: clamp(56px, 11.5vw, 124px); color: #fff; text-shadow: 0 5px 0 var(--accent-deep), 0 10px 0 rgba(120, 30, 80, 0.3), 0 0 40px rgba(120, 30, 80, 0.25); }
#title .game-logo span { color: var(--accent-2); }
.title-bottom { gap: 18px; }

/* ---- Stars (a jar of stars, top middle) ---- */
#stars { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 20px 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); border: 4px solid #fff; box-shadow: 0 6px 0 rgba(74, 42, 106, 0.22); pointer-events: auto; }
#stars .jar { width: 58px; height: 58px; }
#stars b { font: 400 40px/1 var(--display); color: var(--ink-k); min-width: 32px; text-align: center; }
#stars.bump b { animation: bump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bump { 40% { transform: scale(1.45); color: #e8a000; } }
#stars.wiggle { animation: pwiggle 0.8s ease-in-out; }
@keyframes pwiggle { 15% { transform: translateX(-50%) rotate(-9deg) scale(1.1); } 35% { transform: translateX(-50%) rotate(8deg) scale(1.1); } 55% { transform: translateX(-50%) rotate(-5deg); } 75% { transform: translateX(-50%) rotate(3deg); } }
/* On the trip the jar steps aside for the ticket (it collects the floating stars), or the ticket hides on small phones. */
@media (max-width: 1100px) { body[data-ticket="1"][data-mode="drive"] #stars { left: auto; right: calc(12px + 80px + 16px + env(safe-area-inset-right)); transform: none; } }
@media (max-width: 560px) { body[data-mode="drive"] #ticket { display: none !important; } body[data-ticket="1"][data-mode="drive"] #stars { left: 50%; right: auto; transform: translateX(-50%); } }
body[data-mode="cook"] #stars, body[data-mode="box"] #stars, body[data-mode="driver"] #stars, body[data-panel="stickers"] #stars, body[data-panel="map"] #stars { display: none; }

/* ---- The order ticket (top left, beside ✕) ---- */
#ticket { position: absolute; display: none; top: calc(12px + env(safe-area-inset-top)); left: calc(12px + 80px + 16px + env(safe-area-inset-left)); height: 80px; align-items: center; gap: 4px; padding: 4px 12px 4px 4px; border-radius: 26px;
  background: #fff; border: 4px solid #ffd1ea; box-shadow: 0 6px 0 rgba(74, 42, 106, 0.2); pointer-events: auto; cursor: pointer; }
body[data-ticket="1"]:is([data-mode="cook"], [data-mode="box"], [data-mode="driver"], [data-mode="drive"]) #ticket { display: flex; }
#ticket img { width: 62px; height: 62px; border-radius: 50%; }
#ticket #tk-food { width: 58px; height: 58px; background: #fff6fb; }
#tk-wants { display: flex; gap: 2px; padding-left: 6px; border-left: 3px dashed #ffd1ea; }
#tk-wants .wp, #tk-wants .wp img, #tk-wants .wp svg { width: 48px; height: 48px; }
.wp { display: grid; place-items: center; border-radius: 50%; }
.wp img { border-radius: 50%; }
.wp { position: relative; }
.wp.shape svg { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; }

/* ---- Steps (little pictures of the recipe) ---- */
#steps { position: absolute; display: none; top: calc(104px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); pointer-events: none; }
body[data-mode="cook"] #steps:not(:empty) { display: flex; }
#steps .st { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; opacity: 0.55; transform: scale(0.85); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
#steps .st svg { width: 76%; height: 76%; }
#steps .st.now { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 4px #ffd23c; }
#steps .st.done { opacity: 1; background: #e6ffd8; }

/* ---- Nav: Café, Delivery Map, Decorate, Sticker Book ---- */
#nav { position: absolute; z-index: 6; display: none; gap: var(--gap); pointer-events: auto; left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); }
body[data-mode="cafe"] #nav, body[data-mode="order"] #nav, body:not([data-panel=""]) #nav { display: flex; }
.kbtn.nav.on { background: #fff3a8; border-color: #ffb800; transform: translateY(-4px); }

/* ---- Picture speech bubble (what the voice just said) ---- */
#bubble { position: fixed; z-index: 46; left: 50%; top: calc(104px + env(safe-area-inset-top)); transform: translateX(-50%) scale(0); display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 30px; background: #fff; box-shadow: 0 8px 0 rgba(74, 42, 106, 0.22), 0 14px 30px rgba(40, 30, 80, 0.25); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
#bubble.on { transform: translateX(-50%) scale(1); }
#bubble svg { width: 72px; height: 72px; }
body:not([data-screen="play"]) #bubble, body[data-mode="order"] #bubble, body[data-mode="thanks"] #bubble, body[data-panel="map"] #bubble, body[data-panel="stickers"] #bubble, body[data-mode="cook"] #bubble { display: none; }

/* ---- The order card (the friend's picture bubble) ---- */
#order-card { position: absolute; display: none; z-index: 7; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); align-items: center; gap: 16px; pointer-events: auto; animation: card-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
body[data-mode="order"][data-panel=""] #order-card { display: flex; }
.oc-bubble { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 40px; background: #fff; border: 5px solid #fff; box-shadow: 0 10px 0 rgba(74, 42, 106, 0.18), 0 20px 50px rgba(40, 30, 80, 0.3); }
.oc-bubble::before { content: ""; position: absolute; left: 60px; top: -22px; border: 16px solid transparent; border-bottom: 22px solid #fff; border-top: 0; }
#order-card.party .oc-bubble { background: radial-gradient(circle at 20% 20%, #fff3a8, #fff 60%); }
#oc-who { width: 108px; height: 108px; border-radius: 50%; animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(-6deg) scale(1.04); } }
.oc-ask { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 4px dashed #ffd1ea; }
#oc-food { width: 116px; height: 116px; border-radius: 50%; background: #fff6fb; }
#oc-wants { display: flex; gap: 8px; }
#oc-wants .wp { width: 92px; height: 92px; background: #fff; box-shadow: 0 0 0 4px #ffe0ef; }
#oc-wants .wp img { width: 100%; height: 100%; }
#oc-wants .wp:nth-child(2) { animation-delay: 0.15s; }
#oc-wants .wp { animation: pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes pop-in { 0% { transform: scale(0); } }
.oc-btns { display: flex; flex-direction: column; gap: 14px; align-items: center; }
#oc-cook { background: #fff3a8; border-color: #ffd23c; }

/* ---- Tray of picture buttons + the done tick ---- */
#tray { position: absolute; display: none; z-index: 6; left: 50%; transform: translateX(-50%); width: max-content; bottom: calc(18px + env(safe-area-inset-bottom)); max-width: calc(100vw - 2 * (var(--kb) * 1.18 + 40px));
  flex-wrap: wrap; justify-content: center; gap: 12px; padding: 12px; border-radius: 36px; background: rgba(255, 255, 255, 0.85); border: 4px solid #fff; box-shadow: 0 8px 0 rgba(74, 42, 106, 0.16), 0 16px 40px rgba(40, 30, 80, 0.2); pointer-events: auto; touch-action: none; }
body[data-tray="1"][data-panel=""] #tray { display: flex; }
.tb { position: relative; width: var(--tb); height: var(--tb); border-radius: 28px; display: grid; place-items: center; background: #fff; border: 5px solid #f3ecfa; cursor: grab; touch-action: none; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: visible; }
.tb img { width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
.tb svg { width: 74%; height: 74%; pointer-events: none; }
.tb i { width: 70%; height: 70%; border-radius: 50%; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12); }
.tb.on { border-color: #ff5fa8; box-shadow: 0 0 0 4px #ffd1ea; background: #fff6fb; }
.tb.lock { opacity: 0.55; filter: grayscale(0.7); }
.tb .tb-b { position: absolute; top: -8px; right: -8px; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; background: #ff4f8a; color: #fff; font: 400 20px/26px var(--display); border: 3px solid #fff; }
.drag-ghost { position: fixed; z-index: 90; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; pointer-events: none; transform: scale(1.15) rotate(-6deg); filter: drop-shadow(0 10px 12px rgba(40, 30, 80, 0.35)); }
.drag-ghost img, .drag-ghost svg { width: 100%; height: 100%; border-radius: 50%; }
.drag-ghost i { display: block; width: 100%; height: 100%; border-radius: 50%; }
#btn-done { position: absolute; display: none; z-index: 7; right: calc(20px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); background: #e6ffd8; border-color: #8ce06a; }
#btn-done.on { display: grid; animation: card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
#btn-done.on.glow { animation: glow 1.2s ease-in-out infinite; }
body:not([data-panel=""]) #btn-done { display: none; }

/* ---- Demo hand, tap rings, flyers ---- */
#hand { position: fixed; z-index: 47; left: 0; top: 0; width: 100px; height: 100px; pointer-events: none; opacity: 0; transition: opacity 0.3s; filter: drop-shadow(0 6px 8px rgba(40, 20, 90, 0.4)); }
#hand.on { opacity: 1; animation: tapdemo 1.1s ease-in-out infinite; }
#hand.swipe.on { animation: swipedemo 1.4s ease-in-out infinite; }
#hand.swipeup.on { animation: swipeup 1.2s ease-in-out infinite; }
#hand.circle.on { animation: circledemo 1.6s linear infinite; }
@keyframes tapdemo { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(0, 10px) scale(0.88); } }
@keyframes swipedemo { 0%, 100% { transform: translate(-60px, 0); } 50% { transform: translate(60px, 0); } }
@keyframes swipeup { 0% { transform: translate(0, 50px); opacity: 0.3; } 60% { transform: translate(0, -70px); opacity: 1; } 100% { transform: translate(0, -80px); opacity: 0; } }
@keyframes circledemo { 0% { transform: translate(50px, 0); } 25% { transform: translate(0, 40px); } 50% { transform: translate(-50px, 0); } 75% { transform: translate(0, -40px); } 100% { transform: translate(50px, 0); } }
.tap-ring { position: fixed; z-index: 43; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 6px solid #fff; pointer-events: none; animation: ring 0.55s ease-out forwards; }
@keyframes ring { from { transform: scale(0.2); opacity: 0.95; } to { transform: scale(1.35); opacity: 0; } }
#fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.fly { position: absolute; left: 0; top: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; will-change: transform; }
.fly svg, .fly img { width: 100%; height: 100%; border-radius: 50%; }
.dsp { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; will-change: transform, opacity; }
.dsp svg { width: 100%; height: 100%; }
.flash { position: fixed; inset: 0; z-index: 88; background: #fff; pointer-events: none; animation: flash 0.7s ease-out forwards; }
@keyframes flash { from { opacity: 0.95; } to { opacity: 0; } }

/* Place-to-place wipe: a pink circle */
#wipe { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: radial-gradient(circle at 50% 50%, #ffe9f5 0%, #ffb3d9 60%, #ff7ccf 100%); clip-path: circle(0% at 50% 50%); transition: clip-path 0.45s ease-in; }
#wipe.on { clip-path: circle(80% at 50% 50%); pointer-events: auto; }
#wipe.out { transition: clip-path 0.5s ease-out; }

/* ---- The trip ---- */
#drive-ui { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-mode="drive"] #drive-ui { display: block; }
#drive-ui .kbtn { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); }
#btn-horn { right: calc(20px + env(safe-area-inset-right)); background: #ffe0ef; }
#btn-wave { right: calc(20px + var(--kb) * 1.18 + 22px + env(safe-area-inset-right)); background: #fff3a8; }
#btn-skip { left: calc(20px + env(safe-area-inset-left)); width: 80px; height: 80px; opacity: 0.85; }
body[data-tripbtns="0"] #drive-ui .kbtn { display: none; }

/* ---- The thank-you ---- */
#thanks-ui { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-mode="thanks"] #thanks-ui { display: block; }
#th-hearts { position: absolute; left: 50%; top: calc(104px + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: 10px; }
#th-hearts svg { width: 76px; height: 76px; filter: drop-shadow(0 6px 0 rgba(176, 48, 110, 0.25)); }
#th-hearts svg.pop { animation: heart-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes heart-in { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.35) rotate(8deg); } }
#btn-back { position: absolute; display: none; right: calc(20px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); background: #fff3a8; border-color: #ffd23c; pointer-events: auto; }
#thanks-ui.ready #btn-back { display: grid; }

/* The gift: a big picture card that pops up in the middle */
.gift-card { position: absolute; left: 50%; top: 46%; width: min(240px, 48vmin); height: min(240px, 48vmin); margin: calc(min(240px, 48vmin) / -2) 0 0 calc(min(240px, 48vmin) / -2); border-radius: 50%; background: radial-gradient(circle, #fffbe6 0%, #ffe0ef 100%); border: 8px solid #fff;
  box-shadow: 0 0 0 10px rgba(255, 210, 60, 0.5), 0 20px 50px rgba(40, 30, 80, 0.35); display: grid; place-items: center; animation: gift-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.gift-card img { width: 100%; height: 100%; border-radius: 50%; }
.gift-card svg { width: 70%; height: 70%; }
.gift-card.out { animation: gift-out 0.45s ease-in forwards; }
@keyframes gift-in { 0% { transform: scale(0) rotate(-40deg); } }
@keyframes gift-out { to { transform: scale(0.2) translateY(-60vh); opacity: 0; } }

/* ---- Panels ---- */
.panel { position: absolute; display: none; pointer-events: auto; }
@keyframes card-in { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* Delivery map */
#map { inset: 0; place-items: center; padding: calc(100px + env(safe-area-inset-top)) calc(16px + var(--navR)) calc(16px + var(--navB)) 16px; background: rgba(110, 60, 150, 0.25); }
body[data-panel="map"] #map { display: grid; }
.map-board { width: min(900px, 100%); max-height: 100%; overflow-y: auto; padding: 22px; border-radius: 38px; border: 6px solid #fff; box-shadow: 0 10px 0 rgba(74, 42, 106, 0.18), 0 20px 50px rgba(40, 30, 80, 0.3); animation: card-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: radial-gradient(circle at 15% 80%, #9fe08a 0 22%, transparent 23%), radial-gradient(circle at 85% 20%, #bfe6ff 0 26%, transparent 27%), linear-gradient(160deg, #d8f5c8, #fff3c8 50%, #cfe9ff); }
.map-board { position: relative; }
/* Tiles are sized so the whole map always fits without scrolling (3 rows on the 3 × 3 map). */
.map-board { --mp: clamp(84px, calc((100vh - 330px) / 3), 160px); width: auto; overflow: visible; padding: 26px 30px; }
.map-grid { position: relative; display: grid; grid-template-columns: repeat(3, var(--mp)); justify-content: center; gap: 22px 26px; }
/* A dashed road joining everyone, behind the tiles. */
.map-grid::before { content: ""; position: absolute; inset: 14% 14%; border: 8px dashed rgba(255, 124, 207, 0.65); border-radius: 30%; pointer-events: none; }
.mp.home { background: #fff3a8; border-color: #ffd23c; display: grid; place-items: center; }
.mp.home svg { width: 70%; height: 70%; pointer-events: none; }
.mp-deco { display: grid; place-items: center; aspect-ratio: 1; opacity: 0.8; }
.mp-deco svg { width: 50%; height: 50%; }
.mp { position: relative; aspect-ratio: 1; min-width: 80px; border-radius: 50%; border: 6px solid #fff; background: #fff; box-shadow: 0 8px 0 rgba(74, 42, 106, 0.18); cursor: pointer; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mp img { width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
.mp.meadow { background: #c8f0a8; } .mp.polar { background: #e6f6ff; } .mp.sea { background: #8fd8ff; } .mp.moon { background: #3a3a6a; } .mp.volcano { background: #ffb38a; } .mp.party { background: #fff3a8; }
.mp-v { position: absolute; left: -8px; bottom: -6px; width: 46%; height: 46%; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(74, 42, 106, 0.18); }
.mp-v svg { width: 78%; height: 78%; }
.mp-n { position: absolute; right: -6px; top: -6px; display: flex; gap: 2px; padding: 4px 7px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 rgba(74, 42, 106, 0.15); }
.mp-n i { width: 12px; height: 12px; border-radius: 50%; background: #ff4f8a; }
.mp-new { position: absolute; right: -10px; top: -10px; width: 42%; height: 42%; animation: wobble 1.4s ease-in-out infinite; }
.mp-lock { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(240, 236, 248, 0.55); }
.mp-lock svg { width: 46%; height: 46%; }
.mp.locked img { filter: brightness(0.15) saturate(0) opacity(0.45); }
/* Decorate */
#dc-panel { flex-direction: column; gap: 10px; padding: 12px; border-radius: 32px; background: rgba(255, 255, 255, 0.92); border: 5px solid #fff; box-shadow: 0 10px 0 rgba(74, 42, 106, 0.16), 0 20px 50px rgba(40, 30, 80, 0.22);
  right: calc(16px + env(safe-area-inset-right)); top: calc(108px + env(safe-area-inset-top)); bottom: calc(16px + env(safe-area-inset-bottom)); width: min(460px, 44vw); animation: card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
body[data-panel="decor"] #dc-panel { display: flex; }
.dc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: none; }
.tab { height: 80px; border-radius: 24px; display: grid; place-items: center; background: #f3ecfa; border: 4px solid transparent; transition: transform 0.15s; cursor: pointer; }
.tab.on { background: #fff3a8; border-color: #ffb800; transform: translateY(-3px); }
.tab svg { width: 54px; height: 54px; pointer-events: none; }
.dc-tray { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-auto-rows: max-content; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; align-content: start; padding: 6px 4px 12px; touch-action: pan-y; }
.thumb { position: relative; aspect-ratio: 1; min-width: 84px; border-radius: 26px; background: #fff; border: 5px solid #eee4f6; display: grid; place-items: center; cursor: pointer; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.thumb img { width: 86%; height: 86%; border-radius: 50%; pointer-events: none; }
.thumb.on { border-color: #ff5fa8; box-shadow: 0 0 0 4px #ffd1ea; }
.thumb.save img { opacity: 0.75; }
.thumb .price { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 2px 9px 2px 4px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 rgba(74, 42, 106, 0.18); white-space: nowrap; pointer-events: none; }
.thumb .price svg { width: 26px; height: 26px; }
.thumb .price b { font: 400 22px/1 var(--display); color: var(--ink-k); }
.thumb.can .price { background: #fff3a8; }
#dc-buy { position: absolute; display: none; z-index: 8; left: calc(16px + env(safe-area-inset-left)); top: calc(108px + env(safe-area-inset-top)); background: #f0ecf6; }
body[data-panel="decor"] #dc-buy.on { display: grid; animation: card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
#dc-buy.can { background: #e6ffd8; border-color: #8ce06a; animation: glow 1.2s ease-in-out infinite; }
#dc-buy:not(.can) .ic { opacity: 0.4; }
#dc-buy .price { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 3px 10px 3px 4px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 rgba(74, 42, 106, 0.2); }
#dc-buy .price svg { width: 30px; height: 30px; }
#dc-buy .price b { font: 400 26px/1 var(--display); color: var(--ink-k); }
/* Sticker book */
#stickers { inset: 0; padding: calc(100px + env(safe-area-inset-top)) calc(16px + var(--navR)) calc(16px + var(--navB)) 16px; background: rgba(110, 60, 150, 0.25); place-items: center; }
body[data-panel="stickers"] #stickers { display: grid; }
.sk-book { width: min(980px, 100%); max-height: 100%; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 30px; box-shadow: 0 10px 0 rgba(74, 42, 106, 0.18), 0 20px 50px rgba(40, 30, 80, 0.3); animation: card-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); touch-action: pan-y; }
.sk-page { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 22px; background: #fff7ec; background-image: radial-gradient(circle at 10px 10px, #ffe0ef 3px, transparent 4px); background-size: 34px 34px; align-content: start; }
.sk-page:first-child { border-right: 6px solid #ffd1ea; border-radius: 30px 0 0 30px; }
.sk-page.foods { border-radius: 0 30px 30px 0; background-color: #f4fbff; }
.stk { position: relative; aspect-ratio: 1; min-width: 80px; border-radius: 50%; border: 5px dashed #e4d8ee; background: rgba(255, 255, 255, 0.6); display: grid; place-items: center; cursor: pointer; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.stk img { width: 100%; height: 100%; border-radius: 50%; filter: brightness(0) opacity(0.12); pointer-events: none; }
.stk.got { border: 6px solid #fff; background: #fff; box-shadow: 0 6px 0 rgba(74, 42, 106, 0.18); transform: rotate(-4deg); }
.stk.got:nth-child(2n) { transform: rotate(4deg); }
.stk.got img { filter: none; }
.stk.gold { border-color: #ffc93c; box-shadow: 0 0 0 4px #fff3a8, 0 6px 0 rgba(160, 110, 0, 0.3); }
.stk-q { position: absolute; font: 400 44px/1 var(--display); color: #cfc3dc; }
.stk-n { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px 7px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 rgba(74, 42, 106, 0.15); }
.stk-n i { width: 12px; height: 12px; border-radius: 50%; background: #ff4f8a; }

/* ---- Make your chef ---- */
#maker { justify-content: flex-end; align-items: stretch; padding: 0; background: none; pointer-events: none; }
#maker > * { pointer-events: auto; }
.mk-panel { position: absolute; right: calc(16px + env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); width: min(470px, 46vw); padding: 18px; border-radius: 34px; background: rgba(255, 255, 255, 0.92); border: 5px solid #fff; box-shadow: 0 10px 0 rgba(74, 42, 106, 0.18), 0 20px 50px rgba(40, 30, 80, 0.25); display: flex; flex-direction: column; gap: 16px; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sw { height: 84px; border-radius: 24px; display: grid; place-items: center; background: #fff; border: 5px solid #eee4f6; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; cursor: pointer; }
.sw.on { border-color: #ff5fa8; transform: scale(1.06); box-shadow: 0 0 0 4px #ffd1ea; }
.sw i { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12); }
.sw img { width: 100%; height: 100%; object-fit: contain; background: #fff7fb; }
.mk-bottom { display: flex; gap: 16px; align-items: center; }
.mk-bottom .big-btn { flex: 1; min-width: 0; height: 92px; border-radius: 30px; }

/* ---- Pause + grown-ups ---- */
#pause.dim { background: radial-gradient(circle at 50% 45%, rgba(255, 236, 248, 0.25), rgba(110, 60, 150, 0.5)); backdrop-filter: blur(2px); }
#pause .card { display: flex; flex-direction: column; align-items: center; gap: 20px; width: auto; min-width: 300px; padding: 28px 34px; background: rgba(255, 255, 255, 0.94); color: var(--ink-k); border: 5px solid #fff; }
#pause .row { display: flex; gap: 24px; justify-content: center; }
#grown { display: none; flex-direction: column; gap: 12px; width: min(420px, 84vw); padding-top: 8px; border-top: 3px dashed #e4d8ee; text-align: left; }
#grown.on { display: flex; }
.slider { display: flex; align-items: center; gap: 12px; font-weight: 900; color: var(--ink-k); }
.slider svg { width: 40px; height: 40px; flex: none; }
.slider input { flex: 1; height: 40px; accent-color: #ff5fa8; }
.grown-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#grown .chip-btn { color: var(--ink-k); background: #f3ecfa; border-color: #e4d8ee; backdrop-filter: none; }
#grown small { color: #7a6a8a; font-weight: 700; }
#p-lock { width: 80px; height: 80px; }
#p-lock.holding { box-shadow: 0 0 0 8px #ffd23c; transition: box-shadow 1.2s; }
#loading { background: radial-gradient(circle at 50% 40%, #ffe9f5, #bfe6ff); }
#loading p { color: #6a3a7a; }
#loading .spin { border-color: rgba(106, 58, 122, 0.15); border-top-color: #ff7ccf; }

/* ======================================================================
   Layouts
   ====================================================================== */

/* Portrait phones: the nav becomes a column on the right. */
@media (orientation: portrait) and (max-width: 700px) {
  :root { --kb: 80px; --navR: 100px; --navB: 0px; --gap: 12px; --tb: 80px; }
  #nav { flex-direction: column; left: auto; right: calc(10px + env(safe-area-inset-right)); bottom: auto; top: 50%; transform: translateY(-40%); }
  .corner { gap: 12px; }
  #stars { padding: 4px 14px 4px 6px; } #stars .jar { width: 48px; height: 48px; } #stars b { font-size: 34px; }
  #ticket { height: 72px; padding: 3px 8px 3px 3px; left: calc(12px + 80px + 8px); } #ticket img { width: 50px; height: 50px; } #ticket #tk-food { width: 50px; height: 50px; } #tk-wants .wp, #tk-wants .wp img, #tk-wants .wp svg { width: 40px; height: 40px; }
  #steps { top: calc(96px + env(safe-area-inset-top)); } #steps .st { width: 38px; height: 38px; }
  #order-card { left: 12px; right: calc(12px + var(--navR)); bottom: calc(14px + env(safe-area-inset-bottom)); flex-direction: column; gap: 12px; }
  .oc-bubble { width: 100%; justify-content: center; padding: 10px; gap: 8px; }
  #oc-who { display: none; } #oc-food { width: 78px; height: 78px; } #oc-wants .wp { width: 68px; height: 68px; } .oc-ask { padding-left: 0; border-left: 0; gap: 8px; }
  .oc-bubble::before { left: 30px; }
  .oc-btns { flex-direction: row; gap: 24px; }
  #tray { max-width: calc(100vw - 24px); left: 0; right: 0; margin: 0 auto; transform: none; bottom: calc(14px + env(safe-area-inset-bottom)); gap: 10px; padding: 10px; border-radius: 30px; }
  #btn-done { bottom: auto; top: calc(100px + env(safe-area-inset-top)); right: 12px; }
  body[data-mode="cook"] #btn-done { top: calc(150px + env(safe-area-inset-top)); }
  #dc-panel { top: auto; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + var(--navR)); bottom: calc(14px + env(safe-area-inset-bottom)); width: auto; height: min(42vh, 380px); padding: 10px; }
  /* While decorating, the nav moves up out of the way so the panel can use the full width (80px tabs). */
  body[data-panel="decor"] #nav { top: calc(96px + env(safe-area-inset-top)); transform: none; gap: 10px; }
  body[data-panel="decor"] #dc-panel { right: calc(10px + env(safe-area-inset-right)); height: min(47vh, 410px); }
  .dc-tabs { gap: 6px; } .tab { height: 80px; } .tab svg { width: 46px; height: 46px; }
  .dc-tray { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; }
  #dc-buy { top: calc(104px + env(safe-area-inset-top)); }
  .map-board { --mp: clamp(84px, calc((100vw - 190px) / 2), 130px); }
  .map-grid { grid-template-columns: repeat(2, var(--mp)); gap: 16px 14px; }
  .map-grid::before { display: none; }
  .mp.home { grid-column: 1 / -1; order: -1; width: 46%; justify-self: center; }
  .mp-deco { display: none; }
  .map-board { padding: 16px; }
  .sk-book { grid-template-columns: 1fr; }
  .sk-page { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 14px; }
  .sk-page:first-child { border-right: 0; border-bottom: 6px solid #ffd1ea; border-radius: 30px 30px 0 0; }
  .sk-page.foods { border-radius: 0 0 30px 30px; }
  .mk-panel { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: none; padding: 14px; gap: 12px; }
  .swatches { grid-template-columns: repeat(4, 1fr); }
  .sw { height: clamp(80px, 9vh, 96px); }
  #btn-wave { right: calc(20px + var(--kb) * 1.18 + 16px); }
  #th-hearts svg { width: 60px; height: 60px; }
}
/* Portrait tablets: the nav is a row at the bottom; panels sit above it. */
@media (orientation: portrait) and (min-width: 701px) {
  :root { --tb: 90px; }
  #tray { max-width: calc(100vw - 2 * (var(--kb) * 1.18 + 22px)); gap: 10px; }
  #dc-panel { top: auto; left: 16px; right: 16px; width: auto; bottom: calc(var(--navB) + 10px); height: min(34vh, 380px); }
  .dc-tabs { grid-template-columns: repeat(7, 1fr); }
  #order-card { left: 16px; right: 16px; bottom: calc(var(--navB) + 10px); justify-content: center; }
  .mk-panel { left: 16px; right: 16px; width: auto; top: auto; bottom: 20px; transform: none; }
  .sk-page { grid-template-columns: repeat(3, 1fr); }
}
/* Landscape phones: short screens. Smaller corners, tighter cards. */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --kb: 80px; --navB: 104px; --gap: 12px; --tb: 80px; }
  .corner { top: 8px; } .corner .round-btn svg { width: 40px; height: 40px; }
  #stars { top: 8px; padding: 3px 14px 3px 5px; } #stars .jar { width: 44px; height: 44px; } #stars b { font-size: 32px; }
  #ticket { top: 8px; left: calc(12px + 80px + 10px); height: 66px; } #ticket img, #ticket #tk-food { width: 50px; height: 50px; } #tk-wants .wp, #tk-wants .wp img, #tk-wants .wp svg { width: 40px; height: 40px; }
  #steps { top: 8px; left: auto; right: calc(12px + 80px + 12px); transform: none; } #steps .st { width: 38px; height: 38px; }
  #bubble { top: 76px; } #bubble svg { width: 56px; height: 56px; }
  .kbtn.big { width: 88px; height: 88px; }
  #order-card { bottom: 10px; gap: 10px; }
  #oc-who { display: none; } .oc-ask { border-left: 0; padding-left: 0; }
  #oc-food { width: 84px; height: 84px; } #oc-wants .wp { width: 70px; height: 70px; }
  .oc-btns { flex-direction: row; gap: 12px; }
  .oc-bubble::before { left: 40px; }
  #tray { bottom: 8px; padding: 8px; gap: 8px; border-radius: 28px; max-width: calc(100vw - 2 * (88px + 30px)); }
  #btn-done { bottom: 12px; }
  #dc-panel { top: 80px; bottom: 8px; width: min(400px, 48vw); padding: 8px; gap: 8px; }
  .tab { height: 80px; } .tab svg { width: 46px; height: 46px; }
  .dc-tray { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; }
  #dc-buy { top: 80px; }
  #map, #stickers { padding: 78px 12px var(--navB) 12px; }
  .map-board { --mp: clamp(80px, calc((100vw - 160px) / 7), 110px); }
  .map-grid { grid-template-columns: repeat(7, var(--mp)); gap: 10px; }
  .map-grid::before { display: none; }
  .mp-deco { display: none; }
  .map-board { padding: 14px; }
  .sk-page { grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px; }
  #title .game-logo { font-size: clamp(46px, 9vw, 84px); }
  .big-btn.round { width: 112px; height: 112px; }
  .mk-panel { width: min(430px, 50vw); padding: 10px; gap: 8px; top: 8px; bottom: 8px; right: calc(12px + 80px + 12px + env(safe-area-inset-right)); transform: none; overflow-y: auto; }
  .tabs .tab { height: 80px; }
  .sw { height: 80px; } .swatches { gap: 8px; }
  .mk-bottom .big-btn { height: 80px; }
  #th-hearts { top: 70px; } #th-hearts svg { width: 56px; height: 56px; }
}