/* 게임방 선수 연결 상태와 채팅 탭: 보드 크기·위치는 바꾸지 않는다. */
.obb {
  --ob-disconnect-bg:#fef2f2;
  --ob-disconnect-border:#fca5a5;
  --ob-disconnect-text:#b91c1c;
}
html.fs-app-theme-dark .obb,
body.fs-app-theme-dark .obb {
  --ob-disconnect-bg:#450a0a;
  --ob-disconnect-border:#b91c1c;
  --ob-disconnect-text:#fecaca;
}
:where(.obb) .ob-seat-disconnect-countdown {
  display:none;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  transform:translateY(calc((var(--ocv-u, 1px) * 11 - var(--ocv-tu, 1px) * 14) / 2));
  gap:calc(var(--ocv-tu, 1px) * 3);
  height:calc(var(--ocv-tu, 1px) * 14);
  box-sizing:border-box;
  margin-left:calc(var(--ocv-u, 1px) * 4);
  padding:0 calc(var(--ocv-tu, 1px) * 5);
  border:1px solid var(--ob-disconnect-border);
  border-radius:999px;
  background:var(--ob-disconnect-bg);
  color:var(--ob-disconnect-text);
  font-size:calc(var(--ocv-tu, 1px) * 11);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
  white-space:nowrap;
  cursor:help;
}
:where(.obb) .ob-seat-disconnect-countdown.show { display:inline-flex; }
:where(.obb) .ob-seat-disconnect-countdown svg { display:block; flex:none; width:calc(var(--ocv-tu, 1px) * 11); height:calc(var(--ocv-tu, 1px) * 11); transform:translateY(calc(var(--ocv-tu, 1px) * -0.5)); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:where(.obb) .ob-seat-disconnect-countdown svg circle { fill:currentColor; stroke:none; }
:where(.obb) .ob-seat-disconnect-countdown span { display:block; line-height:1; transform:translateY(calc(var(--ocv-tu, 1px) * 1)); }
:where(.obb) .ob-seat-disconnect-countdown:focus-visible { outline:2px solid currentColor; outline-offset:1px; }

/* 긴 번역과 방 인원 수가 있어도 탭·초대 버튼이 서로 덮이지 않게 한다. */
#obRoomChat .ob-chat-head { flex-wrap:wrap; column-gap:6px; row-gap:6px; }
#obRoomChat .ob-chat-head > .ob-room-tabs {
  display:flex;
  flex:1 1 180px;
  flex-wrap:wrap;
  min-width:min(100%, 180px);
  gap:4px;
}
#obRoomChat .ob-room-tabs > .ob-room-tab { flex:0 0 auto; white-space:nowrap; }
#obRoomChat .ob-room-users-tab {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:46px;
  padding:0 7px;
  font-variant-numeric:tabular-nums;
}
#obRoomChat .ob-room-users-tab .ob-watchers-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 auto; }
#obRoomChat .ob-room-users-tab .ob-watchers-icon svg { display:block; width:18px; height:18px; }
#obRoomChat .ob-room-settings-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  min-width:28px;
  padding:0;
}
#obRoomChat .ob-room-settings-icon svg { display:block; width:18px; height:18px; }
#obRoomChat #obInviteBtn,
#obRoomChat #obRoomChatMinBtn { flex:0 0 auto; }
#obRoomChat #obInviteBtn { margin-left:auto; }