:root{
  --surface-1:#fcfcfb;
  --page:#f2f1ee;
  --text-primary:#0b0b0b;
  --text-secondary:#52514e;
  --muted:#898781;
  --grid:#e1e0d9;
  --baseline:#c3c2b7;
  --border:rgba(11,11,11,0.10);
  --series-1:#2a78d6;
  --series-8:#e34948;
  --good:#0ca30c;
  --panel-accent:#eef4fc;
  --sidebar:#1c2430;
  --sidebar-active:#2a3446;
  --sidebar-text:#c7ccd6;
  --radius:10px;
  --topbar-h:0px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--page); color:var(--text-primary);
}
.note-banner{
  background:#fff6df; border-bottom:1px solid #e8d9a8; color:#5a4a12;
  font-size:12.5px; padding:7px 16px; text-align:center;
}

/* topbar: mobile only */
.topbar{
  display:none; align-items:center; gap:10px; height:52px; padding:0 14px;
  background:var(--sidebar); color:#fff; position:sticky; top:0; z-index:30;
}
.hamburger{ background:none; border:none; color:#fff; font-size:20px; cursor:pointer; padding:4px 6px; }
.topbar-title{ font-size:15px; font-weight:700; }
.topbar-login-btn{ margin-left:auto; }

.app-shell{ display:flex; align-items:flex-start; }
.overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:35; }
.overlay.show{ display:block; }

.sidebar{
  width:200px; min-height:100vh; background:var(--sidebar); color:var(--sidebar-text);
  padding:18px 10px; flex-shrink:0; display:flex; flex-direction:column; gap:2px; position:sticky; top:0;
  transition:width .18s ease;
}
.sidebar-collapse-btn{
  position:absolute; top:18px; right:-12px; width:24px; height:24px; border-radius:50%;
  background:var(--sidebar); color:#fff; border:1px solid #333f52; cursor:pointer;
  font-size:10px; display:flex; align-items:center; justify-content:center; z-index:2;
}
.sidebar-collapse-btn:hover{ background:#242e3d; }
.brand{ font-size:15px; font-weight:700; color:#fff; padding:4px 10px 4px; white-space:nowrap; overflow:hidden; }
.brand span{ color:var(--series-1); }
.brand small{ display:block; font-size:10.5px; font-weight:400; color:#8b93a3; margin-top:2px; }
.nav-btn{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  background:none; border:none; color:var(--sidebar-text);
  text-align:left; font-size:13.5px; padding:10px 12px; border-radius:8px; margin-top:12px;
  cursor:pointer; width:100%; white-space:nowrap; overflow:hidden;
}
.nav-btn .ic{ width:18px; text-align:center; opacity:.85; flex-shrink:0; }
.nav-btn:hover{ background:#242e3d; }
.nav-btn.active{ background:var(--sidebar-active); color:#fff; font-weight:600; }
.nav-sep{ height:1px; background:#2c3648; margin:14px 6px 2px; }
.nav-label{ font-size:11px; color:#6b7280; padding:6px 12px 0; letter-spacing:.04em; white-space:nowrap; overflow:hidden; }
.sidebar-footer{ margin-top:auto; padding:14px 10px 4px; }
.env-tag{ font-size:11px; color:#8fd19e; background:#16321d; border-radius:6px; padding:6px 8px; white-space:nowrap; overflow:hidden; }

/* アカウント情報：ログイン中ユーザー名・表示名の表示と、表示名の変更、
   ログアウトをサイドバー下部にまとめて置く。対戦相手への入室通知や
   ルーム一覧のホスト名には、この表示名（アカウントの正式な値）を使う。 */
.account-box{ margin-bottom:10px; }
.account-name{ font-size:13.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-username{ font-size:11px; color:#8890a0; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-box label{ display:block; font-size:11px; color:#6b7280; margin-bottom:4px; white-space:nowrap; overflow:hidden; }
.account-box input{
  width:100%; box-sizing:border-box; background:#141a24; border:1px solid #2c3648; color:#fff;
  border-radius:6px; padding:7px 9px; font-size:12.5px;
}
.account-box input:focus{ outline:none; border-color:var(--series-1); }
.account-box .annot{ color:#8fd19e; font-size:11px; margin:0 0 6px; }
.sidebar.collapsed .account-box{ display:none; }

/* 未ログイン時、account-boxの代わりに出すログイン導線 */
.guest-box{ margin-bottom:10px; }
.guest-box .account-username{ color:#8890a0; }
.sidebar.collapsed .guest-box{ display:none; }

/* サイドバーの折りたたみ（デスクトップ幅のみ）：ホーム含む全画面共通で使える */
.sidebar.collapsed{ width:64px; }
.sidebar.collapsed .brand small,
.sidebar.collapsed .brand span,
.sidebar.collapsed .nav-btn .label,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .env-tag{ display:none; }
.sidebar.collapsed .brand{ text-align:center; padding-left:0; padding-right:0; }
.sidebar.collapsed .nav-btn{ justify-content:center; padding-left:0; padding-right:0; }
.sidebar.collapsed .sidebar-collapse-btn{ transform:rotate(180deg); }

.main{ flex:1; min-width:0; padding:26px 32px 90px; }
.screen{ display:none; max-width:980px; margin:0 auto; }
.screen.active{ display:block; }
.screen-title{ font-size:20px; font-weight:700; margin:0 0 4px; }
.screen-desc{ font-size:13px; color:var(--text-secondary); margin:0 0 22px; }

.card{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px; }
.card-warning{ background:#fff5f5; border-color:#f3b7b3; color:#8a2e28; font-size:13px; font-weight:600; }
.card h3{ margin:0 0 12px; font-size:14px; font-weight:700; }
.row{ display:flex; gap:16px; }
.col{ flex:1; min-width:0; }
.main-col{ max-width:560px; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.stat-tile{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.stat-tile .label{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.stat-tile .value{ font-size:24px; font-weight:700; }
.stat-tile .value.good{ color:var(--good); }
.stat-tile .value.small{ font-size:16px; }
.stat-tile .value.dots{ font-size:18px; letter-spacing:2px; }
.stat-tile .sub{ font-size:11px; color:var(--text-secondary); margin-top:4px; }

.btn{
  display:inline-block; background:var(--series-1); color:#fff; border:none;
  padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none;
}
.btn.secondary{ background:#fff; color:var(--text-primary); border:1px solid var(--baseline); }
.btn.small{ padding:6px 12px; font-size:12px; }
/* 対戦準備画面：相手が先に「準備完了」を押した（自分はまだ）ときに、
   このボタンをオレンジにして目立たせる。my-room-widgetのpeer-ready演出と
   同じ色（#d98c00）・同じパルスの考え方に揃えている。 */
.btn.attention{
  background:#d98c00; box-shadow:0 4px 16px rgba(217,140,0,.4);
  animation:btn-attention-pulse 1.1s ease-in-out infinite;
}
@keyframes btn-attention-pulse{
  0%, 100%{ box-shadow:0 4px 16px rgba(217,140,0,.4); }
  50%{ box-shadow:0 4px 16px rgba(217,140,0,.8); }
}

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--text-secondary); margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--baseline); border-radius:7px; padding:9px 10px;
  font-size:13px; font-family:inherit; color:var(--text-primary); background:#fff;
}
.field textarea{ resize:vertical; min-height:60px; }

.cam-slot{ border:1px dashed var(--baseline); border-radius:8px; padding:12px; }
.cam-slot-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.cam-slot-label{ font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.cam-slot-body{ display:none; }
.cam-slot.enabled .cam-slot-body{ display:block; }
.cam-slot.enabled .cam-slot-toggle{ display:none; }

/* カメラプレビュー・相手映像とも常に16:9で表示する */
.cam-preview-wrap{ position:relative; border-radius:8px; overflow:hidden; aspect-ratio:16/9; width:100%; background:#000; }
#camVideo, #remoteVideo, #camVideo2, #remoteVideo2{ width:100%; height:100%; object-fit:cover; border-radius:8px; background:#000; }
.cam-status{ font-size:11px; color:var(--muted); margin-top:8px; }
.cam-status.error{ color:var(--series-8); }
.cam-slot-actions .btn{ white-space:nowrap; }

/* 追加カメラ（スマホ等）のペアリングQRコードモーダル。既存の.card/.btn/.field
   のトンマナに合わせつつ、画面中央に重ねて出すだけの簡単な作り。 */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,10,10,.55); z-index:600;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:var(--surface-1); border-radius:var(--radius); box-shadow:0 14px 40px rgba(0,0,0,.3);
  padding:24px 22px; width:100%; max-width:340px; box-sizing:border-box;
}
.modal-box h3{ margin:0 0 8px; font-size:15px; }
.qr-wrap{ text-align:center; background:#fff; border:1px solid var(--border); border-radius:8px; padding:12px; min-height:60px; }
.qr-wrap img{ max-width:100%; height:auto; }

/* 対戦準備画面の「入室しました」「準備完了しました」の履歴。トーストはすぐ
   消えて見返せないので、こちらは複数件たまっていく形で残しておく。
   種類ごとに色を分けて、ひと目で区別できるようにする。 */
.prep-activity-log{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.prep-activity-log .log-entry{
  font-size:11.5px; padding:5px 10px; border-radius:6px;
  display:flex; align-items:center; gap:7px;
}
.prep-activity-log .log-entry .log-time{ color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums; }
.prep-activity-log .log-entry.log-join{ background:var(--panel-accent); color:#26415f; }
.prep-activity-log .log-entry.log-ready{ background:#eafbea; color:#0b7a0b; font-weight:700; }
.prep-activity-log .log-entry.log-leave{ background:#fdf2f2; color:#8a2e28; }
.prep-activity-log .log-entry.log-away{ background:#fff2e0; color:#a35a00; }

/* 招待URL（ホストにだけ表示。「URLを知っている人のみ」の部屋では必須の導線） */
.prep-invite{ margin-top:12px; }
.prep-invite-label{ font-size:12px; color:var(--text-secondary); margin-bottom:5px; }
.prep-invite-row{ display:flex; gap:8px; align-items:center; }
.prep-invite-row input{ flex:1; min-width:0; font-size:12px; padding:7px 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface-1); color:inherit; }

/* 入室できなかったときの案内カード */
.prep-blocked-title{ font-size:15px; font-weight:800; margin-bottom:6px; }
.prep-blocked-body{ font-weight:500; line-height:1.6; }
.prep-blocked-actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.prep-blocked-actions .btn{ text-decoration:none; }

.field-hint{ font-size:12px; color:var(--text-secondary); margin-top:6px; line-height:1.5; }

.placeholder-img{
  position:absolute; inset:0;
  border:1.5px dashed var(--baseline); border-radius:8px; background:#f6f6f4;
  color:var(--muted); font-size:12px; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center;
  text-align:center; padding:10px;
}

/* 相手映像の接続状態バッジ：映像の上に重ねて表示する小さいラベル */
.rtc-status-badge{
  position:absolute; left:8px; bottom:8px; z-index:4;
  background:rgba(0,0,0,.6); color:#fff; font-size:10.5px; font-weight:600;
  padding:3px 10px; border-radius:20px; max-width:calc(100% - 16px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 入室通知トースト：相手（今のところ名前は仮でプレイヤー名機能ができたら
   差し替える）が入室したタイミングで、画面上部にポップして少し経つと消える */
.toast-notify-wrap{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:500; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
}
.toast-notify{
  background:rgba(20,22,26,.92); color:#fff; font-size:13px; font-weight:600;
  padding:10px 18px; border-radius:30px; box-shadow:0 4px 14px rgba(0,0,0,.25);
  opacity:0; transform:translateY(-10px); transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
}
.toast-notify.show{ opacity:1; transform:translateY(0); }
.toast-notify::before{ content:""; }

/* 「自分が立てたルームは今も公開中です」ポップアップ。対戦準備画面から
   離れて他のページを見ているときに、うっかり存在を忘れないようにする。
   単に見た目上消すだけの✕ボタンは用意しない（ルームは実際には公開されたま
   まになってしまい、存在を忘れたまま放置される事故につながるため）。
   本当に募集をやめたい場合は「部屋を閉じる」から実際にルームを削除する。 */
.my-room-widget{
  position:fixed; right:16px; bottom:16px; z-index:400; max-width:280px;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); padding:14px 16px 16px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.my-room-widget-label{ font-size:11.5px; color:var(--series-1); font-weight:700; margin-bottom:6px; }
.my-room-widget-name{ font-size:13.5px; font-weight:700; margin-bottom:2px; }
.my-room-widget-sub{ font-size:11.5px; color:var(--text-secondary); margin-bottom:10px; }
.my-room-widget-actions{ display:flex; gap:8px; flex-wrap:wrap; }
@media(max-width:880px){
  .my-room-widget{ left:12px; right:12px; bottom:64px; max-width:none; }
}

/* 相手が入室してきたら、待機中の見た目と違いがひと目でわかるように、
   色味を変えて軽くパルスさせる（対戦準備画面に戻るきっかけを目立たせる） */
.my-room-widget.peer-here{
  border-color:var(--good); background:#f2fbf2;
  box-shadow:0 8px 24px rgba(12,163,12,.28);
  animation:my-room-widget-pulse 1.6s ease-in-out infinite;
}
.my-room-widget.peer-here .my-room-widget-label{ color:var(--good); }
@keyframes my-room-widget-pulse{
  0%, 100%{ box-shadow:0 8px 24px rgba(12,163,12,.28); }
  50%{ box-shadow:0 8px 24px rgba(12,163,12,.55); }
}

/* 相手が入室しただけでなく、カメラ・マイクの準備まで完了したら、
   「入ってきました」の表示はそのまま残しつつ、さらに一段目立つ見た目
   （バッジ表示＋色味・パルスの変更）で「準備完了」がひと目でわかるように */
.my-room-widget-ready-badge{
  display:inline-block; margin:-2px 0 10px; padding:3px 9px; border-radius:999px;
  background:#d98c00; color:#fff; font-size:11px; font-weight:700;
}
.my-room-widget.peer-ready{
  border-color:#d98c00; background:#fff8ec;
  box-shadow:0 8px 24px rgba(217,140,0,.34);
  animation:my-room-widget-pulse-ready 1.1s ease-in-out infinite;
}
.my-room-widget.peer-ready .my-room-widget-label{ color:#d98c00; }
@keyframes my-room-widget-pulse-ready{
  0%, 100%{ box-shadow:0 8px 24px rgba(217,140,0,.34); }
  50%{ box-shadow:0 8px 24px rgba(217,140,0,.68); }
}

/* マイク設定：カメラと同じ構成（有効化ボタン→デバイス選択→状態表示）に、
   音量バー（VUメーター）を追加したもの */
.mic-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mic-meter-wrap{ display:flex; align-items:center; gap:10px; }
.mic-meter-label{ font-size:12px; color:var(--text-secondary); flex-shrink:0; }
.mic-meter-track{ flex:1; height:10px; background:var(--grid); border-radius:6px; overflow:hidden; }
.mic-meter-bar{ height:100%; width:0%; background:var(--good); border-radius:6px; transition:width .05s linear; }
.mic-meter-bar.hot{ background:var(--series-8); }

.list-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; background:#fff;
}
.list-item .meta{ font-size:12px; color:var(--text-secondary); margin-top:2px; }
.tag{ display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; background:var(--panel-accent); color:var(--series-1); font-weight:600; margin-right:6px; }
.tag.live{ background:#e9f9ec; color:var(--good); }
.tag.waiting{ background:#fff2e0; color:#a35a00; }
.tag.before{ background:#eef0f2; color:#585f68; }
.tag.lose{ background:#fdeceb; color:var(--series-8); }
.tag.full{ background:#fdeceb; color:#8a2e28; }
.tag.unlisted{ background:#eef0f2; color:#585f68; }

.tabs{ display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--grid); overflow-x:auto; }
.tab{ padding:9px 14px; font-size:13px; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.tab.active{ color:var(--series-1); border-bottom-color:var(--series-1); font-weight:700; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.card .tabs{ margin-bottom:12px; }
.empty-hint{ font-size:12.5px; color:var(--muted); padding:14px 4px; text-align:center; }

table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:420px; }
th{ text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; padding:8px 10px; border-bottom:1px solid var(--grid); }
td{ padding:9px 10px; border-bottom:1px solid var(--grid); }
tr:last-child td{ border-bottom:none; }
.table-scroll{ overflow-x:auto; }

.choice-group{ display:flex; gap:10px; }
.choice{ flex:1; border:1.5px solid var(--baseline); border-radius:8px; padding:16px; text-align:center; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-secondary); }
.choice.win{ border-color:var(--good); color:var(--good); background:#f2fbf2; }
.choice.win.selected{ background:var(--good); color:#fff; }
.choice.lose{ border-color:var(--series-8); color:var(--series-8); background:#fdf2f2; }
.choice.draw{ }
/* ルーム作成の「今からすぐに」／「時間を指定する」など、勝敗以外の
   単純な二択（.choice.mode）にも選択状態が一目でわかるよう色を付ける。
   以前はこのクラスに対応するCSSが無く、選択してもクリックした反応が
   見た目に出なかった（JS側はselectedクラスの付け替え自体は行っていた）。 */
.choice.mode.selected{ border-color:var(--series-1); background:var(--series-1); color:#fff; }

.barchart .bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.barchart .bar-label{ width:110px; font-size:12px; color:var(--text-secondary); flex-shrink:0; }
.barchart .bar-track{ flex:1; height:16px; background:var(--grid); border-radius:4px; overflow:hidden; }
.barchart .bar-fill{ height:100%; background:var(--series-1); border-radius:4px 0 0 4px; }
.barchart .bar-val{ width:44px; text-align:right; font-size:12px; font-weight:700; }

.divchart{ display:flex; flex-direction:column; }
.div-row{ display:grid; grid-template-columns:118px 1fr 1fr; align-items:center; margin-bottom:10px; }
.div-label{ font-size:12px; color:var(--text-secondary); padding-right:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.div-half{ display:flex; align-items:center; height:16px; }
.div-half.left-half{ justify-content:flex-end; }
.div-half.right-half{ justify-content:flex-start; border-left:1px solid var(--baseline); }
.div-bar{ height:14px; }
.div-bar.left{ background:var(--series-8); border-radius:3px 0 0 3px; }
.div-bar.right{ background:var(--series-1); border-radius:0 3px 3px 0; }
.div-val{ font-size:11px; font-weight:700; color:var(--text-primary); margin:0 6px; white-space:nowrap; }

.legend{ display:flex; gap:16px; font-size:11.5px; color:var(--text-secondary); margin-top:6px; flex-wrap:wrap; }
.sw{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; }
.sw-blue{ background:var(--series-1); }
.sw-red{ background:var(--series-8); }

.checklist{ display:flex; flex-direction:column; gap:8px; }
.checklist .item{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; }
.checklist .box{ width:14px; height:14px; border:1.5px solid var(--baseline); border-radius:4px; margin-top:1px; flex-shrink:0; transition:background .15s ease, border-color .15s ease; }
.checklist .box.done{ background:var(--good); border-color:var(--good); }
/* フェアプレイ確認だけは自己申告なのでクリックで手動チェックできるようにする */
.checklist .item#checkFairplayItem{ cursor:pointer; }

.annot{ background:var(--panel-accent); border-left:3px solid var(--series-1); border-radius:0 6px 6px 0; padding:8px 12px; font-size:12px; color:#26415f; margin:14px 0; }

/* ================= 対戦中画面（ビデオ通話・ほぼ画面いっぱい表示） ================= */
#screen-match.screen.active{ max-width:none; }
.match-stage{
  position:relative; width:100%;
  height:calc(100vh - 96px);
  min-height:360px;
  background:#0b0d10; border-radius:12px; overflow:hidden;
}
.match-overlay-top{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 18px;
  background:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
  color:#fff;
}
.match-info{ display:flex; align-items:center; gap:10px; font-size:13px; flex-wrap:wrap; }
.match-info strong{ font-size:14.5px; }
.match-meta-text{ font-size:12px; color:#c7ccd6; }
.match-timer{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.match-end-btn{ background:var(--series-8); flex-shrink:0; }

.match-main-video{
  position:absolute; inset:0;
}
/* 上のバーは半透明グラデーションで映像の上に重ねるだけなので、映像自体は
   ステージいっぱいに広げる（object-fit:coverで余白なく埋める）。
   rtcSection（#rtcStatus等をまとめる中間の入れ物）にも高さ100%を明示しないと、
   その子の.cam-preview-wrapのheight:100%が正しく解決されないので両方に指定する。 */
.match-main-video #rtcSection{ width:100%; height:100%; }
.match-main-video .cam-preview-wrap{ width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.match-main-video .placeholder-img{ color:#cfd3da; background:#15181d; border-color:#333a44; border-radius:0; font-size:14px; padding:20px; }

/* 自分のワイプ（カメラ1・カメラ2）は右下に横に並べる */
.match-pips-local{ position:absolute; right:22px; bottom:22px; z-index:6; display:flex; gap:10px; align-items:flex-end; }
.match-pips-local .match-pip{ position:relative; right:auto; bottom:auto; }
/* 相手のカメラ2は左上（上のバーの下） */
.match-pip-remote2{ right:auto; bottom:auto; left:22px; top:64px; width:240px; }
.match-pip-remote2.expanded{ width:460px; }
.match-pip{
  position:absolute; right:22px; bottom:22px; z-index:6;
  width:190px; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.9);
  cursor:pointer; transition:width .18s ease;
}
.match-pip.expanded{ width:400px; }
.match-pip-inner{ width:100%; height:100%; }
.match-pip-inner .cam-preview-wrap{ width:100%; height:100%; aspect-ratio:auto; border-radius:0; }

/* 対戦情報バーに出す「先行/後攻」バッジ（部屋主が決めた内容を、それぞれの
   視点で「先行：あなた」「後攻：あなた」と表示する） */
.match-turn-badge{
  background:rgba(255,255,255,.16); color:#fff; font-size:11.5px; font-weight:700;
  padding:3px 10px; border-radius:20px;
}
/* 相手がミュート中であることを対戦情報バーに常時表示するバッジ */
.match-mute-badge{
  background:rgba(227,73,72,.85); color:#fff; font-size:11.5px; font-weight:700;
  padding:3px 10px; border-radius:20px;
}

/* 先行/後攻が決まった瞬間に、両者の画面中央付近にポップアップで出て、
   少し経つと自動的にフェードアウトして消えるお知らせ。 */
.turn-order-announce{
  position:absolute; left:50%; top:22%; z-index:8; transform:translate(-50%,-10px);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.turn-order-announce.show{ opacity:1; transform:translate(-50%,0); }
.turn-order-announce-inner{
  background:rgba(20,22,26,.92); color:#fff; font-size:16px; font-weight:700;
  padding:14px 26px; border-radius:30px; box-shadow:0 8px 26px rgba(0,0,0,.35);
  white-space:nowrap;
}

/* 対戦中のミニメニュー（コイントス・先行/後攻決め・ミュート）。映像の
   邪魔にならないよう、普段は端の小さい丸ボタンだけを出しておき、タップ
   すると3つのボタンが横に開く形にしている。 */
.match-mini-menu-wrap{
  position:absolute; left:18px; bottom:22px; z-index:6;
  display:flex; align-items:center; gap:8px;
}
.mini-menu-toggle{
  width:42px; height:42px; flex-shrink:0; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:#fff; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.mini-menu-toggle:hover{ background:rgba(0,0,0,.72); }
.mini-menu-toggle.open{ background:rgba(255,255,255,.22); }
.match-mini-menu{
  display:none; gap:6px; background:rgba(0,0,0,.55); border-radius:30px; padding:6px;
}
.match-mini-menu-wrap.open .match-mini-menu{ display:flex; }
.mini-menu-btn{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; color:#fff; cursor:pointer;
  padding:8px 12px; border-radius:24px; font-size:10px; font-weight:600;
  transition:background .15s ease;
}
.mini-menu-btn:hover{ background:rgba(255,255,255,.16); }
.mini-menu-btn:disabled{ opacity:.4; cursor:not-allowed; }
.mini-menu-btn:disabled:hover{ background:none; }
.mini-menu-btn.muted{ background:rgba(227,73,72,.88); }
.mini-menu-btn.muted:hover{ background:rgba(227,73,72,.98); }
.mini-menu-ic{ font-size:19px; line-height:1; }
.mini-menu-label{ white-space:nowrap; }

/* コイントスのアニメーション：コインを縦軸（Y軸）にくるくる回転させ、
   最後に「表」か「裏」の面で止まる。3D回転なのでコンテナにperspectiveが必要。 */
.coin-toss-box{ text-align:center; }
.coin-toss-stage{
  display:flex; align-items:center; justify-content:center;
  height:110px; margin:14px 0 8px; perspective:600px;
}
.coin{
  width:88px; height:88px; position:relative; transform-style:preserve-3d;
  transition:transform 1.6s cubic-bezier(.2,.7,.25,1);
}
.coin-face{
  position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; backface-visibility:hidden;
  border:3px solid #c9a227; background:linear-gradient(145deg,#ffe9a8,#e8c25a); color:#6b4e00;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.coin-face-back{ transform:rotateY(180deg); background:linear-gradient(145deg,#dfe6ee,#aeb9c6); border-color:#8f99a6; color:#39424c; }
.coin-toss-result{ font-size:15px; font-weight:700; min-height:22px; }

.bottom-tabs{ display:none; }

/* ================= responsive ================= */
@media (max-width: 880px){
  .topbar{ display:flex; }
  .note-banner{ display:none; }

  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:40;
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:2px 0 18px rgba(0,0,0,.3);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar.collapsed{ width:200px; } /* 折りたたみはデスクトップ幅のみの機能。モバイル幅では常に通常表示 */
  .sidebar-collapse-btn{ display:none; }

  .main{ padding:16px 14px 76px; width:100%; }
  .row{ flex-direction:column; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .main-col{ max-width:none; }

  .match-stage{ height:calc(100vh - 52px - 60px - 32px); min-height:300px; }
  .match-pip{ width:120px; right:12px; bottom:12px; }
  .match-pip.expanded{ width:220px; }
  .match-pips-local{ right:12px; bottom:12px; gap:6px; }
  .match-pip-remote2{ left:10px; top:56px; width:140px; }
  .match-pip-remote2.expanded{ width:240px; }
  .match-mini-menu-wrap{ left:10px; bottom:12px; }

  .bottom-tabs{
    display:flex; position:fixed; bottom:0; left:0; right:0; height:60px; background:#fff;
    border-top:1px solid var(--border); z-index:30;
  }
  .bottom-tabs a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-size:10.5px; color:var(--text-secondary); text-decoration:none;
  }
  .bottom-tabs a .ic{ font-size:17px; }
  .bottom-tabs a.active{ color:var(--series-1); font-weight:700; }

  /* 対戦中は上下のバー（ハンバーガーメニューの帯・下部メニュー）が映像の邪魔に
     なるので両方隠し、その分ステージを広げる（PC幅ではサイドバーは表示したまま）。
     特にスマホを横向きにした時、縦方向の余裕が少ないので効いてくる。 */
  body.match-active .topbar{ display:none; }
  body.match-active .bottom-tabs{ display:none; }
  body.match-active .main{ padding:8px; }
  body.match-active .match-stage{ height:calc(100vh - 16px); }
}

@media (max-width: 480px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .choice-group{ flex-direction:column; }

  /* 幅が狭いスマホでは、ミニメニューはアイコンだけにして場所を取らないようにする */
  .match-mini-menu{ gap:2px; padding:4px; }
  .mini-menu-btn{ padding:9px 10px; }
  .mini-menu-label{ display:none; }
}

/* ---- ログイン・新規登録ポップアップ ----
   未ログインでもホーム画面（募集中のルーム一覧など）は見られるようにして
   あるので、これは常時表示の画面ではなく、他のモーダル（.modal-overlay等）
   と同様に、アプリの上に重ねて出す中央寄せカードのポップアップ。 */
.auth-screen{
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.55); padding:24px;
}
.auth-card{
  position:relative;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.14); padding:30px 26px; width:100%; max-width:360px;
  box-sizing:border-box;
}
.auth-modal-close{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.auth-modal-close:hover{ background:var(--panel-accent); color:var(--text-primary); }
.auth-card h1{ font-size:18px; margin:0 0 4px; }
.auth-card .auth-sub{ font-size:12.5px; color:var(--text-secondary); margin:0 0 18px; }
.auth-tabs{ display:flex; gap:6px; margin-bottom:18px; }
.auth-tabs button{
  flex:1; padding:8px; border-radius:8px; border:1px solid var(--border); background:var(--panel-accent);
  font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer;
}
.auth-tabs button.active{ background:var(--series-1); color:#fff; border-color:var(--series-1); }
.auth-form{ display:none; }
.auth-form.active{ display:block; }
.auth-form .field{ margin-bottom:12px; }
.auth-form .field label{ display:block; font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
.auth-form .field input{
  width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:8px;
  padding:9px 10px; font-size:13.5px;
}
.auth-error{ color:var(--series-8); font-size:12px; margin-top:10px; min-height:14px; }

/* ===== 公開版で追加した部品 ===== */
.brand small{ display:block; font-size:10.5px; font-weight:500; opacity:.7; margin-top:2px; letter-spacing:0; }
.sidebar-links{ display:flex; gap:10px; flex-wrap:wrap; font-size:11px; margin-top:10px; }
.sidebar-links a{ color:#9fb0c3; text-decoration:none; }
.sidebar-links a:hover{ text-decoration:underline; }
.sidebar.collapsed .sidebar-links{ display:none; }

.welcome-card{ background:linear-gradient(135deg,#eef5ff,#fff); border-color:#cfe0f7; }
.welcome-card p{ font-size:13.5px; line-height:1.8; margin:0 0 14px; color:var(--text-secondary); }
.welcome-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.welcome-actions .btn{ text-decoration:none; }

.card-notice{ background:#fff8e6; border:1px solid #f1d38a; color:#7a5200; font-size:13px; border-radius:var(--radius);
  padding:12px 16px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; line-height:1.6; }
.card-notice .btn{ text-decoration:none; }

.list-actions{ display:flex; gap:6px; flex-shrink:0; }
.barchart .bar-sub{ display:block; font-size:10px; font-weight:500; color:var(--muted); }

.form-msg{ font-size:12.5px; margin-top:8px; color:var(--good); min-height:1em; }
.form-msg.error{ color:var(--series-8); }
.account-static{ font-size:14px; font-weight:600; padding:4px 0; }
.card-danger-zone{ border-color:#f3b7b3; }
.btn.danger{ background:var(--series-8); }

/* 使い方・規約などの文章ページ */
.doc{ font-size:13.5px; line-height:1.9; }
.doc h3{ margin:22px 0 8px; font-size:15px; }
.doc h3:first-child{ margin-top:0; }
.doc ol, .doc ul{ padding-left:1.4em; margin:6px 0; }
.doc p{ margin:6px 0; }
.doc-draft{ background:#fff5f5; border:1px dashed #f3b7b3; color:#8a2e28; padding:8px 12px; border-radius:6px; font-size:12.5px; }
.doc-placeholder{ background:#fff2c4; padding:0 4px; border-radius:3px; }
.doc-date{ color:var(--text-secondary); font-size:12.5px; margin-top:18px !important; }

/* 対戦中：相手の接続が切れたときのお知らせ */
.match-disconnect{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:30; padding:16px; }
.match-disconnect-inner{ background:#fff; color:var(--text-primary); border-radius:12px; padding:18px 20px; max-width:380px; display:flex; flex-direction:column; gap:10px; font-size:13px; line-height:1.7; text-align:center; }
.match-disconnect-inner strong{ font-size:15px; }
.result-meta{ font-size:12.5px; color:var(--text-secondary); margin:-6px 0 14px; }

/* 準備中の表示 */
.soon-badge{ display:inline-block; margin-left:6px; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; background:#3a4656; color:#cfd8e3; vertical-align:middle; }
.coming-soon{ text-align:center; padding:36px 24px; }
.coming-soon-icon{ font-size:44px; margin-bottom:6px; }
.coming-soon h3{ font-size:17px; margin-bottom:10px; }
.coming-soon p{ font-size:13.5px; color:var(--text-secondary); line-height:1.8; margin:4px 0; }
.coming-soon .welcome-actions{ margin-top:18px; }

/* ===== 料金プラン・フレンド ===== */
.premium-badge{ display:inline-block; margin-left:6px; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; background:#b8860b; color:#fff; vertical-align:middle; }
.sidebar.collapsed .premium-badge, .sidebar.collapsed .soon-badge{ display:none; }
.plan-chip{ display:inline-block; margin-top:6px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; background:#3a4656; color:#cfd8e3; text-decoration:none; }
.plan-chip.premium{ background:#b8860b; color:#fff; }
.count-badge{ font-size:12px; font-weight:600; color:var(--text-secondary); margin-left:6px; }
.tag.friends{ background:#fff4db; color:#8a5a00; }

.plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width: 720px){ .plan-grid{ grid-template-columns:1fr; } }
.plan-card{ margin-bottom:0; display:flex; flex-direction:column; }
.plan-card.premium{ border-color:#e3c46b; background:linear-gradient(180deg,#fffaf0,#fff); }
.plan-card.current{ box-shadow:0 0 0 2px var(--series-1) inset; }
.plan-card-head{ display:flex; justify-content:space-between; align-items:baseline; }
.plan-price{ font-size:18px; font-weight:800; }
.plan-features{ list-style:none; padding:0; margin:8px 0 16px; font-size:13px; line-height:1.7; flex:1; }
.plan-features li{ padding:5px 0 5px 22px; position:relative; border-bottom:1px dashed var(--border); }
.plan-features li::before{ content:"✓"; position:absolute; left:2px; color:var(--good); font-weight:800; }
.plan-features li.off{ color:var(--muted); }
.plan-features li.off::before{ content:"－"; color:var(--muted); }
.plan-card-foot .btn{ width:100%; }
.plan-current-label{ display:block; text-align:center; font-weight:700; color:var(--series-1); padding:8px 0; }
.plan-current{ font-size:14px; margin-bottom:10px; }
.plan-current span{ font-size:12px; color:var(--text-secondary); margin-left:6px; }
.dev-switch{ border-style:dashed; }
.plan-upsell{ text-align:center; padding:28px 22px; }
.plan-upsell p{ font-size:13px; color:var(--text-secondary); line-height:1.8; }
.plan-upsell .btn{ text-decoration:none; }
.inline-form{ display:flex; gap:8px; }
.inline-form input{ flex:1; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; }