/* Tinkavo's meta layer: cards, the garage, daily, shop, boosters, toasts, the mode bar. The game's look: a kid-inventor's
   cardboard workshop in a sunny backyard; cards are cardboard sheets held by two strips of masking tape, a little
   rotated, the corrugation on their edge; marker-ink text; the main action a lime sticker, the rest cardboard tabs;
   Luckiest Guy + Signika. 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-kraft: #d4a373; --m-kraftL: #e9c79a; --m-kraftLL: #f0d6ae; --m-shade: #a8743f; --m-deep: #7a5230;
  --m-tape: #f4e7c5; --m-ink: #2b2730; --m-ink2: #5b5360; --m-cap: #fbfbf7;
  --m-lime: #a6e22e; --m-limeL: #c4f160; --m-limeD: #6f9e12; --m-gold: #ffd23f; --m-goldD: #d9a91a; --m-sky: #8fd0f7; --m-skyD: #3d93c8; --m-red: #e8463a; --m-redD: #b52e25;
  --m-display: "Luckiest Guy", "Arial Black", Impact, system-ui, sans-serif;
  --m-text: "Signika", "Segoe UI", system-ui, sans-serif;
  --m-shadow: 0 8px 18px rgba(43, 39, 48, .2);
  --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.4; 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: a cardboard sheet, two strips of tape ---------- */
.mOverlay { position: fixed; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  padding: calc(60px + var(--m-top)) 14px calc(14px + var(--m-bottom)); background: rgba(43, 39, 48, .44); 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 - 28px) / var(--mz)));
  max-height: calc((100dvh - 78px - var(--m-top) - var(--m-bottom)) / var(--mz)); display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 50% 100%, transparent 3px, rgba(122, 82, 48, .45) 3.5px 4.5px, transparent 5px) left bottom / 10px 7px repeat-x,
    repeating-linear-gradient(90deg, rgba(122, 82, 48, .045) 0 2px, transparent 2px 10px),
    linear-gradient(#f5e0bd, var(--m-kraftLL) 60%, #ebcd9f);
  border-radius: 10px 14px 9px 13px / 13px 9px 14px 10px; transform: rotate(-1deg);
  box-shadow: 0 0 0 2.5px var(--m-ink), 0 7px 0 2.5px var(--m-shade), 0 7px 0 5px var(--m-ink), 0 24px 60px rgba(43, 39, 48, .38); animation: mRise .45s cubic-bezier(.25, 1.5, .45, 1); }
@supports not (height: 100dvh) { .mSheet { max-height: calc((100vh - 78px) / var(--mz)); } }
.mSheet.wide { width: min(560px, calc((100vw - 28px) / var(--mz))); }
.mSheet.tall { width: min(600px, calc((100vw - 28px) / var(--mz))); }
.mOverlay.out .mSheet { animation: none; }
.mSheet::before, .mSheet::after { content: ""; position: absolute; top: -13px; width: 92px; height: 26px; z-index: 3; pointer-events: none;
  background: rgba(244, 231, 197, .93); box-shadow: 0 1px 2px rgba(43, 39, 48, .18);
  clip-path: polygon(0 10%, 4% 0, 8% 12%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 12%, 100% 88%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 88%, 4% 100%, 0 90%); }
.mSheet::before { left: 14px; transform: rotate(-8deg); }
.mSheet::after { right: 64px; transform: rotate(6deg); }
.mSheet .mBody { padding-top: 24px; }
@keyframes mRise { from { transform: translateY(50px) rotate(-4deg) 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 34px; }
.mBadge { display: inline-block; font: 400 15px/1 var(--m-display); color: var(--m-ink); padding: 8px 16px 5px; letter-spacing: .04em; transform: rotate(-2deg);
  background: rgba(244, 231, 197, .97); box-shadow: 0 2px 3px rgba(43, 39, 48, .2);
  clip-path: polygon(0 10%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 10%, 100% 90%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 90%); }
.mBadge.lime, .mBadge.gold, .mBadge.sky, .mBadge.red { clip-path: none; border-radius: 99px; box-shadow: var(--m-line), 0 3px 0 2px var(--m-ink); }
.mBadge.lime { background: linear-gradient(var(--m-limeL), var(--m-lime)); box-shadow: inset 0 -3px 0 var(--m-limeD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mBadge.gold { background: linear-gradient(#ffe37a, var(--m-gold)); box-shadow: inset 0 -3px 0 var(--m-goldD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mBadge.sky { background: linear-gradient(#c6e9ff, var(--m-sky)); box-shadow: inset 0 -3px 0 var(--m-skyD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mBadge.red { color: #fff; background: linear-gradient(#f2675d, var(--m-red)); box-shadow: inset 0 -3px 0 var(--m-redD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mTitle { font: 400 27px/1.08 var(--m-display); letter-spacing: .02em; margin: 12px 0 2px; }
.mSub { margin: 2px 0 10px; font: 500 14.5px/1.35 var(--m-text); color: var(--m-ink2); }
.mX { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 9px 11px 8px 10px; display: grid; place-items: center; color: var(--m-ink);
  background: linear-gradient(var(--m-cap), #f2e6cc); box-shadow: var(--m-line), 0 3px 0 2px var(--m-deep); z-index: 4; }
.mX .mi { width: 20px; height: 20px; }
.mX:active { transform: translateY(2px); box-shadow: var(--m-line), 0 1px 0 2px var(--m-deep); }
.mFoot { flex: none; display: flex; gap: 10px; padding: 12px 18px 20px; border-top: 2px dashed rgba(122, 82, 48, .35); }
.mBtn { flex: 1; min-height: 56px; border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 14px 0;
  font: 400 22px/1 var(--m-display); letter-spacing: .03em; color: var(--m-ink) !important; background: linear-gradient(var(--m-limeL), var(--m-lime) 55%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), var(--m-line), 0 5px 0 2px var(--m-limeD), 0 5px 0 4.5px 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; margin-top: -3px; }
.mBtn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), var(--m-line), 0 1px 0 2px var(--m-limeD), 0 1px 0 4.5px var(--m-ink); }
.mBtn.ghost { flex: .8; border-radius: 10px 12px 9px 11px; padding-top: 0; font: 700 18px/1 var(--m-text); letter-spacing: 0; background: linear-gradient(var(--m-cap), #f5ead2); box-shadow: var(--m-line), 0 4px 0 2px var(--m-deep), var(--m-shadow); }
.mBtn.ghost .mi { margin-top: 0; }
.mBtn.ghost:active:not(:disabled) { box-shadow: var(--m-line), 0 1px 0 2px var(--m-deep); }
.mBtn.lime { background: linear-gradient(var(--m-limeL), var(--m-lime) 55%); }
.mBtn.gold { background: linear-gradient(#ffe37a, var(--m-gold)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), var(--m-line), 0 5px 0 2px var(--m-goldD), 0 5px 0 4.5px var(--m-ink), var(--m-shadow); }
.mBtn:disabled { filter: saturate(.25) brightness(1.04); opacity: .65; }
.mBtn:focus-visible, .mTile:focus-visible, .mChip:focus-visible { outline: 3px solid var(--m-skyD); outline-offset: 2px; }
.mLead { text-align: center; font: 500 16px/1.4 var(--m-text); margin: 6px 4px 4px; }
.mFine { font: 500 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-ink); }
.center { text-align: center; }
.mH3 { font: 400 18px/1 var(--m-display); letter-spacing: .03em; margin: 16px 2px 8px; }
.mBalance { display: flex; align-items: center; justify-content: center; gap: 4px; font: 400 32px/1 var(--m-display); color: var(--m-ink); margin: 8px 0; }
.mBalance small { font: 600 14px/1 var(--m-text); color: var(--m-ink2); margin-left: 4px; }
.mCheck { display: flex; gap: 10px; align-items: center; justify-content: center; font: 500 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-limeD); }
.mLink { color: var(--m-ink) !important; font-weight: 700 !important; text-decoration: underline; text-decoration-color: var(--m-limeD); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.mProse { font: 500 15px/1.5 var(--m-text); padding: 0 2px; }
.mProse h3 { font: 400 18px/1.2 var(--m-display); letter-spacing: .02em; margin: 14px 0 2px; color: var(--m-ink); }
.mProse p { margin: 6px 0; }
.mProse a { color: var(--m-ink); font-weight: 700; text-decoration-color: var(--m-limeD); text-decoration-thickness: 2px; }

/* ---------- toasts: a strip of tape, one at a time, in the band under the top HUD ---------- */
.mToast { position: fixed; left: 50%; top: var(--meta-toast-top, calc(var(--m-top) + 132px)); transform: translate(-50%, -10px) rotate(-1deg) scale(.94); opacity: 0;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(92vw, 520px); padding: 8px 18px 8px 9px; zoom: var(--mz);
  background: rgba(244, 231, 197, .98); box-shadow: 0 3px 6px rgba(43, 39, 48, .22); font: 600 15px/1.25 var(--m-text);
  clip-path: polygon(0 8%, 2% 0, 4% 8%, 6% 0, 94% 0, 96% 8%, 98% 0, 100% 8%, 100% 92%, 98% 100%, 96% 92%, 94% 100%, 6% 100%, 4% 92%, 2% 100%, 0 92%);
  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) rotate(-1deg) scale(1); }
.mToast.top { top: calc(env(safe-area-inset-top, 0px) + 4px); } /* over an open card: above its top tape */
.mToastIcon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--m-lime); 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.red .mToastIcon { background: var(--m-red); color: #fff; }
.mToast.sky .mToastIcon { background: var(--m-sky); }

/* ---------- bolts that fly ---------- */
.mCoinFx { position: fixed; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; 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='M12 2.6l8.2 4.7v9.4L12 21.4l-8.2-4.7V7.3z' fill='%23ffd23f' stroke='%232b2730' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3.6' fill='%23d4a373' stroke='%232b2730' stroke-width='1.6'/%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) + 108px)); zoom: var(--mz);
  display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 10px; pointer-events: auto; white-space: nowrap;
  background: rgba(255, 252, 243, .97); box-shadow: var(--m-line), 0 3px 0 2px var(--m-ink), var(--m-shadow); z-index: 25; font: 700 15px/1 var(--m-text); }
.mModeBar b { display: flex; align-items: center; gap: 6px; color: var(--m-ink); font-weight: 700; }
.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: 700 14px/1 var(--m-text) !important;
  background: linear-gradient(var(--m-limeL), var(--m-lime)) !important; box-shadow: inset 0 -3px 0 var(--m-limeD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mBack .mi { width: 16px; height: 16px; }

/* ---------- booster chips (the game places them): cardboard tabs ---------- */
.mBoost { pointer-events: auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 70px; height: 58px; padding: 4px 8px;
  border-radius: 9px 12px 10px 11px; background: linear-gradient(#f0d6ae, #e2b682); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--m-line), 0 4px 0 2px var(--m-deep), var(--m-shadow); color: var(--m-ink);
  font: 700 12px/1 var(--m-text); transition: transform .16s cubic-bezier(.3, 1.7, .5, 1); }
.mBoost .mi { width: 22px; height: 22px; color: var(--m-ink); }
.mBoost .pr { display: inline-flex; align-items: center; gap: 1px; font: 700 12px/1 var(--m-text); color: var(--m-ink); }
.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;
  border-radius: 9px 12px 10px 11px; background: linear-gradient(var(--m-cap), #f6ecd8); box-shadow: var(--m-line), 0 4px 0 2px var(--m-deep); min-height: 62px; }
.mTile .ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--m-kraftL); box-shadow: inset 0 0 0 2px var(--m-ink); color: var(--m-ink); font-size: 22px; }
.mTile .ic .mi { width: 22px; height: 22px; }
.mTile .ic .mCoin { margin: 0; width: 22px; height: 22px; }
.mTile b { font: 400 18px/1.05 var(--m-display); letter-spacing: .02em; padding-top: 2px; }
.mTile small { font: 500 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 var(--m-ink); }
.mTile:active { transform: translateY(3px); box-shadow: var(--m-line), 0 1px 0 2px var(--m-deep); }
.mRows { margin: 2px 0 6px; }
.mSwitch { display: flex; align-items: center; gap: 12px; font: 600 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: var(--m-tape); position: relative; transition: background .2s; box-shadow: inset 0 0 0 2px var(--m-ink); }
.mSwitch .sl::after { content: ""; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--m-cap); box-shadow: 0 0 0 2px var(--m-ink); transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); }
.mSwitch input:checked + .sl { background: var(--m-lime); }
.mSwitch input:checked + .sl::after { transform: translateX(20px); }
.mSwitch .lab small { display: block; font: 500 12px/1.2 var(--m-text); color: var(--m-ink2); margin-top: 2px; }
.mVersion { text-align: center; font: 500 12px/1.4 var(--m-text); color: var(--m-ink2); margin: 2px 0; }
.mVersion a { color: var(--m-ink); font-weight: 700; }

/* ---------- the garage: a garage wall (kraft boards, a pegboard for the parts), robots on a plank shelf, the trophy
   wall of cardboard medals, my doodles. Phone: one column, scrolling inside the card; wide: two columns side by side. */
.mRoomCanvas { display: block; width: 100%; border-radius: 6px; }
.mH3 small { font: 600 12.5px/1 var(--m-text); color: var(--m-ink2); margin-left: 4px; letter-spacing: 0; }
.mGarage { display: grid; gap: 12px; padding-bottom: 4px; }
.mGCol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 900px) {
  .mSheet.garage { width: min(1000px, calc((100vw - 28px) / var(--mz))); }
  .mGarage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
}
.mGSec { position: relative; padding: 2px 10px 12px; border-radius: 8px 11px 7px 10px; min-width: 0;
  background: repeating-linear-gradient(90deg, rgba(122, 82, 48, .05) 0 2px, transparent 2px 12px), linear-gradient(#f3dcb6, #e9c79a);
  box-shadow: var(--m-line), 0 3px 0 2px var(--m-deep); }
.mGSec .mH3 { margin: 12px 2px 8px; }
.mGSec .mFine { margin: 8px 2px 0; font-size: 12.5px; }
.mPeg { background: radial-gradient(circle, rgba(122, 82, 48, .34) 1.7px, transparent 2.3px) 4px 4px / 16px 16px, #e9c79a; }
.mEmpty { margin: 0; padding: 12px 10px; text-align: center; font: 500 13.5px/1.4 var(--m-text); color: var(--m-ink2); border: 2px dashed rgba(122, 82, 48, .45); border-radius: 8px; background: rgba(255, 252, 243, .45); }

/* the racer on its stage, the robots on a plank shelf */
.mStage { display: flex; align-items: center; gap: 12px; padding: 2px 4px 0; }
.mStageBot { width: 140px; flex: none; }
.mBot { display: block; width: 100%; height: auto; }
.mStageTxt { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mStageTxt b { font: 400 25px/1.05 var(--m-display); letter-spacing: .02em; }
.mStageTxt small { font: 500 13.5px/1.3 var(--m-text); color: var(--m-ink2); }
.mStageTxt .mBalance { font-size: 24px; margin: 4px 0 0; justify-content: flex-start; }
.mStageTxt .mBalance small { font-size: 13px; }
.mTag { display: inline-block; font: 400 13px/1 var(--m-display); letter-spacing: .04em; padding: 6px 10px 3px; border-radius: 99px; transform: rotate(-3deg);
  background: linear-gradient(var(--m-limeL), var(--m-lime)); box-shadow: inset 0 -2px 0 var(--m-limeD), var(--m-line); }
.mShelfRow { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px 10px 16px; margin: 4px -4px 0; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  background: linear-gradient(to top, transparent 0 2px, var(--m-ink) 2px 4px, var(--m-shade) 4px 9px, var(--m-kraft) 9px 14px, var(--m-ink) 14px 16px, transparent 16px) left bottom / 100% 100% no-repeat; }
.mRobot { flex: none; width: 82px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; padding: 4px 2px 4px; border-radius: 9px 11px 8px 10px; position: relative; transition: transform .16s cubic-bezier(.3, 1.7, .5, 1); }
.mRobot .pic { width: 72px; height: 72px; display: grid; place-items: center; }
.mRobot canvas { width: 72px; height: 72px; }
.mRobot b { font: 700 12px/1.1 var(--m-text); text-align: center; min-height: 2.2em; display: flex; align-items: center; }
.mRobot:not(.locked):active { transform: translateY(2px) scale(.97); }
.mRobot.on { background: rgba(166, 226, 46, .38); box-shadow: 0 0 0 2.5px var(--m-limeD); }
.mRobot.locked .pic { width: 58px; height: 58px; margin: 7px; border: 2px dashed rgba(43, 39, 48, .45); border-radius: 10px; color: rgba(43, 39, 48, .55); }
.mRobot.locked .pic .mi { width: 24px; height: 24px; }
.mRobot.locked b { color: var(--m-ink2); }
.mRobot.fresh { animation: mPop .6s cubic-bezier(.25, 1.6, .45, 1) both .2s; }
.mRobot.fresh::before { content: "NEW!"; position: absolute; top: -2px; left: 50%; transform: translateX(-50%) rotate(-6deg); z-index: 1; font: 400 12px/1 var(--m-display); padding: 4px 8px 2px; background: rgba(244, 231, 197, .97); box-shadow: 0 1px 2px rgba(43, 39, 48, .25); }
@keyframes mPop { from { transform: scale(.4); opacity: 0; } }

/* paints and hats: little cardboard chips */
.mSwatches, .mHats { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.mHats { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.mSwatch, .mHat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 3px 6px; min-width: 0; border-radius: 8px 10px 7px 9px;
  background: var(--m-cap); box-shadow: var(--m-line), 0 3px 0 2px var(--m-deep); transition: transform .14s; }
.mSwatch:active, .mHat:active { transform: translateY(2px); box-shadow: var(--m-line), 0 1px 0 2px var(--m-deep); }
.mSwatch i { width: 38px; height: 28px; border-radius: 6px 9px 5px 8px; background: var(--c); box-shadow: inset 0 -4px 0 rgba(43, 39, 48, .18), var(--m-line); }
.mHat .pic { width: 64px; height: 64px; display: grid; place-items: center; }
.mHat .pic canvas { width: 64px; height: 64px; }
.mHat .pic.none { display: grid; place-items: center; color: rgba(43, 39, 48, .45); }
.mHat .pic.none .mi { width: 26px; height: 26px; }
.mSwatch b, .mHat b { font: 700 12.5px/1.1 var(--m-text); text-align: center; }
.mSwatch small, .mHat small { font: 700 12px/1 var(--m-text); color: var(--m-ink2); display: inline-flex; align-items: center; }
.mSwatch.own small, .mHat.own small { color: var(--m-limeD); }
.mSwatch.on, .mHat.on { background: linear-gradient(#e6fbb8, #cdf27a); box-shadow: 0 0 0 2.5px var(--m-ink), 0 3px 0 2px var(--m-limeD); }
.mSwatch.on small, .mHat.on small { color: var(--m-ink); }

/* parts on the pegboard: each hangs from a peg */
.mParts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 8px; padding-top: 6px; }
.mPart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 8px 10px 7px 9px; background: var(--m-cap); box-shadow: var(--m-line), 0 3px 0 2px var(--m-deep); min-width: 0; text-align: center; }
.mPart::before { content: ""; position: absolute; top: -9px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #5b5360; box-shadow: 0 0 0 2px #9aa3ad; }
.mPart canvas { width: 56px; height: 56px; }
.mPart b { font: 400 15px/1.1 var(--m-display); letter-spacing: .02em; }
.mPart small { font: 500 11px/1.25 var(--m-text); color: var(--m-ink2); display: inline-flex; align-items: center; gap: 2px; justify-content: center; }
.mPart small .mi { width: 11px; height: 11px; }
.mPart.locked { background: rgba(255, 252, 243, .5); box-shadow: 0 0 0 2px rgba(43, 39, 48, .4); }
.mPart.locked b { color: var(--m-ink2); }
.mPart.locked small { font-weight: 700; color: var(--m-ink); }

/* the trophy wall: cardboard medals taped up */
.mMedals { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.mMedal { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; min-width: 0; }
.mMedal canvas { width: 62px; height: 68px; }
.mMedal b { font: 400 14px/1.1 var(--m-display); letter-spacing: .02em; }
.mMedal small { font: 600 11.5px/1.2 var(--m-text); color: var(--m-ink2); }

/* my doodles: straw drawings on white cards */
.mDoodleRow { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.mDoodle { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 3px 6px; border-radius: 8px 10px 7px 9px; background: var(--m-cap); box-shadow: var(--m-line), 0 3px 0 2px var(--m-deep); min-width: 0; }
.mDoodle canvas { width: 60px; height: 60px; }
.mDoodle small { font: 700 11.5px/1.1 var(--m-text); color: var(--m-ink2); text-align: center; }
.mDoodle.on { background: linear-gradient(#e6fbb8, #cdf27a); box-shadow: 0 0 0 2.5px var(--m-ink), 0 3px 0 2px var(--m-limeD); }
.mDoodle.on small { color: var(--m-ink); }
@media (prefers-reduced-motion: reduce) { .mRobot.fresh { animation: none; } }

/* ---------- daily ---------- */
.mStreak { display: flex; gap: 12px; align-items: center; padding: 10px 14px; margin: 4px 0 10px; border-radius: 8px; background: var(--m-cap); box-shadow: var(--m-line); }
#meta .mStreak .mFlame { width: 44px; height: 44px; }
.mStreak b { display: block; font: 400 21px/1.1 var(--m-display); letter-spacing: .02em; }
.mStreak small { display: block; font: 500 13px/1.3 var(--m-text); color: var(--m-ink2); }
.mCal .month { text-align: center; font: 400 17px/1 var(--m-display); letter-spacing: .03em; margin: 2px 0 8px; color: var(--m-ink); }
.mCal .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mCal .days b { text-align: center; font: 600 12px/1 var(--m-text); color: var(--m-ink2); padding-bottom: 2px; }
.mCal .days i { position: relative; aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-style: normal; background: rgba(255, 252, 243, .75); box-shadow: inset 0 -2px 0 rgba(122, 82, 48, .25); }
.mCal .days i span { font: 600 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(var(--m-limeL), var(--m-lime)); box-shadow: inset 0 -3px 0 var(--m-limeD); }
.mCal .days i.done span { color: var(--m-ink); font-weight: 700; }
.mCal .days i.done::after { content: ""; position: absolute; right: -3px; top: -3px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--m-ink) 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: var(--m-tape); box-shadow: inset 0 0 0 2px var(--m-gold); }
.mCal .days i.grace::after { content: "♥"; position: absolute; right: -2px; top: -5px; font: 700 12px/1 var(--m-text); color: var(--m-red); }
.mCal .days i.today { box-shadow: inset 0 0 0 3px var(--m-ink); }
.mCal .days i.today.done { box-shadow: inset 0 0 0 3px var(--m-ink), inset 0 -3px 0 var(--m-limeD); }

/* ---------- 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: 8px 10px 7px 9px; background: var(--m-cap); box-shadow: var(--m-line), 0 4px 0 2px var(--m-deep); }
.mPack .heap { display: flex; font-size: 20px; height: 26px; align-items: center; }
.mPack .heap .mCoin { margin-right: -6px; }
.mPack b { font: 400 24px/1 var(--m-display); margin-top: 4px; }
.mPack small { font: 500 12px/1 var(--m-text); color: var(--m-ink2); }
.mRibbon { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; padding: 4px 8px 3px; font: 700 11px/1 var(--m-text);
  letter-spacing: .04em; text-transform: uppercase; color: var(--m-ink); background: var(--m-tape); box-shadow: 0 1px 2px rgba(43, 39, 48, .25); }
.mRibbon.best { background: var(--m-gold); }
.mBuy { margin-top: 6px; width: 100%; padding: 7px 4px 6px; border-radius: 8px; font: 700 15px/1 var(--m-text) !important; background: var(--m-kraftL) !important; box-shadow: var(--m-line), 0 2px 0 2px var(--m-deep); }
.mBuy em { display: block; font: 500 10.5px/1.2 var(--m-text); font-style: normal; color: var(--m-ink2); }
.mRow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--m-cap); box-shadow: inset 0 0 0 2px rgba(43, 39, 48, .25); text-align: left; width: 100%; }
.mRow > .mi { width: 26px; height: 26px; color: var(--m-ink); }
.mRow span { flex: 1; min-width: 0; }
.mRow b { display: block; font: 700 16px/1.15 var(--m-text); }
.mRow small { display: block; font: 500 12.5px/1.25 var(--m-text); color: var(--m-ink2); }
.mRow em { font-style: normal; font: 700 13.5px/1 var(--m-text); color: var(--m-ink); 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: 24px; } .mBtn { min-height: 52px; font-size: 20px; } .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: 3px; transform: rotate(-2deg);
  box-shadow: 0 0 0 5px var(--m-cap), 0 0 0 7px var(--m-ink), 0 6px 16px rgba(43, 39, 48, .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: 600 13px/1.1 var(--m-text); padding: 6px 2px; border-radius: 8px; transition: transform .12s, background .12s; }
.mShareT:hover { background: rgba(255, 252, 243, .7); }
.mShareT:active { transform: scale(.95); }
.mShareT:focus-visible, .mShareCopy:focus-visible { outline: 3px solid var(--m-skyD); outline-offset: 2px; }
.mShareT i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--m-ink), 0 3px 0 2px var(--m-ink); }
.mShareT svg { width: 26px; height: 26px; }
.mShareLink { display: flex; gap: 8px; width: 100%; }
.mShareLink input { flex: 1; min-width: 0; border: 2px solid var(--m-ink); border-radius: 8px; padding: 9px 11px; background: var(--m-cap);
  color: var(--m-ink2); font: 500 13px var(--m-text); }
.mShareCopy { flex: none; border: 0; border-radius: 99px; padding: 0 14px; background: var(--m-lime); color: var(--m-ink); cursor: pointer;
  font: 700 14px var(--m-text); box-shadow: inset 0 -3px 0 var(--m-limeD), var(--m-line), 0 3px 0 2px var(--m-ink); }
.mShareCopy:active { transform: translateY(2px); box-shadow: inset 0 -3px 0 var(--m-limeD), 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: 8px 10px 7px 9px; text-align: left;
  background: var(--m-cap); box-shadow: var(--m-line), 0 3px 0 2px var(--m-deep); font: 600 15.5px/1.15 var(--m-text); color: var(--m-ink); cursor: pointer; }
.mItem:active { transform: translateY(2px); box-shadow: var(--m-line), 0 1px 0 2px var(--m-deep); }
.mItem:focus-visible { outline: 3px solid var(--m-skyD); outline-offset: 2px; }
.mItem .ic { flex: none; width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; background: var(--m-kraftL); color: var(--m-ink); box-shadow: inset 0 0 0 1.5px var(--m-ink); }
.mItem .ic .mi { width: 19px; height: 19px; }
.mItem .lb { flex: 1; min-width: 0; }
.mItem b { font: 700 16px/1 var(--m-text); color: var(--m-ink); }

/* 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: 8px; display: grid; place-items: center; background: var(--m-cap); box-shadow: var(--m-line), 0 3px 0 2px var(--m-deep); color: var(--m-ink); }
.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: 400 17px/1.1 var(--m-display); letter-spacing: .02em; margin-top: 3px; }
.howRow p { margin: 2px 0 0; font: 500 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: 500 14.5px/1.35 var(--m-text); }
.instSteps i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--m-display); font-style: normal; color: var(--m-ink); padding-top: 2px;
  background: var(--m-lime); box-shadow: inset 0 -3px 0 var(--m-limeD), var(--m-line), 0 2px 0 2px var(--m-ink); }
.instSteps b { color: var(--m-ink); }
.instSteps .inl { width: 1.25em; height: 1.25em; vertical-align: -.25em; fill: none; stroke: var(--m-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: inline-block; }