/* public/i18n/lang.css — 言語別フォント上書き ＋ 言語切替UIの意匠 [ハルト担当]
   設計: docs/ripple-server/i18n-design.md §7-2 / §6
   ja は何も宣言しない（各ページの :root がそのまま既定になる＝ja の見た目は1pxも変わらない）。
   html[lang] セレクタなので、setLang() が documentElement.lang を書き換えた瞬間に
   フォントが切り替わる（JSからCSSを触らない）。
*/
html[lang="zh-CN"] { --ui-font: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC','Noto Sans SC','Noto Sans JP',sans-serif; }
html[lang="zh-TW"] { --ui-font: 'PingFang TC','Hiragino Sans CNS','Microsoft JhengHei','Source Han Sans TC','Noto Sans TC','Noto Sans JP',sans-serif; }
html[lang="ko"]    { --ui-font: 'Apple SD Gothic Neo','Malgun Gothic','Source Han Sans KR','Noto Sans KR','Noto Sans JP',sans-serif; }
/* en は ja と同じ既定でよい（Inter が Latin を持つ） */

/* 言語セレクタは常に全CJKを含む合成スタック（自称ラベルを豆腐にしないため） */
:root { --ui-font-all: 'Noto Sans JP','Zen Kaku Gothic New','PingFang SC','Microsoft YaHei','PingFang TC','Microsoft JhengHei','Apple SD Gothic Neo','Malgun Gothic','Noto Sans SC','Noto Sans TC','Noto Sans KR',sans-serif; }
#lang-switch, #lang-switch option { font-family: var(--ui-font-all); }

/* ═══════════════════════════════════════════════════════════════════════
   言語切替UI — カスタム listbox の意匠  [2026-08-15 ハルト・マスター依頼②③]
   ─────────────────────────────────────────────────────────────────────
   マスター指摘: 「HTMLのデフォルトなのでなんかダサい。サイトの雰囲気に合った
                 おしゃれなものにして」＋「日本語が分からない人が見たときに
                 言語切替可能だと思わない可能性がある」

   【意匠の狙い】このサイトの空気は "静かで、余白があり、押しつけない"。
     ・**閉じている間は「線も箱も無い」**。#howto-link と同じ、ただの淡い文字列。
       押せる事は hover/focus の下線でだけ知らせる（既存の #howto-link と同じ作法）。
     ・**開いた時だけ夜のガラス板が浮く**。既存 .glass-blur / .nav-tab の
       「半透明＋backdrop blur＋1px の淡い縁＋柔らかい影」をそのまま踏襲。
       新しい世界観は持ち込まない。角丸10pxは .hw-tab(999px の丸)ではなく
       パネル系(.hw-panel)の寄り＝板だから。
     ・**選択中の印は波紋**（輪＋芯）。チェックマークでも国旗でもなく、
       このサイト自身の記号を使う。色は朱(--vermilion #c14a3d)＝
       .hw-tab[aria-selected] と同じ「今ここ」の色。
     ・派手なアニメーションはしない。開閉は 120ms の opacity+2px だけ。

   【トーンが1系統でよい理由】4ページ全部が夜の画面。index は
     game-ui.js:949 で `document.body.dataset.tod = 'night'` と**固定**されており、
     昼の配色は現状どこにも出ない。ゆえに昼用トークンは作らない
     （使われない分岐を先回りで書くと、次に触る人が両方を保守する羽目になる）。
   ═══════════════════════════════════════════════════════════════════════ */

.lang-switch {
  /* 夜のトークン。値は login.html/howto.html の :root と game.css の
     body[data-tod="night"] #howto-link から取っており、独自の色を発明していない。 */
  --ls-fg:         rgba(226, 218, 202, 0.50);
  --ls-fg-strong:  rgba(238, 232, 218, 0.94);
  --ls-rule:       rgba(232, 226, 216, 0.16);
  --ls-accent:     #c14a3d;
  --ls-panel-bg:   rgba(14, 25, 35, 0.90);
  --ls-panel-bd:   rgba(232, 226, 216, 0.14);
  --ls-panel-sh:   0 18px 44px -20px rgba(0, 0, 0, 0.80), 0 2px 10px rgba(0, 0, 0, 0.30);
  --ls-hover-bg:   rgba(232, 226, 216, 0.07);
  --ls-txt-sh:     0 1px 4px rgba(0, 0, 0, 0.55);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 選択肢に「한국어」「简体中文」が並ぶため、現在の言語に関わらず
     全CJKを含む合成スタックを当てる（設計 §7-2。これが無いとラベルが豆腐になる）。 */
  font-family: var(--ui-font-all);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.6;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 元の <select> は「値の置き場」として残したまま隠す（JSが値を読む）。 */
.lang-switch__native { display: none !important; }

/* ── トリガ（閉じている間は線も箱も無い。#howto-link と同じ静けさ）──
   【2026-08-15 依頼①】見出し "Language" を削除し、地球儀をこのトリガの中へ移した。
   マスター指摘:「"Language" 自体をクリックしてしまいがちになる」——見出しは
   pointer-events:none の飾りだったので、**押せない物が押し所の左に同じ見た目で
   並んでいた**のが原因。表記を消すだけでなく「見えている物は全部押せる」形にした。
   中身は [🌐] [日本語] [|] [JP] [▾]。狭幅では __full と __sep を落として [🌐 JP ▾]。
   "Language" は <button aria-label>（= <select> の aria-label）に残っており、
   **視覚的に消えただけで支援技術からは消えていない。** */
.lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 1px 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font: inherit;
  color: var(--ls-fg);
  letter-spacing: 0.08em;
  text-shadow: var(--ls-txt-sh);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.2s, border-color 0.2s;
}
.lang-switch__trigger:hover {
  color: var(--ls-fg-strong);
  border-bottom-color: rgba(232, 226, 216, 0.30);
}
.lang-switch__trigger:focus-visible {
  outline: none;
  color: var(--ls-fg-strong);
  border-bottom-color: var(--ls-accent);
}
.lang-switch.is-open .lang-switch__trigger {
  color: var(--ls-fg-strong);
  border-bottom-color: rgba(232, 226, 216, 0.30);
}
.lang-switch__caret {
  flex: none;
  opacity: 0.75;
  transition: transform 0.18s ease;
}
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }

/* 地球儀。見出しが消えた今、これが「言語切替である」と伝える唯一の記号なので、
   飾りだった頃（11px / opacity .9）より **ほんの少しだけ** 前に出す。
   派手にはしない＝色は currentColor のまま（トリガと一緒に hover で明るくなる）。 */
.lang-switch__globe {
  flex: none;
  opacity: 1;
  margin-right: 1px;
}

/* 値の表記「日本語 | JP」。3つに割ってあるのは意匠ではなくレスポンシブの都合
   （狭幅で __full と __sep を display:none にすると「JP」だけが残る）。 */
.lang-switch__value {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.lang-switch__sep {
  opacity: 0.45;
  font-weight: 300;
}
/* 短縮表記は英字なので、CJK の自称表記と並んだ時に沈まないよう少しだけ字間を開ける。
   数字/英字の等幅は使わない（この画面のトーンから浮く）。 */
.lang-switch__short { letter-spacing: 0.1em; }

/* ── 開いた時だけ現れる夜のガラス板 ────────────────────────────── */
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 136px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--ls-panel-bg);
  border: 1px solid var(--ls-panel-bd);
  border-radius: 10px;
  box-shadow: var(--ls-panel-sh);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  outline: none;
  animation: lang-switch-in 0.12s ease both;
}
.lang-switch__menu[hidden] { display: none; }
/* 下に入らない時だけ上へ。開く瞬間に1回測るだけで常時監視はしない。 */
.lang-switch__menu--up { top: auto; bottom: calc(100% + 8px); }
/* 右端からはみ出す時だけ右寄せ（狭幅のindexで効く） */
.lang-switch__menu--right { left: auto; right: 0; }

@keyframes lang-switch-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lang-switch__menu--up { animation-name: lang-switch-in-up; }
@keyframes lang-switch-in-up {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lang-switch__menu { animation: none; }
  .lang-switch__caret { transition: none; }
}

/* ── 選択肢 ──────────────────────────────────────────────────── */
.lang-switch__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 9px;
  border-radius: 7px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(232, 226, 216, 0.62);
  cursor: pointer;
  transition: background-color 0.14s, color 0.14s;
}
/* is-active = キーボード/マウスで今指している行。is-selected = 現在の言語。 */
.lang-switch__opt.is-active {
  background: var(--ls-hover-bg);
  color: var(--ls-fg-strong);
}
.lang-switch__opt.is-selected { color: var(--ls-fg-strong); }
/* 波紋の印。選択中だけ朱で灯る。非選択時も場所を空けておくので行がずれない。 */
.lang-switch__tick {
  flex: none;
  color: var(--ls-accent);
  opacity: 0;
  transition: opacity 0.14s;
}
.lang-switch__opt.is-selected .lang-switch__tick { opacity: 1; }
.lang-switch__optlabel { flex: 1 1 auto; }

/* ── ページごとの収まり（意匠は共通。位置決めだけページの都合に合わせる）── */

/* index.html: #user-bar 内、#howto-link の右隣。区切り線は #howto-link と同じ作法。 */
#user-bar .lang-switch {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  z-index: 10;
}

/* howto.html: .hw-header 内、.hw-pagetitle の直下（設計 §6）。 */
.hw-header .lang-switch { margin-top: 18px; }

/* login.html / register.html: .panel 下部の .links 内。
   .links は column flex なので、そのまま中央に載る。 */

@media (max-width: 480px) {
  .lang-switch { font-size: 10px; gap: 6px; }
  .hw-header .lang-switch { margin-top: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   狭幅（≤640px）: 表記を「JP」だけにする  [2026-08-15 依頼② ハルト]
                                          [2026-08-19 440→640 ハルト]
   ────────────────────────────────────────────────────────────────────
   マスター指摘:「レスポンシブ時、言語切替が下に来ているのが気になる」。

   【前版がなぜ折り返していたか / なぜそれをやめるか】
   前版は狭幅で #user-bar を flex-wrap:wrap し、言語切替を2行目へ落としていた。
   当時の判断は「見出し "Language" を隠すと、日本語を読めない人への唯一の手がかりが
   最も狭い画面で消える」——目的を守ろうとした点は正しかったが、**その見出し自体が
   依頼①で消える**ので前提が無くなった。見出しが無ければ言語切替の幅は
   [🌐][JP][▾] の 3 部品まで縮み、周りを少し縮めれば1行に収まる。
   ⇒ 折り返しは廃止（#user-bar は既定の flex-wrap:nowrap に戻る）。

   【なぜ 440px をやめて 640px にしたか — 2026-08-19】
   当初は「game.css の縮小(当時 ≤480px)とわざと境をずらす。441〜480px は
   全長のままでも1行に収まるので、情報は消さずに済むなら消さない」という判断で
   440px にしてあった。この判断には2つの前提があり、両方とも失効した:
     ① 前提「周りの縮小は ≤480px」… 2026-08-19 の残課題A/B で狭幅モードの境目は
        **640px** に移った（game.css の3ブロックとも）。440 だけが取り残され、
        441〜640px は「周りは小さいのに言語切替だけ原寸」という中途半端な帯になった。
     ② 前提「441〜480px は隙間 8〜69px あるので収まる」… "収まる"の判定が
        左群と右群の衝突だけを見ており、**画面中央に居る #count（オンライン人数）**
        を勘定に入れていなかった。全長「日本語 | JP」は短縮形より 53〜69px 長い
        （実測 W=490・ログイン時の .lang-switch 幅 ja 109.7→53.2 / en 117.3→54.2 /
          zh-CN 123.6→55.2 / zh-TW 123.6→55.2 / ko 107.7→54.2）。
        そのぶん中央の空きを食って #count がヘッダ行に乗れなくなる。
   ⇒ マスター指摘「レスポンシブ時は "日本語 | JP" ではなく "JP" だけでいい」に従い、
     **新しい数字を作らず、狭幅モードの既存の境目 640px にそのまま相乗りさせる。**
     境目を1つに揃えたので「周りは縮んだのに表記だけ原寸」という帯は消えた。
   ※ ≥641px は1バイトも変わらない（全長「日本語 | JP」のまま）。

   【なぜ隠すのが __full と __sep だけで足りるか】
   短縮表記は LANG_SHORT の定数で **どの言語でも必ず2文字**（JP/EN/CN/TW/KR）。
   ⇒ 狭幅での言語切替の幅は言語に依存しない＝5言語ぶん個別に詰める必要が無い。
   地球儀は残す（言語切替だと分かる唯一の記号なので、ここを消したら本末転倒）。
   選択肢リスト側は自称表記のまま（開けば「日本語」と読める＝情報は失われない）。

   【なぜ #user-bar 配下だけに効かせるか（4ページで割るのではなく、混雑する所だけ削る）】
   窮屈なのは index の #user-bar だけ。howto(.hw-header) と login/register(.links) は
   言語切替が単独で置かれており、**320px でも全長「日本語 | JP」がそのまま収まる**
   （実測: 幅 77〜93px、親の内側に完全に収まり はみ出し0・横スクロール0）。
   そこまで一律に削るのは「必要が無いのに情報を減らす」ことなので、
   このブロックは全部 #user-bar 配下に限定してある。
   ※ 意匠・部品・挙動は 4ページ共通のまま（削るのは index の"表記の長さ"だけ）。
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #user-bar .lang-switch__full,
  #user-bar .lang-switch__sep { display: none; }
  #user-bar .lang-switch__value { gap: 0; }
  #user-bar .lang-switch { gap: 5px; padding-left: 8px; }
  #user-bar .lang-switch__trigger { gap: 4px; }
  #user-bar .lang-switch__globe { margin-right: 0; }
}

/* さらに狭い幅（≤380px）: 区切りと字送りをもう一段だけ詰める。
   表記は 640px 段で既に「JP」だけになっているので、ここで消す物は無い。
   ここも index(#user-bar) 限定（他3ページは詰める必要が無い＝実測で余裕がある）。 */
@media (max-width: 380px) {
  #user-bar .lang-switch { font-size: 9px; gap: 4px; padding-left: 6px; }
  #user-bar .lang-switch__trigger { gap: 3px; }
}