/*
 * The Momo logo system on the legacy /app (brand/logo): the retro MOMO wordmark in the header and the
 * title-card plate (ink rim, hard shadow, 8° lean) on the primary buttons. Loaded after the atelier skin; the app's own chunk CSS
 * loads later still, hence `html body` (one more point than the skin's `html`).
 */
/* Header: the wordmark instead of the word "Momo". */
html body .momo-app-back span { font-size: 0; line-height: 0; }
html body .momo-app-back span::before {
  content: ""; display: inline-block; width: 104px; height: 23px; vertical-align: middle;
  background: url(/home-assets/logo/momo-wordmark-plain.svg) left center / contain no-repeat;
}

/* No "アプリ" next to the logo, and no $MOMO link in the header. */
html body .momo-app-shell .momo-app-back::after { content: none; }
html body .momo-app-shell .momo-app-token-link { display: none; }
/* Phones: the app hides the header's word, so the wordmark vanished; bring it back. */
@media (max-width: 767px) {
  html body .momo-app-shell .momo-app-back span { display: inline-block; }
  html body .momo-app-back span::before { width: 88px; height: 20px; }
}
/* The epoch bar's label stays English only. */
html body #momo-epoch-fill .momo-epoch-fill-label i { display: none; }

/* Primary actions and the wallet button: the title-card plate, animated like the homepage's buttons —
   a palette conic gradient turns inside the plate (slowly at rest, faster on hover) and the plate
   lifts; it never darkens. The skin's shared button rules outrank a single class, hence the doubling. */
html body .momo-app-shell :is(.momo-app-primary-button.momo-app-primary-button, .momo-app-wallet-button.momo-app-wallet-button:not(.is-wrong-chain), .momo-app-rewards-activate.momo-app-rewards-activate, .momo-app-activation-checkout.momo-app-activation-checkout > button, .momo-app-activation-gallery-empty.momo-app-activation-gallery-empty > button, .momo-app-nft-sheet.momo-app-nft-sheet footer button, .momo-app-swap-success.momo-app-swap-success > footer button) {
  position: relative; isolation: isolate; overflow: hidden;
  border: 2px solid #3d2f35; border-radius: 8px; background: #ffcad4; color: #3d2f35;
  box-shadow: 3px 3px 0 #3d2f35; transform: skewX(-8deg);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif; font-weight: 900; letter-spacing: 0.06em;
  transition: transform .15s ease, box-shadow .15s ease;
}
html body .momo-app-shell :is(.momo-app-primary-button.momo-app-primary-button, .momo-app-wallet-button.momo-app-wallet-button:not(.is-wrong-chain), .momo-app-rewards-activate.momo-app-rewards-activate, .momo-app-activation-checkout.momo-app-activation-checkout > button, .momo-app-activation-gallery-empty.momo-app-activation-gallery-empty > button, .momo-app-nft-sheet.momo-app-nft-sheet footer button, .momo-app-swap-success.momo-app-swap-success > footer button)::after {
  content: ""; position: absolute; inset: -1000%; margin: auto; z-index: -1; pointer-events: none;
  background: conic-gradient(from 90deg at 50% 50%, #ffcad4 0%, #f4acb7 25%, #ffe5d9 50%, #f4acb7 75%, #ffcad4 100%);
  animation: momo-plate-spin 8s linear infinite;
}
@keyframes momo-plate-spin { to { transform: rotate(360deg); } }
html body .momo-app-shell :is(.momo-app-primary-button.momo-app-primary-button, .momo-app-wallet-button.momo-app-wallet-button:not(.is-wrong-chain), .momo-app-rewards-activate.momo-app-rewards-activate, .momo-app-activation-checkout.momo-app-activation-checkout > button, .momo-app-activation-gallery-empty.momo-app-activation-gallery-empty > button, .momo-app-nft-sheet.momo-app-nft-sheet footer button, .momo-app-swap-success.momo-app-swap-success > footer button):not(:disabled):hover {
  background: #ffcad4; color: #3d2f35; transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 5px 5px 0 #3d2f35;
}
html body .momo-app-shell :is(.momo-app-primary-button.momo-app-primary-button, .momo-app-wallet-button.momo-app-wallet-button:not(.is-wrong-chain), .momo-app-rewards-activate.momo-app-rewards-activate, .momo-app-activation-checkout.momo-app-activation-checkout > button, .momo-app-activation-gallery-empty.momo-app-activation-gallery-empty > button, .momo-app-nft-sheet.momo-app-nft-sheet footer button, .momo-app-swap-success.momo-app-swap-success > footer button):not(:disabled):hover::after { animation-duration: 3s; }
html body .momo-app-shell :is(.momo-app-primary-button.momo-app-primary-button, .momo-app-wallet-button.momo-app-wallet-button:not(.is-wrong-chain), .momo-app-rewards-activate.momo-app-rewards-activate, .momo-app-activation-checkout.momo-app-activation-checkout > button, .momo-app-activation-gallery-empty.momo-app-activation-gallery-empty > button, .momo-app-nft-sheet.momo-app-nft-sheet footer button, .momo-app-swap-success.momo-app-swap-success > footer button):not(:disabled):active {
  transform: skewX(-8deg) translate(2px, 2px); box-shadow: 1px 1px 0 #3d2f35;
}
html body .momo-app-shell .momo-app-primary-button.momo-app-primary-button:disabled { box-shadow: none; opacity: 0.5; }
html body .momo-app-shell .momo-app-primary-button.momo-app-primary-button::before { background: #3d2f35; }
@media (prefers-reduced-motion: reduce) {
  html body .momo-app-shell :is(.momo-app-primary-button, .momo-app-wallet-button)::after { animation: none; }
  html body .momo-app-shell :is(.momo-app-primary-button, .momo-app-wallet-button) { transition: none; }
}

/* Labels under the nav: katakana, as on the homepage (the skin had kanji). */
html body .momo-app-shell .momo-app-nav-rail > button:nth-of-type(1) > span::after { content: "スワップ" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button:nth-of-type(2) > span::after { content: "トレード" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button:nth-of-type(3) > span::after { content: "アクティベート" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button:nth-of-type(4) > span::after { content: "リワード" / ""; }
html body .momo-app-shell .momo-app-more > button > span::after { content: "モア" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button[data-momo-shortcut="raffle"] > span::after { content: "ラッフル" / ""; }
html body .momo-app-shell .momo-app-nav-rail > button[data-momo-shortcut="analytics"] > span::after { content: "アナリティクス" / ""; }
html body .momo-app-shell .momo-app-nav .momo-app-more-menu > button:nth-of-type(1)::after { content: "ラッフル" / ""; }
html body .momo-app-shell .momo-app-nav .momo-app-more-menu > button:nth-of-type(2)::after { content: "アナリティクス" / ""; }
html body .momo-app-shell .momo-app-nav .momo-app-more-menu > button:nth-of-type(3)::after { content: "ドキュメント" / ""; }

/* Loading: the wordmark fills with colour left to right, on the paper ground. It shows before the
   script runs (#root is still empty) and while the app chunk loads (its "Opening MOMO…" screen). */
html body #root:empty,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child) {
  position: relative; min-height: 100vh; min-height: 100svh; background: #fff8f4;
}
html body #root > main.min-h-screen.place-items-center:has(> p:only-child) > p {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html body #root:empty::before, html body #root:empty::after,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::before,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(320px, 68vw); aspect-ratio: 679 / 210;
  transform: translate(-50%, -50%); background: url(/assets/momo-wordmark-20260930.svg) center / contain no-repeat;
}
html body #root:empty::before,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::before { opacity: 0.16; filter: grayscale(1); }
html body #root:empty::after,
html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::after { animation: momo-fill 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes momo-fill {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  70% { clip-path: inset(0 0 0 0); opacity: 1; }
  88% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body #root:empty::after,
  html body #root > main.min-h-screen.place-items-center:has(> p:only-child)::after { animation: none; clip-path: none; }
}

/* Phones: the bottom bar is too narrow for the katakana next to the English, so it goes. */
@media (max-width: 767px) {
  /* :nth-of-type(n) matches every button and gives the same weight as the rules that set the labels. */
  html body .momo-app-shell .momo-app-nav-rail > button:nth-of-type(n) > span::after,
  html body .momo-app-shell .momo-app-more > button:nth-of-type(n) > span::after { content: none; }
}


/*
 * The calm restyle (was ops/app-home-style-draft, approved 2026-09-30). The first draft (ink-rimmed "sticker" cards everywhere, kept
 * as momo-app-sticker-draft.css) read as too loud for a financial app; this one keeps the skin's clean
 * layout and changes only the atmosphere: the homepage's warm paper instead of the cool grey-blue,
 * soft cards with no outlines, the wordmark's face for the few big figures only, and the pink plate
 * for main actions only (the brand layer already does the plates).
 */
@font-face { font-family: "Dela Gothic One"; font-weight: 400; font-display: swap; src: url(/home-assets/fonts/dela-gothic-one.woff2) format("woff2"); }

/* Ground: warm paper, with a whisper of the homepage's pink in the corners. Replaces the skin's cool
   radial washes (they read as a grey-green band behind the header). */
html body main.momo-app-shell.momo-app-shell {
  background-color: #fff8f4;
  background-image:
    radial-gradient(60% 40% at 90% 0%, rgba(255, 202, 212, 0.35), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(255, 229, 217, 0.6), transparent 70%);
  background-attachment: fixed;
  color: #3d2f35;
}

/* Header and tab rail: warm glass instead of cool glass. */
html body .momo-app-shell .momo-app-header { background: rgba(255, 250, 247, 0.82); border-color: rgba(61, 47, 53, 0.08); }
html body .momo-app-shell .momo-app-nav-rail { background: rgba(255, 250, 247, 0.82); }

/* Cards: the same soft cards, warmed — white paper, a hairline, a soft warm shadow. */
html body .momo-app-shell :is(
  .momo-app-market-chart, .momo-app-market-action, .momo-app-swap-composer, .momo-app-swap-card, .momo-app-info-card,
  .momo-app-trade-card, .momo-app-activation-picker, .momo-app-ladder, .momo-app-activation-checkout,
  .momo-app-stat-grid > article, .momo-app-reward-value-chart, .momo-app-chart-card, .momo-app-tier-breakdown,
  .momo-app-rewards-empty, .momo-app-reward-claims, .momo-app-docs-sidebar, .momo-app-docs-content,
  .momo-app-fee-mix, .momo-app-trade-summary, .momo-app-activation-gallery, #momo-epoch-fill
) {
  background: rgba(255, 253, 251, 0.9); border-color: rgba(61, 47, 53, 0.08);
  box-shadow: 0 1px 2px rgba(61, 47, 53, 0.04), 0 18px 40px -28px rgba(120, 60, 80, 0.35);
}
/* The epoch pool is the one pink card — the homepage's pink, very light. */
html body .momo-app-shell #momo-epoch-fill { background: linear-gradient(180deg, rgba(255, 200, 221, 0.35), rgba(255, 253, 251, 0.9)); }
html body #momo-epoch-fill .momo-epoch-fill-meter > span { background: linear-gradient(90deg, #f4acb7, #d9546f); }

/* Figures: the wordmark's face only where a number is the point of the card. */
html body .momo-app-shell :is(.momo-app-reward-value-chart header strong, #momo-epoch-fill header strong) {
  font-family: "Dela Gothic One", system-ui, sans-serif; font-weight: 400; letter-spacing: 0; color: #3d2f35;
}