/* =====================================================================
 * ja.css — Japanese typography layer
 * =====================================================================
 * Scoped entirely to [data-locale="ja"], which the inline bootstrap in
 * index.html sets before first paint. Loading this file on the English
 * site is a no-op.
 * ===================================================================== */

/* --- Font stack ----------------------------------------------------
 * A Latin-only webfont will silently fall back to a different face for
 * CJK glyphs, so a single sentence renders in two stroke weights. System
 * JP fonts avoid that with no download cost. Hiragino for Apple, Yu
 * Gothic / Meiryo for Windows, Noto for Android and Linux.
 *
 * Yu Gothic needs the "Medium" weight named explicitly — plain
 * "Yu Gothic" resolves to Light on Windows and looks anaemic on dark
 * backgrounds, which is most of this UI.
 */
[data-locale="ja"],
[data-locale="ja"] body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Noto Sans JP",
    "Yu Gothic Medium",
    "Yu Gothic",
    "Meiryo",
    system-ui,
    sans-serif;

  /* Kana and kanji sit on a larger optical body than Latin at the same
     px size, so JP text reads as cramped at Latin line-heights. */
  line-height: 1.7;

  /* Kinsoku shori: forbids a line starting with 。、」』 or ending with
     「『. Without this the browser will happily orphan a full stop onto
     its own line, which reads as broken to a Japanese eye. */
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;

  /* Slight tracking; JP glyphs are full-width and benefit from it less
     than Latin, so keep this small. */
  letter-spacing: 0.01em;
}

/* --- Chat bubbles and buttons --------------------------------------
 * keep-all stops mid-phrase breaks. Combined with line-break: strict
 * above, wrapping lands on phrase boundaries rather than arbitrary
 * character positions.
 */
[data-locale="ja"] .dm-bubble,
[data-locale="ja"] .dm-message,
[data-locale="ja"] .subtitle,
[data-locale="ja"] .btn,
[data-locale="ja"] button {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* --- Uppercase is meaningless in Japanese --------------------------
 * text-transform: uppercase does nothing to kana or kanji but WILL
 * uppercase any Latin mixed in, giving "エリスのROOM". Neutralise it
 * wherever the English design used caps as emphasis, and recover the
 * emphasis with weight and tracking instead.
 */
[data-locale="ja"] [class*="label"],
[data-locale="ja"] [class*="title"],
[data-locale="ja"] [class*="heading"],
[data-locale="ja"] .btn,
[data-locale="ja"] button,
[data-locale="ja"] .nav-item,
[data-locale="ja"] .shop-awning-title {
  text-transform: none;
  font-feature-settings: "palt" 1;  /* proportional kana spacing */
}

[data-locale="ja"] .shop-awning-title,
[data-locale="ja"] .modal-title {
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* --- Layout breathing room -----------------------------------------
 * Japanese runs roughly 40-60% shorter than English for the same
 * content, so fixed-width controls sized for "RETURN TO STORY" look
 * half-empty with "ストーリーに戻る". A few strings go the other way:
 * "特定商取引法に基づく表記" is a long settings row.
 */
[data-locale="ja"] .btn,
[data-locale="ja"] button {
  white-space: nowrap;
}

[data-locale="ja"] .settings-row,
[data-locale="ja"] .settings-item {
  white-space: normal;
  line-height: 1.5;
}

/* Vertically centre JP text in fixed-height controls — kana sit lower
   on the baseline than Latin caps, so buttons look bottom-heavy. */
[data-locale="ja"] .btn,
[data-locale="ja"] button,
[data-locale="ja"] .nav-item {
  line-height: 1.4;
}

/* --- Chat input ----------------------------------------------------
 * The IME candidate window renders directly under the caret. A very
 * short input near the bottom of the viewport puts that window
 * off-screen on mobile, so give the field a real minimum height.
 */
[data-locale="ja"] #dm-input,
[data-locale="ja"] .dm-input {
  min-height: 2.6em;
  line-height: 1.6;
  ime-mode: active;              /* legacy; harmless where unsupported */
}

/* --- Numerals ------------------------------------------------------
 * Keep prices, levels and counters in Latin figures with tabular
 * spacing so they don't jitter as values change.
 */
[data-locale="ja"] .price,
[data-locale="ja"] .level-value,
[data-locale="ja"] .coin-count,
[data-locale="ja"] .gem-count {
  font-variant-numeric: tabular-nums;
  font-family: system-ui, sans-serif;
}