/* 26 Oct (owner: «пиксельный глобус вместо EN/RU; по нажатию список языков + флаги + название»): the language button, its list, the fonts.
   The globe and the flags are pixel art (art/ui/lang-globe.aseprite, art/ui/lang-flags.aseprite; tools/i18n/lang-art.py), js/client/00-i18n.js */
.lgGlobe {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  vertical-align: middle;
  -webkit-mask: url(../assets/img/lang-globe.webp) 0 0/15px 15px no-repeat;
  mask: url(../assets/img/lang-globe.webp) 0 0/15px 15px no-repeat;
  image-rendering: pixelated;
}
.lgBtn {
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
}
#top #lang {
  font-size: 0 !important;
}
#menu > #mLang {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
}
#menu > #mLang .lgGlobe {
  width: 15px;
  height: 15px;
}
#invGate #igLang {
  min-width: 34px;
  min-height: 30px;
}
.lgFlag {
  --i: 0;
  display: inline-block;
  flex: none;
  width: 36px;
  height: 26px;
  background: url(../assets/img/lang-flags.webp) calc(var(--i) * -36px) 0/396px 26px no-repeat;
  image-rendering: pixelated;
  box-shadow:
    0 0 0 1px #000a,
    0 1px 0 2px #ffffff10;
  border-radius: 2px;
}
#langPop {
  position: fixed;
  z-index: 10001; /* 1 Nov (owner: «в этом меню не работает кнопка которая меняет языки»): above the door's page (#invGate, 81-invite.js, z 9998); it was 60 and opened under it */
  padding: 6px;
  max-height: calc(100% - 12px);
  overflow: auto;
  box-shadow: 0 10px 30px #000c;
}
.lgList {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}
.lgGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.lgItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: 600 14px/1.2 var(--f-ui);
  text-align: left;
  white-space: nowrap;
}
.lgItem:hover {
  background: #ffffff12;
  border-color: var(--line2);
}
.lgItem.on {
  background: #ffb34722;
  border-color: var(--ember2);
  color: #fff6dc;
}
.lgItem.on::after {
  content: '✓';
  margin-left: auto;
  color: var(--ember2);
  font-weight: 800;
  padding-left: 12px;
}
/* the names of the list in their own scripts */
.lgItem[lang='zh'] {
  font-family: 'Inter', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
}
.lgItem[lang='ja'] {
  font-family: 'Inter', 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Sans', sans-serif;
}
.lgItem[lang='ko'] {
  font-family: 'Inter', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
/* the fonts of a language: Chinese, Japanese and Korean take Noto Sans of their script after Inter and Rubik (31 Oct: was Pixelify Sans; fetched by 00-i18n.js
   only for that language); Vietnamese titles in Inter: Rubik lacks its letters (ế, ộ, ư…) and a title would mix two fonts */
:root:lang(zh) {
  --f-cjk: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC';
}
:root:lang(ja) {
  --f-cjk: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Sans';
}
:root:lang(ko) {
  --f-cjk: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo';
}
:root:lang(zh),
:root:lang(ja),
:root:lang(ko) {
  --f-display: 'Rubik', var(--f-cjk), 'Inter', system-ui, sans-serif;
  --f-ui: 'Inter', var(--f-cjk), system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-body: 'Inter', var(--f-cjk), system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
:root:lang(vi) {
  --f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}