/* 月球滾珠 — UI overlay. Cute cartoon: pastel, chunky outlines, bouncy motion. */

:root {
  --mt-ink: #3a2f5c;
  --mt-cream: #fff6e8;
  --mt-wood: #f2c48d;
  --mt-wood-dark: #d99a5b;
  --mt-pink: #ff8fb1;
  --mt-pink-deep: #ff6f9f;
  --mt-gold: #ffd36b;
  --mt-sky-top: #2b2350;
  --mt-sky-bot: #5b4b9a;
  --mt-safe-t: env(safe-area-inset-top, 0px);
  --mt-safe-r: env(safe-area-inset-right, 0px);
  --mt-safe-b: env(safe-area-inset-bottom, 0px);
  --mt-safe-l: env(safe-area-inset-left, 0px);
  --mt-font: 'Zen Maru Gothic', 'Jua', 'PingFang TC', 'Noto Sans TC', system-ui, sans-serif;
  --mt-num: 'Baloo 2', 'Zen Maru Gothic', system-ui, sans-serif;
  --mt-outline: 0 2px 0 var(--mt-ink), 2px 0 0 var(--mt-ink), 0 -2px 0 var(--mt-ink), -2px 0 0 var(--mt-ink),
    1.5px 1.5px 0 var(--mt-ink), -1.5px 1.5px 0 var(--mt-ink), 1.5px -1.5px 0 var(--mt-ink), -1.5px -1.5px 0 var(--mt-ink);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: linear-gradient(180deg, var(--mt-sky-top), var(--mt-sky-bot));
  background-color: var(--mt-sky-top);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  outline: none;
}

/* The overlay never eats touches; only its buttons do. */
.mt-root {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  font-family: var(--mt-font);
  color: var(--mt-ink);
  overflow: hidden;
}
.mt-root * { box-sizing: border-box; }
.mt-root button { pointer-events: auto; font-family: inherit; cursor: pointer; touch-action: manipulation; }
.mt-root a { pointer-events: auto; touch-action: manipulation; }
.mt-num { font-family: var(--mt-num); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- HUD ---------- */
.mt-hud {
  position: absolute;
  top: calc(var(--mt-safe-t) + 10px);
  left: calc(var(--mt-safe-l) + 10px);
  right: calc(var(--mt-safe-r) + 62px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.is-play .mt-hud, .is-over .mt-hud { opacity: 1; transform: none; }
.is-over .mt-hud { opacity: .5; }

.mt-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  padding: 3px 14px 1px;
  border-radius: 999px;
  background: rgba(255, 246, 232, .92);
  border: 3px solid var(--mt-ink);
  box-shadow: 0 4px 0 rgba(58, 47, 92, .45);
  line-height: 1;
}
.mt-chip-label { font-size: 11px; font-weight: 700; opacity: .7; letter-spacing: .1em; margin-top: 2px; }
.mt-chip .mt-num { font-size: 24px; line-height: 1.1; }
.mt-score .mt-num { color: var(--mt-pink-deep); }
.mt-score.is-neg .mt-num { color: #7d74a6; }
.is-bounce { animation: mt-bounce .55s cubic-bezier(.34, 1.56, .64, 1); }

/* centered on the screen (the HUD box starts at safe-l + 10px) */
.mt-pips { position: absolute; left: calc(50vw - var(--mt-safe-l) - 10px); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(43, 35, 80, .45); }
.mt-pip {
  --zc: #e3e1f3;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #d6d9ee 40%, #9a9cc0 100%);
  border: 2px solid var(--mt-ink);
  transition: transform .3s;
}
.mt-pip.is-current { animation: mt-pip-pulse 1s ease-in-out infinite; }
.mt-pip.is-used {
  background: radial-gradient(circle at 35% 30%, #fff8 0 15%, var(--zc) 45%);
  transform: scale(.85);
}
.mt-pip.is-neg { opacity: .55; }

.mt-mute {
  position: absolute;
  top: calc(var(--mt-safe-t) + 12px);
  right: calc(var(--mt-safe-r) + 12px);
  width: 42px; height: 42px;
  padding: 8px;
  border-radius: 50%;
  border: 3px solid var(--mt-ink);
  background: rgba(255, 246, 232, .92);
  color: var(--mt-ink);
  box-shadow: 0 4px 0 rgba(58, 47, 92, .45);
  transition: transform .15s;
}
.mt-mute svg { width: 100%; height: 100%; display: block; }
.mt-mute:active { transform: translateY(3px) scale(.95); box-shadow: 0 1px 0 rgba(58, 47, 92, .45); }
.mt-mute.is-muted { background: #d9d2f2; color: #7d74a6; }

/* language: globe button left of the mute button, on every screen */
.mt-lang {
  position: absolute;
  top: calc(var(--mt-safe-t) + 12px);
  right: calc(var(--mt-safe-r) + 64px);
  width: 42px; height: 42px;
  padding: 8px;
  border-radius: 50%;
  border: 3px solid var(--mt-ink);
  background: rgba(255, 246, 232, .92);
  color: var(--mt-ink);
  box-shadow: 0 4px 0 rgba(58, 47, 92, .45);
  transition: transform .15s;
}
.mt-lang svg { width: 100%; height: 100%; display: block; }
.mt-lang:active { transform: translateY(3px) scale(.95); box-shadow: 0 1px 0 rgba(58, 47, 92, .45); }
.mt-lang[aria-expanded="true"] { background: var(--mt-gold); }
.mt-lang-menu {
  position: absolute;
  z-index: 2;
  top: calc(var(--mt-safe-t) + 62px);
  right: calc(var(--mt-safe-r) + 12px);
  min-width: 156px;
  padding: 6px;
  border-radius: 22px;
  background: var(--mt-cream);
  border: 4px solid var(--mt-ink);
  box-shadow: 0 6px 0 rgba(58, 47, 92, .55), 0 12px 28px rgba(20, 12, 50, .45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.9);
  transform-origin: top right;
  transition: opacity .18s, transform .25s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .25s;
}
.mt-lang-menu.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.mt-lang-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mt-ink);
  font-size: 17px;
  font-weight: 900;
  text-align: left;
}
.mt-lang-opt:active { background: rgba(91, 75, 154, .15); }
.mt-lang-ai { margin-left: -2px; font-family: var(--mt-num); font-size: 12px; font-weight: 600; opacity: .55; }
.mt-lang-check { width: 1.1em; text-align: center; color: var(--mt-pink-deep); visibility: hidden; }
.mt-lang-opt.is-current { background: rgba(255, 211, 107, .45); }
.mt-lang-opt.is-current .mt-lang-check { visibility: visible; }

.mt-toast {
  position: absolute;
  top: calc(var(--mt-safe-t) + 72px);
  left: 50%;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--mt-gold);
  border: 3px solid var(--mt-ink);
  box-shadow: 0 4px 0 rgba(58, 47, 92, .45);
  font-weight: 900;
  font-size: 18px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -10px) scale(.6);
  transition: opacity .25s, transform .25s;
}
.mt-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); animation: mt-toast-in .5s cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- thumb zones ---------- */
.mt-zones {
  position: absolute;
  left: calc(var(--mt-safe-l) + 12px);
  right: calc(var(--mt-safe-r) + 12px);
  bottom: calc(var(--mt-safe-b) + 14px);
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.is-play .mt-zones { opacity: 1; transform: none; }
.mt-zone { width: min(40vw, 168px); display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.mt-zone-pad {
  height: 92px;
  border-radius: 30px;
  border: 3px dashed rgba(255, 246, 232, .75);
  background: rgba(255, 246, 232, .14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--mt-cream);
  transition: opacity .6s, background .2s, border-color .2s, transform .2s, height .4s;
}
.mt-zone-thumb { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(58, 47, 92, .5)); }
.mt-zone-left .mt-zone-thumb { animation: mt-nudge-l 1.6s ease-in-out infinite; }
.mt-zone-right .mt-zone-thumb { animation: mt-nudge-r 1.6s ease-in-out infinite; }
.mt-zone-hint { margin-top: 4px; font-size: 15px; font-weight: 900; text-shadow: 0 2px 0 rgba(58, 47, 92, .6); letter-spacing: .08em; }
.mt-zone-arrow { font-family: var(--mt-num); }

.mt-meter {
  height: 14px;
  border-radius: 999px;
  background: rgba(43, 35, 80, .55);
  border: 2.5px solid var(--mt-cream);
  overflow: hidden;
}
.mt-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8f2c9, var(--mt-gold), var(--mt-pink));
  transform: scaleX(0);
  will-change: transform;
}
/* fill grows outward, the way the handle opens */
.mt-zone-left .mt-meter-fill { transform-origin: right center; background: linear-gradient(270deg, #b8f2c9, var(--mt-gold), var(--mt-pink)); }
.mt-zone-right .mt-meter-fill { transform-origin: left center; }

.is-hinting .mt-zone-pad { animation: mt-zone-pulse 1.1s ease-in-out infinite; }
.has-touched .mt-zone-pad { opacity: .28; height: 56px; }
.has-touched .mt-zone-hint { display: none; }
.mt-zone.is-active .mt-zone-pad {
  opacity: .85;
  border-style: solid;
  border-color: var(--mt-gold);
  background: rgba(255, 211, 107, .22);
  transform: scale(1.04);
}
.mt-zone.is-active .mt-meter { border-color: var(--mt-gold); }

.mt-guide {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  display: none;
}
.mt-guide.is-on { display: block; }
.mt-guide::before {
  content: '';
  position: absolute;
  left: -26px; top: -26px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 4px solid var(--mt-gold);
  box-shadow: 0 0 0 3px rgba(58, 47, 92, .4), 0 0 18px rgba(255, 211, 107, .8);
  animation: mt-ring 1.1s ease-out infinite;
}

/* ---------- land popup ---------- */
.mt-pops {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--mt-safe-t) + 22%);
  display: flex;
  justify-content: center;
}
.mt-pop {
  --zc: #fff;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: mt-pop 1.9s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.mt-pop .mt-planet { width: 76px; height: 76px; animation: mt-spin-in .7s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 4px 0 rgba(58, 47, 92, .5)); }
.mt-pop-text { display: flex; align-items: baseline; gap: 10px; margin-top: -4px; }
.mt-pop-zone { font-size: 34px; font-weight: 900; color: var(--zc); text-shadow: var(--mt-outline), 0 5px 0 var(--mt-ink); }
.mt-pop-score { font-size: 50px; line-height: 1; color: var(--zc); text-shadow: var(--mt-outline), 0 6px 0 var(--mt-ink); }
.mt-pop-en { font-size: 14px; letter-spacing: .25em; color: var(--mt-cream); text-shadow: 0 2px 0 var(--mt-ink); }
.mt-pop.is-neg { animation: mt-pop-sad 2s ease-in-out forwards; }
.mt-pop.is-neg .mt-pop-zone,
.mt-pop.is-neg .mt-pop-score { color: #a9a3c8; }
.mt-pop.is-neg .mt-planet { animation: mt-droop 2s ease-in-out; }
.mt-spark {
  position: absolute;
  left: 50%; top: 38px;
  width: 10px; height: 10px;
  margin: -5px;
  background: var(--mt-gold);
  border: 2px solid var(--mt-ink);
  border-radius: 3px;
  transform: rotate(var(--a)) translateY(0) rotate(45deg);
  animation: mt-spark .8s ease-out forwards;
}

/* ---------- screens & cards ---------- */
.mt-screen {
  position: absolute;
  inset: 0;
  padding: calc(var(--mt-safe-t) + 16px) calc(var(--mt-safe-r) + 16px) calc(var(--mt-safe-b) + 16px) calc(var(--mt-safe-l) + 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility 0s .3s;
}
.mt-screen.is-on { visibility: visible; opacity: 1; transition: opacity .3s; }
.mt-over { background: radial-gradient(circle at 50% 45%, rgba(43, 35, 80, .2), rgba(43, 35, 80, .6)); }

.mt-card {
  position: relative;
  width: min(340px, 100%);
  max-height: 100%;
  padding: 18px 20px 20px;
  border-radius: 32px;
  background: var(--mt-cream);
  border: 4px solid var(--mt-ink);
  box-shadow: 0 10px 0 rgba(58, 47, 92, .55), 0 18px 40px rgba(20, 12, 50, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: scale(.5) translateY(40px);
  opacity: 0;
}
.mt-screen.is-on .mt-card { animation: mt-card-in .6s cubic-bezier(.34, 1.56, .64, 1) forwards; }

.mt-moon { position: absolute; top: -26px; right: 18px; font-size: 44px; animation: mt-float 3s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(58, 47, 92, .4)); }
.mt-logo {
  margin: 4px 0 0;
  font-size: 50px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--mt-gold);
  text-shadow: var(--mt-outline), 0 6px 0 var(--mt-ink);
  animation: mt-wobble 2.6s ease-in-out infinite;
  line-height: 1.2;
}
.mt-sub { margin-top: 2px; font-size: 13px; letter-spacing: .3em; color: var(--mt-wood-dark); }
.mt-howto-svg { width: 100%; max-width: 230px; height: auto; margin: 6px 0 2px; }
.mt-thumb-l { animation: mt-pull-l 1.6s ease-in-out infinite; }
.mt-thumb-r { animation: mt-pull-r 1.6s ease-in-out infinite; }
.mt-howto { margin: 4px 0 14px; font-size: 15px; font-weight: 700; line-height: 1.55; }
/* keyboard keys: only where there is a mouse (and so likely a keyboard) */
.mt-keys { display: none; grid-template-columns: auto auto; align-items: center; gap: 4px 8px; margin: -6px 0 14px; font-size: 13px; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .mt-keys { display: grid; } }
.mt-keys-ico { grid-row: 1 / span 2; font-size: 22px; }
.mt-keys-side { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mt-keys-side > span:first-child { min-width: 4.2em; margin-right: 2px; }
.mt-keys-arrow { font-size: 10px; letter-spacing: .1em; opacity: .7; }
.mt-keys kbd, .mt-btn-keys kbd {
  min-width: 22px;
  padding: 1px 5px 2px;
  border-radius: 6px;
  border: 2px solid var(--mt-ink);
  background: var(--mt-cream);
  color: var(--mt-ink);
  box-shadow: 0 2px 0 var(--mt-ink);
  font: inherit;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.mt-btn {
  border: 4px solid var(--mt-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb3cd, var(--mt-pink-deep));
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(58, 47, 92, .55);
  box-shadow: 0 7px 0 var(--mt-ink), inset 0 -5px 0 rgba(58, 47, 92, .18), inset 0 4px 0 rgba(255, 255, 255, .45);
  transition: transform .1s, box-shadow .1s;
}
.mt-btn-big { min-width: 200px; padding: 10px 34px 12px; font-size: 30px; letter-spacing: .2em; text-indent: .2em; }
.mt-btn:active { transform: translateY(5px) scale(.97); box-shadow: 0 2px 0 var(--mt-ink), inset 0 -3px 0 rgba(58, 47, 92, .18); }
.mt-start, .mt-again { animation: mt-breathe 1.8s ease-in-out infinite; }
.mt-btn:active { animation: none; }
/* R / Space inside Start and Play again, under the label (desktop only, like .mt-keys) */
.mt-btn-label { display: block; }
.mt-btn-keys { display: none; justify-content: center; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; letter-spacing: 0; text-indent: 0; text-shadow: none; }
@media (hover: hover) and (pointer: fine) { .mt-btn-keys { display: flex; } }
.mt-title-best { margin-top: 14px; font-size: 14px; font-weight: 700; opacity: .8; }
.mt-title-best .mt-num { font-size: 20px; color: #c78a2a; margin-left: 4px; }

.mt-over-card { overflow: hidden; }
.mt-social { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
.mt-social-btn {
  width: 44px; height: 44px;
  padding: 9px;
  border-radius: 50%;
  border: 3px solid var(--mt-ink);
  background: var(--mt-cream);
  color: var(--mt-ink);
  box-shadow: 0 4px 0 rgba(58, 47, 92, .45);
  transition: transform .15s;
}
.mt-social-btn svg { width: 100%; height: 100%; display: block; }
.mt-social-btn:active { transform: translateY(3px) scale(.95); box-shadow: 0 1px 0 rgba(58, 47, 92, .45); }
.mt-over-head { font-size: 22px; font-weight: 900; letter-spacing: .2em; color: var(--mt-sky-bot); }
.mt-newbest {
  display: none;
  margin-top: 6px;
  padding: 3px 16px;
  border-radius: 999px;
  background: var(--mt-pink);
  color: #fff;
  border: 3px solid var(--mt-ink);
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(58, 47, 92, .5);
  animation: mt-wiggle .9s ease-in-out infinite;
}
.is-newbest .mt-newbest { display: inline-block; }
.mt-total { font-size: 68px; line-height: 1.05; color: var(--mt-pink-deep); text-shadow: 0 5px 0 rgba(58, 47, 92, .25); }
.mt-total.is-neg { color: #7d74a6; }
.mt-over-best { font-size: 14px; font-weight: 700; opacity: .8; }
.mt-over-best .mt-num { font-size: 18px; color: #c78a2a; margin-left: 4px; }
.mt-results { list-style: none; margin: 12px 0 18px; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.mt-result {
  --zc: #fff;
  display: grid;
  grid-template-columns: minmax(3.2em, auto) 30px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 14px 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--zc) 30%, #fff);
  border: 2.5px solid var(--mt-ink);
  font-weight: 700;
  font-size: 15px;
  opacity: 0;
  animation: mt-slide-in .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.mt-result .mt-planet { width: 30px; height: 30px; }
.mt-result-n { font-size: 12px; opacity: .7; }
.mt-result-zone { text-align: left; }
.mt-result-score { font-size: 19px; }
.mt-result.is-neg { background: #e7e3f3; color: #6f6795; }

.mt-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mt-confetti i {
  position: absolute;
  top: -16px;
  width: 9px; height: 13px;
  border-radius: 3px;
  border: 1.5px solid var(--mt-ink);
  animation: mt-confetti 2s ease-in forwards;
}

/* ---------- per-language sizing (longer words than Chinese) ---------- */
html:lang(en) .mt-logo, html:lang(ja) .mt-logo, html:lang(ko) .mt-logo { font-size: 40px; letter-spacing: .02em; }
html:lang(en) .mt-btn-big, html:lang(ja) .mt-btn-big, html:lang(ko) .mt-btn-big { letter-spacing: .06em; text-indent: .06em; }
html:lang(en) .mt-over-head, html:lang(ja) .mt-over-head, html:lang(ko) .mt-over-head { letter-spacing: .06em; }
html:lang(en) .mt-howto, html:lang(ja) .mt-howto, html:lang(ko) .mt-howto { font-size: 14px; line-height: 1.45; }
html:lang(en) .mt-zone-hint, html:lang(ja) .mt-zone-hint, html:lang(ko) .mt-zone-hint { letter-spacing: .02em; }

/* ---------- landscape / short screens ---------- */
@media (max-height: 560px) {
  .mt-hud { top: calc(var(--mt-safe-t) + 6px); }
  .mt-mute, .mt-lang { top: calc(var(--mt-safe-t) + 8px); }
  .mt-lang-menu { top: calc(var(--mt-safe-t) + 58px); }
  .mt-toast { top: calc(var(--mt-safe-t) + 60px); }
  .mt-zone-pad { height: 70px; }
  .has-touched .mt-zone-pad { height: 44px; }
  .mt-card { width: min(560px, 100%); padding: 12px 18px 14px; }
  .mt-title-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
  .mt-title-card .mt-logo { grid-column: 2; font-size: 38px; }
  .mt-title-card .mt-sub { grid-column: 2; }
  .mt-title-card .mt-howto-svg { grid-column: 1; grid-row: 1 / span 6; width: 190px; }
  .mt-title-card .mt-howto, .mt-title-card .mt-keys, .mt-title-card .mt-start, .mt-title-card .mt-title-best { grid-column: 2; justify-self: center; }
  .mt-howto { margin: 4px 0 10px; font-size: 14px; }
  .mt-keys { margin: -2px 0 8px; font-size: 12px; }
  .mt-btn-big { font-size: 24px; padding: 6px 28px 8px; min-width: 170px; }
  .mt-total { font-size: 48px; }
  .mt-results { flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 8px 0 12px; }
  .mt-result { grid-template-columns: 24px auto auto; padding: 2px 10px 2px 4px; font-size: 13px; }
  .mt-result .mt-planet { width: 24px; height: 24px; }
  .mt-result-n { display: none; }
  .mt-result-score { font-size: 16px; }
  .mt-pops { top: calc(var(--mt-safe-t) + 14%); }
  /* no height to spare: park the links beside the Play Again button */
  .mt-social { position: absolute; right: 18px; bottom: 18px; margin: 0; gap: 10px; }
  .mt-social-btn { width: 36px; height: 36px; padding: 6px; }
}
@media (max-width: 350px) {
  .mt-chip { min-width: 70px; padding: 3px 9px 1px; }
  .mt-pips { gap: 4px; padding: 5px 7px; }
  .mt-pip { width: 12px; height: 12px; }
}

/* ---------- keyframes ---------- */
@keyframes mt-bounce { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 65% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes mt-pip-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 211, 107, .9); } 50% { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(255, 211, 107, .55); } }
@keyframes mt-toast-in { 0% { transform: translate(-50%, -14px) scale(.4); } 100% { transform: translate(-50%, 0) scale(1); } }
@keyframes mt-zone-pulse {
  0%, 100% { transform: scale(1); background: rgba(255, 246, 232, .14); border-color: rgba(255, 246, 232, .75); }
  50% { transform: scale(1.07); background: rgba(255, 211, 107, .3); border-color: var(--mt-gold); }
}
@keyframes mt-nudge-l { 0%, 100% { transform: translateX(8px); } 50% { transform: translateX(-10px); } }
@keyframes mt-nudge-r { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(10px); } }
@keyframes mt-ring { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes mt-pop {
  0% { transform: scale(.2) translateY(30px); opacity: 0; }
  14% { transform: scale(1.2) translateY(0); opacity: 1; }
  24% { transform: scale(.94); }
  32% { transform: scale(1.04); }
  40%, 78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.9) translateY(-70px); opacity: 0; }
}
@keyframes mt-pop-sad {
  0% { transform: translateY(-50px) rotate(0); opacity: 0; }
  15% { transform: translateY(6px) rotate(-3deg); opacity: 1; }
  25% { transform: translateY(0) rotate(3deg); }
  35% { transform: translateY(0) rotate(-2deg); }
  45%, 75% { transform: translateY(4px) rotate(0); opacity: 1; }
  100% { transform: translateY(60px) rotate(6deg); opacity: 0; }
}
@keyframes mt-spin-in { 0% { transform: rotate(-200deg) scale(.2); } 100% { transform: rotate(0) scale(1); } }
@keyframes mt-droop { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg) translateY(4px); } 60% { transform: rotate(8deg) translateY(6px); } }
@keyframes mt-spark {
  0% { transform: rotate(var(--a)) translateY(0) rotate(45deg) scale(.4); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(-90px) rotate(45deg) scale(1); opacity: 0; }
}
@keyframes mt-card-in { 0% { transform: scale(.5) translateY(40px); opacity: 0; } 60% { transform: scale(1.05) translateY(-4px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes mt-float { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
@keyframes mt-wobble { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.04); } }
@keyframes mt-pull-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-12px); } }
@keyframes mt-pull-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
@keyframes mt-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mt-wiggle { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.08); } }
@keyframes mt-slide-in { 0% { transform: translateX(-30px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes mt-confetti {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(560px) rotate(var(--rot)); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-root *, .mt-root *::before { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}