/* ==========================================================================================
   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 确认选择 / 跳过; 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; }

.draft-order { display: flex; flex-direction: column; gap: .1rem; min-height: 0; overflow: hidden; }
.dorder {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .1rem;
  height: .86rem; padding: .06rem .1rem .06rem .08rem; background: rgba(12, 15, 14, .82); border: 1px solid var(--line);
  transition: border-color var(--t-med), background var(--t-med);
}
.dorder .pavatar { --pa: .66rem; }
.dorder__idx { font-size: calc(.22 * var(--t)); color: var(--text-dim); width: .26rem; text-align: center; }
.dorder__text { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.dorder__name { font-size: calc(.18 * var(--t)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .06rem; }
.dorder__ai { font-family: var(--font-num); font-size: calc(.11 * var(--t)); padding: 0 .04rem; background: #a9c3d8; color: #0b1520; }
.dorder__state { font-size: calc(.14 * var(--t)); }
.dorder__state span { display: inline-flex; align-items: center; gap: .04rem; }
.dorder__state .icon { width: .16rem; height: .16rem; }
.dorder__box { position: relative; width: .6rem; height: .6rem; display: grid; place-items: center; }
.dorder__check { position: absolute; right: -.06rem; bottom: -.06rem; width: .22rem; height: .22rem; display: grid; place-items: center; background: var(--mint-500); color: var(--text-on-mint); }
.dorder__check .icon { width: .16rem; height: .16rem; }
.dorder__finger { width: .44rem; height: .44rem; animation: finger 1s ease-in-out infinite; }
@keyframes finger { 50% { transform: translateX(-.06rem); } }
.dorder.is-cur { border-color: var(--gold); background: linear-gradient(90deg, rgba(255, 198, 0, .12), rgba(12, 15, 14, .82)); box-shadow: 0 0 .2rem rgba(255, 198, 0, .15); }
.dorder.is-done { border-color: var(--mint-800); }
.dorder.is-self .dorder__name { color: var(--mint-400); }
.draft-order__tip { margin-top: auto; font-size: calc(.13 * var(--t)); line-height: 1.6; color: var(--text-dim); }

.draft-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(1.36rem, 1fr)); grid-auto-rows: min-content; gap: .12rem;
  min-height: 0; overflow: auto; padding: .04rem .08rem .04rem .04rem; align-content: start;
}
.dband {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .08rem .06rem .1rem;
  background: rgba(12, 15, 14, .82); border: 1px solid var(--line); color: var(--text-md);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.dband:hover { transform: translateY(-.03rem); border-color: var(--line-3); }
.dband .bandicon { --bi: 1.1rem; border: 1px solid var(--line-2); }
.dband__name { font-size: calc(.16 * var(--t)); font-weight: 700; color: var(--text-hi); white-space: nowrap; }
.dband__lp { display: inline-flex; align-items: center; gap: .04rem; font-size: calc(.15 * var(--t)); color: var(--mint-400); }
.dband__lp i { width: .12rem; height: .14rem; background: var(--mint-500); clip-path: polygon(0 0, 30% 0, 30% 20%, 45% 20%, 45% 0, 55% 0, 55% 20%, 70% 20%, 70% 0, 100% 0, 100% 35%, 85% 50%, 85% 80%, 100% 90%, 100% 100%, 0 100%, 0 90%, 15% 80%, 15% 50%, 0 35%); }
.dband__who { position: absolute; right: .04rem; top: .04rem; display: flex; flex-direction: column; gap: .02rem; }
.dband__who .pavatar { --pa: .3rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--mint-400); }
/* 常用策略 (owner 2026-10-29): the official orange corner badge. statistics/strategyBadge is a full-tile overlay whose
   crown sits in its own top-right corner, so the box is the tile's size and shifted out by that corner (the official
   measurements). The pickers' avatar column moves below it so the two never cover each other. */
.dband__badge { position: absolute; top: -10.8%; right: -10.8%; width: 82.35%; height: 84.8%; pointer-events: none; }
.dband__badge-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.dband__medal { position: absolute; right: 20%; top: 20%; width: .36rem; height: .36rem; display: grid; place-items: center; color: #ffb03a;
  background: rgba(70, 36, 4, .7); box-shadow: inset 0 0 0 .03rem #ff9a1f, 0 0 .1rem rgba(255, 150, 30, .4); }
.dband__medal .icon { width: 70%; height: 70%; }
.dband.has-badge .dband__who { top: .34rem; }
.dband.is-sel { border-color: var(--mint-400); background: linear-gradient(180deg, rgba(78, 216, 175, .18), rgba(12, 15, 14, .85)); box-shadow: 0 0 0 1px var(--mint-400), 0 0 .24rem rgba(23, 249, 183, .2); }
.dband.is-mine::after { content: '已选择'; position: absolute; left: 0; top: 0; font-size: calc(.11 * var(--t)); font-weight: 700; padding: 0 .06rem; background: var(--mint-500); color: var(--text-on-mint); }

.draft-detail {
  display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .26rem .26rem .22rem; min-height: 0;
  background: linear-gradient(180deg, rgba(20, 30, 26, .9), rgba(10, 13, 12, .92)); border: 1px solid var(--line-2);
}
.draft-detail__art { position: relative; padding: .06rem; border: 1px solid var(--mint-800); background: radial-gradient(circle, rgba(78, 216, 175, .14), transparent 70%); }
.draft-detail__art .bandicon { --bi: 2rem; }
/* 常用策略: the detail pane's count under the art, the official orange box (已通过模拟 N 次) */
.draft-detail__medal { align-self: center; margin-top: -.04rem; padding: .02rem .14rem; font-size: calc(.16 * var(--t)); font-weight: 700; color: #ffc25c;
  background: rgba(70, 36, 4, .7); box-shadow: inset 0 0 0 .02rem #ff9a1f; }
.draft-detail__hp { display: flex; align-items: center; gap: .12rem; font-size: calc(.16 * var(--t)); color: var(--text-lo); }
.draft-detail__name { font-size: calc(.42 * var(--t)); font-weight: 900; letter-spacing: .1em; }
.draft-detail__eff { align-self: stretch; display: flex; flex-direction: column; gap: .06rem; padding: .12rem .14rem; background: rgba(0, 0, 0, .3); border-left: 3px solid var(--mint-500); flex: 1; min-height: 0; overflow: auto; }
.draft-detail__eff b { font-size: calc(.2 * var(--t)); color: var(--mint-400); }
.draft-detail__desc { font-size: calc(.16 * var(--t)); line-height: 1.7; color: var(--text-md); }
.draft-detail__actions { align-self: stretch; display: flex; flex-direction: column; gap: .1rem; }
.draft-detail__status { display: flex; align-items: center; gap: .06rem; font-size: calc(.15 * var(--t)); color: var(--text-lo); }
.draft-detail__status .icon { width: .18rem; height: .18rem; }
.draft-detail__btns { display: flex; gap: .1rem; }
.draft-detail__btns .btn { flex: 1; }
.dorder__secs { margin-left: .06rem; font-size: calc(.15 * var(--t)); color: var(--gold); }
/* 队友已选 (research 09 §5): a strategy a teammate picked cannot be chosen again */
.dband.is-taken { cursor: not-allowed; border-color: rgba(246, 163, 41, .35); }
.dband.is-taken .bandicon, .dband.is-taken .dband__name, .dband.is-taken .dband__lp { filter: grayscale(.8) brightness(.62); }
.dband.is-taken:hover { transform: none; }
.dband__taken {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); white-space: nowrap; pointer-events: none;
  padding: .02rem .12rem; font-size: calc(.15 * var(--t)); font-weight: 900; letter-spacing: .16em; color: #1d1400; background: var(--amber);
  box-shadow: 0 .03rem .1rem rgba(0, 0, 0, .6);
}
.draft-detail__status--taken { color: var(--amber); }
/* a strategy built around a bond this mode switches off (bandDraft.js BandOffTag / BandOffNote, DESIGN §21.26 — the
   §21.7 本局禁用 look: dim, dashed, the bond struck through): information only, it stays selectable. Px floors keep it
   readable on phones (1rem = 40 px). */
.dband__off { font-size: max(calc(.12 * var(--t)), 8px); line-height: 1.5; padding: 0 .05rem; color: var(--text-dim); border: 1px dashed rgba(255, 255, 255, .28); white-space: nowrap; }
.draft-detail__off { align-self: stretch; display: flex; align-items: flex-start; gap: .06rem; margin: 0; padding: .06rem .1rem;
  font-size: max(calc(.14 * var(--t)), 9px); line-height: 1.5; color: var(--text-lo); background: rgba(255, 255, 255, .03); border-left: 2px solid rgba(255, 255, 255, .28); }
.draft-detail__off .icon { width: max(.16rem, 10px); height: max(.16rem, 10px); flex: none; margin-top: .02rem; }
.draft-detail__offname { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(255, 84, 84, .6); }

/* ---- 本局信息 (GitHub issue #8 item 1, DESIGN §21.28): the entry under the order list and the read-only dialog -------
   The dialog shows the briefing's own enemy, bond and banned-operator blocks (css/screens/briefing.css, #484)
   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(calc(.18 * var(--t)), 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(17rem, 900px), 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__content { flex: none; min-width: 0; }
.minfo-dlg__content.has-enemies { display: grid; grid-template-columns: minmax(0, 6.2rem) minmax(0, 1fr); gap: max(.2rem, 10px); }
.minfo-dlg__enemies, .minfo-dlg__bonds { display: flex; flex-direction: column; gap: max(.16rem, 6px); min-width: 0; }
.minfo-dlg__enemies > *, .minfo-dlg__bonds > * { flex-shrink: 0; }
.minfo-dlg .brief-boss { grid-template-columns: max(1.4rem, 70px) minmax(0, 1fr); gap: max(.16rem, 8px); padding: max(.22rem, 12px) max(.24rem, 12px); }
.minfo-dlg .brief-boss > .micro { font-size: max(.11rem, 9px); }
.minfo-dlg .brief-boss__art { width: max(1.4rem, 70px); height: max(1.4rem, 70px); }
.minfo-dlg .brief-boss__text { padding-top: max(.2rem, 12px); overflow-wrap: anywhere; }
.minfo-dlg .brief-boss__name { font-size: max(calc(.34 * var(--t)), 16px); }
.minfo-dlg .brief-boss__when { font-size: max(calc(.15 * var(--t)), 10px); }
.minfo-dlg .brief-boss__abil { font-size: max(calc(.14 * var(--t)), 10px); padding-left: max(.18rem, 12px); }
.minfo-dlg .brief-stage { flex-wrap: wrap; padding: max(.12rem, 6px) max(.18rem, 8px); }
.minfo-dlg .brief-stage__pool { font-size: max(calc(.14 * var(--t)), 10px); }
.minfo-dlg .brief-stage__name { font-size: max(calc(.19 * var(--t)), 12px); }
.minfo-dlg .brief-faction { gap: max(.14rem, 6px); padding: max(.12rem, 6px) max(.16rem, 8px); }
.minfo-dlg .brief-faction__icon { width: max(.72rem, 32px); height: max(.72rem, 32px); }
.minfo-dlg .brief-faction__text { min-width: 0; overflow-wrap: anywhere; }
.minfo-dlg .brief-faction__text b { font-size: max(calc(.2 * var(--t)), 12px); }
.minfo-dlg .brief-faction__text span { font-size: max(calc(.15 * var(--t)), 10px); }
.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 .brief-banned__diy { font-size: max(.14rem, 12px); }
.minfo-dlg .t-dim { font-size: max(.16rem, 10px); }
@media (max-width: 1000px) {
  .modal__box.minfo-dlg { width: min(max(12rem, 600px), calc(100vw - .6rem - var(--sa-l, 0px) - var(--sa-r, 0px))); }
  .minfo-dlg__content.has-enemies { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================================
   Pro additions to the official draft screen (fork, 2026-10-19)
   - 联机#03 预选盟约: the second block button under 本局信息 and each order row's planned bond
   - 工程#01 expanded rooms: the concurrent draft's queue strip
   ========================================================================================== */
.draft-order__plan {
  margin-top: .06rem; justify-content: flex-start; padding: 0 .16rem;
  height: max(.5rem, 28px); font-size: max(calc(.18 * var(--t)), 10px);
  --btn-bd: var(--mint-800); --btn-bg: rgba(78, 216, 175, .06); --btn-bg-hover: rgba(78, 216, 175, .14);
}
.draft-order__plan .btn__icon { color: var(--mint-400); }
.dorder__plan { margin-top: .02rem; }
.draft-queue {
  display: flex; align-items: center; justify-content: space-between; gap: .1rem; margin-top: .08rem;
  padding: .1rem .12rem; border: 1px solid rgba(255, 198, 0, .45); background: rgba(255, 198, 0, .08);
}
.draft-queue__txt { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.draft-queue__txt b { font-size: max(calc(.16 * var(--t)), 11px); color: var(--gold, #ffc600); }
.draft-queue__txt span { font-size: max(calc(.13 * var(--t)), 10px); color: var(--text-lo); }
.draft-queue .icon { width: .2rem; height: .2rem; flex: none; color: var(--gold, #ffc600); }
/* 扩容房（20 人）决策顺序会排到按钮下面：只让列表滚动，两个按钮与提示常驻 */
.draft-order__rows {
  display: flex; flex-direction: column; gap: .1rem;
  flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: .04rem; scrollbar-width: thin;
}

/* ==========================================================================================
   决策顺序行：把博士的名片铺在官方骨架后面（fork，2026-10-19）
   - .dorder__nc：名片底图（room.state seats[].card.bg，NameCardLayer）
   - .dorder__art：没设底图时用名片干员半身像，右侧渐隐
   两者都是绝对定位的背景层，格子与文字列不动 —— 名字不会因为插图被挤掉
   ========================================================================================== */
.dorder { overflow: hidden; }
.draft-order__rows > .dorder { flex: none; } /* rows keep their height; the strip scrolls instead of squashing them */
.dorder__nc, .dorder__art { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* 名片按画幅 (维护者 2026-10-27): 和其它名片底板同一个 4:1，只由行高推宽度、贴在行右边，左边渐隐接到文字下 ——
   行高不变，所以有没有名片、显示不显示编号，行的大小都一样。 */
.dorder__nc { left: auto; right: 0; width: auto; aspect-ratio: var(--nc-ar, 4 / 1); opacity: .5;
  -webkit-mask: linear-gradient(90deg, transparent, #000 26%); mask: linear-gradient(90deg, transparent, #000 26%); }
.dorder__art { width: 1.8rem; max-width: 58%; left: auto; background-size: cover; background-position: 50% 12%; opacity: .42;
  -webkit-mask: linear-gradient(90deg, transparent, #000 45%); mask: linear-gradient(90deg, transparent, #000 45%); }
.dorder.has-nc { border-color: rgba(255, 255, 255, .2); }
.dorder > *:not(.dorder__nc):not(.dorder__art) { position: relative; z-index: 1; }
.dorder__face { position: relative; display: flex; width: .66rem; height: .66rem; flex: none; overflow: hidden;
  background: #1d2423; border: 1px solid rgba(244, 247, 246, .5); }
.dorder__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.dorder__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: calc(.28 * var(--t)); font-weight: 900; color: var(--mint-400); }
.dorder__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.dorder .dorder__face .pavatar { box-shadow: 0 0 0 .02rem rgba(230, 233, 233, .85); border: 0; }
/* the 我 corner badge is gone (owner 2026-10-24): the same face now comes from PlayerAvatar and needs no mark */
.dorder__text { text-shadow: 0 1px 3px #000, 0 0 .12rem #000; }
.dorder__name { align-items: center; }
.dorder__name > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dorder__name .tbadge--inline { flex: none; }
/* 选中：格子上闪一下，卡片里透出薄荷色，不改变任何尺寸 */
.dorder.is-flash { animation: dorder-flash 900ms ease-out; }
@keyframes dorder-flash {
  0% { box-shadow: inset 0 0 0 1px var(--mint-400), 0 0 .18rem rgba(89, 244, 202, .35); }
  100% { box-shadow: none; }
}
.dorder.is-flash .dorder__check { animation: dorder-pop 320ms var(--ease-out) 120ms backwards; }
@keyframes dorder-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* the draft over (screens/game.js DRAFT_HOLD_MS = 700, inside the official 3 s BATTLE_CHECK with 协议启动！'s
   BOOT_MIN_MS): 已选定策略 / 策略选择完成 stays, then the screen goes to black for 协议启动！ (video 7:43.3–7:43.5) —
   the fade ends with the hold (480 ms + 220 ms = DRAFT_HOLD_MS). Only to look at: the screen is inert (bandDraft.js). */
.draft.is-held { pointer-events: none; animation: pg-out 220ms ease-in 480ms forwards; }
@keyframes pg-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .draft.is-held { animation: none; } }