/*
 * メニュー(#overlays)・HUD・チャット・モーダルのスタイル(Issue #99「デザイン B」)。
 * 旧 oldSource の style.css と Bootstrap 5 CSS を捨て、ここだけで見た目を作る(設計書 §9「DOM UI の扱い」)。
 * 元のデザインカンバス: https://claude.ai/artifact/4GZXMVmK5vZ24sc6PAFU1i(「B ·」で始まるアートボード)
 *
 * 構成:
 *   1. トークン(色・書体・形)
 *   2. 基盤(フォント・フォーム部品・ボタン)
 *   3. メニュー(ヘッダー / ナビレール / 本文 / サイド / フッター)と各タブ
 *   4. HUD(リーダーボード / チームランク / スコア / サーバー情報)
 *   5. チャット
 *   6. ランキングモーダル / トースト
 *
 * クラス名は旧 Bootstrap 由来のもの(.btn / .form-control / .form-check / .tab-pane / .modal ...)をそのまま使う。
 * TS 側(ConfigPanel / ThemePanel / KeyPanel / RankingModal / LoginPanel)が生成するマークアップを変えないため。
 * 「桜餅パレット」は本プロジェクトのオリジナル(参考にしたゲーム UI の色・書体・素材は使っていない)。
 */

/* ============================================================
 * 1. トークン
 * ============================================================ */
:root {
  /* 色: 桜餅 */
  --paper: #f7e9ee; /* 餅 */
  --panel: #f0d6de;
  --card: #ffffff;
  --line: #d8b4c0;
  --line-soft: #ecd2da;
  --muted: #8c6a76;
  --muted-soft: #a88a95;
  --ink: #2b1f25; /* 暗い紫がかった黒。真っ黒より桜色と馴染む */
  --accent: #e4607f; /* 桜 */
  --accent-soft: #f0b7c6;
  --accent-deep: #b8375a;
  --leaf: #5c7d4f; /* 桜の葉。状態表示(オンライン点)だけに使う */
  --field: #1a1417; /* 盤面 */
  --paper-a: rgba(247, 233, 238, 0.94);
  --paper-veil: rgba(247, 233, 238, 0.96); /* メニューの地。Theme では窓の外だけに塗る(3b) */
  --field-a: rgba(26, 20, 23, 0.6);

  /* 書体 */
  --font-display: "Saira", "Zen Kaku Gothic New", sans-serif;
  --font-jp: "Zen Kaku Gothic New", "Saira", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 形: 対角 2 隅を切る面取り(チャンファー)と、右端が斜めの選択タブ */
  --chamfer: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  --chamfer-s: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --slant: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  --hatch: repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 8px);

  /* ゲーム画面の HUD(Issue #290): 画面下の情報バーの高さ(MinimapView の INFO_BAR_HEIGHT_PX と同じ値)とチャット 1 行の高さ */
  --infobar-h: 42px;
  --chat-line-h: 18px;

  /* スマホ縦の下固定タブバー(Issue #291)。高さ 64px + 端末下端(ホームバー)の余白 */
  --tabbar-h: calc(64px + env(safe-area-inset-bottom, 0px));

  /* 重なり: canvas(0) < HUD / チャット(100) < #overlays(200) < モーダル(1050) < トースト(2000) */
  --z-hud: 100;
  --z-menu: 200;
  --z-modal: 1050;
  --z-toast: 2000;
}

/* ============================================================
 * 2. 基盤
 * ============================================================ */
#overlays,
#div_lb,
#div_lb2,
#div_score,
#div_server,
#chatroom,
#chatboxArea2,
.toast-msg,
.modal {
  font-family: var(--font-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

#overlays *,
.modal * {
  box-sizing: border-box;
}

/* hidden 属性は display を書いた規則(.btn の inline-flex 等)より強くする。UserPanel / LoginPanel は hidden で出し分ける */
#overlays [hidden] {
  display: none !important;
}

.mono,
.section-note,
.chip-data,
.key_input,
.lb-position,
.lb-mass,
.serverNumber,
.brand-crumb,
.footer-ver,
.preview-caption,
.field-label,
kbd {
  font-family: var(--font-mono);
}

/* --- フォーム部品 --- */
#overlays input[type="text"],
#overlays input[type="email"],
#overlays input[type="password"] {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  margin: 0;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
  clip-path: var(--chamfer-s);
  font: 500 14px/1 var(--font-display);
  letter-spacing: 0.04em;
  outline: 0;
  transition: border-color 0.15s;
}

#overlays input[type="text"]:focus,
#overlays input[type="email"]:focus,
#overlays input[type="password"]:focus {
  border-color: var(--ink);
}

#overlays input::placeholder {
  color: var(--muted-soft);
  font-weight: 400;
}

/* --- ボタン(旧 .btn-* のクラス名をそのまま拾う) --- */
#overlays .btn,
.modal .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  margin: 0;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  clip-path: var(--chamfer-s);
  font: 500 12px/1 var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s, color 0.15s;
}

#overlays .btn:hover,
.modal .btn:hover {
  background: var(--ink);
  color: var(--paper);
}

#overlays .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

#overlays .btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--paper);
}

/* Discord は外部リンク。ブランド色は使わず桜餅パレットで統一 */
#overlays .discord-button {
  width: 100%;
}

/* ============================================================
 * 3. メニュー
 * ============================================================ */
#overlays {
  display: none; /* 表示は Overlays.show() が inline で block にする */
  position: absolute;
  inset: 0;
  z-index: var(--z-menu);
  font-size: 14px;
  background: var(--paper-veil);
  overflow: hidden;
}

/* 左端のアクセント帯と右下の斜線ハッチ。帯は Theme の紙色(#mainPanel の中の窓の影)より上に出す */
#overlays::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: var(--accent);
}

#overlays::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -120px;
  bottom: -40px;
  width: 620px;
  height: 260px;
  background-image: repeating-linear-gradient(-45deg, rgba(228, 96, 127, 0.16) 0 2px, transparent 2px 10px);
  transform: skewX(-18deg);
  pointer-events: none;
}

/*
 * 骨組み(Issue #287、rev.3「nav fixed on the left」): ナビ 180 | 40 | 本文 | 32 | サーバー 352。
 * ヘッダー・ナビ・フッターはどのタブでも同じ位置に置き、タブで変えてよいのは本文エリア(main + side の列)の中だけ。
 * 1280×800 でカンバスの寸法(ナビ left 48 / 本文 left 268・top 116 / サーバー left 880)になる
 */
#mainPanel {
  position: absolute;
  inset: 0;
  z-index: 1; /* ::after のハッチより上 */
  display: grid;
  grid-template-columns: 180px 40px minmax(0, 1fr) 32px 352px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "header header header header header"
    "nav . main . side"
    "footer footer footer footer footer";
  padding: 26px 48px 28px;
  min-width: 960px;
}

/* --- ヘッダー帯(下は横線だけ。目盛りは付けない) --- */
.menu-header {
  grid-area: header;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 62px;
  padding-bottom: 12px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--ink);
  position: relative;
}

.menu-brand {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
}

.brand-mark {
  width: 14px;
  height: 14px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

.brand-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.brand-jp {
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--muted);
  align-self: end;
  padding-bottom: 2px;
}

.brand-crumb {
  grid-column: 2 / 4;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-top: 4px;
}

/* プレイヤーチップ(#userText / #lvlText / #rpText) */
.player-chip {
  display: flex;
  align-items: stretch;
  height: 40px;
  background: var(--ink);
  color: var(--paper);
  clip-path: var(--chamfer-s);
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}

.player-chip > * {
  display: flex;
  align-items: center;
  padding: 0 14px;
}

.player-chip > * + * {
  border-left: 1px solid rgba(247, 233, 238, 0.3);
}

.chip-status {
  padding: 0 0 0 16px !important;
  border-left: 0 !important;
}

.chip-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--leaf);
}

.chip-name {
  font-weight: 500;
  padding-left: 8px !important;
  border-left: 0 !important;
}

.chip-data {
  font-size: 11px;
  color: var(--accent-soft);
}

/* --- 左: 番号付きナビレール --- */
.menu-nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.menu-nav .nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-nav .nav-item {
  margin: 0;
}

.menu-nav .nav-link {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  margin: 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  text-align: left;
  font: 500 18px/1.1 var(--font-jp);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background-color 0.15s;
}

.menu-nav .nav-link:hover {
  background: var(--panel);
}

/* 番号(data-nav-no)と英語の小見出し(data-nav-en)。textContent(和文 / 英文)は i18n が書く */
.menu-nav .nav-link::before {
  content: attr(data-nav-no);
  grid-row: 1 / 3;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.menu-nav .nav-link::after {
  content: attr(data-nav-en);
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* 英語表示のときは本文が英語なので小見出しを消す(I18n が <html lang> を書く) */
html[lang="en"] .menu-nav .nav-link::after {
  content: none;
}

html[lang="en"] .menu-nav .nav-link {
  font-family: var(--font-display);
  text-transform: uppercase;
}

.menu-nav .nav-link.active {
  background: var(--accent);
  border-left-color: var(--accent);
  clip-path: var(--slant);
  font-weight: 700;
}

.menu-nav .nav-link.active::before,
.menu-nav .nav-link.active::after {
  color: var(--ink);
  opacity: 0.8;
}

.nav-hatch {
  height: 10px;
  margin-top: 14px;
  background-image: var(--hatch);
  opacity: 0.35;
}

/*
 * User / Config / Theme は本文エリアを全部使う(サーバー一覧は畳む)。本文エリアの外枠(列 3〜5)は全タブ共通で、
 * 変えるのは #helloDialog がサーバーの列まで伸びるかどうかだけ。data-tab は Overlays が書く
 */
#overlays[data-tab="pills-user"] #helloDialog,
#overlays[data-tab="pills-config"] #helloDialog,
#overlays[data-tab="pills-theme"] #helloDialog {
  grid-column: 3 / 6;
}

#overlays[data-tab="pills-user"] .side-container,
#overlays[data-tab="pills-config"] .side-container,
#overlays[data-tab="pills-theme"] .side-container {
  display: none;
}

/* --- 中央: タブ本文 --- */
#helloDialog {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tab-content {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Bootstrap 5 の `.tab-pane { display:none } .active { display:block }` / `.fade:not(.show) { opacity:0 }` の代わり */
.tab-pane {
  display: none;
  flex-grow: 1;
  min-height: 0;
  flex-direction: column;
  gap: 18px;
}

.tab-pane.active {
  display: flex;
}

.tab-pane.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.tab-pane.fade.show {
  opacity: 1;
}

/* 節見出し: 「PROFILE // 10 SLOTS   和文の補足」 */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.section-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.section-note {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.section-jp {
  margin-left: auto;
  font-family: var(--font-jp);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.form-group {
  margin: 0;
}

.form-width {
  width: 100%;
}

/* Config / Theme / Key の中身はスクロール(.tab-pane → .form-group → リストまで flex 縦積み + min-height: 0 で高さを伝える) */
#theme_list,
#key_list {
  flex: 1 1 0;
  min-height: 0;
  padding: 0 8px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* スクロール容器の中で行が潰れない(range は潰れると当たり判定が 2px になる) */
#theme_list > *,
#key_list > * {
  flex-shrink: 0;
}

#pills-config .form-group,
#pills-theme .form-group,
#pills-key .form-group {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#overlays ::-webkit-scrollbar {
  width: 6px;
}

#overlays ::-webkit-scrollbar-thumb {
  background-color: var(--line);
}

#overlays ::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted);
}

/* --- Home --- */
.home-top {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* プロフィール 10 枠(HomePanel が .profile-box を生成) */
.profile-album {
  display: grid;
  grid-template-columns: repeat(5, 46px);
  gap: 8px;
  counter-reset: slot;
}

.profile-box {
  width: 46px;
  height: 46px;
  background: var(--card);
  border: 1px solid var(--line);
  clip-path: var(--chamfer-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  counter-increment: slot;
  transition: background-color 0.15s;
}

.profile-box::before {
  content: "0" counter(slot);
}

.profile-box:nth-child(n + 10)::before {
  content: counter(slot);
}

.profile-box:hover {
  background: var(--panel);
}

.albumSelected,
.albumSelected:hover {
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

/* スキンのプレビュー(#preview-img-area / #preview-img-area2 のクリックで編集欄を切り替える) */
.form-img-area {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.preview-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.preview-slot::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: var(--card);
  border: 1px solid var(--line);
  clip-path: var(--chamfer);
  background-image: radial-gradient(circle at center, var(--panel) 0 34px, transparent 35px);
}

#preview-img,
#preview-img2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  margin: 14px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  object-fit: cover;
  background: var(--panel);
}

.preview-slot {
  position: relative;
}

/* src の無い img はアイコンを出さない */
#preview-img:not([src]),
#preview-img2:not([src]) {
  visibility: hidden;
}

.preview-caption {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* スキン枠の状態(#368)。丸の中にアイコン、キャプションの下に文言。ok のときは何も重ねない */
.preview-slot::after {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 78px;
  height: 78px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px dashed var(--line);
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--muted-soft);
  pointer-events: none;
}

.preview-slot[data-skin-state="empty"]::after {
  content: "+";
}

.preview-slot[data-skin-state="loading"]::after {
  content: "…";
  border-style: solid;
  animation: preview-loading 1.2s ease-in-out infinite;
}

.preview-slot[data-skin-state="error"]::after,
.preview-slot[data-skin-state="tooLong"]::after,
.preview-slot[data-skin-state="notAllowed"]::after {
  content: "!";
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--panel);
}

/* 読み込み中・読み込めなかった画像は隠す(枠が二重にならず、壊れた画像の表示も出さない) */
.preview-slot[data-skin-state="loading"] img,
.preview-slot[data-skin-state="error"] img {
  visibility: hidden;
}

.preview-status {
  width: 100px;
  min-height: 1.3em;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.preview-slot[data-skin-state="error"] .preview-status,
.preview-slot[data-skin-state="tooLong"] .preview-status,
.preview-slot[data-skin-state="notAllowed"] .preview-status {
  color: var(--accent-deep);
}

@keyframes preview-loading {
  50% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-slot[data-skin-state="loading"]::after {
    animation: none;
  }
}

/* 入力欄: ラベルを箱の中の上に置く */
.home-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 56px;
  padding: 8px 12px 6px;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  clip-path: var(--chamfer-s);
  cursor: text;
}

.field:focus-within {
  border-color: var(--ink);
}

.field-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* 箱の中の input は素にする(箱側が枠を持つ) */
#overlays .field input[type="text"] {
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  clip-path: none;
  font-size: 16px;
}

.field-skin {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
}

.field-skin .field-label {
  width: 80px;
  flex-shrink: 0;
}

#overlays .field-skin input[type="text"] {
  flex-grow: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
}

/* 旧実装どおり SKIN_URL2 は隠しておき、プレビュー 2 のクリックで出す(HomePanel.showSkinInput が inline display を書く) */
#overlays #skin_url2 {
  display: none;
}

/* Play / Spectate */
.home-actions {
  margin-top: auto;
  display: flex;
  gap: 12px;
  align-items: stretch;
}

#overlays .btn-play {
  flex-grow: 2;
  height: 64px;
  clip-path: var(--chamfer);
  font-size: 22px;
  letter-spacing: 0.3em;
  padding-left: calc(16px + 0.3em);
}

/* 再生マーク。#playBtn の textContent は i18n が書き換えるので疑似要素で */
#overlays .btn-play::before {
  content: "";
  width: 14px;
  height: 16px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
}

#overlays .btn-spectate {
  flex-grow: 1;
  height: 64px;
  clip-path: var(--chamfer);
  font-size: 15px;
  letter-spacing: 0.26em;
  padding-left: calc(16px + 0.26em);
}

/* --- User(ログイン / 登録) --- */
.input-group {
  display: flex;
  gap: 8px;
  margin: 0;
}

.input-group > .form-control {
  flex: 1 1 0;
  min-width: 0;
}

.login-form .input-group > .btn,
.regist-form .input-group > .btn {
  min-width: 110px;
}

.mb-1 {
  margin-bottom: 8px;
}

/* --- User(Issue #289、rev.3「B · Menu — User」): 左 ACCOUNT / 右 RECORD・SYNC。出し分けは UserPanel が hidden で --- */
#pills-user.active {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: 24px;
}

.user-main,
.user-side,
.user-account {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 0;
}

.user-side > section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 未ログイン: ログインを促す枠 */
.user-login {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  clip-path: var(--chamfer);
}

.user-login-text {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

#overlays .user-login .discord-button {
  width: auto;
  align-self: flex-start;
  height: 44px;
  padding: 0 22px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

#overlays .user-login .discord-button:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* アカウント: 面取りした墨の四角(頭文字 / アバター)+ 名前・VERIFIED・連携日・LEVEL と EXP バー */
.account-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  clip-path: var(--chamfer);
}

.account-avatar {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  clip-path: var(--chamfer);
  font-size: 34px;
  font-weight: 700;
}

#accountAvatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-body {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 700;
}

.verified-tag {
  flex-shrink: 0;
  padding: 2px 6px;
  background: var(--ink);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.account-since,
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.account-level {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.account-level-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.account-level-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.account-level-num {
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.account-exp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* 成績の 3 枚(返った項目だけ出る。1〜2 枚でも同じ幅で左から詰める) */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  clip-path: var(--chamfer-s);
}

.stat-num {
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}

.stat-jp,
.season-text,
.sync-note {
  font-family: var(--font-jp);
  font-size: 10px;
  color: var(--muted);
}

/* SEASON: #285 で決まるまで破線の枠だけ */
.season-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px dashed #c9a4b1;
  clip-path: var(--chamfer-s);
}

.season-text {
  font-size: 12px;
}

/* 下のボタン: RANKING は墨塗り、DISCORD は枠線、LOGOUT は右端に濃い桜の枠線 */
.user-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
}

#overlays .user-actions .btn {
  height: 44px;
  padding: 0 22px;
}

#overlays .user-actions [data-ranking-open] {
  background: var(--ink);
  color: var(--paper);
}

#overlays .user-actions [data-ranking-open]:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

#overlays .user-actions .btn-logout {
  margin-left: auto;
  border-color: var(--accent-deep);
  color: var(--accent-deep);
}

#overlays .user-actions .btn-logout:hover {
  background: var(--accent-deep);
  color: var(--paper);
}

/* RECORD: 墨の見出し行 + モードごとの行(UserPanel が生成) */
.record-table {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-soft);
  clip-path: var(--chamfer);
}

.record-head,
.record-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.6fr);
  align-items: center;
  padding: 0 14px;
}

.record-head {
  height: 32px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.record-row {
  height: 38px;
  border-bottom: 1px solid var(--panel);
  font-size: 13px;
}

.record-head > :not(:first-child),
.record-mass,
.record-rank {
  text-align: right;
}

.record-mode {
  font-weight: 500;
  letter-spacing: 0.1em;
}

.record-mass,
.record-rank {
  font-family: var(--font-mono);
}

.record-rank {
  color: var(--accent-deep);
}

/* SYNC: 状態の点(保存済み = 葉色 / 未保存 = 薄い桜 / 不明 = 灰)+ 文言 + 日時 */
.sync-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  clip-path: var(--chamfer-s);
}

.sync-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--muted-soft);
}

.sync-card[data-state="saved"] .sync-dot {
  background: var(--leaf);
}

.sync-card[data-state="empty"] .sync-dot {
  background: var(--accent-soft);
}

.sync-text {
  font-family: var(--font-jp);
  font-size: 13px;
}

.sync-time {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.sync-note {
  margin: 0;
  font-size: 11px;
}

/* --- Config(ConfigPanel が生成: .checkbox_list > .form-check.form-switch × 16、.range_list > .form-group × 11) ---
   カンバス「B · Menu — Config」(rev.3、Issue #288)どおり左にスイッチ、右に数値 + 背景画像 URL の同じ幅の 2 列。
   列見出し(.cfg-head-*)は index.html、一覧は角の欠けた白いカードで、左右それぞれが独立してスクロールする */
#range_list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 24px;
  row-gap: 14px;
  min-height: 0;
  padding: 0;
  overflow: visible; /* スクロールは左右のカラムが各々持つ */
}

.cfg-head-switch {
  grid-column: 1;
  grid-row: 1;
}

.cfg-head-range {
  grid-column: 2;
  grid-row: 1;
}

.checkbox_list {
  grid-column: 1;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--card);
  border: 1px solid var(--line-soft);
  clip-path: var(--chamfer);
  counter-reset: sw;
}

.range_list {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--card);
  border: 1px solid var(--line-soft);
  clip-path: var(--chamfer);
}

/* 背景画像 URL は右カラムの最下段(Home の入力欄と同じ「箱の中にラベル」) */
.field-bg {
  grid-column: 2;
  grid-row: 3;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
}

.field-bg .field-label {
  width: 96px;
  flex-shrink: 0;
}

#overlays .field-bg input[type="text"] {
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  clip-path: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
}

/* --- スイッチ 1 行: 番号 / 和文ラベル / トグル(入 / 切は色とつまみの位置で読む。rev.3 は ON / OFF の文字を出さない) --- */
.form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0; /* スクロール容器の中で潰れないよう(高さ 38px を保つ) */
  height: 38px;
  padding: 0 12px;
  margin: 0;
  border-bottom: 1px solid var(--panel);
  counter-increment: sw;
  transition: background-color 0.15s;
}

.form-check:hover {
  background: var(--paper);
}

.form-check::before {
  content: "0" counter(sw);
  width: 18px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-soft);
}

.form-check:nth-child(n + 10)::before {
  content: counter(sw);
}

.form-check-label {
  flex-grow: 1;
  order: 1;
  min-width: 0;
  font-family: var(--font-jp);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* トグル: 40×20 の丸いつまみ。切は薄い桜、入は桜色で白いノブが右へ */
.form-check-input {
  order: 3;
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 20px;
  margin: 0;
  background: var(--line);
  border: 0;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s;
}

.form-check-input::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card);
  transition: transform 0.15s;
}

.form-check-input:checked {
  background: var(--accent);
}

.form-check-input:checked::after {
  transform: translateX(20px);
}

.form-check-input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- スライダー 1 行: 和文ラベル + 値、値まで桜色で塗ったトラック --- */
.range_list > .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0; /* スクロール容器の中で潰れないよう(潰れると range の当たり判定がトラックの 4px になる) */
  padding: 8px 12px 4px;
  border-bottom: 1px solid var(--panel);
}

.form-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.form-label > span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-deep);
}

/*
 * `input[type=range]`: `appearance: none` だと要素の高さは指定値になるが、flex アイテムとして縮むと
 * トラック(4px)まで潰れて掴めなくなる。高さを確保しつつ `flex-shrink: 0` で守る。
 * トラックは `margin` で縦中央に置き、ノブ(12×14 の五角形)はその上下にはみ出させる。
 * 値までの塗りは ConfigPanel が書く `--fill`(0〜100%)
 */
.form-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.form-range::-webkit-slider-runnable-track {
  height: 4px;
  margin: 10px 0;
  background: linear-gradient(90deg, var(--accent) 0 var(--fill, 0%), var(--panel) var(--fill, 0%) 100%);
}

.form-range::-moz-range-track {
  height: 4px;
  background: var(--panel);
}

.form-range::-moz-range-progress {
  height: 4px;
  background: var(--accent);
}

.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 14px;
  margin-top: -5px;
  background: var(--ink);
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

.form-range::-moz-range-thumb {
  width: 12px;
  height: 14px;
  background: var(--ink);
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

.form-range:hover::-webkit-slider-thumb {
  background: var(--accent-deep);
}

.form-range:hover::-moz-range-thumb {
  background: var(--accent-deep);
}

.form-range:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- Theme(ThemePanel が生成: .theme-form-group > label + input[type=color]) --- */
#theme_list {
  counter-reset: th;
}

.theme-form-group {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 8px;
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
  counter-increment: th;
  transition: background-color 0.15s;
}

.theme-form-group:hover {
  background: var(--card);
}

.theme-form-group::before {
  content: "0" counter(th);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
}

.theme-form-group:nth-child(n + 10)::before {
  content: counter(th);
}

.theme-form-group > label {
  flex-grow: 1;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 13px;
  cursor: pointer;
}

/* `<input type="color">`(minicolors の置き換え)。面取りした色見本だけ見せる */
.theme-form-group > input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: transparent;
  clip-path: var(--chamfer-s);
  cursor: pointer;
}

.theme-form-group > input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.theme-form-group > input[type="color"]::-webkit-color-swatch {
  border: 0;
}

.theme-form-group > input[type="color"]::-moz-color-swatch {
  border: 0;
}

/* --- Key(KeyPanel が生成: .keyConfig-div[data-action] > span + .key_input、マウス行は .mouse-div) --- */
.keyConfig {
  counter-reset: kc;
}

.keyConfig-div {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  counter-increment: kc;
  cursor: pointer;
  transition: background-color 0.15s;
}

.keyConfig-div::before {
  content: "0" counter(kc);
  width: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

.keyConfig-div:nth-child(n + 10)::before {
  content: counter(kc);
}

.keyConfig-div > span {
  flex-grow: 1;
  font-family: var(--font-jp);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.keyConfig-div:hover {
  background: var(--card);
}

.keyConfig-div.selected,
.keyConfig-div.selected:hover {
  background: var(--accent);
  clip-path: var(--slant);
}

.keyConfig-div > .key_input {
  min-width: 70px;
  height: 26px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  font-size: 11px;
  letter-spacing: 0.1em;
  background: var(--card);
}

.keyConfig-div.selected > .key_input {
  background: var(--ink);
  color: var(--paper);
}

/* --- 右: サーバー一覧 + プレイヤーカード --- */
.side-container {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
}

.server-box {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  counter-reset: sv;
}

/* 選択中(ServerList が .active)は濃い札 + 左端の桜色の縦線(rev.3、Issue #288) */
.server-div {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  clip-path: var(--chamfer-s);
  cursor: pointer;
  counter-increment: sv;
  transition: background-color 0.15s;
}

.server-div:hover {
  background: var(--panel);
}

.server-div.active,
.server-div.active:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  box-shadow: inset 4px 0 0 var(--accent);
}

.server-div.active .server-status {
  background: #8fd47a; /* 濃い地の上の葉色(--leaf では沈む) */
}

.server-div.active .server-desc {
  color: #c9a4b1;
}

.server-div.active .serverNumber {
  color: var(--accent-soft);
}

.server-name {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.server-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--leaf);
  flex-shrink: 0;
}

.onServer {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.server-desc {
  font-family: var(--font-jp);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* 旧 `<span class="label serverNumber">1</span>`(サーバー番号)。数字は残しつつ「NO.0n」として右端に */
.serverNumber {
  font-size: 0; /* 元の "1" は読み上げ用に残し、見た目は ::before の連番だけ */
  letter-spacing: 0.12em;
  color: var(--muted);
}

.serverNumber::before {
  content: "NO.0" counter(sv);
  font-size: 10px;
}

.player-card {
  margin-top: auto;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  clip-path: var(--chamfer);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 1 行目: 名前 / DISCORD(ログイン中だけ)/ USER ›(ユーザタブへ) */
.player-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.card-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
}

#overlays .card-link {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  cursor: pointer;
}

#overlays .card-link:hover {
  color: var(--ink);
}

/* 2 行目: LV / RANK / EXP% */
.player-stats {
  display: flex;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.stat-val {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.stat-exp {
  margin-left: auto;
}

/* 経験値バー(LoginPanel が #level-progress の width / textContent を書く)。数値は上の EXP% に出すので、バーの文字は読み上げ用 */
.progress {
  position: relative;
  height: 6px;
  background: var(--panel);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 50%;
  background: var(--accent);
  font-size: 0;
  transition: width 0.3s;
}

/* 目盛り: 28px ごとに白い切れ目 */
.progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 26px, var(--card) 26px 28px);
  pointer-events: none;
}

.player-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 4px;
}

#overlays .player-card-actions .btn {
  height: 36px;
  padding: 0 8px;
  font-size: 11px;
}

.lang-switch {
  display: flex;
  border: 1px solid var(--ink);
}

#overlays .lang-switch .btn {
  height: 34px;
  min-width: 40px;
  padding: 0 8px;
  border: 0;
  clip-path: none;
  letter-spacing: 0.08em;
  text-transform: none;
}

#overlays #jp {
  font-family: var(--font-jp);
}

/* 選ばれている言語は墨塗り(I18n が <html lang> を書く) */
html[lang="ja"] #overlays #jp,
html[lang="en"] #overlays #en {
  background: var(--ink);
  color: var(--paper);
}

/* --- フッター --- */
.menu-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}

.key-hints {
  display: flex;
  gap: 24px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.key-hint {
  display: flex;
  align-items: center;
  gap: 8px;
}

kbd {
  padding: 2px 6px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.footer-deco {
  display: flex;
  align-items: center;
  gap: 12px;
}

.barcode {
  width: 120px;
  height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 11px);
}

.footer-ver {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* ボトムシートのつまみ(Issue #101)。スマホ縦の Theme でだけ出す(下の @media) */
#sheet-grip {
  display: none;
}

/* ============================================================
 * 3b. Theme のライブプレビュー(Issue #100 → #287)
 *   本文エリアの左を「窓」(.preview-window)、右 420px を色の一覧(.theme-editor)にする。ナビ・ヘッダー・フッターは動かさない。
 *   Overlays が `#overlays[data-tab]` に active な pane の id を書くので、Theme のときだけ #overlays の背景を消し、
 *   代わりに窓の box-shadow(外側に大きく広げる)で窓の外を紙色に塗る。窓は #mainPanel の重なりの一番下(z-index: -1)なので
 *   ナビ・本文はその上に出て、窓の中だけ下の canvas(盤面)と HUD が見える。
 *   `.peek`(SPACE 押下中 / 「メニューを隠す」)は #mainPanel ごと透明にするので、紙色も消えて盤面全体が見える
 * ============================================================ */
#overlays[data-tab="pills-theme"] {
  background: transparent;
}

#overlays[data-tab="pills-theme"]::after {
  content: none;
}

#pills-theme.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  grid-template-rows: minmax(0, 1fr);
  column-gap: 24px;
}

/* opacity の遷移中は pane が重なりの文脈になり、窓の影がナビの上に出てしまう */
#pills-theme.fade {
  transition: none;
}

.theme-preview {
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  row-gap: 14px;
  min-height: 0;
}

.preview-window {
  position: relative;
  z-index: -1;
  box-shadow: 0 0 0 200vmax var(--paper-veil);
}

/* clip-path は影まで切るので、面取りは 2 隅に紙色の三角を置いて描く */
.preview-window::before,
.preview-window::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--paper-veil);
}

.preview-window::before {
  top: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.preview-window::after {
  bottom: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.theme-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 0;
}

.theme-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.theme-actions .key-hint {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* 「メニューを隠す」: Theme のときだけ窓の左上に出す(#mainPanel の外)。本文 left 268 / 窓 top 116 + 30 + 14 = 160 */
#theme-tools {
  display: none;
  position: absolute;
  left: 280px;
  top: 172px;
  z-index: 2;
}

#overlays[data-tab="pills-theme"] #theme-tools {
  display: flex;
}

.theme-peek {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  margin: 0;
  background: var(--paper-a);
  clip-path: var(--chamfer-s);
  font-size: 11px;
  letter-spacing: 0.16em;
  cursor: pointer;
  user-select: none;
}

.theme-peek > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

#overlays.peek::before,
#overlays.peek #mainPanel {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}

/*
 * LB / チームランクは窓の右上へ寄せる(11 のリーダーボード色を見ながら選べる)。#overlays の外なので :has() で。
 * 窓の右端 = 右余白 48 + 色の一覧 420 + 間 24。スマホ縦はボトムシートなので寄せない
 */
@media (min-width: 768px) {
  html:has(#overlays[data-tab="pills-theme"][style*="block"]) #div_lb {
    right: 504px;
    top: 172px;
  }

  html:has(#overlays[data-tab="pills-theme"][style*="block"]) #div_lb2 {
    right: 504px;
    top: 492px;
  }
}

/* ============================================================
 * 4. HUD(Issue #33 → rev.3 は #290: 四隅 + 画面下の情報バーだけ)
 *   左上 #div_server(サーバー札)/ 右上 #div_lb(リーダーボード)+ #div_lb2(チームランク)/
 *   左下 #chatroom / 右下 ミニマップ(PixiJS、MinimapView)/ 最下部 #div_score(半透明の情報バー)
 * ============================================================ */
#div_lb,
#div_lb2,
#div_score,
#div_server {
  position: absolute;
  z-index: var(--z-hud); /* canvas の上、#overlays(200)の下 */
  cursor: default;
  user-select: none;
  font-size: 12px;
}

/* hidden 属性(キー案内・人数)は display を書いた規則より強くする */
#div_score [hidden],
#div_server [hidden] {
  display: none !important;
}

/* 左上: サーバー札「● MAIN | 42 ONLINE 12 SPEC」 */
#div_server {
  left: 20px;
  top: 20px;
  display: flex;
  align-items: stretch;
  height: 30px;
  background: rgba(247, 233, 238, 0.9);
  clip-path: var(--chamfer-s);
  font-size: 11px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.srv-mode {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

.srv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fd47a; /* 濃い地の上の葉色(--leaf では沈む) */
}

.srv-counts {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

.srv-counts b {
  font-weight: 500;
  color: var(--ink);
}

/* 右上: リーダーボード(10 位まで、名前だけ)。自分の行は桜色の斜め札 */
#div_lb {
  top: 20px;
  right: 20px;
  width: 196px;
  padding: 8px 10px;
  background: rgba(247, 233, 238, 0.88);
  clip-path: var(--chamfer-s);
  overflow: hidden;
  white-space: nowrap;
}

/* .header の色は ThemePanel(lbColor)が inline で書く */
#div_lb > .header,
#div_lb2 > .header {
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  overflow: hidden;
}

/* 行: Leaderboard.update がバッジ / nick / mass / position の順で span を作る。順位を先頭に */
.lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 19px;
  letter-spacing: 0.04em;
}

.lb-position {
  order: -1;
  width: 16px;
  font-size: 10px;
  color: var(--accent-deep);
  flex-shrink: 0;
}

.lb-row:nth-child(n + 4) .lb-position {
  color: var(--muted);
}

/* サーバーが受け手自身の行だけ id を送る(Leaderboard が .lb-me を付ける) */
.lb-row.lb-me {
  margin: 0 -10px;
  padding: 0 10px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font-weight: 700;
}

.lb-row.lb-me .lb-position {
  color: var(--ink);
}

/* 認証済みマークの丸バッジ(#235)。リーダーボードとチャットの名前の前に置く。
   色は状態表示用の --leaf(認証済み)と --muted(未ログイン)だけを使う。 */
.name-badge {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--muted);
  vertical-align: -1px;
}

.name-badge.is-verified {
  color: var(--leaf);
}

#chatroom .name-badge {
  margin-right: 3px;
}

/* リーダーボードは幅が狭く、名前が ellipsis で切れる。バッジのぶん名前が縮まないよう小さめに詰める */
.lb-row .name-badge {
  margin-right: -3px;
}

.lb-nick {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.lb-row.lb-me .lb-nick {
  font-weight: 700;
}

/* rev.3 のリーダーボードは名前だけ(スコアは下の情報バーで自分の分を見る) */
.lb-mass {
  display: none;
}

/* チームランク: リーダーボードの下(TeamRankHud が行の色を inline で書く) */
#div_lb2 {
  top: 262px;
  right: 20px;
  width: 196px;
  padding: 8px 10px;
  background: rgba(247, 233, 238, 0.88);
  clip-path: var(--chamfer-s);
}

#lb_detail2 > div {
  height: 19px;
  line-height: 19px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * 最下部: 画面幅いっぱいの情報バー。完全な黒だと下のセル・ペレットが欠けるので半透明 + ぼかし(2026-09-27 ユーザー要望)。
 * 操作は下の盤面に通す(マウスの照準・タッチボタンを塞がない)
 */
#div_score.info-bar {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--infobar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  background: rgba(26, 20, 23, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(240, 183, 198, 0.18);
  color: var(--paper);
  white-space: nowrap;
  pointer-events: none;
}

.info-fps {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-soft);
}

.info-sep {
  width: 1px;
  height: 18px;
  background: rgba(240, 183, 198, 0.25);
}

.info-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.info-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #c9a4b1;
}

.info-val {
  font-family: var(--font-mono);
  font-size: 13px;
}

.info-mass .info-val {
  font-size: 20px;
  font-weight: 500;
  color: #ff8fae; /* 暗い地の上で読める桜 */
}

.info-keys {
  margin-left: auto;
  display: flex;
  gap: 20px;
}

.info-bar .key-hint {
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #c9a4b1;
}

.info-bar kbd {
  padding: 1px 6px;
  border: 1px solid rgba(247, 233, 238, 0.7);
  color: var(--paper);
  font-size: 10px;
}

/*
 * タッチ端末(main.ts が <html class="touch">)の HUD(rev.3、Issue #292、カンバス「B · SP HUD」縦 / 横)。
 * ボタン・ジョイスティックは PixiJS(TouchLayout / TouchControlsView)。左上は 44px のボタン 2 列 × 3 段、右上は LB・ズームの 1 列。
 * DOM の HUD はその隙間に置く: サーバー札はメニューボタンの右、リーダーボード(上位 5 人)は LB ボタンの左。
 * 横向きの差分はチャットの規則の後ろの `@media (orientation: landscape)` にまとめる
 */
.touch #div_server {
  left: 60px;
  top: 17px;
  height: 30px;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.touch .srv-mode {
  gap: 5px;
  padding: 0 9px;
}

/* 札は「MAIN | 42」だけ(ONLINE / SPEC の文字と観戦数は出さない) */
.touch .srv-counts {
  gap: 0;
  padding: 0 9px;
  font-size: 0;
}

.touch #srv_total {
  font-size: 10px;
}

.touch #srv_spec {
  display: none;
}

.touch #div_lb {
  top: 10px;
  right: 60px;
  width: 132px;
  padding: 6px 8px;
  font-size: 11px;
}

.touch #div_lb > .header {
  display: none;
}

.touch .lb-row {
  height: 17px;
  gap: 6px;
}

.touch .lb-position {
  width: 14px;
  font-size: 9px;
}

.touch .lb-row.lb-me {
  margin: 0 -8px;
  padding: 0 8px;
}

/* チームランク: リーダーボード(5 行)の下 */
.touch #div_lb2 {
  top: 124px;
  right: 60px;
  width: 132px;
  padding: 6px 8px;
  font-size: 11px;
}

/*
 * 情報バー: 画面幅いっぱいの半透明(縦 40px / 横 36px、TouchLayout の INFO_BAR_HEIGHT_* と同じ)。
 * 低性能スマホで重いので backdrop-filter は切る(Issue #292 の Risks)。並びは MASS・CELLS・(右寄せ)SCORE、横は右端に FPS
 */
.touch #div_score.info-bar {
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  gap: 14px;
  padding: 0 14px;
  background: rgba(26, 20, 23, 0.55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.touch .info-sep,
.touch .info-keys {
  display: none;
}

.touch .info-fps {
  display: none;
}

.touch .info-mass {
  order: 1;
}

.touch .info-cells {
  order: 2;
}

.touch .info-score {
  order: 3;
  margin-left: auto;
}

.touch .info-label {
  font-size: 9px;
}

.touch .info-val {
  font-size: 10px;
}

.touch .info-mass .info-val {
  font-size: 17px;
}

/* ============================================================
 * 5. チャット(Issue #34: #chatroom / #chatboxArea2 / #input_box2)
 * ============================================================ */
/*
 * PC: 左下、情報バーの上。枠なしで直近 3 行(文字に影)、操作は盤面に通す(rev.3、Issue #290)。
 * ENTER で入力欄を開いている間(Chat が .is-open)だけ、地を敷いて履歴をさかのぼれるようにする
 */
#chatroom {
  position: absolute;
  left: 20px;
  bottom: calc(var(--infobar-h) + 16px);
  width: 360px;
  max-height: calc(3 * var(--chat-line-h));
  padding: 0;
  color: var(--paper);
  background: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-size: 12px;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-hud);
}

#chatroom.is-open {
  max-height: 200px;
  padding: 8px 10px;
  background: var(--field-a);
  clip-path: var(--chamfer-s);
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
}

#chatroom::-webkit-scrollbar {
  width: 6px;
}

#chatroom::-webkit-scrollbar-thumb {
  background-color: var(--muted);
}

/* 閉じているときは 1 発言 = 1 行(3 行ぶんの高さで切るため、長い発言は … で切る) */
#chatroom > div {
  line-height: var(--chat-line-h);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chatroom.is-open > div {
  white-space: normal;
  word-break: break-all;
}

#chatroom .time {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-soft);
}

#chatroom.is-open .time {
  display: inline;
}

/* 送信者の色は Chat が inline で書く */
#chatroom .sender {
  font-weight: 500;
}

#chatroom .msg {
  font-family: var(--font-jp);
}

/*
 * タッチ端末(rev.3、Issue #292): ログはチャットボタンで入力欄を開いたとき(.is-open)だけ出す。
 * HudPanel が inline display を書くので、閉じている間は visibility で隠す。
 * 縦: ミニマップ(y 170〜290、MinimapView の MINIMAP_TOUCH_PORTRAIT_POS)の下 / 横: 下の landscape の規則
 */
.touch #chatroom:not(.is-open) {
  visibility: hidden;
}

.touch #chatroom {
  top: 300px;
  bottom: auto;
  left: 10px;
  right: 10px;
  width: auto;
  max-height: 160px;
  font-size: 11px;
}

/*
 * タッチ端末の横向き(高さ 390 前後)。縦との差分だけ:
 * 情報バー 36px で右端に FPS、チャットのログはミニマップ(x 116〜236、MINIMAP_TOUCH_LANDSCAPE_POS)の右・リーダーボードの左
 */
@media (orientation: landscape) {
  .touch #div_score.info-bar {
    height: 36px;
    gap: 16px;
  }

  .touch .info-score {
    margin-left: 0;
  }

  .touch .info-fps {
    display: inline;
    order: 4;
    margin-left: auto;
    font-size: 10px;
  }

  .touch #chatroom {
    top: 62px;
    left: 246px;
    right: 202px;
    max-height: 140px;
  }
}

/* 入力欄: 画面下部中央。表示 / 非表示は Chat が inline display で切り替える */
#chatboxArea2 {
  position: absolute;
  left: 50%;
  bottom: calc(var(--infobar-h) + 16px);
  width: 37%;
  min-width: 320px;
  transform: translateX(-50%);
  z-index: var(--z-hud);
}

#input_box2 {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px 0 74px;
  color: var(--ink);
  background: var(--paper-a);
  border: 0;
  border-left: 4px solid var(--accent);
  border-radius: 0;
  clip-path: var(--chamfer-s);
  font: 400 15px/1 var(--font-jp);
  outline: 0;
}

/* 「CHAT」の見出しを左に固定で描く */
#chatboxArea2::before {
  content: "CHAT";
  position: absolute;
  z-index: 1; /* clip-path 付きの input の上に */
  left: 16px;
  top: 0;
  height: 44px;
  line-height: 44px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  pointer-events: none;
}

/* ============================================================
 * 6. ランキングモーダル(Issue #35: 旧 Bootstrap 5 の .modal。開閉は RankingModal が行う)/ トースト
 * ============================================================ */
.modal {
  display: none; /* RankingModal.show が block にする */
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  overflow: hidden;
  outline: 0;
  opacity: 0;
  transition: opacity 0.15s linear;
}

.modal.show {
  opacity: 1;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background: var(--field);
  opacity: 0;
  transition: opacity 0.15s linear;
}

.modal-backdrop.show {
  opacity: 0.6;
}

body.modal-open {
  overflow: hidden;
}

.modal-dialog {
  position: relative;
  width: min(700px, calc(100% - 32px));
  height: calc(100% - 64px);
  margin: 32px auto;
  display: flex;
  align-items: stretch;
}

.modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  clip-path: var(--chamfer);
}

.modal-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 24px 12px;
  border-bottom: 1px solid var(--ink);
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 24px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 24px 18px;
  border-top: 1px solid var(--line);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.table th,
.table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
}

.table thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
}

.table tbody th {
  font-family: var(--font-mono);
  color: var(--accent-deep);
}

.table tbody tr:hover {
  background: var(--card);
}

/* トースト(Issue #35: showToast が生成、hideAfterMs 後に .hide → 取り除く) */
.toast-msg {
  position: fixed;
  left: 24px;
  bottom: 84px;
  z-index: var(--z-toast);
  padding: 10px 16px;
  background: var(--leaf);
  color: var(--paper);
  border-left: 4px solid var(--ink);
  clip-path: var(--chamfer-s);
  font-family: var(--font-jp);
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 1;
  transition: opacity 0.3s;
  pointer-events: none;
}

.toast-msg.hide {
  opacity: 0;
}

.toast-msg.error {
  background: var(--accent-deep);
}

/* ============================================================
 * 7. スマホ縦(Issue #101、カンバス「B · SP Home」「B · SP HUD」「B · SP Theme sheet」)
 *   PC の規則はこの上にそのまま。ここでは #mainPanel を縦積み + 縦スクロールにし、タブ列とサーバー一覧を横スクロール、
 *   Theme をボトムシートにする。タッチボタン(PixiJS 側)の位置は TouchLayout の既定のまま
 * ============================================================ */
@media (max-width: 767px) {
  #overlays::before {
    width: 4px;
  }

  #overlays::after {
    right: -80px;
    bottom: -30px;
    width: 300px;
    height: 140px;
  }

  #mainPanel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 54px 16px calc(24px + var(--tabbar-h)); /* 最後の行が下固定のタブバーに隠れない */
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* 縦積みの各ブロックは縮めない(スクロール容器の min-height は 0 になるので、横スクロールの列が潰れる) */
  #mainPanel > *,
  .side-container > * {
    flex-shrink: 0;
  }

  /* --- ヘッダー: ブランドを小さく、チップは 2 行目 --- */
  .menu-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    height: auto;
    padding-bottom: 10px;
    margin-bottom: 0;
  }

  .menu-brand {
    justify-content: start;
  }

  .brand-title {
    font-size: 22px;
  }

  .brand-mark {
    width: 11px;
    height: 11px;
  }

  .brand-jp {
    font-size: 12px;
  }

  .brand-crumb {
    font-size: 10px;
    margin-top: 2px;
  }

  .player-chip {
    height: 32px;
    font-size: 11px;
    align-self: flex-start;
    margin-bottom: 0;
  }

  .player-chip > * {
    padding: 0 10px;
  }

  .chip-status {
    padding-left: 12px !important;
  }

  /* --- タブ列: 横スクロールのチップ --- */
  /*
   * --- タブバー(Issue #291): PC と同じ .menu-nav を画面下に固定する。どのタブでも同じ位置(data-tab で動かさない)。
   *     1 つのタブは「番号 / 名前(i18n)/ 英語の小見出し」の 3 段で、選択中は桜色の斜め札 ---
   */
  .menu-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--paper);
    border-top: 1px solid var(--ink);
  }

  .menu-nav .nav {
    flex-direction: row;
    gap: 0;
    height: 100%;
  }

  .menu-nav .nav-item {
    flex: 1 1 0;
    min-width: 0;
  }

  .menu-nav .nav-link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-content: center;
    row-gap: 1px;
    height: 100%;
    padding: 0 4px;
    border-left: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
  }

  .menu-nav .nav-link::before {
    grid-row: auto;
    font-size: 9px;
  }

  .menu-nav .nav-link::after {
    grid-column: auto; /* PC の 2 列目指定を外す(1 列の 3 段にする) */
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .menu-nav .nav-link.active {
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  }

  .nav-hatch {
    display: none;
  }

  /* --- 右サイドの中身(サーバー一覧・プレイヤーカード)を縦積みの中に並べ替える --- */
  .side-container {
    display: contents;
  }

  .side-container > .section-head {
    order: 3;
  }

  .server-box {
    order: 4;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .server-box::-webkit-scrollbar {
    display: none;
  }

  .server-div {
    flex-shrink: 0;
    height: 44px;
    padding: 0 12px;
  }

  .onServer {
    font-size: 13px;
  }

  .serverNumber,
  .server-desc {
    display: none;
  }

  /* タブ本文は自然な高さ(#mainPanel がスクロール)。PC の min-height: 0 / flex 縮小を戻す */
  #helloDialog {
    order: 5;
    flex-grow: 1;
    flex-shrink: 0;
    min-height: auto;
  }

  .tab-content,
  .tab-pane,
  #pills-config .form-group,
  #pills-theme .form-group,
  #pills-key .form-group {
    flex-shrink: 0;
    min-height: auto;
  }

  .section-head {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .section-note {
    white-space: nowrap;
  }

  .section-jp {
    display: none;
  }

  .player-card {
    order: 6;
    margin-top: 0;
    padding: 12px 14px;
  }

  /* キー操作の案内はタッチ端末に無いので出さない(タブバーが画面下を使う) */
  .menu-footer {
    display: none;
  }

  .key-hints {
    gap: 14px;
    font-size: 10px;
  }

  .barcode {
    width: 80px;
    height: 6px;
  }

  .footer-ver {
    display: none;
  }

  /* --- Home --- */
  .home-top {
    flex-direction: column;
    gap: 12px;
  }

  .profile-album {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }

  .profile-box {
    width: auto;
    height: 48px;
  }

  .form-img-area {
    margin-left: 0;
  }

  .preview-slot::before {
    width: 88px;
    height: 88px;
    background-image: radial-gradient(circle at center, var(--panel) 0 30px, transparent 31px);
  }

  #preview-img,
  #preview-img2 {
    width: 64px;
    height: 64px;
    margin: 12px;
  }

  .home-fields {
    gap: 8px;
  }

  .field {
    height: 52px;
    padding: 6px 10px 4px;
  }

  #overlays .btn-play {
    height: 60px;
    font-size: 20px;
  }

  #overlays .btn-spectate {
    height: 60px;
    font-size: 13px;
  }

  .home-actions {
    margin-top: 12px;
  }

  /* --- User / Config / Theme / Key: リストは縦積みの中で自然な高さ(#mainPanel がスクロール) --- */
  .input-group {
    flex-wrap: wrap;
  }

  .input-group > .form-control {
    flex-basis: 100%;
  }

  .login-form .input-group > .btn,
  .regist-form .input-group > .btn {
    flex-grow: 1;
  }

  #theme_list,
  #key_list {
    flex: none;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  /* User は 2 列をやめて縦積み(スマホの作り替えは #291) */
  #pills-user.active {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /*
   * スマホのユーザー画面(Issue #291、カンバス「B · SP User」): 部品は PC と同じで、寸法だけ詰める。
   * 左右の列をほどいて 1 列に並べ、RANKING / DISCORD / LOGOUT は RECORD・SYNC の後(最後)に置く
   */
  .user-main,
  .user-side {
    display: contents;
  }

  .user-actions {
    order: 1;
  }

  .account-card {
    gap: 14px;
    padding: 14px;
  }

  .account-avatar {
    width: 64px;
    height: 64px;
    font-size: 26px;
  }

  .account-name {
    font-size: 18px;
  }

  .account-level-num {
    font-size: 24px;
  }

  .stat-cards {
    gap: 8px;
  }

  .stat-card {
    padding: 10px;
  }

  .stat-num {
    font-size: 20px;
  }

  .stat-card .stat-jp {
    display: none;
  }

  .record-head {
    height: 28px;
    padding: 0 12px;
  }

  .record-row {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .season-text {
    font-size: 11px;
  }

  .user-actions {
    margin-top: 0;
    gap: 8px;
  }

  #overlays .user-actions .btn {
    flex-grow: 1;
    padding: 0 12px;
  }

  #overlays .user-actions .btn-logout {
    flex-grow: 0;
    width: 96px;
    margin-left: 0;
  }

  /* Config は PC の 2 カラム grid をやめて 1 カラムに縦積み(#mainPanel がスクロールする) */
  #range_list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    row-gap: 10px;
  }

  .cfg-head-switch {
    grid-column: 1;
    grid-row: 1;
  }

  .cfg-head-range {
    grid-column: 1;
    grid-row: 3;
  }

  .checkbox_list {
    grid-column: 1;
    grid-row: 2;
    overflow: visible;
    padding-right: 0;
  }

  .range_list {
    grid-column: 1;
    grid-row: 4;
    overflow: visible;
  }

  .field-bg {
    grid-column: 1;
    grid-row: 5;
  }

  .field-bg .field-label {
    width: 88px;
  }

  .form-check {
    padding: 0 6px;
  }

  .keyConfig-div {
    padding: 0 6px;
  }

  /* --- Theme: ボトムシート(上半分に盤面) --- */
  #overlays[data-tab="pills-theme"] #mainPanel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    top: auto;
    bottom: var(--tabbar-h); /* シートは下固定のタブバーの上に置く */
    height: 440px;
    padding: 10px 16px 20px;
    background: rgba(247, 233, 238, 0.97);
    border-top: 1px solid var(--line);
    overflow: hidden;
    transition: height 0.2s ease-out;
  }

  #overlays.sheet-full[data-tab="pills-theme"] #mainPanel {
    height: calc(100% - 48px - var(--tabbar-h));
  }

  #overlays[data-tab="pills-theme"]::before,
  #overlays[data-tab="pills-theme"] .menu-footer {
    display: none;
  }

  /* ヘッダーは画面上端に固定した細い帯(#mainPanel はシートなので fixed で外に出す) */
  #overlays[data-tab="pills-theme"] .menu-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    height: 48px;
    background: var(--paper-a);
    flex-direction: row;
    align-items: center;
    padding: 0 12px 0 16px;
    margin: 0;
    border-bottom: 1px solid var(--line);
  }

  #overlays[data-tab="pills-theme"] .brand-title {
    font-size: 15px;
  }

  #overlays[data-tab="pills-theme"] .brand-jp,
  #overlays[data-tab="pills-theme"] .player-chip {
    display: none;
  }

  #overlays[data-tab="pills-theme"] .brand-crumb {
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    font-size: 9px;
  }

  #overlays[data-tab="pills-theme"] .menu-brand {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    column-gap: 10px;
  }

  /* つまみ */
  #overlays[data-tab="pills-theme"] #sheet-grip {
    display: block;
    order: 1;
    width: 100%;
    height: 24px;
    margin: -10px 0 -14px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  #overlays[data-tab="pills-theme"] #sheet-grip::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 10px auto 0;
    background: var(--line);
  }

  /* つまみと tab-content をシートの直下に並べる */
  #overlays[data-tab="pills-theme"] #helloDialog {
    display: contents;
  }

  #overlays[data-tab="pills-theme"] .tab-content {
    order: 3;
    flex-grow: 1;
    min-height: 0;
  }

  /* 窓は出さず、色の一覧だけをシートに縦積みする */
  #overlays[data-tab="pills-theme"] #pills-theme {
    display: flex;
    gap: 10px;
  }

  #overlays[data-tab="pills-theme"] .theme-preview {
    display: none;
  }

  #overlays[data-tab="pills-theme"] .theme-editor {
    flex-grow: 1;
    gap: 10px;
  }

  #overlays[data-tab="pills-theme"] #theme_list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
  }

  #overlays[data-tab="pills-theme"] .theme-form-group {
    height: 44px;
    padding: 0 4px;
  }

  #overlays[data-tab="pills-theme"] .theme-actions {
    padding-top: 10px;
  }

  /* SPACE はスマホに無い */
  #overlays[data-tab="pills-theme"] .theme-actions .key-hint {
    display: none;
  }

  /* 「メニューを隠す」はミニマップボタン(左、y ≈ 130〜200)の下 */
  #theme-tools {
    left: 12px;
    top: 214px;
  }

  .theme-peek {
    height: 32px;
    padding: 0 10px;
    font-size: 10px;
  }

  .theme-peek .section-jp {
    display: inline;
  }

  /* 全画面のシートでは盤面が見えないので出さない */
  #overlays.sheet-full #theme-tools {
    display: none;
  }

  /* --- HUD / チャット / モーダル: 幅が狭いぶん詰める --- */
  #div_lb,
  #div_lb2 {
    width: 150px;
    padding: 8px 10px;
    font-size: 11px;
  }

  #div_score,
  #div_server {
    font-size: 10px;
  }

  #chatroom {
    width: 220px;
    max-height: 80px;
    font-size: 11px;
  }

  #chatboxArea2 {
    width: calc(100% - 24px);
    min-width: 0;
  }

  .modal-dialog {
    width: calc(100% - 16px);
    height: calc(100% - 32px);
    margin: 16px auto;
  }

  .modal-header,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .modal-body {
    padding: 0 12px;
  }
}

/* 1vs1 の試合の状態(#343)。上中央の札と、カウントダウンの大きな数字。MatchPanel が hidden と data-* を切り替える */
#matchStatus {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  background: var(--field-a);
  color: var(--paper);
  border-bottom: 3px solid var(--accent);
  clip-path: var(--chamfer-s);
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: 0.06em;
  pointer-events: none;
}

#matchStatus[hidden],
#matchCount[hidden] {
  display: none;
}

#matchCount {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
}

#matchStatus[data-outcome="win"] {
  border-bottom-color: var(--leaf);
  font-size: 22px;
}

#matchStatus[data-outcome="lose"] {
  border-bottom-color: var(--accent-deep);
  font-size: 22px;
}

#matchStatus[data-outcome="draw"] {
  border-bottom-color: var(--muted);
  font-size: 22px;
}

/* ユーザタブの 1VS1(#344)。RECORD の表(.record-table)を 4 列にして使う */
.duel-table .record-head,
.duel-table .record-row {
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.6fr));
}

.duel-count {
  text-align: right;
  font-family: var(--font-mono);
}

/* サーバー一覧の人数 / 上限(#358)。/api/worlds から取れたときに NO.0n の位置へ出す */
.server-players {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.server-div.active .server-players {
  color: var(--accent-soft);
}