/*
 * 英語版モチスピ LP（/en/motispi/）の上書き。
 * 日本語版の /motispi/styles/main.css の後に読む。日本語版のファイルは変えない。
 */

/* 欧文は Nunito（丸みのある sans）。学ぶ言語の日本語・中国語・韓国語の例文は Noto Sans JP 等へ落ちる */
:root {
  --font-family-base:
    "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo", "Malgun Gothic",
    "PingFang SC", sans-serif;
  --font-family-display-jp: var(--font-family-base);
  --font-family-en: var(--font-family-base);
  --font-family-en-display: var(--font-family-base);
  --font-family-handwrite: "Caveat", "Nunito", cursive, system-ui;
}

body {
  font-family: var(--font-family-base);
}

/* 日本語版で明朝（Noto Serif JP）を当てている見出しを、英語では太い sans に */
.motispi-hero__message-title,
.portrait-section__title,
.closing__title,
.closing__subtitle,
.closing__visual-note-em {
  font-family: var(--font-family-base);
}

.motispi-hero__message-title,
.portrait-section__title,
.closing__title {
  font-weight: 900;
  letter-spacing: -0.005em;
}

.portrait-section__title {
  font-size: clamp(32px, 8vw, 52px);
  line-height: 1.12;
}

.motispi-hero__message-title {
  line-height: 1.3;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

.motispi-hero__tagline {
  letter-spacing: 0.01em;
}

/* 英文は日本語より長いので、見出しの字間を詰め、均等に折り返す */
.teachers__title,
.realtime-feedback__title,
.in-your-turn__title,
.motispi-world__title,
.motispi-world__support-title,
.motispi-world__reason-headline,
.spi-langs__title,
.motitown-story__title {
  letter-spacing: 0;
  text-wrap: balance;
}

.portrait-section__lead,
.portrait-section__body,
.teachers__lead,
.realtime-feedback__lead,
.in-your-turn__lead,
.motispi-world__support-body,
.motispi-world__reason-body,
.closing__visual-note {
  letter-spacing: 0;
}

.closing__title {
  line-height: 1.18;
  text-wrap: balance;
}

/* 英語のラベルは長めなので、本棚の数字欄に文字を入れたときは小さめに */
.motispi-world__shelf-number.en-shelf-word {
  font-size: clamp(17px, 4.6vw, 21px);
  line-height: 1.15;
  text-align: center;
}

.motispi-world__shelf-name {
  text-align: center;
}

/* ヘッダーの「日本語」切り替え */
.en-lang-switch {
  margin-left: auto;
  font-family: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif !important;
}

.mt-account-app-header .site-header__inner {
  gap: 0.5rem;
}

/* 単語帳への案内（日本語版はインライン style） */
.spi-langs__dictlinks.en-dictlinks {
  margin: 14px auto 6px;
  text-align: center;
  font-size: var(--read-body, 1rem);
  color: #56636f;
  max-width: 720px;
  line-height: 1.8;
}

.en-free-note {
  text-align: center;
}

/* フレンドの楽しさ: 日本語入り画像の代わりのご褒美 3 枚 */
.en-rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 16px 12px;
  list-style: none;
  border-radius: 14px;
  border: 1px solid rgba(40, 201, 190, 0.18);
  background: linear-gradient(160deg, #eaf7ff 0%, #d6efff 55%, #c4e6fb 100%);
  box-shadow: 0 10px 22px -14px rgba(15, 90, 90, 0.30);
}

.en-rewards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 6px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  text-align: center;
}

.en-rewards__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff6dc;
  box-shadow: inset 0 0 0 2px rgba(214, 160, 40, 0.35);
}

.en-rewards__icon svg {
  width: 34px;
  height: 34px;
}

.en-rewards__icon--streak { color: #f0a020; }
.en-rewards__icon--rank   { color: #d8a514; }
.en-rewards__icon--league { color: #2e86b0; background: #e4f3fb; box-shadow: inset 0 0 0 2px rgba(46, 134, 176, 0.3); }

.en-rewards__label {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  color: #16365a;
}

@media (min-width: 734px) {
  .en-rewards__icon { width: 68px; height: 68px; }
  .en-rewards__icon svg { width: 40px; height: 40px; }
  .en-rewards__label { font-size: 14px; }
}

.closing__visual-note.en-free-note {
  margin-top: var(--space-3, 16px);
  font-weight: 700;
}

/* Copy review (2026-10-24): let body copy avoid one-word last lines ("up!", "talk.", "English.").
   Browsers without text-wrap wrap as before. */
.portrait-section__body,
.teachers__lead,
.teachers__role,
.realtime-feedback__lead,
.rf-card__why,
.rf-point__text,
.in-your-turn__lead,
.in-your-turn__closer-sub,
.feedback-card__body,
.motispi-world__bridge-subtext,
.motispi-world__support-body,
.motispi-world__reason-body,
.spi-langs__lead,
.spi-langs__note,
.spi-lang-card__courses,
.motitown-story__body p,
.closing__visual-note,
.closing__series-copy {
  text-wrap: pretty;
}

/* Short lines that were ending on a single word ("partner", "like?", "designs.", "prices.") */
.portrait-section__title,
.voice-cue__label {
  text-wrap: balance;
}
.conversation-card__ja,
.teacher-thought-card__text,
.chat-bubble__ja,
.motispi-world__diary-note,
.motispi-world__diary-ja {
  text-wrap: pretty;
}

/* Hero tagline: the English line is longer than the Japanese one and left "app" alone on a second
   line on PC (the hero picture is narrower there than on phones). Same size as on phones keeps it on one line. */
.motispi-hero__tagline { text-wrap: balance; }
@media (min-width: 734px) {
  .motispi-hero__tagline { font-size: 13px; letter-spacing: 0; gap: 8px; }
}

/* Map labels: "Study abroad" is far wider than the Japanese label, so on phones it covered the end of
   the "Daily life" pill next to it. Move that pill a little to the left on phones only. */
@media (max-width: 733px) {
  .motispi-world__convo--daily { left: 64%; }
}

/* Keep the short Japanese phrases in the feedback cards on one line (they split mid-phrase on phones) */
.feedback-card__body .important_phrase {
  white-space: nowrap;
}

/* AP trademark notice under the language note */
.spi-langs__note.en-tm-note {
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.6;
}