/* Cards follow the tournament page. Boards and records use their shared styles. */
body.bm-standalone {
  margin: 0;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background: var(--fs-app-bg, #f8fafc);
}
/* 앱 셸이 iframe의 안전영역을 맡으므로 페이지에서 중복 적용하지 않는다. */
html.fs-embed body.bm-standalone { padding-top: 0; padding-bottom: 0; }
.bm-page, .bm-modal {
  --bm-bg: var(--fs-app-surface, #fff);
  --bm-soft: var(--fs-app-surface-2, #f8fafc);
  --bm-text: var(--fs-app-text, #111827);
  --bm-muted: var(--fs-app-muted, #64748b);
  --bm-border: var(--fs-app-border, #dbe3ef);
  --bm-link: var(--fs-app-link, #2563eb);
  color: var(--bm-text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.bm-page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 40px;
}
:is(.bm-page,.bm-modal) * { box-sizing: border-box; }
.bm-titlebar {
  display: flex;
  align-items: center;
  min-height: 25px;
  margin: 0 -16px 14px;
  padding: 0 8px;
  background: #000;
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
}
html.fs-embed .bm-titlebar { min-height: 33px; }
main:is(.bm-page,.bm-modal) h2 { display:block; float:none; width:auto; height:auto; margin:0 0 12px; padding:0; border:0; background:none; color:inherit; text-align:left; font-size:16px; font-weight:700; line-height:1.4; }
:is(.bm-page,.bm-modal) h3 { font-size: 16px; }
:is(.bm-page,.bm-modal) p { margin: 10px 0; }
.bm-muted, :is(.bm-page,.bm-modal) details { color: var(--bm-muted); font-size: 13px; }
.bm-rules { line-height: 1.6; }
.bm-intro { color: var(--bm-muted); }
.bm-intro .bm-intro-notice { margin-left: 6px; white-space: nowrap; color: var(--fs-app-link, #2563eb); }
.bm-card { margin: 16px 0; padding: 16px; border: 1px solid var(--bm-border); border-radius: 12px; background: var(--bm-bg); }
.bm-register-guide { margin-bottom: 20px; }
.bm-register-guide p { margin: 0 0 8px; }
.bm-register-guide .bm-muted { font-size: 14px; }
.bm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bm-section-head h2 { margin: 0; }
.bm-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
:is(.bm-page,.bm-modal) input, :is(.bm-page,.bm-modal) select, :is(.bm-page,.bm-modal) textarea {
  max-width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--bm-border);
  border-radius: 8px;
  background: var(--bm-soft);
  color: var(--bm-text);
  font: inherit;
  font-size: 16px;
}
:is(.bm-page,.bm-modal) input { flex: 1; min-width: 0; }
:is(.bm-page,.bm-modal) button, .bm-action-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--bm-border);
  border-radius: 8px;
  background: var(--bm-soft);
  color: var(--bm-text);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
:is(.bm-page,.bm-modal) button.bm-primary, #bmRegister button { border-color: #2563eb; background: #2563eb; color: #fff; }
:is(.bm-page,.bm-modal) button:disabled { opacity: .45; cursor: default; }
:is(.bm-page,.bm-modal) :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--bm-link); outline-offset: 2px; }
:is(.bm-page,.bm-modal) textarea { width: 100%; min-height: 90px; overflow-wrap: anywhere; }
:is(.bm-page,.bm-modal) summary { padding: 8px 0; cursor: pointer; }
:is(.bm-page,.bm-modal) a { color: var(--bm-link); }
:is(.bm-page,.bm-modal) [hidden] { display: none !important; }
:is(.bm-page,.bm-modal) #bmNotice:empty { display: none; }
#bmNotice { color: var(--bm-muted); overflow-wrap: anywhere; }
#bmTokenBox { margin-top: 12px; padding: 12px; border: 1px solid var(--bm-border); border-radius: 8px; }
#bmOwn { margin: 6px 0 12px; width: 100%; }
#bmRegister { display: flex; flex-direction: column; gap: 6px; }
#bmRegister input { flex: none; width: 100%; }
.bm-form-actions { display: flex; justify-content: flex-end; }
.bm-api-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.bm-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-top: 1px solid var(--bm-border); }
.bm-bot-category { margin: 14px -12px 0; padding: 7px 12px; border-block: 1px solid var(--bm-border); background: var(--bm-soft); font-size: 13px !important; font-weight: 700; }
.bm-item:first-child { border-top: 0; }
.bm-bot-category + .bm-item { border-top: 0; }
.bm-item-identity { display: flex; gap: 10px; align-items: center; min-width: 0; }
.bm-bot-photo { width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover; border-radius: 6px; background: var(--bm-soft); }
.bm-item-name { min-width: 0; overflow-wrap: anywhere; }
:is(.bm-page,.bm-modal) button.bm-name, :is(.bm-page,.bm-modal) a.bm-owner { display: inline; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--bm-link); text-align: left; font-size: inherit; font-weight: 600; }
.bm-item-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.bm-item-owner { margin-top: 4px; color: var(--bm-muted); }
.bm-item-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bm-item-head .bm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-item-head .bm-rating { flex: 0 0 auto; }
.bm-status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #9ca3af; }
.bm-status-dot.is-online { background: #22c55e; }
.bm-status-dot.is-playing { background: #f97316; }
.ob-bot-group-toggle { appearance: none; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bm-bio-editor { display: flex; flex: 1 1 100%; flex-direction: column; gap: 6px; }
.bm-bio-editor textarea { min-height: 64px; }
.bm-environment { margin: 6px 0; color: var(--fs-app-muted, #64748b); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.bm-environment dt { font-weight: 600; }
.bm-environment dd { margin: 0 0 3px; }
.bm-owner-line, .bm-item-owner { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 16px; }
.bm-owner-line [data-battle-user], .bm-item-owner [data-battle-user] { color: var(--fs-app-link, #254ead); cursor: pointer; }
.bm-item-actions { display: flex; align-items: center; gap: 8px; }
.bm-manage { grid-column: 1 / -1; padding-left: 50px; }
.bm-manage summary { width: max-content; padding: 0; font-size: 13px; color: var(--bm-muted); }
.bm-manage-body { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.bm-upload { display: flex; flex: 1 1 210px; flex-direction: column; min-width: 0; gap: 4px; font-size: 13px; }
.bm-upload input { width: 100%; padding: 6px; font-size: 13px; }
.bm-room-view { max-width: 1160px; }
.bm-room-view > .bm-card:not(#bmRoom), .bm-room-view > .bm-intro, .bm-room-view > .bm-rules { display: none; }
.bm-room-view #bmRoom { padding: 0; border: 0; background: transparent; }
#bmRoomTitle { margin-bottom: 6px; text-align: center; overflow-wrap: anywhere; }
#bmRoomActions { justify-content: center; margin: 12px 0; }
#bmRoomActions:empty { display: none; }
.bm-room-view #bmRoom { margin-top: 0; }
.bm-board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.bm-boards .bm-board-head h3 { margin: 0; }
.bm-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
.bm-boards article { min-width: 0; }
.bm-boards h3 { margin: 6px 0 10px; color: var(--bm-muted); font-size: 13px; text-align: center; }
.bm-board-frame { display: block; width: 100%; height: 560px; border: 0; background: transparent; }
@media (max-width: 600px) {
  :is(.bm-page,.bm-modal) { padding-right: 8px; padding-left: 8px; }
  .bm-titlebar { margin-right: -8px; margin-left: -8px; }
  .bm-card { padding: 12px; }
  .bm-boards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bm-item { gap: 10px; }
  .bm-manage { padding-left: 0; }
}
/* Paired room uses the existing room chrome; only the board count changes. */
body.bm-paired-room { background:var(--fs-app-bg,#fff); padding-top:0; }
.bm-paired-room .bm-room-view { padding-bottom:12px; }
/* 실제 방 페이지는 본문 전체 폭을 사용한다. 종료 기록 iframe의 폭 맞춤은 그대로 둔다. */
html:not(.fs-embed) body.bm-paired-room .bm-room-view { max-width:none; }
.bm-paired-room #bmRoomTitle { display:none; }
.bm-paired-room #bmRoom { background:transparent; }
.bm-paired-room .bm-titlebar { margin-bottom:5px; min-height:25px; width:auto; }
.bm-paired-room .bm-room-controls { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:6px; margin:0 0 8px; }
/* The single-board mobile 100vw/negative-margin rule must not move paired-room exit buttons outside the toolbar. */
.bm-paired-room .bm-room-controls #obBoardActions { display:flex; width:auto!important; max-width:100%!important; margin:0!important; padding:0; flex:0 1 auto; }
.bm-paired-room .bm-room-controls #obActionsRight { display:inline-flex; flex-wrap:nowrap; min-width:0; margin:0; }
.bm-paired-room .bm-room-controls #obActionsRight .pz-btn { flex:0 1 auto; min-width:0; padding-inline:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bm-paired-room .bm-room-controls #obRoomChat { margin-left:0; }
.bm-paired-room .bm-room-tools#obRoomChat { position:relative; width:auto; min-width:0; min-height:0; height:auto; flex:0 0 auto; margin:0; border:0; background:transparent; overflow:visible; }
/* 일반 채팅창의 다크 모드 외곽/자르기는 버튼 묶음에 적용하지 않는다. 아래 팝업은 자체 표면을 유지한다. */
html.fs-app-theme-dark .bm-paired-room #obRoomChat.bm-room-tools { overflow:visible; border:0!important; background:transparent!important; }
html.fs-app-theme-dark .bm-paired-room #obRoomChat.bm-room-tools :is(.ob-chat-head,.ob-room-tabs) { background:transparent!important; }
.bm-paired-room #obRoomChat.bm-room-tools .ob-chat-head { flex-wrap:nowrap; }
.bm-paired-room #obRoomChat.bm-room-tools .ob-chat-head > .ob-room-tabs { flex:0 0 auto; min-width:0; flex-wrap:nowrap; }
@media (max-width:575.98px) {
  /* The single-board room makes chat full width on phones. Paired rooms use its two icon buttons in the same control row. */
  body.bm-paired-room:not(.ob-room-chat-floating):not(.ob-chat-expand) #obBoardView #obRoomChat { width:auto; max-width:none; margin:0; }
}
.bm-paired-room #obRoomChat.bm-room-tools .ob-chat-head { border:0; padding:0; }
.bm-paired-room .bm-room-tools #obRoomUsers,
.bm-paired-room .bm-room-tools #obRoomSettings { position:absolute; top:calc(100% + 6px); right:0; z-index:10; width:max-content; min-width:220px; max-width:calc(100vw - 32px); margin:0; padding:12px; border:1px solid var(--bm-border); border-radius:10px; background:var(--bm-bg); color:var(--bm-text); box-shadow:0 6px 20px #0002; }
.bm-paired-room .bm-room-tools #obRoomUsers { font-size:16px; }
/* 보드 폭(2026-11-12): 오버레이 안에서는 bot-matches.js 가 두 판이 세로를 채우는 폭(--bm-col-w)을 정한다(기존 게임 오버레이처럼
   세로 100%, 여유가 있으면 가로를 넓힘). 값이 없을 때(첫 배치·오버레이 밖)는 예전 식 그대로. */
.bm-paired-room .bm-boards { justify-content:center; grid-template-columns:repeat(2,minmax(0,calc((100vh - 160px) * .8))); }
.bm-paired-room:not(.bm-room-stacked) .bm-boards { grid-template-columns:repeat(2,var(--bm-col-w,minmax(0,calc((100vh - 160px) * .8)))); }
.bm-paired-room .bm-room-view { max-width:none; }
.bm-paired-room .bm-board-head { margin-bottom:4px; }
.bm-paired-room .bm-board-head h3 { flex:0 0 auto; text-align:left; }
/* 판별 결과(2026-11-12): "대국 1" 오른쪽에 트로피와 이긴 쪽, 점수. 좁으면 이름만 줄임표로 줄여 한 줄을 지킨다.
   색은 앱 변수(--bm-text·--bm-muted)라 다크 모드도 따른다. */
.bm-leg-result { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; color:var(--bm-muted); font-size:13px; line-height:1.3; }
.bm-leg-result:empty { display:none; }
.bm-leg-win { flex:0 0 auto; line-height:1; }
.bm-leg-name { min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--bm-text); font-weight:600; }
.bm-leg-score { flex:0 0 auto; color:var(--bm-text); font-weight:600; font-variant-numeric:tabular-nums; }
.bm-paired-room.bm-room-stacked .bm-boards { grid-template-columns:minmax(0,1fr); gap:18px; }

/* Completed pairs keep the rules button, parent overlay title and each board's replay controls. */
.bm-paired-room.bm-replay-overlay.bm-room-finished .bm-room-controls > :not(.bm-rules-info),
body.bm-paired-room.bm-replay-overlay.bm-room-finished #pzTitleBar { display:none!important; }

:is(.bm-page,.bm-modal) button.bm-danger { color: #dc2626; }
html.fs-app-theme-dark :is(.bm-page,.bm-modal) button.bm-danger { color: #f87171; }

.bm-name-editor { flex:1 1 100%; min-width:0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 12px; }
.bm-name-editor label { grid-column: 1 / -1; }

.bm-lobby-frame { display:block; width:100%; height:calc(100vh - 30px); border:0; background:var(--bm-bg); }
body.bm-paired-room > #pzTitleBar { width:100%; margin:0 0 5px; text-align:left; }
.bm-paired-room #obTitleBadges { justify-content:flex-start; padding-left:8px; }
/* 규칙 안내는 버튼행 왼쪽, 나머지 대국방 버튼은 오른쪽에 둔다. 제목 배지는 긴 언어에서도 한 줄을 유지한다. */
.bm-paired-room #obTitleBadges { flex:0 1 auto; max-width:100%; }
.bm-paired-room #obGameTypeBadge { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-room-controls .bm-rules-info { flex:0 0 auto; width:34px; min-width:34px; margin-right:auto; padding:0; }
.bm-room-controls .bm-rules-info svg { display:block; width:18px; height:18px; }
.bm-rules-panel p { line-height:1.55; }
.bm-paired-room .bm-room-view:has(> .bm-lobby-frame:not(.pz-hide)) { max-width:none; padding:0; }

.bm-games{border:0;padding:0;margin:10px 0;min-width:0;display:flex;flex-wrap:wrap;gap:10px 16px}
:is(.bm-page,.bm-modal) .bm-games legend{position:static;float:none;width:100%;height:auto;margin:0 0 8px;padding:0;font:inherit;font-weight:600;line-height:inherit;text-indent:0;overflow:visible;color:inherit}
.bm-games label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
:is(.bm-page,.bm-modal) .bm-games input[type=checkbox]{width:18px!important;min-height:18px;height:18px;flex:0 0 18px;margin:0;padding:0}
.bm-games-editor{margin-bottom:12px}
/* 자동 매칭 켜기/끄기(2026-11-13): 지원 게임과 같은 칸 모양, 한 줄 설명은 보조 글자(긴 언어는 줄바꿈) */
.bm-auto-editor{flex:1 1 100%;margin-bottom:12px}
.bm-auto-editor .bm-games{margin:0 0 4px}
.bm-auto-help{margin:0;overflow-wrap:anywhere}
.bm-auto-editor>label{display:block;margin:0 0 4px}
.bm-auto-editor>select{min-width:72px;margin:0 0 4px}
.bm-modal{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:16px;background:rgba(15,23,42,.55)}
.bm-modal-panel{width:100%;max-width:480px;max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--bm-border);border-radius:14px;background:var(--bm-bg);color:var(--bm-text);box-shadow:0 12px 40px #0003}
.bm-modal-panel select{display:block;width:100%;margin-top:8px}
.bm-game-value{margin:8px 0 0;padding:12px 14px;border:1px solid var(--bm-border);border-radius:10px;background:var(--bm-soft);color:var(--bm-text)}
.bm-modal-panel h2:focus{outline:none}
.bm-modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}

/* 결과 카드도 일반 게임방과 같은 마크업/스타일. 진행 방은 종료해도 방 도구를 유지한다. */
body.bm-paired-room #pzResult[data-online-result]{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:21000;max-width:calc(100vw - 32px)}

.bm-name-editor .bm-form-error { grid-column:1 / -1; margin:0; color:#dc2626; font-size:13px; overflow-wrap:anywhere; }
html.fs-app-theme-dark .bm-name-editor .bm-form-error { color:#f87171; }
/* FlipSight 기본 봇 신청 안내: 기존 게임 상태의 주황색, 일반 글자 두께. */
:is(.bm-page,.bm-modal) .bm-builtin-warn { color: #f97316; font-weight: 400; }
html.fs-app-theme-dark :is(.bm-page,.bm-modal) .bm-builtin-warn { color: #fb923c; }
/* 상대 봇 카드는 봇 도장 대국 창의 선택 카드(.oc-dojo-selected-bot, ocviewer.review-coach.css)를 그대로 쓴다 */
.bm-modal-panel .oc-dojo-selected-bot { margin: 4px 0 12px; }
/* 비회원 등록 시도 안내(2026-11-13): 대국방 .ob-toast(online.page.css)와 같은 값. 봇 목록 화면은 그 CSS 를 싣지 않아 여기에 둔다. */
.bm-toast { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) translateY(12px); background:rgba(17,24,39,.94); color:#fff; padding:11px 18px; border-radius:10px; font-size:14px; font-weight:600; z-index:99999; opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; max-width:90vw; text-align:center; white-space:pre-line; box-shadow:0 6px 24px rgba(0,0,0,.25); }
.bm-toast.show { opacity:1; transform:translate(-50%,-50%) translateY(0); }