/* 03-final — per-language tuning on top of the shared language layer
   (../shared/css/i18n.css, linked just before this file, so equal selectors
   here win). Apart from the engine's suggestion chip, every rule is scoped to
   a script or a language: English and the other Latin languages render
   exactly as the base CSS says. */

/* ====================================================================== chip
   The engine's "available in your language" chip (off in this version, see
   SUGGEST in main.js), restyled after the layer's defaults. Fixed at left:
   50%, a shrink-to-fit box only gets the right half of the screen and wrapped
   every word; its buttons get full-size targets. */
.rtc-lang-suggest {
  width: max-content;
  background: #f4ecd8;
  border-width: 3px;
  box-shadow: 4px 4px 0 #000;
}
.rtc-lang-suggest > span { text-wrap-style: balance; }
.rtc-lang-suggest__go { flex: none; min-height: 44px; }
.rtc-lang-suggest__close { flex: none; width: 44px; height: 44px; }
/* phones: the story's reader bar holds the bottom of the screen while the reader is in view */
@media (max-width: 767.98px) {
  .rtc-lang-suggest { bottom: 74px; }
}

/* ====================================================================== French
   The quote marks of the story's narrated lines and of his lines on the Miner vs holder
   cards are drawn by CSS (open-quote): French puts a no-break space inside its guillemets. */
html[lang="fr"] :is(.say--narr .say__text, .vs__line) { quotes: "\00ab\00a0" "\00a0\00bb"; }
/* The act titles wrap between words: automatic hyphenation (shared/css/i18n.css) cut them
   on phones, the brand name too (« RETAR- / DED BITCOIN », « SA- / LAIRE »). */
html[lang="fr"] .page__title { hyphens: manual; }

/* ====================================================================== long words
   German, Russian and Turkish narration may break a long word (zusammenzubringen,
   Benachrichtigungen) where the browser has that language's hyphenation
   dictionary, so the line before it is not left short. */
html:is([lang="de"], [lang="ru"], [lang="tr"]) .page__text { hyphens: auto; }

/* ====================================================================== Russian
   The layer's pixel face (Press Start 2P) is 2.5x wider than VT323: kickers,
   the burn ticker, the LCDs and the BUY window title ran over two or three
   lines or out of their boxes. Space Mono has no Cyrillic. Handjet keeps
   VT323's narrow LED look and IBM Plex Mono the receipts (both requested in
   index.html's font link; their files load only when Russian uses them). */
html[lang="ru"] {
  --ff-pixel: "Handjet", "Press Start 2P", "Courier New", monospace;
  --ff-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
}
/* Oswald's Cyrillic is wider than Bangers and the stamp words are longer
   ("оплачено"): the small stamps step down so the word stays whole */
html[lang="ru"] .env__state { font-size: 13px; letter-spacing: 0.02em; }
html[lang="ru"] .frame__paid { font-size: 28px; letter-spacing: 0.03em; }

/* ====================================================================== CJK
   Space Mono draws the Latin letters and digits, the language's own sans the
   rest (left alone, the system picks NSimSun, MS Gothic or Malgun Gothic). */
html[lang="zh-Hans"] { --ff-mono: "Space Mono", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html[lang="ja"] { --ff-mono: "Space Mono", "Noto Sans JP", "Yu Gothic", sans-serif; }
html[lang="ko"] { --ff-mono: "Space Mono", "Noto Sans KR", "Malgun Gothic", sans-serif; }

/* full-width glyphs in heavy display faces read larger than the condensed
   Latin face the section titles were sized for (and need more leading) */
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .sec__title {
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.08;
}

/* the scrawls on the gear box: seven full-width characters at 38px are
   wider than its 262px face */
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .gear__label { font-size: 30px; }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .gear__label--new { font-size: 32px; }

/* line breaking: no character left alone on a last line, short blocks
   balanced, Japanese labels broken between phrases, Korean between words */
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) body { text-wrap-style: pretty; }
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) :is(
  h1, h2, h3, h4, summary, figcaption, button, .btn, .note__big, .tok__value,
  .gear__label, .vs__total b, .bubble, .after-line__big, .constel__lab, .tick__txt,
  .can__cta
) { text-wrap-style: balance; }
html[lang="ja"] :is(
  h1, h2, h3, h4, summary, figcaption, button, .btn, .note__big, .tok__value,
  .gear__label, .vs__total b, .bubble, .after-line__big, .constel__lab, .tick__txt,
  .can__cta, .hs__label, .hook__l, .payoff__row, .payoff__note, .vs__rule
) { word-break: auto-phrase; }
html[lang="ko"] body { word-break: keep-all; }

/* the constellation's labels hang from points near the right edge: a
   shrink-to-fit width there leaves CJK text one character per line */
html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .constel__lab { width: max-content; }

/* the receipts' titles: "$RTCホールド" in Dela Gothic One is wider than the name column beside the photo on phones */
html[lang="ja"] .vs__title-sm { font-size: clamp(23px, 2.9cqw, 34px); }

/* the hero's two buttons in a heavy CJK face: a size down, so they share one row in the hero's column */
@media (min-width: 900px) {
  html:is([lang="zh-Hans"], [lang="ja"], [lang="ko"]) .hero__ctas .btn { padding-inline: 20px; font-size: 23px; }
}