body.mj-on { background: #2a1f19; }
body.mj-on #app { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: #fff7ec; display: flex; flex-direction: column; padding: 0; }
.mj-top { position: sticky; top: 0; z-index: 30; box-shadow: 0 6px 14px rgba(80, 40, 10, .08); }
.mj-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: #fff; border-bottom: 1px solid #eadbc6; }
.mj-hdr img { width: 34px; height: 34px; border-radius: 50%; }
.mj-hdr b { display: block; font-size: 16px; font-weight: 900; line-height: 1.1; }
.mj-hdr small { font-size: 11.5px; color: #2f9e44; font-weight: 800; }
.mj-open { margin-left: auto; font-size: 11px; font-weight: 900; padding: 4px 10px; border-radius: 99px; }
.mj-open.on { background: #e6f6ea; color: #237a34; } .mj-open.off { background: #f6e2de; color: #b3361f; }
.mj-menu { border: 0; background: #fff1c9; color: #231d19; font: inherit; font-size: 12px; font-weight: 900; padding: 6px 10px; border-radius: 99px; cursor: pointer; }
.mj-prog { position: relative; display: flex; justify-content: space-between; gap: 2px; padding: 8px 14px 6px; background: #fff; border-bottom: 1px solid #eadbc6; max-height: 70px; overflow: hidden; transition: max-height .4s, padding .4s, opacity .4s; }
.mj-prog.off { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border: 0; }
.mj-prog:before { content: ""; position: absolute; left: 30px; right: 30px; top: 20px; height: 3px; background: #eadbc6; }
.mj-pbar { position: absolute; left: 30px; top: 20px; height: 3px; width: 0; background: #2f9e44; transition: width .6s cubic-bezier(.3, 1.3, .5, 1); }
.mj-pg { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 58px; font-size: 10px; font-weight: 900; color: #b0a194; text-align: center; line-height: 1.1; }
.mj-pg u { text-decoration: none; width: 26px; height: 26px; border-radius: 50%; background: #eadbc6; display: grid; place-items: center; font-size: 13px; color: #fff; }
.mj-pg.ok { color: #2f9e44; } .mj-pg.ok u { background: #2f9e44; }
.mj-pg.now { color: #d6492f; } .mj-pg.now u { background: #d6492f; animation: mj-ring 1.2s infinite; }
.mj-pg.pgp u { animation: mj-pgpop .5s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes mj-pgpop { 40% { transform: scale(1.4); } }
@keyframes mj-ring { 0% { box-shadow: 0 0 0 0 rgba(214, 73, 47, .5); } 100% { box-shadow: 0 0 0 12px rgba(214, 73, 47, 0); } }
.mj-stage { display: flex; align-items: flex-end; gap: 8px; padding: 4px 12px 0; background: linear-gradient(#ffe9cc, #fff7ec); }
.mj-cfw { position: relative; width: 70px; flex: 0 0 70px; }
.mj-halo { position: absolute; inset: 14px 2px 4px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 195, 67, .55), rgba(246, 195, 67, 0) 68%); animation: mj-halo 2.6s ease-in-out infinite; }
@keyframes mj-halo { 50% { transform: scale(1.1); } }
.mj-now { flex: 1; min-width: 0; background: #fff; border-radius: 99px; padding: 7px 13px; margin-bottom: 16px; font-size: 13px; color: #87766a; box-shadow: 0 6px 18px rgba(80, 40, 10, .1); }
.mj-now b { color: #231d19; font-size: 15px; }
.mj-masc { position: relative; }
.mj-masc-in { position: relative; transform-origin: 50% 100%; animation: mj-bob 2.6s ease-in-out infinite; filter: drop-shadow(0 8px 8px rgba(80, 40, 10, .25)); }
.mj-masc-in img { display: block; width: 100%; height: auto; }
.mj-masc-in svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes mj-bob { 50% { transform: translateY(-4px) rotate(.6deg); } }
.mj-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: mj-lid 4.2s infinite; }
@keyframes mj-lid { 0%, 91%, 100% { transform: scaleY(0); } 94%, 95% { transform: scaleY(1); } }
.mj-mouth { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); }
.mj-masc.talking .mj-mouth { animation: mj-talk .2s ease-in-out infinite alternate; }
@keyframes mj-talk { from { transform: scaleY(.15); } to { transform: scaleY(.9); } }
.mj-masc[data-e="think"] .mj-masc-in { animation: mj-think 2.4s ease-in-out infinite; }
@keyframes mj-think { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-2deg) translateY(-2px); } }
.mj-masc[data-e="wow"] .mj-masc-in { animation: mj-wow .9s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes mj-wow { 30% { transform: scale(1.14) translateY(-6px); } }
.mj-masc[data-e="cheer"] .mj-masc-in { animation: mj-cheer .5s ease-in-out infinite alternate; }
@keyframes mj-cheer { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(-4px); } }
.mj-masc.jump .mj-masc-in { animation: mj-jump .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes mj-jump { 40% { transform: translateY(-14px) scale(1.05); } }
.mj-masc.bow .mj-masc-in { animation: mj-bow 1.9s ease-in-out; }
.mj-masc.bow .mj-lid { animation: none; transform: scaleY(1); }
@keyframes mj-bow { 30%, 64% { transform: perspective(260px) rotateX(-32deg) translateY(4px); } }
.mj-hrt { position: absolute; top: 6px; font-size: 14px; color: #ff3d5f; opacity: 0; pointer-events: none; }
.mj-masc[data-e="love"] .mj-hrt { animation: mj-hfly 1.8s ease-out infinite; }
.mj-hrt.a { left: 4px; } .mj-hrt.b { left: 30px; animation-delay: .5s !important; } .mj-hrt.c { right: 2px; animation-delay: 1s !important; }
@keyframes mj-hfly { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(1.3); } }
.mj-react { position: absolute; right: -8px; top: 0; font-size: 20px; opacity: 0; }
.mj-react.go { animation: mj-react 1.1s ease-out; }
@keyframes mj-react { 0% { opacity: 0; transform: scale(.3) translateY(10px); } 30% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: translateY(-26px); } }
.mj-chat { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 6px 12px 65vh; }
.mj-msg { max-width: 88%; font-size: 14.5px; line-height: 1.4; animation: mj-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.mj-msg.bot { align-self: flex-start; background: #fff; border: 1px solid #eadbc6; border-radius: 6px 16px 16px 16px; padding: 8px 11px; }
.mj-msg.me { align-self: flex-end; background: #d6492f; color: #fff; font-weight: 800; border-radius: 16px 16px 6px 16px; padding: 8px 12px; }
@keyframes mj-in { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 100% { opacity: 1; transform: none; } }
.mj-dots { display: inline-flex; gap: 4px; padding: 3px 0; } .mj-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c9b8a6; animation: mj-dt 1s infinite; }
.mj-dots i:nth-child(2) { animation-delay: .15s; } .mj-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mj-dt { 50% { transform: translateY(-4px); background: #d6492f; } }
.mj-opts { display: flex; flex-wrap: wrap; gap: 8px; animation: mj-in .45s both; }
.mj-opt { border: 0; font: inherit; font-weight: 900; font-size: 14px; padding: 11px 14px; border-radius: 16px; background: #fff; color: #231d19; cursor: pointer; box-shadow: 0 4px 0 #e8d5bc, 0 6px 14px rgba(0, 0, 0, .07); }
.mj-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 #e8d5bc; }
.mj-opt.hot { background: linear-gradient(160deg, #ff6c47, #d6492f); color: #fff; box-shadow: 0 4px 0 #a8301b, 0 8px 16px rgba(214, 73, 47, .3); }
.mj-opt.ok { background: linear-gradient(160deg, #41c35b, #2f9e44); color: #fff; box-shadow: 0 4px 0 #237a34; }
.mj-opt.big { flex: 1 1 40%; padding: 16px 10px; font-size: 15px; text-align: center; }
.mj-opt.big span { display: block; font-size: 30px; margin-bottom: 2px; animation: mj-icb 2s ease-in-out infinite; }
.mj-opt.mj-wide { width: 100%; margin-top: 8px; }
@keyframes mj-icb { 50% { transform: translateY(-4px) rotate(-6deg); } }
.mj-opt:focus-visible, .mj-chip:focus-visible, .mj-dcard:focus-visible, .mj-fcard:focus-visible, .mj-size:focus-visible { outline: 3px solid #f6c343; outline-offset: 2px; }
.mj-box { background: #fff; border-radius: 18px; padding: 10px; border: 1px solid #eadbc6; box-shadow: 0 6px 18px rgba(80, 40, 10, .07); animation: mj-in .5s both; }
.mj-tabs { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; }
.mj-tab { border: 1px solid #eadbc6; background: #fff7ec; font: inherit; font-weight: 900; font-size: 12px; padding: 6px 11px; border-radius: 99px; white-space: nowrap; color: #231d19; cursor: pointer; }
.mj-tab.on { background: #231d19; color: #fff; border-color: #231d19; }
.mj-dg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mj-dcard { position: relative; border: 2px solid transparent; background: #fff7ec; border-radius: 14px; padding: 5px 5px 7px; text-align: center; cursor: pointer; font: inherit; color: #231d19; animation: mj-in .4s both; }
.mj-dcard.on { border-color: #d6492f; background: #fff0ea; transform: scale(1.05); }
.mj-dimg { height: 58px; border-radius: 10px; overflow: hidden; margin-bottom: 4px; display: grid; place-items: center; background: #ffe7c2; }
.mj-dimg img { width: 100%; height: 100%; object-fit: cover; }
.mj-dcard b { display: block; font-size: 12px; line-height: 1.2; } .mj-dcard span { display: block; font-size: 10px; color: #87766a; line-height: 1.2; } .mj-dcard em { display: block; font-style: normal; color: #d6492f; font-weight: 900; font-size: 12px; }
.mj-dcard i { position: absolute; top: -7px; right: -4px; font-style: normal; font-size: 15px; }
.mj-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 900; font-size: 13px; margin: 2px 2px 8px; }
.mj-sw { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 900; color: #237a34; cursor: pointer; padding: 0; }
.mj-sw i { width: 36px; height: 20px; border-radius: 99px; background: #cdbfae; position: relative; }
.mj-sw i:after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; }
.mj-sw.on i { background: #2f9e44; } .mj-sw.on i:after { left: 18px; }
.mj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mj-chip { border: 2px solid transparent; background: #fff7ec; font: inherit; font-weight: 800; font-size: 12.5px; padding: 8px 11px; border-radius: 12px; cursor: pointer; color: #231d19; }
.mj-chip.on { border-color: #d6492f; background: #fff0ea; color: #d6492f; }
.mj-chip.sp { background: #fff6d8; } .mj-chip small { font-weight: 700; opacity: .75; }
.mj-pl { font-size: 11.5px; font-weight: 900; color: #87766a; margin: 8px 2px 4px; }
.mj-note { font-size: 11.5px; color: #87766a; margin: 8px 2px 0; }
.mj-fl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mj-fcard { border: 2px solid transparent; background: #fff7ec; border-radius: 14px; padding: 6px; font: inherit; color: #231d19; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mj-fcard img, .mj-fcard svg { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.mj-fcard b { font-size: 11.5px; line-height: 1.2; text-align: center; }
.mj-fcard.on { border-color: #d6492f; background: #fff0ea; }
.mj-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mj-size { border: 2px solid #eadbc6; background: #fff7ec; border-radius: 14px; padding: 10px; font: inherit; cursor: pointer; text-align: left; color: #231d19; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.mj-size b { font-size: 14px; } .mj-size em { grid-column: 2; font-style: normal; color: #d6492f; font-weight: 900; }
.mj-size.on { border-color: #d6492f; }
.mj-szi { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #f6c343 0 45%, #e2783a 47% 60%, #f2d4a0 62%); }
.mj-szi.s-Small { width: 22px; height: 22px; } .mj-szi.s-Large { width: 34px; height: 34px; } .mj-szi.s-XL { width: 38px; height: 38px; }
.mj-pop { position: fixed; z-index: 90; left: 50%; top: 40%; width: 170px; margin-left: -85px; text-align: center; pointer-events: none; }
.mj-pi { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.mj-pi img, .mj-pi svg { width: 100%; height: 100%; object-fit: cover; }
.mj-emo { font-size: 96px; line-height: 1; }
.mj-pop b { display: inline-block; margin-top: 8px; background: #231d19; color: #fff; font-weight: 900; font-size: 14px; padding: 6px 14px; border-radius: 99px; max-width: 220px; }
.mj-ray { position: absolute; left: 50%; top: 75px; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; background: repeating-conic-gradient(rgba(246, 195, 67, .45) 0 12deg, transparent 12deg 30deg); animation: mj-spin 3s linear infinite; z-index: -1; }
@keyframes mj-spin { to { transform: rotate(360deg); } }
.mj-burst { position: fixed; left: 0; top: 0; z-index: 89; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; }
.mj-back { position: fixed; z-index: 45; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; padding: 4px 14px 4px 4px; background: #d6492f; color: #fff; font: inherit; font-weight: 900; font-size: 13px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); cursor: pointer; }
.mj-back img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; background: #fff; }
body.mj-on .so-bar { max-width: 496px; }
@media (prefers-reduced-motion: reduce) { .mj-on *, .mj-pop, .mj-pop * { animation: none !important; transition: none !important; } }
.mj-ords { background: #fff; border: 1px solid #eadbc6; border-radius: 18px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(80, 40, 10, .07); animation: mj-in .4s both; }
.mj-ords-h { font-weight: 900; font-size: 13px; margin: 2px 2px 6px; }
.mj-ord { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px; border-radius: 12px; background: #fff7ec; border-left: 5px solid #f2a516; }
.mj-ord + .mj-ord { margin-top: 6px; }
.mj-ord.is-cooking, .mj-ord.is-accepted { border-left-color: #2f9e44; } .mj-ord.is-out { border-left-color: #3b82f6; } .mj-ord.is-done { border-left-color: #2f9e44; opacity: .75; }
.mj-ord.is-rejected, .mj-ord.is-expired, .mj-ord.is-cancelled { border-left-color: #d63a2f; opacity: .7; }
.mj-ord-t { flex: 1 1 150px; min-width: 0; } .mj-ord-t b { display: block; font-size: 14px; } .mj-ord-s { font-size: 12.5px; color: #6a5a4e; font-weight: 700; }
.mj-ord-a { display: flex; gap: 6px; flex-wrap: wrap; }
.mj-ord-a button { border: 0; font: inherit; font-size: 12px; font-weight: 900; padding: 7px 10px; border-radius: 10px; background: #231d19; color: #fff; cursor: pointer; }
.mj-ord-a button + button { background: #fff; color: #231d19; box-shadow: inset 0 0 0 1.5px #eadbc6; }
.mj-ord-a button.bad { color: #b3361f; } .mj-ord-a button.sure { background: #d63a2f; color: #fff; box-shadow: none; }
.mj-cats { display: flex; flex-direction: column; gap: 8px; }
.mj-cat { border: 2px solid #eadbc6; background: #fff7ec; border-radius: 16px; padding: 10px 12px; font: inherit; color: #231d19; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.mj-cat b { font-size: 15px; } .mj-cat.on { border-color: #d6492f; background: #fff0ea; }
.mj-cat.c-special { background: #fff6d8; } .mj-cat.c-premium { background: #ffeee6; }
.mj-cat-p { display: flex; flex-wrap: wrap; gap: 6px; } .mj-cat-p span { font-size: 12px; font-weight: 700; background: #fff; border: 1px solid #eadbc6; border-radius: 99px; padding: 3px 9px; color: #6a5a4e; } .mj-cat-p b { font-size: 12px; color: #d6492f; }
.mj-fcard em { font-style: normal; font-size: 11px; font-weight: 900; color: #d6492f; }
.mj-drk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mj-drt { border: 2px solid transparent; background: #fff7ec; border-radius: 14px; padding: 8px 4px; font: inherit; color: #231d19; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mj-drt span { height: 58px; display: flex; align-items: flex-end; } .mj-drt b { font-size: 11.5px; text-align: center; line-height: 1.2; } .mj-drt em { font-style: normal; font-size: 11.5px; font-weight: 900; color: #d6492f; }
.mj-drt.on { border-color: #d6492f; }
body.mj-on .so-sheet .so-sheet-in.first > * { animation: mj-in .45s both; }
body.mj-on .so-sheet .so-sheet-in.first > *:nth-child(2) { animation-delay: .05s; } body.mj-on .so-sheet .so-sheet-in.first > *:nth-child(3) { animation-delay: .1s; }
body.mj-on .so-sheet .so-sheet-in.first > *:nth-child(4) { animation-delay: .15s; } body.mj-on .so-sheet .so-sheet-in.first > *:nth-child(5) { animation-delay: .2s; }
body.mj-on .so-sheet .so-sheet-in.first > *:nth-child(6) { animation-delay: .25s; } body.mj-on .so-sheet .so-sheet-in.first > *:nth-child(n+7) { animation-delay: .3s; }
.mj-box.done, .mj-opts.done { position: relative; opacity: .82; }
.mj-box.done::after { content: "✏️ Badalne ke liye tap karein"; position: absolute; right: 10px; top: -9px; font-size: 10.5px; font-weight: 900; color: #87766a; background: #fff7ec; border: 1px solid #eadbc6; border-radius: 99px; padding: 1px 8px; }
.mj-opts.done .mj-opt:not(.on) { opacity: .55; }
.mj-opt.on { outline: 3px solid #f6c343; outline-offset: 1px; }
.mj-slots { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
.mj-slot { flex: 1 0 104px; border: 2px dashed #eadbc6; background: #fff7ec; border-radius: 12px; padding: 6px 8px; font: inherit; color: #231d19; text-align: left; cursor: pointer; }
.mj-slot small { display: block; font-size: 10.5px; font-weight: 800; color: #87766a; } .mj-slot b { font-size: 12.5px; }
.mj-slot.cur { border-style: solid; border-color: #d6492f; background: #fff0ea; } .mj-slot.ok { border-style: solid; border-color: #2f9e44; }
.mj-slot.ok b { color: #237a34; }
.mj-q { font-size: 13.5px; margin: 2px 2px 8px; }
.mj-same { display: block; width: 100%; margin: 0 0 8px; border: 2px solid #2f9e44; background: #e9f7ec; color: #1f6b30; border-radius: 12px; padding: 9px; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.mj-ordbtn { border: 0; font: inherit; font-weight: 900; font-size: 13px; padding: 8px 11px; border-radius: 14px; background: #231d19; color: #fff; cursor: pointer; }
.mj-ordbtn i { font-style: normal; background: #f2a516; color: #231d19; border-radius: 99px; padding: 1px 7px; margin-left: 2px; }
.mj-ordp { position: absolute; left: 10px; right: 10px; top: 100%; z-index: 31; max-height: 60vh; overflow-y: auto; margin-top: 6px; }
.mj-ordp[hidden] { display: none; }
.mj-pg.ok, .mj-pg.pgp { cursor: pointer; }