/* ==========================================================================================
   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 owner's request: 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.
   ========================================================================================== */

/* ---- 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: 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: 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); }
.dorder__art { position: absolute; inset: 0 0 0 28%; background-size: cover; background-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: 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__name .acct-tag { flex: none; font-size: calc(.2 * var(--t)); font-weight: 400; color: rgba(255, 255, 255, .45); }
.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__n { position: absolute; right: .04rem; top: .02rem; font-size: calc(.14 * var(--t)); color: var(--mint-400); text-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; }
}

/* ---- 「请选择策略」 (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 container units ---- */
.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%); container-type: inline-size; }
.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: 3.2cqw; height: 3.2cqw; }
.pboot__mark .pmark__type { font-size: 1.3cqw; }
.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 .18cqw rgba(210, 255, 240, .45), 0 .4cqw 1.2cqw 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 1.1cqw); }
.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: .15cqw; padding: 0 1.3cqw; color: #0b2a21; }
.pcardx--r .pcardx__txt { align-items: flex-start; }
.pcardx__txt b { font-family: var(--font-num); font-size: 2.6cqw; font-weight: 700; line-height: 1; }
.pcardx__txt span { font-family: var(--font-num); font-size: .95cqw; font-weight: 700; letter-spacing: .05em; line-height: 1; }
.pcardx__txt i { width: 1.5cqw; height: 1.5cqw; margin-top: .35cqw; 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 .2cqw #e8fff7; }
.pcardx__face .pavatar { --pa: 100%; border: 0; }
.pboot__title { position: absolute; left: 0; right: 0; top: 66.4%; margin: 0; text-align: center; font-size: 4.4cqw; font-weight: 900; letter-spacing: .3cqw; line-height: 1.2;
  color: #4ff0c0; text-shadow: 0 0 1.2cqw 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: .12cqw 1.5cqw; font-family: var(--font-num); font-size: 1.3cqw; font-weight: 700;
  letter-spacing: .08cqw; 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: 1.6cqw; 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; }
}

/* ---- 本局信息 (GitHub issue #8 item 1, DESIGN §21.28): the read-only dialog -------
   The dialog shows the briefing's own blocks (.brief-bonds / .brief-legend / .brief-banned, css/screens/briefing.css)
   at the briefing's size on desktop; every size is max(design rem, px floor), so on a phone (1rem = 40 px) the text
   stays at ≥ 9–15 px and the dialog's body scrolls inside the screen (756×366, 844×390) while the header and the
   footer (the turn's countdown, 关闭) stay in view. */
.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 draft screen held on 已选定策略 after the last pick (screens/game.js DRAFT_HOLD_MS, PR #643): it fades out into the boot */
.draft.is-held { animation: draft-held-out 220ms ease-in 1380ms forwards; }
@keyframes draft-held-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .draft.is-held { animation: none; } }