/* ==========================================================================================
   screens/briefing.css — INFO_CHECK briefing (js/screens/briefing.js) + the pre-game step header
   shared with the band draft (js/ui/matchChrome.js StepHeader). Research 06 §4.1 / §11.6.
   The bond rows, the legend and the banned operators (.brief-bonds / .brief-legend / .brief-banned) are
   js/ui/matchInfo.js MatchInfo — also shown by the band draft's 本局信息 dialog (css/screens/draft.css .minfo-dlg).
   PR #643 (the event's pre-game, video 6:29–7:51): one column of sections under grey header
   bars, 已就绪 and the big 准备就绪 in the bottom-right corner; the header with the step on the left and the countdown on
   the right. Original drawings only (CSS / inline SVG).
   ========================================================================================== */

/* ---- shared pre-game backdrop + header ---- */
.brief__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px),
    radial-gradient(60% 50% at 8% 6%, rgba(160, 166, 170, .12), transparent 70%),
    radial-gradient(40% 30% at 96% 4%, rgba(63, 230, 180, .16), transparent 70%),
    radial-gradient(70% 60% at 90% 100%, rgba(120, 128, 132, .08), transparent 70%),
    linear-gradient(180deg, #0c0e0e, #090a0a);
}
.stephead {
  position: relative; z-index: 3; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: .3rem;
  height: 1.3rem; padding: 0 .5rem 0 .38rem;
  background: linear-gradient(180deg, rgba(5, 7, 7, .92), rgba(5, 7, 7, 0));
}
.stephead__left { display: flex; align-items: center; gap: .26rem; min-width: 0; }
.stephead__exit { display: flex; flex-direction: column; align-items: center; gap: .03rem; flex: none; }
.stephead__exit .btn--danger {
  --sq: .66rem; height: .66rem; --btn-bg: #d9dcdc; --btn-bg-hover: #f1f3f3; --btn-fg: #1a1d1e; --btn-bd: #f4f6f6; --btn-bd-hover: #fff;
  --btn-glow: rgba(255, 255, 255, .3); --bk-c: #fff; background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 .04rem .1rem rgba(0, 0, 0, .6);
}
.stephead__exit .ping { font-size: calc(.15 * var(--t)); }
.stephead__exit .ping__icon { display: none; }
.stephead__mode { display: flex; align-items: center; gap: .14rem; flex: none; }
.stephead__mode .dtag { font-size: calc(.26 * var(--t)); gap: .08rem; }
.stephead__mode .dtag__icon { width: .34rem; height: .34rem; }
.stephead__mode.has-extra { height: .52rem; padding: 0 .1rem 0 .16rem; border-radius: .26rem; background: rgba(60, 64, 66, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.stephead__info {
  display: inline-flex; align-items: center; gap: .05rem; height: .4rem; padding: 0 .12rem; border-radius: .2rem;
  font-size: calc(.2 * var(--t)); font-weight: 700; color: var(--text-hi); transition: background var(--t-fast);
}
.stephead__info:hover { background: rgba(255, 255, 255, .1); }
.stephead__info .icon { width: .26rem; height: .26rem; }
.stephead__sep { flex: none; width: 1px; height: .5rem; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .28), transparent); }
.stephead__title { display: flex; align-items: baseline; gap: .02rem; margin: 0; font-size: calc(.32 * var(--t)); font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.stephead__title b { font-size: calc(.54 * var(--t)); line-height: 1; color: var(--mint-400); text-shadow: 0 0 .16rem rgba(23, 249, 183, .35); }
.stephead__of { font-size: calc(.34 * var(--t)); color: var(--text-lo); margin-right: .16rem; }
.stephead__micro { align-self: flex-end; margin-bottom: .22rem; opacity: .35; white-space: nowrap; overflow: hidden; }
.draft .stephead__micro { display: none; }
.stephead__right { display: flex; align-items: center; gap: .24rem; min-width: 0; }
.stephead__right .countdown { --cd-h: .74rem; }
.stephead__status { min-width: 0; }

.brief-h { display: flex; align-items: baseline; gap: .12rem; font-size: calc(.21 * var(--t)); font-weight: 700; letter-spacing: .1em; margin-bottom: .12rem; }
.brief-h::before { content: ''; width: .06rem; height: .2rem; background: var(--mint-500); align-self: center; }

/* ---- the shared match-info blocks (briefing + the draft's 本局信息 dialog) ---- */
.brief-bonds { padding: .16rem .2rem .2rem; background: rgba(12, 15, 14, .8); border: 1px solid var(--line); }
.brief-bonds__row { display: flex; flex-wrap: wrap; gap: .16rem .1rem; }
.brief-bond { position: relative; min-width: 1rem; width: max-content; max-width: 100%; display: flex; justify-content: center; }
.brief-bond .bond { --disc: .66rem; max-width: 100%; }
.brief-bond .bond__name { font-size: calc(.16 * var(--t)); max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.brief-bond__ban { position: absolute; top: -.04rem; right: .08rem; display: inline-flex; align-items: center; gap: .01rem; font-size: calc(.12 * var(--t)); font-weight: 700; padding: 0 .05rem; background: var(--red); color: #fff; line-height: 1.5; box-shadow: 0 0 0 1px #000; }
.brief-bond__ban .icon { width: .12rem; height: .12rem; }
.brief-bond.is-partial .bond__core { box-shadow: 0 0 0 2px rgba(255, 84, 84, .5); }
/* the box beside a bond's tooltip (matchInfo.js BondBannedAside): its banned members with avatar, name and bonds */
.brief-bantip { display: flex; flex-direction: column; gap: .06rem; }
.brief-bantip__h { font-size: calc(.12 * var(--t)); font-weight: 700; letter-spacing: .06em; color: var(--red); }
.brief-bantip__op { display: flex; align-items: center; gap: .08rem; }
.brief-bantip__op .uthumb { flex: none; }
.brief-bantip__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.brief-bantip__txt b { font-size: calc(.14 * var(--t)); color: var(--text-hi); }
.brief-bantip__txt > span { font-size: calc(.12 * var(--t)); color: var(--text-lo); }
.brief-bantip__txt .is-this { color: var(--mint-400); }
.brief-legend { display: flex; align-items: center; gap: .08rem; flex-wrap: wrap; font-size: calc(.14 * var(--t)); color: var(--text-dim); margin-top: -.06rem; }
.brief-legend__off { width: .16rem; height: .16rem; border-radius: 50%; background: #3a403d; border: 2px solid #555; }
.brief-legend__ban { display: inline-grid; place-items: center; width: .2rem; height: .18rem; background: var(--red); color: #fff; }
.brief-legend__ban .icon { width: .12rem; height: .12rem; }

.brief-banned { padding: .16rem .2rem .2rem; background: rgba(12, 15, 14, .8); border: 1px solid var(--line); }
.brief-banned__n { margin-left: auto; font-size: calc(.22 * var(--t)); color: var(--red-premium); }
.brief-banned__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(.6rem, 1fr)); gap: .08rem; }
.brief-banned__grid .uthumb { --ut: .6rem; }
/* 0.2.0: the player's own 自选 pieces out of the shop this match (ui/matchInfo.js DiyBannedLine; m.private.diyBanned) */
.brief-banned__diy { margin: .1rem 0 0; font-size: calc(.14 * var(--t)); line-height: 1.5; color: var(--text-dim, #b8c2bf); }
.diybanned__tag { display: inline-block; margin-right: .06rem; padding: .01rem .06rem; font-size: calc(.12 * var(--t)); font-weight: 700;
  letter-spacing: .08em; background: var(--mint-500); color: var(--text-on-mint); vertical-align: .01rem; }

/* ---- briefing: one column of sections ---- */
/* a match with gameplay plugins (DESIGN §32.6): the unofficial mark under the step header */
.brief__modmark { position: relative; z-index: 2; align-self: flex-start; margin: .06rem .5rem 0; }
/* Two columns (server owner, 2026-10-30): 敌方遭遇 on the left, the bonds and the banned list on the right. The strategy
   draft's 本局信息 dialog stacks the same blocks in one column of its own (draft.css), so it is untouched. */
.brief__main {
  position: relative; z-index: 1; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 6.8rem minmax(0, 1fr); grid-auto-rows: min-content;
  align-content: start; align-items: start; gap: .2rem .36rem; padding: .06rem .5rem 1.5rem .56rem;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent;
}
.brief__col { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
/* The left column is about half the screen, so the enemy block stacks: portrait + text on the first row, the 特训敌人
   under them (the one-column dialog keeps its own 3-column grid, draft.css). Scoped a class deeper than
   `.brief .brief-enemy` so it wins wherever it sits in the file. */
/* the leader block reads as one card, as the reference layout draws it (orange-rimmed panel, portrait beside the text,
   特训敌人 under them) — the same shared markup the draft dialog stacks, scoped to this column only */
.brief .brief__col--left .brief-enemy {
  grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .18rem .2rem;
  padding: .22rem .24rem; border: 1px solid rgba(255, 110, 40, .3); border-radius: max(.06rem, 2px);
  background: linear-gradient(135deg, rgba(60, 18, 8, .55), rgba(12, 14, 13, .85) 60%);
}
.brief .brief__col--left .brief-enemy > .brief-factions { grid-column: 1 / -1; flex-wrap: wrap; padding: .14rem 0 0; }
@media (max-width: 1000px) { .brief__main { grid-template-columns: minmax(0, 1fr); } }
.brief-sec { flex: none; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(30, 33, 34, .55), rgba(14, 16, 16, .35)); }
.brief-sec > .brief-bonds, .brief-sec > .brief-banned { padding: 0; background: none; border: 0; }
/* the grey header bar: icon, title, a faint plate on the right; it grows with its title (§35.51 and its review: cut 2 px
   at 大 on phones and at 特大 in a 1024×600 window — at 小 / 中 the bar keeps its .66rem) */
.brief .brief-h {
  position: relative; display: flex; align-items: center; gap: .14rem; margin: 0; height: auto; min-height: .66rem; padding: 0 .3rem 0 .22rem;
  font-size: calc(.32 * var(--t)); font-weight: 700; letter-spacing: .06em; color: #f2f4f4;
  background: linear-gradient(90deg, rgba(122, 126, 128, .5), rgba(92, 96, 98, .42) 60%, rgba(80, 84, 86, .36));
}
.brief .brief-h::before {
  content: ''; flex: none; width: .44rem; height: .44rem; background: #e9ecec; align-self: center;
  -webkit-mask: var(--sec-icon) center / contain no-repeat; mask: var(--sec-icon) center / contain no-repeat;
}
.brief .brief-h .micro { margin-left: auto; padding-left: .5rem; opacity: .4; letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief .brief-h .micro::before { content: ''; display: inline-block; width: .2rem; height: .2rem; margin-right: .08rem; vertical-align: -.04rem;
  border: 2px solid currentColor; box-shadow: .3rem 0 0 -0px transparent; }
.brief .brief-banned__n { margin-left: .2rem; font-size: calc(.3 * var(--t)); }
.brief-sec--enemy { --sec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 1h2v3.2l3-1.7 1 1.7-3 1.8 4.6 2.7-1 1.7-4.6-2.6v2.4h3V22H8V10.2h3V7.8L6.4 10.4l-1-1.7L10 6 7 4.2l1-1.7 3 1.7z'/%3E%3C/svg%3E"); }
.brief-sec--core { --sec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l1.6 7.2L19.8 4l-4.2 6.2L23 12l-7.4 1.8 4.2 6.2-6.2-4.2L12 23l-1.6-7.2L4.2 20l4.2-6.2L1 12l7.4-1.8L4.2 4l6.2 4.2z'/%3E%3C/svg%3E"); }
.brief-sec--addon { --sec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 6l22-3-7 18-4-7-5 4 1-6zm6 3.6 6.3 2.8L19.5 5.6z'/%3E%3C/svg%3E"); }
.brief-sec--banned { --sec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2a3.2 3.2 0 1 1 0 6.4A3.2 3.2 0 0 1 9 2zM3 22v-6a6 6 0 0 1 10.4-4.1L12 13.3A4 4 0 0 0 5 16v6zm11.1-6.3 1.4-1.4 2.5 2.5 2.5-2.5 1.4 1.4-2.5 2.5 2.5 2.5-1.4 1.4-2.5-2.5-2.5 2.5-1.4-1.4 2.5-2.5z'/%3E%3C/svg%3E"); }

/* 本局遭遇敌方 (ui/matchEnemies.js MatchEnemies): portrait + 敌方领袖 | name, round, abilities, battlefield | the 特训敌人.
   Scoped under .brief: the draft's 本局信息 dialog shows the same markup stacked into its narrower column
   (css/screens/draft.css .minfo-dlg). */
.brief .brief-enemy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3rem .4rem; padding: .3rem .4rem .34rem .6rem; }
.brief .brief-boss { position: relative; display: flex; flex-direction: column; align-items: center; }
.brief .brief-boss__art {
  position: relative; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #6b3420, #2a120b 75%);
  box-shadow: 0 0 0 .04rem rgba(255, 110, 40, .55), 0 0 0 .07rem #1a1c1d, 0 0 .4rem rgba(255, 80, 30, .28);
}
/* the leader as a glowing badge (server owner, 2026-10-30): ring + radial glow + a slow dashed inner ring */
.brief .brief-boss__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 110, 40, .5); pointer-events: none;
  background: radial-gradient(circle, rgba(255, 60, 20, .25), transparent 65%); box-shadow: inset 0 0 .3rem rgba(255, 80, 30, .3); }
.brief .brief-boss__ring::after { content: ''; position: absolute; inset: .14rem; border-radius: 50%; border: 1px dashed rgba(255, 110, 40, .45);
  animation: brief-ring 18s linear infinite; }
@keyframes brief-ring { to { transform: rotate(360deg); } }
/* scanlines + vignette over the art, the event's own badge treatment */
.brief .brief-boss__art::after { content: ''; position: absolute; inset: 13%; border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 4px), radial-gradient(circle, transparent 45%, rgba(40, 8, 2, .75) 100%); }
.brief .brief-boss__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  filter: grayscale(1) sepia(1) hue-rotate(-28deg) saturate(3.2) brightness(.62) contrast(1.35); }
@media (prefers-reduced-motion: reduce) { .brief .brief-boss__ring::after { animation: none; } }
.brief .brief-boss__q { font-size: calc(1 * var(--t)); font-weight: 900; color: rgba(255, 140, 70, .6); }
/* over the portrait frame's shadow (a phone's larger type would otherwise lose the glyphs' tops under it) */
.brief .brief-boss__tag { position: relative; z-index: 1; margin-top: -.02rem; width: 2.05rem; padding: .03rem 0; text-align: center; font-size: calc(.2 * var(--t)); font-weight: 700; letter-spacing: .14em;
  color: #ffcf4a; background: linear-gradient(180deg, #5a4210, #3a2a08); box-shadow: inset 0 0 0 1px rgba(255, 207, 74, .25); }
.brief .brief-boss__text { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.brief .brief-boss__name { margin: 0; font-size: calc(.36 * var(--t)); font-weight: 900; letter-spacing: .04em; line-height: 1.25; }
.brief .brief-boss__when { font-size: calc(.17 * var(--t)); color: var(--orange-hi); }
.brief .brief-boss__abil { margin: .02rem 0 0; padding-left: .2rem; display: flex; flex-direction: column; gap: .04rem; font-size: calc(.18 * var(--t)); line-height: 1.55; color: #a9aeb0; }
.brief .brief-stage { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .08rem; margin-top: .04rem; font-size: calc(.16 * var(--t)); color: var(--text-lo); }
.brief .brief-stage .icon { width: .2rem; height: .2rem; color: var(--mint-500); }
.brief .brief-stage__name { color: var(--text-hi); }
.brief .brief-stage__pool { color: var(--text-dim); }
.brief .brief-factions { display: flex; align-items: flex-start; gap: .3rem; padding-right: .3rem; }
.brief .brief-faction { display: flex; flex-direction: column; align-items: center; gap: .14rem; width: 1.9rem; cursor: help; }
.brief .brief-faction__icon {
  width: 1.12rem; height: 1.12rem; display: grid; place-items: center; border-radius: 50%; outline: none; transition: box-shadow var(--t-fast);
  background: radial-gradient(circle at 50% 45%, #2a3a38, #121817 70%); box-shadow: 0 0 .22rem rgba(140, 255, 225, .14), inset 0 0 .16rem rgba(0, 0, 0, .7);
}
.brief .brief-faction__icon img { width: 78%; height: 78%; object-fit: contain; filter: grayscale(1) brightness(1.6) drop-shadow(0 0 .06rem rgba(160, 255, 230, .6)); }
.brief .brief-faction:hover .brief-faction__icon { box-shadow: 0 0 .26rem rgba(140, 255, 225, .32), inset 0 0 .16rem rgba(0, 0, 0, .7); }
.brief .brief-faction__icon:focus-visible { box-shadow: 0 0 0 .03rem var(--mint-400), 0 0 .26rem rgba(140, 255, 225, .32), inset 0 0 .16rem rgba(0, 0, 0, .7); }
/* the name under the icon; the description (GitHub #484: every special enemy type with its description) in the tooltip —
   hover, keyboard focus on the icon, a long press on touch — the maintainer's decision of 2026-10-22 (ui/matchEnemies.js) */
.brief .brief-faction__text { display: flex; flex-direction: column; align-items: center; gap: .04rem; min-width: 0; max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.brief .brief-faction__text b { font-size: calc(.22 * var(--t)); font-weight: 700; color: #e6eaea; }
/* Korean breaks a faction's name between words (§35.51 review: 「특훈 적 - 비|행」 on phones at 中) */
.brief .brief-faction__text:lang(ko) { word-break: keep-all; }
/* that tooltip (ui/components.js TooltipLayer, outside .brief: also the draft dialog's): the only place the description is
   shown, so it keeps the dialog's former 10 px floor on a phone, where 1rem is 40 px — [ASSUMED] the floor and width */
.tooltip.brief-faction__tip { max-width: max(3.8rem, min(calc(240px * var(--sp-ui, 1)), calc(100vw - 16px))); font-size: max(calc(.15 * var(--t)), 10px); }
/* the bond rows and banned operators at the event's size */
.brief .brief-bonds__row { gap: .24rem .3rem; padding: .32rem .4rem .3rem .78rem; }
.brief .brief-bond { min-width: 1.3rem; }
.brief .brief-bond .bond { --disc: 1.1rem; }
.brief .brief-bond .bond__name { font-size: calc(.22 * var(--t)); color: #d6dada; }
.brief .brief-bond__ban { font-size: calc(.14 * var(--t)); right: .1rem; }
.brief .brief-legend { margin: -.1rem .4rem .22rem .78rem; font-size: calc(.16 * var(--t)); }
.brief .brief-banned__grid { grid-template-columns: repeat(auto-fill, minmax(1.2rem, 1fr)); gap: .14rem; padding: .28rem .4rem .3rem .78rem; }
.brief .brief-banned__grid .uthumb { --ut: 1.2rem; }
.brief .brief-banned > .t-dim, .brief .brief-banned__diy { margin: .2rem .4rem .26rem .78rem; }

/* 已就绪 x/N over the bracketed pips, 准备就绪 */
.brief__foot {
  position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: flex-end; gap: .36rem;
  padding: .3rem .4rem .26rem; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(6, 8, 8, .78) 45%, rgba(6, 8, 8, .92));
}
.brief__foot > * { pointer-events: auto; }
.brief-ready { display: flex; flex-direction: column; align-items: center; gap: .06rem; }
.brief-ready__txt { display: flex; align-items: baseline; gap: .06rem; font-size: calc(.24 * var(--t)); color: #e6eaea; }
.brief-ready__txt b { margin-left: .08rem; font-size: calc(.5 * var(--t)); line-height: 1; color: var(--mint-400); text-shadow: 0 0 .12rem rgba(23, 249, 183, .4); }
.brief-ready__txt span { font-size: calc(.34 * var(--t)); color: #d6dada; }
.brief-ready__pips { position: relative; display: flex; gap: .04rem; padding: 0 .1rem; }
.brief-ready__pips::before, .brief-ready__pips::after { content: ''; position: absolute; top: -.02rem; bottom: -.02rem; width: .07rem; border: 2px solid rgba(255, 255, 255, .3); }
.brief-ready__pips::before { left: 0; border-right: 0; }
.brief-ready__pips::after { right: 0; border-left: 0; }
.brief-ready__pips i { width: .34rem; height: .4rem; display: grid; place-items: center; color: #4c5152; transition: color var(--t-med), filter var(--t-med); }
.brief-ready__pips i .icon { width: 100%; height: 100%; }
.brief-ready__pips i.on { color: var(--mint-400); filter: drop-shadow(0 0 .06rem rgba(23, 249, 183, .6)); animation: brief-pip .5s var(--pg-ease); }
@keyframes brief-pip { from { transform: translateY(-.08rem) scale(1.3); filter: brightness(2.2); } }
.brief-go.btn--xl { height: .98rem; min-width: 3.9rem; padding: 0 .5rem 0 .3rem; justify-content: flex-start; font-size: calc(.38 * var(--t)); letter-spacing: .08em;
  --btn-bg: #33d6a5; --btn-bg-hover: #4ee6b8; box-shadow: 0 0 0 .03rem rgba(255, 255, 255, .85), 0 .06rem .2rem rgba(0, 0, 0, .55); }
.brief-go .btn__icon { width: .44rem; height: .44rem; }
.brief-go.is-active, .brief-go:disabled { --btn-bg: #3f4344; --btn-fg: #f2f4f4; --btn-bd: #6b7071; box-shadow: 0 0 0 .03rem rgba(255, 255, 255, .55); opacity: 1; }
.brief-go.is-loading { --btn-bg: var(--mint-700); }

/* Full setup reroll: consent stays visible alongside the information being confirmed — above the absolute
   .brief__foot (its height kept free below), never over 准备就绪. */
.brief-reroll {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: .2rem;
  /* the foot's height grows with 文字大小 (about .73rem + .56 × --t above its content): the bottom margin keeps 已就绪 x/N
     clear at 中 – 特大 on phones and short windows too (§35.56: the note ran over 2/2 at 大 / 特大 in English, Japanese
     and Korean) */
  margin: .1rem .5rem max(1.6rem, calc(.76rem + .58 * var(--t))); padding: .14rem .2rem;
  background: rgba(12, 15, 14, .9); border: 1px solid var(--mint-700);
}
.brief-reroll__text { display: flex; flex-direction: column; gap: .05rem; min-width: 0; font-size: calc(.16 * var(--t)); }
.brief-reroll__text strong { font-size: calc(.2 * var(--t)); color: var(--mint-400); }
.brief-reroll__text > span { color: var(--text-lo); }
.brief-reroll__players { display: flex; flex-wrap: wrap; gap: .08rem .2rem; color: var(--text-dim); }
.brief-reroll__players .is-agreed { color: var(--mint-400); }
.brief-reroll__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem; flex-shrink: 0; }
@media (max-width: 900px) {
  .brief-reroll { margin-inline: .3rem; gap: .1rem; padding: .1rem .14rem; }
  .brief-reroll__actions { flex-shrink: 1; }
  .brief-reroll__actions .btn { min-height: .44rem; padding-inline: .12rem; }
}

/* short landscape phones (≤ 520 CSS px tall) at a big 文字大小 (§35.51; §35.18's leftovers): the header's decorative
   BRIEFING // INFO CHECK gives way (cut at its end and over COUNTDOWN at 大 / 特大), 玩法说明 keeps its book (its label was
   cut 4–7 px at 特大; the name stays its title and accessible name) */
@media (max-height: 520px) {
  .stephead__micro { display: none; }
  .stephead__guide .btn__label { display: none; }
  /* 确认本局信息's step name takes two lines before it runs under 玩法说明 and COUNTDOWN (§35.56: English 「Confirm Match
     Info」 and Korean 「이번 시뮬레이션 정보 확인」 at 大 / 特大 on 640–740 px phones); the header grows with it */
  .brief .stephead { height: auto; min-height: 1.3rem; }
  .brief .stephead__left, .brief .stephead__title { min-width: 0; }
  .brief .stephead__name { min-width: 0; white-space: normal; text-wrap: balance; line-height: 1.1; }
  .brief .stephead__name:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
  .brief .stephead__name:lang(ja) { line-break: strict; }
}
/* … and in a short desktop window (≤ 640 px tall: 1024×600) at 大 / 特大 (§35.51 review: the micro cut and over 玩法说明 there) */
@media (max-height: 640px) {
  :root[data-text="lg"] .stephead__micro, :root[data-text="xl"] .stephead__micro { display: none; }
  /* 玩法说明 keeps its book there too (English 「How to Play」 ran past its button on the draft) */
  :root[data-text="lg"] .stephead__guide .btn__label, :root[data-text="xl"] .stephead__guide .btn__label { display: none; }
}

/* the pre-game screens' motion (also css/screens/draft.css); none with reduced motion */
.brief, .draft { --pg-ease: cubic-bezier(.16, .84, .3, 1); }
@keyframes pg-fade { from { opacity: 0; } }
@keyframes pg-out { to { opacity: 0; } }
@keyframes pg-right { from { opacity: 0; transform: translateX(.36rem); } }
@keyframes pg-left { from { opacity: 0; transform: translateX(-.36rem); } }
@keyframes pg-rise { from { opacity: 0; transform: translateY(.22rem); } }
@keyframes pg-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes pg-card { from { opacity: 0; transform: translateY(.16rem) scale(1.03); } }
@keyframes pg-glow { 20% { box-shadow: 0 0 .5rem rgba(120, 255, 215, .9), 0 0 .12rem #b9ffe9; border-color: #b9ffe9; } }
@keyframes pg-dots { to { width: 1.1em; } }

/* ---- 开局转场 (the event's): the header drops in, the sections come in from the right one after another, the corner
   controls rise ---- */
.brief .stephead, .draft .stephead { animation: pg-fade 360ms var(--pg-ease) backwards; }
.stephead__title { animation: pg-right 420ms var(--pg-ease) 120ms backwards; }
.brief-sec { animation: pg-right 460ms var(--pg-ease) backwards; animation-delay: calc(160ms + var(--i, 0) * 80ms); }
.brief-sec .brief-bonds__row > *, .brief-sec .brief-banned__grid > * { animation: pg-pop 340ms var(--pg-ease) backwards; animation-delay: calc(360ms + var(--i, 0) * 80ms); }
.brief__foot .brief-ready, .brief__foot .brief-loadout { animation: pg-rise 420ms var(--pg-ease) 420ms backwards; }
/* opens from its left edge by a transform (a scaleX from its left, held by the backwards fill until it starts): the
   button takes taps only where it is drawn at that moment, and the corner's other controls stay put */
.brief-go { transform-origin: left center; animation: brief-go-in 520ms var(--pg-ease) 480ms backwards; }
@keyframes brief-go-in { 0% { opacity: 0; transform: scaleX(.08); filter: brightness(2.2); } 60% { opacity: 1; transform: none; filter: brightness(1.5); } }
@media (prefers-reduced-motion: reduce) {
  .brief .stephead, .draft .stephead, .stephead__title, .brief-sec, .brief-sec .brief-bonds__row > *, .brief-sec .brief-banned__grid > *,
  .brief__foot .brief-ready, .brief__foot .brief-loadout, .brief-go, .brief-ready__pips i.on { animation: none; }
}

/* official versions (DESIGN §35.23): the version's tag beside the 非官方 mark */
.brief__vertag { position: relative; z-index: 2; align-self: flex-start; margin: .06rem .5rem 0; }

/* ---- 2026-10-25 服主补丁：电脑版把这页整体缩小（保留 v0.3.2 的单列结构）----
   v0.3.2 相对 v0.3.1 把这一页全面放大：敌方立绘 2rem→2.3rem、盟约圆盘 .66rem→1.1rem、
   盟约名 .16t→.22t、区块标题新增 .32t 大字号、区块间距也变大 ⇒ 电脑上占满整屏、显得空。
   **宽窗口（≥960px，电脑版）**：保持单列，但把上述尺寸收回接近 v0.3.1 的密度。
   **窄窗口（<960px，手机）**：保留 v0.3.2 原尺寸。
   ⚠️ 不用 html.sp-coarse：device.js 的 coarse 取 (any-pointer: coarse)，带触摸屏的笔记本即使主用鼠标也会命中；
   ⚠️ 也不用 grid 两栏重排：v0.3.2 的 section 是单列流式的，强行分栏会重叠（2026-10-25 实测），
      所以只缩尺寸、不动布局。纯 CSS，不改 JS、不改 DOM。 */
@media (min-width: 960px) {
  .brief__main { gap: .14rem; padding: .04rem .42rem 1.2rem .46rem; }

  /* 区块标题：.32t → .24t，灰条高度 .66rem → .46rem */
  .brief .brief-h { font-size: calc(.24 * var(--t)); min-height: .46rem; padding: 0 .24rem 0 .18rem; }

  /* 敌方区块：立绘 2.3rem → 1.55rem，内边距收紧 */
  .brief .brief-boss__art { width: 1.55rem; height: 1.55rem; }
  .brief .brief-enemy { gap: .18rem .3rem; padding: .2rem .3rem .24rem .4rem; }
  .brief .brief-boss__name { font-size: max(calc(.26 * var(--t)), 14px); }
  .brief .brief-boss__when { font-size: max(calc(.13 * var(--t)), 10px); }
  .brief .brief-boss__abil { font-size: max(calc(.12 * var(--t)), 10px); padding-left: .24rem; }
  .brief .brief-boss__tag { font-size: max(.11rem, 9px); }
  .brief .brief-faction__icon { width: max(.56rem, 30px); height: max(.56rem, 30px); }
  .brief .brief-faction__text b { font-size: max(calc(.16 * var(--t)), 11px); }
  .brief .brief-stage__name { font-size: max(calc(.16 * var(--t)), 11px); }

  /* 盟约圆盘：完全按 v0.3.1 的尺寸（1.1rem→.66rem、名字 .22t→.16t、徽章 .14t→.12t）
     —— 圆盘回到 66px 后，右上的 ✕ 落盘外、右上内侧的 👤N 落盘内，两个标记自然分开，无需挪位置 */
  .brief .brief-bond .bond { --disc: .66rem; }
  .brief .brief-bond { min-width: 1rem; }
  .brief .brief-bond__name { font-size: calc(.16 * var(--t)); }
  .brief .brief-bond__ban { font-size: calc(.12 * var(--t)); right: .08rem; }
  .brief-bonds__row { gap: .16rem .1rem; padding: .14rem .2rem .16rem .2rem; }

  /* 落选图例与禁用干员头像 */
  .brief .brief-legend { font-size: max(calc(.12 * var(--t)), 10px); }
  .brief .brief-banned__grid { grid-template-columns: repeat(auto-fill, minmax(max(.52rem, 30px), 1fr)); gap: max(.06rem, 3px); }
  .brief .brief-banned__grid .uthumb { --ut: max(.52rem, 30px); }
  .brief .brief-banned__n { font-size: calc(.2 * var(--t)); }
}