/* ==========================================================================================
   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 本局信息 dialog (js/ui/matchInfo.js MatchInfoDialog,
   GitHub issue #8 item 1). The 「请选择策略」 band is css/screens/protocol-boot.css.
   PR #643 (the event's pre-game, video 6:29–7:51): name-card rows, a 4-wide wall of portraits, the detail pane sliding
   in on a tap (the order list narrows), 已选定策略 after the pick. Original drawings only; the pg-* keyframes are
   css/screens/briefing.css.
   ========================================================================================== */

/* ---- layout: order | link | wall | detail (0 wide until a portrait is tapped) ----
   The columns switch at once and the pane slides in by transform: a column that grew would carry 确认选择 across the
   screen for its first moments, and an early tap would miss it. */
.draft__main {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  display: grid; grid-template-columns: 7.3rem .8rem minmax(0, 1fr) 0; grid-template-rows: minmax(0, 1fr);
  padding: .04rem .5rem .3rem .46rem;
}
.draft--detail .draft__main { grid-template-columns: 4.7rem .2rem minmax(0, 1fr) 4.6rem; }
.draft--detail .draft-order__rows { padding: .08rem .12rem .1rem .28rem; }
.draft--detail .dorder { grid-template-columns: minmax(0, 1fr) 1.1rem .42rem; gap: .06rem; }
.draft--detail .dorder__box { width: 1.1rem; height: 1.1rem; }
.draft--detail .dorder__card { padding: 0 .1rem 0 .14rem; gap: .1rem; }
.draft--detail .dorder__name { gap: .04rem; font-size: calc(.21 * var(--t)); }
.draft--detail .dorder__medal { width: .26rem; height: .26rem; }
.draft--detail .dorder .pavatar { --pa: .74rem; }

/* ---- the order: name-card rows ---- */
.draft-order {
  grid-column: 1; position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 0; min-height: 0;
  padding: .3rem 0 .24rem .3rem;
  background: linear-gradient(180deg, rgba(48, 118, 100, .26), rgba(20, 46, 40, .16) 70%, rgba(14, 24, 22, .06));
  clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% .5rem, 100% 100%, 0 100%);
  animation: pg-left 460ms var(--pg-ease) 100ms backwards;
}
.draft-order__deco { flex: none; display: flex; align-items: center; gap: .05rem; height: .34rem; overflow: hidden; }
.draft-order__deco i { width: .5rem; height: .18rem; background: rgba(63, 230, 180, .4); }
.draft-order__deco i + i { width: .18rem; }
.draft-order__deco span { margin-left: .08rem; font-family: var(--font-num); font-size: calc(.1 * var(--t)); line-height: 1.15; letter-spacing: .08em; color: rgba(120, 240, 205, .55); white-space: nowrap; }
.draft-order__rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .24rem; overflow: auto; padding: .08rem .5rem .1rem .3rem; scrollbar-width: none; }
.draft-order__tip { flex: none; margin: 0; padding-right: .5rem; font-size: calc(.14 * var(--t)); line-height: 1.55; color: var(--text-dim); }
.draft--detail .draft-order__tip, .draft--detail .draft-order__deco span { display: none; }

.dorder { position: relative; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 1.2rem .5rem; align-items: center; gap: .1rem; height: 1.26rem;
  animation: pg-left 420ms var(--pg-ease) backwards; animation-delay: calc(180ms + var(--i, 0) * 70ms); }
.dorder__card { position: relative; height: 100%; display: flex; align-items: center; gap: .16rem; min-width: 0; padding: 0 .16rem 0 .2rem; overflow: hidden;
  background: linear-gradient(90deg, #1d2223, #262b2c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.dorder__art { position: absolute; inset: 0 0 0 28%; width: 72%; height: 100%; object-fit: cover; object-position: 50% 16%; opacity: .62; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 45%); mask: linear-gradient(90deg, transparent, #000 45%); }
.dorder__face { position: relative; flex: none; }
.dorder .pavatar { --pa: .9rem; box-shadow: 0 0 0 .03rem #e6e9e9; border: 0; }
.dorder__me { position: absolute; left: -.14rem; top: -.14rem; width: .32rem; height: .32rem; display: grid; place-items: center; background: var(--mint-500); color: #062019; box-shadow: 0 0 0 .02rem #062019; }
.dorder__me .icon { width: 72%; height: 72%; }
.dorder__text { position: relative; display: flex; flex-direction: column; gap: .05rem; min-width: 0; text-shadow: 0 1px 3px #000, 0 0 .1rem #000; }
.dorder__name { display: flex; align-items: center; gap: .06rem; min-width: 0; font-size: calc(.24 * var(--t)); font-weight: 700; line-height: 1.2; color: #f2f4f4; white-space: nowrap; }
.dorder__name > span:not(.dorder__ai) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the player's best trophy medal (local records) before the name, at the name's height */
.dorder__medal { flex: none; width: .34rem; height: .34rem; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.dorder__ai { flex: none; font-family: var(--font-num); font-size: calc(.11 * var(--t)); padding: 0 .04rem; background: #a9c3d8; color: #0b1520; }
.dorder__state { font-size: calc(.15 * var(--t)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dorder__box { position: relative; width: 1.2rem; height: 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .04rem; padding: 0;
  background: #2b2f30; color: #767c7e; font-size: calc(.2 * var(--t)); font-weight: 700; }
.dorder__box.is-wait .icon { width: .52rem; height: .52rem; }
.dorder__box.is-cur { background: linear-gradient(180deg, #f2f4f4, #cdd1d1); color: #15191a; box-shadow: 0 0 0 .03rem #fff, 0 .04rem .14rem rgba(0, 0, 0, .55); }
.dorder__box.is-cur .icon { width: .46rem; height: .46rem; }
.dorder__box.is-band { cursor: pointer; overflow: hidden; background: radial-gradient(circle at 50% 40%, #1f4a40, #0c1513 75%); box-shadow: inset 0 0 0 1px rgba(120, 240, 205, .25); }
.dorder__box.is-band .bandicon { --bi: 100%; width: 100%; height: 100%; background: transparent; }
.dorder__box.is-band:hover { box-shadow: inset 0 0 0 2px var(--mint-400); }
.dorder__zoom { position: absolute; left: 50%; bottom: .04rem; width: .3rem; height: .3rem; transform: translateX(-50%); color: #fff; filter: drop-shadow(0 0 2px #000); }
.dorder__check { width: .44rem; height: .44rem; display: grid; place-items: center; }
.dorder.is-done .dorder__check { border: .03rem solid var(--mint-400); border-radius: .06rem; background: rgba(23, 249, 183, .12); color: var(--mint-400); box-shadow: 0 0 .14rem rgba(23, 249, 183, .45); }
.dorder__check .icon { width: 80%; height: 80%; }
/* the doctor deciding: a mint frame around card + box, ▶ on the left */
.dorder.is-cur .dorder__card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 .03rem var(--mint-400), 0 0 .22rem rgba(23, 249, 183, .3); }
.dorder.is-cur::before { content: ''; position: absolute; left: -.26rem; top: 50%; transform: translateY(-50%); border: .09rem solid transparent; border-left: .13rem solid var(--mint-400); border-right: 0;
  animation: dorder-mark 1.2s ease-in-out infinite; }
@keyframes dorder-mark { 50% { transform: translate(-.05rem, -50%); } }
/* the pick landing: a beam runs out of the box, the box flares, ✓ pops (useRise) */
.dorder.is-flash::after { content: ''; position: absolute; left: 52%; right: -1.8rem; top: 50%; height: .8rem; pointer-events: none;
  background: radial-gradient(closest-side, rgba(210, 255, 242, .95), rgba(63, 230, 180, .55) 45%, transparent); filter: blur(2px);
  transform-origin: 0 50%; animation: dorder-beam 1.1s ease-out both; }
@keyframes dorder-beam { 0% { opacity: 0; transform: translateY(-50%) scaleX(.15); } 22% { opacity: 1; transform: translateY(-50%) scaleX(1); } 100% { opacity: 0; transform: translateY(-50%) scaleX(1.12); } }
.dorder.is-flash .dorder__box { animation: pg-glow 900ms ease-out; }
.dorder.is-flash .dorder__check { animation: pg-pop 320ms var(--pg-ease) 140ms backwards; }

/* the bracket between the order and the wall */
.draft__link { grid-column: 2; position: relative; pointer-events: none; transition: opacity 200ms; }
.draft__link::before { content: ''; position: absolute; right: .14rem; top: 34%; bottom: 34%; width: .12rem; border: 1px solid rgba(255, 255, 255, .22); border-left: 0; }
.draft__link::after { content: ''; position: absolute; left: .12rem; right: .26rem; top: 50%; height: .05rem; transform: translateY(-50%);
  background: linear-gradient(90deg, var(--mint-400) .05rem, rgba(255, 255, 255, .5) .05rem calc(100% - .05rem), var(--mint-400) calc(100% - .05rem)); }
.draft--detail .draft__link { opacity: 0; }

/* ---- the wall of strategies ---- */
.draft-grid {
  grid-column: 3; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1.9rem)); justify-content: center; align-content: start; gap: .3rem .26rem;
  padding: .24rem .3rem .4rem; background: linear-gradient(180deg, rgba(18, 22, 22, .6), rgba(10, 12, 12, .3)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.dband, .dorder__box, .draft-skip, .stephead__info { border: 0; font: inherit; }
.dband {
  position: relative; aspect-ratio: 1; padding: 0; color: var(--text-md); background: #0e1212;
  box-shadow: 0 0 0 .03rem #30373a, inset 0 0 0 .02rem #000; transition: box-shadow var(--t-fast), transform var(--t-fast), filter var(--t-fast);
  animation: pg-card 420ms var(--pg-ease) backwards; animation-delay: calc(220ms + var(--n, 0) * 28ms);
}
.dband__frame { position: absolute; inset: .07rem; overflow: hidden; background: radial-gradient(circle at 50% 42%, #1e3f37, #0b1211 72%); }
.dband__frame .bandicon { --bi: 100%; width: 100%; height: 100%; background: transparent; }
.dband__frame img { filter: saturate(.75) contrast(1.05); }
.dband__frame::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 46%, transparent 48%, rgba(4, 10, 9, .78) 74%),
    linear-gradient(180deg, rgba(60, 230, 185, .1), rgba(60, 230, 185, .2)); }
.dband__name { position: absolute; left: .07rem; right: .07rem; bottom: .07rem; padding: .14rem .04rem .04rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: calc(.15 * var(--t)); font-weight: 700; color: rgba(225, 240, 236, .82); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7)); pointer-events: none; }
.dband:hover { box-shadow: 0 0 0 .03rem rgba(120, 240, 205, .7), inset 0 0 0 .02rem #000; filter: brightness(1.12); }
.dband:active { transform: scale(.97); }
.dband:focus-visible { outline: none; box-shadow: 0 0 0 .04rem var(--mint-400); }
/* SELECTED: mint corner brackets, the word above, a notch below */
.dband.is-sel { box-shadow: 0 0 0 .03rem rgba(120, 240, 205, .5); filter: brightness(1.15); }
.dband.is-sel::before { content: ''; position: absolute; inset: -.07rem; pointer-events: none; --c: var(--mint-400); --l: .34rem; --w: .05rem;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
  filter: drop-shadow(0 0 .06rem rgba(23, 249, 183, .7)); animation: dband-sel 220ms var(--pg-ease) backwards; }
@keyframes dband-sel { from { opacity: 0; transform: scale(1.12); } }
.dband.is-sel::after { content: ''; position: absolute; left: 50%; bottom: -.2rem; transform: translateX(-50%); border: .08rem solid transparent; border-bottom: .1rem solid var(--mint-400); border-top: 0; }
.dband__selmark { position: absolute; left: 0; right: 0; top: .08rem; text-align: center; font-family: var(--font-num); font-size: calc(.12 * var(--t)); letter-spacing: .1em; color: var(--mint-400); text-shadow: 0 0 3px #000; pointer-events: none; }
.dband.is-mine { box-shadow: 0 0 0 .04rem var(--mint-400), 0 0 .2rem rgba(23, 249, 183, .35); }
/* 已被选择: dimmed, a red band across the lower third */
.dband.is-taken { cursor: not-allowed; }
.dband.is-taken .dband__frame { filter: grayscale(.7) brightness(.55); }
.dband.is-taken:hover { filter: none; box-shadow: 0 0 0 .03rem #5a2a26, inset 0 0 0 .02rem #000; }
.dband.is-taken:active { transform: none; }
.dband__taken { position: absolute; left: .07rem; right: .07rem; bottom: .07rem; height: 36%; display: grid; place-items: center; pointer-events: none;
  font-size: calc(.21 * var(--t)); font-weight: 700; letter-spacing: .08em; color: #ff9d90;
  background: linear-gradient(180deg, rgba(140, 20, 16, .35), rgba(176, 26, 20, .88)); box-shadow: inset 0 -.03rem 0 #ff4a3a, 0 0 .16rem rgba(255, 60, 40, .25);
  animation: dband-taken 420ms var(--pg-ease) backwards; }
@keyframes dband-taken { from { opacity: 0; transform: scaleY(.2); filter: brightness(2); } }
/* short landscape phones (≤ 520 CSS px tall; tiles about 60 px wide): 已被选择 stays on one line in its band (§35.51: at 大 /
   特大 it broke into 「已被 / 选择」, cut 21–29 px), and a strategy's name takes two lines before its ellipsis (「伊奥莱塔·罗素」,
   「“变形者集群”」 ended in one at 大). Each cap grows half a pixel a step above 中 (--t-step). [ASSUMED] the caps */
@media (max-height: 520px) {
  /* the header's status (请选择策略 over 跳过选择, whose turn it is, 策略选择完成) takes the step's name's place: at 大 / 特大
     it ran over 选择策略 and 跳过选择 broke into two lines (§35.51); 2/2 stays, and the status says what the step is */
  .draft.has-status .stephead__name { display: none; }
  /* … and the row gives the status real room (§35.51 review: at 中 – 特大 the status still ran over 2/2 in English,
     Japanese and Korean, the mode tag over 本局信息, 跳过选择 over 2/2; the row itself: below, at every size): here the
     mode tag, 本局信息 and 2/2 are capped, the status line too, beside 跳过选择 sized to its text. (`.draft` raises these
     above the base rules written further down: the §35.51 version of the 跳过选择 rule lost to its base `height: .44rem`) */
  .draft .stephead__mode .dtag { font-size: min(calc(.26 * var(--t)), calc(13px + var(--t-step))); }
  .draft .stephead__info { height: auto; min-height: .4rem; font-size: min(calc(.2 * var(--t)), calc(12px + var(--t-step))); }
  /* above 小 本局信息 shows its magnifier only (its name stays the button's title), leaving the status its line */
  :root:not([data-text="sm"]) .draft .stephead__info > span { display: none; }
  .draft .stephead__title b { font-size: min(calc(.54 * var(--t)), calc(26px + 2 * var(--t-step))); }
  .draft .stephead__of { font-size: min(calc(.34 * var(--t)), calc(17px + var(--t-step))); }
  .draft .dturn__go b { white-space: normal; text-wrap: balance; line-height: 1.15; font-size: min(calc(.4 * var(--t)), calc(15px + var(--t-step))); }
  /* above 小 the pointing finger gives the status line its width (the line says it is the player's turn) */
  :root:not([data-text="sm"]) .draft .dturn__finger { display: none; }
  .draft .dturn__txt b { font-size: min(calc(.28 * var(--t)), calc(14px + var(--t-step))); text-align: right; }
  .draft .dturn__txt span { font-size: min(calc(.24 * var(--t)), calc(12px + var(--t-step))); text-align: right; }
  .draft .draft-skip { white-space: nowrap; font-size: min(calc(.22 * var(--t)), calc(13px + var(--t-step) / 2)); }
  /* the order box's 选择中 / Deciding under its icon (English 「Deciding」 ran 2–6 px past the box at 大 / 特大) */
  .draft .dorder__box span { max-width: 100%; letter-spacing: 0; font-size: min(calc(.18 * var(--t)), calc(10px + var(--t-step) / 2)); }
  /* the decorative STRONGHOLD PROTOCOL / COLLABORATIVE SYSTEM gives way at 大 / 特大 (it ran past its .34rem strip) */
  :root[data-text="lg"] .draft-order__deco span, :root[data-text="xl"] .draft-order__deco span { display: none; }
  .dband__taken { white-space: nowrap; letter-spacing: 0; font-size: min(calc(.21 * var(--t)), calc(12px + var(--t-step) / 2)); }
  .dband__name { white-space: normal; text-wrap: balance; line-height: 1.1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    font-size: min(calc(.15 * var(--t)), calc(11px + var(--t-step) / 2)); }
  /* the two lines keep each language's breaking rules, as the room and the hub do (§35.51 review: 「ワルフ|ァリン」,
     「オーキ|ッド」, 「ムリナ|ール」 broke before a small kana or ー; Korean 「에르망|가르드」 between syllables): Japanese never
     starts a line with a small kana, ー or a closing mark; a Korean name stays on one line (its words are single long
     words here: 「클레멘티아」 cannot break between words) and ends in an ellipsis when longer than the tile, as before
     §35.51 [ASSUMED: one line rather than a break inside the word] */
  .dband__name:lang(ja) { line-break: strict; }
  .dband__name:lang(ko) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.dband.is-taken .dband__name { display: none; }
/* the official orange corner badge (statistics/strategyBadge) on a strategy that earned it — its victorCount of clears in
   this browser's records (bandDraft.js draftRecords, ui/stats.js strategyBadgeIds) — placed as on the stats page's
   已获得特殊标识的策略 (css/screens/stats.css .st-strategy-badge__mark); without the art pack an orange rook in a box */
.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%; }
/* a strategy built around a bond the 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 { position: absolute; left: .1rem; top: .1rem; font-size: max(calc(.12 * var(--t)), 8px); line-height: 1.5; padding: 0 .05rem; color: var(--text-lo); background: rgba(0, 0, 0, .6);
  border: 1px dashed rgba(255, 255, 255, .32); white-space: nowrap; pointer-events: none; }
.draft-detail__off { display: flex; align-items: flex-start; gap: .06rem; margin: .04rem 0 .06rem; padding: .06rem .1rem;
  font-size: max(calc(.15 * var(--t)), 9px); line-height: 1.5; color: var(--text-lo); background: rgba(0, 0, 0, .25); 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); }

/* ---- the detail pane (slides in from the right on a tap) ---- */
.draft-detail {
  grid-column: 4; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; margin-left: .16rem;
  padding: .26rem .26rem .1rem; background: linear-gradient(180deg, rgba(30, 84, 72, .5), rgba(14, 32, 28, .4) 55%, rgba(8, 12, 12, .2));
  animation: pg-right 280ms var(--pg-ease) backwards;
}
.draft-detail__body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; scrollbar-width: none; animation: pg-fade 200ms ease-out backwards; }
.draft-tag { align-self: flex-start; display: inline-block; height: .13rem; margin: .08rem 0 .05rem; padding: 0 .06rem; font-family: var(--font-num); font-size: calc(.09 * var(--t)); line-height: .13rem;
  letter-spacing: .12em; color: #082a20; background: rgba(63, 230, 180, .62); }
.draft-detail__art, .draft-done__art { position: relative; align-self: center; display: grid; place-items: center; width: 2.6rem; height: 2.3rem; margin: .18rem 0 .14rem; flex: none; }
.draft-detail__art::before, .draft-done__art::before { content: ''; position: absolute; inset: 0 .14rem; pointer-events: none;
  border: .03rem solid rgba(220, 240, 236, .5); clip-path: polygon(0 0, .26rem 0, .26rem 100%, 0 100%, 0 0, 100% 0, 100% 100%, calc(100% - .26rem) 100%, calc(100% - .26rem) 0, 100% 0); }
.draft-detail__art::after, .draft-done__art::after { content: '+   +'; position: absolute; inset: -.18rem -.1rem auto; text-align: justify; text-align-last: justify; font-size: calc(.3 * var(--t)); line-height: 1; color: rgba(220, 240, 236, .25); pointer-events: none; }
.draft-detail__art .bandicon, .draft-done__art .bandicon { --bi: 2.1rem; background: transparent; }
.draft-detail__art img, .draft-done__art img { filter: saturate(.8) drop-shadow(0 0 .14rem rgba(63, 230, 180, .35)); }
.draft-detail__medal { align-self: center; margin-bottom: .06rem; 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, .draft-done__hp { align-self: center; display: flex; align-items: center; gap: .1rem; font-size: calc(.24 * var(--t)); color: #e8ecec; }
.draft-detail__hp b, .draft-done__hp b { padding: 0 .08rem; font-size: calc(.22 * var(--t)); line-height: 1.35; color: #062019; background: var(--mint-500); }
.draft-detail__name { margin: 0 0 .04rem; font-size: calc(.36 * var(--t)); font-weight: 900; letter-spacing: .04em; color: #f4f6f6; }
.draft-detail__eff { min-height: 0; }
.draft-detail__desc { margin: 0; font-size: calc(.2 * var(--t)); line-height: 1.55; color: #eef2f2; }
.draft-detail__actions { flex: none; display: flex; flex-direction: column; gap: .08rem; padding: .12rem 0 .1rem; }
.draft-detail__status { display: flex; align-items: center; gap: .06rem; margin: 0; font-size: calc(.16 * var(--t)); color: var(--text-lo); }
.draft-detail__status .icon { width: .2rem; height: .2rem; flex: none; }
.draft-detail__status--taken { color: #ff8f80; }
.draft-detail__btns { display: flex; gap: .1rem; }
.draft-detail__btns .btn { flex: 1; }
.draft-detail__btns .btn--lg { height: .92rem; font-size: calc(.32 * var(--t)); }
.draft-confirm.btn--primary { --btn-bg: #d8dbdb; --btn-bg-hover: #f2f4f4; --btn-fg: #111415; --btn-bd: #fff; --btn-bd-hover: #fff; --btn-glow: rgba(255, 255, 255, .35); --bk-c: #fff;
  background-image: none; box-shadow: 0 0 0 .03rem rgba(255, 255, 255, .85), 0 .06rem .2rem rgba(0, 0, 0, .5); letter-spacing: .08em; }
.draft-confirm .btn__icon { width: .4rem; height: .4rem; padding: .03rem; border: .03rem solid currentColor; border-radius: .04rem; }
.draft-confirm.btn--primary:disabled { --btn-bg: #34393a; --btn-fg: #8c9293; --btn-bd: #4a5051; box-shadow: none; opacity: 1; }

/* ---- 已选定策略 (after the pick: the wall gives way) ---- */
.draft-done {
  grid-column: 3 / 5; position: relative; min-width: 0; min-height: 0; overflow: auto; align-self: stretch;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: center; column-gap: .3rem; row-gap: .12rem;
  padding: .5rem .7rem .36rem .5rem;
  background: linear-gradient(180deg, rgba(36, 98, 84, .48), rgba(16, 40, 35, .42) 60%, rgba(10, 18, 16, .3));
  box-shadow: inset 0 0 0 1px rgba(63, 230, 180, .2); clip-path: polygon(0 0, 100% 0, 100% 100%, .5rem 100%, 0 calc(100% - .5rem));
  animation: draft-done-in 600ms var(--pg-ease) backwards;
}
.draft-done::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(170, 255, 232, .1) 0 2px, transparent 2px 6px);
  animation: pg-out 900ms ease-out 200ms both; }
@keyframes draft-done-in { 0% { opacity: 0; transform: translateX(1.2rem); filter: brightness(2.4) saturate(.4); clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%); }
  50% { opacity: .9; filter: brightness(1.5); clip-path: polygon(0 0, 100% 0, 100% 100%, .5rem 100%, 0 calc(100% - .5rem)); } }
.draft-done__art { grid-column: 1; grid-row: 1; justify-self: center; }
.draft-done__head { grid-column: 2; grid-row: 1; align-self: center; display: flex; flex-direction: column; }
.draft-done__title { margin: 0; font-size: calc(.6 * var(--t)); font-weight: 900; letter-spacing: .04em; color: var(--mint-400); text-shadow: 0 0 .16rem rgba(23, 249, 183, .35); }
.draft-done__name { font-size: calc(.36 * var(--t)); color: #f2f4f4; }
.draft-done__hp { grid-column: 1; grid-row: 2; }
.draft-done__desc { grid-column: 1 / -1; grid-row: 3; margin: .2rem 0 0; padding: 0 .3rem; font-size: calc(.24 * var(--t)); line-height: 1.55; color: #eef2f2; }
.draft-done .draft-detail__status { grid-column: 1 / -1; grid-row: 4; justify-content: flex-end; }

/* ---- the header's turn line ---- */
.dturn { display: flex; align-items: center; gap: .16rem; }
.dturn__txt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.dturn__txt b { font-size: calc(.28 * var(--t)); color: #f2f4f4; }
.dturn__txt span { font-size: calc(.24 * var(--t)); color: #d4d8d8; }
.dturn__glass { width: .46rem; height: .46rem; color: #eceeee; animation: dturn-glass 2.4s ease-in-out infinite; }
@keyframes dturn-glass { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
.dturn.is-turn { flex-direction: column; align-items: flex-end; gap: .06rem; animation: pg-right 380ms var(--pg-ease) backwards; }
.dturn__go { display: flex; align-items: center; gap: .16rem; }
.dturn__go b { white-space: nowrap; font-size: min(calc(.4 * var(--t)), .5rem); /* a larger 文字大小 wrapped it over the header on phones */ font-weight: 900; letter-spacing: .06em; color: var(--mint-400); text-shadow: 0 0 .14rem rgba(23, 249, 183, .4); }
.dturn__finger { width: .42rem; height: .42rem; color: var(--mint-400); object-fit: contain; animation: dturn-finger 1s ease-in-out infinite; }
@keyframes dturn-finger { 50% { transform: translateX(.05rem); } }
.draft-skip { display: inline-flex; align-items: center; gap: .1rem; height: .44rem; padding: 0 .3rem 0 .24rem; border-radius: .22rem;
  background: rgba(70, 75, 77, .75); color: #eceeee; font-size: calc(.22 * var(--t)); font-weight: 700; transition: background var(--t-fast); }
.draft-skip:not(:disabled):hover { background: rgba(98, 104, 106, .85); }
.draft-skip:disabled { cursor: default; color: rgba(236, 238, 238, .45); background: rgba(50, 54, 56, .55); }
.draft-skip .icon { width: .28rem; height: .28rem; fill: currentColor; }
.draft-skip[aria-busy="true"] { opacity: .6; }
/* the header's row at every size (§35.51 review): the left part (离开, the mode capsule with 本局信息, 2/2) keeps its width,
   the right part takes the rest and the status line wraps in it, balanced, instead of running over 2/2 (English 「Choose
   Your Strategy」 at 中 – 特大 on phones — where it wraps, ≤ 520 px —, over 选择策略 in 1024–1280 px windows at 大 / 特大); the capsule grows with its
   tag (「绝境模拟」 cut at 特大 in a 1024×600 window); Korean breaks between words */
.draft .stephead__left { flex: none; }
.draft .stephead__right { flex: 1 1 0; justify-content: flex-end; }
.draft .stephead__status, .draft .dturn, .draft .dturn__go, .draft .dturn__txt { min-width: 0; }
.draft .stephead__mode.has-extra { height: auto; min-height: .52rem; }
.draft .dturn__go b { text-align: right; }
/* the header grows rather than cut its status (two lines in English at 特大 on a 640 px phone) and 跳过选择 sizes to its
   text (cut at 特大 in a 1024×600 window) */
.draft .stephead { height: auto; min-height: 1.3rem; }
.draft .draft-skip { height: auto; min-height: .44rem; padding-top: 2px; padding-bottom: 2px; line-height: 1.25; }
.dturn:lang(ko), .draft-order__tip:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
/* … and while the status shows, the step's name gives way to it in windows up to 640 px tall (1024×600), as on short
   screens, and at 大 / 特大 in any window (the 2/2 stays). §35.56: chosen by window width (up to 1440 px) it was hidden
   for nothing at 小 / 中 in laptop windows — the layout scales with the window — and still ran under the status at 大 /
   特大 in wider ones (English 「Choose Your Strategy」 over 「Choose Strategy」 at 1600×900 and 1920×1080) */
@media (max-height: 640px) {
  .draft.has-status .stephead__name { display: none; }
}
:root[data-text="lg"] .draft.has-status .stephead__name, :root[data-text="xl"] .draft.has-status .stephead__name { display: none; }
/* 玩法说明 keeps its label inside its button: the button does not shrink (English 「How to Play」 ran past it into the
   countdown at 大 / 特大 in 1600–1920 px windows) */
.draft .stephead__guide { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .draft-order, .dorder, .dorder.is-cur::before, .dorder.is-flash .dorder__box, .dorder.is-flash .dorder__check, .dband, .dband.is-sel::before, .dband__taken,
  .draft-detail, .draft-detail__body, .draft-done, .dturn.is-turn, .dturn__glass, .dturn__finger { animation: none; }
  .dorder.is-flash::after, .draft-done::after { display: none; }
}

/* 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). Only to look at: the screen is inert (bandDraft.js). */
.draft.is-held { pointer-events: none; animation: pg-out 220ms ease-in 480ms forwards; }
@media (prefers-reduced-motion: reduce) { .draft.is-held { animation: none; } }

/* ---- 本局信息 (GitHub issue #8 item 1, DESIGN §21.28): the read-only dialog (its entry: the step header's
   .stephead__info, css/screens/briefing.css) -------
   The dialog shows the briefing's own enemy, bond and banned-operator blocks (ui/matchEnemies.js, ui/matchInfo.js, #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. */
.modal__box.minfo-dlg {
  width: min(max(17rem, 32px, calc(900px * var(--sp-ui, 1))), 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, calc(6px * var(--sp-ui, 1))); 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, calc(10px * var(--sp-ui, 1))); }
.minfo-dlg__enemies, .minfo-dlg__bonds { display: flex; flex-direction: column; gap: max(.16rem, calc(6px * var(--sp-ui, 1))); min-width: 0; }
.minfo-dlg__enemies > *, .minfo-dlg__bonds > * { flex-shrink: 0; }
/* the shared 本局遭遇敌方 block (ui/matchEnemies.js; its briefing layout is scoped under .brief) stacked into the
   dialog's column: portrait + 敌方领袖 | name, round, abilities, battlefield; the special enemies as rows under them */
.minfo-dlg .brief-enemies { padding: max(.16rem, calc(6px * var(--sp-ui, 1))) max(.2rem, calc(8px * var(--sp-ui, 1))) max(.2rem, calc(8px * var(--sp-ui, 1))); background: rgba(12, 15, 14, .8); border: 1px solid var(--line); }
.minfo-dlg .brief-enemy { display: grid; grid-template-columns: max(1.4rem, 32px, calc(70px * var(--sp-ui, 1))) minmax(0, 1fr); align-items: start; gap: max(.16rem, calc(8px * var(--sp-ui, 1))); }
.minfo-dlg .brief-boss { display: flex; flex-direction: column; align-items: center; gap: max(.04rem, calc(2px * var(--sp-ui, 1))); }
.minfo-dlg .brief-boss__art {
  position: relative; width: max(1.4rem, 32px, calc(70px * var(--sp-ui, 1))); height: max(1.4rem, 32px, calc(70px * var(--sp-ui, 1))); display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #6b3420, #2a120b 75%); box-shadow: 0 0 0 2px #4a4e50, 0 0 0 3px #1a1c1d;
}
.minfo-dlg .brief-boss__img { width: 100%; height: 100%; object-fit: cover; }
.minfo-dlg .brief-boss__q { font-size: max(.6rem, 28px); font-weight: 900; color: rgba(255, 140, 70, .6); }
.minfo-dlg .brief-boss__tag { width: 100%; padding: max(.02rem, calc(1px * var(--sp-ui, 1))) 0; text-align: center; font-size: max(.13rem, 9px); font-weight: 700; letter-spacing: .1em;
  color: #ffcf4a; background: linear-gradient(180deg, #5a4210, #3a2a08); box-shadow: inset 0 0 0 1px rgba(255, 207, 74, .25); }
.minfo-dlg .brief-boss__text { display: flex; flex-direction: column; gap: max(.06rem, calc(3px * var(--sp-ui, 1))); min-width: 0; overflow-wrap: anywhere; }
.minfo-dlg .brief-boss__name { margin: 0; font-size: max(calc(.34 * var(--t)), 16px); font-weight: 900; letter-spacing: .04em; line-height: 1.25; }
.minfo-dlg .brief-boss__when { font-size: max(calc(.15 * var(--t)), 10px); color: var(--orange-hi); }
.minfo-dlg .brief-boss__abil { margin: 0; padding-left: max(.18rem, calc(12px * var(--sp-ui, 1))); display: flex; flex-direction: column; gap: .04rem; font-size: max(calc(.14 * var(--t)), 10px); line-height: 1.6; color: var(--text-md); }
.minfo-dlg .brief-stage { display: flex; flex-wrap: wrap; align-items: center; gap: max(.08rem, calc(4px * var(--sp-ui, 1))); color: var(--text-lo); }
.minfo-dlg .brief-stage .icon { width: max(.2rem, 12px); height: max(.2rem, 12px); color: var(--mint-500); }
.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); color: var(--text-hi); }
.minfo-dlg .brief-factions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: max(.08rem, calc(4px * var(--sp-ui, 1))); min-width: 0; }
.minfo-dlg .brief-faction__tt { min-width: 0; }
.minfo-dlg .brief-faction { flex: 1; min-width: 0; display: flex; align-items: center; gap: max(.14rem, calc(6px * var(--sp-ui, 1))); padding: max(.1rem, calc(5px * var(--sp-ui, 1))) max(.14rem, calc(6px * var(--sp-ui, 1)));
  background: rgba(255, 255, 255, .03); border-left: 3px solid var(--amber); cursor: help; }
.minfo-dlg .brief-faction__icon {
  flex: none; width: max(.72rem, 32px); height: max(.72rem, 32px); display: grid; place-items: center; border-radius: 50%; outline: none;
  background: radial-gradient(circle at 50% 45%, #2a3a38, #121817 70%);
}
.minfo-dlg .brief-faction__icon:focus-visible { box-shadow: 0 0 0 2px var(--mint-400); }
.minfo-dlg .brief-faction__icon img { width: 78%; height: 78%; object-fit: contain; filter: grayscale(1) brightness(1.6); }
/* the name; the description in the tooltip (ui/matchEnemies.js, the maintainer's decision of 2026-10-22) */
.minfo-dlg .brief-faction__text { display: flex; flex-direction: column; gap: .03rem; min-width: 0; overflow-wrap: anywhere; }
.minfo-dlg .brief-faction__text b { font-size: max(calc(.2 * var(--t)), 12px); color: var(--amber); }
.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, calc(6px * var(--sp-ui, 1))) max(.2rem, calc(8px * var(--sp-ui, 1))) max(.2rem, calc(8px * var(--sp-ui, 1))); }
.minfo-dlg .brief-h { font-size: max(.21rem, 12px); margin-bottom: max(.12rem, calc(5px * var(--sp-ui, 1))); }
.minfo-dlg .brief-h::before { width: max(.06rem, 3px); height: max(.2rem, 11px); }
.minfo-dlg .brief-bonds__row { gap: max(.16rem, calc(6px * var(--sp-ui, 1))) max(.1rem, calc(4px * var(--sp-ui, 1))); }
.minfo-dlg .brief-bond { width: max(1rem, 32px, calc(50px * var(--sp-ui, 1))); }
.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, calc(2px * var(--sp-ui, 1))); }
.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, 32px, calc(34px * var(--sp-ui, 1))), 1fr)); gap: max(.08rem, calc(3px * var(--sp-ui, 1))); }
.minfo-dlg .brief-banned__grid .uthumb { --ut: max(.6rem, 32px, calc(34px * var(--sp-ui, 1))); }
.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, 32px, calc(600px * var(--sp-ui, 1))), calc(100vw - .6rem - var(--sa-l, 0px) - var(--sa-r, 0px))); }
  .minfo-dlg__content.has-enemies { grid-template-columns: minmax(0, 1fr); }
}