/* ==========================================================================================
   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 and the 协议启动！ screen are css/screens/protocol-boot.css.
   2026-10-13 (the event's pre-game, video 6:29–7:51; the 2026-10-14 UI package by 雨千代chiyo): 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-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: .08rem .5rem .1rem .3rem; scrollbar-width: none; }
/* this match's battlefield (#65): the tile map of ui/stagePreview.js and its name */
.draft-map { flex: none; display: flex; align-items: center; gap: .16rem; min-width: 0; margin-right: .5rem; padding: .08rem .12rem; background: rgba(6, 12, 10, .55); box-shadow: inset 0 0 0 1px rgba(120, 240, 205, .16); }
.draft--detail .draft-map { margin-right: .12rem; }
.draft-map__text { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.draft-map__text b { font-size: calc(.18 * var(--t)); line-height: 1.25; color: var(--text-hi); overflow-wrap: anywhere; }
.draft-map__text small { font-size: calc(.13 * var(--t)); color: var(--text-dim); }
.stagemap { flex: none; display: block; width: 2.42rem; height: .88rem; }
.stagemap__t { fill: #38423e; }
.stagemap__t--road { fill: #8e9e98; }
.stagemap__t--high { fill: #4fbf9f; }
.stagemap__t--gate { fill: #ff4a2e; }
.stagemap__t--goal { fill: #4ab0ff; }
.stagemap__t--mire { fill: #8a7344; }
.stagemap__t--smog { fill: #77778a; }
.stagemap__t--deep { fill: #2f6a96; }
.stagemap__t--infect { fill: #9a4a70; }
/* an experimental room's chess pools (#66) */
.draft-pool { flex: none; display: flex; flex-direction: column; gap: .12rem; padding-left: .12rem; border-left: .03rem solid var(--line-2); }
.draft-pool.is-mine { border-left-color: var(--mint-500); }
.draft-pool__head { display: flex; align-items: baseline; gap: .1rem; font-size: calc(.18 * var(--t)); color: var(--text-hi); }
.draft-pool__head small { font-size: calc(.14 * var(--t)); color: var(--text-lo); }
.draft-pool.is-mine .draft-pool__head b, .draft-pool__head .draft-pool__mine { color: var(--mint-400); }
.draft-pool__head .draft-pool__mine { margin-left: auto; }
.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); }
/* the 名片干员 half-body (1:2) in a box about 1.6 rows wide at the card's right end, so the row shows the face (the full
   card width scaled it up until only the hair and forehead were left); the same box for an <img> or a background */
.dorder__art { position: absolute; top: 0; right: 0; bottom: 0; width: 2rem; max-width: 72%; height: 100%; background-size: cover; background-position: 50% 12%; object-fit: cover; object-position: 50% 12%; opacity: .7; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 40%); mask: linear-gradient(90deg, transparent, #000 40%); }
.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%; }
.dband__who { position: absolute; left: .1rem; top: .1rem; display: flex; flex-direction: column; gap: .02rem; pointer-events: none; }
.dband__who .pavatar { --pa: .3rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--mint-400); }
/* 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); }

/* the fork's own (2026-10): 预选盟约 under the order rows and in each row; 已指定给 AI 队友 reuses the 队友已选 look
   (.dband.is-taken); a room of up to 20 seats scrolls its rows; allowRepeat (an expanded room) names it under the list
   and shows every picker's avatar on the card (+N past four) */
.draft-order__plan { flex: none; margin-right: .5rem; width: auto; }
.draft--detail .draft-order__plan { margin-right: .12rem; }
.dorder__plan { align-self: flex-start; margin-top: .02rem; max-width: 100%; }
.draft-order__tip--repeat { font-size: max(calc(.16 * var(--t)), 12px); color: var(--mint-400); }
.dband__more { min-width: .3rem; padding: .01rem .03rem; text-align: center; font-size: max(calc(.12 * var(--t)), 11px); color: var(--mint-400); background: rgba(12, 15, 14, .9); border: 1px solid var(--mint-800); }
@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); }
}