/* Mewbello's meta layer: cards, the café, daily, shop, boosters, toasts, the mode bar. The game's look: a retro mint-
   and-cherry ice-cream-parlour cat café; cream cards with a cherry scalloped edge and a thin chocolate outline;
   Grandstander + Nunito; cartoon buttons (a chocolate outline and lip) that sink when pressed.
   Everything lives under #meta (one root container). Cards never grow taller than the visible screen; their buttons
   stay pinned in view; x1 on phones, x1.3 on wide screens. */
#meta, .mBoost, .mIn {
  --m-paper: #fff6e3; --m-paper2: #fbe9c9; --m-edge: #e4cfa6; --m-ink: #4a2c2a; --m-ink2: #7a5a52;
  --m-cherry: #e2404f; --m-cherryD: #b3283a; --m-mint: #a9dcc8; --m-mintD: #7fc2aa; --m-mintDD: #4f9a80; --m-sky: #8cc8ea; --m-skyD: #5aa2cc;
  --m-gold: #ffd77a; --m-goldD: #d9a73a; --m-red: #e2404f; --m-redD: #b3283a; --m-butter: #ffd77a;
  --m-display: "Grandstander", "Arial Rounded MT Bold", system-ui, sans-serif;
  --m-text: "Nunito", "Segoe UI", system-ui, sans-serif;
  --m-shadow: 0 8px 22px rgba(60, 40, 30, .18);
  --m-line: 0 0 0 2px var(--m-ink);
  --mz: 1;
  --m-top: env(safe-area-inset-top, 0px); --m-bottom: env(safe-area-inset-bottom, 0px);
}
#meta { position: fixed; inset: 0; pointer-events: none; z-index: 30; font-family: var(--m-text); color: var(--m-ink); }
@media (max-width: 370px) { #meta { --mz: .94; } }
@media (min-width: 1100px) and (min-height: 600px) { #meta { --mz: 1.3; } }
#meta * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:where(#meta) button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
:where(#meta) button:disabled { cursor: default; }
:where(#meta, .mBoost, .mIn) .mi { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; pointer-events: none; }
:where(#meta, .mBoost, .mIn) .mCoin { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.24em; margin-right: .15em; flex: none; overflow: visible; }
:where(#meta, .mBoost, .mIn) .mFlame { width: 1.3em; height: 1.3em; flex: none; }

/* ---------- the overlay and the card ---------- */
.mOverlay { position: fixed; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  padding: calc(56px + var(--m-top)) 12px calc(10px + var(--m-bottom)); background: rgba(38, 58, 52, .42); animation: mFade .22s ease-out; }
.mOverlay.out { animation: mFadeOut .22s ease-in forwards; }
@keyframes mFade { from { opacity: 0; } }
@keyframes mFadeOut { to { opacity: 0; } }
.mSheet { zoom: var(--mz); position: relative; width: min(420px, calc((100vw - 24px) / var(--mz)));
  max-height: calc((100dvh - 66px - var(--m-top) - var(--m-bottom)) / var(--mz)); display: flex; flex-direction: column;
  background: linear-gradient(#fffaf0, #fff6e3); border-radius: 28px; overflow: hidden;
  box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 8px 0 2px var(--m-ink), 0 24px 60px rgba(40, 30, 25, .38); animation: mRise .45s cubic-bezier(.25, 1.5, .45, 1); }
@supports not (height: 100dvh) { .mSheet { max-height: calc((100vh - 66px) / var(--mz)); } }
.mSheet.wide { width: min(560px, calc((100vw - 24px) / var(--mz))); }
.mSheet.tall { width: min(600px, calc((100vw - 24px) / var(--mz))); }
.mOverlay.out .mSheet { animation: none; }
.mSheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--m-cherry) 0 8px, var(--m-ink) 8px 9.5px, transparent 10px) 0 4px / 20px 12px repeat-x,
  linear-gradient(var(--m-cherry), var(--m-cherry)) 0 0 / 100% 5px no-repeat; }
.mSheet .mBody { padding-top: 24px; }
@keyframes mRise { from { transform: translateY(50px) scale(.92); opacity: 0; } }
.mBody { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 18px 8px; display: flex; flex-direction: column; }
.mHead { text-align: center; flex: none; padding: 0 30px; }
.mBadge { display: inline-block; font: 800 14px/1 var(--m-display); color: var(--m-ink); padding: 7px 16px 5px; border-radius: 99px; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(#c8eadc, var(--m-mint)); box-shadow: inset 0 -3px 0 var(--m-mintD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mBadge.cherry, .mBadge.sky, .mBadge.red { color: #fff; }
.mBadge.cherry { background: linear-gradient(#ef6670, var(--m-cherry)); box-shadow: inset 0 -3px 0 var(--m-cherryD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mBadge.gold { background: linear-gradient(#ffe6a6, var(--m-gold)); box-shadow: inset 0 -3px 0 var(--m-goldD), var(--m-line), 0 3px 0 2px var(--m-ink); color: #5a3a12; }
.mBadge.sky { background: linear-gradient(#b6dcf2, var(--m-sky)); box-shadow: inset 0 -3px 0 var(--m-skyD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mBadge.red { background: linear-gradient(#ef6670, var(--m-red)); box-shadow: inset 0 -3px 0 var(--m-redD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mTitle { font: 800 26px/1.08 var(--m-display); margin: 10px 0 2px; }
.mSub { margin: 2px 0 10px; font: 600 14.5px/1.35 var(--m-text); color: var(--m-ink2); }
.mX { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--m-ink);
  background: linear-gradient(#fffbf0, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 3px 0 2px var(--m-ink); z-index: 2; }
.mX .mi { width: 20px; height: 20px; }
.mX:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 1px 0 2px var(--m-ink); }
.mFoot { flex: none; display: flex; gap: 10px; padding: 10px 18px 18px; border-top: 1px solid rgba(228, 207, 166, .55); background: linear-gradient(rgba(255, 243, 228, 0), #fff6e3 40%); }
.mBtn { flex: 1; min-height: 56px; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  font: 800 21px/1 var(--m-display); color: #fff !important; background: linear-gradient(#ef6670, var(--m-cherry));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 var(--m-cherryD), var(--m-line), 0 5px 0 2px var(--m-ink), var(--m-shadow); transition: transform .16s cubic-bezier(.3, 1.7, .5, 1), box-shadow .16s; }
.mBtn .mi { width: 22px; height: 22px; }
.mBtn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 var(--m-cherryD), var(--m-line), 0 1px 0 2px var(--m-ink); }
.mBtn.ghost { flex: .8; color: var(--m-ink) !important; background: linear-gradient(#fffbf0, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 5px 0 2px var(--m-ink), var(--m-shadow); }
.mBtn.mint { color: var(--m-ink) !important; background: linear-gradient(#c8eadc, var(--m-mint)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 var(--m-mintD), var(--m-line), 0 5px 0 2px var(--m-ink), var(--m-shadow); }
.mBtn.gold { color: #5a3a12 !important; background: linear-gradient(#ffe6a6, var(--m-gold)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 var(--m-goldD), var(--m-line), 0 5px 0 2px var(--m-ink), var(--m-shadow); }
.mBtn:disabled { filter: saturate(.2) brightness(1.05); opacity: .6; }
.mBtn:focus-visible, .mTile:focus-visible, .mChip:focus-visible, .mDecor:focus-visible { outline: 3px solid var(--m-sky); outline-offset: 2px; }
.mLead { text-align: center; font: 600 16px/1.4 var(--m-text); margin: 6px 4px 4px; }
.mFine { font: 600 13px/1.4 var(--m-text); color: var(--m-ink2); margin: 10px 0 2px; }
.mFine .mi { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; margin-right: .3em; color: var(--m-cherry); }
.center { text-align: center; }
.mH3 { font: 800 17px/1 var(--m-display); margin: 16px 2px 8px; }
.mBalance { display: flex; align-items: center; justify-content: center; gap: 4px; font: 800 30px/1 var(--m-display); color: var(--m-goldD); margin: 8px 0; }
.mBalance small { font: 700 14px/1 var(--m-text); color: var(--m-ink2); margin-left: 4px; }
.mCheck { display: flex; gap: 10px; align-items: center; justify-content: center; font: 600 14px/1.3 var(--m-text); color: var(--m-ink2); margin: 8px 0 2px; cursor: pointer; }
.mCheck input { width: 20px; height: 20px; accent-color: var(--m-cherry); }
.mLink { color: var(--m-cherryD) !important; font-weight: 700 !important; text-decoration: underline; text-underline-offset: 2px; }
.mProse { font: 500 15px/1.5 var(--m-text); padding: 0 2px; }
.mProse h3 { font: 800 17px/1.2 var(--m-display); margin: 14px 0 2px; color: var(--m-cherryD); }
.mProse p { margin: 6px 0; }
.mProse a { color: var(--m-cherryD); font-weight: 700; }

/* ---------- toasts: one at a time, in the scenery band under the top HUD ---------- */
.mToast { position: fixed; left: 50%; top: var(--meta-toast-top, calc(var(--m-top) + 128px)); transform: translate(-50%, -10px) scale(.94); opacity: 0;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(92vw, 520px); padding: 8px 16px 8px 8px; border-radius: 18px; zoom: var(--mz);
  background: rgba(255, 249, 241, .97); box-shadow: 0 3px 0 rgba(228, 207, 166, .9), var(--m-shadow); font: 700 15px/1.25 var(--m-text);
  transition: opacity .22s, transform .3s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; z-index: 60; }
.mToast.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.mToast.top { top: calc(var(--m-top) + 8px); }
.mToastIcon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--m-mint); box-shadow: 0 0 0 2px var(--m-ink); color: var(--m-ink); flex: none; }
.mToastIcon .mi { width: 17px; height: 17px; }
.mToast.gold .mToastIcon { background: var(--m-gold); }
.mToast.cherry .mToastIcon { background: var(--m-cherry); color: #fff; }

/* ---------- coins that fly ---------- */
.mCoinFx { position: fixed; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; z-index: 70; pointer-events: none; will-change: transform;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 12c3-4.6 9.4-6.2 14.2-2.1l4.6-3.2v10.6l-4.6-3.2C12 18.2 5.6 16.6 2.6 12z' fill='%23ffd77a' stroke='%234a2c2a' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='7.6' cy='11.1' r='1.15' fill='%234a2c2a'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- the mode bar (daily / friend's level) ---------- */
.mModeBar { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--meta-bar-bottom, calc(var(--m-bottom) + 104px)); zoom: var(--mz);
  display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 99px; pointer-events: auto; white-space: nowrap;
  background: rgba(255, 249, 241, .96); box-shadow: var(--m-line), 0 3px 0 2px var(--m-ink), var(--m-shadow); z-index: 25; font: 800 15px/1 var(--m-display); }
.mModeBar b { display: flex; align-items: center; gap: 6px; color: var(--m-cherryD); font-weight: 800; }
.mModeBar b .mi { width: 18px; height: 18px; }
.mBack { display: flex; align-items: center; gap: 4px; padding: 8px 12px 7px 8px; border-radius: 99px; color: var(--m-ink) !important; font: 800 14px/1 var(--m-display) !important;
  background: linear-gradient(#c8eadc, var(--m-mint)) !important; box-shadow: inset 0 -3px 0 var(--m-mintD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mBack .mi { width: 16px; height: 16px; }

/* ---------- booster chips (the game places them) ---------- */
.mBoost { pointer-events: auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 70px; height: 62px; padding: 4px 8px;
  border-radius: 18px; background: linear-gradient(#fffbf0, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 4px 0 2px var(--m-ink), var(--m-shadow); color: var(--m-ink);
  font: 800 12.5px/1 var(--m-display); transition: transform .16s cubic-bezier(.3, 1.7, .5, 1); }
.mBoost .mi { width: 22px; height: 22px; color: var(--m-cherry); }
.mBoost .pr { display: inline-flex; align-items: center; gap: 1px; font: 800 12px/1 var(--m-display); color: var(--m-goldD); }
.mBoost .pr .mi { width: 11px; height: 11px; color: var(--m-ink2); }
.mBoost.locked { opacity: .55; } .mBoost.locked .pr { color: var(--m-ink2); }
.mBoost.poor .pr { color: var(--m-ink2); }
.mBoost:active:not(.locked) { transform: translateY(3px); }

/* ---------- menu part ---------- */
.mTiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 12px; }
.mTile { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 10px 10px 10px;
  border-radius: 18px; background: linear-gradient(#fffbf0, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 4px 0 2px var(--m-ink); min-height: 62px; }
.mTile .ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--m-edge); color: var(--m-cherry); font-size: 22px; }
.mTile .ic .mi { width: 22px; height: 22px; }
.mTile .ic .mCoin { margin: 0; width: 22px; height: 22px; }
.mTile b { font: 800 17px/1.05 var(--m-display); }
.mTile small { font: 600 12px/1.2 var(--m-text); color: var(--m-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mTile.soft { opacity: .62; }
.mTile.dot::after { content: ""; position: absolute; right: 8px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--m-red); box-shadow: 0 0 0 2px #fff; }
.mTile:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 1px 0 2px var(--m-ink); }
.mRows { margin: 2px 0 6px; }
.mSwitch { display: flex; align-items: center; gap: 12px; font: 700 15.5px/1.15 var(--m-text); margin: 9px 0; cursor: pointer; }
.mSwitch input { display: none; }
.mSwitch .sl { flex: none; width: 50px; height: 30px; border-radius: 15px; background: #e8dcc4; position: relative; transition: background .2s; box-shadow: inset 0 2px 3px rgba(74, 44, 42, .15); }
.mSwitch .sl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, .2); transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); }
.mSwitch input:checked + .sl { background: var(--m-mint); }
.mSwitch input:checked + .sl::after { transform: translateX(20px); }
.mSwitch .lab small { display: block; font: 600 12px/1.2 var(--m-text); color: var(--m-ink2); margin-top: 2px; }
.mLinks { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin: 10px 0 4px; }
.mLinks button { display: inline-flex; align-items: center; gap: 4px; font: 700 14px/1.6 var(--m-text) !important; color: var(--m-cherryD) !important; text-decoration: underline; text-underline-offset: 3px; }
.mLinks button .mi { width: 16px; height: 16px; }
.mVersion { text-align: center; font: 600 12px/1.4 var(--m-text); color: var(--m-ink2); margin: 2px 0; }
.mVersion a { color: var(--m-cherryD); font-weight: 700; }

/* ---------- the room canvas (win card and home) ---------- */
.mRoomCanvas { display: block; width: 100%; border-radius: 18px; }

/* ---------- My café: tabs, the living room, the cats, the street ---------- */
.mSheet.home .mHead { padding-bottom: 0; }
.mSheet.home .mTitle { font-size: 24px; margin-top: 2px; }
.mSheet.home .mBody { padding-top: 16px; }
.mHome { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.mSeg { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 18px; background: var(--m-paper2); box-shadow: inset 0 2px 3px rgba(74, 44, 42, .12); margin-top: 6px; }
.mSegB { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 14px; font: 800 15px/1 var(--m-display) !important; color: var(--m-ink2) !important; }
.mSegB .mi { width: 18px; height: 18px; }
.mSegB i { font-style: normal; font: 800 12px/1 var(--m-display); padding: 3px 6px 2px; border-radius: 99px; background: #fff; color: var(--m-cherryD); }
.mSegB.on { color: #fff !important; background: linear-gradient(#ef6670, var(--m-cherry)); box-shadow: inset 0 -3px 0 var(--m-cherryD), var(--m-line), 0 2px 0 2px var(--m-ink); }
.mPane { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mPane[hidden] { display: none !important; }
.mRoomTabs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mCafeName { font: 700 12.5px/1.2 var(--m-text); color: var(--m-ink2); padding: 0 2px; }
.mRoomRow { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.mRoomRow::-webkit-scrollbar { display: none; }
.mRoomTab { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 7px 11px 6px; border-radius: 99px; font: 800 14px/1 var(--m-display) !important;
  background: #fff !important; box-shadow: var(--m-line), 0 2px 0 2px var(--m-ink); }
.mRoomTab .mi { width: 14px; height: 14px; color: var(--m-mintDD); }
.mRoomTab.on { background: linear-gradient(#c8eadc, var(--m-mint)) !important; box-shadow: inset 0 -3px 0 var(--m-mintD), var(--m-line), 0 2px 0 2px var(--m-ink); }
.mRoomTab.locked { opacity: .55; }
.mRoomTab.locked .mi { color: var(--m-ink2); }
.mRoomBox { flex: none; width: 100%; max-width: max(240px, calc((100dvh / var(--mz) - 420px) * 1.5)); margin: 0 auto; border-radius: 20px; overflow: hidden;
  box-shadow: inset 0 0 0 3px #e4cfa6, 0 4px 0 #e4cfa6; background: #e6f6ef; touch-action: manipulation; }
.mRoomInfo { display: flex; flex-direction: column; gap: 6px; }
.mRoomHead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 2px 0; }
.mRoomHead b { font: 800 21px/1 var(--m-display); }
.mRoomHead small { flex-basis: 100%; font: 600 12.5px/1.3 var(--m-text); color: var(--m-ink2); }
.mPill { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px 3px; border-radius: 99px; font: 800 13px/1 var(--m-display); background: var(--m-paper2); box-shadow: var(--m-line), 0 2px 0 2px var(--m-ink); color: var(--m-cherryD); }
.mPill.done { background: linear-gradient(#c8eadc, var(--m-mint)); color: var(--m-ink); box-shadow: inset 0 -3px 0 var(--m-mintD), var(--m-line), 0 2px 0 2px var(--m-ink); }
.mPill .mi { width: 14px; height: 14px; }
.mDots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 2px 0; }
.mDots i { width: 10px; height: 10px; border-radius: 50%; background: #eadfca; box-shadow: inset 0 1px 2px rgba(74, 44, 42, .2); }
.mDots i.on { background: var(--m-cherry); box-shadow: 0 1.5px 0 var(--m-cherryD); }
.mCatStrip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.mCatStrip::-webkit-scrollbar { display: none; }
.mCatStrip .mFine { margin: 0; }
.mCatChip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; }
.mCatChip canvas { width: 46px; height: 46px; border-radius: 50%; box-shadow: var(--m-line), 0 2px 0 2px var(--m-ink); }
.mCatChip span { font: 800 12px/1.1 var(--m-display); max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mCatChip:active canvas { transform: translateY(2px); box-shadow: var(--m-line), 0 0 0 2px var(--m-ink); }
.mNextPiece { flex-basis: 100%; text-align: center; margin: 0 0 2px; }
.mRoomActs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-bottom: 4px; }
.mChip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px 8px; border-radius: 99px; font: 800 15px/1 var(--m-display) !important;
  background: linear-gradient(#fffbf0, var(--m-paper2)) !important; box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 3px 0 2px var(--m-ink); }
.mChip .mi { width: 18px; height: 18px; color: var(--m-cherry); }
.mChip:disabled { opacity: .6; }
.mChip:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 1px 0 2px var(--m-ink); }
.mStreet { position: relative; flex: none; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 3px #e4cfa6; }
.mStreet canvas { display: block; width: 100%; }
.mArrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 250, 243, .92) !important; box-shadow: var(--m-line), 0 3px 0 2px var(--m-ink), var(--m-shadow); color: var(--m-ink); }
.mArrow .mi { width: 20px; height: 20px; }
.mArrow.l { left: 8px; } .mArrow.r { right: 8px; }
.mArrow:disabled { opacity: .35; }
.mStreetCap { text-align: center; margin: 2px 0 0; font: 800 18px/1.25 var(--m-display); }
.mStreetCap small { font: 600 13px/1.3 var(--m-text); color: var(--m-ink2); }
/* the album */
.mPane.cats .mH3 { margin: 8px 2px 6px; }
.mH3 small { font: 700 12.5px/1 var(--m-text); color: var(--m-ink2); margin-left: 4px; }
.mAlbGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.mAlb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 4px 7px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px #eadcc0, var(--m-line), 0 3px 0 2px var(--m-ink); min-width: 0; }
.mAlb canvas { width: 100%; max-width: 76px; aspect-ratio: 1; border-radius: 12px; }
.mAlb b { font: 800 13.5px/1.1 var(--m-display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mAlb small { font: 600 11px/1.1 var(--m-text); color: var(--m-ink2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mAlb.rare { box-shadow: inset 0 0 0 2px var(--m-gold), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mAlb.sil b { color: var(--m-ink2); }
.mAlb:active { transform: translateY(2px); }
/* the cat card */
.mSheet.cat { width: min(440px, calc((100vw - 24px) / var(--mz))); }
.mCatCard { display: flex; flex-direction: column; gap: 6px; }
.mCatPic { border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 3px #e4cfa6; flex: none; }
.mCatPic canvas { display: block; width: 100%; }
.mFacts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mFacts p { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; margin: 0; align-items: start; font: 600 13.5px/1.3 var(--m-text); color: var(--m-ink2); }
.mFacts .ic { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--m-paper2); color: var(--m-cherry); }
.mFacts .ic .mi { width: 16px; height: 16px; }
.mFacts b { font: 800 14px/1.2 var(--m-display); color: var(--m-ink); }
.mOutfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 7px; padding-bottom: 4px; }
.mOutfit { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #eadcc0, var(--m-line), 0 3px 0 2px var(--m-ink); }
.mOutfit canvas { width: 40px; height: 40px; }
.mOutfit b { font: 800 11.5px/1.1 var(--m-display); text-align: center; }
.mOutfit small { display: inline-flex; align-items: center; gap: 2px; font: 700 10.5px/1 var(--m-text); color: var(--m-ink2); }
.mOutfit small .mi { width: 10px; height: 10px; }
.mOutfit.on { background: linear-gradient(#c8eadc, var(--m-mint)); box-shadow: inset 0 -3px 0 var(--m-mintD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mOutfit.locked canvas { opacity: .35; filter: grayscale(1); }
.mOutfit:active:not(.locked) { transform: translateY(2px); }

@media (min-aspect-ratio: 5/4) and (min-width: 700px) {
  .mSheet.home { width: min(800px, calc((100vw - 24px) / var(--mz))); }
  .mPane.rooms { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: auto 1fr; gap: 8px 16px; align-items: start; }
  .mPane.rooms .mRoomTabs { grid-column: 1 / -1; }
  .mPane.rooms .mRoomBox { grid-column: 1; max-width: none; }
  .mPane.rooms .mRoomInfo { grid-column: 2; }
  .mPane.rooms .mDots { justify-content: flex-start; }
  .mPane.rooms .mNextPiece { text-align: left; }
  .mPane.rooms .mRoomActs { justify-content: flex-start; }
  .mAlbGrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* ---------- decor: pick one of three ---------- */
.mPick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 2px; }
.mPick > p { grid-column: 1 / -1; }
.mDecor { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 6px 8px; border-radius: 16px; text-align: center;
  background: linear-gradient(#fffbf0, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, var(--m-line), 0 4px 0 2px var(--m-ink); transition: transform .16s cubic-bezier(.3, 1.7, .5, 1), box-shadow .16s; }
.mDecor.sel { box-shadow: inset 0 0 0 3px var(--m-cherry), inset 0 -3px 0 var(--m-cherryD), var(--m-line), 0 4px 0 2px var(--m-ink); transform: translateY(-2px); }
.mDecor.inuse { box-shadow: inset 0 0 0 3px var(--m-mint), inset 0 -3px 0 var(--m-mintD), var(--m-line), 0 4px 0 2px var(--m-ink); }
.mDecorPic { border-radius: 11px; overflow: hidden; aspect-ratio: 3 / 2; background: #e6f6ef; }
.mDecorPic canvas { display: block; width: 100%; }
.mDecor b { font: 800 14px/1.05 var(--m-display); min-height: 2.1em; display: grid; place-items: center; }
.mDecor .price { display: inline-flex; align-items: center; justify-content: center; gap: 2px; font: 800 14px/1 var(--m-display); color: var(--m-goldD); }
.mDecor .price.free { color: var(--m-mintD); }
.mDecor .price .mi { width: 14px; height: 14px; }
.mTabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 2px 2px 6px; scrollbar-width: none; }
.mTab { flex: none; padding: 7px 12px 6px; border-radius: 99px; font: 800 14px/1 var(--m-display) !important; background: var(--m-paper2) !important; box-shadow: var(--m-line), 0 2px 0 2px var(--m-ink); }
.mTab.on { background: linear-gradient(#ef6670, var(--m-cherry)) !important; color: #fff !important; box-shadow: inset 0 -3px 0 var(--m-cherryD), var(--m-line), 0 2px 0 2px var(--m-ink); }

/* ---------- daily ---------- */
.mStreak { display: flex; gap: 12px; align-items: center; padding: 10px 14px; margin: 4px 0 10px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px var(--m-edge); }
#meta .mStreak .mFlame { width: 44px; height: 44px; }
.mStreak b { display: block; font: 800 20px/1.1 var(--m-display); }
.mStreak small { display: block; font: 600 13px/1.3 var(--m-text); color: var(--m-ink2); }
.mCal .month { text-align: center; font: 800 16px/1 var(--m-display); margin: 2px 0 8px; color: var(--m-cherryD); }
.mCal .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mCal .days b { text-align: center; font: 700 12px/1 var(--m-text); color: var(--m-ink2); padding-bottom: 2px; }
.mCal .days i { position: relative; aspect-ratio: 1; border-radius: 11px; display: grid; place-items: center; font-style: normal; background: #fbf0dc; box-shadow: inset 0 -2px 0 rgba(228, 207, 166, .9); }
.mCal .days i span { font: 700 13px/1 var(--m-text); color: var(--m-ink2); }
.mCal .days i.blank { background: none; box-shadow: none; }
.mCal .days i.later { opacity: .5; }
.mCal .days i.done { background: linear-gradient(#ffe6a6, var(--m-gold)); box-shadow: inset 0 -3px 0 var(--m-goldD); }
.mCal .days i.done span { color: #5a3a12; font-weight: 800; }
.mCal .days i.done::after { content: ""; position: absolute; right: -3px; top: -3px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--m-mintDD) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%; }
.mCal .days i.grace { background: #fff1c9; box-shadow: inset 0 0 0 2px #ffd77a; }
.mCal .days i.grace::after { content: "♥"; position: absolute; right: -2px; top: -5px; font: 700 12px/1 var(--m-text); color: var(--m-cherry); }
.mCal .days i.today { box-shadow: inset 0 0 0 3px var(--m-cherry); }
.mCal .days i.today.done { box-shadow: inset 0 0 0 3px var(--m-cherry), inset 0 -3px 0 var(--m-goldD); }

/* ---------- shop ---------- */
.mPacks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.mPack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 6px 8px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px var(--m-edge), var(--m-line), 0 4px 0 2px var(--m-ink); }
.mPack .heap { display: flex; font-size: 20px; height: 26px; align-items: center; }
.mPack .heap .mCoin { margin-right: -6px; }
.mPack b { font: 800 22px/1 var(--m-display); margin-top: 4px; }
.mPack small { font: 600 12px/1 var(--m-text); color: var(--m-ink2); }
.mRibbon { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px 3px; border-radius: 8px; font: 800 11px/1 var(--m-display);
  letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--m-sky); box-shadow: inset 0 -3px 0 var(--m-skyD), var(--m-line), 0 2px 0 2px var(--m-ink); }
.mRibbon.best { background: var(--m-cherry); box-shadow: inset 0 -3px 0 var(--m-cherryD), var(--m-line), 0 2px 0 2px var(--m-ink); }
.mBuy { margin-top: 6px; width: 100%; padding: 7px 4px 6px; border-radius: 12px; font: 800 15px/1 var(--m-display) !important; background: var(--m-paper2) !important; box-shadow: var(--m-line), 0 2px 0 2px var(--m-ink); }
.mBuy em { display: block; font: 600 10.5px/1.2 var(--m-text); font-style: normal; color: var(--m-ink2); }
.mList { display: flex; flex-direction: column; gap: 6px; }
.mRow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px #eadcc0; text-align: left; width: 100%; }
.mRow > .mi { width: 26px; height: 26px; color: var(--m-cherry); }
.mRow span { flex: 1; min-width: 0; }
.mRow b { display: block; font: 800 16px/1.15 var(--m-display); }
.mRow small { display: block; font: 600 12.5px/1.25 var(--m-text); color: var(--m-ink2); }
.mRow em { font-style: normal; font: 800 13.5px/1 var(--m-display); color: var(--m-goldD); white-space: nowrap; display: inline-flex; align-items: center; }
.mRow em .mi { width: 18px; height: 18px; color: var(--m-ink2); }
button.mRow:disabled { opacity: .78; }
button.mRow:disabled em { color: var(--m-ink2); }

@media (max-height: 700px) { .mTitle { font-size: 23px; } .mBtn { min-height: 52px; font-size: 19px; } .mBody { padding-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .mSheet, .mOverlay, .mToast { animation: none !important; transition: none !important; } }

/* ---------- the share card (where the browser has no system share sheet: Firefox on a computer) ---------- */
.mShare { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mShareImg { width: min(112px, 30vw); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; transform: rotate(-2deg);
  box-shadow: 0 0 0 5px #fff, 0 6px 16px rgba(60, 40, 30, .25); }
.mShareGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 4px; width: 100%; }
@media (max-width: 520px) { .mShareGrid { grid-template-columns: repeat(3, 1fr); } }
.mShareT { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: var(--m-ink);
  font: 700 13px/1.1 var(--m-text); padding: 6px 2px; border-radius: 14px; transition: transform .12s, background .12s; }
.mShareT:hover { background: var(--m-paper2); }
.mShareT:active { transform: scale(.95); }
.mShareT:focus-visible, .mShareCopy:focus-visible { outline: 3px solid var(--m-sky); outline-offset: 2px; }
.mShareT i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .15); }
.mShareT svg { width: 26px; height: 26px; }
.mShareLink { display: flex; gap: 8px; width: 100%; }
.mShareLink input { flex: 1; min-width: 0; border: 1.5px solid var(--m-edge); border-radius: 12px; padding: 9px 11px; background: #fff;
  color: var(--m-ink2); font: 600 13px var(--m-text); }
.mShareCopy { flex: none; border: 0; border-radius: 12px; padding: 0 14px; background: var(--m-cherry); color: #fff; cursor: pointer;
  font: 800 14px var(--m-display); box-shadow: inset 0 -3px 0 var(--m-cherryD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mShareCopy:active { transform: translateY(2px); box-shadow: inset 0 -3px 0 var(--m-cherryD), var(--m-line), 0 1px 0 2px var(--m-ink); }

/* ---------- the menu's list (Mendery's rows: how to play, invite, install, privacy, terms, contact) ---------- */
.mList { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.mItem { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 12px 6px 8px; border-radius: 14px; text-align: left;
  background: #fff; box-shadow: inset 0 0 0 2px #eadcc0, var(--m-line), 0 3px 0 2px var(--m-ink); font: 700 15.5px/1.15 var(--m-text); color: var(--m-ink); cursor: pointer; }
.mItem:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #eadcc0, var(--m-line), 0 1px 0 2px var(--m-ink); }
.mItem:focus-visible { outline: 3px solid var(--m-sky); outline-offset: 2px; }
.mItem .ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--m-paper2); color: var(--m-cherry); }
.mItem .ic .mi { width: 19px; height: 19px; }
.mItem .lb { flex: 1; min-width: 0; }
.mItem b { font: 800 16px/1 var(--m-display); color: var(--m-cherryD); }

/* How to play */
.howList { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 6px; }
.howRow { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.howIc { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--m-edge); color: var(--m-cherry); }
.howIc svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.howRow b { display: block; font: 800 16.5px/1.1 var(--m-display); margin-top: 2px; }
.howRow p { margin: 2px 0 0; font: 600 13.5px/1.3 var(--m-text); color: var(--m-ink2); }

/* Install the app: the steps by hand (iOS Safari's Share → Add to Home Screen, or the browser's menu) */
.instSteps { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.instSteps li { display: flex; gap: 10px; align-items: flex-start; font: 600 14.5px/1.35 var(--m-text); }
.instSteps i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 15px/1 var(--m-display); font-style: normal; color: #fff;
  background: var(--m-sky); box-shadow: inset 0 -3px 0 var(--m-skyD), var(--m-line), 0 2px 0 2px var(--m-ink); }
.instSteps b { color: var(--m-cherryD); }
.instSteps .inl { width: 1.25em; height: 1.25em; vertical-align: -.25em; fill: none; stroke: var(--m-skyD); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }