html[data-locale="th"] body {
  font-family: Thai, Tahoma, sans-serif;
}

html[data-locale="en"] body {
  font-size: calc(14.5px * var(--text-scale, 1));
  letter-spacing: 0.005em;
}

html[data-locale="zh"] body,
html[data-locale="zh"] button,
html[data-locale="zh"] input,
html[data-locale="zh"] textarea {
  font-family:
    Thai, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Heiti SC",
    "Source Han Sans SC", Tahoma, sans-serif;
  line-height: 1.55;
}

html[data-locale="ru"] body,
html[data-locale="ru"] button,
html[data-locale="ru"] input,
html[data-locale="ru"] textarea {
  font-family:
    Thai, "Noto Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(14px * var(--text-scale, 1));
}

html[data-locale="hi"] body,
html[data-locale="hi"] button,
html[data-locale="hi"] input,
html[data-locale="hi"] textarea {
  font-family:
    Thai, "Noto Sans Devanagari", "Nirmala UI", Mangal, "Kohinoor Devanagari",
    "Devanagari Sangam MN", Tahoma, sans-serif;
  line-height: 1.6;
}

html[data-locale="ru"] .eyebrow,
html[data-locale="ru"] .menu-edition,
html[data-locale="ru"] h1,
html[data-locale="ru"] h2,
html[data-locale="ru"] h3,
html[data-locale="ru"] h4 {
  font-family: "Keel Wide", "Noto Sans", "Segoe UI", Arial, sans-serif;
}

html[data-locale="hi"] .eyebrow,
html[data-locale="hi"] .menu-edition,
html[data-locale="hi"] h1,
html[data-locale="hi"] h2,
html[data-locale="hi"] h3,
html[data-locale="hi"] h4 {
  font-family:
    "Keel Wide", "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif;
  letter-spacing: 0;
}

html.locale-cjk .eyebrow,
html.locale-cjk .menu-edition,
html.locale-cjk h1,
html.locale-cjk h2,
html.locale-cjk h3,
html.locale-cjk h4 {
  font-family:
    "Keel Wide", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

html:not([data-locale="th"]) .menu-button small,
html:not([data-locale="th"]) .pause-note,
html:not([data-locale="th"]) .modal p {
  overflow-wrap: anywhere;
}

.locale-options {
  display: grid;
  gap: 8px;
  margin: 18px 0 8px;
}
.locale-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid #404a3c;
  background: #202b22;
  color: var(--text);
}
.locale-option:hover,
.locale-option:focus-visible {
  background: #2a382c;
  border-color: var(--yellow);
}
.locale-option .locale-code {
  font-family: "Keel Mono", "Courier New", monospace;
  font-size: calc(10px * var(--text-scale, 1));
  letter-spacing: 1px;
  padding: 4px 6px;
  border: 1px solid #43523c;
  color: var(--muted);
}
.locale-option .locale-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}
.locale-option .locale-name b {
  font-size: calc(15px * var(--text-scale, 1));
}
.locale-option .locale-name small {
  color: var(--muted);
  font-size: calc(11px * var(--text-scale, 1));
}
.locale-option i {
  font-style: normal;
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--muted);
}
.locale-option[data-current="true"] {
  border-color: #758062;
  background: #26332a;
}
.locale-option[data-current="true"] i,
.locale-option[data-current="true"] .locale-code {
  color: var(--yellow);
}
.locale-note,
.locale-pending {
  color: #8f9c85;
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 1.5;
}
.locale-pending {
  color: var(--yellow);
}
.locale-hint {
  margin-top: 14px;
  font-family: "Keel Mono", "Courier New", monospace;
  font-size: calc(10px * var(--text-scale, 1));
  letter-spacing: 0.5px;
  color: #6f7a68;
}

.menu-language .menu-globe {
  display: grid;
  place-items: center;
}
.menu-language .menu-globe svg {
  width: 24px;
  height: 24px;
}

.spine span {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:not([data-locale="th"]) .spine span {
  letter-spacing: 0.2px;
  font-size: 10.5px;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
  justify-content: center;
}
html:not([data-locale="th"]) .spine {
  height: clamp(100px, 16vh, 140px);
}
@media (max-width: 1100px) {
  html:not([data-locale="th"]) .spine span {
    font-size: 9.5px;
  }
}
html.locale-cjk .spine span {
  font-size: 12.5px;
  letter-spacing: 1.5px;
}
html.locale-cjk .spine span {
  white-space: nowrap;
  line-height: normal;
}