/*
 * 多语言支持：语言选择器 + 各语种的字体回退。
 *
 * 原站只使用韩文字体（굴림 / Gulim）。这里按 <html lang> 换成对应语种的系统字体，
 * 保证简体中文、繁体中文、韩文、英文都能正常显示而不出现豆腐块。
 */

/* ---------- 字体变量 ---------- */
:root {
  --font-native: 굴림, Gulim, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* 简体中文：优先使用黑体系无衬线字体 */
html[lang^='zh-Hans'],
html[lang='zh-CN'],
html[lang='zh-SG'],
html[lang='zh'] {
  --font-native: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', sans-serif;
}

/* 繁体中文：优先使用苹果俪 / 微软正黑 */
html[lang^='zh-Hant'],
html[lang='zh-TW'],
html[lang='zh-HK'],
html[lang='zh-MO'] {
  --font-native: 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', 'Hiragino Sans TC', sans-serif;
}

/* 韩文 */
html[lang='ko'],
html[lang^='ko-'] {
  --font-native: 굴림, Gulim, 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* 其余语种走英文西文字体 */
html[lang='en'],
html[lang^='en-'] {
  --font-native: Tahoma, 'Segoe UI', Verdana, Arial, sans-serif;
}

/* ---------- 应用刚才定义的字体变量 ---------- */
.login-input,
.channel-screen,
.native-label,
.native-input,
.native-chat-log,
.native-button,
.native-modal,
.native-dialog,
.training-current,
.training-pad,
.practice-only-dialog,
.language-switcher {
  font-family: var(--font-native, var(--font-body));
}

/* ---------- 语言选择器 ---------- */
.language-switcher {
  z-index: 30;
  color: #9fd3e6;
  background: rgba(7, 28, 43, 0.72);
  border: 1px solid rgba(117, 213, 239, 0.35);
  border-radius: 4px;
  padding: 4px 8px;
  gap: 6px;
  font-size: 12px;
  line-height: 18px;
  align-items: center;
  display: flex;
  opacity: 0.45;
  transition: opacity 0.15s ease;
  position: fixed;
  right: 12px;
  bottom: 12px;
}

.language-switcher:hover,
.language-switcher:focus-within {
  opacity: 1;
}

.language-switcher select {
  color: #e7f6fd;
  background: #0d2b3d;
  border: 1px solid rgba(117, 213, 239, 0.5);
  border-radius: 3px;
  padding: 2px 4px;
  font: inherit;
  cursor: pointer;
}

.language-switcher select:focus-visible {
  outline: 1px solid #75d5ef;
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .language-switcher {
    transition: none;
  }
}

/* ---------- 重绘的原站烘焙文字 ----------
 *
 * 原站把「昵称变更 / 练习模式 / 注册 / 账号 / 密码 / 公告 / 登录 / 版权行 / 结束」
 * 这些文字直接烘焙进了 PNG 素材，无法随语言改变。
 * 构建期已用 tools/erase-baked-text.mjs 把原文字从图上抹掉（保留渐变与高光），
 * 这里负责按当前语言重新绘制，位置、字号、颜色都对齐原版设计。
 * 因此韩文界面也走这条路径，四种语言的表现完全一致。
 */
.bitmap-label {
  pointer-events: none;
  white-space: nowrap;
  align-items: center;
  display: flex;
  position: absolute;
  overflow: hidden;
}

/* 账号 / 密码：白底黑字，右对齐贴在白色胶囊里（对应原图的 아이디 / 비밀번호） */
.bitmap-label-id,
.bitmap-label-password {
  color: #1c1c1c;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 12px;
  line-height: 1;
  left: 175px;
  width: 74px;
  height: 17px;
}

.bitmap-label-id {
  top: 321px;
}

.bitmap-label-password {
  top: 343px;
}

/* 登录按钮主文案：绿底白字（对应原图的 로그인；下方 LOG IN 是原版英文副标题） */
.bitmap-label-submit {
  color: #f2fff0;
  justify-content: center;
  text-shadow: 0 1px 0 rgba(0, 40, 0, 0.8);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  top: 327px;
  left: 412px;
  width: 55px;
  height: 17px;
}

/* 左下角版权行：原图是绿字深色底 */
.bitmap-label-credit {
  color: #8ed93f;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 1;
  left: 6px;
  width: 240px;
  height: 16px;
}
.login-screen .bitmap-label-credit {
  top: 456px;
}
.channel-screen .bitmap-label-credit {
  top: 452px;
}

/* 右下角「结束」：贴在红色的 X 按钮左侧 */
.bitmap-label-exit {
  color: #333;
  justify-content: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  font-size: 12px;
  line-height: 1;
  left: 572px;
  width: 38px;
  height: 18px;
}
.login-screen .bitmap-label-exit {
  top: 443px;
}
.channel-screen .bitmap-label-exit {
  top: 458px;
}

/* 频道界面：公告区标题（对应原图的 공지사항） */
.bitmap-label-notice {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
  font-size: 13px;
  line-height: 1;
  top: 74px;
  left: 48px;
  width: 80px;
  height: 17px;
}

/* 按钮上的译文：文字直接压在按钮贴图上（原图是白字带深色描边）。
 * 字号默认 11px；大厅 / 房间的大按钮由 button() 写入 --label-size 覆盖。 */
.sprite-button[data-i18n-label]::after {
  content: attr(data-i18n-label);
  pointer-events: none;
  color: #f6fbff;
  text-align: center;
  text-shadow: 0 1px 0 rgba(40, 12, 0, 0.75);
  white-space: nowrap;
  place-items: center;
  font-family: var(--font-native, var(--font-body));
  font-size: var(--label-size, 11px);
  line-height: 1;
  display: grid;
  position: absolute;
  inset: 0;
}

/* 练习模式 / 注册按钮较窄，英文文案需要更小的字号 */
.practice-button::after,
.register-button::after {
  font-size: 10px;
}

/* 潜艇展示面板上的艇名（贴图上的原名已擦除，这里按语言重绘） */
.native-label.submarine-name {
  color: #f4fbff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
  font-family: var(--font-native, var(--font-body));
  font-size: 15px;
  line-height: 1;
}