/* MMGA components. Every value comes from tokens.css. */

/* Wordmark */
.mm-wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); color: var(--ink); }
.mm-wordmark__name {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 96px; line-height: .9; letter-spacing: .02em;
  color: var(--cap); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink);
}
.mm-wordmark__slogan {
  display: flex; align-items: center; gap: var(--space-2); align-self: stretch;
  font-family: var(--font-display); font-size: 15px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.mm-wordmark__slogan::before, .mm-wordmark__slogan::after { content: ""; flex: 1; height: var(--stroke-thick); background: var(--ink); }
.mm-wordmark__row { display: flex; align-items: center; gap: var(--space-2); }
.mm-wordmark__star { color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; font-size: 18px; line-height: 1; }
.mm-ticker {
  display: inline-flex; align-items: center; padding: 4px 12px;
  font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500;
  color: var(--ink); background: var(--gold);
  border: var(--stroke-thin) solid var(--ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-pressed);
}
.mm-wordmark--sm .mm-wordmark__name { font-size: 40px; -webkit-text-stroke-width: 4px; text-shadow: 3px 3px 0 var(--ink); }
.mm-wordmark--sm .mm-wordmark__slogan, .mm-wordmark--sm .mm-wordmark__row { display: none; }
.mm-wordmark--on-navy .mm-wordmark__slogan { color: var(--on-navy); }
.mm-wordmark--on-navy .mm-wordmark__slogan::before, .mm-wordmark--on-navy .mm-wordmark__slogan::after { background: var(--on-navy); }

/* Button */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 12px 24px;
  font-family: var(--font-display); font-size: 20px; line-height: 1; font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-cap); background: var(--cap);
  border: var(--stroke-thick) solid var(--ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-sticker);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mm-btn:hover { transform: translate(3px, 3px); box-shadow: var(--shadow-pressed); }
.mm-btn:active { transform: translate(5px, 5px); box-shadow: none; }
.mm-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mm-btn--shiba { background: var(--shiba); color: var(--ink); }
.mm-btn--ghost { background: var(--card); color: var(--ink); }
.mm-btn--lg { min-height: 60px; padding: 16px 32px; font-size: 26px; }
.mm-btn[disabled], .mm-btn[aria-disabled="true"] { background: var(--cream); color: var(--ink-soft); box-shadow: var(--shadow-pressed); pointer-events: none; }

/* Sticker */
.mm-sticker {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 6px 12px;
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  border: var(--stroke-thin) solid var(--ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-pressed);
}
.mm-sticker--cap { background: var(--cap); color: var(--on-cap); }
.mm-sticker--frog { background: var(--frog); }
.mm-sticker--shiba { background: var(--shiba); }
.mm-sticker--card { background: var(--card); }
.mm-sticker--tilt-l { transform: rotate(-4deg); }
.mm-sticker--tilt-r { transform: rotate(4deg); }

/* Card */
.mm-card {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6);
  color: var(--ink); background: var(--card);
  border: var(--stroke-thick) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-poster);
}
.mm-card--cap { background: var(--cap); color: var(--on-cap); }
.mm-card--frog { background: var(--frog); }
.mm-card--shiba { background: var(--shiba); }
.mm-card--cream { background: var(--cream); }
.mm-card__kicker { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mm-card__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 30px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.mm-card__text { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 25px; font-weight: 500; }

/* Contract */
.mm-contract {
  display: inline-flex; align-items: center; gap: var(--space-3); max-width: 100%;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  color: var(--ink); background: var(--card);
  border: var(--stroke-thick) solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker);
}
.mm-contract__label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.mm-contract__address { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }
.mm-contract__copy {
  flex: none; min-height: 40px; padding: 8px 14px;
  font-family: var(--font-display); font-size: 15px; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  border: var(--stroke-thin) solid var(--ink); border-radius: var(--radius-sm); cursor: pointer;
}
.mm-contract__copy:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mm-contract__copy[disabled] { background: var(--cream); color: var(--ink-soft); cursor: default; }

/* Stat */
.mm-stat {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-6);
  color: var(--ink); background: var(--card);
  border: var(--stroke-thick) solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker);
}
.mm-stat__label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.mm-stat__value { font-family: var(--font-display); font-size: 36px; line-height: 38px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.mm-stat__note { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 500; color: var(--ink-soft); }

/* BurnBar */
.mm-burn { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); }
.mm-burn__bar { display: flex; height: 56px; overflow: hidden; background: var(--cream); border: var(--stroke-thick) solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); }
.mm-burn__fill {
  display: flex; align-items: center; padding: 0 var(--space-4); width: var(--mm-burn, 60%);
  font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--on-cap); background: var(--cap); border-right: var(--stroke-thick) solid var(--ink);
}
.mm-burn__rest { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--space-3); font-family: var(--font-display); font-size: 18px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mm-burn__legend { display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 500; }
.mm-burn--on-navy .mm-burn__legend { color: var(--on-navy); }

/* Marquee */
.mm-marquee { overflow: hidden; padding: var(--space-3) 0; color: var(--on-navy); background: var(--navy); border-block: var(--stroke-thick) solid var(--ink); }
.mm-marquee__track { display: flex; gap: var(--space-8); width: max-content; font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mm-marquee__track > * { flex: none; }
.mm-marquee__star { color: var(--gold); }
.mm-marquee--cap { background: var(--cap); color: var(--on-cap); }
.mm-marquee--cap .mm-marquee__star { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .mm-marquee__track { animation: mm-marquee 28s linear infinite; } }
@keyframes mm-marquee { to { transform: translateX(-50%); } }

/* Faq */
.mm-faq { color: var(--ink); background: var(--card); border: var(--stroke-thick) solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-sticker); }
.mm-faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  font-family: var(--font-display); font-size: 22px; line-height: 26px; letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer; list-style: none; border-radius: var(--radius-md);
}
.mm-faq > summary::-webkit-details-marker { display: none; }
.mm-faq > summary::after { content: "+"; flex: none; font-size: 30px; line-height: 1; color: var(--cap-ink); transition: transform .2s ease; }
.mm-faq[open] > summary::after { transform: rotate(45deg); }
.mm-faq > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mm-faq__answer { margin: 0; padding: 0 var(--space-6) var(--space-6); font-family: var(--font-sans); font-size: 16px; line-height: 25px; font-weight: 500; }