/* English (US) version of the MotiTan page — small overrides on top of /motitan/styles/main.css.
   Japanese page is untouched. Only classes prefixed with en- are new. */

/* Latin text first: system UI sans for body copy, Japanese font only as a fallback. */
:root {
  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-family-chalk: "Caveat", "Kalam", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-chalk-body: "Kalam", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[lang="en"] body { font-family: var(--font-family-base); }

/* Header: brand on the left, language switch + CTA on the right */
.header__brand { margin-right: auto; }
a.mt-account-link.en-lang-switch { font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; }

/* Long English words in the course medals */
html[lang="en"] .course-medals__main { font-size: clamp(10px, 2.9vw, 12px); letter-spacing: 0; }
html[lang="en"] .course-medals__sub { font-size: clamp(8.5px, 2.4vw, 10px); }
@media (min-width: 734px) {
  html[lang="en"] .course-medals__main { font-size: 13.5px; }
  html[lang="en"] .course-medals__sub { font-size: 11px; }
}

/* Growth cards: the Japanese cards have their text baked into the image.
   English cards use a character illustration + visible title/description. */
.why-fun-growth__card.en-card {
  display: flex;
  flex-direction: column;
  background: var(--color-base-white);
}
.why-fun-growth__card.en-card .en-card__art {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
}
.why-fun-growth__card.en-card .en-card__art img {
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
}
.why-fun-growth__card.en-card .en-card__art--contain img {
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}
.why-fun-growth__card.en-card .en-card__art--row {
  gap: 2px;
  padding: 8px;
}
.why-fun-growth__card.en-card .en-card__art--row img {
  width: 33%;
  height: auto;
  object-fit: contain;
}
.why-fun-growth__card.en-card .why-fun-growth__card-title,
.why-fun-growth__card.en-card .why-fun-growth__card-desc {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  text-align: center;
  color: var(--color-text-primary);
}
.why-fun-growth__card.en-card .why-fun-growth__card-title {
  padding: 10px 12px 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}
.why-fun-growth__card.en-card .why-fun-growth__card-desc {
  padding: 4px 12px 12px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.85;
}

/* Effectiveness features: character art instead of Japanese app screenshots */
.en-feature-art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.en-feature-art img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}
.en-feature-art--row { gap: 8px; }
.en-feature-art--row img { max-width: 96px; }

/* Language stats: the stat label is longer in English */
html[lang="en"] .mt-langs__stat span { line-height: 1.35; }
.en-langs__count { display: block; margin-top: 6px; font-weight: 700; }

/* Dictionary link block (replaces the Japanese banner image) */
.en-dict-link {
  display: block;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #E9F6FF;
  border: 1.5px solid rgba(46, 134, 176, 0.35);
  color: var(--color-text-primary);
  text-decoration: none;
  line-height: 1.45;
}
.en-dict-link strong { display: block; font-size: 18px; color: #1C6E96; }
.en-dict-link span { display: block; margin-top: 4px; font-size: 15px; }
.en-dict-link:hover { background: #DCF0FF; }

/* Closing headline: text instead of the Japanese "最終形態" image */
.closing__title-main.en-closing-main {
  display: block;
  width: auto;
  margin-top: 4px;
  font-size: 27px;
  font-weight: var(--font-weight-black, 900);
  line-height: 1.1;
  color: #1C8FD6;
  white-space: nowrap;
  letter-spacing: 0;
}
@media (min-width: 734px) {
  .closing__title-main.en-closing-main { width: auto; font-size: 38px; }
}
@media (max-width: 389px) {
  .closing__title-main.en-closing-main { width: auto; font-size: 23px; }
}

/* Footer: no Japanese full-width separators */
.en-footer .footer__separator { padding-inline: 4px; }

/* Feature art on a light background (no chalkboard) */
.en-feature-art--light img { max-width: 260px; filter: drop-shadow(0 10px 20px rgba(13, 42, 78, 0.18)); }

/* "Have fun together" block: the Japanese panorama has Japanese ribbons baked in,
   so the English page uses the MotiTown town illustration instead. */
.why-fun-game__metaverse {
  background:
    url("/motitan/assets/images/motitown/bg__img.webp") no-repeat center 100% / cover,
    linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
}
.why-fun-game__metaverse .section-heading {
  background: rgba(255, 255, 255, 0.86);
  border-radius: 14px;
  padding: 12px 14px;
}

/* App icons from the stores are 144px: keep them crisp */
.closing__app-icon[src*="app-icon-"] { image-rendering: auto; border-radius: 22%; }

/* SP: the polaroid hanging from the Battles block would cover the longer English title */
@media (max-width: 733px) {
  .why-fun-game__feature:nth-child(2) .why-fun-game__feature-text { padding-top: 72px; }
}

/* 英語の見出しは日本語より横に長いので、月桂樹の間に余白をとる（2026-10-23 点検） */
.closing__crown-row { gap: 10px; }
.closing__title-small { letter-spacing: 0; }
.closing__title .closing__title-small { font-size: 24px; line-height: 1.25; }
@media (min-width: 734px) { .closing__title .closing__title-small { font-size: 30px; } }

/* SP: the laurels are anchored to the "fully evolved." row, so their tips covered the "V" and the
   comma of the longer line above ("Vocabulary learning,"). On phones, anchor them to the whole
   two-line headline instead so they wrap it (2026-10-24 review). Tablet/PC keep the original anchor. */
@media (max-width: 733px) {
  .closing__title { position: relative; display: inline-block; }
  .closing__crown-row { position: static; }
}
@media (max-width: 359px) {
  .closing__title .closing__title-small { font-size: 21px; }
}

/* Battles: the Japanese gameplay video (competition.mp4) shows Japanese UI,
   so the English page draws the battle screen in HTML instead (2026-10-23). */
.why-fun-game__feature-visual .device-frame.en-battle {
  width: 210px;
  max-width: 100%;
  display: flex;
  margin-inline: auto;
  flex-direction: column;
  background: var(--color-blackboard-base);
  text-align: left;
  font-family: var(--font-family-base);
}
@media (min-width: 734px) {
  .why-fun-game__feature-visual .device-frame.en-battle { width: 260px; }
}
/* SP: the dash_motibear polaroid hangs over the right corner, so keep the answers clear of it */
@media (max-width: 733px) {
  .why-fun-game__feature-visual .device-frame.en-battle { margin-left: 2%; margin-right: auto; }
}
.en-battle__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 10px 0;
  background: linear-gradient(180deg, var(--color-festival-night) 0%, #24477a 100%);
}
.en-battle__rank {
  order: 2;
  font-family: var(--font-family-chalk);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-secondary-300);
  text-shadow: 0 2px 0 var(--color-secondary-700);
}
.en-battle__timer {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.en-battle__players {
  list-style: none;
  margin: 0;
  padding: 4px 6px 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: linear-gradient(180deg, #24477a 0%, var(--color-festival-night) 100%);
}
.en-battle__players li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.en-battle__players img {
  width: 100%;
  max-width: 48px;
  height: auto;
  aspect-ratio: 1;
}
.en-battle__name {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-chalk-white);
}
.en-battle__score {
  width: 100%;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--color-blackboard-frame-hi);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: var(--color-chalk-white);
}
.en-battle__players .is-you .en-battle__name { color: var(--color-secondary-300); }
.en-battle__players .is-you .en-battle__score { background: var(--color-accent-blue-500); }
.en-battle__board {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 18px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 40%),
    var(--color-accent-green-500);
  border-bottom: 10px solid var(--color-blackboard-frame);
}
.en-battle__word {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: var(--color-chalk-yellow);
}
.en-battle__combo {
  margin: 8px 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-chalk-white);
}
.en-battle__combo b {
  display: block;
  font-size: 26px;
  line-height: 1;
  color: var(--color-primary-100);
}
.en-battle__choices {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.en-battle__choices li {
  padding: 7px 10px;
  border: 2px solid rgba(251, 247, 240, 0.55);
  border-radius: 10px;
  font-family: var(--font-family-chalk-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--color-chalk-white);
}
.en-battle__choices .is-right {
  border-color: var(--color-chalk-yellow);
  background: rgba(255, 229, 107, 0.2);
  color: var(--color-chalk-yellow);
}

/* Copy review (2026-10-24): English lines wrap differently from the Japanese ones, which left
   one-word last lines ("stick.", "care.", "day", "go.", "English.") in headings and copy.
   Balance the headings and let body copy avoid orphans. Browsers without text-wrap wrap as before. */
.section-heading__title,
.why-fun-game__feature-title,
.why-fun-growth__feature-title,
.why-fun-growth__card-title,
.effectiveness__feature-title,
.mt-langs__title,
.hqs-block__lead {
  text-wrap: balance;
}
.section-heading__lead,
.why-fun-game__feature-desc,
.why-fun-growth__card-desc,
.effectiveness__feature-desc,
.mt-langs__lead,
.mt-langs__note,
.mt-lang-card__exams,
.hqs-block__body,
.story-of-motitown__body p,
.closing__series-copy,
.character-message__bubble {
  text-wrap: pretty;
}

/* Keep "50-second" from breaking at its hyphen */
.en-nowrap { white-space: nowrap; }

/* AP trademark notice under the language notes: smaller and lighter than the note above it */
.mt-langs__note.en-tm-note {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  opacity: 0.85;
}