/* Ordiva's meta layer: cards, home, daily, shop, boosters, toasts, the mode bar. The game's look: apricot plaster,
   honey oak, sage, dusty sky and berry; Baloo 2 + Quicksand; chunky buttons with a darker 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; ×1 on phones, ×1.3 on wide screens. */
#meta, .mBoost, .mIn {
  --m-paper: #fff8ef; --m-paper2: #fdeedd; --m-edge: #ecd2b6; --m-ink: #4b2a3a; --m-ink2: #86617a;
  --m-berry: #c8487a; --m-berryD: #973158; --m-sage: #8fbb9b; --m-sageD: #5d9270; --m-sky: #8fbbe0; --m-skyD: #5b8cbf;
  --m-gold: #f6c34f; --m-goldD: #cf8f22; --m-red: #e0574f; --m-redD: #b23a35; --m-honey: #e3a556;
  --m-display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --m-text: "Quicksand", "Segoe UI", system-ui, sans-serif;
  --m-shadow: 0 8px 22px rgba(110, 50, 40, .18);
  --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.05em; height: 1.05em; border-radius: 50%; vertical-align: -.16em; margin-right: .2em; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6cf, var(--m-gold) 46%, var(--m-goldD)); box-shadow: 0 0 0 1.5px #c58720 inset; }
: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(75, 34, 52, .4); 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(#fffaf3, #fff3e4); border-radius: 28px; overflow: hidden;
  box-shadow: inset 0 2px 0 #fff, 0 8px 0 var(--m-edge), 0 24px 60px rgba(70, 25, 40, .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; }
@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: #fff; padding: 7px 16px 5px; border-radius: 99px; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(#a6cfb0, var(--m-sage)); box-shadow: 0 3px 0 var(--m-sageD); }
.mBadge.berry { background: linear-gradient(#d95f8d, var(--m-berry)); box-shadow: 0 3px 0 var(--m-berryD); }
.mBadge.gold { background: linear-gradient(#f9d777, var(--m-gold)); box-shadow: 0 3px 0 var(--m-goldD); color: #6b4310; }
.mBadge.sky { background: linear-gradient(#a9cdec, var(--m-sky)); box-shadow: 0 3px 0 var(--m-skyD); }
.mBadge.red { background: linear-gradient(#ec7b70, var(--m-red)); box-shadow: 0 3px 0 var(--m-redD); }
.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(#fffdf9, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--m-edge); z-index: 2; }
.mX .mi { width: 20px; height: 20px; }
.mX:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 var(--m-edge); }
.mFoot { flex: none; display: flex; gap: 10px; padding: 10px 18px 18px; border-top: 1px solid rgba(236, 210, 182, .55); background: linear-gradient(rgba(255, 243, 228, 0), #fff3e4 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(#d95f8d, var(--m-berry));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 5px 0 var(--m-berryD), 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), 0 1px 0 var(--m-berryD); }
.mBtn.ghost { flex: .8; color: var(--m-ink) !important; background: linear-gradient(#fffdf9, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, 0 5px 0 var(--m-edge), var(--m-shadow); }
.mBtn.sage { background: linear-gradient(#a6cfb0, var(--m-sage)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 5px 0 var(--m-sageD), var(--m-shadow); }
.mBtn.gold { color: #6b4310 !important; background: linear-gradient(#f9d777, var(--m-gold)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 var(--m-goldD), 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-berry); }
.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-berry); }
.mLink { color: var(--m-berryD) !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-berryD); }
.mProse p { margin: 6px 0; }
.mProse a { color: var(--m-berryD); 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(236, 210, 182, .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-sage); box-shadow: 0 2px 0 var(--m-sageD); color: #fff; flex: none; }
.mToastIcon .mi { width: 17px; height: 17px; }
.mToast.gold .mToastIcon { background: var(--m-gold); box-shadow: 0 2px 0 var(--m-goldD); }
.mToast.berry .mToastIcon { background: var(--m-berry); box-shadow: 0 2px 0 var(--m-berryD); }

/* ---------- coins that fly ---------- */
.mCoinFx { position: fixed; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; z-index: 70; pointer-events: none; will-change: transform;
  background: radial-gradient(circle at 35% 30%, #fff6cf, var(--m-gold) 46%, var(--m-goldD)); box-shadow: 0 0 0 2px #c58720 inset, 0 4px 8px rgba(120, 60, 20, .35); }

/* ---------- 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: 0 3px 0 var(--m-edge), 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-berryD); 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: #fff !important; font: 800 14px/1 var(--m-display) !important;
  background: linear-gradient(#a6cfb0, var(--m-sage)) !important; box-shadow: 0 3px 0 var(--m-sageD); }
.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(#fffdf9, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--m-edge), 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-berry); }
.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(#fffdf9, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--m-edge); 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-berry); 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, 0 1px 0 var(--m-edge); }
.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: #ead7c6; position: relative; transition: background .2s; box-shadow: inset 0 2px 3px rgba(120, 60, 40, .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-sage); }
.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-berryD) !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-berryD); font-weight: 700; }

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

/* ---------- home ---------- */
.mSheet.home .mHead { padding-bottom: 2px; }
.mSheet.home .mTitle { font-size: 24px; margin-top: 2px; }
.mSheet.home .mBody { padding-top: 14px; }
.mHome { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.mStreet { position: relative; flex: none; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 3px #f1d5b8; }
.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: 0 3px 0 var(--m-edge), 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; }
.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.2 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: 0 2px 0 var(--m-edge); color: var(--m-berryD); }
.mPill.done { background: linear-gradient(#a6cfb0, var(--m-sage)); color: #fff; box-shadow: 0 2px 0 var(--m-sageD); }
.mPill .mi { width: 14px; height: 14px; }
.mRoomBox { flex: none; width: 100%; max-width: max(240px, calc((100dvh / var(--mz) - 360px) * 1.5)); margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 3px #f1d5b8, 0 4px 0 #f1d5b8; background: #f9e3cd; }
.mDots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 2px 0; }
.mDots i { width: 11px; height: 11px; border-radius: 50%; background: #efdcc8; box-shadow: inset 0 1px 2px rgba(120, 60, 40, .2); }
.mDots i.on { background: var(--m-berry); box-shadow: 0 1.5px 0 var(--m-berryD); }
.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(#fffdf9, var(--m-paper2)) !important; box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--m-edge); }
.mChip .mi { width: 18px; height: 18px; color: var(--m-berry); }
.mChip:disabled { opacity: .6; }
.mChip:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 var(--m-edge); }
 
@media (min-aspect-ratio: 5/4) {
  .mSheet.home { width: min(780px, calc((100vw - 24px) / var(--mz))); }
  .mHome { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 8px 16px; }
  .mStreet { grid-column: 1 / -1; }
  .mRoomBox { grid-column: 1; grid-row: 2 / 5; max-width: none; }
  .mRoomHead { grid-column: 2; grid-row: 2; align-self: end; }
  .mDots { grid-column: 2; grid-row: 3; justify-content: flex-start; }
  .mNextPiece { text-align: left; }
  .mRoomActs { grid-column: 2; grid-row: 4; justify-content: flex-start; align-self: start; }
}

/* ---------- 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(#fffdf9, var(--m-paper2)); box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--m-edge); transition: transform .16s cubic-bezier(.3, 1.7, .5, 1), box-shadow .16s; }
.mDecor.sel { box-shadow: inset 0 0 0 3px var(--m-berry), 0 4px 0 var(--m-berryD); transform: translateY(-2px); }
.mDecor.inuse { box-shadow: inset 0 0 0 3px var(--m-sage), 0 4px 0 var(--m-sageD); }
.mDecorPic { border-radius: 11px; overflow: hidden; aspect-ratio: 3 / 2; background: #f9e3cd; }
.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-sageD); }
.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: 0 2px 0 var(--m-edge); }
.mTab.on { background: linear-gradient(#d95f8d, var(--m-berry)) !important; color: #fff !important; box-shadow: 0 2px 0 var(--m-berryD); }

/* ---------- 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-berryD); }
.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: #fbeee0; box-shadow: inset 0 -2px 0 rgba(236, 210, 182, .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(#f9d777, var(--m-gold)); box-shadow: inset 0 -3px 0 var(--m-goldD); }
.mCal .days i.done span { color: #6b4310; 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-sage) 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: #fde3ea; box-shadow: inset 0 0 0 2px #f2a7bf; }
.mCal .days i.grace::after { content: "♥"; position: absolute; right: -2px; top: -5px; font: 700 12px/1 var(--m-text); color: var(--m-berry); }
.mCal .days i.today { box-shadow: inset 0 0 0 3px var(--m-berry); }
.mCal .days i.today.done { box-shadow: inset 0 0 0 3px var(--m-berry), 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), 0 4px 0 var(--m-edge); }
.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: 0 2px 0 var(--m-skyD); }
.mRibbon.best { background: var(--m-berry); box-shadow: 0 2px 0 var(--m-berryD); }
.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: 0 2px 0 var(--m-edge); }
.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 #f4e2cf; text-align: left; width: 100%; }
.mRow > .mi { width: 26px; height: 26px; color: var(--m-berry); }
.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(110, 50, 40, .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-berry); color: #fff; cursor: pointer;
  font: 800 14px var(--m-display); box-shadow: 0 3px 0 var(--m-berryD); }
.mShareCopy:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--m-berryD); }

/* ---------- 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 #f4e2cf, 0 3px 0 var(--m-edge); 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 #f4e2cf, 0 1px 0 var(--m-edge); }
.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-berry); }
.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-berryD); }

/* 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-berry); }
.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: 0 2px 0 var(--m-skyD); }
.instSteps b { color: var(--m-berryD); }
.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; }