/* 月球滾珠 (Moon Roller) — 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) + 8px);
  left: calc(var(--mt-safe-l) + 14px);
  right: calc(var(--mt-safe-r) + 66px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  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-hud-row { position: relative; display: flex; align-items: center; gap: 10px; }
.mt-dist-wrap { position: relative; }
.mt-dist {
  font-size: 44px;
  line-height: 1.05;
  color: var(--mt-cream);
  text-shadow: var(--mt-outline), 0 4px 0 var(--mt-ink);
  white-space: nowrap;
  transform-origin: left center;
}
.mt-dist-u { font-size: .55em; margin-left: .05em; }
.mt-time {
  padding: 1px 12px 0;
  border-radius: 999px;
  background: rgba(255, 246, 232, .92);
  border: 3px solid var(--mt-ink);
  box-shadow: 0 3px 0 rgba(58, 47, 92, .45);
  font-size: 18px;
  line-height: 1.3;
}
.mt-best {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 1px 12px 0;
  border-radius: 999px;
  background: rgba(43, 35, 80, .5);
  color: var(--mt-cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}
.mt-best .mt-num { font-size: 16px; letter-spacing: 0; color: var(--mt-gold); }
.is-bounce { animation: mt-bounce .55s cubic-bezier(.34, 1.56, .64, 1); }

.mt-plus {
  position: absolute;
  left: 100%;
  top: 8px;
  margin-left: 8px;
  font-size: 22px;
  color: var(--mt-gold);
  text-shadow: var(--mt-outline);
  white-space: nowrap;
  pointer-events: none;
  animation: mt-plus 1.2s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.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) + 100px);
  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: 20px;
  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); }

/* ---------- gap gauge (left edge) ---------- */
.mt-gauge {
  position: absolute;
  left: calc(var(--mt-safe-l) + 12px);
  top: 50%;
  height: min(34vh, 230px);
  min-height: 130px;
  transform: translate(-30px, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.is-play .mt-gauge { opacity: 1; transform: translate(0, -50%); }
.mt-gauge-top, .mt-gauge-label {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(43, 35, 80, .72);
  font-size: 12px;
  font-weight: 900;
  color: var(--mt-cream);
  line-height: 1.2;
  white-space: nowrap;
}
.mt-gauge-track {
  position: relative;
  flex: 1;
  width: 16px;
  border-radius: 999px;
  background: rgba(43, 35, 80, .6);
  border: 3px solid var(--mt-cream);
  overflow: hidden;
}
.mt-gauge-danger {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 15%;
  background: repeating-linear-gradient(135deg, rgba(255, 111, 159, .75) 0 4px, rgba(255, 111, 159, .25) 4px 8px);
}
.mt-gauge-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(0deg, #b8f2c9 0%, var(--mt-gold) 60%, var(--mt-pink) 90%);
  transform: scaleY(0);
  transform-origin: center bottom;
  will-change: transform;
}
.mt-gauge.is-danger .mt-gauge-track { border-color: var(--mt-pink); animation: mt-gauge-danger .35s ease-in-out infinite alternate; }
.mt-gauge.is-danger .mt-gauge-top { background: var(--mt-pink); color: #fff; }

/* ---------- handle hints (anchored at the real handle positions) ---------- */
.mt-zones { position: absolute; inset: 0; }
.mt-zone {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
}
.mt-zone.is-on { opacity: 1; visibility: visible; transition: opacity .3s; }
.mt-zone-ring {
  position: absolute;
  left: -24px; top: -24px;
  width: 48px; height: 48px;
  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;
}
.mt-zone-pad {
  position: absolute;
  top: 34px;
  min-width: 112px;
  padding: 6px 10px 7px;
  border-radius: 22px;
  border: 3px dashed rgba(255, 246, 232, .8);
  background: rgba(43, 35, 80, .45);
  color: var(--mt-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: mt-zone-pulse 1.1s ease-in-out infinite;
}
.mt-zone-left .mt-zone-pad { right: -14px; }
.mt-zone-right .mt-zone-pad { left: -14px; }
.mt-zone.is-above .mt-zone-pad { top: auto; bottom: 34px; }
.mt-zone-thumb { font-size: 26px; 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: 3px; font-size: 14px; font-weight: 900; text-shadow: 0 2px 0 rgba(58, 47, 92, .6); letter-spacing: .06em; white-space: nowrap; }
.mt-zone.is-active .mt-zone-pad { border-style: solid; border-color: var(--mt-gold); }

/* ---------- 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-sway { animation: mt-sway 2.8s ease-in-out infinite; }
.mt-rules { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.mt-rules li { display: flex; align-items: center; gap: 8px; }
.mt-rule-ico { flex: none; width: 1.6em; text-align: center; }
/* 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-cause { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 900; letter-spacing: .06em; color: var(--mt-sky-bot); }
.mt-cause-ico { font-size: 32px; animation: mt-wiggle 1.4s ease-in-out infinite; }
.mt-newbest {
  display: none;
  margin-top: 8px;
  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 { margin-top: 6px; font-size: 64px; line-height: 1.05; color: var(--mt-pink-deep); text-shadow: 0 5px 0 rgba(58, 47, 92, .25); white-space: nowrap; }
.mt-total-u { font-size: .5em; }
.mt-over-stats { display: flex; gap: 10px; margin: 8px 0 18px; }
.mt-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 14px 0;
  border-radius: 999px;
  background: rgba(91, 75, 154, .12);
  border: 2.5px solid var(--mt-ink);
  font-weight: 700;
  font-size: 13px;
}
.mt-stat .mt-num { font-size: 19px; color: #c78a2a; }
.mt-over-time { color: var(--mt-sky-bot) !important; }

.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-cause, html:lang(ja) .mt-cause, html:lang(ko) .mt-cause { font-size: 21px; letter-spacing: .02em; }
html:lang(en) .mt-rules, html:lang(ja) .mt-rules, html:lang(ko) .mt-rules { font-size: 14px; }

/* ---------- landscape / short screens ---------- */
@media (max-height: 560px) {
  .mt-hud { top: calc(var(--mt-safe-t) + 4px); }
  .mt-dist { font-size: 34px; }
  .mt-time { font-size: 15px; }
  .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) + 78px); }
  .mt-gauge { height: min(44vh, 160px); min-height: 90px; }
  .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-rules, .mt-title-card .mt-keys, .mt-title-card .mt-start, .mt-title-card .mt-title-best { grid-column: 2; justify-self: center; }
  .mt-rules { margin: 4px 0 8px; font-size: 13px; gap: 1px; }
  .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: 46px; }
  .mt-cause { font-size: 20px; }
  .mt-cause-ico { font-size: 26px; }
  .mt-over-stats { margin: 4px 0 10px; }
  .mt-social { margin-top: 12px; }
  .mt-social-btn { width: 38px; height: 38px; padding: 7px; }
}
@media (max-width: 350px) {
  .mt-dist { font-size: 36px; }
  .mt-best { font-size: 11px; }
}

/* ---------- keyframes ---------- */
@keyframes mt-bounce { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 65% { transform: scale(.93); } 100% { transform: scale(1); } }
@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-plus { 0% { transform: translateY(8px) scale(.4); opacity: 0; } 20% { transform: translateY(-4px) scale(1.2); opacity: 1; } 35% { transform: scale(1); } 70% { opacity: 1; } 100% { transform: translateY(-26px) scale(1); opacity: 0; } }
@keyframes mt-sway { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(14px); } }
@keyframes mt-gauge-danger { from { box-shadow: 0 0 0 0 rgba(255, 111, 159, .9); } to { box-shadow: 0 0 0 5px rgba(255, 111, 159, .25); } }
@keyframes mt-ring { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.35); 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-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-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; }
}