/* ==========================================================================================
   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). Also the pre-game motion of js/ui/matchIntro.js: the 「请选择策略」 band (.tbanner) and the
   协议启动！ screen (.pboot).
   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.
   ========================================================================================== */

/* ---- layout: order | link | wall | detail (0 wide until a portrait is tapped) ---- */
.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;
  transition: grid-template-columns 280ms var(--tr-ease, ease-out);
}
.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; }

/* ---- 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: tr-left 460ms var(--tr-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; }
.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: tr-left 420ms var(--tr-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) */
.dorder__art { position: absolute; top: 0; right: 0; bottom: 0; width: 2rem; max-width: 72%; background-size: cover; background-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: baseline; gap: .06rem; min-width: 0; font-size: calc(.24 * var(--t)); font-weight: 700; color: #f2f4f4; white-space: nowrap; }
.dorder__name > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.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: tr-glow 900ms ease-out; }
.dorder.is-flash .dorder__check { animation: tr-pop 320ms var(--tr-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: tr-card 420ms var(--tr-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(--tr-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(--tr-ease) backwards; }
@keyframes dband-taken { from { opacity: 0; transform: scaleY(.2); filter: brightness(2); } }
.dband.is-taken .dband__name { display: none; }
/* an orange mark: this browser has cleared a run with it (已通过模拟 N 次) */
.dband__medal { position: absolute; right: .12rem; top: .12rem; 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); pointer-events: none; }
.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: tr-right 280ms var(--tr-ease) backwards;
}
.draft-detail__body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; scrollbar-width: none; animation: tr-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(--tr-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: tr-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: tr-right 380ms var(--tr-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; }

@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; }
  .draft__main { transition: none; }
}

/* ---- 本局信息 (GitHub issue #8 item 1, DESIGN §21.28): the read-only dialog (opened from the header) -------
   The dialog shows the briefing's own blocks (.brief-bonds / .brief-legend / .brief-banned, css/screens/briefing.css)
   at the briefing's size on desktop; every size is max(design rem, px floor), so on a phone (1rem = 40 px) the text
   stays at ≥ 9–15 px and the dialog's body scrolls inside the screen (756×366, 844×390) while the header and the
   footer (the turn's countdown, 关闭) stay in view. */
.modal__box.minfo-dlg {
  width: min(max(12rem, 600px), calc(100vw - .6rem - var(--sa-l, 0px) - var(--sa-r, 0px)));
  max-height: calc(100vh - .6rem);
  max-height: calc(100svh - .6rem);
}
.minfo-dlg .modal__head { padding: .16rem .3rem .02rem; }
.minfo-dlg .modal__head .micro { font-size: max(.11rem, 8px); }
.minfo-dlg .modal__title { font-size: max(.26rem, 15px); }
.minfo-dlg .modal__body { display: flex; flex-direction: column; gap: max(.16rem, 6px); padding: .1rem .3rem .2rem; }
.minfo-dlg .modal__actions { align-items: center; padding: .12rem .3rem; }
.minfo-dlg .modal__actions .btn { height: max(.5rem, 30px); font-size: max(.18rem, 12px); }
.minfo-dlg__status { margin-right: auto; min-width: 0; }
.minfo-dlg__turn { display: inline-flex; align-items: center; gap: .06rem; font-size: max(.17rem, 11px); font-weight: 700; color: var(--gold); white-space: nowrap; }
.minfo-dlg__turn .icon { width: max(.18rem, 12px); height: max(.18rem, 12px); }
.minfo-dlg__turn b { margin-left: .04rem; font-size: max(.22rem, 14px); }
.minfo-dlg__turn.is-warn { color: var(--orange-hi); }
.minfo-dlg__turn.is-mint { color: var(--mint-400); }
.minfo-dlg__turn.is-dim { color: var(--text-lo); }
.minfo-dlg .brief-bonds, .minfo-dlg .brief-banned { padding: max(.16rem, 6px) max(.2rem, 8px) max(.2rem, 8px); }
.minfo-dlg .brief-h { font-size: max(.21rem, 12px); margin-bottom: max(.12rem, 5px); }
.minfo-dlg .brief-h::before { width: max(.06rem, 3px); height: max(.2rem, 11px); }
.minfo-dlg .brief-bonds__row { gap: max(.16rem, 6px) max(.1rem, 4px); }
.minfo-dlg .brief-bond { width: max(1rem, 50px); }
.minfo-dlg .brief-bond .bond { --disc: max(.66rem, 32px); }
.minfo-dlg .brief-bond .bond__name { font-size: max(.16rem, 10px); }
.minfo-dlg .brief-bond__ban { font-size: max(.12rem, 9px); padding: 0 max(.05rem, 2px); }
.minfo-dlg .brief-bond__ban .icon { width: max(.12rem, 9px); height: max(.12rem, 9px); }
.minfo-dlg .brief-legend { margin-top: 0; font-size: max(.14rem, 10px); }
.minfo-dlg .brief-legend__off { width: max(.16rem, 9px); height: max(.16rem, 9px); }
.minfo-dlg .brief-legend__ban { width: max(.2rem, 12px); height: max(.18rem, 11px); }
.minfo-dlg .brief-legend__ban .icon { width: max(.12rem, 8px); height: max(.12rem, 8px); }
.minfo-dlg .brief-banned__n { font-size: max(.22rem, 13px); }
.minfo-dlg .brief-banned__grid { grid-template-columns: repeat(auto-fill, minmax(max(.6rem, 34px), 1fr)); gap: max(.08rem, 3px); }
.minfo-dlg .brief-banned__grid .uthumb { --ut: max(.6rem, 34px); }
.minfo-dlg .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); }

/* 对局动画与结算 (the 2026-10-14 UI package by 雨千代chiyo) */
/* ---- 「请选择策略」 (ui/matchIntro.js TurnBanner) ---- */
.pmark { display: inline-flex; align-items: center; gap: .1rem; color: currentColor; }
.pmark__glyph { width: .5rem; height: .5rem; fill: currentColor; flex: none; }
.pmark__type { font-family: var(--font-num); font-size: calc(.17 * var(--t)); font-weight: 700; line-height: 1.05; letter-spacing: .08em; }
.tbanner { position: fixed; inset: 0; z-index: var(--z-banner, 40); display: grid; align-items: center; pointer-events: none; overflow: hidden; }
.tbanner__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; animation: tbanner-dim 1650ms linear both; }
@keyframes tbanner-dim { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
.tbanner__band { position: relative; display: flex; align-items: center; gap: .26rem; height: 2.1rem; animation: tbanner-band 1650ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tbanner-band { 0% { transform: translateX(-46%); } 12% { transform: translateX(-1.6%); } 90% { transform: translateX(1.2%) scaleY(1); }
  97% { transform: translateX(1.2%) scaleY(.06); } 100% { transform: translateX(1.2%) scaleY(0); } }
.tbanner__bar { position: relative; flex: none; width: 84vw; height: 100%; overflow: hidden; background: linear-gradient(180deg, #d5d7da, #b8bbbf); box-shadow: 0 .06rem .3rem rgba(0, 0, 0, .5); }
.tbanner__grey { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 1.3rem; color: #45494d; }
.tbanner__logo { transform: scale(1.5); transform-origin: left center; }
.tbanner__map { position: absolute; inset: 0 0 0 38%; pointer-events: none;
  background: repeating-radial-gradient(ellipse at 72% 64%, rgba(0, 0, 0, .08) 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 1.2rem);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
.tbanner__mint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 2.5rem;
  background: linear-gradient(180deg, #59e6bd, #3dd1a5); clip-path: inset(0 100% 0 0); animation: tbanner-wipe 1650ms cubic-bezier(.5, 0, .2, 1) both; }
@keyframes tbanner-wipe { 0%, 34% { clip-path: inset(0 100% 0 0); } 62%, 100% { clip-path: inset(0 0 0 0); } }
.tbanner__mint .tbanner__map { inset: 0; background: repeating-radial-gradient(ellipse at 40% 50%, rgba(8, 60, 44, .13) 0 1px, transparent 1px 16px); -webkit-mask: none; mask: none; }
.tbanner__text { position: relative; padding-bottom: .06rem; font-size: calc(.52 * var(--t)); font-weight: 900; letter-spacing: .1em; color: #0b2a21; border-bottom: .05rem solid #0b2a21;
  animation: tbanner-text 1650ms ease-out both; }
@keyframes tbanner-text { 0%, 46% { opacity: 0; transform: translateX(-.4rem); } 64% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(.14rem); } }
.tbanner__ring { position: absolute; right: .7rem; top: 50%; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: .1rem solid rgba(11, 42, 33, .7);
  border-left-color: transparent; border-bottom-color: transparent; animation: tbanner-ring 1650ms ease-out both; }
@keyframes tbanner-ring { 0%, 40% { opacity: 0; transform: translateY(-50%) rotate(-150deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateY(-50%) rotate(30deg); } }
.tbanner__bot { flex: none; width: 1.12rem; height: 1.12rem; display: grid; place-items: center; background: #3dd1a5; color: #0b2a21; box-shadow: 0 0 .2rem rgba(61, 209, 165, .6);
  animation: tbanner-bot 1650ms ease-out both; }
.tbanner__bot .icon { width: 70%; height: 70%; }
@keyframes tbanner-bot { 0%, 4% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1); } }

/* ---- 协议启动！ (ui/matchIntro.js ProtocolBoot, BATTLE_CHECK): a 16:9 stage, sizes in 1% of its width (--pq) ---- */
.pboot { position: fixed; inset: 0; z-index: calc(var(--z-conn, 75) - 1); overflow: hidden; pointer-events: none;
  background: radial-gradient(50% 62% at 50% 47%, #1c5a4b, #0b2722 58%, #051311); }
.pboot::before { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; animation: pboot-black 1900ms linear backwards; }
@keyframes pboot-black { 0%, 58% { opacity: 1; } 70% { opacity: 0; } }
.pboot.is-leaving { animation: tr-out 360ms ease-in forwards; }
.pboot__stage { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%);
  --pq: min(1vw, 1.7778vh); /* 1% of the stage's width (no container units: Firefox ESR 115 / Safari 15) */ }
.pboot__bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: tr-fade 500ms ease-out 1150ms backwards; }
.pboot__orbit { fill: rgba(40, 150, 122, .12); stroke: rgba(110, 240, 200, .22); stroke-width: 3; }
.pboot__orbit--in { fill: none; stroke-dasharray: 6 12; stroke-opacity: .5; }
.pboot__topo { fill: none; stroke: rgba(110, 240, 200, .09); stroke-width: 2; }
.pboot__cross { fill: none; stroke: rgba(110, 240, 200, .55); stroke-width: 3; }
.pboot__chip { position: absolute; left: 50%; top: 47.8%; width: 40%; aspect-ratio: 2 / 1; opacity: .3; transform: translate(-50%, -50%) rotate(-30deg) scale(.62);
  animation: pboot-chip 1900ms cubic-bezier(.3, .1, .2, 1) backwards; }
.pboot__chip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pboot__chip rect { fill: #46e4b6; fill-opacity: var(--o); stroke: #c4fff0; stroke-width: 1.5; stroke-opacity: .75; animation: pboot-bit 240ms steps(2, end) backwards; animation-delay: calc(140ms + var(--d, 0ms)); }
.pboot__port { fill: none; stroke: #a6ffe6; stroke-width: 3; }
@keyframes pboot-bit { from { opacity: 0; } }
@keyframes pboot-chip {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(-32deg) scale(2.9); filter: brightness(2.1); }
  34% { opacity: 1; transform: translate(-50%, -50%) rotate(-32deg) scale(2.45); filter: brightness(1.7); }
  62% { opacity: .9; transform: translate(-50%, -50%) rotate(-31deg) scale(.66); filter: brightness(1.1); }
}
.pboot__flash { position: absolute; left: 50%; top: 47.8%; width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: .2; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(180, 255, 234, .95), rgba(63, 230, 180, .5) 28%, transparent 64%); animation: pboot-flash 1900ms ease-out backwards; }
@keyframes pboot-flash { 0%, 56% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 64% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.pboot__mark { position: absolute; left: 36.6%; top: 24.5%; color: rgba(150, 255, 225, .42); animation: tr-fade 400ms ease-out 1300ms backwards; }
.pboot__mark .pmark__glyph { width: calc(3.2 * var(--pq)); height: calc(3.2 * var(--pq)); }
.pboot__mark .pmark__type { font-size: calc(1.3 * var(--pq)); }
.pboot__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pboot__lines line { stroke: #7cf5d0; stroke-width: 3; stroke-dasharray: 1; animation: pboot-line 420ms ease-out backwards; animation-delay: calc(1520ms + var(--i, 0) * 60ms); }
@keyframes pboot-line { from { stroke-dashoffset: 1; } }
.pboot__node { fill: #7cf5d0; animation: tr-fade 200ms ease-out backwards; animation-delay: calc(1880ms + var(--i, 0) * 60ms); }
.pboot__anchor { fill: #0b2621; stroke: #7cf5d0; stroke-width: 4; animation: tr-fade 200ms ease-out backwards; animation-delay: calc(1460ms + var(--i, 0) * 60ms); }
.pcardx { position: absolute; display: flex; align-items: stretch; background: linear-gradient(180deg, #55e4ba, #3ccfa4);
  box-shadow: 0 0 0 calc(.18 * var(--pq)) rgba(210, 255, 240, .45), 0 calc(.4 * var(--pq)) calc(1.2 * var(--pq)) rgba(0, 0, 0, .35);
  animation: pcardx-in 540ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(1260ms + var(--i, 0) * 50ms); }
.pcardx::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(ellipse at 30% 120%, rgba(8, 60, 44, .14) 0 1px, transparent 1px calc(1.1 * var(--pq))); }
.pcardx--l { flex-direction: row; transform-origin: 100% 50%; }
.pcardx--r { flex-direction: row-reverse; transform-origin: 0 50%; }
.pcardx--c { transform-origin: 50% 50%; }
@keyframes pcardx-in { 0% { opacity: 0; transform: scaleX(.1); filter: brightness(2.6) saturate(0); } 40% { opacity: 1; filter: brightness(2) saturate(.2); } 75% { filter: brightness(1.15); } }
.pcardx__mark { position: relative; flex: none; width: 17%; display: grid; place-items: center; }
.pcardx__mark svg { width: 52%; fill: rgba(8, 56, 42, .4); }
.pcardx__txt { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: calc(.15 * var(--pq)); padding: 0 calc(1.3 * var(--pq)); color: #0b2a21; }
.pcardx--r .pcardx__txt { align-items: flex-start; }
.pcardx__txt b { font-family: var(--font-num); font-size: calc(2.6 * var(--pq)); font-weight: 700; line-height: 1; }
.pcardx__txt span { font-family: var(--font-num); font-size: calc(.95 * var(--pq)); font-weight: 700; letter-spacing: .05em; line-height: 1; }
.pcardx__txt i { width: calc(1.5 * var(--pq)); height: calc(1.5 * var(--pq)); margin-top: calc(.35 * var(--pq)); display: grid; place-items: center; background: #0b2a21; color: #55e4ba; }
.pcardx__txt i .icon { width: 85%; height: 85%; }
.pcardx__face { position: relative; flex: none; height: 100%; aspect-ratio: 1; overflow: hidden; background: #0b2621; box-shadow: 0 0 0 calc(.2 * var(--pq)) #e8fff7; }
.pcardx__face .pavatar { --pa: 100%; border: 0; }
/* a big room (more than three rows a side, ui/matchIntro.js pboot--dense): one line per card — number, COMPLETE, ✓ —
   sized by the card's height (--ch: its height in --pq), so ten thin rows a side stay legible and apart */
.pboot--dense .pcardx__txt { flex-direction: row; align-items: center; justify-content: flex-end; gap: calc(.3 * var(--ch) * var(--pq)); padding: 0 calc(.45 * var(--ch) * var(--pq)); }
.pboot--dense .pcardx--r .pcardx__txt { justify-content: flex-start; }
.pboot--dense .pcardx__txt b { font-size: calc(.68 * var(--ch) * var(--pq)); }
.pboot--dense .pcardx__txt span { font-size: calc(.36 * var(--ch) * var(--pq)); }
.pboot--dense .pcardx__txt i { width: calc(.5 * var(--ch) * var(--pq)); height: calc(.5 * var(--ch) * var(--pq)); margin-top: 0; }
.pboot--dense .pcardx__mark svg { width: auto; height: 72%; }
.pboot__title { position: absolute; left: 0; right: 0; top: 66.4%; margin: 0; text-align: center; font-size: calc(4.4 * var(--pq)); font-weight: 900; letter-spacing: calc(.3 * var(--pq)); line-height: 1.2;
  color: #4ff0c0; text-shadow: 0 0 calc(1.2 * var(--pq)) rgba(80, 255, 200, .45); animation: pboot-title 520ms cubic-bezier(.2, .8, .2, 1) 1400ms backwards; }
@keyframes pboot-title { 0% { opacity: 0; transform: scale(1.35); filter: brightness(2.2) blur(2px); } 60% { opacity: 1; filter: brightness(1.4); } }
.pboot__sub { position: absolute; left: 50%; top: 77.4%; transform: translateX(-50%); padding: calc(.12 * var(--pq)) calc(1.5 * var(--pq)); font-family: var(--font-num); font-size: calc(1.3 * var(--pq)); font-weight: 700;
  letter-spacing: calc(.08 * var(--pq)); color: #0b2a21; background: #4fe0b8; white-space: nowrap; animation: tr-fade 300ms ease-out 1560ms backwards; }
.pboot__conn { position: absolute; right: 6%; bottom: 4.5%; font-size: calc(1.6 * var(--pq)); color: rgba(120, 240, 205, .72); animation: tr-fade 400ms ease-out 2000ms backwards; }
.pboot__dots { display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; white-space: nowrap; animation: tr-dots 1.2s steps(4) infinite; }
.pboot__dots::before { content: '...'; }
@media (prefers-reduced-motion: reduce) {
  .pboot::before, .pboot__bg, .pboot__chip, .pboot__chip rect, .pboot__flash, .pboot__mark, .pboot__lines line, .pboot__node, .pboot__anchor, .pcardx, .pboot__title, .pboot__sub, .pboot__conn { animation: none; }
  .pboot__dots { width: auto; animation: none; }
}