feedback1 draft-info: the strategy draft shows the briefing's disabled bonds and banned operators again (GitHub issue #8 item 1)

One component, public/js/ui/matchInfo.js: matchInfoModel (the drawn set D and
the mode's inactive bonds via disabledBondSets, the briefing's bond order,
banned operators by tier, bannedPerBond) and the briefing's bond rows, legend
and banned-operator grid. The briefing renders it; the band draft opens it
read-only in a dialog (查看禁用盟约与干员 under the order list; 关闭, a tap
outside or Esc close it; its footer repeats the turn and the countdown; a turn
change closes it, the end of the draft unmounts it); the in-game 本局信息 tab
reads the same model, so its banned operators are listed by tier too. In the
dialog every size has a px floor, so phones keep readable text and a
scrollable body.

Tests: test/ui/match-info.test.js; opt-in test/ui/match-info.e2e.test.js
(SP_E2E=1: solo 标准 on desktop, co-op 绝境 with a desktop and a phone).

public/css/screens/draft.css

@@ -1,6 +1,7 @@
 /* ==========================================================================================
    screens/draft.css — BAND_DRAFT strategy pick (js/screens/bandDraft.js). Research 06 §4.2:
-   draft order on the left, portrait grid, detail pane with 初始生命值 and 确认选择 / 跳过.
+   draft order on the left, portrait grid, detail pane with 初始生命值 and 确认选择 / 跳过; the 本局信息 entry under
+   the order list and its dialog (js/ui/matchInfo.js MatchInfoDialog, GitHub issue #8 item 1).
    ========================================================================================== */
 
 .draft__main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 3.9rem 1fr 5rem; gap: .3rem; padding: .3rem .42rem .36rem; }
@@ -75,3 +76,50 @@
   box-shadow: 0 .03rem .1rem rgba(0, 0, 0, .6);
 }
 .draft-detail__status--taken { color: var(--amber); }
+
+/* ---- 本局信息 (GitHub issue #8 item 1): the entry under the order list and the read-only dialog ----------------------
+   The dialog shows the briefing's own blocks (.brief-bonds / .brief-legend / .brief-banned, css/screens/briefing.css)
+   at the briefing's size on desktop; every size is max(design rem, px floor), so on a phone (1rem = 40 px) the text
+   stays at ≥ 9–15 px and the dialog's body scrolls inside the screen (756×366, 844×390) while the header and the
+   footer (the turn's countdown, 关闭) stay in view. */
+.draft-order__info {
+  margin-top: .04rem; justify-content: flex-start; padding: 0 .16rem;
+  height: max(.5rem, 28px); font-size: max(.18rem, 10px);
+  --btn-bd: var(--mint-800); --btn-bg: rgba(78, 216, 175, .06); --btn-bg-hover: rgba(78, 216, 175, .14);
+}
+.draft-order__info .btn__icon { color: var(--mint-400); }
+.modal__box.minfo-dlg {
+  width: min(max(12rem, 600px), calc(100vw - .6rem - var(--sa-l, 0px) - var(--sa-r, 0px)));
+  max-height: calc(100vh - .6rem);
+  max-height: calc(100svh - .6rem);
+}
+.minfo-dlg .modal__head { padding: .16rem .3rem .02rem; }
+.minfo-dlg .modal__head .micro { font-size: max(.11rem, 8px); }
+.minfo-dlg .modal__title { font-size: max(.26rem, 15px); }
+.minfo-dlg .modal__body { display: flex; flex-direction: column; gap: max(.16rem, 6px); padding: .1rem .3rem .2rem; }
+.minfo-dlg .modal__actions { align-items: center; padding: .12rem .3rem; }
+.minfo-dlg .modal__actions .btn { height: max(.5rem, 30px); font-size: max(.18rem, 12px); }
+.minfo-dlg__status { margin-right: auto; min-width: 0; }
+.minfo-dlg__turn { display: inline-flex; align-items: center; gap: .06rem; font-size: max(.17rem, 11px); font-weight: 700; color: var(--gold); white-space: nowrap; }
+.minfo-dlg__turn .icon { width: max(.18rem, 12px); height: max(.18rem, 12px); }
+.minfo-dlg__turn b { margin-left: .04rem; font-size: max(.22rem, 14px); }
+.minfo-dlg__turn.is-warn { color: var(--orange-hi); }
+.minfo-dlg__turn.is-mint { color: var(--mint-400); }
+.minfo-dlg__turn.is-dim { color: var(--text-lo); }
+.minfo-dlg .brief-bonds, .minfo-dlg .brief-banned { padding: max(.16rem, 6px) max(.2rem, 8px) max(.2rem, 8px); }
+.minfo-dlg .brief-h { font-size: max(.21rem, 12px); margin-bottom: max(.12rem, 5px); }
+.minfo-dlg .brief-h::before { width: max(.06rem, 3px); height: max(.2rem, 11px); }
+.minfo-dlg .brief-bonds__row { gap: max(.16rem, 6px) max(.1rem, 4px); }
+.minfo-dlg .brief-bond { width: max(1rem, 50px); }
+.minfo-dlg .brief-bond .bond { --disc: max(.66rem, 32px); }
+.minfo-dlg .brief-bond .bond__name { font-size: max(.16rem, 10px); }
+.minfo-dlg .brief-bond__ban { font-size: max(.12rem, 9px); padding: 0 max(.05rem, 2px); }
+.minfo-dlg .brief-bond__ban .icon { width: max(.12rem, 9px); height: max(.12rem, 9px); }
+.minfo-dlg .brief-legend { margin-top: 0; font-size: max(.14rem, 10px); }
+.minfo-dlg .brief-legend__off { width: max(.16rem, 9px); height: max(.16rem, 9px); }
+.minfo-dlg .brief-legend__ban { width: max(.2rem, 12px); height: max(.18rem, 11px); }
+.minfo-dlg .brief-legend__ban .icon { width: max(.12rem, 8px); height: max(.12rem, 8px); }
+.minfo-dlg .brief-banned__n { font-size: max(.22rem, 13px); }
+.minfo-dlg .brief-banned__grid { grid-template-columns: repeat(auto-fill, minmax(max(.6rem, 34px), 1fr)); gap: max(.08rem, 3px); }
+.minfo-dlg .brief-banned__grid .uthumb { --ut: max(.6rem, 34px); }
+.minfo-dlg .t-dim { font-size: max(.16rem, 10px); }