/* THE MAIN SCREEN — the cafe counter (js/scenes/menu.js + js/hub/art.js).
   The stage takes the screen's shape (js/shape.js) and covers it; the room is
   drawn for that shape; the top bar floats over the cafe ceiling. */
body.scene-menu { background: #ffeef5; }
body.scene-menu #topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 50;
  background: none; border-bottom: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none;
}
body.scene-menu #topbar > * { pointer-events: auto; }
body.scene-menu .pill { box-shadow: var(--shadow-sm); }

.hub { position: absolute; inset: 0; overflow: hidden; background: #ffeef5; }
.hub-stage { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; transform-origin: 0 0; }
.hub-stage > .hb-back { position: absolute; pointer-events: none; overflow: visible; }

/* the counter's places (how many to a page depends on the screen's shape) */
.hub-shelf { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; overflow: hidden; pointer-events: none; }
.hub { touch-action: pan-y; }
.hub .hb-back .hbd { pointer-events: auto; cursor: pointer; }
.hub .hbd.wig { animation: hbdWig .6s ease-in-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hbdWig { 0%, 100% { transform: none; } 20% { transform: rotate(-8deg) scale(1.06); } 45% { transform: rotate(7deg); } 70% { transform: rotate(-4deg); } 85% { transform: rotate(2deg); } }
.hub-track { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; transition: transform .55s cubic-bezier(.3, 1.12, .5, 1); }
.hub-place { position: absolute; top: 0; width: 208px; height: 510px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; pointer-events: auto; }
.hub-place .hb-place { position: absolute; left: calc(-26px * var(--k, 1)); top: 0; pointer-events: none; overflow: visible; }
.hub-place .hb-art { transform-box: fill-box; transform-origin: 50% 100%; }
.hub-place .hb-plaque { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .12s; }
.hub-place:active .hb-plaque { transform: translateY(3px) scale(.97); }
.hub-place.go .hb-art { animation: hbGo .38s cubic-bezier(.3, 1.4, .5, 1); }
.hub-place.nope .hb-art { animation: hbNope .5s ease-in-out; }
.hub-place.soon .hb-plaque { opacity: .8; }
@keyframes hbGo { 0% { transform: none; } 35% { transform: scale(1.08, .92) translateY(6px); } 70% { transform: scale(.95, 1.08) translateY(-14px); } 100% { transform: none; } }
@keyframes hbNope { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }

/* the blender keeps its happy face (and goes "whee!" when you tap it) */
.hub .bf-sleep, .hub .bf-whee, .hub .bf-oops, .hub .bf-wink, .hub .bf-z, .dc-preview .bf-sleep, .dc-preview .bf-whee, .dc-preview .bf-oops, .dc-preview .bf-wink, .dc-preview .bf-z { display: none; }
.hub .bf-awake, .dc-preview .bf-awake { display: inline; }
.hub .hub-place.tapped .bf-awake { display: none; }
.hub .hub-place.tapped .bf-whee { display: inline; }

/* small life: steam drifts, the cupcake breathes, the sign sways and its bulbs blink */
.hub .hb-steam { animation: hbSteam 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hbSteam { 0%, 100% { opacity: .8; transform: translateY(0) scaleY(1); } 50% { opacity: 1; transform: translateY(-7px) scaleY(1.05); } }
.hub .hb-bob { animation: hbBob 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes hbBob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) scale(1.015); } }
.hub .hb-logo { animation: hbSway 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes hbSway { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
.hub .hb-bulb { animation: hbBulb 1.4s steps(1) infinite; }
.hub .hb-bulb.b { animation-delay: .7s; }
@keyframes hbBulb { 0% { fill: #fff6c8; } 50% { fill: #ffd23f; } }

/* the side arrows + page dots */
.hub-arrow { position: absolute; top: 0; width: 80px; height: 80px; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .25s, transform .15s; z-index: 5; }
.hub-arrow svg { display: block; }
.hub-arrow:active { transform: scale(.9); }
.hub-arrow.off { opacity: 0; pointer-events: none; }
.hub-arrow.next:not(.off) svg { animation: hbNudge 1.8s ease-in-out 1s infinite; }
.hub-arrow.prev:not(.off) svg { animation: hbNudgeL 1.8s ease-in-out 1s infinite; }
@keyframes hbNudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(6px); } 90% { transform: translateX(-2px); } }
@keyframes hbNudgeL { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(-6px); } 90% { transform: translateX(2px); } }
.hub-dots { position: absolute; left: 0; width: 1024px; top: 0; display: flex; justify-content: center; gap: 12px; pointer-events: none; }
.hub-dots i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #5a2d4c; box-sizing: border-box; opacity: .55; transition: background .2s, opacity .2s, transform .2s; }
.hub-dots i.on { background: #ff5fa2; opacity: 1; transform: scale(1.2); }

/* Decorate + Parents, tucked into the counter's corners */
.hub-corner { position: absolute; top: 0; width: 92px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hub-corner span { width: 58px; height: 58px; border-radius: 50%; background: #ff8fb1; border: 4px solid #5a2d4c; box-shadow: 0 4px 0 rgba(90,45,76,.2); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.hub-corner.parents span { background: #b9a6ff; }
.hub-corner b { font-size: 14px; font-weight: 900; color: #5a2d4c; background: #fff; border: 3px solid #5a2d4c; border-radius: 12px; padding: 1px 8px; white-space: nowrap; }
.hub-corner:active span { transform: translateY(3px); box-shadow: 0 1px 0 rgba(90,45,76,.2); }

/* ---------------- the grown-up gate + small dialogs ---------------- */
.pg-ov { position: fixed; inset: 0; z-index: 2000; background: rgba(60, 25, 50, .45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pg-card { position: relative; width: min(440px, 100%); background: #fff; border: 4px solid #5a2d4c; border-radius: 28px; box-shadow: 0 8px 0 rgba(90,45,76,.2); padding: 26px 26px 24px; text-align: center; color: #5a2d4c; animation: pgIn .3s cubic-bezier(.3,1.5,.5,1); box-sizing: border-box; }
.pg-card h2 { margin: 6px 0 8px; font-size: 26px; font-weight: 900; }
.pg-card p { margin: 0 0 18px; font-size: 17px; line-height: 1.45; }
.pg-lock { display: flex; justify-content: center; }
.pg-x { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #5a2d4c; background: #fff0f6; color: #5a2d4c; font-size: 24px; font-weight: 900; line-height: 1; cursor: pointer; }
.pg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-opts button { height: 60px; border-radius: 18px; border: 3px solid #5a2d4c; background: #ffeef5; color: #5a2d4c; font-size: 26px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 rgba(90,45,76,.18); }
.pg-opts button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(90,45,76,.18); }
.pg-card.shake { animation: pgShake .45s ease-in-out; }
@keyframes pgIn { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pgShake { 0%, 100% { transform: none; } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }

/* ---------------- the Parents area ---------------- */
body.scene-parents { background: #ffeef5; }
.pa { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #ffeef5; color: #5a2d4c; }
.pa-col { max-width: 640px; margin: 0 auto; padding: 24px 20px 40px; }
.pa h1 { font-size: 32px; font-weight: 900; margin: 6px 0 18px; text-align: center; }
.pa-card { background: #fff; border: 3px solid #5a2d4c; border-radius: 24px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 5px 0 rgba(90,45,76,.14); }
.pa-card h2 { font-size: 20px; font-weight: 900; margin: 0 0 10px; }
.pa-card p { font-size: 16px; line-height: 1.5; margin: 0 0 14px; }
.pa-row { display: flex; width: 100%; align-items: center; gap: 14px; padding: 10px 0; border: 0; border-top: 2px solid #ffe0ec; background: none; text-align: left; color: #5a2d4c; cursor: pointer; font: inherit; }
.pa-card h2 + .pa-row { border-top: 0; }
.pa-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pa-txt b { font-size: 17px; font-weight: 900; }
.pa-txt small { font-size: 14px; opacity: .75; }
.pa-switch { flex: none; width: 60px; height: 34px; border-radius: 17px; background: #e8d5df; border: 3px solid #5a2d4c; position: relative; transition: background .2s; box-sizing: border-box; }
.pa-switch i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #5a2d4c; box-sizing: border-box; transition: transform .2s; }
.pa-switch.on { background: #ff8fb1; }
.pa-switch.on i { transform: translateX(26px); }
.pa-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pa-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 24px; border: 3px solid #5a2d4c; background: #fff0f6; color: #5a2d4c; font: inherit; font-size: 16px; font-weight: 900; text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 rgba(90,45,76,.16); }
.pa-btn.danger { background: #ff6f8f; color: #fff; }
.pa-ver { text-align: center; font-size: 13px; opacity: .6; }

/* ---------------- the page kit (js/hub/page.js): menu screens in the cafe's look ---------------- */
body.scene-decorate, body.scene-trophies, body.scene-quests, body.scene-shopUnlock, body.scene-album, body.scene-gallery, body.scene-recipes { background: #ffeef5; }
body.scene-decorate #topbar, body.scene-trophies #topbar, body.scene-quests #topbar, body.scene-shopUnlock #topbar, body.scene-album #topbar, body.scene-gallery #topbar, body.scene-recipes #topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 50; background: none; border-bottom: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none;
}
body.scene-decorate #topbar > *, body.scene-trophies #topbar > *, body.scene-quests #topbar > *, body.scene-shopUnlock #topbar > *, body.scene-album #topbar > *, body.scene-gallery #topbar > *, body.scene-recipes #topbar > * { pointer-events: auto; }
.pk { position: absolute; inset: 0; overflow: hidden; background: #ffeef5; color: #5a2d4c; }
.pk-stage { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; transform-origin: 0 0; }
.pk-frame { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.pk-wall, .pk-sign { position: absolute; top: 0; pointer-events: none; }
/* the content box under the title sign (placed by js/hub/page.js); pages lay out inside it */
.pk-body { position: absolute; left: 28px; top: 156px; width: 968px; height: 596px; display: flex; flex-direction: column; }

/* ---------------- Decorate ---------------- */
.dc-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 26px; }
.dc-left { flex: none; display: flex; flex-direction: column; gap: 16px; }
.dc-preview { position: relative; width: 560px; height: 420px; border-radius: 24px; border: 5px solid #5a2d4c; overflow: hidden; background: #ffeef5; box-shadow: 0 8px 0 rgba(90,45,76,.18); box-sizing: content-box; }
.dc-preview svg { display: block; width: 100%; height: 100%; }
.dc-under { display: flex; justify-content: space-between; gap: 10px; }
.dc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 20px; background: #fff; border: 3px solid #5a2d4c; font-size: 17px; color: #5a2d4c; box-shadow: 0 4px 0 rgba(90,45,76,.14); }
.dc-pill svg { display: block; }
.dc-grid { flex: none; display: grid; grid-template-columns: repeat(3, 120px); gap: 10px 13px; }
.pk-stage.wide .dc-grid { grid-template-columns: repeat(4, 120px); }
.pk-stage.tall .dc-wrap { flex-direction: column; gap: 24px; }
.pk-stage.tall .dc-preview { width: 640px; height: 480px; }
.pk-stage.tall .dc-grid { grid-template-columns: repeat(6, 108px); gap: 10px; }
.pk-stage.phone .dc-preview { width: 440px; height: 330px; }
.pk-stage.phone .dc-card { height: 124px; }
.pk-stage.phone.wide .dc-art { height: 60px; }
.pk-stage.phone.wide .dc-art svg { width: 60px; height: 60px; }
.pk-stage.phone.tall .dc-preview { width: 552px; height: 414px; }
.pk-stage.phone.tall .dc-grid { grid-template-columns: repeat(4, 120px); gap: 10px 13px; }
.dc-card { position: relative; height: 140px; padding: 6px 4px 8px; border-radius: 20px; border: 3px solid #5a2d4c; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer; box-shadow: 0 5px 0 rgba(90,45,76,.16); font: inherit; color: #5a2d4c; box-sizing: border-box; }
.dc-card b { font-size: 14px; font-weight: 900; line-height: 1; }
.dc-art { height: 74px; display: flex; align-items: center; justify-content: center; }
.dc-art svg { display: block; overflow: visible; }
.dc-price, .dc-own, .dc-lock { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-weight: 900; padding: 2px 10px; border-radius: 12px; line-height: 1.1; text-align: center; }
.dc-price { font-size: 15px; background: #fff3cf; border: 2px solid #5a2d4c; }
.dc-price.poor { opacity: .55; }
.dc-own { color: #3f7f52; font-size: 12px; }
.dc-lock { color: #8a6a86; font-size: 11px; padding: 0 4px; }
.dc-price svg, .dc-own svg, .dc-lock svg { display: block; flex: none; }
.dc-card.owned { background: #f1fbf4; }
.dc-card.locked .dc-art { filter: grayscale(1); opacity: .45; }
.dc-card:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(90,45,76,.16); }
.dc-dot { position: absolute; width: 4px; height: 4px; pointer-events: none; }

/* ---------------- Today's Goals ---------------- */
.gl-list { flex: 1; min-height: 0; width: 100%; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.gl-card { flex: none; display: flex; align-items: center; gap: 22px; height: 150px; padding: 0 26px 0 20px; border-radius: 30px; border: 4px solid #5a2d4c; background: #fff; box-shadow: 0 6px 0 rgba(90,45,76,.16); text-align: left; font: inherit; color: #5a2d4c; cursor: pointer; box-sizing: border-box; }
.gl-card.done { background: #f1fbf4; }
.gl-badge { flex: none; width: 108px; height: 108px; border-radius: 50%; background: #fff0f6; border: 3px solid #ffc2d6; display: flex; align-items: center; justify-content: center; }
.gl-card.done .gl-badge { background: #e3f7e8; border-color: #b8e6c4; }
.gl-mid { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gl-mid b { font-size: 28px; font-weight: 900; line-height: 1.05; }
.gl-desc { font-size: 19px; opacity: .85; }
.gl-bar { position: relative; height: 26px; border-radius: 13px; background: #ffe6ef; border: 3px solid #5a2d4c; overflow: hidden; margin-top: 4px; }
.gl-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #ff8fb1; border-radius: 10px; }
.gl-card.done .gl-bar i { background: #6fcf97; }
.gl-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 15px; }
.gl-reward { flex: none; width: 128px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.gl-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 19px; background: #fff8dc; border: 3px solid #5a2d4c; font-weight: 900; font-size: 19px; }
.gl-chip + .gl-chip { background: #ffeef5; }
.gl-chip svg, .gl-stamp svg, .tr-count svg { display: block; flex: none; }
.gl-stamp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 60px; border-radius: 18px; border: 4px solid #3f9a5f; color: #3f9a5f; font-size: 24px; font-weight: 900; transform: rotate(-6deg); background: #fff; }
.gl-foot { flex: none; width: 100%; max-width: 820px; margin: 14px auto 0; display: flex; justify-content: space-between; }
/* a phone on its side: the three goals side by side */
.pk-stage.wide .gl-list { flex-direction: row; align-items: stretch; max-width: 1500px; padding: 6px 0; }
.pk-stage.wide .gl-card { flex: 1 1 0; height: auto; max-height: 470px; flex-direction: column; justify-content: center; text-align: center; padding: 22px 22px 26px; gap: 14px; }
.pk-stage.wide .gl-mid { flex: none; width: 100%; align-items: center; }
.pk-stage.wide .gl-bar { width: 100%; }
.pk-stage.wide .gl-reward { width: auto; flex-direction: row; }
.pk-stage.wide .gl-chip { padding: 0 16px; }
.pk-stage.wide .gl-foot { max-width: 1500px; }
/* portrait: taller cards down the screen */
.pk-stage.tall .gl-list { max-width: none; }
.pk-stage.tall .gl-card { flex: 1 1 0; height: auto; min-height: 150px; max-height: 250px; gap: 16px; padding: 0 18px 0 16px; }
.pk-stage.tall .gl-reward { width: 112px; }
.pk-stage.tall .gl-foot { max-width: none; }
.gl-foot span { padding: 8px 18px; border-radius: 20px; background: #fff; border: 3px solid #5a2d4c; font-weight: 900; font-size: 16px; }
.gl-card:active, .tr-cell:active { transform: translateY(3px); }

/* ---------------- Trophies ---------------- */
.tr-count { flex: none; align-self: center; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 18px; border-radius: 20px; background: #fff; border: 3px solid #5a2d4c; font-weight: 900; font-size: 17px; white-space: nowrap; }
.tr-cab { flex: 1; min-height: 0; width: 100%; max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 170px; gap: 12px 14px; align-content: start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pk-stage.wide .tr-cab { max-width: none; grid-template-columns: repeat(7, 1fr); align-content: center; }
.pk-stage.tall .tr-cab { max-width: none; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, 230px); align-content: center; }
.pk-stage.phone.tall .tr-cab { grid-template-columns: repeat(3, 1fr); }
.tr-cell { height: 100%; padding: 6px 8px; border-radius: 24px; border: 3px solid #5a2d4c; background: rgba(255,255,255,.92); display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; color: #5a2d4c; cursor: pointer; box-shadow: 0 5px 0 rgba(90,45,76,.14); box-sizing: border-box; }
.tr-cell svg { flex: none; overflow: visible; }
.tr-cell b { font-size: 15px; font-weight: 900; text-align: center; line-height: 1.1; }
.tr-cell span { font-size: 11.5px; text-align: center; line-height: 1.2; opacity: .8; }
.tr-cell:not(.won) b { opacity: .6; }
.tr-cell.won { background: #fffbea; }

.ach-reward svg { vertical-align: -3px; }
.ach-icon svg { display: block; }

/* ---------------- Special Orders, in the cafe look (puppets + drawn toppings) ---------------- */
.special:not(.station) { background: repeating-linear-gradient(90deg, #ffeef5 0 32px, #ffe2ee 32px 64px); padding: 12px 14px; gap: 10px; }
.special .srv-back { border: 3px solid #5a2d4c; border-radius: 18px; padding: 6px 16px; font-weight: 900; color: #5a2d4c; box-shadow: 0 4px 0 rgba(90,45,76,.16); }
.special .cust-panel { background: #fff; border: 4px solid #5a2d4c; border-radius: 28px; box-shadow: 0 6px 0 rgba(90,45,76,.16); padding: 12px 12px 14px; }
.special .cust-avatar { width: min(190px, 72%); font-size: 0; line-height: 0; filter: none; }
.special .cust-avatar .puppet { display: block; width: 100%; height: auto; overflow: visible; }
.special .cust-name { display: inline-block; padding: 4px 16px; border-radius: 16px; background: #ff8fb1; color: #fff; border: 3px solid #5a2d4c; font-size: 17px; text-shadow: 0 1px 0 rgba(90,45,76,.3); }
.special .cust-bubble { border: 3px solid #5a2d4c; border-radius: 18px; font-size: 15px; color: #5a2d4c; box-shadow: 0 4px 0 rgba(90,45,76,.12); }
.special .cust-bubble::before { border-left: 3px solid #5a2d4c; border-top: 3px solid #5a2d4c; top: -10px; }
.special .mood-bar { height: 20px; border: 3px solid #5a2d4c; border-radius: 12px; box-shadow: none; background: #ffe6ef; }
.special .mood-heart svg { display: block; }
.special .combo { border: 3px solid #5a2d4c; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.special .combo[hidden] { display: none; }
.special .combo svg, .sr-combo svg, .sr-coins svg { vertical-align: middle; }
.special .step { border: 2.5px solid #d8b6c8; color: #a07890; background: #fff; font-size: 13px; padding: 4px 12px; }
.special .step.active { border-color: #5a2d4c; background: #ff8fb1; color: #fff; }
.special .step.done { border-color: #5aa06f; }
.special .dish-stage:not(.mini) { background: #fff; border: 4px solid #5a2d4c; border-radius: 26px; box-shadow: 0 6px 0 rgba(90,45,76,.16); max-width: 300px; }
.special .drop-hint { border: 2px solid #5a2d4c; color: #5a2d4c; }
.placed-top { font-size: 0; filter: drop-shadow(0 2px 1px rgba(90,45,76,.25)); }
.placed-top svg { display: block; width: clamp(24px, 4.2vw, 38px); height: auto; }
.drag-ghost svg { display: block; }
.special .make-controls { background: #fff; border: 4px solid #5a2d4c; border-radius: 24px; box-shadow: 0 6px 0 rgba(90,45,76,.16); padding: 10px 12px 12px; }
.special .ctrl-label { color: #5a2d4c; font-size: 13px; }
.special .swatch { border: 3px solid #5a2d4c; width: 36px; height: 36px; box-shadow: 0 3px 0 rgba(90,45,76,.18); }
.special .swatch.sel { outline: 4px solid #ff8fb1; outline-offset: 2px; }
.special .top-btn { width: 48px; height: 48px; border: 3px solid #5a2d4c; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 rgba(90,45,76,.18); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.special .top-btn svg { display: block; pointer-events: none; }
.special .flourishes .top-btn.flourish { background: #fff8dc; border-bottom-color: #5a2d4c; }
.special .mk-btn { border: 3px solid #5a2d4c; border-radius: 18px; }
.special .mk-btn.serve { box-shadow: 0 4px 0 #b8457c; }
.special .sr-card { border: 4px solid #5a2d4c; background: #fff; }
.special .sr-face { width: 120px; font-size: 0; }
.special .sr-face .puppet { width: 100%; height: auto; display: block; }
.special .sr-stars { display: flex; gap: 6px; justify-content: center; }
.special .sr-star svg { display: block; }
.special .sr-star:not(.on) svg { filter: grayscale(1); opacity: .35; }
/* stickers (shown in My Bakes) */
.sticker { border: 3px solid #5a2d4c !important; }
.sticker-stars { display: flex; justify-content: center; gap: 2px; }
.sticker-stars span svg { display: block; width: 16px; height: 16px; }
.sticker-stars span:not(.on) svg { filter: grayscale(1); opacity: .35; }
.vip-head { display: inline-block; vertical-align: middle; margin-right: 4px; }
.vip-head .puppet { width: 100%; height: 100%; display: block; }
.dish-stage.mini .placed-top svg { width: clamp(12px, 3vw, 22px); }

/* ---------------- Treat Shop ---------------- */
.ts-row { flex: 1; min-height: 0; width: 100%; max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(0, 1fr); gap: 28px; align-items: center; }
.pk-stage.wide .ts-row { max-width: 1240px; }
/* portrait: the three cards stacked, picture on the left */
.pk-stage.tall .ts-row { max-width: none; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); gap: 20px; align-items: stretch; }
.pk-stage.tall .ts-card { height: auto; max-height: 360px; display: grid; grid-template-columns: 230px 1fr; grid-auto-rows: auto; align-content: center; justify-items: start; column-gap: 26px; row-gap: 12px; padding: 18px 26px; }
.pk-stage.tall .ts-card > .ts-art { grid-row: 1 / span 4; width: 210px; height: 210px; }
.pk-stage.phone.wide .ts-card { gap: 12px; padding: 14px; }
.pk-stage.phone.wide .ts-art { width: 160px; height: 160px; }
.pk-stage.phone.wide .ts-card:not(.deco) .ts-art svg { width: 130px; height: 130px; }
.pk-stage.phone.wide .ts-deco svg { height: 64px; width: auto; }
.pk-stage.phone.wide .ts-card > b { font-size: 26px; }
.ts-card { height: 520px; max-height: 100%; border-radius: 32px; border: 4px solid #5a2d4c; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 18px; box-shadow: 0 7px 0 rgba(90,45,76,.16); box-sizing: border-box; }
.ts-card.open { background: #f1fbf4; }
.ts-art { width: 210px; height: 210px; border-radius: 50%; background: #fff0f6; border: 3px solid #ffc2d6; display: flex; align-items: center; justify-content: center; }
.ts-card.open .ts-art { background: #e3f7e8; border-color: #b8e6c4; }
.ts-art svg { display: block; }
.ts-deco { background: #fff8dc; border-color: #ffe08a; }
.ts-deco svg { margin: 0 -8px; }
.ts-card > b { font-size: 30px; font-weight: 900; }
.ts-btn { min-width: 170px; height: 58px; padding: 0 24px; border-radius: 29px; border: 4px solid #5a2d4c; background: #ff8fb1; color: #fff; font: inherit; font-size: 22px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 5px 0 #b8457c; cursor: pointer; }
.ts-btn.buy { background: #fff8dc; color: #5a2d4c; box-shadow: 0 5px 0 rgba(90,45,76,.2); }
.ts-btn.poor { opacity: .6; }
.ts-btn:active { transform: translateY(3px); }
.ts-btn svg, .ts-ok svg, .ts-free svg { display: block; flex: none; }
.ts-ok { color: #3f9a5f; font-weight: 900; font-size: 18px; display: inline-flex; gap: 6px; align-items: center; }
.ts-free { font-size: 15px; font-weight: 800; color: #8a6a86; display: inline-flex; align-items: center; gap: 4px; text-align: center; }

/* ---------------- My Bakes (photos + stickers) ---------------- */
.mb-tabs { flex: none; width: 100%; margin-bottom: 14px; display: flex; justify-content: center; gap: 12px; }
.mb-tab { height: 44px; padding: 0 22px; border-radius: 22px; border: 3px solid #5a2d4c; background: #fff; color: #5a2d4c; font: inherit; font-size: 19px; font-weight: 900; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 0 rgba(90,45,76,.14); cursor: pointer; }
.mb-tab b { background: #ffe0ec; border-radius: 12px; padding: 0 9px; font-size: 15px; }
.mb-tab.on { background: #ff8fb1; color: #fff; }
.mb-tab.on b { background: rgba(255,255,255,.4); color: #5a2d4c; }
.mb-board { flex: 1; min-height: 0; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 28px; border: 4px solid #5a2d4c; background: #fff7ec radial-gradient(#f6dcc4 1.6px, transparent 1.8px) 0 0 / 22px 22px; box-shadow: 0 6px 0 rgba(90,45,76,.14); padding: 22px; box-sizing: border-box; }
.mb-board .sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.mb-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.mb-empty p { margin: 0; font-weight: 900; font-size: 26px; }
.mb-empty .mb-sub { font-weight: 700; font-size: 17px; opacity: .8; max-width: 480px; margin-bottom: 8px; }

/* ---------------- Recipe Book ---------------- */
.rb-book { flex: 1; min-height: 0; width: 100%; border-radius: 34px; background: #ff8fb1; border: 5px solid #5a2d4c; box-shadow: 0 8px 0 rgba(90,45,76,.2); display: flex; padding: 16px; box-sizing: border-box; }
.rb-left { width: 262px; flex: none; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fffaf0; border: 3px solid #5a2d4c; border-radius: 22px 6px 6px 22px; padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; }
.rb-right { flex: 1; min-width: 0; position: relative; background: #fffaf0; border: 3px solid #5a2d4c; border-left: 0; border-radius: 6px 22px 22px 6px; padding: 12px 16px; box-sizing: border-box; box-shadow: inset 18px 0 18px -16px rgba(90,45,76,.3); }
.rb-ch { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 10px; border-radius: 16px; border: 3px solid transparent; background: transparent; font: inherit; color: #5a2d4c; cursor: pointer; text-align: left; flex: none; }
.rb-ch.on { background: #ffe0ec; border-color: #5a2d4c; }
.rb-ch-art svg, .rb-head-art svg, .rb-rc-art svg, .rb-ch-n svg { display: block; }
.rb-ch-name { flex: 1; font-weight: 900; font-size: 17px; }
.rb-ch-n { font-weight: 900; font-size: 14px; opacity: .75; }
.rb-total { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-weight: 900; font-size: 14px; padding: 4px 8px 2px; }
.rb-total i { display: block; height: 12px; border-radius: 6px; background: #ffe0ec; border: 2px solid #5a2d4c; overflow: hidden; }
.rb-total b { display: block; height: 100%; background: #ff8fb1; }
.rb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rb-head b { font-size: 28px; font-weight: 900; }
.rb-head > span:last-child { margin-left: auto; font-weight: 900; padding: 4px 14px; border-radius: 16px; background: #fff; border: 3px solid #5a2d4c; }
.rb-grid2 { display: grid; gap: 8px; }
.rb-rc { height: 132px; border-radius: 18px; border: 3px solid #5a2d4c; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; font: inherit; color: #5a2d4c; cursor: pointer; box-shadow: 0 3px 0 rgba(90,45,76,.14); }
.rb-rc.mystery { border-style: dashed; border-color: #d8b6c8; background: #fff8fb; box-shadow: none; }
.rb-rc-name { font-size: 12px; font-weight: 900; text-align: center; line-height: 1.15; }
.rb-rc.show-hint .rb-rc-name { font-size: 10.5px; color: #c0457c; }
.rb-rc:active, .rb-ch:active, .mb-tab:active { transform: translateY(2px); }
.rb-tip { position: absolute; left: 16px; right: 16px; bottom: 10px; text-align: center; font-weight: 800; font-size: 14px; opacity: .75; }
.rb-right { display: flex; flex-direction: column; min-height: 0; }
.rb-grid2 { flex: 1; min-height: 0; align-content: start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pk-stage.phone.wide .rb-ch { height: 46px; }
/* portrait: the chapters become a strip of tabs over the page */
.pk-stage.tall .rb-book { flex-direction: column; }
.pk-stage.tall .rb-left { width: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; border-radius: 22px 22px 6px 6px; padding: 10px; }
.pk-stage.tall .rb-ch { height: 50px; flex: 0 0 auto; }
.pk-stage.tall .rb-total { margin: 4px 0 0; width: 100%; flex-direction: row; align-items: center; gap: 12px; }
.pk-stage.tall .rb-total i { flex: 1; }
.pk-stage.tall .rb-right { border-left: 3px solid #5a2d4c; border-top: 0; border-radius: 6px 6px 22px 22px; box-shadow: inset 0 18px 18px -16px rgba(90,45,76,.3); display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pk-stage.tall .rb-grid2 { flex: 1; min-height: 0; align-content: start; }

.mb-board .sticker .dish-stage.mini { width: 120px; height: 120px; max-width: 120px; aspect-ratio: auto; flex: none; }
.mb-board .sticker { justify-content: flex-start; }

/* ---------------- the top bar on every screen shape ----------------
   Clear of the notch and the rounded corners; slimmer on a phone on its side;
   two rows on a narrow portrait screen (hearts, coins and sound on top, the
   five menu buttons under them), and in a game there only the top row. */
#topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-top: max(8px, env(safe-area-inset-top)); }
@media (max-height: 500px) {
  #topbar { gap: 6px; padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: 5px; }
  #topbar .back { width: 38px; height: 38px; }
  #topbar .back svg { width: 20px; height: 20px; }
  #topbar .pill { padding: 3px 10px; font-size: 14px; }
}
@media (max-width: 520px) {
  #topbar { flex-wrap: wrap; gap: 6px; row-gap: 7px; }
  #topbar .back { width: 40px; height: 40px; }
  #topbar #muteBtn { order: 1; margin-left: auto; }
  #topbar::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  #topbar .back[data-go="quests"], #topbar .back[data-go="recipes"], #topbar .back[data-go="album"], #topbar .back[data-go="trophies"], #topbar .back[data-go="shopUnlock"] { order: 3; }
  #topbar .back[data-go="quests"] { margin-left: auto; }
  body:is(.scene-bake, .scene-freebake, .scene-ramen, .scene-smoothie, .scene-special) #topbar .back[data-go]:not([data-go="menu"]) { display: none; }
  body:is(.scene-bake, .scene-freebake, .scene-ramen, .scene-smoothie, .scene-special) #topbar::after { display: none; }
}

/* ---------------- game stages on any screen (js/stagefit.js) ----------------
   Each game step is a 1024x768 scene; its kitchen carries on to the screen's
   edges. The customer, the order ticket and the big Next / action buttons sit
   at the screen's edges, not the scene's. In portrait the scene fills the width
   mid-screen: the HUD row goes up into the wall above it (bigger on a phone)
   and Next down onto the counter below it. */
.mxs .mx-badge { left: var(--badge-x, 548px); top: var(--hud-y, 62px); }
.mxs .mx-bubble { left: var(--bubble-x, 608px); top: calc(var(--hud-y, 62px) + 4px); width: max-content; max-width: var(--bubble-max, 176px); }
.mxs .ticket { left: var(--ticket-x, 796px); top: calc(var(--hud-y, 62px) - 2px); }
.mxs .mx-steps { top: var(--steps-top, 10px); }
.rms .rm-next, .mxs .action { translate: var(--next-dx, 0px) var(--next-dy, 0px); }
.mixstage-wrap .mxs[data-mode="tall"] { clip-path: none; -webkit-clip-path: none; }
.mxs[data-mode="tall"] .mx-badge, .mxs[data-mode="tall"] .mx-bubble, .mxs[data-mode="tall"] .ticket { scale: var(--hud-k, 1); transform-origin: 0 0; }
.mxs[data-mode="tall"] .mx-steps { scale: var(--steps-k, 1); transform-origin: 50% 50%; }
.mxs[data-mode="tall"] .rm-next, .mxs[data-mode="tall"] .action { scale: var(--hud-k, 1); transform-origin: 100% 100%; }