/* =====================================================================
 * CSS 目次 (詳細は MAP.md)
 *   [CSS-0] 変数・base・共通 (.btn / ボタンの読み込み中 .btn.is-loading + .spinner)
 *   [CSS-1] レイアウト (header / main / card / overlay / modal / drawer / toast)
 *   [CSS-2] 台帳 (#pl-* / 並び替え .pl-sort / 表示設定 .pl-cols / レーンセル多段 .ln / 2026-09-15: 参加列 .col-partake / 2026-09-17: 旧チーム指定列 .desig は事前配置に一本化され撤去)
 *   [CSS-3] 参加者 (#pt-*)
 *   [CSS-4] 結果 (#rs-*)
 *   [CSS-5] フォーム (#pm-* / #cfg-*)
 * ===================================================================== */

/* ===================== [CSS-0] 変数・base・共通 ===================== */
:root{
  --bg:#0f1420; --bg2:#161d2c; --bg3:#1e2740; --line:#2b3550;
  --fg:#e7ecf5; --muted:#8c99b5; --accent:#5b8cff; --accent2:#3a6bff;
  --good:#3fbf7f; --warn:#e0a53a; --bad:#e0603a;
  --teamA:#4a8cff; --teamB:#ff7a59;
  --radius:12px; --shadow:0 8px 24px rgba(0,0,0,.35);
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans JP",sans-serif;
  --font-display:var(--font-body);
}
/* 2026-09-22: テーマ・書体（#cfg-drawer「表示設定」・uiPrefsStore）。html[data-theme]/[data-font]属性で
   このrootの色/フォント変数だけを差し替える方式＝コンポーネント側のCSSはvar()参照のみで変更不要。 */
:root[data-theme="hextech"]{   /* ヘクステック: 青×金 */
  --bg:#0a1428; --bg2:#0f2044; --bg3:#1b3255; --line:#3a5a8f;
  --fg:#f0e6d2; --muted:#9aa8c4; --accent:#c8aa6e; --accent2:#f0c94a;
  --teamA:#0ac8b9; --teamB:#c8aa6e;
}
:root[data-theme="bloodmoon"]{   /* ブラッドムーン: 赤×黒 */
  --bg:#120808; --bg2:#1c0d0d; --bg3:#2a1414; --line:#4a1f1f;
  --fg:#f5e6e6; --muted:#a98a8a; --accent:#e0334a; --accent2:#ff4d6a;
  --bad:#ff2e2e; --teamA:#4a8cff; --teamB:#e0334a;
}
:root[data-theme="arena"]{   /* アリーナ: ライト */
  --bg:#f5f6fa; --bg2:#ffffff; --bg3:#e9ecf5; --line:#d3d9ea;
  --fg:#1a2030; --muted:#5a6480; --accent:#3a6bff; --accent2:#2851d6;
  --good:#1f9d5c; --warn:#c9860a; --bad:#c93a1f; --teamA:#3a6bff; --teamB:#e0603a;
}
:root[data-theme="emerald"]{   /* エメラルド: 緑×グレー */
  --bg:#0f1a16; --bg2:#16241f; --bg3:#1e332b; --line:#2e4a3f;
  --fg:#e6f2ec; --muted:#8fae9f; --accent:#2fbf82; --accent2:#22a06d;
  --teamA:#2fbf82; --teamB:#e0a53a;
}
:root[data-font="rounded"]{ --font-body:"Hiragino Maru Gothic ProN","BIZ UDGothic","M PLUS Rounded 1c","Segoe UI",sans-serif; }
:root[data-font="mincho"]{ --font-body:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; }
:root[data-font="esports"]{ --font-display:"Eurostile","Arial Narrow","Segoe UI",sans-serif; }
:root[data-font="mono"]{ --font-body:"SFMono-Regular","Cascadia Code",Consolas,Monaco,"Noto Sans Mono JP",monospace; }
*{box-sizing:border-box}
/* 2026-09-18: ユーザー報告「D&Dでプレイヤーの枠に落とすと、半分幅のウィンドウでプレイヤー/事前配置の横並びが
   縦積みになり、リロードしないと戻らない」。原因は`syncHeadActionsLayout`と同系統だが別物のバグ：
   `syncPreplaceLayout()`は`.pp-layout`の**幅**を実測して横並び⇔縦積みを判定するが、Windows版Chrome等の
   スクロールバーは表示領域の幅を実際に削る（オーバーレイでなく専有型）。境界付近の幅で、D&Dによる再描画が
   ページの縦の高さをほんの少し増やして縦スクロールバーが新たに出現すると、その分だけ`.pp-layout`の実測幅が
   減り縦積みへ倒れる→縦積みになるとページがさらに縦に伸びる→スクロールバーが出続ける、という自己強化ループに
   陥り、ウィンドウ幅自体は変えていないので再測定のきっかけ（resizeイベント）が来ず戻れなくなっていた。
   `scrollbar-gutter:stable`でスクロールバー分の幅を常に一定に予約しておけば、縦スクロールバーの出現/消失で
   `.pp-layout`の実測幅が変動しなくなり、このループの発生源そのものを断つ。 */
html{scrollbar-gutter:stable}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:14px/1.5 var(--font-body);
  padding-bottom:80px;
}
h1,h2,h3,h4{margin:0;font-weight:700;font-family:var(--font-display)}
h1{font-size:18px} h2{font-size:15px} h3{font-size:16px} h4{font-size:13px;color:var(--muted)}
.muted{color:var(--muted);font-weight:400}
.hint{font-size:12px}
.hidden{display:none !important}
sup{font-size:9px;color:var(--accent);margin-left:1px}
hr{border:none;border-top:1px solid var(--line);margin:16px 0}
/* 2026-09-18: ユーザー指摘「プレイヤー達/事前配置のスクロールバーの見た目が悪く浮いている」＝Windows既定の
   白っぽい太いスクロールバーがダークテーマの箱の中で浮いて見える問題。アプリ全体（ページ本体＋.pp-players-list/
   .pp-teams等の内側スクロール枠すべて）に細くダーク基調のスクロールバーを統一適用して馴染ませる。
   トラックは透明＝どの背景色の箱に乗っても浮いて見えない。つまみは既定var(--line)（地味）・hoverでvar(--accent)。 */
html{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:transparent}

.btn{
  appearance:none;border:1px solid var(--line);background:var(--bg3);color:var(--fg);
  padding:7px 12px;border-radius:9px;font-size:13px;cursor:pointer;font-weight:600;
  transition:filter .12s ease, background .12s ease;
}
.btn:hover{filter:brightness(1.15)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn.primary{background:var(--accent2);border-color:var(--accent)}
.btn.ghost{background:transparent}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.team-a{border-color:var(--teamA);color:#cfe0ff}
.btn.team-b{border-color:var(--teamB);color:#ffd9cd}
/* 読み込み中ボタン（setBtnBusy）: disabled の減光は上書きしてスピナーをはっきり見せる */
.btn.is-loading:disabled{opacity:1;filter:none;cursor:wait}
.spinner{
  display:inline-block;width:13px;height:13px;margin-right:2px;vertical-align:-2px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===================== [CSS-1] レイアウト ===================== */
#app-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:5;
}
#app-header .tag{font-size:10px;background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted);vertical-align:middle}
#app-header .hdr-btns{display:flex;gap:8px}
main{max-width:1000px;margin:0 auto;padding:18px}
.view{display:none}
.view.active{display:block}
#view-local.view.active{display:flex;flex-direction:column;gap:16px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
/* 2026-09-16: 「チーム分け設定」ヘッダ＝見出しの横に「チーム数」「詳細設定」（.pl-cols流用の開閉ボタン）、右端に「チーム分け実行」。
   2026-09-16後続: 「チーム数」はボタンで開閉させず、常時見えるドロップダウンに変更（ユーザー要望）。 */
.pl-head-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-teams-inline{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.pl-teams-inline select{font-size:12px;padding:3px 6px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px}
/* 2026-09-18: ユーザー要望「チーム分け設定の題名の下に、おすすめ設定という小さな枠をおいてください。＋を○で
   囲ったような記号をその中に用意して、押すとチーム分け設定を作って保存できるようになります」。
   `.pl-head-left`は`flex-wrap:wrap`の横並びのため、この枠だけ`flex-basis:100%`にして自分の行だけで
   折り返させる＝「他の項目より下の行」という配置をレイアウトの再構築なしで実現している。
   2026-09-18後続: ユーザー要望「ウィンドウを半分にした時、題名の横にチーム数・詳細設定・プレイヤー情報更新・
   チーム分け実行が来るように」で、この枠をDOM順序上`.pl-head-left`の**末尾**（詳細設定/プレイヤー情報更新/
   チーム分け実行の後）へ移動。
   2026-09-18後続後続: ユーザー要望「チーム分け実行はおすすめ設定の右側左端に出してほしい」で`#pt-run`を
   枠の右隣へ一時的に移設したが、2026-09-18後続後続後続でユーザー報告「全画面にしたときに横に引っ付いてる
   のがダサい。右下端寄りにできる？」＝全画面だと枠が横に広がりボタンが遠く離れて間延びして見えるとのことで、
   この配置は撤回。`#pt-run`は`.pl-head-left`から出して`.card-head`の直接の子（`.pl-head-left`の直後）に戻し、
   `align-self:flex-end`だけ追加（`.card-head`は`justify-content:space-between`のため右端に寄り、
   `align-items:center`を`#pt-run`だけ`align-self`で上書きして`.pl-head-left`の高さ全体の**下端**に揃う＝
   「右下端寄り」を絶対配置なしで実現）。`.pt-presets-box`は`flex-basis:100%`のまま`.pl-head-left`内の
   独立行に戻った（`.pt-presets-row`は廃止）。
   2026-09-18後続後続後続後続: ユーザー要望「チーム分け実行の一行上くらいにプレイヤー情報更新を持ってこれる？」で、
   `#lv-reimport`（プレイヤー情報更新）を`.pl-head-left`（詳細設定の直後）から出し、新設`.pt-actions-col`
   （`#pt-run`と2人で1つの縦積みグループ）の中・`#pt-run`の直前へ移設。`.pt-actions-col`が`.card-head`の
   直接の子として`.pl-head-left`の右に並び、`align-self:flex-end`+`margin-left:auto`は`#pt-run`個別ではなく
   このグループ全体に付け直した（2ボタンをまとめて同じルールで右下寄せする）。
   2026-09-18後続後続後続後続後続: ユーザー報告「ウィンドウの幅を半分にしたときに、題名・チーム数・詳細設定・
   おすすめ設定欄の横方向にプレイヤー更新やチーム分け実行が来ているようにしてほしい」＝`flex-wrap`のままだと、
   `.pl-head-left`（おすすめ設定の枠を含み幅が広い）と`.pt-actions-col`（2ボタン）が同じ行に収まりきらない
   中間幅（実測700px前後〜1000px弱）で`.pt-actions-col`だけ丸ごと下の行に折り返ってしまい、「横に来る」という
   要望を満たせないケースがあった（`margin-left:auto`で右寄せ自体は直っていたが、折り返って“下”に来ることまでは
   防げていなかった）。flex-wrapは「入りきらなければ折り返す」挙動そのものが前提のため、これをやめて
   `#pl-section .card-head`だけ**CSS Grid（2カラム）**に変更＝`.pl-head-left`（左カラム・残り幅いっぱい）と
   `.pt-actions-col`（右カラム・内容幅）を明示的に別カラムとして固定し、`.pl-head-left`内がどれだけ幅を
   使っても`.pt-actions-col`は原理的に折り返れない（＝常に右に居続ける）ようにした。極端に狭い画面
   （スマホ縦向き想定）では2カラムを維持するとかえって窮屈になるため、`@media (min-width:700px)`でのみ
   Gridを適用していたが、2026-09-18後続後続後続後続後続後続でユーザー要望「幅を小さくしたときに、詳細設定の
   所まで被らないなら、詳細設定やおすすめ設定の真横で右端に出てほしい」＝700pxという固定値は根拠のない
   決め打ちで、実際に見出し行（見出し＋チーム数＋詳細設定）とボタン列が本当に収まるかどうかとは無関係だった
   ため、`syncPreplaceLayout()`と同じ「実測して判定しclassを付け外す」方式に変更（`.pt-head-stacked`が
   付いていなければGrid＝2カラム、それ以外はflex-wrapのまま下に落ちる）。 */
/* margin-left:auto は`.pt-head-stacked`のときのための保険（`.card-head`が`flex-wrap`で折り返し、
   `.pt-actions-col`だけがその行に単独で残った場合、space-betweenは「同じ行に複数アイテムがある時だけ」
   効くため素だとflex-start＝左寄せになってしまう。margin-leftを自動で埋めさせて右寄せを維持する）。 */
.pt-actions-col{display:flex;flex-direction:column;align-items:stretch;gap:6px;align-self:flex-end;margin-left:auto}
#pl-section .card-head:not(.pt-head-stacked){display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:12px}
#pl-section .card-head:not(.pt-head-stacked) .pt-actions-col{margin-left:0}
.pt-presets-box{flex-basis:100%;border:1px solid var(--line);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;gap:6px}
.pt-presets-head{display:flex;align-items:center;gap:8px}
.pt-presets-title{font-size:12px;font-weight:700;color:var(--muted)}
.pt-preset-add{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;padding:0;
  border:1px solid var(--accent);color:var(--accent);background:transparent;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;cursor:pointer;
}
.pt-preset-add:hover{background:var(--accent);color:#fff}
.pt-presets-list{display:flex;flex-wrap:wrap;gap:6px}
.pt-presets-list:empty::before{content:'まだありません（＋で現在の詳細設定を保存できます）';font-size:11px;color:var(--muted)}
.pt-preset-chip{display:inline-flex;align-items:center;background:var(--bg3);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pt-preset-apply{background:transparent;border:none;color:var(--fg);font-size:11px;padding:3px 6px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.pt-preset-apply:hover{background:var(--accent2);color:#fff}
.pt-preset-tag{font-size:9px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 4px;line-height:1.4}
.pt-preset-apply:hover .pt-preset-tag{color:#fff;border-color:rgba(255,255,255,.5)}
.pt-preset-del{background:transparent;border:none;border-left:1px solid var(--line);color:var(--muted);font-size:11px;padding:3px 6px;cursor:pointer;line-height:1}
.pt-preset-del:hover{color:var(--bad)}

.overlay{
  position:fixed;inset:0;background:rgba(4,7,14,.6);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:20;overflow:auto;
}
.modal,.drawer{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);width:100%;max-width:440px;padding:20px;display:flex;flex-direction:column;gap:12px;
}
.drawer{max-width:520px}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;font-size:13px;box-shadow:var(--shadow);z-index:40;
}
/* 2026-09-18: 「希望レーンを有効化」の上限超過トーストで、要点（事前配置／超過したレーン名／上限人数／超えている）
   だけ大きく見せるための強調用クラス。toast()にHTMLを渡す場合だけ使う想定（通常のトーストはtextContentのまま）。 */
.toast-em{font-size:1.3em;font-weight:700}

/* ===================== [CSS-2] 台帳 ===================== */
/* 2026-09-16: 「チーム分け設定」＝左=プレイヤー(ベンチ風カード一覧)・右=事前配置(詳細仕様は後日)の2カラム。
   2026-09-16後続後続: 台帳表⇔事前配置の切替タブは廃止し、常時この事前配置ビューのみを表示する。 */
/* 2026-09-16後続: 結果画面のチームカード＋ベンチ（.rs-layout/.rs-cards-col/.rs-bench-col）と同じ配置パターンに変更。
   左=プレイヤー枠(可変幅・.rs-cards-col相当)、右=事前配置枠(内容にフィットする幅・.rs-bench-col相当・スクロール中も
   上部に追従するsticky)。 */
/* 2026-09-16後続後続後続後続: ユーザー要望「プレイヤー枠を小さく・事前配置を大きくしてほしい」。
   プレイヤー枠を可変(1fr)→固定幅(220px。旧事前配置枠のmin-widthと同じ値)に、事前配置枠を内容フィット(auto)→
   可変(1fr)に入替＝残り幅をすべて事前配置側が受け取るようにした。 */
/* 2026-09-16後続後続後続後続後続: ユーザー報告「プレイヤーの枠が狭くて名前が見えない。全画面の時は半々くらいに」。
   固定220pxだと名前が省略されやすかったため`1fr 1fr`（常に半々）に変更。 */
/* 2026-09-16後続後続後続後続後続後続: ユーザー報告「ウィンドウを最大の半分にした時の大きさはちょうどよい。
   全画面にした時はプレイヤーの枠が余っているので、名前が日本語で6文字表現できるくらいのサイズで良い」。
   `1fr 1fr`だと画面が広いほどプレイヤー枠も際限なく広がってしまっていた（全画面で名前欄が無駄に余る原因）ため、
   プレイヤー枠を固定幅（`.pp-nm-name`と同じフォントで日本語6文字を実測≒84px＋レーン列5列(32px×5=160px)＋
   `.pp-players`の左右パディング(20px)等 ≒ 280px）に変更、事前配置枠(1fr)だけが画面の余り幅を全部受け取るように
   した。半分幅の時にどのみち十分収まっていたサイズ感（狭すぎて名前が見えない、ということはない幅）を、
   画面幅に関わらず一定にした形。 */
/* 2026-09-17: ユーザー要望「プレイヤー達の枠と事前配置の枠の上、チーム分け実行との間に横長の枠を作ってほしい。
   本人希望レーンという名前で、希望レーンを出した人の名前をそのレーンのアイコンの下に表示」。
   .pp-layout（プレイヤー/事前配置の2カラム）の直前・横いっぱいに配置する独立ブロック。
   2026-09-17後続: ユーザー要望「題名の横にレーンアイコンを並べて、その下にプレイヤーを並べて。名前も『本人希望』に」。
   2026-09-17後続後続: ユーザー要望「折りたためるようにする。デフォルトは折りたたまれている状態」。
   `<details class="pref-lanes-box"><summary>本人希望</summary>...`のネイティブdetails/summaryに変更（open属性なし
   ＝初期状態は閉。既存の.pl-cols/.rs-benchと同じ仕組み）。タイトルはsummary側に固定表示となったため、
   `.pref-lanes`本体はレーンアイコン×5＋名前リスト×5だけのシンプルな5列グリッドに戻した（タイトル分の
   auto列・空欄セルは不要になった）。#pref-lanesの中身だけをinnerHTMLで差し替える仕組みは変わらないため、
   .rs-benchのような「再描画のたびopen属性を保存/復元する」手当ては不要（<details>自体は再生成されない）。 */
.pref-lanes-box{border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:8px}
.pref-lanes-box summary{cursor:pointer;font-size:13px;font-weight:700;list-style:revert;display:flex;align-items:center;gap:8px;padding-right:78px}
.pref-lanes-box[open] summary{margin-bottom:8px}
/* 2026-09-18: ユーザー要望「表示設定の場所を本人希望の枠の中の右上へ変えてほしい」。summary内には入れ子の
   <details>を置けない（<summary>のコンテンツモデルはphrasing content限定）ため、position:absoluteで枠の右上へ
   重ねて配置する別要素として実装。position:relativeは`.pref-lanes-box`自身（<details>）ではなく、それを包む
   `.pref-lanes-wrap`（ただのdiv）に付与する＝<details>を絶対配置の基準にすると、モダンブラウザの開閉アニメーション
   対応（closed状態でも中身のサイズを裏で計測する仕組み）の影響で、top指定どおりの位置に来ない不具合が実機で
   発生したため（div一枚挟むだけで解消）。summary側にpadding-rightを足して、閉じている間のチップ一覧
   (.pref-lanes-summary・syncSummaryFitでel.clientWidthを実測)がバッジの下に潜り込まないよう先に幅を確保しておく。 */
.pref-lanes-wrap{position:relative}
.pp-cols-corner{position:absolute;top:10px;right:10px;z-index:3}
.pp-cols-corner[open]{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:8px;
  max-width:min(300px,calc(100vw - 40px));box-shadow:var(--shadow)}
.pref-lanes{display:grid;grid-template-columns:repeat(5,1fr);gap:4px 8px;align-items:center}
.pref-ic{font-size:10px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:2px}
.pref-names{display:flex;flex-direction:column;gap:2px;align-items:center;width:100%;min-width:0}
.pref-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pref-empty{font-size:11px}
/* 2026-09-18: 「表示設定」（プレイヤー枠と共通のppColsPref）を「本人希望」/「事前配置」のチップにも適用。
   .pref-chip-sub/.pp-chip-sub＝今日の試合数・各レーンの数値項目をチップ内に小さく追記する用（アイコンは
   名前の前・数値系は名前の後ろにまとめる）。「どこオプ」枠（lane==='flex'）はレーン非依存のtodayGames以外
   非表示（特定のレーンが無いため、レーン依存の値を出すと誤解を招く）。 */
.pref-chip-sub,.pp-chip-sub{font-size:9px;color:var(--muted);white-space:nowrap}
/* 2026-09-18: ユーザー要望「本人希望の欄を閉じているときに、隙間に表示できるだけ、希望レーンを指定している
   プレイヤーをレーンアイコン＋名前で表示してほしい」。summary行の「本人希望」の右側に余っている隙間を使い、
   閉じている間だけ希望者チップを並べる。開いている間は中身（.pref-lanes）と二重表示になるため非表示にする。
   幅に入りきらない分は syncPrefLanesSummary()（JS）で丸ごと非表示にし、チップが半端に切れて見えないようにする。 */
.pref-lanes-summary{flex:1;min-width:0;overflow:hidden;display:flex;flex-wrap:nowrap;gap:6px;font-weight:400}
.pref-lanes-box[open] .pref-lanes-summary{display:none}
.pref-sum-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:400;color:var(--muted);background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:1px 6px 1px 4px;white-space:nowrap}
.pref-sum-chip .lane-ic{width:12px;height:12px}
/* 2026-09-18: 「本人希望」「事前配置」のsummaryチップが幅に収まりきらない時に末尾へ出す「まだ表示されていない
   人がいる」マーカー（syncSummaryFit参照）。 */
.pref-sum-more{flex:0 0 auto;color:var(--muted);font-weight:700;font-size:13px;line-height:1;padding:0 1px}
.pp-layout{display:grid;grid-template-columns:280px 1fr;gap:12px;align-items:start;margin-top:8px}
.pp-players{min-width:0}
.pp-area{position:sticky;top:70px;min-width:220px}
.pp-players,.pp-area{border:1px solid var(--line);border-radius:10px;padding:10px}
/* 2026-09-16後続後続: ユーザー要望「半分くらいの幅でも横並びのままにしてほしい」で、固定640pxブレークポイントを
   syncPreplaceLayout()（実際に必要な幅を計算するJS判定。syncCardGridLayoutと同じ考え方）に置き換え。 */
.pp-layout.pp-stack{grid-template-columns:1fr}
.pp-layout.pp-stack .pp-area{position:static}
/* 2026-09-17: ユーザー要望「プレイヤー達と事前配置も折りたためるようにして」。.pref-lanes-boxと同じ
   <details>/<summary>パターンに変更（既定はopen＝これまでどおり常時表示のまま、折りたたみ可能になっただけ）。 */
.pp-players summary,.pp-area summary{margin:0;font-size:13px;font-weight:700;cursor:pointer;list-style:revert}
.pp-players[open] summary,.pp-area[open] summary{margin-bottom:8px}
.pp-players-list{max-height:60vh;overflow:auto}
/* 2026-09-18: ユーザー要望「事前配置が閉じられているときに、本人希望のように省力した形で表示してほしい。
   例：Any レーンマーク プレイヤー名／A レーンマーク プレイヤー名, C レーンマーク プレイヤー名」。
   `.pref-lanes-summary`（本人希望）と同じ「summaryの隙間にチップを詰める」仕組みを`.pp-area`にも追加。
   チップ自体の見た目（`.pref-sum-chip`）は共用し、チーム名ラベル用に`.pref-sum-team`だけ追加する。 */
.pp-area summary{display:flex;align-items:center;gap:8px}
.pp-area-summary{flex:1;min-width:0;overflow:hidden;display:flex;flex-wrap:nowrap;gap:6px;font-weight:400}
.pp-area[open] .pp-area-summary{display:none}
.pref-sum-team{font-weight:700}
/* 2026-09-17: ユーザー要望「プレイヤー達の枠にソート機能を追加。ランク・Top〜Supのそれぞれの得意度・試合数」。
   参加者一覧（.pv-sort/#pv-sort等）と同じ「並びキー＋レーン得意度の時だけ出すレーン選択＋方向反転ボタン」の
   パターンを流用。<summary>内に置くとクリックがdetailsの開閉と競合するため、中身側（<summary>の外・
   一覧の直前）に配置。 */
.pp-sort{display:flex;gap:6px;align-items:center;margin:0 0 8px;font-size:12px;flex-wrap:wrap}
.pp-sort label{color:var(--muted);white-space:nowrap}
.pp-sort select{font-size:12px;padding:3px 6px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px}
.pp-sort #pp-sort-dir{flex:0 0 auto;min-width:34px;font-size:13px;line-height:1}
/* 2026-09-17: 「事前配置」<details>の中身側（<summary>の外）にリセットボタン。<summary>内に置くと
   .pp-sortと同じ理由（クリックがdetailsの開閉と競合）で配置できないため。 */
#pp-reset{display:block;margin:0 0 8px}
/* 2026-09-16後続: ユーザー要望「名前の下にランク/今日、名前の横に各レーンの自評、エクセルのように縦横をそろえ、
   レーン見出しは各人ごとでなく先頭に1回だけ」。teamCol(結果カード)の .rs-rows/.rs-row{display:contents} と同じ
   パターンで全プレイヤー行を1つのグリッドに相乗りさせ、名前/TOP/JG/MID/BOT/SUP の列を縦にそろえる。 */
.pp-table{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,minmax(32px,auto))}
.pp-row{display:contents}
.pp-table>.pp-row>*{padding:6px 4px;border-bottom:1px solid var(--line);text-align:center;min-width:0}
.pp-table>.pp-row:last-child>*{border-bottom:none}
.pp-th{font-size:10px;color:var(--muted);font-weight:700}
.pp-table>.pp-row>.pp-nm{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;overflow:hidden}
.pp-nm-name{font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pp-nm-sub{font-size:11px;white-space:nowrap}
/* M6（2026-09-22・Phase C）: 名前行の参加チェック・編集ボタン・RiotID表示 */
.pp-nm-head{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}
.pp-nm-head .pp-nm-name{flex:1 1 auto;min-width:0}
.pp-partake-chk{flex:0 0 auto;width:14px;height:14px;accent-color:var(--accent);cursor:pointer}
.pp-partake-chk:disabled{cursor:default;opacity:.5}
.pp-edit-btn{flex:0 0 auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 2px}
.pp-edit-btn:hover{color:var(--accent)}
.pp-nm-riotid{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
.pp-sel-chk{flex:0 0 auto;width:15px;height:15px;accent-color:var(--bad);cursor:pointer}
.pp-table>.pp-row>.pp-nm-selected{background:color-mix(in srgb,var(--bad) 16%,transparent);border-radius:6px}
.pp-chip-edit{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 2px;flex:0 0 auto}
.pp-chip-edit:hover{color:var(--accent)}
.pp-table>.pp-row>.pp-pref{background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:6px;font-weight:700}
/* 2026-09-19: 「プレイヤー達」枠でのみ見学・一回休みを名前下に表示＋カード全体を色分け（表示設定でOnOff）。
   .pp-rowはdisplay:contentsで自身は箱を持たないため、色は`>*`で全子セルに適用してカード全体が色付いて見えるようにする。
   .pp-prefより後に書くことで、優先レーンセルと重なった場合もこの色を優先（1枚のカードとしての一体感を保つ）。 */
.pp-nm-status{font-size:10px;font-weight:700;line-height:1.3}
.pp-nm-status-rest{color:var(--warn)}
.pp-nm-status-out{color:var(--bad)}
.pp-table>.pp-row.pp-row-rest>*{background:color-mix(in srgb,var(--warn) 10%,transparent)}
.pp-table>.pp-row.pp-row-out>*{background:color-mix(in srgb,var(--bad) 10%,transparent)}
/* 2026-09-22: 「これは自分です」claim（個人ログインではなく端末が覚えるだけの軽量な識別）。
   .pp-row-mineは他のpp-row-*状態色と重ねられるよう、そちらより後に書いて優先させる。 */
.pp-table>.pp-row.pp-row-mine>*{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.pp-nm-mine-tag{font-size:10px;font-weight:700;color:var(--accent);white-space:nowrap}
.pp-claim-btn{flex:0 0 auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 2px}
.pp-claim-btn:hover{color:var(--accent)}
/* 2026-09-19後続後続後続: 「俺より強いやつに会いに来た」(boostDiv)。プレイヤー達は過去最高ランク行の末尾に
   矢印だけ続ける（.pp-nm-boost-inline）、事前配置は名前の下、結果カード/ベンチは名前の文字列の手前に合体
   （表示設定でOnOff・既定ON）。 */
.pp-nm-boost-inline{color:var(--accent);font-weight:700}
/* 2026-09-18: 「プレイヤー」表示設定でランクポイント/勝敗ポイント/合計ポイント/勝率/強さを追加表示できるように。
   .pp-lncell が1レーン分の枠（旧: アイコンのspan単体）、中に.pp-ln（アイコン行・数値行）を縦積み。
   #pl-table td.lane の .ln1/.ln2 スタックと同じ考え方（台帳の表示設定と統一感を持たせる）。 */
.pp-lncell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.pp-ln-pt{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-ln-empty{color:var(--muted)}
/* 2026-09-16後続: D&Dでプレイヤー一覧→事前配置の枠へ配置できるように。.pp-rowはdisplay:contentsで自身は箱を
   持たないため、ドラッグ中の見た目(opacity)は子要素側に適用する（.rs-rowと同じ制約・同じ回避策）。 */
.pp-table>.pp-row>*[draggable="true"]{cursor:grab}
.pp-row.pp-drag-src>*{opacity:.4}
/* 2026-09-16後続後続後続: 事前配置エリアに「Any/TeamA〜J」の枠（骨格・D&D未配線）を追加。
   .pp-slot-drop が実際のドロップ先（data-pp-team/data-pp-lane）＝将来のD&D実装はこの要素を対象にする想定。 */
/* 2026-09-16後続後続後続後続: 事前配置枠が.pp-layoutの可変(1fr)列になり横幅に余裕が出たため、
   縦1列積み(flex)→折返しグリッド(auto-fill)に変更＝幅が広い時はチームカードが複数列に並び、
   狭い時（縦積みモード等）は1列に自然に戻る。 */
/* 2026-09-16後続後続後続後続後続: ユーザー要望「Anyは横長、その下にTeamA〜Jが2列くらいで並ぶように」。
   auto-fillの折返しグリッドをやめ、Any単体はフルwidthのカード（.pp-teamsのflex子として自然に横いっぱい）、
   TeamA〜Jだけを別の.pp-team-grid（常に2列固定）にまとめる構成に変更。 */
.pp-teams{max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.pp-team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pp-team{border:1px solid var(--line);border-radius:8px;padding:8px}
.pp-team-any{border-color:var(--accent)}
.pp-team-head{font-weight:700;font-size:12px;margin-bottom:6px}
.pp-slot-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.pp-slot-row:last-child{margin-bottom:0}
.pp-slot-lane{flex:0 0 34px;font-size:9px;color:var(--muted);display:flex;align-items:center;gap:2px;line-height:1.1}
.pp-slot-drop{flex:1;min-width:0;border:1px dashed var(--line);border-radius:6px;min-height:22px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:3px;padding:2px 4px}
.pp-slot-drop.pp-slot-multi{min-height:34px}
.pp-slot-flex{flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}
.pp-slot-note{flex:0 0 100%;font-size:9px;color:var(--muted)}
/* 2026-09-16後続: ドロップ枠に入った人＝チップ表示。.pp-drop-hover はドラッグ中に対象枠の上に来た時のハイライト。 */
.pp-slot-drop.pp-drop-hover{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pp-players.pp-drop-hover{border-color:var(--accent)}
.pp-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:1px 2px 1px 6px;font-size:10px;line-height:1.6;cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 2026-09-19後続: 「俺より強いやつに会いに来た」を名前の下に表示するとき用（.pp-chipは横並びinline-flexなので、
   名前とこの行だけを縦積みのサブflexにして「下」に見せる。表示設定OFF時はnameBlockが素のテキストになり無関係）。 */
.pp-chip-nm{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pp-chip-boost{font-size:8px;color:var(--accent);font-weight:700;white-space:nowrap}
.pp-chip-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 3px;flex:0 0 auto}
.pp-chip-x:hover{color:var(--bad)}
.pp-chip.pp-chip-mine{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--bg3))}
.pp-chip-claim{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 2px;flex:0 0 auto}
.pp-chip-claim:hover{color:var(--accent)}
.pp-chip.pp-drag-src{opacity:.4}
.table-wrap{overflow-x:auto}
/* 折りたたみ: 高さを約7名分に制限し、中を縦スクロール。ヘッダは sticky で残す */
.table-wrap.pl-collapsed{overflow-y:auto;max-height:300px}
.table-wrap.pl-collapsed #pl-table thead th{position:sticky;top:0;z-index:2;background:var(--bg2);box-shadow:inset 0 -1px 0 var(--line)}
#pl-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
#pl-table th,#pl-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center}
#pl-table th{color:var(--muted);font-weight:600;font-size:11px}
#pl-table td.nm{text-align:left;font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis}
#pl-table td.lane{color:var(--muted);font-size:12px}
#pl-table td.lane .g-ic{font-size:13px;color:var(--fg)}
#pl-table td.lane.g-main .g-ic,#pl-table td.lane.g-sub .g-ic{color:var(--good)}
/* 「今日の参加」で優先レーンを表明した人：そのレーンのアイコン＋ランクを枠で囲って強調 */
#pl-table td.lane.ll-on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
#pl-table td.lane .ll-box{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;
  border:1px solid var(--accent);border-radius:999px;color:var(--fg);font-weight:600;line-height:1.5}
#pl-table td.rk{font-variant-numeric:tabular-nums}
#pl-table td.wl{font-variant-numeric:tabular-nums}
/* ランク列 / W–L列: 2値のときは1値=1行で縦に積む */
#pl-table td.rk .cl,#pl-table td.wl .cl{display:block}
#pl-table td.rk.multi,#pl-table td.wl.multi{line-height:1.35}
#pl-table td.rk .r-pt,#pl-table td.wl .wl-wr{color:var(--muted);font-size:11px}
#pl-table td.gt{font-variant-numeric:tabular-nums;color:var(--muted)}
#pl-table td.ps{font-variant-numeric:tabular-nums;color:var(--muted)}
#pl-table td.ps .ps-bar{display:inline-block;height:5px;border-radius:3px;background:var(--accent);vertical-align:middle;margin-left:5px;min-width:2px}
/* レーンセルの多段スタック（表示設定でレーン別 勝敗/勝率/勝率Pt を足したとき） */
#pl-table td.lane.lane-multi{white-space:normal;line-height:1.35}
#pl-table td.lane .ln{display:block}
#pl-table td.lane .ln1{white-space:nowrap}
#pl-table td.lane .ln2{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
#pl-table td.lane .ln-empty{color:var(--muted)}
#pl-table td.lane .ln-hist{letter-spacing:1px}
#pl-table td.lane .ln-hist .hm{font-size:10px}
#pl-table td.lane .ln-hist .hw{color:var(--good)}
#pl-table td.lane .ln-hist .hl{color:var(--bad)}
#pl-table td.lane .ll-box.ll-col{flex-direction:column;align-items:center;gap:1px;line-height:1.3}
/* 2026-09-16: 自評マークのボタン化（台帳・チーム結果カード・ベンチ共通）。押すと固定レーン(pinLane)をトグル。
   希望レーン(lockedLane・.ll-on/--accent)とは別の概念なので、固定レーンは --warn で見分けられるようにする。 */
.gradebtn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;line-height:1}
.gradebtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.gradebtn.pin-on{outline:2px solid var(--warn);outline-offset:2px;border-radius:50%}
#pl-table td.lane.pin-on{background:color-mix(in srgb,var(--warn) 14%,transparent)}
.pl-sort{display:flex;gap:6px;align-items:center;font-size:12px;flex-wrap:wrap}
.pl-sort label{color:var(--muted);white-space:nowrap}
.pl-sort select{font-size:12px;padding:3px 6px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px}
.pl-sort #pl-sort-dir{flex:0 0 auto;min-width:34px;font-size:13px;line-height:1}
/* 「表示設定」ディスクロージャ（.jv-host / .pv-key パターン） */
.pl-cols{font-size:12px;color:var(--muted)}
.pl-cols>summary{cursor:pointer;list-style:none;padding:3px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg3);color:var(--fg);font-weight:600;white-space:nowrap}
.pl-cols>summary::-webkit-details-marker{display:none}
.pl-cols[open]{flex-basis:100%;order:99;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pl-cols-body{display:flex;flex-wrap:wrap;gap:12px}
.pl-cols-grp{margin:0;border:1px solid var(--line);border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;gap:3px}
.pl-cols-grp legend{font-size:11px;color:var(--muted);padding:0 4px}
.pl-cols-grp label{display:flex;align-items:center;gap:5px;cursor:pointer;color:var(--fg);white-space:nowrap}
.pl-cols-grp input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent)}
/* M6（2026-09-22・Phase C）: 台帳「参加」列＝プルダウン→単純なチェックボックスに戻す（真偽値のみ・
   部屋のパスワードを知っている人=canEdit()なら誰でも編集可・部屋のpartakeへ同期）。 */
#pl-table td.col-partake input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
#pl-table td.col-partake input[type=checkbox]:disabled{opacity:.5;cursor:default}
#pl-table td.col-sel,#pl-table th.col-sel{width:24px}
#pl-table td.col-sel input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
/* 行クリックで編集（RiotIDは名前の下に小さく表示）。チェックボックス自体のクリックは編集を開かない（JS側で判定） */
#pl-tbody tr.pl-editable{cursor:pointer}
#pl-tbody tr.pl-editable:hover td{background:color-mix(in srgb,var(--accent) 8%,transparent)}
#pl-tbody td.nm .pl-riotid{display:block;font-size:11px;color:var(--muted)}
#pl-tbody tr.pl-selected td{background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* ===================== [CSS-3] 参加者 ===================== */
.pt-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#pt-count{font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:4px 10px}
#pt-count.ok{color:var(--good);border-color:var(--good)}
/* 2026-09-17: ユーザー要望「チーム分け設定の下にある、今日の参加者を削除」で「今日の参加者」カード（見出し・
   枠）を撤去。#pt-count/#pt-clear/#pt-msg（人数の可否・チーム分け実行が無効な理由等の有用な情報）は
   idそのままチーム分け設定カードのcard-head直下へ移設（新規実装なし・JSは無改修）。
   2026-09-17後続: ユーザー要望「〇〇人選択解除の部分を見えなくして」で、この.pt-status（#pt-count/#pt-clear）
   だけを.hiddenで非表示に（#pt-msgは「あと◯人」等チーム分け実行が無効な理由を説明する情報のため対象外＝
   引き続き表示）。renderParticipants()はJS側から直接#pt-count/#pt-clearのDOMを書き換えているだけで
   無改修（要素はDOMに残るがdisplay:noneで見えないだけ）。 */
.pt-status{display:flex;align-items:center;gap:10px;margin-top:8px}

/* ===================== [CSS-4] 結果 ===================== */
.diff-badge{display:inline-block;font-weight:700;font-size:13px;border-radius:8px;padding:4px 12px;margin-bottom:12px;border:1px solid var(--line)}
.diff-badge.d-good{color:var(--good);border-color:var(--good)}
.diff-badge.d-mid{color:var(--warn);border-color:var(--warn)}
.diff-badge.d-bad{color:var(--bad);border-color:var(--bad)}
.rs-grid{display:grid;grid-template-columns:1fr 44px 1fr;gap:8px}
.rs-grid.no-diff{grid-template-columns:1fr 1fr}   /* 2026-09-15: 表示設定「チームのカードの間の差」OFF時は2列（差の列自体を出さない） */
.rs-team{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg)}
.rs-team.t-a{border-top:3px solid var(--teamA)}
.rs-team.t-b{border-top:3px solid var(--teamB)}
.rs-team-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;margin-bottom:8px}
.rs-total{font-size:12px;color:var(--muted);font-weight:600}
/* 2026-09-15追加: 2チームのカードの間に、対面（同レーン）ごとの合計Pの差を表示する中央列。
   両チームの .rs-rows と同じクラス（.rs-rows/.rs-row/.rs-th）を再利用することで見出し・各行の高さを完全に一致させる。 */
.rs-diffcol{display:flex;flex-direction:column;padding:13px 0 10px}
/* padding-top 13px = .rs-team の border-top(3px、t-a/t-b で上書き) + padding(10px) と揃え、行位置を両チームに一致させる */
.rs-diffcol .rs-team-head{visibility:hidden}
.rs-diffcol .rs-diffval{display:block;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.rs-diffcol .rs-th.rs-diffval{font-size:10px;font-weight:700}
/* 2026-09-15: 固定の画面幅ブレークポイント(旧: 640px以下で強制1列)をやめ、実際に表示されている列数（表示設定でRP/WP等を
   減らせば必要幅も減る）に応じて JS(syncCardGridLayout) が都度 .rs-stack を付け外しする方式に変更。
   ユーザー要望「表示情報が少ない時は全画面でなくても2列にしてほしい」。 */
.rs-grid.rs-stack{grid-template-columns:1fr}
.rs-grid.rs-stack .rs-diffcol{margin:4px 0}
/* 1チーム分の行はまとめて1つのグリッド＝全行で縦の列がそろう（display:contents で各行の子をこのグリッドに載せる）。
   2026-09-14: 表示設定でRP/WP/合計級の列自体をON/OFFできるよう、grid-template-columns は teamCol が列数に応じて
   インラインstyleで都度セットする（固定列数のCSSルールは持たない）。先頭行は見出し行 .rs-headrow（同じグリッドに
   display:contents で相乗り＝縦の列が完全にそろう）。 */
.rs-rows{display:grid;align-items:center;font-size:13px}
.rs-row{display:contents}
.rs-rows>.rs-row>*{padding:5px 5px;border-bottom:1px solid var(--line);min-width:0}
.rs-rows>.rs-row>*:first-child{padding-left:0}
.rs-rows>.rs-row>*:last-child{padding-right:0}
.rs-rows>.rs-row>.rs-streak-none{padding:0;border-bottom:0}
.rs-rows>.rs-row:last-child>*{border-bottom:none}
/* 2026-09-15: 結果カードの選手をD&Dで入替（swapResultPlayers）。.rs-row は display:contents で自身に箱を持たない
   ため、draggable は各セル(span)側に付与し、ドラッグ元/ドロップ先のハイライトは子要素(>*)へまとめて適用する。 */
.rs-rows>.rs-row:not(.rs-headrow)>*{cursor:grab}
.rs-rows>.rs-row.rs-drag-src>*{opacity:.4}
.rs-rows>.rs-row.rs-drop-target>*{background:color-mix(in srgb, var(--accent) 22%, transparent);outline:1px dashed var(--accent);outline-offset:-1px}
/* 2026-09-22: 自分の枠の強調（Phase BのmyPdtIdと連動。.rs-drop-target等より先に書き、ドラッグ中は上の
   ハイライトが優先されるようにする）。 */
.rs-rows>.rs-row.rs-row-mine>*{background:color-mix(in srgb, var(--accent) 12%, transparent)}
/* 2026-09-22: チャンピオンセレクト風の結果演出（設定でOn/Off、既定Off）。.rs-rowはdisplay:contentsのため
   子要素(>*)側にフェードインアニメーションをかける。--reveal-iは両チーム共通のレーン順インデックス
   （teamCol()がTop=0…Sup=4で埋め込む）で、レーンごとに順番に出現して見えるようdelayをずらす。 */
.rs-reveal-on .rs-rows>.rs-row:not(.rs-headrow)>*{
  animation:rs-reveal-in .35s ease both;
  animation-delay:calc(var(--reveal-i, 0) * 110ms);
}
@keyframes rs-reveal-in{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
/* 2026-09-16: ベンチのカードともD&Dで入替可能に。.rs-bench-card は通常の箱（display:contentsではない）なので
   自身に直接ハイライトを付ければよい（.rs-row のような子要素(>*)への回りこみは不要）。 */
.rs-bench-card{cursor:grab}
.rs-bench-card.rs-drag-src{opacity:.4}
.rs-bench-card.rs-drop-target{background:color-mix(in srgb, var(--accent) 22%, transparent);outline:1px dashed var(--accent);outline-offset:-1px}
.rs-th{font-size:10px;color:var(--muted);font-weight:700;white-space:nowrap}
.rs-row .ln{display:flex;align-items:center;justify-content:center}
.lane-ic{width:16px;height:16px;object-fit:contain;flex:0 0 auto;vertical-align:middle}
.rs-row .rs-order,.rs-th.rs-order{color:var(--muted);font-size:11px;text-align:center;font-variant-numeric:tabular-nums}
.rs-row .rs-nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}
/* 2026-09-19後続: 「俺より強いやつに会いに来た」を名前の文字列の手前に合体表示（結果カード/ベンチ共通。表示設定でOnOff）。 */
.rs-boost{font-size:10px;color:var(--accent);font-weight:700}
/* 2026-09-19後続後続後続後続後続: ベンチでRk表示がONのとき、過去最高ランクの直後に矢印だけ続ける版（プレイヤー達の
   .pp-nm-boost-inlineと同じ考え方）。結果カードのRk/強さの上書き表示(.rs-rk-boosted/.rs-tr-boosted)も同系色。 */
.rs-boost-inline{color:var(--accent);font-weight:700}
.rs-row .rs-grade{font-size:11px;color:var(--muted);white-space:nowrap}
.rs-row .rs-grade.g-main,.rs-row .rs-grade.g-sub{color:var(--good)}
.rs-row .rs-rk,.rs-th.rs-rk{font-size:11px;color:var(--muted);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-row .rs-games,.rs-th.rs-games{font-size:11px;color:var(--muted);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-row .rs-rp,.rs-row .rs-wp,.rs-row .rs-tr,.rs-row .rs-sc,
.rs-th.rs-rp,.rs-th.rs-wp,.rs-th.rs-tr,.rs-th.rs-sc{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;white-space:nowrap}
/* 2026-09-19後続後続後続後続後続後続後続後続後続後続後続: ユーザー報告「上書きしたところがもっとはっきり青くなる
   ように、今だと変化がわかりづらい」＝直前の.rs-rk-boosted/.rs-tr-boostedは.rs-row .rs-rk/.rs-row .rs-tr（2クラス）
   より詳細度が低い1クラスのセレクタだったため、muted色に負けて実質効いていなかった（CSSの詳細度バグ）。
   `.rs-row .rs-rk.rs-rk-boosted`のように3クラスにして確実に上書きし、背景ピル＋太字も足して一目で分かるようにする。 */
.rs-row .rs-rk.rs-rk-boosted,.rs-row .rs-tr.rs-tr-boosted{
  color:var(--accent);font-weight:800;
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:6px;padding:1px 5px;
}
.rs-row .rs-streak{font-size:10px;font-weight:700;padding:1px 4px;border-radius:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-row .rs-streak.hot{background:#ff6b3515;color:#ff6b35}
.rs-row .rs-streak.cold{background:#3b82f615;color:#3b82f6}
.rs-row .rs-streak-none{display:block;width:0}
.rs-win{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rs-sheetall{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 16px}
/* P4c: 参加者オプション（2026-09-16後続後続後続: 「チーム分け設定」ヘッダの「チーム数」「詳細設定」内へ移設。
   要素は.pl-cols-body内に置かれるため、選択欄の見た目は.pl-cols-body selectで指定） / 対戦カード / 補欠 */
.pl-cols-body select{font-size:12px;padding:3px 6px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px}
.pl-cols-body select:disabled{opacity:.5;cursor:not-allowed}
.pt-grades-wrap{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pt-grade{display:inline-flex;align-items:center;gap:2px;cursor:pointer}
.pt-grade input{margin:0}
.pt-check{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.pt-check input{margin:0}
/* 2026-09-17: 配置順（弱→強/強→弱）トグル。チェックボックスではなく「二つを切り替える」見た目にしたいという
   ユーザー要望のため、2択セグメント型のスイッチとして実装（選択中の側だけ --accent で塗る）。 */
.pt-order{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg)}
.pt-order-label{color:var(--muted);white-space:nowrap}
.pt-order-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--bg)}
.pt-order-opt{border:none;background:transparent;color:var(--muted);font-size:12px;padding:4px 10px;cursor:pointer;white-space:nowrap;line-height:1.2;transition:background .18s ease,color .18s ease}
.pt-order-opt.on{background:var(--accent);color:#fff;font-weight:700}
.pt-order-opt:disabled{opacity:.4;cursor:not-allowed}
/* 2026-09-18: 得意度順スイッチの表示テキスト中「○」がフォントの都合で◎/◇/△/✖より小さく見える。
   当初はfont-sizeを1.22em拡大するグリフ頼みの対策を試したが、実機（ユーザー環境）では効果が体感できないとの
   報告＝フォント・OSによってグリフの実際の描画サイズ/太さが変わり得るため、グリフに一切頼らずCSSで丸自体を
   描画する方式に変更（環境非依存で確実にサイズを揃えられる）。文字の「○」はDOM上は残すが視覚的には
   border-circleのspanで上書きする形にはせず、テキストをまるごとCSS描画の丸1個に置き換える
   （他画面の◎〜✖アイコン表示には影響させない＝ここだけのスコープ）。 */
.grade-o-fix{display:inline-block;width:.92em;height:.92em;margin:0 .05em;border:.16em solid currentColor;border-radius:50%;vertical-align:-0.08em;box-sizing:border-box}
/* 2026-09-18後続: ユーザー要望「得意度順の＞のサイズを小さくしてください、自評のマークがみえづらいので」＝
   区切りの＞が本体の◎○◇△✖と同じ12pxで並ぶと目立ちすぎて肝心のマークが埋もれて見えづらいとの指摘。
   区切り文字だけ縮小・減光してマーク側を相対的に目立たせる。 */
.grade-sep{font-size:.75em;opacity:.6;margin:0 -0.05em}
.rs-card{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
.rs-card-head{font-weight:700;font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rs-card-head .diff-badge{margin:0}
.rs-recorded{color:var(--good);font-weight:700;font-size:13px}
/* 2026-09-15追加: カード群（カード1・カード2…）の横に「ベンチ」枠を配置。普段は<details>で折りたたみ、
   position:sticky でスクロール中もカード群の高さの範囲内で常に横に頭が来るようにする（ユーザー要望）。 */
.rs-layout{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.rs-cards-col{min-width:0}
.rs-bench-col{position:sticky;top:70px}
.rs-bench{border-radius:10px;background:var(--bg2);width:fit-content}
/* 2026-09-15後続: 閉じている間は文字1つ分くらいの幅まで縮める（ユーザー要望）。開いたら通常の枠幅に戻す。 */
.rs-bench:not([open]){padding:8px 6px;border:1px solid var(--accent);background:var(--bg3);box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* 2026-09-16: 各人を結果カードのような「カード」（1〜7行）で表示するため、単純な一覧のときより幅を広めに確保 */
.rs-bench[open]{padding:10px;min-width:220px;max-width:300px;width:auto;border:1px dashed var(--line);position:relative}
.rs-bench summary{cursor:pointer;font-weight:700;font-size:14px;white-space:nowrap;list-style:none;-webkit-tap-highlight-color:transparent}
.rs-bench summary::-webkit-details-marker{display:none}
.rs-bench[open] summary{padding-right:52px;margin-bottom:8px}
.rs-bench:not([open]) .rs-bench-open-label{display:none}
.rs-bench[open] .rs-bench-closed-label{display:none}
/* 2026-09-15後続後続: 閉時は「ベ」1文字だけだと何の枠か分からないとの指摘で、「ベンチN人」を縦書きにして
   幅は文字1つ分のまま全文字を読めるように変更。text-orientation:upright で数字も回転させず1文字ずつ縦に並べる。 */
.rs-bench:not([open]) .rs-bench-closed-label{writing-mode:vertical-rl;text-orientation:upright;line-height:1.3;letter-spacing:1px;color:var(--accent);display:flex;align-items:center;gap:3px}
/* 2026-09-15後続後続後続: 「閉じていて・タッチで開く」ことが見た目でも分かるよう、常時アクセント色の▸アイコン付き
   ボタン風の見た目（実線の縁取り＋影＋タップ時に色が濃くなる）に変更。 */
.rs-bench:not([open]) .rs-bench-closed-label::before{content:'▸';font-size:11px}
.rs-bench:not([open]):active{background:var(--accent);box-shadow:none}
.rs-bench:not([open]):active .rs-bench-closed-label{color:var(--fg)}
/* 2026-09-16後続: 「表示設定」が独立した行を占めて場所をとるとの指摘で、summary（▾ベンチN人）と同じ行の
   右端に収まるボタンとして重ねて配置。開いた時のパネル自体（フィールドセットの中身）は従来と同じ形のまま、
   .rs-bench内で絶対配置してリストを押し下げないようにする。 */
.rs-bench-cols{position:absolute;top:10px;right:10px;margin:0;font-size:11px;z-index:2}
.rs-bench-cols>summary{padding:2px 6px;border-radius:6px}
.rs-bench-cols[open]{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;box-shadow:0 2px 10px rgba(0,0,0,.3);max-width:240px}
.rs-bench-cols .pl-cols-body{gap:8px}
.rs-bench-cols .pl-cols-grp{padding:4px 8px}
/* 2026-09-16: ベンチの各プレイヤーを結果カードのような「カード」（1行目=名前/ランク名/今日の試合数、
   2〜7行目=各レーンの自評/勝率/ポイント/勝敗ポイント/合計ポイント/強さ）で表示。
   .rs-bench-table は結果カードの .rs-rows と同じ考え方＝各 .rs-bench-row を display:contents で
   同じグリッドに相乗りさせ、レーン列（TOP〜SUP）を全カード・全行で縦にそろえる。 */
.rs-bench-list{margin-top:6px;max-height:50vh;overflow:auto}
.rs-bench-card{padding:5px 0;border-bottom:1px solid var(--line)}
.rs-bench-card:last-child{border-bottom:none}
.rs-bench-card-head{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-bench-nm{font-weight:700;color:var(--fg)}
.rs-bench-table{display:grid;grid-template-columns:28px repeat(5,1fr);gap:2px 3px;align-items:center;margin-top:3px}
.rs-bench-row{display:contents}
.rs-bench-row>*{font-size:10px;text-align:center;color:var(--muted);white-space:nowrap}
.rs-bench-rowlabel{text-align:left;font-size:9px}
.rs-bench-table .ln{display:flex;align-items:center;justify-content:center}
.rs-bench-table .lane-ic{width:13px;height:13px}

/* 2026-09-17: 「データ履歴」枠（formTeamsTiered の実行トレースを表示する診断用パネル。#rs-section の下）。
   `.pref-lanes-box`/`.rs-bench` と同じネイティブ<details>パターン（既定は閉）。中身は表主体なので
   `.pl-cols-grp`ではなく専用の軽量な表スタイルを新設。 */
.rs-history{font-size:12px;color:var(--fg)}
.rs-history>summary{cursor:pointer;list-style:none;padding:3px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg3);color:var(--fg);font-weight:600;display:inline-block}
.rs-history>summary::-webkit-details-marker{display:none}
.rs-history[open]>summary{margin-bottom:10px}
#rs-history-body h4{font-size:12px;color:var(--muted);margin:14px 0 6px}
#rs-history-body h4:first-child{margin-top:0}
.rs-hist-cond{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.rs-hist-table{width:100%;border-collapse:collapse;font-size:12px}
.rs-hist-table th,.rs-hist-table td{padding:3px 6px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.rs-hist-table th{color:var(--muted);font-weight:600}
.rs-hist-table td:last-child{white-space:normal}
.rs-hist-opp{border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:8px}
.rs-hist-opp-head{font-weight:600;margin-bottom:4px}
.rs-hist-opp-cands{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:1px}
.rs-hist-opp-cands .rs-hist-chosen{color:var(--accent);font-weight:700}
/* 2026-09-17: 「プレイヤーの並び順」表で、実際に並び替えの基準として使われている列（fairGames設定に応じて
   今日の試合数／合計のどちらか）を強調する。ユーザー要望「試合数の影響がわかりづらい」への対応。 */
.rs-hist-table th.rs-hist-key{color:var(--accent)}
.rs-hist-table td.rs-hist-key{color:var(--accent);font-weight:700}

/* ===================== [CSS-5] フォーム ===================== */
.modal label,.drawer label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.modal input,.modal select,.drawer input,.drawer select{
  background:var(--bg);border:1px solid var(--line);color:var(--fg);
  border-radius:8px;padding:7px 9px;font-size:14px;
}
.modal fieldset{border:1px solid var(--line);border-radius:8px;padding:10px;margin:0}
.modal fieldset[disabled]{opacity:.45}
.modal legend{font-size:11px;color:var(--muted);padding:0 4px}
.modal legend .pm-goodcount{color:var(--fg)}
.modal legend .pm-goodcount.bad{color:var(--bad)}
.modal legend .pm-goodcount.ok{color:var(--good)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* 2026-09-22 Phase D: PC専用化に伴い、#pm-modalは縦一列（名前〜メモ〜レーン得意度が全部縦積み）から
   左=基本情報・右=レーン得意度の2カラムへ。横幅を広げた分、fieldsetの縦の長さが目立たなくなる。 */
.modal.pm-wide{max-width:640px}
.pm-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.pm-col-basic{display:flex;flex-direction:column;gap:12px;min-width:0}
/* fieldsetは既定でmin-width:min-content相当の特殊な最小幅を持ち、1fr 1frでの均等分割を妨げるため明示的に解除する */
.pm-col-lanes{align-self:stretch;min-width:0}
/* レーン得意度: 縦1行/レーン。ラベル / グレード / 加点(±div) / 実効ランク */
.lane-rows{display:flex;flex-direction:column;gap:6px}
.lane-row{display:grid;grid-template-columns:32px minmax(0,1fr) 50px auto;align-items:center;gap:6px}
.lane-row .lr-lane{font-size:11px;color:var(--muted);font-weight:700}
.lane-row select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:6px;padding:6px 6px;font-size:13px}
.lane-row select.pm-adjdiv{text-align:center;padding:6px 2px}
.lane-row .pm-eff{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.modal-foot,.cfg-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modal-foot .spacer{flex:1}
.err{color:var(--bad);font-size:12px;min-height:14px;margin:0}
.drawer label.cfg-api input{font-size:12px}
.pc-choice-btns{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pc-choice-btns .btn{width:100%;padding:12px}
.pv-myscore-body{display:flex;flex-direction:column;gap:10px}
.pv-ms-row{display:flex;align-items:center;gap:8px}
.pv-ms-lane{flex:0 0 68px;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap}
.pv-ms-grade{flex:0 0 28px;text-align:center;font-size:14px;cursor:help}
.pv-ms-bar-wrap{flex:1;min-width:0;height:20px;background:var(--bg3);border:1px solid var(--line);border-radius:10px;position:relative;cursor:help}
.pv-ms-bar-mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.pv-ms-bar-fill{position:absolute;top:0;bottom:0;border-radius:2px}
.pv-ms-bar-fill.pos{background:var(--good)}
.pv-ms-bar-fill.neg{background:var(--bad)}
.pv-ms-bar-w,.pv-ms-bar-l,.pv-ms-bar-wr{position:absolute;top:50%;transform:translateY(-50%);font-size:9px;font-weight:700;line-height:1;pointer-events:none;
  text-shadow:0 0 3px var(--bg3),0 0 3px var(--bg3),0 0 3px var(--bg3)}
.pv-ms-bar-w{left:5px;color:var(--good)}
.pv-ms-bar-l{right:5px;color:var(--bad)}
.pv-ms-bar-wr{left:50%;transform:translate(-50%,-50%);color:var(--fg)}
.pv-ms-peak{margin:2px 0 8px}
.pv-ms-nums{flex:0 0 225px;display:flex;gap:6px;font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.pv-ms-nums span{cursor:help;border-bottom:1px dotted var(--muted)}
.pv-ms-rating.pos{color:var(--good)}
.pv-ms-rating.neg{color:var(--bad)}
.pv-ms-total{color:var(--fg);font-weight:700}
.cfg-ping-out{white-space:pre-wrap;word-break:break-all;font:11px/1.5 ui-monospace,Menlo,Consolas,monospace;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px;margin:0;max-height:200px;overflow:auto}
.cfg-ping-out:empty{display:none}

/* ===================== [CSS-6] room (M2 P1) ===================== */
.room-wrap{max-width:460px;margin:24px auto;display:flex;flex-direction:column;gap:16px}
.room-wrap h2{font-size:18px}
.room-wrap .sub{font-size:12px;color:var(--muted)}
.landing-btns{display:flex;flex-direction:column;gap:12px}
.landing-btns .btn{padding:16px;font-size:15px;text-align:left}
.room-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px}
.room-code{font:700 30px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:6px;color:var(--accent);
  text-align:center;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:14px}
.room-code.sm{font-size:15px;letter-spacing:3px;padding:6px 10px;flex:1}
.room-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.room-field input{background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px 10px;font-size:13px}
.pv-boost-row{display:flex;align-items:center;gap:8px}
.pv-boost-row input{width:64px;flex:0 0 auto}
.pv-boost-preview{font-size:12px;color:var(--accent);font-weight:700}
#jv-pass,#rc-pass{font:700 16px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:6px;text-align:center}
.code-line{display:flex;align-items:center;gap:6px}
.code-line input{flex:1;min-width:0}
.code-eye{background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer;
  padding:4px 8px;font-size:13px;line-height:1;flex:0 0 auto}
.cv-share{background:var(--bg);border:1px solid var(--accent);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--fg)}
.cv-share-row{display:flex;gap:10px;align-items:baseline}
.cv-share-k{color:var(--muted);min-width:64px}
.cv-share-row b{font-size:16px}
.room-players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto}
.room-players li{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.room-players li .nm{flex:1;min-width:0}
/* 参加表明 */
.declare-btns{display:flex;gap:8px}
.declare-btns .btn{flex:1}
.declare-btns .btn.on[data-v="in"]{background:var(--good);border-color:var(--good);color:#04210f}
.declare-btns .btn.on[data-v="rest"]{background:var(--warn);border-color:var(--warn);color:#2b1c04}
.declare-btns .btn.on[data-v="out"]{background:var(--bad);border-color:var(--bad);color:#2a0606}
.declare-btns .btn.on[data-v="none"]{background:var(--line);border-color:var(--muted);color:var(--fg)}
.tag{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11px;border:1px solid var(--line)}
.tag.in{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good)}
.tag.rest{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.tag.out{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}
.tag.none{color:var(--muted)}
.tag.lane{background:var(--bg3);color:var(--fg)}
/* 主催者がゲストの参加/不参加を切替 */
.pk-ctl{display:inline-flex;gap:4px;flex-shrink:0}
.pk-btn{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;line-height:1.5}
.pk-btn.on-in{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good);border-color:var(--good)}
.pk-btn.on-out{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad);border-color:var(--bad)}
.pk-btn:disabled{opacity:.5;cursor:default}
/* 参加者一覧の並び替え */
.pv-sort{display:flex;gap:6px;align-items:center;margin:2px 0;font-size:12px;flex-wrap:wrap}
.pv-sort label{color:var(--muted);white-space:nowrap}
.pv-sort select{font-size:12px;padding:3px 6px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px}
.pv-sort #pv-sort-dir{flex:0 0 auto;min-width:34px;font-size:13px;line-height:1}
/* 後でまとめて送信 */
.pv-defer{display:flex;gap:6px;align-items:center;margin:2px 0}
.pv-defer .btn.sm{flex:0 0 auto}
#pv-defer-toggle.on{background:var(--accent);border-color:var(--accent);color:#fff}
#pv-delsel-toggle.on{background:var(--bad);border-color:var(--bad);color:#fff}
.pd-chk{margin:0;flex:0 0 auto}
.nm.pd-pick{cursor:pointer;border-radius:6px;padding:2px 6px;margin:-2px -6px}
.nm.pd-pick.pd-selected{background:color-mix(in srgb,var(--bad) 20%,transparent);outline:1px solid var(--bad)}
.tag.pending{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent);border-color:var(--accent)}
.pv-list-head{display:flex;align-items:center;gap:8px}
.pv-list-head h2{flex:1;margin:0}
.pv-list-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-4px 0 2px}
.pv-updated{font-size:11px;color:var(--muted)}
#pv-status.open{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good);border-color:var(--good)}
#pv-status.closed{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad);border-color:var(--bad)}
.hr{border:none;border-top:1px solid var(--line);margin:4px 0}
#lv-profile #lv-prof-body{color:var(--fg);font-size:13px}
#lv-profile #lv-prof-clear{align-self:flex-start}
#lv-rooms-list li .nm{font-size:13px}
.jv-host,.pv-key{font-size:12px;color:var(--muted)}
.jv-host summary,.pv-key summary{cursor:pointer;padding:2px 0}
.jv-host[open],.pv-key[open]{display:flex;flex-direction:column;gap:8px}
.pv-key-row{display:flex;gap:8px;align-items:center}
.pv-key-row input,.pv-share-row input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px 10px;font:12px ui-monospace,Menlo,Consolas,monospace}
.pv-share{display:flex;flex-direction:column;gap:8px;margin:4px 0 2px}
.pv-share-row{display:flex;gap:8px;align-items:center}
.pv-share-k{font-size:12px;color:var(--muted);flex:0 0 60px}
#ri-modal .pv-share-k{flex-basis:72px}
#ri-modal .pv-share-row input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px 10px;font:12px ui-monospace,Menlo,Consolas,monospace}
.pv-scoring{display:flex;flex-direction:column;gap:4px;margin:4px 0 2px}
.pv-scoring-item{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.pv-scoring-item label{font-size:13px;font-weight:600}
.pv-scoring-item input{width:100px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px 10px;font:13px ui-monospace,Menlo,Consolas,monospace}
.pv-scoring-help{margin:0}
.pv-scoring-preview{margin-top:10px;padding:10px;background:var(--bg2);border:1px solid var(--line);border-radius:8px}
.pv-scoring-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px}
.pv-scoring-table th,.pv-scoring-table td{padding:4px 6px;text-align:right;border-bottom:1px solid var(--line)}
.pv-scoring-table th:first-child,.pv-scoring-table td:first-child{text-align:left}
.pv-scoring-table td.pos{color:var(--good)}
.pv-scoring-table td.neg{color:var(--bad)}
.room-err{color:var(--bad);font-size:12px;min-height:15px}
.rc-status{font-size:12px;min-height:15px}
.rc-status.ok{color:var(--good)}
.rc-status.ng{color:var(--bad)}
.rc-help{font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px}
.rc-help ol{margin:6px 0;padding-left:18px}
.rc-help li{margin:2px 0}
.room-foot{display:flex;gap:8px;flex-wrap:wrap}
.pv-autoreset{display:flex;flex-direction:column;gap:6px}
.pv-autoreset-row{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pv-autoreset-row select{background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:6px;padding:2px 6px;font-size:12px}
.room-back{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:4px 0;align-self:flex-start}
.room-banner{display:flex;align-items:center;gap:8px;padding:6px 10px;margin-bottom:8px;background:var(--bg2);border:1px solid var(--line);border-radius:8px}
.lv-room-title{font-weight:700}
.room-banner .sub{flex:1}
/* 「チーム分け画面へ」を参加者一覧と同じ幅で大きく強調。「この端末から退出」とは枠を分ける */
.pv-go-card{padding:14px;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 6px 20px rgba(91,140,255,.28)}
.pv-go-btn{width:100%;padding:18px 12px;font-size:19px;font-weight:800;letter-spacing:1px;
  background:var(--accent2);border-color:var(--accent);color:#fff;border-radius:10px}
.pv-go-btn:hover{filter:brightness(1.12)}
/* 2026-09-14: 「更新せずすぐに」用のサブボタン。主ボタンより控えめに（.room-card の flex-column で自動的に縦に並ぶ） */
.pv-go-btn-sub{width:100%;padding:9px 12px;font-size:13px;font-weight:600;border-radius:9px}
.pv-leave-foot{justify-content:center}
.pill{display:inline-block;background:var(--bg3);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px}