/* 待合室。**一画面に収める。ページはスクロールさせない。**
   大きさはすべて比率で書く（em / % / flex）。

   高さは .container にだけ与える。**html と body には与えない。**
   あちらの高さを固定すると、ソフトキーボードが出るときに画面の高さが
   変わっても追従できず、キーボードが出ないことがある
   （wiki/static/style.css の注記。実際に起きた） */

body.pvp-lobby .container {
  height: 100dvh;
  box-sizing: border-box;
  padding: 0.6em 0.7em;
  max-width: 44em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* 登録していない人が最初に見る画面。**公開したので、ここも整える** */
.lb-need { flex: 1 1 auto; text-align: center; display: flex;
           flex-direction: column; justify-content: center; gap: 0.9em; }
.lb-need-lead { font-size: 1.05em; margin: 0; }
.lb-need-why { font-size: 0.85em; line-height: 1.9;
               color: var(--text-sub, #6b7280); margin: 0; }
.lb-need-go { display: inline-block; margin: 0 auto; padding: 0.6em 1.6em; }

.panel {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 0.75em;
  padding: 0.6em 0.7em;
}

/* 見出し。**一画面に収めるため小さく。** 何の画面かが分かればよい */
.lb-head { text-align: center; flex: 0 0 auto; position: relative; }
.lb-title { font-size: 1.25em; margin: 0; line-height: 1.2; }
.lb-sub { font-size: 0.75em; color: var(--text-sub, #6b7280); margin: 0.1em 0 0; }

/* アバターの面。**余った高さを全部ここが取る** */
.lb-room {
  flex: 1 1 auto;
  min-height: 0;              /* これが無いと中身の高さで押し広げられる */
  position: relative;         /* 説明書(.lb-man)をこの中にかぶせるため */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lb-bar { display: flex; align-items: center; flex: 0 0 auto; }
.lb-label { font-size: 0.8em; color: var(--text-sub, #6b7280); }
.lb-count { margin-left: 0.4em; color: var(--text-mute, #9aa1ab); }
.lb-note { margin-left: 0.4em; color: var(--text-mute, #9aa1ab); font-size: 0.9em; }

/* 説明書のボタン。**右端の「一覧表示」のすぐ左。**
   余白を取るのはこちらだけ（両方に auto を書くと、あいだで分け合って
   本のしるしが真ん中に行ってしまう） */
.lb-man-btn {
  margin-left: auto;
  padding: 0.15em 0.5em;
  font-size: 0.95em;
  line-height: 1.2;
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 0.5em;
  background: #fafbfc;
  cursor: pointer;
}

/* 説明書の中身。**待合室の上にかぶせる。**
   別の画面にすると、戻ったときに待合室へ入り直すことになる */
.lb-man {
  position: absolute; inset: 0; z-index: 5;
  background: var(--panel, #fff);
  display: flex; flex-direction: column;
}
.lb-man-bar {
  flex: 0 0 auto; display: flex; align-items: center;
  padding: 0 0 0.4em; border-bottom: 1px solid var(--border, #e2e4e8);
}
.lb-man-title { font-size: 0.85em; font-weight: 700; }
.lb-man-close {
  margin-left: auto;
  padding: 0.25em 0.9em;
  font-size: 0.75em;
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 0.5em;
  background: #fafbfc;
  color: var(--text-sub, #6b7280);
  cursor: pointer;
}
/* **ここだけはスクロールしてよい。** 読み物なので一画面に収まらない */
.lb-man-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  font-size: 0.8em; line-height: 1.8;
  padding: 0.6em 0.2em 1em;
  -webkit-overflow-scrolling: touch;
}
.lb-man-body h3 {
  font-size: 1.05em; margin: 1.1em 0 0.3em;
  padding-bottom: 0.2em; border-bottom: 1px solid var(--border, #e2e4e8);
}
.lb-man-body h3:first-child { margin-top: 0; }
.lb-man-body p { margin: 0.4em 0; }
.lb-man-body ul { margin: 0.3em 0 0.3em 1.2em; padding: 0; }
.lb-man-body li { margin: 0.35em 0; }
.lb-man-note { color: var(--text-sub, #6b7280); font-size: 0.92em; }

.lb-switch {
  margin-left: 0.4em;
  padding: 0.25em 0.7em;
  font-size: 0.75em;
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 0.5em;
  background: #fafbfc;
  color: var(--text-sub, #6b7280);
  cursor: pointer;
}

/* **左右に少し余白を残す。** 区画を枠いっぱいに取ると、
   端に立った人の名前が枠に触れる */
.lb-floor { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 2.2em; }

.lb-av {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  /* **ゆっくり動かす。** 速いと目が疲れて、名前が読めない */
  transition: left 2.4s ease-in-out, top 2.4s ease-in-out, opacity .3s;
  cursor: pointer;
  /* 端に寄ったときに枠からはみ出さないよう、中心を基準に置く */
  transform: translate(-50%, -50%);
}
.lb-av img { width: 2.4em; height: 2.4em; border-radius: 50%; display: block; }
/* **長い名前はここで切る。** 端に立った人の名前が枠からはみ出して
   切れるのを防ぐ。全部を読みたいときは「一覧表示」に切り替える
   （切り替えがあるからこそ、こちらは切ってよい） */
.lb-av .nm {
  font-size: 0.68em; white-space: nowrap; color: var(--text-sub, #6b7280);
  /* 幅は区画の広さに合わせて JS が入れる（人数と画面幅で変わるため）。
     入る前の控えとして 7em を置いておく */
  max-width: var(--nmw, 7em);
  overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.lb-av.is-you img { box-shadow: 0 0 0 0.12em var(--accent, #4a90d9); }
.lb-av.is-dim { opacity: .35; }

/* 押したときに跳ねる。**対戦はまだ無いので、これだけ。**
   何も起きないと「押せていない」と思われ、ダイアログを出すと
   「対戦できるのか」と思わせてしまう。押したことだけが伝わればよい。

   **土台の translate を入れたまま動かす。** 中心を基準に置いているので、
   これを書かないと押した瞬間に位置がずれる */
@keyframes lb-hop {
  0%   { transform: translate(-50%, -50%); }
  30%  { transform: translate(-50%, calc(-50% - 0.7em)); }
  55%  { transform: translate(-50%, -50%); }
  75%  { transform: translate(-50%, calc(-50% - 0.25em)); }
  100% { transform: translate(-50%, -50%); }
}
.lb-av.hop { animation: lb-hop .5s ease-out; }

@keyframes lb-hop-row {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-0.4em); }
  55%      { transform: none; }
  75%      { transform: translateY(-0.15em); }
}
.lb-row.hop { animation: lb-hop-row .5s ease-out; }
/* **自分は薄くても押せる。** 押すと受付が戻る */
.lb-av.is-dim:not(.is-you) { cursor: default; }

/* 自分のアバターから出る吹き出し。**操作の案内をここに集める。**
   画面の下にチェックボックスと説明を並べると、そのぶん高さを食う */
.lb-say {
  position: absolute;
  bottom: 100%; left: 50%; transform: translate(-50%, -0.35em);
  background: #1c2a3a; color: #fff;
  font-size: 0.66em; line-height: 1.3; white-space: nowrap;
  padding: 0.35em 0.6em; border-radius: 0.8em;
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.lb-say.on { opacity: 1; }
.lb-say::after {                       /* しっぽ */
  content: ""; position: absolute; top: 100%; left: var(--tail, 50%);
  margin-left: -0.3em; border: 0.3em solid transparent; border-top-color: #1c2a3a;
}
/* **端に寄ったら、吹き出しを内側へ寄せる。** 面は overflow:hidden なので、
   まん中合わせのままだと枠の外に出たぶんが切れて読めない（実際に切れた）。
   しっぽだけはアバターの真上に残す */
.lb-say.to-right { left: auto; right: 0; transform: translate(0, -0.35em); --tail: auto; }
.lb-say.to-right::after { left: auto; right: 0.8em; }
.lb-say.to-left  { left: 0; transform: translate(0, -0.35em); }
.lb-say.to-left::after  { left: 0.8em; }

/* 名前の一覧。**アバターと同じ場所に出す**（入れ替え） */
.lb-list { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 0.3em; }
/* **tableにする。** 名前の長さが人によって違うので、
   div+flexだと行ごとに列幅がバラバラになる（実際になった）。
   tableなら列幅は列単位で揃う */
.lb-table { width: 100%; border-collapse: collapse; }
.lb-row { cursor: pointer; }
.lb-row td { padding: 0.25em 0.35em; vertical-align: middle; }
.lb-row.is-dim { opacity: .4; }
.lb-row.is-dim:not(.is-you) { cursor: default; }
.lb-cell-av img { width: 1.5em; height: 1.5em; border-radius: 50%; display: block; }
.lb-cell-nm { font-size: 0.85em; width: 100%; }
.lb-cell-rate, .lb-cell-wins {
  font-size: 0.72em; color: var(--text-mute, #9aa1ab); white-space: nowrap;
}
.lb-cell-lock {
  font-size: 0.75em; color: var(--text-mute, #9aa1ab); white-space: nowrap;
  text-align: right;
}

/* チャット。**高さは中身ぶんだけ。** 余りは上のアバター面が取る */
.lb-chat { flex: 0 0 auto; }
.lb-log {
  display: flex; flex-direction: column; gap: 0.15em;
  font-size: 0.85em; max-height: 5.5em; overflow: auto;
  margin: 0.25em 0;
}
.lb-log .who { color: var(--text-sub, #6b7280); margin-right: 0.4em; }
/* 送った日時。**名前より目立たせない** */
/* 入室の知らせ。**話した言葉と見分けがつくように薄く** */
.lb-log .sys { color: var(--text-mute, #9aa1ab); font-size: 0.9em; }
.lb-log .when { color: var(--text-mute, #9aa1ab); font-size: 0.85em; margin-right: 0.5em;
                font-variant-numeric: tabular-nums; }
.lb-form { display: flex; gap: 0.4em; }
.lb-form input {
  flex: 1 1 auto; min-width: 0;
  padding: 0.4em 0.6em; font-size: 1em;
  border: 1px solid var(--border, #e2e4e8); border-radius: 0.5em;
}
.lb-send {
  padding: 0.4em 1em; font-size: 1em;
  border: 1px solid var(--border, #e2e4e8); border-radius: 0.5em;
  background: var(--accent, #4a90d9); color: #fff; cursor: pointer;
}
.lb-ng { color: #c0392b; font-size: 0.8em; margin: 0.3em 0 0; }

/* 出口。**小さくしてよい。** ここを大きく取ると、そのぶん
   アバターの居場所が狭くなる（72pxを使っていた） */
.lb-nav { flex: 0 0 auto; text-align: center; }
.lb-nav .menu-item {
  display: block; margin: 0;
  padding: 0.45em 1em; font-size: 0.85em; min-height: 0;
}

/* 入室者の通知。**見出しの右端に置く。** 見出しは真ん中寄せなので、
   流れに入れると題がずれる。かぶせて置く */
.lb-bell {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  padding: 0.2em 0.45em;
  font-size: 1.1em; line-height: 1.2;
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 0.5em;
  background: #fafbfc;
  cursor: pointer;
  opacity: 0.55;
}
.lb-bell.on { opacity: 1; border-color: #4a90d9; background: #eef5fd; }

/* 3択。**ベルのすぐ下に出す。** 待合室の上にかぶせ、場所を取らない */
.lb-bell-menu {
  position: absolute; right: 0; top: 100%; z-index: 10;
  margin-top: 0.3em;
  width: 17em; max-width: 92vw;
  text-align: left;
  display: flex; flex-direction: column; gap: 0.35em;
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.15);
}
.lb-bell-menu[hidden] { display: none; }
.lb-bell-head { font-size: 0.8em; font-weight: 700; margin: 0 0 0.1em; }
.lb-bell-opt {
  font-size: 0.85em; text-align: left;
  padding: 0.5em 0.7em;
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 0.5em;
  background: #fff;
  cursor: pointer;
}
.lb-bell-opt.sel { border-color: #4a90d9; background: #eef5fd; font-weight: 700; }
.lb-bell-opt.sel::before { content: "✓ "; }
.lb-bell-note, .lb-bell-msg { font-size: 0.72em; margin: 0; color: var(--text-sub, #6b7280); }
.lb-bell-msg:empty { display: none; }